mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'dev' into next
This commit is contained in:
chenjiahan
commit
1fc72c68dd
@ -1,7 +1,6 @@
|
||||
import { get } from 'lodash-es';
|
||||
import { existsSync, readFileSync } from 'fs';
|
||||
import { createRequire } from 'module';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { fileURLToPath, pathToFileURL } from 'url';
|
||||
import { join, dirname, isAbsolute } from 'path';
|
||||
|
||||
function findRootDir(dir: string): string {
|
||||
@ -58,11 +57,10 @@ export function getPackageJson() {
|
||||
}
|
||||
|
||||
async function getVantConfigAsync() {
|
||||
const require = createRequire(import.meta.url);
|
||||
delete require.cache[VANT_CONFIG_FILE];
|
||||
|
||||
try {
|
||||
return (await import(VANT_CONFIG_FILE)).default;
|
||||
// https://github.com/nodejs/node/issues/31710
|
||||
// absolute file paths don't work on Windows
|
||||
return (await import(pathToFileURL(VANT_CONFIG_FILE).href)).default;
|
||||
} catch (err) {
|
||||
return {};
|
||||
}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
# Changelog
|
||||
|
||||
## v1.3.4
|
||||
|
||||
- Fix useClickAway failed in SSR
|
||||
|
||||
### v1.3.3
|
||||
|
||||
- Allow to call useWindowSize outside setup
|
||||
@ -7,7 +11,7 @@
|
||||
|
||||
### v1.3.2
|
||||
|
||||
-Remove passive event polyfill
|
||||
- Remove passive event polyfill
|
||||
|
||||
### v1.3.1
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/use",
|
||||
"version": "1.3.3",
|
||||
"version": "1.3.4",
|
||||
"description": "Vant Composition API",
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Ref, unref } from 'vue';
|
||||
import { inBrowser } from '../utils';
|
||||
import { useEventListener } from '../useEventListener';
|
||||
|
||||
export type UseClickAwayOptions = {
|
||||
@ -10,6 +11,10 @@ export function useClickAway(
|
||||
listener: EventListener,
|
||||
options: UseClickAwayOptions = {}
|
||||
) {
|
||||
if (!inBrowser) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { eventName = 'click' } = options;
|
||||
|
||||
const onClick = (event: Event) => {
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
"dependencies": {
|
||||
"@vant/icons": "^1.7.1",
|
||||
"@vant/popperjs": "^1.1.0",
|
||||
"@vant/use": "^1.3.3"
|
||||
"@vant/use": "^1.3.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
|
||||
@ -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>
|
||||
@ -97,6 +117,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="switch"
|
||||
class="van-switch"
|
||||
style="font-size: 24px;"
|
||||
tabindex="0"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
|
||||
@ -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>
|
||||
@ -186,6 +222,7 @@ exports[`should render AddressEdit with props correctly 1`] = `
|
||||
<div role="switch"
|
||||
class="van-switch van-switch--on"
|
||||
style="font-size: 24px;"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
@ -209,15 +246,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 +276,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 +304,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 +329,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 +354,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">
|
||||
|
||||
@ -9,6 +9,7 @@ import {
|
||||
import {
|
||||
extend,
|
||||
numericProp,
|
||||
preventDefault,
|
||||
makeStringProp,
|
||||
createNamespace,
|
||||
BORDER_SURROUND,
|
||||
@ -135,7 +136,7 @@ export default defineComponent({
|
||||
|
||||
const onClick = (event: MouseEvent) => {
|
||||
if (props.loading) {
|
||||
event.preventDefault();
|
||||
preventDefault(event);
|
||||
} else if (!props.disabled) {
|
||||
emit('click', event);
|
||||
route();
|
||||
|
||||
@ -26,9 +26,8 @@ export default defineComponent({
|
||||
}
|
||||
};
|
||||
|
||||
const onClickSubtitle = (event: MouseEvent) => {
|
||||
const onClickSubtitle = (event: MouseEvent) =>
|
||||
emit('click-subtitle', event);
|
||||
};
|
||||
|
||||
const renderSubtitle = () => {
|
||||
if (props.showSubtitle) {
|
||||
|
||||
@ -205,8 +205,10 @@ export default defineComponent({
|
||||
selectedOption: CascaderOption | null,
|
||||
tabIndex: number
|
||||
) => {
|
||||
const selected =
|
||||
selectedOption && option[valueKey] === selectedOption[valueKey];
|
||||
const { disabled } = option;
|
||||
const selected = !!(
|
||||
selectedOption && option[valueKey] === selectedOption[valueKey]
|
||||
);
|
||||
const color = option.color || (selected ? props.activeColor : undefined);
|
||||
|
||||
const Text = slots.option ? (
|
||||
@ -217,14 +219,12 @@ export default defineComponent({
|
||||
|
||||
return (
|
||||
<li
|
||||
class={[
|
||||
bem('option', {
|
||||
selected,
|
||||
disabled: option.disabled,
|
||||
}),
|
||||
option.className,
|
||||
]}
|
||||
role="menuitemradio"
|
||||
class={[bem('option', { selected, disabled }), option.className]}
|
||||
style={{ color }}
|
||||
tabindex={disabled ? undefined : selected ? 0 : -1}
|
||||
aria-checked={selected}
|
||||
aria-disabled={disabled || undefined}
|
||||
onClick={() => onSelect(option, tabIndex)}
|
||||
>
|
||||
{Text}
|
||||
@ -240,7 +240,7 @@ export default defineComponent({
|
||||
selectedOption: CascaderOption | null,
|
||||
tabIndex: number
|
||||
) => (
|
||||
<ul class={bem('options')}>
|
||||
<ul role="menu" class={bem('options')}>
|
||||
{options.map((option) =>
|
||||
renderOption(option, selectedOption, tabIndex)
|
||||
)}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -6,23 +6,37 @@ exports[`should change close icon when using close-icon prop 1`] = `
|
||||
`;
|
||||
|
||||
exports[`should render option slot correctly 1`] = `
|
||||
<li class="van-cascader__option">
|
||||
<li role="menuitemradio"
|
||||
class="van-cascader__option"
|
||||
tabindex="-1"
|
||||
aria-checked="false"
|
||||
>
|
||||
Custom Option foo
|
||||
</li>
|
||||
`;
|
||||
|
||||
exports[`should render options-top、options-bottom slots correctly 1`] = `
|
||||
<div class="van-tab__pane">
|
||||
<div class="van-tab__panel">
|
||||
Top, tab index: 0
|
||||
<ul class="van-cascader__options">
|
||||
<li class="van-cascader__option van-cascader__option--selected">
|
||||
<ul role="menu"
|
||||
class="van-cascader__options"
|
||||
>
|
||||
<li role="menuitemradio"
|
||||
class="van-cascader__option van-cascader__option--selected"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<span>
|
||||
Zhejiang
|
||||
</span>
|
||||
<i class="van-badge__wrapper van-icon van-icon-success van-cascader__selected-icon">
|
||||
</i>
|
||||
</li>
|
||||
<li class="van-cascader__option">
|
||||
<li role="menuitemradio"
|
||||
class="van-cascader__option"
|
||||
tabindex="-1"
|
||||
aria-checked="false"
|
||||
>
|
||||
<span>
|
||||
Jiangsu
|
||||
</span>
|
||||
@ -39,7 +53,11 @@ exports[`should render title slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`should select correct option when value changed 1`] = `
|
||||
<li class="van-cascader__option van-cascader__option--selected">
|
||||
<li role="menuitemradio"
|
||||
class="van-cascader__option van-cascader__option--selected"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<span>
|
||||
Wenzhou
|
||||
</span>
|
||||
@ -60,17 +78,22 @@ exports[`should update tabs when previous tab is clicked 1`] = `
|
||||
<div class="van-tabs__wrap van-tabs__wrap--scrollable">
|
||||
<div role="tablist"
|
||||
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"
|
||||
>
|
||||
<span class="van-tab__text">
|
||||
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"
|
||||
>
|
||||
<span class="van-tab__text">
|
||||
@ -89,18 +112,31 @@ 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">
|
||||
<ul class="van-cascader__options">
|
||||
<li class="van-cascader__option">
|
||||
<div class="van-tab__panel">
|
||||
<ul role="menu"
|
||||
class="van-cascader__options"
|
||||
>
|
||||
<li role="menuitemradio"
|
||||
class="van-cascader__option"
|
||||
tabindex="-1"
|
||||
aria-checked="false"
|
||||
>
|
||||
<span>
|
||||
Zhejiang
|
||||
</span>
|
||||
</li>
|
||||
<li class="van-cascader__option van-cascader__option--selected">
|
||||
<li role="menuitemradio"
|
||||
class="van-cascader__option van-cascader__option--selected"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<span>
|
||||
Jiangsu
|
||||
</span>
|
||||
@ -111,23 +147,40 @@ 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">
|
||||
<ul class="van-cascader__options">
|
||||
<li class="van-cascader__option">
|
||||
<div class="van-tab__panel">
|
||||
<ul role="menu"
|
||||
class="van-cascader__options"
|
||||
>
|
||||
<li role="menuitemradio"
|
||||
class="van-cascader__option"
|
||||
tabindex="-1"
|
||||
aria-checked="false"
|
||||
>
|
||||
<span>
|
||||
Nanjing
|
||||
</span>
|
||||
</li>
|
||||
<li class="van-cascader__option">
|
||||
<li role="menuitemradio"
|
||||
class="van-cascader__option"
|
||||
tabindex="-1"
|
||||
aria-checked="false"
|
||||
>
|
||||
<span>
|
||||
Wuxi
|
||||
</span>
|
||||
</li>
|
||||
<li class="van-cascader__option">
|
||||
<li role="menuitemradio"
|
||||
class="van-cascader__option"
|
||||
tabindex="-1"
|
||||
aria-checked="false"
|
||||
>
|
||||
<span>
|
||||
Xuzhou
|
||||
</span>
|
||||
|
||||
@ -259,5 +259,5 @@ test('should render options-top、options-bottom slots correctly', async () => {
|
||||
.find('.van-cascader__option')
|
||||
.trigger('click');
|
||||
|
||||
expect(wrapper.find('.van-tab__pane').html()).toMatchSnapshot();
|
||||
expect(wrapper.find('.van-tab__panel').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -131,7 +131,7 @@ export default defineComponent({
|
||||
},
|
||||
direction.value,
|
||||
])}
|
||||
tabindex={disabled.value ? -1 : 0}
|
||||
tabindex={disabled.value ? undefined : 0}
|
||||
aria-checked={props.checked}
|
||||
onClick={onClick}
|
||||
>
|
||||
|
||||
@ -19,7 +19,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div role="checkbox"
|
||||
class="van-checkbox van-checkbox--disabled"
|
||||
tabindex="-1"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled">
|
||||
@ -32,7 +31,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div role="checkbox"
|
||||
class="van-checkbox van-checkbox--disabled"
|
||||
tabindex="-1"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked">
|
||||
|
||||
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>
|
||||
@ -15,6 +17,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
@ -73,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>
|
||||
@ -121,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>
|
||||
@ -131,6 +139,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
@ -189,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>
|
||||
@ -44,6 +52,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="switch"
|
||||
class="van-switch"
|
||||
style="font-size: 24px;"
|
||||
tabindex="0"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
computed,
|
||||
nextTick,
|
||||
reactive,
|
||||
onMounted,
|
||||
defineComponent,
|
||||
ExtractPropTypes,
|
||||
@ -11,6 +11,7 @@ import {
|
||||
// Utils
|
||||
import {
|
||||
truthProp,
|
||||
windowHeight,
|
||||
makeArrayProp,
|
||||
makeStringProp,
|
||||
makeNumberProp,
|
||||
@ -26,6 +27,7 @@ import { Tabs } from '../tabs';
|
||||
import { Field } from '../field';
|
||||
import { Button } from '../button';
|
||||
import { Coupon, CouponInfo } from '../coupon';
|
||||
import { useRect } from '@vant/use';
|
||||
|
||||
const [name, bem, t] = createNamespace('coupon-list');
|
||||
const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';
|
||||
@ -62,34 +64,40 @@ export default defineComponent({
|
||||
setup(props, { emit, slots }) {
|
||||
const [couponRefs, setCouponRefs] = useRefs();
|
||||
|
||||
const state = reactive({
|
||||
tab: 0,
|
||||
code: props.code,
|
||||
});
|
||||
const root = ref<HTMLElement>();
|
||||
const barRef = ref<HTMLElement>();
|
||||
const activeTab = ref(0);
|
||||
const listHeight = ref(0);
|
||||
const currentCode = ref(props.code);
|
||||
|
||||
const buttonDisabled = computed(
|
||||
() =>
|
||||
!props.exchangeButtonLoading &&
|
||||
(props.exchangeButtonDisabled ||
|
||||
!state.code ||
|
||||
state.code.length < props.exchangeMinLength)
|
||||
!currentCode.value ||
|
||||
currentCode.value.length < props.exchangeMinLength)
|
||||
);
|
||||
|
||||
const updateListHeight = () => {
|
||||
const TABS_HEIGHT = 44;
|
||||
const rootHeight = useRect(root).height;
|
||||
const headerHeight = useRect(barRef).height + TABS_HEIGHT;
|
||||
listHeight.value =
|
||||
(rootHeight > headerHeight ? rootHeight : windowHeight.value) -
|
||||
headerHeight;
|
||||
};
|
||||
|
||||
const onExchange = () => {
|
||||
emit('exchange', state.code);
|
||||
emit('exchange', currentCode.value);
|
||||
|
||||
// auto clear currentCode when not use v-model
|
||||
if (!props.code) {
|
||||
state.code = '';
|
||||
currentCode.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToCoupon = (index: number) => {
|
||||
nextTick(() => {
|
||||
if (couponRefs.value[index]) {
|
||||
couponRefs.value[index].scrollIntoView();
|
||||
}
|
||||
});
|
||||
nextTick(() => couponRefs.value[index]?.scrollIntoView());
|
||||
};
|
||||
|
||||
const renderEmpty = () => (
|
||||
@ -102,9 +110,9 @@ export default defineComponent({
|
||||
const renderExchangeBar = () => {
|
||||
if (props.showExchangeBar) {
|
||||
return (
|
||||
<div class={bem('exchange-bar')}>
|
||||
<div ref={barRef} class={bem('exchange-bar')}>
|
||||
<Field
|
||||
v-model={state.code}
|
||||
v-model={currentCode.value}
|
||||
clearable
|
||||
border={false}
|
||||
class={bem('field')}
|
||||
@ -133,10 +141,8 @@ export default defineComponent({
|
||||
return (
|
||||
<Tab title={title}>
|
||||
<div
|
||||
class={bem('list', {
|
||||
'with-bar': props.showExchangeBar,
|
||||
'with-bottom': props.showCloseButton,
|
||||
})}
|
||||
class={bem('list', { 'with-bottom': props.showCloseButton })}
|
||||
style={{ height: `${listHeight.value}px` }}
|
||||
>
|
||||
{coupons.map((coupon, index) => (
|
||||
<Coupon
|
||||
@ -163,10 +169,8 @@ export default defineComponent({
|
||||
return (
|
||||
<Tab title={title}>
|
||||
<div
|
||||
class={bem('list', {
|
||||
'with-bar': props.showExchangeBar,
|
||||
'with-bottom': props.showCloseButton,
|
||||
})}
|
||||
class={bem('list', { 'with-bottom': props.showCloseButton })}
|
||||
style={{ height: `${listHeight.value}px` }}
|
||||
>
|
||||
{disabledCoupons.map((coupon) => (
|
||||
<Coupon
|
||||
@ -186,25 +190,23 @@ export default defineComponent({
|
||||
watch(
|
||||
() => props.code,
|
||||
(value) => {
|
||||
state.code = value;
|
||||
currentCode.value = value;
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => state.code,
|
||||
(value) => emit('update:code', value)
|
||||
);
|
||||
|
||||
watch(windowHeight, updateListHeight);
|
||||
watch(currentCode, (value) => emit('update:code', value));
|
||||
watch(() => props.displayedCouponIndex, scrollToCoupon);
|
||||
|
||||
onMounted(() => {
|
||||
updateListHeight();
|
||||
scrollToCoupon(props.displayedCouponIndex);
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class={bem()}>
|
||||
<div ref={root} class={bem()}>
|
||||
{renderExchangeBar()}
|
||||
<Tabs v-model:active={state.tab} class={bem('tab')} border={false}>
|
||||
<Tabs v-model:active={activeTab.value} class={bem('tab')}>
|
||||
{renderCouponTab()}
|
||||
{renderDisabledTab()}
|
||||
</Tabs>
|
||||
|
||||
@ -54,15 +54,10 @@
|
||||
|
||||
&__list {
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 108px);
|
||||
padding: var(--van-padding-md) 0 var(--van-padding-lg);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&--with-bar {
|
||||
height: calc(100vh - 152px);
|
||||
}
|
||||
|
||||
&--with-bottom {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
@ -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"
|
||||
>
|
||||
@ -28,18 +29,25 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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)
|
||||
@ -52,11 +60,16 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
style="height: 624px;"
|
||||
>
|
||||
<div class="van-coupon">
|
||||
<div class="van-coupon__content">
|
||||
<div class="van-coupon__head">
|
||||
@ -255,8 +268,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -283,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"
|
||||
>
|
||||
@ -304,18 +321,25 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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)
|
||||
@ -328,11 +352,16 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
style="height: 624px;"
|
||||
>
|
||||
<div class="van-coupon-list__empty">
|
||||
<img src="https://img.yzcdn.cn/vant/coupon-empty.png">
|
||||
<p>
|
||||
@ -341,11 +370,16 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
style="height: 624px;"
|
||||
>
|
||||
<div class="van-coupon-list__empty">
|
||||
<img src="https://img.yzcdn.cn/vant/coupon-empty.png">
|
||||
<p>
|
||||
@ -377,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"
|
||||
>
|
||||
@ -398,18 +433,25 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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)
|
||||
@ -422,11 +464,16 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
style="height: 624px;"
|
||||
>
|
||||
<div class="van-coupon-list__empty">
|
||||
<img src="https://img.yzcdn.cn/vant/coupon-empty.png">
|
||||
<p>
|
||||
@ -436,11 +483,16 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
List Footer
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
style="height: 624px;"
|
||||
>
|
||||
<div class="van-coupon-list__empty">
|
||||
<img src="https://img.yzcdn.cn/vant/coupon-empty.png">
|
||||
<p>
|
||||
@ -473,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"
|
||||
>
|
||||
@ -494,18 +547,25 @@ exports[`should use custom src when using empty-image prop 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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)
|
||||
@ -518,11 +578,16 @@ exports[`should use custom src when using empty-image prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bar van-coupon-list__list--with-bottom">
|
||||
<div class="van-coupon-list__list van-coupon-list__list--with-bottom"
|
||||
style="height: 624px;"
|
||||
>
|
||||
<div class="van-coupon-list__empty">
|
||||
<img src="https://img.yzcdn.com/xxx.png">
|
||||
<p>
|
||||
@ -531,8 +596,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -58,7 +58,7 @@ export default defineComponent({
|
||||
showWrapper: false,
|
||||
});
|
||||
|
||||
const { parent } = useParent(DROPDOWN_KEY);
|
||||
const { parent, index } = useParent(DROPDOWN_KEY);
|
||||
|
||||
if (!parent) {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
@ -142,14 +142,16 @@ export default defineComponent({
|
||||
return (
|
||||
<Cell
|
||||
v-slots={{ value: renderIcon }}
|
||||
clickable
|
||||
role="menuitem"
|
||||
key={option.value}
|
||||
icon={option.icon}
|
||||
title={option.text}
|
||||
class={bem('option', { active })}
|
||||
style={{ color: active ? activeColor : '' }}
|
||||
tabindex={active ? 0 : -1}
|
||||
clickable
|
||||
onClick={onClick}
|
||||
></Cell>
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -175,12 +177,14 @@ export default defineComponent({
|
||||
>
|
||||
<Popup
|
||||
v-model:show={state.showPopup}
|
||||
role="menu"
|
||||
class={bem('content')}
|
||||
overlay={overlay}
|
||||
position={direction === 'down' ? 'top' : 'bottom'}
|
||||
duration={state.transition ? duration : 0}
|
||||
lazyRender={props.lazyRender}
|
||||
overlayStyle={{ position: 'absolute' }}
|
||||
aria-labelledby={`${parent.id}-${index.value}`}
|
||||
closeOnClickOverlay={closeOnClickOverlay}
|
||||
onOpen={onOpen}
|
||||
onClose={onClose}
|
||||
|
||||
@ -12,6 +12,7 @@ import {
|
||||
isDef,
|
||||
truthProp,
|
||||
numericProp,
|
||||
windowHeight,
|
||||
makeStringProp,
|
||||
makeNumericProp,
|
||||
createNamespace,
|
||||
@ -20,6 +21,7 @@ import {
|
||||
} from '../utils';
|
||||
|
||||
// Composables
|
||||
import { useId } from '../composables/use-id';
|
||||
import {
|
||||
useRect,
|
||||
useChildren,
|
||||
@ -53,6 +55,7 @@ export default defineComponent({
|
||||
props: dropdownMenuProps,
|
||||
|
||||
setup(props, { slots }) {
|
||||
const id = useId();
|
||||
const root = ref<HTMLElement>();
|
||||
const barRef = ref<HTMLElement>();
|
||||
const offset = ref(0);
|
||||
@ -86,7 +89,7 @@ export default defineComponent({
|
||||
if (props.direction === 'down') {
|
||||
offset.value = rect.bottom;
|
||||
} else {
|
||||
offset.value = window.innerHeight - rect.top;
|
||||
offset.value = windowHeight.value - rect.top;
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -114,8 +117,9 @@ export default defineComponent({
|
||||
|
||||
return (
|
||||
<div
|
||||
id={`${id}-${index}`}
|
||||
role="button"
|
||||
tabindex={disabled ? -1 : 0}
|
||||
tabindex={disabled ? undefined : 0}
|
||||
class={[bem('item', { disabled }), { [HAPTICS_FEEDBACK]: !disabled }]}
|
||||
onClick={() => {
|
||||
if (!disabled) {
|
||||
@ -139,7 +143,7 @@ export default defineComponent({
|
||||
);
|
||||
};
|
||||
|
||||
linkChildren({ props, offset });
|
||||
linkChildren({ id, props, offset });
|
||||
useClickAway(root, onClickAway);
|
||||
useEventListener('scroll', onScroll, { target: scrollParent });
|
||||
|
||||
|
||||
@ -4,7 +4,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -14,7 +15,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -46,7 +48,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -56,7 +59,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -88,7 +92,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -98,7 +103,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -130,7 +136,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -140,7 +147,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -172,8 +180,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button"
|
||||
tabindex="-1"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
|
||||
>
|
||||
<span class="van-dropdown-menu__title">
|
||||
@ -182,8 +190,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
tabindex="-1"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
|
||||
>
|
||||
<span class="van-dropdown-menu__title">
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
exports[`click option 1`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -13,7 +14,8 @@ exports[`click option 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -36,9 +38,11 @@ exports[`click option 1`] = `
|
||||
<transition-stub>
|
||||
<div style="z-index: 2007; transition-duration: 0.2s; display: none;"
|
||||
class="van-popup van-popup--top van-dropdown-item__content"
|
||||
role="menu"
|
||||
aria-labelledby="van-dropdown-menu-0"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||
role="button"
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
@ -52,8 +56,8 @@ exports[`click option 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -80,7 +84,8 @@ exports[`click option 1`] = `
|
||||
exports[`close-on-click-outside 1`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -90,7 +95,8 @@ exports[`close-on-click-outside 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -113,9 +119,11 @@ exports[`close-on-click-outside 1`] = `
|
||||
<transition-stub>
|
||||
<div style="z-index: 2004; transition-duration: 0.2s; display: none;"
|
||||
class="van-popup van-popup--top van-dropdown-item__content"
|
||||
role="menu"
|
||||
aria-labelledby="van-dropdown-menu-0"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||
role="button"
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
@ -129,8 +137,8 @@ exports[`close-on-click-outside 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -157,7 +165,8 @@ exports[`close-on-click-outside 1`] = `
|
||||
exports[`destroy one item 1`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -182,7 +191,8 @@ exports[`destroy one item 1`] = `
|
||||
exports[`direction up 1`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -192,7 +202,8 @@ exports[`direction up 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -225,7 +236,8 @@ exports[`direction up 1`] = `
|
||||
exports[`direction up 2`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -235,7 +247,8 @@ exports[`direction up 2`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -258,9 +271,11 @@ exports[`direction up 2`] = `
|
||||
<transition-stub>
|
||||
<div style="z-index: 2006; transition-duration: 0.2s;"
|
||||
class="van-popup van-popup--bottom van-dropdown-item__content"
|
||||
role="menu"
|
||||
aria-labelledby="van-dropdown-menu-0"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||
role="button"
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
@ -274,8 +289,8 @@ exports[`direction up 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -302,7 +317,8 @@ exports[`direction up 2`] = `
|
||||
exports[`disable close-on-click-outside 1`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -312,7 +328,8 @@ exports[`disable close-on-click-outside 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -335,9 +352,11 @@ exports[`disable close-on-click-outside 1`] = `
|
||||
<transition-stub>
|
||||
<div style="z-index: 2005; transition-duration: 0.2s;"
|
||||
class="van-popup van-popup--top van-dropdown-item__content"
|
||||
role="menu"
|
||||
aria-labelledby="van-dropdown-menu-0"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||
role="button"
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
@ -351,8 +370,8 @@ exports[`disable close-on-click-outside 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -379,8 +398,8 @@ exports[`disable close-on-click-outside 1`] = `
|
||||
exports[`disable dropdown item 1`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button"
|
||||
tabindex="-1"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
|
||||
>
|
||||
<span class="van-dropdown-menu__title">
|
||||
@ -404,7 +423,8 @@ exports[`disable dropdown item 1`] = `
|
||||
exports[`render option icon 1`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -414,7 +434,8 @@ exports[`render option icon 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -437,9 +458,11 @@ exports[`render option icon 1`] = `
|
||||
<transition-stub>
|
||||
<div style="z-index: 2003; transition-duration: 0.2s;"
|
||||
class="van-popup van-popup--top van-dropdown-item__content"
|
||||
role="menu"
|
||||
aria-labelledby="van-dropdown-menu-0"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||
role="button"
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-success van-cell__left-icon">
|
||||
@ -455,8 +478,8 @@ exports[`render option icon 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-success van-cell__left-icon">
|
||||
</i>
|
||||
@ -485,7 +508,8 @@ exports[`render option icon 1`] = `
|
||||
exports[`show dropdown item 1`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -495,7 +519,8 @@ exports[`show dropdown item 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -518,9 +543,11 @@ exports[`show dropdown item 1`] = `
|
||||
<transition-stub>
|
||||
<div style="z-index: 2001; transition-duration: 0.2s;"
|
||||
class="van-popup van-popup--top van-dropdown-item__content"
|
||||
role="menu"
|
||||
aria-labelledby="van-dropdown-menu-0"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||
role="button"
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
@ -534,8 +561,8 @@ exports[`show dropdown item 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -562,7 +589,8 @@ exports[`show dropdown item 1`] = `
|
||||
exports[`show dropdown item 2`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -572,7 +600,8 @@ exports[`show dropdown item 2`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -595,9 +624,11 @@ exports[`show dropdown item 2`] = `
|
||||
<transition-stub>
|
||||
<div style="z-index: 2001; transition-duration: 0s; display: none;"
|
||||
class="van-popup van-popup--top van-dropdown-item__content"
|
||||
role="menu"
|
||||
aria-labelledby="van-dropdown-menu-0"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||
role="button"
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
@ -611,8 +642,8 @@ exports[`show dropdown item 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -637,9 +668,11 @@ exports[`show dropdown item 2`] = `
|
||||
<transition-stub>
|
||||
<div style="z-index: 2002; transition-duration: 0.2s;"
|
||||
class="van-popup van-popup--top van-dropdown-item__content"
|
||||
role="menu"
|
||||
aria-labelledby="van-dropdown-menu-1"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||
role="button"
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
@ -653,8 +686,8 @@ exports[`show dropdown item 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -673,7 +706,8 @@ exports[`show dropdown item 2`] = `
|
||||
exports[`show dropdown item 3`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -683,7 +717,8 @@ exports[`show dropdown item 3`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -706,9 +741,11 @@ exports[`show dropdown item 3`] = `
|
||||
<transition-stub>
|
||||
<div style="z-index: 2001; transition-duration: 0s; display: none;"
|
||||
class="van-popup van-popup--top van-dropdown-item__content"
|
||||
role="menu"
|
||||
aria-labelledby="van-dropdown-menu-0"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||
role="button"
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
@ -722,8 +759,8 @@ exports[`show dropdown item 3`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -748,9 +785,11 @@ exports[`show dropdown item 3`] = `
|
||||
<transition-stub>
|
||||
<div style="z-index: 2002; transition-duration: 0.2s; display: none;"
|
||||
class="van-popup van-popup--top van-dropdown-item__content"
|
||||
role="menu"
|
||||
aria-labelledby="van-dropdown-menu-1"
|
||||
>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option van-dropdown-item__option--active"
|
||||
role="button"
|
||||
role="menuitem"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
@ -764,8 +803,8 @@ exports[`show dropdown item 3`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -784,7 +823,8 @@ exports[`show dropdown item 3`] = `
|
||||
exports[`title prop 1`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -794,7 +834,8 @@ exports[`title prop 1`] = `
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
@ -827,7 +868,8 @@ exports[`title prop 1`] = `
|
||||
exports[`title slot 1`] = `
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button"
|
||||
<div id="van-dropdown-menu-0"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="van-dropdown-menu__item van-haptics-feedback"
|
||||
>
|
||||
|
||||
@ -4,6 +4,7 @@ import type { DropdownMenuProps } from './DropdownMenu';
|
||||
export type DropdownMenuDirection = 'up' | 'down';
|
||||
|
||||
export type DropdownMenuProvide = {
|
||||
id: string;
|
||||
props: DropdownMenuProps;
|
||||
offset: Ref<number>;
|
||||
};
|
||||
|
||||
@ -6,11 +6,11 @@ const renderStop = (color: string, offset: number, opacity?: number) => (
|
||||
export const Network = (
|
||||
<svg viewBox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id={`${prefix}1`} x1="64.022%" y1="100%" x2="64.022%">
|
||||
<linearGradient id={`${prefix}1`} x1="64%" y1="100%" x2="64%">
|
||||
{renderStop('#FFF', 0, 0.5)}
|
||||
{renderStop('#F2F3F5', 100)}
|
||||
</linearGradient>
|
||||
<linearGradient id={`${prefix}2`} x1="50%" x2="50%" y2="84.459%">
|
||||
<linearGradient id={`${prefix}2`} x1="50%" x2="50%" y2="84%">
|
||||
{renderStop('#EBEDF0', 0)}
|
||||
{renderStop('#DCDEE0', 100, 0)}
|
||||
</linearGradient>
|
||||
@ -18,18 +18,14 @@ export const Network = (
|
||||
{renderStop('#EAEDF0', 0)}
|
||||
{renderStop('#DCDEE0', 100)}
|
||||
</linearGradient>
|
||||
<linearGradient id={`${prefix}4`} x1="100%" y1="100%" x2="100%">
|
||||
{renderStop('#EAEDF0', 0)}
|
||||
{renderStop('#DCDEE0', 100)}
|
||||
</linearGradient>
|
||||
<radialGradient
|
||||
id={`${prefix}5`}
|
||||
id={`${prefix}4`}
|
||||
cx="50%"
|
||||
cy="0%"
|
||||
fx="50%"
|
||||
fy="0%"
|
||||
r="100%"
|
||||
gradientTransform="matrix(0 1 -.54835 0 .5 -.5)"
|
||||
gradientTransform="matrix(0 1 -.54 0 .5 -.5)"
|
||||
>
|
||||
{renderStop('#EBEDF0', 0)}
|
||||
{renderStop('#FFF', 100, 0)}
|
||||
@ -37,49 +33,30 @@ export const Network = (
|
||||
</defs>
|
||||
<g fill="none">
|
||||
<g opacity=".8">
|
||||
<path
|
||||
d="M0 124V46h20v20h14v58H0z"
|
||||
fill={`url(#${prefix}1)`}
|
||||
transform="matrix(-1 0 0 1 36 7)"
|
||||
/>
|
||||
<path
|
||||
d="M121 8h22.231v14H152v77.37h-31V8z"
|
||||
fill={`url(#${prefix}1)`}
|
||||
transform="translate(2 7)"
|
||||
/>
|
||||
<path d="M36 131V53H16v20H2v58h34z" fill={`url(#${prefix}1)`} />
|
||||
<path d="M123 15h22v14h9v77h-31V15z" fill={`url(#${prefix}1)`} />
|
||||
</g>
|
||||
<path fill={`url(#${prefix}5)`} d="M0 139h160v21H0z" />
|
||||
<path fill={`url(#${prefix}4)`} d="M0 139h160v21H0z" />
|
||||
<path
|
||||
d="M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z"
|
||||
d="M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z"
|
||||
fill={`url(#${prefix}2)`}
|
||||
transform="translate(43 36)"
|
||||
/>
|
||||
<g opacity=".6" stroke-linecap="round" stroke-width="7">
|
||||
<path
|
||||
d="M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
|
||||
d="M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13"
|
||||
stroke={`url(#${prefix}3)`}
|
||||
transform="translate(43 36)"
|
||||
/>
|
||||
<path d="M53 36a34 34 0 0 0 0 48" stroke={`url(#${prefix}3)`} />
|
||||
<path
|
||||
d="M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145"
|
||||
d="M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13"
|
||||
stroke={`url(#${prefix}3)`}
|
||||
transform="translate(43 36)"
|
||||
/>
|
||||
<path
|
||||
d="M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
|
||||
stroke={`url(#${prefix}4)`}
|
||||
transform="rotate(-180 76.483 42.257)"
|
||||
/>
|
||||
<path
|
||||
d="M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145"
|
||||
stroke={`url(#${prefix}4)`}
|
||||
transform="rotate(-180 89.791 42.146)"
|
||||
/>
|
||||
<path d="M106 84a34 34 0 0 0 0-48" stroke={`url(#${prefix}3)`} />
|
||||
</g>
|
||||
<g transform="translate(31 105)">
|
||||
<rect fill="#EBEDF0" width="98" height="34" rx="2" />
|
||||
<rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.114" />
|
||||
<rect fill="#EBEDF0" x="15" y="12" width="18" height="6" rx="1.114" />
|
||||
<rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.1" />
|
||||
<rect fill="#EBEDF0" x="15" y="12" width="18" height="6" rx="1.1" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
@ -16,26 +16,36 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -48,8 +58,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-empty">
|
||||
@ -61,13 +74,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -36,9 +36,9 @@ exports[`should render svg when image is network 1`] = `
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-network-1"
|
||||
x1="64.022%"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64.022%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
@ -53,7 +53,7 @@ exports[`should render svg when image is network 1`] = `
|
||||
<linearGradient id="van-empty-network-2"
|
||||
x1="50%"
|
||||
x2="50%"
|
||||
y2="84.459%"
|
||||
y2="84%"
|
||||
>
|
||||
<stop stop-color="#EBEDF0"
|
||||
offset="0%"
|
||||
@ -79,27 +79,13 @@ exports[`should render svg when image is network 1`] = `
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-network-4"
|
||||
x1="100%"
|
||||
y1="100%"
|
||||
x2="100%"
|
||||
>
|
||||
<stop stop-color="#EAEDF0"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<radialGradient id="van-empty-network-5"
|
||||
<radialGradient id="van-empty-network-4"
|
||||
cx="50%"
|
||||
cy="0%"
|
||||
fx="50%"
|
||||
fy="0%"
|
||||
r="100%"
|
||||
gradienttransform="matrix(0 1 -.54835 0 .5 -.5)"
|
||||
gradienttransform="matrix(0 1 -.54 0 .5 -.5)"
|
||||
>
|
||||
<stop stop-color="#EBEDF0"
|
||||
offset="0%"
|
||||
@ -114,48 +100,41 @@ exports[`should render svg when image is network 1`] = `
|
||||
</defs>
|
||||
<g fill="none">
|
||||
<g opacity=".8">
|
||||
<path d="M0 124V46h20v20h14v58H0z"
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-network-1)"
|
||||
transform="matrix(-1 0 0 1 36 7)"
|
||||
>
|
||||
</path>
|
||||
<path d="M121 8h22.231v14H152v77.37h-31V8z"
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-network-1)"
|
||||
transform="translate(2 7)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<path fill="url(#van-empty-network-5)"
|
||||
<path fill="url(#van-empty-network-4)"
|
||||
d="M0 139h160v21H0z"
|
||||
>
|
||||
</path>
|
||||
<path d="M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z"
|
||||
<path d="M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z"
|
||||
fill="url(#van-empty-network-2)"
|
||||
transform="translate(43 36)"
|
||||
>
|
||||
</path>
|
||||
<g opacity=".6"
|
||||
stroke-linecap="round"
|
||||
stroke-width="7"
|
||||
>
|
||||
<path d="M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
|
||||
<path d="M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13"
|
||||
stroke="url(#van-empty-network-3)"
|
||||
transform="translate(43 36)"
|
||||
>
|
||||
</path>
|
||||
<path d="M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145"
|
||||
<path d="M53 36a34 34 0 0 0 0 48"
|
||||
stroke="url(#van-empty-network-3)"
|
||||
transform="translate(43 36)"
|
||||
>
|
||||
</path>
|
||||
<path d="M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12"
|
||||
stroke="url(#van-empty-network-4)"
|
||||
transform="rotate(-180 76.483 42.257)"
|
||||
<path d="M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13"
|
||||
stroke="url(#van-empty-network-3)"
|
||||
>
|
||||
</path>
|
||||
<path d="M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145"
|
||||
stroke="url(#van-empty-network-4)"
|
||||
transform="rotate(-180 89.791 42.146)"
|
||||
<path d="M106 84a34 34 0 0 0 0-48"
|
||||
stroke="url(#van-empty-network-3)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
@ -171,7 +150,7 @@ exports[`should render svg when image is network 1`] = `
|
||||
y="8"
|
||||
width="80"
|
||||
height="18"
|
||||
rx="1.114"
|
||||
rx="1.1"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#EBEDF0"
|
||||
@ -179,7 +158,7 @@ exports[`should render svg when image is network 1`] = `
|
||||
y="12"
|
||||
width="18"
|
||||
height="6"
|
||||
rx="1.114"
|
||||
rx="1.1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -5,6 +5,7 @@ import {
|
||||
FORM_KEY,
|
||||
truthProp,
|
||||
numericProp,
|
||||
preventDefault,
|
||||
makeStringProp,
|
||||
createNamespace,
|
||||
} from '../utils';
|
||||
@ -170,7 +171,7 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const onSubmit = (event: Event) => {
|
||||
event.preventDefault();
|
||||
preventDefault(event);
|
||||
submit();
|
||||
};
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -146,6 +172,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="switch"
|
||||
class="van-switch"
|
||||
style="font-size: 20px;"
|
||||
tabindex="0"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
@ -157,7 +184,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 +209,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 +252,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,16 +297,21 @@ 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>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
@ -295,7 +333,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>
|
||||
@ -305,6 +345,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
@ -363,7 +405,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>
|
||||
@ -393,7 +437,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>
|
||||
@ -437,17 +483,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>
|
||||
@ -459,17 +509,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>
|
||||
@ -481,17 +535,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>
|
||||
@ -503,17 +561,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"
|
||||
>
|
||||
|
||||
@ -7,34 +7,47 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -49,8 +62,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div>
|
||||
@ -125,18 +141,27 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-3"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -16,6 +16,8 @@ import {
|
||||
truthProp,
|
||||
unknownProp,
|
||||
Interceptor,
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
makeArrayProp,
|
||||
makeStringProp,
|
||||
makeNumericProp,
|
||||
@ -25,7 +27,7 @@ import {
|
||||
} from '../utils';
|
||||
|
||||
// Composables
|
||||
import { useRect, useWindowSize } from '@vant/use';
|
||||
import { useRect } from '@vant/use';
|
||||
import { useExpose } from '../composables/use-expose';
|
||||
|
||||
// Components
|
||||
@ -78,7 +80,6 @@ export default defineComponent({
|
||||
|
||||
setup(props, { emit, slots }) {
|
||||
const swipeRef = ref<SwipeInstance>();
|
||||
const windowSize = useWindowSize();
|
||||
|
||||
const state = reactive({
|
||||
active: 0,
|
||||
@ -185,7 +186,7 @@ export default defineComponent({
|
||||
|
||||
onMounted(resize);
|
||||
|
||||
watch([windowSize.width, windowSize.height], resize);
|
||||
watch([windowWidth, windowHeight], resize);
|
||||
|
||||
watch(
|
||||
() => props.startPosition,
|
||||
|
||||
@ -5,18 +5,25 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -29,8 +36,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-index-bar">
|
||||
@ -898,8 +908,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@ class LazyContainer {
|
||||
this.options = {};
|
||||
this.lazy = lazy;
|
||||
|
||||
this._queue = [];
|
||||
this.queue = [];
|
||||
this.update({ el, binding });
|
||||
}
|
||||
|
||||
@ -61,7 +61,7 @@ class LazyContainer {
|
||||
export default class LazyContainerManager {
|
||||
constructor({ lazy }) {
|
||||
this.lazy = lazy;
|
||||
this._queue = [];
|
||||
this.queue = [];
|
||||
}
|
||||
|
||||
bind(el, binding, vnode) {
|
||||
@ -71,19 +71,19 @@ export default class LazyContainerManager {
|
||||
vnode,
|
||||
lazy: this.lazy,
|
||||
});
|
||||
this._queue.push(container);
|
||||
this.queue.push(container);
|
||||
}
|
||||
|
||||
update(el, binding, vnode) {
|
||||
const container = this._queue.find((item) => item.el === el);
|
||||
const container = this.queue.find((item) => item.el === el);
|
||||
if (!container) return;
|
||||
container.update({ el, binding, vnode });
|
||||
}
|
||||
|
||||
unbind(el) {
|
||||
const container = this._queue.find((item) => item.el === el);
|
||||
const container = this.queue.find((item) => item.el === el);
|
||||
if (!container) return;
|
||||
container.clear();
|
||||
remove(this._queue, container);
|
||||
remove(this.queue, container);
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@ export default (lazyManager) => ({
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const { src, loading, error } = lazyManager._valueFormatter(this.src);
|
||||
const { src, loading, error } = lazyManager.valueFormatter(this.src);
|
||||
this.state.loaded = false;
|
||||
this.options.src = src;
|
||||
this.options.error = error;
|
||||
|
||||
@ -50,9 +50,9 @@ export default function () {
|
||||
observerOptions,
|
||||
}) {
|
||||
this.mode = modeType.event;
|
||||
this.ListenerQueue = [];
|
||||
this.TargetIndex = 0;
|
||||
this.TargetQueue = [];
|
||||
this.listeners = [];
|
||||
this.targetIndex = 0;
|
||||
this.targets = [];
|
||||
this.options = {
|
||||
silent,
|
||||
dispatchEvent: !!dispatchEvent,
|
||||
@ -70,10 +70,10 @@ export default function () {
|
||||
observer: !!observer,
|
||||
observerOptions: observerOptions || DEFAULT_OBSERVER_OPTIONS,
|
||||
};
|
||||
this._initEvent();
|
||||
this._imageCache = new ImageCache({ max: 200 });
|
||||
this.initEvent();
|
||||
this.imageCache = new ImageCache({ max: 200 });
|
||||
this.lazyLoadHandler = throttle(
|
||||
this._lazyLoadHandler.bind(this),
|
||||
this.lazyLoadHandler.bind(this),
|
||||
this.options.throttleWait
|
||||
);
|
||||
|
||||
@ -94,7 +94,7 @@ export default function () {
|
||||
* @return {Array}
|
||||
*/
|
||||
performance() {
|
||||
return this.ListenerQueue.map((item) => item.performance());
|
||||
return this.listeners.map((item) => item.performance());
|
||||
}
|
||||
|
||||
/*
|
||||
@ -103,12 +103,12 @@ export default function () {
|
||||
* @return
|
||||
*/
|
||||
addLazyBox(vm) {
|
||||
this.ListenerQueue.push(vm);
|
||||
this.listeners.push(vm);
|
||||
if (inBrowser) {
|
||||
this._addListenerTarget(window);
|
||||
this._observer && this._observer.observe(vm.el);
|
||||
this.addListenerTarget(window);
|
||||
this.observer && this.observer.observe(vm.el);
|
||||
if (vm.$el && vm.$el.parentNode) {
|
||||
this._addListenerTarget(vm.$el.parentNode);
|
||||
this.addListenerTarget(vm.$el.parentNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -121,17 +121,17 @@ export default function () {
|
||||
* @return
|
||||
*/
|
||||
add(el, binding, vnode) {
|
||||
if (this.ListenerQueue.some((item) => item.el === el)) {
|
||||
if (this.listeners.some((item) => item.el === el)) {
|
||||
this.update(el, binding);
|
||||
return nextTick(this.lazyLoadHandler);
|
||||
}
|
||||
|
||||
const value = this._valueFormatter(binding.value);
|
||||
const value = this.valueFormatter(binding.value);
|
||||
let { src } = value;
|
||||
|
||||
nextTick(() => {
|
||||
src = getBestSelectionFromSrcset(el, this.options.scale) || src;
|
||||
this._observer && this._observer.observe(el);
|
||||
this.observer && this.observer.observe(el);
|
||||
|
||||
const container = Object.keys(binding.modifiers)[0];
|
||||
let $parent;
|
||||
@ -156,16 +156,16 @@ export default function () {
|
||||
loading: value.loading,
|
||||
error: value.error,
|
||||
cors: value.cors,
|
||||
elRenderer: this._elRenderer.bind(this),
|
||||
elRenderer: this.elRenderer.bind(this),
|
||||
options: this.options,
|
||||
imageCache: this._imageCache,
|
||||
imageCache: this.imageCache,
|
||||
});
|
||||
|
||||
this.ListenerQueue.push(newListener);
|
||||
this.listeners.push(newListener);
|
||||
|
||||
if (inBrowser) {
|
||||
this._addListenerTarget(window);
|
||||
this._addListenerTarget($parent);
|
||||
this.addListenerTarget(window);
|
||||
this.addListenerTarget($parent);
|
||||
}
|
||||
|
||||
this.lazyLoadHandler();
|
||||
@ -180,11 +180,11 @@ export default function () {
|
||||
* @return
|
||||
*/
|
||||
update(el, binding, vnode) {
|
||||
const value = this._valueFormatter(binding.value);
|
||||
const value = this.valueFormatter(binding.value);
|
||||
let { src } = value;
|
||||
src = getBestSelectionFromSrcset(el, this.options.scale) || src;
|
||||
|
||||
const exist = this.ListenerQueue.find((item) => item.el === el);
|
||||
const exist = this.listeners.find((item) => item.el === el);
|
||||
if (!exist) {
|
||||
this.add(el, binding, vnode);
|
||||
} else {
|
||||
@ -194,9 +194,9 @@ export default function () {
|
||||
loading: value.loading,
|
||||
});
|
||||
}
|
||||
if (this._observer) {
|
||||
this._observer.unobserve(el);
|
||||
this._observer.observe(el);
|
||||
if (this.observer) {
|
||||
this.observer.unobserve(el);
|
||||
this.observer.observe(el);
|
||||
}
|
||||
this.lazyLoadHandler();
|
||||
nextTick(() => this.lazyLoadHandler());
|
||||
@ -209,12 +209,12 @@ export default function () {
|
||||
*/
|
||||
remove(el) {
|
||||
if (!el) return;
|
||||
this._observer && this._observer.unobserve(el);
|
||||
const existItem = this.ListenerQueue.find((item) => item.el === el);
|
||||
this.observer && this.observer.unobserve(el);
|
||||
const existItem = this.listeners.find((item) => item.el === el);
|
||||
if (existItem) {
|
||||
this._removeListenerTarget(existItem.$parent);
|
||||
this._removeListenerTarget(window);
|
||||
remove(this.ListenerQueue, existItem);
|
||||
this.removeListenerTarget(existItem.$parent);
|
||||
this.removeListenerTarget(window);
|
||||
remove(this.listeners, existItem);
|
||||
existItem.$destroy();
|
||||
}
|
||||
}
|
||||
@ -226,12 +226,12 @@ export default function () {
|
||||
*/
|
||||
removeComponent(vm) {
|
||||
if (!vm) return;
|
||||
remove(this.ListenerQueue, vm);
|
||||
this._observer && this._observer.unobserve(vm.el);
|
||||
remove(this.listeners, vm);
|
||||
this.observer && this.observer.unobserve(vm.el);
|
||||
if (vm.$parent && vm.$el.parentNode) {
|
||||
this._removeListenerTarget(vm.$el.parentNode);
|
||||
this.removeListenerTarget(vm.$el.parentNode);
|
||||
}
|
||||
this._removeListenerTarget(window);
|
||||
this.removeListenerTarget(window);
|
||||
}
|
||||
|
||||
setMode(mode) {
|
||||
@ -242,21 +242,21 @@ export default function () {
|
||||
this.mode = mode; // event or observer
|
||||
|
||||
if (mode === modeType.event) {
|
||||
if (this._observer) {
|
||||
this.ListenerQueue.forEach((listener) => {
|
||||
this._observer.unobserve(listener.el);
|
||||
if (this.observer) {
|
||||
this.listeners.forEach((listener) => {
|
||||
this.observer.unobserve(listener.el);
|
||||
});
|
||||
this._observer = null;
|
||||
this.observer = null;
|
||||
}
|
||||
|
||||
this.TargetQueue.forEach((target) => {
|
||||
this._initListen(target.el, true);
|
||||
this.targets.forEach((target) => {
|
||||
this.initListen(target.el, true);
|
||||
});
|
||||
} else {
|
||||
this.TargetQueue.forEach((target) => {
|
||||
this._initListen(target.el, false);
|
||||
this.targets.forEach((target) => {
|
||||
this.initListen(target.el, false);
|
||||
});
|
||||
this._initIntersectionObserver();
|
||||
this.initIntersectionObserver();
|
||||
}
|
||||
}
|
||||
|
||||
@ -269,22 +269,22 @@ export default function () {
|
||||
* @param {DOM} el listener target
|
||||
* @return
|
||||
*/
|
||||
_addListenerTarget(el) {
|
||||
addListenerTarget(el) {
|
||||
if (!el) return;
|
||||
let target = this.TargetQueue.find((target) => target.el === el);
|
||||
let target = this.targets.find((target) => target.el === el);
|
||||
if (!target) {
|
||||
target = {
|
||||
el,
|
||||
id: ++this.TargetIndex,
|
||||
id: ++this.targetIndex,
|
||||
childrenCount: 1,
|
||||
listened: true,
|
||||
};
|
||||
this.mode === modeType.event && this._initListen(target.el, true);
|
||||
this.TargetQueue.push(target);
|
||||
this.mode === modeType.event && this.initListen(target.el, true);
|
||||
this.targets.push(target);
|
||||
} else {
|
||||
target.childrenCount++;
|
||||
}
|
||||
return this.TargetIndex;
|
||||
return this.targetIndex;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -292,13 +292,13 @@ export default function () {
|
||||
* @param {DOM} el or window
|
||||
* @return
|
||||
*/
|
||||
_removeListenerTarget(el) {
|
||||
this.TargetQueue.forEach((target, index) => {
|
||||
removeListenerTarget(el) {
|
||||
this.targets.forEach((target, index) => {
|
||||
if (target.el === el) {
|
||||
target.childrenCount--;
|
||||
if (!target.childrenCount) {
|
||||
this._initListen(target.el, false);
|
||||
this.TargetQueue.splice(index, 1);
|
||||
this.initListen(target.el, false);
|
||||
this.targets.splice(index, 1);
|
||||
target = null;
|
||||
}
|
||||
}
|
||||
@ -311,13 +311,13 @@ export default function () {
|
||||
* @param {boolean} start flag
|
||||
* @return
|
||||
*/
|
||||
_initListen(el, start) {
|
||||
initListen(el, start) {
|
||||
this.options.ListenEvents.forEach((evt) =>
|
||||
(start ? on : off)(el, evt, this.lazyLoadHandler)
|
||||
);
|
||||
}
|
||||
|
||||
_initEvent() {
|
||||
initEvent() {
|
||||
this.Event = {
|
||||
listeners: {
|
||||
loading: [],
|
||||
@ -358,9 +358,9 @@ export default function () {
|
||||
* find nodes which in viewport and trigger load
|
||||
* @return
|
||||
*/
|
||||
_lazyLoadHandler() {
|
||||
lazyLoadHandler() {
|
||||
const freeList = [];
|
||||
this.ListenerQueue.forEach((listener) => {
|
||||
this.listeners.forEach((listener) => {
|
||||
if (!listener.el || !listener.el.parentNode) {
|
||||
freeList.push(listener);
|
||||
}
|
||||
@ -369,7 +369,7 @@ export default function () {
|
||||
listener.load();
|
||||
});
|
||||
freeList.forEach((item) => {
|
||||
remove(this.ListenerQueue, item);
|
||||
remove(this.listeners, item);
|
||||
item.$destroy();
|
||||
});
|
||||
}
|
||||
@ -379,19 +379,19 @@ export default function () {
|
||||
* set mode to observer
|
||||
* @return
|
||||
*/
|
||||
_initIntersectionObserver() {
|
||||
initIntersectionObserver() {
|
||||
if (!hasIntersectionObserver) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._observer = new IntersectionObserver(
|
||||
this._observerHandler.bind(this),
|
||||
this.observer = new IntersectionObserver(
|
||||
this.observerHandler.bind(this),
|
||||
this.options.observerOptions
|
||||
);
|
||||
|
||||
if (this.ListenerQueue.length) {
|
||||
this.ListenerQueue.forEach((listener) => {
|
||||
this._observer.observe(listener.el);
|
||||
if (this.listeners.length) {
|
||||
this.listeners.forEach((listener) => {
|
||||
this.observer.observe(listener.el);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -400,13 +400,13 @@ export default function () {
|
||||
* init IntersectionObserver
|
||||
* @return
|
||||
*/
|
||||
_observerHandler(entries) {
|
||||
observerHandler(entries) {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
this.ListenerQueue.forEach((listener) => {
|
||||
this.listeners.forEach((listener) => {
|
||||
if (listener.el === entry.target) {
|
||||
if (listener.state.loaded)
|
||||
return this._observer.unobserve(listener.el);
|
||||
return this.observer.unobserve(listener.el);
|
||||
listener.load();
|
||||
}
|
||||
});
|
||||
@ -421,7 +421,7 @@ export default function () {
|
||||
* @param {bool} inCache is rendered from cache
|
||||
* @return
|
||||
*/
|
||||
_elRenderer(listener, state, cache) {
|
||||
elRenderer(listener, state, cache) {
|
||||
if (!listener.el) return;
|
||||
const { el, bindType } = listener;
|
||||
|
||||
@ -463,7 +463,7 @@ export default function () {
|
||||
* @param {string} image's src
|
||||
* @return {object} image's loading, loaded, error url
|
||||
*/
|
||||
_valueFormatter(value) {
|
||||
valueFormatter(value) {
|
||||
let src = value;
|
||||
let { loading, error } = this.options;
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ export default class ReactiveListener {
|
||||
|
||||
this.$parent = $parent;
|
||||
this.elRenderer = elRenderer;
|
||||
this._imageCache = imageCache;
|
||||
this.imageCache = imageCache;
|
||||
this.performanceData = {
|
||||
loadStart: 0,
|
||||
loadEnd: 0,
|
||||
@ -156,7 +156,7 @@ export default class ReactiveListener {
|
||||
return;
|
||||
}
|
||||
if (this.state.rendered && this.state.loaded) return;
|
||||
if (this._imageCache.has(this.src)) {
|
||||
if (this.imageCache.has(this.src)) {
|
||||
this.state.loaded = true;
|
||||
this.render('loaded', true);
|
||||
this.state.rendered = true;
|
||||
@ -182,7 +182,7 @@ export default class ReactiveListener {
|
||||
this.record('loadEnd');
|
||||
this.render('loaded', false);
|
||||
this.state.rendered = true;
|
||||
this._imageCache.add(this.src);
|
||||
this.imageCache.add(this.src);
|
||||
onFinish();
|
||||
},
|
||||
(err) => {
|
||||
|
||||
@ -139,8 +139,7 @@ export const loadImageAsync = (item, resolve, reject) => {
|
||||
const image = new Image();
|
||||
|
||||
if (!item || !item.src) {
|
||||
const err = new Error('image src is required');
|
||||
return reject(err);
|
||||
return reject(new Error('image src is required'));
|
||||
}
|
||||
|
||||
image.src = item.src;
|
||||
@ -163,22 +162,22 @@ export class ImageCache {
|
||||
this.options = {
|
||||
max: max || 100,
|
||||
};
|
||||
this._caches = [];
|
||||
this.caches = [];
|
||||
}
|
||||
|
||||
has(key) {
|
||||
return this._caches.indexOf(key) > -1;
|
||||
return this.caches.indexOf(key) > -1;
|
||||
}
|
||||
|
||||
add(key) {
|
||||
if (this.has(key)) return;
|
||||
this._caches.push(key);
|
||||
if (this._caches.length > this.options.max) {
|
||||
this.caches.push(key);
|
||||
if (this.caches.length > this.options.max) {
|
||||
this.free();
|
||||
}
|
||||
}
|
||||
|
||||
free() {
|
||||
this._caches.shift();
|
||||
this.caches.shift();
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,7 +115,12 @@ export default defineComponent({
|
||||
const text = slots.error ? slots.error() : props.errorText;
|
||||
if (text) {
|
||||
return (
|
||||
<div class={bem('error-text')} onClick={clickErrorText}>
|
||||
<div
|
||||
role="button"
|
||||
class={bem('error-text')}
|
||||
tabindex={0}
|
||||
onClick={clickErrorText}
|
||||
>
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
@ -139,10 +144,7 @@ export default defineComponent({
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
[() => props.loading, () => props.finished, () => props.error],
|
||||
check
|
||||
);
|
||||
watch(() => [props.loading, props.finished, props.error], check);
|
||||
|
||||
if (tabStatus) {
|
||||
watch(tabStatus, (tabActive) => {
|
||||
|
||||
@ -5,26 +5,36 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -37,8 +47,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div role="feed"
|
||||
@ -68,13 +81,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,10 @@ exports[`should render error slot correctly 1`] = `
|
||||
class="van-list"
|
||||
aria-busy="false"
|
||||
>
|
||||
<div class="van-list__error-text">
|
||||
<div role="button"
|
||||
class="van-list__error-text"
|
||||
tabindex="0"
|
||||
>
|
||||
Custom Error
|
||||
</div>
|
||||
<div class="van-list__placeholder">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ref, PropType, defineComponent } from 'vue';
|
||||
import { numericProp, createNamespace } from '../utils';
|
||||
import { numericProp, createNamespace, preventDefault } from '../utils';
|
||||
import { useTouch } from '../composables/use-touch';
|
||||
import { Loading } from '../loading';
|
||||
|
||||
@ -8,7 +8,7 @@ const [name, bem] = createNamespace('key');
|
||||
const CollapseIcon = (
|
||||
<svg class={bem('collapse-icon')} viewBox="0 0 30 24">
|
||||
<path
|
||||
d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z"
|
||||
d="M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
@ -17,7 +17,7 @@ const CollapseIcon = (
|
||||
const DeleteIcon = (
|
||||
<svg class={bem('delete-icon')} viewBox="0 0 32 22">
|
||||
<path
|
||||
d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
|
||||
d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
@ -61,7 +61,7 @@ export default defineComponent({
|
||||
// eliminate tap delay on safari
|
||||
// see: https://github.com/youzan/vant/issues/6836
|
||||
if (!slots.default) {
|
||||
event.preventDefault();
|
||||
preventDefault(event);
|
||||
}
|
||||
active.value = false;
|
||||
emit('press', props.text, props.type);
|
||||
|
||||
@ -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>
|
||||
@ -178,7 +182,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<svg class="van-key__collapse-icon"
|
||||
viewbox="0 0 30 24"
|
||||
>
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z"
|
||||
<path d="M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
@ -201,7 +205,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<svg class="van-key__delete-icon"
|
||||
viewbox="0 0 32 22"
|
||||
>
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
|
||||
<path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
@ -316,7 +320,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<svg class="van-key__delete-icon"
|
||||
viewbox="0 0 32 22"
|
||||
>
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
|
||||
<path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
@ -444,7 +448,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<svg class="van-key__delete-icon"
|
||||
viewbox="0 0 32 22"
|
||||
>
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
|
||||
<path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
@ -567,7 +571,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<svg class="van-key__delete-icon"
|
||||
viewbox="0 0 32 22"
|
||||
>
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
|
||||
<path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
@ -690,7 +694,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<svg class="van-key__delete-icon"
|
||||
viewbox="0 0 32 22"
|
||||
>
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
|
||||
<path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
@ -795,7 +799,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<svg class="van-key__collapse-icon"
|
||||
viewbox="0 0 30 24"
|
||||
>
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z"
|
||||
<path d="M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
@ -818,7 +822,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<svg class="van-key__delete-icon"
|
||||
viewbox="0 0 32 22"
|
||||
>
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
|
||||
<path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { computed, watch, defineComponent, ExtractPropTypes } from 'vue';
|
||||
import { computed, watchEffect, defineComponent, ExtractPropTypes } from 'vue';
|
||||
import {
|
||||
BORDER,
|
||||
clamp,
|
||||
makeStringProp,
|
||||
makeNumberProp,
|
||||
makeNumericProp,
|
||||
createNamespace,
|
||||
BORDER_SURROUND,
|
||||
} from '../utils';
|
||||
|
||||
const [name, bem, t] = createNamespace('pagination');
|
||||
@ -57,10 +58,6 @@ export default defineComponent({
|
||||
const showPageSize = +props.showPageSize;
|
||||
const { modelValue, forceEllipses } = props;
|
||||
|
||||
if (props.mode !== 'multi') {
|
||||
return items;
|
||||
}
|
||||
|
||||
// Default page limits
|
||||
let startPage = 1;
|
||||
let endPage = pageCount;
|
||||
@ -101,85 +98,96 @@ export default defineComponent({
|
||||
return items;
|
||||
});
|
||||
|
||||
const select = (page: number, emitChange?: boolean) => {
|
||||
page = Math.min(count.value, Math.max(1, page));
|
||||
const updateModelValue = (value: number, emitChange?: boolean) => {
|
||||
value = clamp(value, 1, count.value);
|
||||
|
||||
if (props.modelValue !== page) {
|
||||
emit('update:modelValue', page);
|
||||
if (props.modelValue !== value) {
|
||||
emit('update:modelValue', value);
|
||||
|
||||
if (emitChange) {
|
||||
emit('change', page);
|
||||
emit('change', value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
select(value);
|
||||
},
|
||||
{ immediate: true }
|
||||
// format modelValue
|
||||
watchEffect(() => updateModelValue(props.modelValue));
|
||||
|
||||
const renderDesc = () => (
|
||||
<li class={bem('page-desc')}>
|
||||
{slots.pageDesc
|
||||
? slots.pageDesc()
|
||||
: `${props.modelValue}/${count.value}`}
|
||||
</li>
|
||||
);
|
||||
|
||||
const renderDesc = () => {
|
||||
if (props.mode !== 'multi') {
|
||||
return (
|
||||
<li class={bem('page-desc')}>
|
||||
{slots.pageDesc
|
||||
? slots.pageDesc()
|
||||
: `${props.modelValue}/${count.value}`}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return () => {
|
||||
const value = props.modelValue;
|
||||
const simple = props.mode !== 'multi';
|
||||
|
||||
const onSelect = (value: number) => () => select(value, true);
|
||||
|
||||
const renderPrevButton = () => {
|
||||
const { mode, modelValue } = props;
|
||||
const slot = slots['prev-text'];
|
||||
const disabled = modelValue === 1;
|
||||
return (
|
||||
<ul class={bem({ simple })}>
|
||||
<li
|
||||
class={[
|
||||
bem('item', { disabled: value === 1 }),
|
||||
bem('prev'),
|
||||
BORDER,
|
||||
]}
|
||||
onClick={onSelect(value - 1)}
|
||||
<li
|
||||
class={[
|
||||
bem('item', { disabled, border: mode === 'simple', prev: true }),
|
||||
BORDER_SURROUND,
|
||||
]}
|
||||
>
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={() => updateModelValue(modelValue - 1)}
|
||||
>
|
||||
{slots['prev-text']
|
||||
? slots['prev-text']()
|
||||
: props.prevText || t('prev')}
|
||||
</li>
|
||||
{pages.value.map((page) => (
|
||||
<li
|
||||
class={[
|
||||
bem('item', { active: page.active }),
|
||||
bem('page'),
|
||||
BORDER,
|
||||
]}
|
||||
onClick={onSelect(page.number)}
|
||||
>
|
||||
{slots.page ? slots.page(page) : page.text}
|
||||
</li>
|
||||
))}
|
||||
{renderDesc()}
|
||||
<li
|
||||
class={[
|
||||
bem('item', { disabled: value === count.value }),
|
||||
bem('next'),
|
||||
BORDER,
|
||||
]}
|
||||
onClick={onSelect(value + 1)}
|
||||
>
|
||||
{slots['next-text']
|
||||
? slots['next-text']()
|
||||
: props.nextText || t('next')}
|
||||
</li>
|
||||
</ul>
|
||||
{slot ? slot() : props.prevText || t('prev')}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const renderNextButton = () => {
|
||||
const { mode, modelValue } = props;
|
||||
const slot = slots['next-text'];
|
||||
const disabled = modelValue === count.value;
|
||||
return (
|
||||
<li
|
||||
class={[
|
||||
bem('item', { disabled, border: mode === 'simple', next: true }),
|
||||
BORDER_SURROUND,
|
||||
]}
|
||||
>
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={() => updateModelValue(modelValue + 1)}
|
||||
>
|
||||
{slot ? slot() : props.nextText || t('next')}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const renderPages = () =>
|
||||
pages.value.map((page) => (
|
||||
<li
|
||||
class={[
|
||||
bem('item', { active: page.active, page: true }),
|
||||
BORDER_SURROUND,
|
||||
]}
|
||||
>
|
||||
<button
|
||||
aria-current={page.active || undefined}
|
||||
onClick={() => updateModelValue(page.number)}
|
||||
>
|
||||
{slots.page ? slots.page(page) : page.text}
|
||||
</button>
|
||||
</li>
|
||||
));
|
||||
|
||||
return () => (
|
||||
<nav role="navigation" class={bem()}>
|
||||
<ul class={bem('items')}>
|
||||
{renderPrevButton()}
|
||||
{props.mode === 'simple' ? renderDesc() : renderPages()}
|
||||
{renderNextButton()}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@ -11,9 +11,12 @@
|
||||
}
|
||||
|
||||
.van-pagination {
|
||||
display: flex;
|
||||
font-size: var(--van-pagination-font-size);
|
||||
|
||||
&__items {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__item,
|
||||
&__page-desc {
|
||||
display: flex;
|
||||
@ -31,58 +34,56 @@
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--van-white);
|
||||
background-color: var(--van-pagination-item-default-color);
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-width: var(--van-border-width) 0 var(--van-border-width)
|
||||
var(--van-border-width);
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
border-right-width: var(--van-border-width);
|
||||
&:not(:last-child)::after {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: var(--van-white);
|
||||
background-color: var(--van-pagination-item-default-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__prev,
|
||||
&__next {
|
||||
padding: 0 var(--van-padding-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
&--page {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
&__item--disabled {
|
||||
&,
|
||||
&:active {
|
||||
&--prev,
|
||||
&--next {
|
||||
padding: 0 var(--van-padding-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&--border::after {
|
||||
border-width: var(--van-border-width);
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: var(--van-pagination-item-disabled-color);
|
||||
background-color: var(--van-pagination-item-disabled-background);
|
||||
cursor: not-allowed;
|
||||
opacity: var(--van-pagination-disabled-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
&__page {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
&__page-desc {
|
||||
flex: 1;
|
||||
height: var(--van-pagination-height);
|
||||
color: var(--van-pagination-desc-color);
|
||||
}
|
||||
|
||||
&--simple {
|
||||
.van-pagination__prev,
|
||||
.van-pagination__next {
|
||||
&::after {
|
||||
border-width: var(--van-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,92 +2,151 @@
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<ul class="van-pagination">
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">
|
||||
Prev
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">
|
||||
1
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
2
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
3
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
4
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
5
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__next van-hairline">
|
||||
Next
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="van-pagination van-pagination--simple"
|
||||
size="small"
|
||||
<nav role="navigation"
|
||||
class="van-pagination"
|
||||
>
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">
|
||||
Prev
|
||||
</li>
|
||||
<li class="van-pagination__page-desc">
|
||||
1/12
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__next van-hairline">
|
||||
Next
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="van-pagination__items">
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__item--prev van-hairline--surround">
|
||||
<button disabled>
|
||||
Prev
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--active van-pagination__item--page van-hairline--surround">
|
||||
<button aria-current="true">
|
||||
1
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
2
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
3
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
4
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
5
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--next van-hairline--surround">
|
||||
<button>
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="van-pagination">
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">
|
||||
Prev
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">
|
||||
1
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
2
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
3
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
...
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__next van-hairline">
|
||||
Next
|
||||
</li>
|
||||
</ul>
|
||||
<nav role="navigation"
|
||||
class="van-pagination"
|
||||
size="small"
|
||||
>
|
||||
<ul class="van-pagination__items">
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__item--border van-pagination__item--prev van-hairline--surround">
|
||||
<button disabled>
|
||||
Prev
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__page-desc">
|
||||
1/12
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--border van-pagination__item--next van-hairline--surround">
|
||||
<button>
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="van-pagination">
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__prev van-hairline">
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow-left">
|
||||
</i>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--active van-pagination__page van-hairline">
|
||||
1
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
2
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
3
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
4
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
5
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__next van-hairline">
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow">
|
||||
</i>
|
||||
</li>
|
||||
</ul>
|
||||
<nav role="navigation"
|
||||
class="van-pagination"
|
||||
>
|
||||
<ul class="van-pagination__items">
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__item--prev van-hairline--surround">
|
||||
<button disabled>
|
||||
Prev
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--active van-pagination__item--page van-hairline--surround">
|
||||
<button aria-current="true">
|
||||
1
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
2
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
3
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
...
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--next van-hairline--surround">
|
||||
<button>
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div>
|
||||
<nav role="navigation"
|
||||
class="van-pagination"
|
||||
>
|
||||
<ul class="van-pagination__items">
|
||||
<li class="van-pagination__item van-pagination__item--disabled van-pagination__item--prev van-hairline--surround">
|
||||
<button disabled>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow-left">
|
||||
</i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--active van-pagination__item--page van-hairline--surround">
|
||||
<button aria-current="true">
|
||||
1
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
2
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
3
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
4
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
5
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--next van-hairline--surround">
|
||||
<button>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow">
|
||||
</i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,53 +1,89 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render page slot correctly 1`] = `
|
||||
<ul class="van-pagination">
|
||||
<li class="van-pagination__item van-pagination__prev van-hairline">
|
||||
Previous
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
foo 1
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
foo 2
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
foo 3
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
foo 4
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
foo 5
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__next van-hairline">
|
||||
Next
|
||||
</li>
|
||||
</ul>
|
||||
<nav role="navigation"
|
||||
class="van-pagination"
|
||||
>
|
||||
<ul class="van-pagination__items">
|
||||
<li class="van-pagination__item van-pagination__item--prev van-hairline--surround">
|
||||
<button>
|
||||
Previous
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
foo 1
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
foo 2
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
foo 3
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
foo 4
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
foo 5
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--next van-hairline--surround">
|
||||
<button>
|
||||
Next
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
`;
|
||||
|
||||
exports[`should render prev-text、next-text slot correctly 1`] = `
|
||||
<ul class="van-pagination">
|
||||
<li class="van-pagination__item van-pagination__prev van-hairline">
|
||||
Custom PrevText
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
1
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
2
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
3
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
4
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__page van-hairline">
|
||||
5
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__next van-hairline">
|
||||
Custom NextText
|
||||
</li>
|
||||
</ul>
|
||||
<nav role="navigation"
|
||||
class="van-pagination"
|
||||
>
|
||||
<ul class="van-pagination__items">
|
||||
<li class="van-pagination__item van-pagination__item--prev van-hairline--surround">
|
||||
<button>
|
||||
Custom PrevText
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
1
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
2
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
3
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
4
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--page van-hairline--surround">
|
||||
<button>
|
||||
5
|
||||
</button>
|
||||
</li>
|
||||
<li class="van-pagination__item van-pagination__item--next van-hairline--surround">
|
||||
<button>
|
||||
Custom NextText
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
`;
|
||||
|
||||
@ -233,7 +233,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<svg class="van-key__collapse-icon"
|
||||
viewbox="0 0 30 24"
|
||||
>
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z"
|
||||
<path d="M26 13h-2v2h2v-2zm-8-3h2V8h-2v2zm2-4h2V4h-2v2zm2 4h4V4h-2v4h-2v2zm-7 14 3-3h-6l3 3zM6 13H4v2h2v-2zm16 0H8v2h14v-2zm-12-3h2V8h-2v2zM28 0l1 1 1 1v15l-1 2H1l-1-2V2l1-1 1-1zm0 2H2v15h26V2zM6 4v2H4V4zm10 2h2V4h-2v2zM8 9v1H4V8zm8 0v1h-2V8zm-6-5v2H8V4zm4 0v2h-2V4z"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
@ -256,7 +256,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<svg class="van-key__delete-icon"
|
||||
viewbox="0 0 32 22"
|
||||
>
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z"
|
||||
<path d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
|
||||
fill="currentColor"
|
||||
>
|
||||
</path>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -173,6 +173,8 @@ export default defineComponent({
|
||||
role="menuitem"
|
||||
class={[bem('action', { disabled, 'with-icon': icon }), className]}
|
||||
style={{ color }}
|
||||
tabindex={disabled ? undefined : 0}
|
||||
aria-disabled={disabled || undefined}
|
||||
onClick={() => onClickAction(action, index)}
|
||||
>
|
||||
{icon && (
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
exports[`should allow to custom the className of action 1`] = `
|
||||
<div role="menuitem"
|
||||
class="van-popover__action foo"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="van-popover__action-text van-hairline--bottom">
|
||||
Option
|
||||
@ -22,6 +23,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
|
||||
>
|
||||
<div role="menuitem"
|
||||
class="van-popover__action van-popover__action--with-icon"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="van-badge__wrapper my-icon my-icon-success van-popover__action-icon">
|
||||
</i>
|
||||
|
||||
@ -71,7 +71,6 @@ export default defineComponent({
|
||||
emits: [
|
||||
'open',
|
||||
'close',
|
||||
'click',
|
||||
'opened',
|
||||
'closed',
|
||||
'update:show',
|
||||
@ -176,7 +175,6 @@ export default defineComponent({
|
||||
}
|
||||
};
|
||||
|
||||
const onClick = (event: MouseEvent) => emit('click', event);
|
||||
const onOpened = () => emit('opened');
|
||||
const onClosed = () => emit('closed');
|
||||
|
||||
@ -194,7 +192,6 @@ export default defineComponent({
|
||||
}),
|
||||
{ 'van-safe-area-bottom': safeAreaInsetBottom },
|
||||
]}
|
||||
onClick={onClick}
|
||||
{...attrs}
|
||||
>
|
||||
{slots.default?.()}
|
||||
|
||||
@ -5,26 +5,36 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -37,8 +47,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
<div class="van-pull-refresh">
|
||||
@ -53,13 +66,19 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -71,7 +71,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-radio van-radio--disabled"
|
||||
tabindex="-1"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled">
|
||||
@ -84,7 +83,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-radio van-radio--disabled"
|
||||
tabindex="-1"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--disabled van-radio__icon--checked">
|
||||
|
||||
@ -195,8 +195,8 @@ export default defineComponent({
|
||||
role="radio"
|
||||
style={style}
|
||||
class={bem('item')}
|
||||
tabindex={0}
|
||||
aria-setsize={+count}
|
||||
tabindex={disabled ? undefined : 0}
|
||||
aria-setsize={count}
|
||||
aria-posinset={score}
|
||||
aria-checked={!isVoid}
|
||||
onClick={onClickItem}
|
||||
@ -231,7 +231,9 @@ export default defineComponent({
|
||||
readonly: props.readonly,
|
||||
disabled: props.disabled,
|
||||
})}
|
||||
tabindex={0}
|
||||
tabindex={props.disabled ? undefined : 0}
|
||||
aria-disabled={props.disabled}
|
||||
aria-readonly={props.readonly}
|
||||
onTouchstart={onTouchStart}
|
||||
onTouchmove={onTouchMove}
|
||||
>
|
||||
|
||||
@ -5,6 +5,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
@ -62,6 +64,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
@ -119,6 +123,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
@ -186,6 +192,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
@ -247,6 +255,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
@ -313,11 +323,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div role="radiogroup"
|
||||
class="van-rate van-rate--disabled"
|
||||
tabindex="0"
|
||||
aria-disabled="true"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="1"
|
||||
aria-checked="true"
|
||||
@ -327,7 +337,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="2"
|
||||
aria-checked="true"
|
||||
@ -337,7 +346,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="3"
|
||||
aria-checked="true"
|
||||
@ -347,7 +355,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="4"
|
||||
aria-checked="false"
|
||||
@ -357,7 +364,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
tabindex="0"
|
||||
aria-setsize="5"
|
||||
aria-posinset="5"
|
||||
aria-checked="false"
|
||||
@ -371,6 +377,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate van-rate--readonly"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="true"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
@ -428,6 +436,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate van-rate--readonly"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="true"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
@ -489,6 +499,8 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
class="van-rate__item"
|
||||
|
||||
@ -4,6 +4,8 @@ exports[`should render gutter when using gutter prop 1`] = `
|
||||
<div role="radiogroup"
|
||||
class="van-rate"
|
||||
tabindex="0"
|
||||
aria-disabled="false"
|
||||
aria-readonly="false"
|
||||
>
|
||||
<div role="radio"
|
||||
style="padding-right: 10px;"
|
||||
|
||||
@ -122,7 +122,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
|
||||
| label | Left side label | _string_ | - |
|
||||
| name `v3.2.3` | As the identifier when submitting the form | _string_ | - |
|
||||
| shape | Shape of field, can be set to `round` | _string_ | `square` |
|
||||
| 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-search-n-input` |
|
||||
| background | Background color of field | _string_ | `#f2f2f2` |
|
||||
| maxlength | Max length of value | _number \| string_ | - |
|
||||
| placeholder | Placeholder | _string_ | - |
|
||||
|
||||
@ -134,7 +134,7 @@ export default {
|
||||
| label | 搜索框左侧文本 | _string_ | - |
|
||||
| name `v3.2.3` | 名称，作为提交表单时的标识符 | _string_ | - |
|
||||
| shape | 搜索框形状，可选值为 `round` | _string_ | `square` |
|
||||
| id `v3.2.2` | 搜索框 id，同时会设置 label 的 for 属性 | _string_ | - |
|
||||
| id `v3.2.2` | 搜索框 id，同时会设置 label 的 for 属性 | _string_ | `van-search-n-input` |
|
||||
| background | 搜索框外部背景色 | _string_ | `#f2f2f2` |
|
||||
| maxlength | 输入的最大字符数 | _number \| string_ | - |
|
||||
| placeholder | 占位提示文字 | _string_ | - |
|
||||
|
||||
@ -12,6 +12,7 @@ import {
|
||||
import { fieldSharedProps } from '../field/Field';
|
||||
|
||||
// Composables
|
||||
import { useId } from '../composables/use-id';
|
||||
import { useExpose } from '../composables/use-expose';
|
||||
|
||||
// Components
|
||||
@ -42,6 +43,7 @@ export default defineComponent({
|
||||
emits: ['search', 'cancel', 'update:modelValue'],
|
||||
|
||||
setup(props, { emit, slots, attrs }) {
|
||||
const id = useId();
|
||||
const filedRef = ref<FieldInstance>();
|
||||
|
||||
const onCancel = () => {
|
||||
@ -59,10 +61,12 @@ export default defineComponent({
|
||||
}
|
||||
};
|
||||
|
||||
const getInputId = () => props.id || `${id}-input`;
|
||||
|
||||
const renderLabel = () => {
|
||||
if (slots.label || props.label) {
|
||||
return (
|
||||
<label class={bem('label')} for={props.id}>
|
||||
<label class={bem('label')} for={getInputId()}>
|
||||
{slots.label ? slots.label() : props.label}
|
||||
</label>
|
||||
);
|
||||
@ -93,7 +97,9 @@ export default defineComponent({
|
||||
>;
|
||||
|
||||
const renderField = () => {
|
||||
const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames));
|
||||
const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames), {
|
||||
id: getInputId(),
|
||||
});
|
||||
|
||||
const onInput = (value: string) => emit('update:modelValue', value);
|
||||
|
||||
|
||||
@ -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-search-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-search-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-search-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-search-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-search-input"
|
||||
class="van-field__control"
|
||||
placeholder="Placeholder"
|
||||
>
|
||||
@ -115,7 +120,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div class="van-search van-search--show-action">
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<label class="van-search__label">
|
||||
<label class="van-search__label"
|
||||
for="van-search-input"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<div class="van-cell van-cell--borderless van-field van-search__field">
|
||||
@ -126,6 +133,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-search-input"
|
||||
class="van-field__control"
|
||||
placeholder="Placeholder"
|
||||
>
|
||||
|
||||
@ -10,7 +10,9 @@ exports[`should render action text when using action-text prop 1`] = `
|
||||
`;
|
||||
|
||||
exports[`should render label slot correctly 1`] = `
|
||||
<label class="van-search__label">
|
||||
<label class="van-search__label"
|
||||
for="van-search-input"
|
||||
>
|
||||
Custom Label
|
||||
</label>
|
||||
`;
|
||||
@ -34,6 +36,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-search-input"
|
||||
class="van-field__control"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -47,6 +47,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="switch"
|
||||
class="van-switch"
|
||||
style="font-size: 24px;"
|
||||
tabindex="0"
|
||||
aria-checked="false"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
|
||||
@ -294,10 +294,12 @@ export default defineComponent({
|
||||
<div
|
||||
role="slider"
|
||||
class={getButtonClassName(index)}
|
||||
tabindex={props.disabled || props.readonly ? -1 : 0}
|
||||
aria-valuemin={+props.min}
|
||||
tabindex={props.disabled ? undefined : 0}
|
||||
aria-valuemin={props.min}
|
||||
aria-valuenow={current}
|
||||
aria-valuemax={+props.max}
|
||||
aria-valuemax={props.max}
|
||||
aria-disabled={props.disabled || undefined}
|
||||
aria-readonly={props.readonly || undefined}
|
||||
aria-orientation={props.vertical ? 'vertical' : 'horizontal'}
|
||||
onTouchstart={(event) => {
|
||||
if (typeof index === 'number') {
|
||||
|
||||
@ -76,10 +76,10 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div role="slider"
|
||||
class="van-slider__button-wrapper van-slider__button-wrapper--right"
|
||||
tabindex="-1"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
aria-valuemax="100"
|
||||
aria-disabled="true"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div class="van-slider__button">
|
||||
|
||||
@ -29,6 +29,27 @@ exports[`should render left-button、right-button slot correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render readonly Slider correctly 1`] = `
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar"
|
||||
style="width: 50%; left: 0%;"
|
||||
>
|
||||
<div role="slider"
|
||||
class="van-slider__button-wrapper van-slider__button-wrapper--right"
|
||||
tabindex="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuenow="50"
|
||||
aria-valuemax="100"
|
||||
aria-readonly="true"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div class="van-slider__button">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render reversed range slider correctly 1`] = `
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar"
|
||||
|
||||
@ -117,6 +117,17 @@ test('should not allow to click slider when readonly', async () => {
|
||||
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should render readonly Slider correctly', async () => {
|
||||
const wrapper = mount(Slider, {
|
||||
props: {
|
||||
modelValue: 50,
|
||||
readonly: true,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should allow to drag vertical slider', () => {
|
||||
const restoreMock = mockRect(true);
|
||||
|
||||
|
||||
@ -247,14 +247,14 @@ export default defineComponent({
|
||||
// fix mobile safari page scroll down issue
|
||||
// see: https://github.com/youzan/vant/issues/7690
|
||||
if (props.disableInput) {
|
||||
event.preventDefault();
|
||||
preventDefault(event);
|
||||
}
|
||||
};
|
||||
|
||||
const createListeners = (type: 'plus' | 'minus') => ({
|
||||
const createListeners = (type: typeof actionType) => ({
|
||||
onClick: (event: MouseEvent) => {
|
||||
// disable double tap scrolling on mobile safari
|
||||
event.preventDefault();
|
||||
preventDefault(event);
|
||||
actionType = type;
|
||||
onChange();
|
||||
},
|
||||
@ -267,12 +267,7 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
watch(
|
||||
[
|
||||
() => props.max,
|
||||
() => props.min,
|
||||
() => props.integer,
|
||||
() => props.decimalLength,
|
||||
],
|
||||
() => [props.max, props.min, props.integer, props.decimalLength],
|
||||
check
|
||||
);
|
||||
|
||||
@ -293,7 +288,7 @@ export default defineComponent({
|
||||
useCustomFieldValue(() => props.modelValue);
|
||||
|
||||
return () => (
|
||||
<div class={bem([props.theme])}>
|
||||
<div role="group" class={bem([props.theme])}>
|
||||
<button
|
||||
v-show={props.showMinus}
|
||||
type="button"
|
||||
@ -302,6 +297,7 @@ export default defineComponent({
|
||||
bem('minus', { disabled: minusDisabled.value }),
|
||||
{ [HAPTICS_FEEDBACK]: !minusDisabled.value },
|
||||
]}
|
||||
aria-disabled={minusDisabled.value || undefined}
|
||||
{...createListeners('minus')}
|
||||
/>
|
||||
<input
|
||||
@ -317,9 +313,9 @@ export default defineComponent({
|
||||
// set keyboard in modern browsers
|
||||
inputmode={props.integer ? 'numeric' : 'decimal'}
|
||||
placeholder={props.placeholder}
|
||||
aria-valuemax={+props.max}
|
||||
aria-valuemin={+props.min}
|
||||
aria-valuenow={+current.value}
|
||||
aria-valuemax={props.max}
|
||||
aria-valuemin={props.min}
|
||||
aria-valuenow={current.value}
|
||||
onBlur={onBlur}
|
||||
onInput={onInput}
|
||||
onFocus={onFocus}
|
||||
@ -333,6 +329,7 @@ export default defineComponent({
|
||||
bem('plus', { disabled: plusDisabled.value }),
|
||||
{ [HAPTICS_FEEDBACK]: !plusDisabled.value },
|
||||
]}
|
||||
aria-disabled={plusDisabled.value || undefined}
|
||||
{...createListeners('plus')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -9,9 +9,12 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
@ -36,9 +39,12 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
@ -63,9 +69,12 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
@ -90,9 +99,12 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="tel"
|
||||
@ -117,9 +129,12 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
@ -133,6 +148,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus van-stepper__plus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
@ -145,9 +161,12 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
@ -173,9 +192,12 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
@ -184,7 +206,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
inputmode="decimal"
|
||||
aria-valuemax="Infinity"
|
||||
aria-valuemin="1"
|
||||
aria-valuenow="1"
|
||||
aria-valuenow="1.0"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus van-haptics-feedback"
|
||||
@ -200,10 +222,13 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
style="width: 32px; height: 32px;"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
@ -230,9 +255,12 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
@ -257,10 +285,13 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-stepper van-stepper--round">
|
||||
<div role="group"
|
||||
class="van-stepper van-stepper--round"
|
||||
>
|
||||
<button type="button"
|
||||
style="width: 22px; height: 22px;"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should disable buttons and input when using disabled prop 1`] = `
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
@ -17,16 +20,20 @@ exports[`should disable buttons and input when using disabled prop 1`] = `
|
||||
>
|
||||
<button type="button"
|
||||
class="van-stepper__plus van-stepper__plus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should update input height and button size when using button-size prop 1`] = `
|
||||
<div class="van-stepper">
|
||||
<div role="group"
|
||||
class="van-stepper"
|
||||
>
|
||||
<button type="button"
|
||||
style="width: 2rem; height: 2rem;"
|
||||
class="van-stepper__minus van-stepper__minus--disabled"
|
||||
aria-disabled="true"
|
||||
>
|
||||
</button>
|
||||
<input type="text"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { nextTick, ref } from 'vue';
|
||||
import { VueWrapper } from '@vue/test-utils';
|
||||
import { mockScrollTop, mount } from '../../../test';
|
||||
import { mockScrollTop, trigger, mount } from '../../../test';
|
||||
import { Sticky } from '..';
|
||||
import { ComponentInstance } from '../../utils';
|
||||
|
||||
@ -130,6 +130,7 @@ test('should allow to using offset-top prop with rem unit', async () => {
|
||||
|
||||
test('should allow to using offset-top prop with vw unit', async () => {
|
||||
Object.defineProperty(window, 'innerWidth', { value: 300 });
|
||||
trigger(window, 'resize');
|
||||
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
|
||||
@ -19,18 +19,15 @@ import {
|
||||
isHidden,
|
||||
truthProp,
|
||||
numericProp,
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
preventDefault,
|
||||
createNamespace,
|
||||
makeNumericProp,
|
||||
} from '../utils';
|
||||
|
||||
// Composables
|
||||
import {
|
||||
doubleRaf,
|
||||
useChildren,
|
||||
useWindowSize,
|
||||
usePageVisibility,
|
||||
} from '@vant/use';
|
||||
import { doubleRaf, useChildren, usePageVisibility } from '@vant/use';
|
||||
import { useTouch } from '../composables/use-touch';
|
||||
import { useExpose } from '../composables/use-expose';
|
||||
import { onPopupReopen } from '../composables/on-popup-reopen';
|
||||
@ -78,7 +75,6 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
const touch = useTouch();
|
||||
const windowSize = useWindowSize();
|
||||
const { children, linkChildren } = useChildren(SWIPE_KEY);
|
||||
|
||||
const count = computed(() => children.length);
|
||||
@ -413,7 +409,7 @@ export default defineComponent({
|
||||
|
||||
watch(count, () => initialize(state.active));
|
||||
watch(() => props.autoplay, autoplay);
|
||||
watch([windowSize.width, windowSize.height], resize);
|
||||
watch([windowWidth, windowHeight], resize);
|
||||
watch(usePageVisibility(), (visible) => {
|
||||
if (visible === 'visible') {
|
||||
autoplay();
|
||||
|
||||
@ -68,6 +68,7 @@ export default defineComponent({
|
||||
disabled,
|
||||
})}
|
||||
style={style}
|
||||
tabindex={disabled ? undefined : 0}
|
||||
aria-checked={checked}
|
||||
onClick={onClick}
|
||||
>
|
||||
|
||||
@ -4,6 +4,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div role="switch"
|
||||
class="van-switch van-switch--on"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
@ -22,6 +23,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div role="switch"
|
||||
class="van-switch van-switch--on van-switch--loading"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
@ -46,6 +48,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="switch"
|
||||
class="van-switch van-switch--on"
|
||||
style="font-size: 24px;"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
@ -56,6 +59,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="switch"
|
||||
class="van-switch van-switch--on"
|
||||
style="background-color: rgb(238, 10, 36);"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
@ -65,6 +69,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div role="switch"
|
||||
class="van-switch van-switch--on"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
@ -81,6 +86,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div role="switch"
|
||||
class="van-switch van-switch--on"
|
||||
style="font-size: 24px;"
|
||||
tabindex="0"
|
||||
aria-checked="true"
|
||||
>
|
||||
<div class="van-switch__node">
|
||||
|
||||
@ -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,11 +107,14 @@ 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>
|
||||
<div class={bem('panel')}>{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('panel')}
|
||||
tabindex={show ? 0 : -1}
|
||||
aria-labelledby={label}
|
||||
>
|
||||
{Content}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.van-tab {
|
||||
&__pane {
|
||||
&__panel {
|
||||
&,
|
||||
&-wrapper {
|
||||
flex-shrink: 0;
|
||||
|
||||
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"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
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"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
Text
|
||||
@ -37,26 +49,36 @@ exports[`should allow to set name prop 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -69,19 +91,28 @@ exports[`should allow to set name prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -99,9 +130,12 @@ DOMWrapper {
|
||||
"_values": Object {},
|
||||
},
|
||||
"wrapperElement": <div
|
||||
class="van-tab__pane"
|
||||
aria-labelledby="van-tabs-0"
|
||||
class="van-tab__panel"
|
||||
id="van-tab"
|
||||
role="tabpanel"
|
||||
style=""
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
Text
|
||||
@ -116,9 +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">
|
||||
@ -134,11 +171,15 @@ exports[`should render nav-left、nav-right slot correctly 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
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
|
||||
@ -158,26 +199,36 @@ exports[`should switch tab after click the tab title 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -190,19 +241,28 @@ exports[`should switch tab after click the tab title 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -215,26 +275,36 @@ exports[`should switch tab after click the tab title 2`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -247,20 +317,29 @@ exports[`should switch tab after click the tab title 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style
|
||||
>
|
||||
Text
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -273,26 +352,33 @@ exports[`swipe switch tab after swiping tab content 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title3
|
||||
@ -310,26 +396,35 @@ 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">
|
||||
<div class="van-tab__panel">
|
||||
Text
|
||||
</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">
|
||||
<div class="van-tab__panel">
|
||||
Text
|
||||
</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>
|
||||
@ -344,26 +439,33 @@ exports[`swipe switch tab after swiping tab content 2`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title3
|
||||
@ -381,29 +483,38 @@ 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">
|
||||
<div class="van-tab__panel">
|
||||
Text
|
||||
</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">
|
||||
<div class="van-tab__panel">
|
||||
Text
|
||||
</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">
|
||||
<div class="van-tab__panel">
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
@ -418,26 +529,33 @@ exports[`swipe switch tab after swiping tab content 3`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
title3
|
||||
@ -455,29 +573,38 @@ 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">
|
||||
<div class="van-tab__panel">
|
||||
Text
|
||||
</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">
|
||||
<div class="van-tab__panel">
|
||||
Text
|
||||
</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">
|
||||
<div class="van-tab__panel">
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,26 +5,36 @@ exports[`should render Tab inside a component correctly 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -37,19 +47,28 @@ exports[`should render Tab inside a component correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
@ -62,26 +81,36 @@ exports[`should render correctly after inserting a tab 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -94,20 +123,29 @@ exports[`should render correctly after inserting a tab 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
3
|
||||
@ -121,18 +159,25 @@ exports[`should render correctly after inserting a tab with name 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
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
|
||||
@ -145,14 +190,20 @@ exports[`should render correctly after inserting a tab with name 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style="display: none;"
|
||||
>
|
||||
bar
|
||||
</div>
|
||||
<div role="tabpanel"
|
||||
class="van-tab__pane"
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style
|
||||
>
|
||||
foo
|
||||
@ -166,6 +217,7 @@ exports[`should render nav-bottom slot correctly 1`] = `
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
class="van-tabs__nav van-tabs__nav--line"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div class="van-tabs__line">
|
||||
</div>
|
||||
|
||||
@ -256,7 +256,7 @@ test('should emit rendered event after tab is rendered', async () => {
|
||||
|
||||
await later();
|
||||
expect(onRendered).toHaveBeenCalledWith('a', 'title1');
|
||||
expect(wrapper.find('.van-tab__pane')).toMatchSnapshot();
|
||||
expect(wrapper.find('.van-tab__panel')).toMatchSnapshot();
|
||||
|
||||
const tabs = wrapper.findAll('.van-tab');
|
||||
await tabs[1].trigger('click');
|
||||
|
||||
@ -89,8 +89,11 @@ export default defineComponent({
|
||||
|
||||
return (
|
||||
<div
|
||||
role="tab"
|
||||
class={bem({ active: active.value })}
|
||||
style={{ color }}
|
||||
tabindex={0}
|
||||
aria-selected={active.value}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Badge
|
||||
|
||||
@ -69,6 +69,7 @@ export default defineComponent({
|
||||
return (
|
||||
<div
|
||||
ref={root}
|
||||
role="tablist"
|
||||
style={getZIndexStyle(zIndex)}
|
||||
class={[
|
||||
bem({ fixed }),
|
||||
|
||||
@ -2,8 +2,14 @@
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div role="tablist"
|
||||
class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
|
||||
>
|
||||
<div role="tab"
|
||||
class="van-tabbar-item van-tabbar-item--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-home-o">
|
||||
</i>
|
||||
@ -12,7 +18,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-search">
|
||||
</i>
|
||||
@ -21,7 +31,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-friends-o">
|
||||
</i>
|
||||
@ -30,7 +44,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-setting-o">
|
||||
</i>
|
||||
@ -42,8 +60,14 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div role="tablist"
|
||||
class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
|
||||
>
|
||||
<div role="tab"
|
||||
class="van-tabbar-item van-tabbar-item--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-home-o">
|
||||
</i>
|
||||
@ -52,7 +76,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-search">
|
||||
</i>
|
||||
@ -61,7 +89,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-friends-o">
|
||||
</i>
|
||||
@ -70,7 +102,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-setting-o">
|
||||
</i>
|
||||
@ -82,8 +118,14 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div role="tablist"
|
||||
class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
|
||||
>
|
||||
<div role="tab"
|
||||
class="van-tabbar-item van-tabbar-item--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-home-o">
|
||||
</i>
|
||||
@ -92,7 +134,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-search">
|
||||
</i>
|
||||
@ -103,7 +149,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-friends-o">
|
||||
</i>
|
||||
@ -115,7 +165,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-setting-o">
|
||||
</i>
|
||||
@ -130,8 +184,14 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div role="tablist"
|
||||
class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
|
||||
>
|
||||
<div role="tab"
|
||||
class="van-tabbar-item van-tabbar-item--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<img src="https://img.yzcdn.cn/vant/user-active.png">
|
||||
<div class="van-badge van-badge--fixed">
|
||||
@ -144,7 +204,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-search">
|
||||
</i>
|
||||
@ -153,7 +217,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-setting-o">
|
||||
</i>
|
||||
@ -165,9 +233,14 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
|
||||
<div class="van-tabbar-item van-tabbar-item--active"
|
||||
<div role="tablist"
|
||||
class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
|
||||
>
|
||||
<div role="tab"
|
||||
class="van-tabbar-item van-tabbar-item--active"
|
||||
style="color: rgb(238, 10, 36);"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-home-o">
|
||||
@ -177,8 +250,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item"
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
style="color: rgb(0, 0, 0);"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-search">
|
||||
@ -188,8 +264,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item"
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
style="color: rgb(0, 0, 0);"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-friends-o">
|
||||
@ -199,8 +278,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item"
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
style="color: rgb(0, 0, 0);"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-setting-o">
|
||||
@ -213,8 +295,14 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
|
||||
<div class="van-tabbar-item van-tabbar-item--active">
|
||||
<div role="tablist"
|
||||
class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
|
||||
>
|
||||
<div role="tab"
|
||||
class="van-tabbar-item van-tabbar-item--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-home-o">
|
||||
</i>
|
||||
@ -223,7 +311,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab 1
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-search">
|
||||
</i>
|
||||
@ -232,7 +324,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-friends-o">
|
||||
</i>
|
||||
@ -241,7 +337,11 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
Tab 3
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabbar-item">
|
||||
<div role="tab"
|
||||
class="van-tabbar-item"
|
||||
tabindex="0"
|
||||
aria-selected="false"
|
||||
>
|
||||
<div class="van-badge__wrapper van-tabbar-item__icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-setting-o">
|
||||
</i>
|
||||
|
||||
@ -4,7 +4,9 @@ exports[`should render placeholder element when using placeholder prop 1`] = `
|
||||
<div class="van-tabbar__placeholder"
|
||||
style="height: 50px;"
|
||||
>
|
||||
<div class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom">
|
||||
<div role="tablist"
|
||||
class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -23,6 +23,7 @@ import {
|
||||
truthProp,
|
||||
numericProp,
|
||||
Interceptor,
|
||||
windowWidth,
|
||||
getElementTop,
|
||||
makeStringProp,
|
||||
callInterceptor,
|
||||
@ -38,11 +39,11 @@ import { scrollLeftTo, scrollTopTo } from './utils';
|
||||
import {
|
||||
useRect,
|
||||
useChildren,
|
||||
useWindowSize,
|
||||
useScrollParent,
|
||||
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';
|
||||
@ -100,7 +101,7 @@ export default defineComponent({
|
||||
const navRef = ref<HTMLElement>();
|
||||
const wrapRef = ref<HTMLElement>();
|
||||
|
||||
const windowSize = useWindowSize();
|
||||
const id = useId();
|
||||
const scroller = useScrollParent(root);
|
||||
const [titleRefs, setTitleRefs] = useRefs<ComponentInstance>();
|
||||
const { children, linkChildren } = useChildren(TABS_KEY);
|
||||
@ -329,12 +330,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}
|
||||
@ -365,6 +368,7 @@ export default defineComponent({
|
||||
role="tablist"
|
||||
class={bem('nav', [type, { complete: scrollable.value }])}
|
||||
style={navStyle.value}
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
{slots['nav-left']?.()}
|
||||
{renderNav()}
|
||||
@ -377,7 +381,7 @@ export default defineComponent({
|
||||
);
|
||||
};
|
||||
|
||||
watch([() => props.color, windowSize.width], setLine);
|
||||
watch([() => props.color, windowWidth], setLine);
|
||||
|
||||
watch(
|
||||
() => props.active,
|
||||
@ -441,6 +445,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({
|
||||
@ -83,7 +86,10 @@ export default defineComponent({
|
||||
}),
|
||||
]}
|
||||
style={style.value}
|
||||
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,4 +1,4 @@
|
||||
import { useRect } from '@vant/use';
|
||||
import { useRect, useWindowSize } from '@vant/use';
|
||||
import { unref, Ref } from 'vue';
|
||||
import { isIOS as checkIsIOS } from './validate';
|
||||
|
||||
@ -84,3 +84,5 @@ export function isHidden(
|
||||
|
||||
return hidden || parentHidden;
|
||||
}
|
||||
|
||||
export const { width: windowWidth, height: windowHeight } = useWindowSize();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { CSSProperties } from 'vue';
|
||||
import { useWindowSize } from '@vant/use';
|
||||
import { inBrowser } from './basic';
|
||||
import { windowWidth, windowHeight } from './dom';
|
||||
import { isDef, isNumeric } from './validate';
|
||||
|
||||
export function addUnit(value?: string | number): string | undefined {
|
||||
@ -51,15 +51,13 @@ function convertRem(value: string) {
|
||||
}
|
||||
|
||||
function convertVw(value: string) {
|
||||
const { width } = useWindowSize();
|
||||
value = value.replace(/vw/g, '');
|
||||
return (+value * width.value) / 100;
|
||||
return (+value * windowWidth.value) / 100;
|
||||
}
|
||||
|
||||
function convertVh(value: string) {
|
||||
const { height } = useWindowSize();
|
||||
value = value.replace(/vh/g, '');
|
||||
return (+value * height.value) / 100;
|
||||
return (+value * windowHeight.value) / 100;
|
||||
}
|
||||
|
||||
export function unitToPx(value: string | number): number {
|
||||
|
||||
@ -3,6 +3,7 @@ import { deepClone } from '../deep-clone';
|
||||
import { deepAssign } from '../deep-assign';
|
||||
import { isDef, isMobile, isNumeric } from '../validate';
|
||||
import { addUnit, unitToPx, camelize, formatNumber } from '../format';
|
||||
import { trigger } from '../../../test';
|
||||
|
||||
test('deepClone', () => {
|
||||
const a = { foo: 0 };
|
||||
@ -110,6 +111,7 @@ test('unitToPx', () => {
|
||||
|
||||
Object.defineProperty(window, 'innerWidth', { value: 100 });
|
||||
Object.defineProperty(window, 'innerHeight', { value: 200 });
|
||||
trigger(window, 'resize');
|
||||
|
||||
expect(unitToPx(0)).toEqual(0);
|
||||
expect(unitToPx(10)).toEqual(10);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user