mirror of
https://gitee.com/vant-contrib/vant.git
synced 2026-07-11 08:41:05 +08:00
Compare commits
2 Commits
ec2ff59270
...
c1bdba5213
| Author | SHA1 | Date | |
|---|---|---|---|
|
c1bdba5213 | ||
|
|
3a56703cb0 |
@ -6,30 +6,38 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Name"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Phone
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="tel"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Phone"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,16 +47,20 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Area
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Area"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -57,15 +69,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field van-address-edit-detail">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<textarea rows="1"
|
||||
<textarea id="van-field-input"
|
||||
rows="1"
|
||||
class="van-field__control"
|
||||
placeholder="Address"
|
||||
aria-labelledby="van-field-label"
|
||||
style="height: auto;"
|
||||
>
|
||||
</textarea>
|
||||
@ -74,15 +90,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Postal
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="tel"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Postal"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,30 +11,38 @@ exports[`should render AddressEdit correctly 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Name"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Phone
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="tel"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Phone"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,16 +52,20 @@ exports[`should render AddressEdit correctly 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Area
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Area"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,15 +74,19 @@ exports[`should render AddressEdit correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field van-address-edit-detail">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<textarea rows="1"
|
||||
<textarea id="van-field-input"
|
||||
rows="1"
|
||||
class="van-field__control"
|
||||
placeholder="Address"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</textarea>
|
||||
</div>
|
||||
@ -96,30 +112,38 @@ exports[`should render AddressEdit with props correctly 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Name"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Phone
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="tel"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Phone"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -129,16 +153,20 @@ exports[`should render AddressEdit with props correctly 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Area
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Area"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -147,15 +175,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field van-address-edit-detail">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<textarea rows="1"
|
||||
<textarea id="van-field-input"
|
||||
rows="1"
|
||||
class="van-field__control"
|
||||
placeholder="Address"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</textarea>
|
||||
</div>
|
||||
@ -163,15 +195,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Postal
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="tel"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Postal"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -209,15 +245,19 @@ exports[`should render AddressEdit with props correctly 1`] = `
|
||||
exports[`should valid address detail and render error message correctly 1`] = `
|
||||
<div class="van-cell van-field van-address-edit-detail">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<textarea rows="1"
|
||||
<textarea id="van-field-input"
|
||||
rows="1"
|
||||
class="van-field__control"
|
||||
placeholder="Address"
|
||||
aria-labelledby="van-field-label"
|
||||
style="height: auto;"
|
||||
>
|
||||
</textarea>
|
||||
@ -235,16 +275,20 @@ exports[`should valid area code and render error message correctly 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Area
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Area"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
<div class="van-field__error-message">
|
||||
@ -259,15 +303,19 @@ exports[`should valid area code and render error message correctly 1`] = `
|
||||
exports[`should valid name and render error message correctly 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Name"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
<div class="van-field__error-message">
|
||||
@ -280,15 +328,19 @@ exports[`should valid name and render error message correctly 1`] = `
|
||||
exports[`should valid postal code and render error message correctly 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Postal
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="tel"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Postal"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
<div class="van-field__error-message">
|
||||
@ -301,15 +353,19 @@ exports[`should valid postal code and render error message correctly 1`] = `
|
||||
exports[`should valid tel and render error message correctly 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Phone
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="tel"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Phone"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
<div class="van-field__error-message">
|
||||
|
||||
@ -7,16 +7,20 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Area
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select Area"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,16 +34,20 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Area
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select Area"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,16 +61,20 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Area
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select Area"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -76,16 +88,20 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Area
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select Area"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -99,16 +115,20 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Area
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select Area"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,7 +62,8 @@ exports[`should update tabs when previous tab is clicked 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-cascader__tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
@ -71,7 +72,8 @@ exports[`should update tabs when previous tab is clicked 1`] = `
|
||||
Jiangsu
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
@ -92,8 +94,11 @@ exports[`should update tabs when previous tab is clicked 1`] = `
|
||||
class="van-swipe__track"
|
||||
>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div class="van-tab__pane">
|
||||
@ -114,8 +119,11 @@ exports[`should update tabs when previous tab is clicked 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="0"
|
||||
aria-hidden="false"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div class="van-tab__pane">
|
||||
|
||||
15
packages/vant/src/composables/use-id.ts
Normal file
15
packages/vant/src/composables/use-id.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
let current = 0;
|
||||
|
||||
export function useId() {
|
||||
const vm = getCurrentInstance();
|
||||
const { name = 'unknown' } = vm?.type || {};
|
||||
|
||||
// keep jest snapshot stable
|
||||
if (process.env.NODE_ENV === 'test') {
|
||||
return name;
|
||||
}
|
||||
|
||||
return `${name}-${++current}`;
|
||||
}
|
||||
@ -5,7 +5,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Rate
|
||||
</label>
|
||||
</div>
|
||||
@ -75,7 +77,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Slider
|
||||
</label>
|
||||
</div>
|
||||
@ -123,7 +127,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Rate
|
||||
</label>
|
||||
</div>
|
||||
@ -193,7 +199,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Slider
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -6,30 +6,38 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-contact-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Name"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Phone
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="tel"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Phone"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,6 +7,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Coupon code"
|
||||
>
|
||||
@ -30,19 +31,23 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Available (6)
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Unavailable (2)
|
||||
@ -55,8 +60,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
@ -260,8 +268,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -288,6 +299,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Coupon code"
|
||||
>
|
||||
@ -311,19 +323,23 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Available (0)
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Unavailable (0)
|
||||
@ -336,8 +352,11 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
@ -351,8 +370,11 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
@ -389,6 +411,7 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Coupon code"
|
||||
>
|
||||
@ -412,19 +435,23 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Available (0)
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Unavailable (0)
|
||||
@ -437,8 +464,11 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
@ -453,8 +483,11 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
List Footer
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
@ -492,6 +525,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Coupon code"
|
||||
>
|
||||
@ -515,19 +549,23 @@ exports[`should use custom src when using empty-image prop 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Available (0)
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Unavailable (0)
|
||||
@ -540,8 +578,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
@ -555,8 +596,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -18,28 +18,34 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Error
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Network
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Search
|
||||
@ -52,8 +58,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-empty">
|
||||
@ -65,13 +74,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -39,6 +39,7 @@ import { cellSharedProps } from '../cell/Cell';
|
||||
|
||||
// Composables
|
||||
import { CUSTOM_FIELD_INJECTION_KEY, useParent } from '@vant/use';
|
||||
import { useId } from '../composables/use-id';
|
||||
import { useExpose } from '../composables/use-expose';
|
||||
|
||||
// Components
|
||||
@ -128,6 +129,7 @@ export default defineComponent({
|
||||
],
|
||||
|
||||
setup(props, { emit, slots }) {
|
||||
const id = useId();
|
||||
const state = reactive({
|
||||
focused: false,
|
||||
validateFailed: false,
|
||||
@ -376,6 +378,8 @@ export default defineComponent({
|
||||
emit('keypress', event);
|
||||
};
|
||||
|
||||
const getInputId = () => props.id || `${id}-input`;
|
||||
|
||||
const renderInput = () => {
|
||||
const controlClass = bem('control', [
|
||||
getProp('inputAlign'),
|
||||
@ -395,7 +399,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
const inputAttrs = {
|
||||
id: props.id,
|
||||
id: getInputId(),
|
||||
ref: inputRef,
|
||||
name: props.name,
|
||||
rows: props.rows !== undefined ? +props.rows : undefined,
|
||||
@ -406,6 +410,7 @@ export default defineComponent({
|
||||
autofocus: props.autofocus,
|
||||
placeholder: props.placeholder,
|
||||
autocomplete: props.autocomplete,
|
||||
'aria-labelledby': props.label ? `${id}-label` : undefined,
|
||||
onBlur,
|
||||
onFocus,
|
||||
onInput,
|
||||
@ -491,7 +496,11 @@ export default defineComponent({
|
||||
return [slots.label(), colon];
|
||||
}
|
||||
if (props.label) {
|
||||
return <label for={props.id}>{props.label + colon}</label>;
|
||||
return (
|
||||
<label id={`${id}-label`} for={getInputId()}>
|
||||
{props.label + colon}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -250,7 +250,7 @@ Use `input-align` prop to align the input value.
|
||||
| v-model | Input value | _number \| string_ | - |
|
||||
| label | Left side label | _string_ | - |
|
||||
| name | As the identifier when submitting the form | _string_ | - |
|
||||
| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | - |
|
||||
| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | `van-field-n-input` |
|
||||
| type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | _string_ | `text` |
|
||||
| size | Size，can be set to `large` | _string_ | - |
|
||||
| maxlength | Max length of value | _number \| string_ | - |
|
||||
|
||||
@ -269,7 +269,7 @@ export default {
|
||||
| v-model | 当前输入的值 | _number \| string_ | - |
|
||||
| label | 输入框左侧文本 | _string_ | - |
|
||||
| name | 名称，作为提交表单时的标识符 | _string_ | - |
|
||||
| id `v3.2.2` | 输入框 id，同时会设置 label 的 for 属性 | _string_ | - |
|
||||
| id `v3.2.2` | 输入框 id，同时会设置 label 的 for 属性 | _string_ | `van-field-n-input` |
|
||||
| type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | _string_ | `text` |
|
||||
| size | 大小，可选值为 `large` | _string_ | - |
|
||||
| maxlength | 输入的最大字符数 | _number \| string_ | - |
|
||||
|
||||
@ -5,15 +5,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Label
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Text"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -24,37 +28,47 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Text"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Phone
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="tel"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Phone"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Digit
|
||||
</label>
|
||||
</div>
|
||||
@ -62,15 +76,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-field__body">
|
||||
<input type="tel"
|
||||
inputmode="numeric"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Digit"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Number
|
||||
</label>
|
||||
</div>
|
||||
@ -78,23 +96,29 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
inputmode="decimal"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Number"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="password"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Password"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -105,30 +129,38 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--disabled">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
disabled
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -143,15 +175,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Show Icon"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
<div class="van-field__right-icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-warning-o">
|
||||
@ -166,15 +202,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Show Clear Icon"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -185,30 +225,38 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__title van-field__label van-field__label--required">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control van-field__control--error"
|
||||
placeholder="Username"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label van-field__label--required">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Phone
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Phone"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
<div class="van-field__error-message">
|
||||
@ -222,15 +270,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-cell--center van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
SMS
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="SMS"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
<div class="van-field__button">
|
||||
<button type="button"
|
||||
@ -252,30 +304,38 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Format On Change"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Format On Blur"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -287,7 +347,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<textarea rows="1"
|
||||
<textarea id="van-field-input"
|
||||
rows="1"
|
||||
class="van-field__control"
|
||||
placeholder="Message"
|
||||
style="height: auto;"
|
||||
@ -302,15 +363,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Message
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<textarea rows="2"
|
||||
<textarea id="van-field-input"
|
||||
rows="2"
|
||||
class="van-field__control"
|
||||
placeholder="Message"
|
||||
aria-labelledby="van-field-label"
|
||||
style="height: auto;"
|
||||
>
|
||||
</textarea>
|
||||
@ -329,15 +394,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control van-field__control--right"
|
||||
placeholder="Input Align Right"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,9 @@ exports[`should change clear icon when using clear-icon prop 1`] = `
|
||||
|
||||
exports[`should render colon when using colon prop 1`] = `
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
foo:
|
||||
</label>
|
||||
</div>
|
||||
@ -24,6 +26,7 @@ exports[`should render extra slot correctly 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
>
|
||||
</div>
|
||||
@ -48,7 +51,8 @@ exports[`should render textarea when type is textarea 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<textarea class="van-field__control"
|
||||
<textarea id="van-field-input"
|
||||
class="van-field__control"
|
||||
style="height: auto;"
|
||||
>
|
||||
</textarea>
|
||||
@ -62,6 +66,7 @@ exports[`should render word limit correctly 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
>
|
||||
</div>
|
||||
@ -80,6 +85,7 @@ exports[`should render word limit correctly when modelValue is null 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
>
|
||||
</div>
|
||||
@ -98,6 +104,7 @@ exports[`should render word limit correctly when modelValue is undefined 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -6,32 +6,40 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="username"
|
||||
class="van-field__control"
|
||||
placeholder="Username"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="password"
|
||||
id="van-field-input"
|
||||
name="password"
|
||||
class="van-field__control"
|
||||
placeholder="Password"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -55,64 +63,80 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Label
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="pattern"
|
||||
class="van-field__control"
|
||||
placeholder="Use pattern"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Label
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="validator"
|
||||
class="van-field__control"
|
||||
placeholder="Use validator"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Label
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="validatorMessage"
|
||||
class="van-field__control"
|
||||
placeholder="Use validator to return message"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Label
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="asyncValidator"
|
||||
class="van-field__control"
|
||||
placeholder="Use async validator"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -136,7 +160,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell-group van-cell-group--inset">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Switch
|
||||
</label>
|
||||
</div>
|
||||
@ -157,7 +183,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Checkbox
|
||||
</label>
|
||||
</div>
|
||||
@ -180,7 +208,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Checkbox Group
|
||||
</label>
|
||||
</div>
|
||||
@ -221,7 +251,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Radio
|
||||
</label>
|
||||
</div>
|
||||
@ -264,7 +296,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Stepper
|
||||
</label>
|
||||
</div>
|
||||
@ -298,7 +332,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Rate
|
||||
</label>
|
||||
</div>
|
||||
@ -368,7 +404,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Slider
|
||||
</label>
|
||||
</div>
|
||||
@ -398,7 +436,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Uploader
|
||||
</label>
|
||||
</div>
|
||||
@ -442,17 +482,21 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Picker
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="picker"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select city"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -464,17 +508,21 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Datetime Picker
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="datetimePicker"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select time"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -486,17 +534,21 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Area Picker
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="area"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select area"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -508,17 +560,21 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Calendar
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="calendar"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Select date"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,6 +6,7 @@ exports[`should emit failed event when validating failed 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="A"
|
||||
class="van-field__control"
|
||||
>
|
||||
@ -19,6 +20,7 @@ exports[`should emit failed event when validating failed 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="B"
|
||||
class="van-field__control"
|
||||
>
|
||||
|
||||
@ -4,14 +4,18 @@ exports[`should render colon when using colon prop 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Label:
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -23,6 +27,7 @@ exports[`should render colon when using colon prop 1`] = `
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
>
|
||||
</div>
|
||||
@ -37,6 +42,7 @@ exports[`should render error-message-align prop correctly 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
>
|
||||
</div>
|
||||
@ -54,6 +60,7 @@ exports[`should render input-align prop correctly 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control van-field__control--right"
|
||||
>
|
||||
</div>
|
||||
@ -76,28 +83,36 @@ exports[`should render label-align prop correctly 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field van-field--label-right">
|
||||
<div class="van-cell__title van-field__label van-field__label--right">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Label
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--label-center">
|
||||
<div class="van-cell__title van-field__label van-field__label--center">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Label
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -111,14 +126,18 @@ exports[`should render label-width prop correctly 1`] = `
|
||||
<div class="van-cell__title van-field__label"
|
||||
style="width: 5rem;"
|
||||
>
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Label
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -127,14 +146,18 @@ exports[`should render label-width prop correctly 1`] = `
|
||||
<div class="van-cell__title van-field__label"
|
||||
style="width: 10vw;"
|
||||
>
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Label
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -148,6 +171,7 @@ exports[`should validate first field when using validate-first prop 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="A"
|
||||
class="van-field__control"
|
||||
>
|
||||
@ -161,6 +185,7 @@ exports[`should validate first field when using validate-first prop 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="B"
|
||||
class="van-field__control"
|
||||
>
|
||||
|
||||
@ -9,37 +9,45 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Demo
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Basic
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Outline
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Filled
|
||||
@ -54,8 +62,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div>
|
||||
@ -130,18 +141,27 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-3"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -7,19 +7,23 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Basic Usage
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Custom Index List
|
||||
@ -32,8 +36,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-index-bar">
|
||||
@ -901,8 +908,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -7,28 +7,34 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Basic Usage
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Error Info
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
PullRefresh
|
||||
@ -41,8 +47,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div role="feed"
|
||||
@ -72,13 +81,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -79,16 +79,20 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Bind Value
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Click To Input"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -679,16 +679,20 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
City
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
placeholder="Choose City"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -31,16 +31,20 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title van-field__label">
|
||||
<label>
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Placement
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
name="picker"
|
||||
class="van-field__control"
|
||||
readonly
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,28 +7,34 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Basic Usage
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Success Tip
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Custom Tips
|
||||
@ -41,8 +47,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-pull-refresh">
|
||||
@ -57,13 +66,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -12,6 +12,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="search"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Placeholder"
|
||||
>
|
||||
@ -33,6 +34,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="search"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Placeholder"
|
||||
>
|
||||
@ -60,6 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="search"
|
||||
id="van-field-input"
|
||||
class="van-field__control van-field__control--center"
|
||||
placeholder="Placeholder"
|
||||
>
|
||||
@ -80,6 +83,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="search"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
disabled
|
||||
placeholder="Placeholder"
|
||||
@ -103,6 +107,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="search"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Placeholder"
|
||||
>
|
||||
@ -126,6 +131,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="search"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Placeholder"
|
||||
>
|
||||
|
||||
@ -34,6 +34,7 @@ exports[`should render left slot correctly 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="search"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -22,6 +22,8 @@ import { TABS_KEY } from '../tabs/Tabs';
|
||||
|
||||
// Composables
|
||||
import { useParent } from '@vant/use';
|
||||
import { useId } from '../composables/use-id';
|
||||
import { useExpose } from '../composables/use-expose';
|
||||
import { routeProps } from '../composables/use-route';
|
||||
import { TAB_STATUS_KEY } from '../composables/use-tab-status';
|
||||
|
||||
@ -49,6 +51,7 @@ export default defineComponent({
|
||||
props: tabProps,
|
||||
|
||||
setup(props, { slots }) {
|
||||
const id = useId();
|
||||
const inited = ref(false);
|
||||
const { parent, index } = useParent(TABS_KEY);
|
||||
|
||||
@ -92,6 +95,7 @@ export default defineComponent({
|
||||
provide(TAB_STATUS_KEY, active);
|
||||
|
||||
return () => {
|
||||
const label = `${parent.id}-${index.value}`;
|
||||
const { animated, swipeable, scrollspy, lazyRender } = parent.props;
|
||||
|
||||
if (!slots.default && !animated) {
|
||||
@ -103,9 +107,12 @@ export default defineComponent({
|
||||
if (animated || swipeable) {
|
||||
return (
|
||||
<SwipeItem
|
||||
id={id}
|
||||
role="tabpanel"
|
||||
aria-hidden={!active.value}
|
||||
class={bem('pane-wrapper', { inactive: !active.value })}
|
||||
tabindex={active.value ? 0 : -1}
|
||||
aria-hidden={!active.value}
|
||||
aria-labelledby={label}
|
||||
>
|
||||
<div class={bem('pane')}>{slots.default?.()}</div>
|
||||
</SwipeItem>
|
||||
@ -115,8 +122,17 @@ export default defineComponent({
|
||||
const shouldRender = inited.value || scrollspy || !lazyRender;
|
||||
const Content = shouldRender ? slots.default?.() : null;
|
||||
|
||||
useExpose({ id });
|
||||
|
||||
return (
|
||||
<div v-show={show} role="tabpanel" class={bem('pane')}>
|
||||
<div
|
||||
v-show={show}
|
||||
id={id}
|
||||
role="tabpanel"
|
||||
class={bem('pane')}
|
||||
tabindex={show ? 0 : -1}
|
||||
aria-labelledby={label}
|
||||
>
|
||||
{Content}
|
||||
</div>
|
||||
);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,13 +2,19 @@
|
||||
|
||||
exports[`should allow to disable lazy-render prop 1`] = `
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -17,14 +23,20 @@ exports[`should allow to disable lazy-render prop 1`] = `
|
||||
|
||||
exports[`should allow to disable lazy-render prop 2`] = `
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
Text
|
||||
@ -39,28 +51,34 @@ exports[`should allow to set name prop 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title1
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title2
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title3
|
||||
@ -73,19 +91,28 @@ exports[`should allow to set name prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -103,9 +130,12 @@ DOMWrapper {
|
||||
"_values": Object {},
|
||||
},
|
||||
"wrapperElement": <div
|
||||
aria-labelledby="van-tabs-0"
|
||||
class="van-tab__pane"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
style=""
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
Text
|
||||
@ -120,10 +150,12 @@ exports[`should not render empty tab 1`] = `
|
||||
`;
|
||||
|
||||
exports[`should render badge prop correctly 1`] = `
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<div class="van-badge__wrapper">
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
@ -142,10 +174,12 @@ exports[`should render nav-left、nav-right slot correctly 1`] = `
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
Custom nav left
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Title
|
||||
@ -167,28 +201,34 @@ exports[`should switch tab after click the tab title 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title1
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title2
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title3
|
||||
@ -201,19 +241,28 @@ exports[`should switch tab after click the tab title 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -228,28 +277,34 @@ exports[`should switch tab after click the tab title 2`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title1
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title2
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title3
|
||||
@ -262,20 +317,29 @@ exports[`should switch tab after click the tab title 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -290,7 +354,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
@ -299,7 +364,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
|
||||
title1
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
@ -308,7 +374,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
|
||||
title2
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
@ -329,8 +396,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
|
||||
class="van-swipe__track"
|
||||
>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="0"
|
||||
aria-hidden="false"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div class="van-tab__pane">
|
||||
@ -338,8 +408,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div class="van-tab__pane">
|
||||
@ -347,8 +420,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="width: 100px;"
|
||||
>
|
||||
</div>
|
||||
@ -365,7 +441,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
@ -374,7 +451,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
|
||||
title1
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
@ -383,7 +461,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
|
||||
title2
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
@ -404,8 +483,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
|
||||
class="van-swipe__track"
|
||||
>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div class="van-tab__pane">
|
||||
@ -413,8 +495,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="0"
|
||||
aria-hidden="false"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div class="van-tab__pane">
|
||||
@ -422,8 +507,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div class="van-tab__pane">
|
||||
@ -443,7 +531,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
@ -452,7 +541,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
|
||||
title1
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
@ -461,7 +551,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
|
||||
title2
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
@ -482,8 +573,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
|
||||
class="van-swipe__track"
|
||||
>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div class="van-tab__pane">
|
||||
@ -491,8 +585,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="0"
|
||||
aria-hidden="false"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div class="van-tab__pane">
|
||||
@ -500,8 +597,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="width: 100px;"
|
||||
>
|
||||
<div class="van-tab__pane">
|
||||
|
||||
@ -7,28 +7,34 @@ exports[`should render Tab inside a component correctly 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
3
|
||||
@ -41,19 +47,28 @@ exports[`should render Tab inside a component correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -68,28 +83,34 @@ exports[`should render correctly after inserting a tab 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
3
|
||||
@ -102,20 +123,29 @@ exports[`should render correctly after inserting a tab 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
3
|
||||
@ -131,19 +161,23 @@ exports[`should render correctly after inserting a tab with name 1`] = `
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
bar
|
||||
</span>
|
||||
</div>
|
||||
<div role="tab"
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
foo
|
||||
@ -156,14 +190,20 @@ exports[`should render correctly after inserting a tab with name 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
bar
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style
|
||||
>
|
||||
foo
|
||||
|
||||
@ -44,6 +44,7 @@ import {
|
||||
useEventListener,
|
||||
onMountedOrActivated,
|
||||
} from '@vant/use';
|
||||
import { useId } from '../composables/use-id';
|
||||
import { route, RouteProps } from '../composables/use-route';
|
||||
import { useRefs } from '../composables/use-refs';
|
||||
import { useExpose } from '../composables/use-expose';
|
||||
@ -123,6 +124,7 @@ export default defineComponent({
|
||||
const navRef = ref<HTMLElement>();
|
||||
const wrapRef = ref<HTMLElement>();
|
||||
|
||||
const id = useId();
|
||||
const scroller = useScrollParent(root);
|
||||
const [titleRefs, setTitleRefs] = useRefs<ComponentInstance>();
|
||||
const { children, linkChildren } = useChildren(TABS_KEY);
|
||||
@ -359,12 +361,14 @@ export default defineComponent({
|
||||
const renderNav = () =>
|
||||
children.map((item, index) => (
|
||||
<TabsTitle
|
||||
id={`${id}-${index}`}
|
||||
ref={setTitleRefs(index)}
|
||||
type={props.type}
|
||||
color={props.color}
|
||||
style={item.titleStyle}
|
||||
class={item.titleClass}
|
||||
isActive={index === state.currentIndex}
|
||||
controls={item.id}
|
||||
scrollable={scrollable.value}
|
||||
renderTitle={item.$slots.title}
|
||||
activeColor={props.titleActiveColor}
|
||||
@ -472,6 +476,7 @@ export default defineComponent({
|
||||
useEventListener('scroll', onScroll, { target: scroller });
|
||||
|
||||
linkChildren({
|
||||
id,
|
||||
props,
|
||||
setLine,
|
||||
onRendered,
|
||||
|
||||
@ -8,6 +8,7 @@ export default defineComponent({
|
||||
name,
|
||||
|
||||
props: {
|
||||
id: String,
|
||||
dot: Boolean,
|
||||
type: String,
|
||||
color: String,
|
||||
@ -15,6 +16,7 @@ export default defineComponent({
|
||||
badge: numericProp,
|
||||
isActive: Boolean,
|
||||
disabled: Boolean,
|
||||
controls: String,
|
||||
scrollable: Boolean,
|
||||
activeColor: String,
|
||||
renderTitle: Function,
|
||||
@ -75,6 +77,7 @@ export default defineComponent({
|
||||
|
||||
return () => (
|
||||
<div
|
||||
id={props.id}
|
||||
role="tab"
|
||||
class={[
|
||||
bem({
|
||||
@ -86,6 +89,7 @@ export default defineComponent({
|
||||
tabindex={props.disabled ? undefined : props.isActive ? 0 : -1}
|
||||
aria-selected={props.isActive}
|
||||
aria-disabled={props.disabled || undefined}
|
||||
aria-controls={props.controls}
|
||||
>
|
||||
{renderText()}
|
||||
</div>
|
||||
|
||||
@ -11,6 +11,7 @@ export type TabsClickTabEventParams = {
|
||||
};
|
||||
|
||||
export type TabsProvide = {
|
||||
id: string;
|
||||
props: TabsProps;
|
||||
setLine: () => void;
|
||||
onRendered: (name: string | number, title?: string) => void;
|
||||
|
||||
1
packages/vant/src/vue-tsx-shim.d.ts
vendored
1
packages/vant/src/vue-tsx-shim.d.ts
vendored
@ -4,6 +4,7 @@ type EventHandler = (...args: any[]) => void;
|
||||
|
||||
declare module 'vue' {
|
||||
interface ComponentCustomProps {
|
||||
id?: string;
|
||||
role?: string;
|
||||
tabindex?: number;
|
||||
onClick?: EventHandler;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user