vant 3.2.7 → 3.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/address-edit/AddressEdit.js +154 -180
- package/es/address-edit/AddressEditDetail.d.ts +10 -9
- package/es/address-edit/AddressEditDetail.js +6 -6
- package/es/button/Button.js +2 -2
- package/es/calendar/Calendar.js +8 -14
- package/es/calendar/CalendarHeader.js +1 -3
- package/es/calendar/CalendarMonth.js +11 -10
- package/es/calendar/types.d.ts +1 -1
- package/es/cascader/Cascader.js +17 -5
- package/es/checkbox/Checker.js +1 -1
- package/es/checkbox/types.d.ts +2 -6
- package/es/composables/use-id.d.ts +1 -0
- package/es/composables/use-id.js +14 -0
- package/es/composables/use-route.d.ts +1 -1
- package/es/composables/use-route.js +4 -4
- package/es/count-down/CountDown.js +1 -0
- package/es/coupon-list/CouponList.js +40 -24
- package/es/coupon-list/index.css +1 -1
- package/es/coupon-list/index.less +0 -5
- package/es/dropdown-item/DropdownItem.js +7 -2
- package/es/dropdown-item/types.d.ts +2 -6
- package/es/dropdown-menu/DropdownMenu.js +7 -3
- package/es/dropdown-menu/types.d.ts +1 -0
- package/es/empty/Network.js +22 -34
- package/es/field/Field.d.ts +1 -1
- package/es/field/Field.js +13 -5
- package/es/field/index.d.ts +2 -2
- package/es/field/types.d.ts +7 -6
- package/es/form/Form.js +2 -2
- package/es/image/Image.js +4 -9
- package/es/image-preview/ImagePreview.js +3 -4
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/lazyload/index.d.ts +1 -1
- package/es/lazyload/index.js +1 -1
- package/es/lazyload/vue-lazyload/index.d.ts +55 -0
- package/es/lazyload/vue-lazyload/index.js +46 -0
- package/es/lazyload/vue-lazyload/lazy-component.js +53 -0
- package/es/lazyload/vue-lazyload/lazy-container.js +98 -0
- package/es/lazyload/vue-lazyload/lazy-image.js +115 -0
- package/es/lazyload/vue-lazyload/lazy.js +507 -0
- package/es/lazyload/vue-lazyload/listener.js +241 -0
- package/es/lazyload/vue-lazyload/util.js +183 -0
- package/es/list/List.js +3 -1
- package/es/nav-bar/NavBar.d.ts +1 -1
- package/es/nav-bar/index.d.ts +1 -1
- package/es/number-keyboard/NumberKeyboardKey.js +4 -4
- package/es/pagination/Pagination.js +67 -49
- package/es/pagination/index.css +1 -1
- package/es/pagination/index.less +32 -31
- package/es/password-input/PasswordInput.d.ts +21 -1
- package/es/password-input/PasswordInput.js +10 -9
- package/es/password-input/index.d.ts +2 -1
- package/es/popover/Popover.js +2 -0
- package/es/popup/Popup.d.ts +1 -2
- package/es/popup/Popup.js +2 -5
- package/es/popup/index.d.ts +1 -2
- package/es/progress/Progress.js +2 -2
- package/es/rate/Rate.js +5 -3
- package/es/search/Search.js +8 -2
- package/es/sidebar/Sidebar.js +1 -0
- package/es/sidebar-item/SidebarItem.js +4 -1
- package/es/slider/Slider.js +5 -3
- package/es/stepper/Stepper.js +11 -8
- package/es/submit-bar/SubmitBar.d.ts +4 -3
- package/es/submit-bar/index.d.ts +3 -2
- package/es/swipe/Swipe.js +11 -6
- package/es/swipe/types.d.ts +1 -3
- package/es/switch/Switch.js +1 -0
- package/es/switch/index.css +1 -1
- package/es/switch/index.less +2 -0
- package/es/tab/Tab.js +18 -5
- package/es/tab/index.css +1 -1
- package/es/tab/index.less +1 -1
- package/es/tabbar/Tabbar.d.ts +1 -1
- package/es/tabbar/Tabbar.js +10 -10
- package/es/tabbar-item/TabbarItem.js +16 -7
- package/es/tabs/Tabs.js +17 -11
- package/es/tabs/TabsTitle.d.ts +6 -0
- package/es/tabs/TabsTitle.js +7 -1
- package/es/tabs/types.d.ts +1 -0
- package/es/uploader/UploaderPreviewItem.js +4 -1
- package/es/uploader/utils.d.ts +2 -2
- package/es/uploader/utils.js +2 -2
- package/es/utils/dom.d.ts +1 -0
- package/es/utils/dom.js +6 -2
- package/es/utils/format.js +6 -5
- package/es/vue-tsx-shim.d.ts +1 -0
- package/lib/address-edit/AddressEdit.js +155 -180
- package/lib/address-edit/AddressEditDetail.d.ts +10 -9
- package/lib/address-edit/AddressEditDetail.js +6 -6
- package/lib/button/Button.js +1 -1
- package/lib/calendar/Calendar.js +8 -14
- package/lib/calendar/CalendarHeader.js +1 -3
- package/lib/calendar/CalendarMonth.js +11 -10
- package/lib/calendar/types.d.ts +1 -1
- package/lib/cascader/Cascader.js +17 -5
- package/lib/checkbox/Checker.js +1 -1
- package/lib/checkbox/types.d.ts +2 -6
- package/lib/composables/use-id.d.ts +1 -0
- package/lib/composables/use-id.js +21 -0
- package/lib/composables/use-route.d.ts +1 -1
- package/lib/composables/use-route.js +4 -4
- package/lib/count-down/CountDown.js +1 -0
- package/lib/coupon-list/CouponList.js +39 -22
- package/lib/coupon-list/index.css +1 -1
- package/lib/coupon-list/index.less +0 -5
- package/lib/dropdown-item/DropdownItem.js +7 -2
- package/lib/dropdown-item/types.d.ts +2 -6
- package/lib/dropdown-menu/DropdownMenu.js +7 -2
- package/lib/dropdown-menu/types.d.ts +1 -0
- package/lib/empty/Network.js +22 -34
- package/lib/field/Field.d.ts +1 -1
- package/lib/field/Field.js +14 -5
- package/lib/field/index.d.ts +2 -2
- package/lib/field/types.d.ts +7 -6
- package/lib/form/Form.js +1 -1
- package/lib/image/Image.js +4 -9
- package/lib/image-preview/ImagePreview.js +1 -2
- package/lib/index.css +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/lazyload/index.d.ts +1 -1
- package/lib/lazyload/index.js +3 -3
- package/lib/lazyload/vue-lazyload/index.d.ts +55 -0
- package/lib/lazyload/vue-lazyload/index.js +58 -0
- package/lib/lazyload/vue-lazyload/lazy-component.js +62 -0
- package/lib/lazyload/vue-lazyload/lazy-container.js +106 -0
- package/lib/lazyload/vue-lazyload/lazy-image.js +125 -0
- package/lib/lazyload/vue-lazyload/lazy.js +520 -0
- package/lib/lazyload/vue-lazyload/listener.js +251 -0
- package/lib/lazyload/vue-lazyload/util.js +213 -0
- package/lib/list/List.js +3 -1
- package/lib/nav-bar/NavBar.d.ts +1 -1
- package/lib/nav-bar/index.d.ts +1 -1
- package/lib/number-keyboard/NumberKeyboardKey.js +3 -3
- package/lib/pagination/Pagination.js +65 -47
- package/lib/pagination/index.css +1 -1
- package/lib/pagination/index.less +32 -31
- package/lib/password-input/PasswordInput.d.ts +21 -1
- package/lib/password-input/PasswordInput.js +10 -9
- package/lib/password-input/index.d.ts +2 -1
- package/lib/popover/Popover.js +2 -0
- package/lib/popup/Popup.d.ts +1 -2
- package/lib/popup/Popup.js +2 -5
- package/lib/popup/index.d.ts +1 -2
- package/lib/progress/Progress.js +2 -2
- package/lib/rate/Rate.js +5 -3
- package/lib/search/Search.js +9 -2
- package/lib/sidebar/Sidebar.js +1 -0
- package/lib/sidebar-item/SidebarItem.js +4 -1
- package/lib/slider/Slider.js +5 -3
- package/lib/stepper/Stepper.js +11 -8
- package/lib/submit-bar/SubmitBar.d.ts +4 -3
- package/lib/submit-bar/index.d.ts +3 -2
- package/lib/swipe/Swipe.js +9 -4
- package/lib/swipe/types.d.ts +1 -3
- package/lib/switch/Switch.js +1 -0
- package/lib/switch/index.css +1 -1
- package/lib/switch/index.less +2 -0
- package/lib/tab/Tab.js +20 -5
- package/lib/tab/index.css +1 -1
- package/lib/tab/index.less +1 -1
- package/lib/tabbar/Tabbar.d.ts +1 -1
- package/lib/tabbar/Tabbar.js +10 -10
- package/lib/tabbar-item/TabbarItem.js +16 -7
- package/lib/tabs/Tabs.js +16 -9
- package/lib/tabs/TabsTitle.d.ts +6 -0
- package/lib/tabs/TabsTitle.js +7 -1
- package/lib/tabs/types.d.ts +1 -0
- package/lib/uploader/UploaderPreviewItem.js +3 -0
- package/lib/uploader/utils.d.ts +2 -2
- package/lib/uploader/utils.js +3 -2
- package/lib/utils/dom.d.ts +1 -0
- package/lib/utils/dom.js +9 -2
- package/lib/utils/format.js +7 -5
- package/lib/vant.cjs.js +14407 -0
- package/lib/vant.cjs.min.js +1 -0
- package/lib/vant.es.js +1217 -2203
- package/lib/vant.es.min.js +1217 -2203
- package/lib/vant.js +1349 -1254
- package/lib/vant.min.js +1 -1
- package/lib/vue-tsx-shim.d.ts +1 -0
- package/package.json +27 -13
- package/vetur/attributes.json +115 -115
- package/vetur/tags.json +35 -35
- package/vetur/web-types.json +370 -366
- package/es/composables/use-link-field.d.ts +0 -0
- package/es/composables/use-link-field.js +0 -0
- package/lib/composables/use-link-field.d.ts +0 -0
- package/lib/composables/use-link-field.js +0 -1
package/es/cascader/Cascader.js
CHANGED
@@ -164,20 +164,27 @@ export default defineComponent({
|
|
164
164
|
}, null) : null]);
|
165
165
|
|
166
166
|
var renderOption = (option, selectedOption, tabIndex) => {
|
167
|
-
var
|
167
|
+
var {
|
168
|
+
disabled
|
169
|
+
} = option;
|
170
|
+
var selected = !!(selectedOption && option[valueKey] === selectedOption[valueKey]);
|
168
171
|
var color = option.color || (selected ? props.activeColor : undefined);
|
169
172
|
var Text = slots.option ? slots.option({
|
170
173
|
option,
|
171
174
|
selected
|
172
175
|
}) : _createVNode("span", null, [option[textKey]]);
|
173
176
|
return _createVNode("li", {
|
177
|
+
"role": "menuitemradio",
|
174
178
|
"class": [bem('option', {
|
175
179
|
selected,
|
176
|
-
disabled
|
180
|
+
disabled
|
177
181
|
}), option.className],
|
178
182
|
"style": {
|
179
183
|
color
|
180
184
|
},
|
185
|
+
"tabindex": disabled ? undefined : selected ? 0 : -1,
|
186
|
+
"aria-checked": selected,
|
187
|
+
"aria-disabled": disabled || undefined,
|
181
188
|
"onClick": () => onSelect(option, tabIndex)
|
182
189
|
}, [Text, selected ? _createVNode(Icon, {
|
183
190
|
"name": "success",
|
@@ -186,10 +193,13 @@ export default defineComponent({
|
|
186
193
|
};
|
187
194
|
|
188
195
|
var renderOptions = (options, selectedOption, tabIndex) => _createVNode("ul", {
|
196
|
+
"role": "menu",
|
189
197
|
"class": bem('options')
|
190
198
|
}, [options.map(option => renderOption(option, selectedOption, tabIndex))]);
|
191
199
|
|
192
200
|
var renderTab = (tab, tabIndex) => {
|
201
|
+
var _slots$optionsTop, _slots$optionsBottom;
|
202
|
+
|
193
203
|
var {
|
194
204
|
options,
|
195
205
|
selected
|
@@ -202,9 +212,11 @@ export default defineComponent({
|
|
202
212
|
unselected: !selected
|
203
213
|
})
|
204
214
|
}, {
|
205
|
-
default: () => [slots['options-top'] ? slots
|
206
|
-
tabIndex
|
207
|
-
})
|
215
|
+
default: () => [(_slots$optionsTop = slots['options-top']) == null ? void 0 : _slots$optionsTop.call(slots, {
|
216
|
+
tabIndex
|
217
|
+
}), renderOptions(options, selected, tabIndex), (_slots$optionsBottom = slots['options-bottom']) == null ? void 0 : _slots$optionsBottom.call(slots, {
|
218
|
+
tabIndex
|
219
|
+
})]
|
208
220
|
});
|
209
221
|
};
|
210
222
|
|
package/es/checkbox/Checker.js
CHANGED
@@ -105,7 +105,7 @@ export default defineComponent({
|
|
105
105
|
disabled: disabled.value,
|
106
106
|
'label-disabled': props.labelDisabled
|
107
107
|
}, direction.value]),
|
108
|
-
"tabindex": disabled.value ?
|
108
|
+
"tabindex": disabled.value ? undefined : 0,
|
109
109
|
"aria-checked": props.checked,
|
110
110
|
"onClick": onClick
|
111
111
|
}, [nodes]);
|
package/es/checkbox/types.d.ts
CHANGED
@@ -5,13 +5,9 @@ export declare type CheckboxShape = CheckerShape;
|
|
5
5
|
export declare type CheckboxLabelPosition = CheckerLabelPosition;
|
6
6
|
export declare type CheckboxExpose = {
|
7
7
|
toggle: (newValue?: boolean) => void;
|
8
|
-
/**
|
9
|
-
* @private
|
10
|
-
*/
|
8
|
+
/** @private */
|
11
9
|
props: CheckboxProps;
|
12
|
-
/**
|
13
|
-
* @private
|
14
|
-
*/
|
10
|
+
/** @private */
|
15
11
|
checked: ComputedRef<boolean>;
|
16
12
|
};
|
17
13
|
export declare type CheckboxInstance = ComponentPublicInstance<CheckboxProps, CheckboxExpose>;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function useId(): string;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { getCurrentInstance } from 'vue';
|
2
|
+
var current = 0;
|
3
|
+
export function useId() {
|
4
|
+
var vm = getCurrentInstance();
|
5
|
+
var {
|
6
|
+
name = 'unknown'
|
7
|
+
} = (vm == null ? void 0 : vm.type) || {}; // keep jest snapshot stable
|
8
|
+
|
9
|
+
if (process.env.NODE_ENV === 'test') {
|
10
|
+
return name;
|
11
|
+
}
|
12
|
+
|
13
|
+
return name + "-" + ++current;
|
14
|
+
}
|
@@ -9,5 +9,5 @@ export declare const routeProps: {
|
|
9
9
|
replace: BooleanConstructor;
|
10
10
|
};
|
11
11
|
export declare type RouteProps = ExtractPropTypes<typeof routeProps>;
|
12
|
-
export declare function route(
|
12
|
+
export declare function route({ to, url, replace, $router: router, }: ComponentPublicInstance<RouteProps>): void;
|
13
13
|
export declare function useRoute(): () => void;
|
@@ -7,13 +7,13 @@ export var routeProps = {
|
|
7
7
|
url: String,
|
8
8
|
replace: Boolean
|
9
9
|
};
|
10
|
-
export function route(
|
11
|
-
var router = vm.$router;
|
10
|
+
export function route(_ref) {
|
12
11
|
var {
|
13
12
|
to,
|
14
13
|
url,
|
15
|
-
replace
|
16
|
-
|
14
|
+
replace,
|
15
|
+
$router: router
|
16
|
+
} = _ref;
|
17
17
|
|
18
18
|
if (to && router) {
|
19
19
|
router[replace ? 'replace' : 'push'](to);
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
|
2
|
-
import { watch, computed, nextTick,
|
2
|
+
import { ref, watch, computed, nextTick, onMounted, defineComponent } from 'vue'; // Utils
|
3
3
|
|
4
|
-
import { truthProp, makeArrayProp, makeStringProp, makeNumberProp, createNamespace } from '../utils'; // Composables
|
4
|
+
import { truthProp, windowHeight, makeArrayProp, makeStringProp, makeNumberProp, createNamespace } from '../utils'; // Composables
|
5
5
|
|
6
6
|
import { useRefs } from '../composables/use-refs'; // Components
|
7
7
|
|
@@ -10,6 +10,7 @@ import { Tabs } from '../tabs';
|
|
10
10
|
import { Field } from '../field';
|
11
11
|
import { Button } from '../button';
|
12
12
|
import { Coupon } from '../coupon';
|
13
|
+
import { useRect } from '@vant/use';
|
13
14
|
var [name, bem, t] = createNamespace('coupon-list');
|
14
15
|
var EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';
|
15
16
|
var couponListProps = {
|
@@ -43,25 +44,33 @@ export default defineComponent({
|
|
43
44
|
slots
|
44
45
|
} = _ref;
|
45
46
|
var [couponRefs, setCouponRefs] = useRefs();
|
46
|
-
var
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
var
|
47
|
+
var root = ref();
|
48
|
+
var barRef = ref();
|
49
|
+
var activeTab = ref(0);
|
50
|
+
var listHeight = ref(0);
|
51
|
+
var currentCode = ref(props.code);
|
52
|
+
var buttonDisabled = computed(() => !props.exchangeButtonLoading && (props.exchangeButtonDisabled || !currentCode.value || currentCode.value.length < props.exchangeMinLength));
|
53
|
+
|
54
|
+
var updateListHeight = () => {
|
55
|
+
var TABS_HEIGHT = 44;
|
56
|
+
var rootHeight = useRect(root).height;
|
57
|
+
var headerHeight = useRect(barRef).height + TABS_HEIGHT;
|
58
|
+
listHeight.value = (rootHeight > headerHeight ? rootHeight : windowHeight.value) - headerHeight;
|
59
|
+
};
|
51
60
|
|
52
61
|
var onExchange = () => {
|
53
|
-
emit('exchange',
|
62
|
+
emit('exchange', currentCode.value); // auto clear currentCode when not use v-model
|
54
63
|
|
55
64
|
if (!props.code) {
|
56
|
-
|
65
|
+
currentCode.value = '';
|
57
66
|
}
|
58
67
|
};
|
59
68
|
|
60
69
|
var scrollToCoupon = index => {
|
61
70
|
nextTick(() => {
|
62
|
-
|
63
|
-
|
64
|
-
|
71
|
+
var _couponRefs$value$ind;
|
72
|
+
|
73
|
+
return (_couponRefs$value$ind = couponRefs.value[index]) == null ? void 0 : _couponRefs$value$ind.scrollIntoView();
|
65
74
|
});
|
66
75
|
};
|
67
76
|
|
@@ -74,10 +83,11 @@ export default defineComponent({
|
|
74
83
|
var renderExchangeBar = () => {
|
75
84
|
if (props.showExchangeBar) {
|
76
85
|
return _createVNode("div", {
|
86
|
+
"ref": barRef,
|
77
87
|
"class": bem('exchange-bar')
|
78
88
|
}, [_createVNode(Field, {
|
79
|
-
"modelValue":
|
80
|
-
"onUpdate:modelValue": $event =>
|
89
|
+
"modelValue": currentCode.value,
|
90
|
+
"onUpdate:modelValue": $event => currentCode.value = $event,
|
81
91
|
"clearable": true,
|
82
92
|
"border": false,
|
83
93
|
"class": bem('field'),
|
@@ -108,9 +118,11 @@ export default defineComponent({
|
|
108
118
|
}, {
|
109
119
|
default: () => [_createVNode("div", {
|
110
120
|
"class": bem('list', {
|
111
|
-
'with-bar': props.showExchangeBar,
|
112
121
|
'with-bottom': props.showCloseButton
|
113
|
-
})
|
122
|
+
}),
|
123
|
+
"style": {
|
124
|
+
height: listHeight.value + "px"
|
125
|
+
}
|
114
126
|
}, [coupons.map((coupon, index) => _createVNode(Coupon, {
|
115
127
|
"key": coupon.id,
|
116
128
|
"ref": setCouponRefs(index),
|
@@ -135,9 +147,11 @@ export default defineComponent({
|
|
135
147
|
}, {
|
136
148
|
default: () => [_createVNode("div", {
|
137
149
|
"class": bem('list', {
|
138
|
-
'with-bar': props.showExchangeBar,
|
139
150
|
'with-bottom': props.showCloseButton
|
140
|
-
})
|
151
|
+
}),
|
152
|
+
"style": {
|
153
|
+
height: listHeight.value + "px"
|
154
|
+
}
|
141
155
|
}, [disabledCoupons.map(coupon => _createVNode(Coupon, {
|
142
156
|
"disabled": true,
|
143
157
|
"key": coupon.id,
|
@@ -148,20 +162,22 @@ export default defineComponent({
|
|
148
162
|
};
|
149
163
|
|
150
164
|
watch(() => props.code, value => {
|
151
|
-
|
165
|
+
currentCode.value = value;
|
152
166
|
});
|
153
|
-
watch(
|
167
|
+
watch(windowHeight, updateListHeight);
|
168
|
+
watch(currentCode, value => emit('update:code', value));
|
154
169
|
watch(() => props.displayedCouponIndex, scrollToCoupon);
|
155
170
|
onMounted(() => {
|
171
|
+
updateListHeight();
|
156
172
|
scrollToCoupon(props.displayedCouponIndex);
|
157
173
|
});
|
158
174
|
return () => _createVNode("div", {
|
175
|
+
"ref": root,
|
159
176
|
"class": bem()
|
160
177
|
}, [renderExchangeBar(), _createVNode(Tabs, {
|
161
|
-
"active":
|
162
|
-
"onUpdate:active": $event =>
|
163
|
-
"class": bem('tab')
|
164
|
-
"border": false
|
178
|
+
"active": activeTab.value,
|
179
|
+
"onUpdate:active": $event => activeTab.value = $event,
|
180
|
+
"class": bem('tab')
|
165
181
|
}, {
|
166
182
|
default: () => [renderCouponTab(), renderDisabledTab()]
|
167
183
|
}), _createVNode("div", {
|
package/es/coupon-list/index.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
:root{--van-coupon-list-background-color:var(--van-background-color);--van-coupon-list-field-padding:5px 0 5px var(--van-padding-md);--van-coupon-list-exchange-button-height:32px;--van-coupon-list-close-button-height:40px;--van-coupon-list-empty-image-size:200px;--van-coupon-list-empty-tip-color:var(--van-text-color-2);--van-coupon-list-empty-tip-font-size:var(--van-font-size-md);--van-coupon-list-empty-tip-line-height:var(--van-line-height-md)}.van-coupon-list{position:relative;height:100%;background:var(--van-coupon-list-background-color)}.van-coupon-list__field{padding:var(--van-coupon-list-field-padding)}.van-coupon-list__field .van-field__body{height:34px;padding-left:var(--van-padding-sm);line-height:34px;background:var(--van-gray-1);border-radius:17px}.van-coupon-list__field .van-field__body::-webkit-input-placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__body::placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__clear{margin-right:0}.van-coupon-list__exchange-bar{display:flex;align-items:center;background-color:var(--van-background-color-light)}.van-coupon-list__exchange{flex:none;height:var(--van-coupon-list-exchange-button-height);font-size:var(--van-font-size-lg);line-height:calc(var(--van-coupon-list-exchange-button-height) - 2px);border:0}.van-coupon-list .van-tabs__wrap{box-shadow:0 6px 12px -12px var(--van-gray-6)}.van-coupon-list__list{box-sizing:border-box;
|
1
|
+
:root{--van-coupon-list-background-color:var(--van-background-color);--van-coupon-list-field-padding:5px 0 5px var(--van-padding-md);--van-coupon-list-exchange-button-height:32px;--van-coupon-list-close-button-height:40px;--van-coupon-list-empty-image-size:200px;--van-coupon-list-empty-tip-color:var(--van-text-color-2);--van-coupon-list-empty-tip-font-size:var(--van-font-size-md);--van-coupon-list-empty-tip-line-height:var(--van-line-height-md)}.van-coupon-list{position:relative;height:100%;background:var(--van-coupon-list-background-color)}.van-coupon-list__field{padding:var(--van-coupon-list-field-padding)}.van-coupon-list__field .van-field__body{height:34px;padding-left:var(--van-padding-sm);line-height:34px;background:var(--van-gray-1);border-radius:17px}.van-coupon-list__field .van-field__body::-webkit-input-placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__body::placeholder{color:var(--van-text-color-3)}.van-coupon-list__field .van-field__clear{margin-right:0}.van-coupon-list__exchange-bar{display:flex;align-items:center;background-color:var(--van-background-color-light)}.van-coupon-list__exchange{flex:none;height:var(--van-coupon-list-exchange-button-height);font-size:var(--van-font-size-lg);line-height:calc(var(--van-coupon-list-exchange-button-height) - 2px);border:0}.van-coupon-list .van-tabs__wrap{box-shadow:0 6px 12px -12px var(--van-gray-6)}.van-coupon-list__list{box-sizing:border-box;padding:var(--van-padding-md) 0 var(--van-padding-lg);overflow-y:auto;-webkit-overflow-scrolling:touch}.van-coupon-list__list--with-bottom{padding-bottom:50px}.van-coupon-list__bottom{position:absolute;bottom:0;left:0;z-index:999;box-sizing:border-box;width:100%;padding:5px var(--van-padding-md);font-weight:var(--van-font-weight-bold);background-color:var(--van-background-color-light)}.van-coupon-list__close{height:var(--van-coupon-list-close-button-height)}.van-coupon-list__empty{padding-top:60px;text-align:center}.van-coupon-list__empty p{margin:var(--van-padding-md) 0;color:var(--van-coupon-list-empty-tip-color);font-size:var(--van-coupon-list-empty-tip-font-size);line-height:var(--van-coupon-list-empty-tip-line-height)}.van-coupon-list__empty img{width:var(--van-coupon-list-empty-image-size);height:var(--van-coupon-list-empty-image-size)}
|
@@ -56,15 +56,10 @@
|
|
56
56
|
|
57
57
|
&__list {
|
58
58
|
box-sizing: border-box;
|
59
|
-
height: calc(100vh - 108px);
|
60
59
|
padding: var(--van-padding-md) 0 var(--van-padding-lg);
|
61
60
|
overflow-y: auto;
|
62
61
|
-webkit-overflow-scrolling: touch;
|
63
62
|
|
64
|
-
&--with-bar {
|
65
|
-
height: calc(100vh - 152px);
|
66
|
-
}
|
67
|
-
|
68
63
|
&--with-bottom {
|
69
64
|
padding-bottom: 50px;
|
70
65
|
}
|
@@ -37,7 +37,8 @@ export default defineComponent({
|
|
37
37
|
showWrapper: false
|
38
38
|
});
|
39
39
|
var {
|
40
|
-
parent
|
40
|
+
parent,
|
41
|
+
index
|
41
42
|
} = useParent(DROPDOWN_KEY);
|
42
43
|
|
43
44
|
if (!parent) {
|
@@ -126,7 +127,7 @@ export default defineComponent({
|
|
126
127
|
};
|
127
128
|
|
128
129
|
return _createVNode(Cell, {
|
129
|
-
"
|
130
|
+
"role": "menuitem",
|
130
131
|
"key": option.value,
|
131
132
|
"icon": option.icon,
|
132
133
|
"title": option.text,
|
@@ -136,6 +137,8 @@ export default defineComponent({
|
|
136
137
|
"style": {
|
137
138
|
color: active ? activeColor : ''
|
138
139
|
},
|
140
|
+
"tabindex": active ? 0 : -1,
|
141
|
+
"clickable": true,
|
139
142
|
"onClick": onClick
|
140
143
|
}, {
|
141
144
|
value: renderIcon
|
@@ -168,6 +171,7 @@ export default defineComponent({
|
|
168
171
|
}, [_createVNode(Popup, {
|
169
172
|
"show": state.showPopup,
|
170
173
|
"onUpdate:show": $event => state.showPopup = $event,
|
174
|
+
"role": "menu",
|
171
175
|
"class": bem('content'),
|
172
176
|
"overlay": overlay,
|
173
177
|
"position": direction === 'down' ? 'top' : 'bottom',
|
@@ -176,6 +180,7 @@ export default defineComponent({
|
|
176
180
|
"overlayStyle": {
|
177
181
|
position: 'absolute'
|
178
182
|
},
|
183
|
+
"aria-labelledby": parent.id + "-" + index.value,
|
179
184
|
"closeOnClickOverlay": closeOnClickOverlay,
|
180
185
|
"onOpen": onOpen,
|
181
186
|
"onClose": onClose,
|
@@ -9,17 +9,13 @@ export declare type DropdownItemExpose = {
|
|
9
9
|
toggle: (show?: boolean, options?: {
|
10
10
|
immediate?: boolean;
|
11
11
|
}) => void;
|
12
|
-
/**
|
13
|
-
* @private
|
14
|
-
*/
|
12
|
+
/** @private */
|
15
13
|
state: {
|
16
14
|
showPopup: boolean;
|
17
15
|
transition: boolean;
|
18
16
|
showWrapper: boolean;
|
19
17
|
};
|
20
|
-
/**
|
21
|
-
* @private
|
22
|
-
*/
|
18
|
+
/** @private */
|
23
19
|
renderTitle: () => string | VNode[];
|
24
20
|
};
|
25
21
|
export declare type DropdownItemInstance = ComponentPublicInstance<DropdownItemProps, DropdownItemExpose>;
|
@@ -1,8 +1,9 @@
|
|
1
1
|
import { createVNode as _createVNode } from "vue";
|
2
2
|
import { ref, computed, defineComponent } from 'vue'; // Utils
|
3
3
|
|
4
|
-
import { isDef, truthProp, numericProp, makeStringProp, makeNumericProp, createNamespace, HAPTICS_FEEDBACK } from '../utils'; // Composables
|
4
|
+
import { isDef, truthProp, numericProp, windowHeight, makeStringProp, makeNumericProp, createNamespace, HAPTICS_FEEDBACK } from '../utils'; // Composables
|
5
5
|
|
6
|
+
import { useId } from '../composables/use-id';
|
6
7
|
import { useRect, useChildren, useClickAway, useScrollParent, useEventListener } from '@vant/use'; // Types
|
7
8
|
|
8
9
|
var [name, bem] = createNamespace('dropdown-menu');
|
@@ -24,6 +25,7 @@ export default defineComponent({
|
|
24
25
|
var {
|
25
26
|
slots
|
26
27
|
} = _ref;
|
28
|
+
var id = useId();
|
27
29
|
var root = ref();
|
28
30
|
var barRef = ref();
|
29
31
|
var offset = ref(0);
|
@@ -56,7 +58,7 @@ export default defineComponent({
|
|
56
58
|
if (props.direction === 'down') {
|
57
59
|
offset.value = rect.bottom;
|
58
60
|
} else {
|
59
|
-
offset.value =
|
61
|
+
offset.value = windowHeight.value - rect.top;
|
60
62
|
}
|
61
63
|
}
|
62
64
|
};
|
@@ -89,8 +91,9 @@ export default defineComponent({
|
|
89
91
|
titleClass
|
90
92
|
} = item;
|
91
93
|
return _createVNode("div", {
|
94
|
+
"id": id + "-" + index,
|
92
95
|
"role": "button",
|
93
|
-
"tabindex": disabled ?
|
96
|
+
"tabindex": disabled ? undefined : 0,
|
94
97
|
"class": [bem('item', {
|
95
98
|
disabled
|
96
99
|
}), {
|
@@ -115,6 +118,7 @@ export default defineComponent({
|
|
115
118
|
};
|
116
119
|
|
117
120
|
linkChildren({
|
121
|
+
id,
|
118
122
|
props,
|
119
123
|
offset
|
120
124
|
});
|
package/es/empty/Network.js
CHANGED
@@ -11,71 +11,59 @@ export var Network = _createVNode("svg", {
|
|
11
11
|
"viewBox": "0 0 160 160"
|
12
12
|
}, [_createVNode("defs", null, [_createVNode("linearGradient", {
|
13
13
|
"id": prefix + "1",
|
14
|
-
"x1": "64
|
14
|
+
"x1": "64%",
|
15
15
|
"y1": "100%",
|
16
|
-
"x2": "64
|
16
|
+
"x2": "64%"
|
17
17
|
}, [renderStop('#FFF', 0, 0.5), renderStop('#F2F3F5', 100)]), _createVNode("linearGradient", {
|
18
18
|
"id": prefix + "2",
|
19
19
|
"x1": "50%",
|
20
20
|
"x2": "50%",
|
21
|
-
"y2": "84
|
21
|
+
"y2": "84%"
|
22
22
|
}, [renderStop('#EBEDF0', 0), renderStop('#DCDEE0', 100, 0)]), _createVNode("linearGradient", {
|
23
23
|
"id": prefix + "3",
|
24
24
|
"x1": "100%",
|
25
25
|
"x2": "100%",
|
26
26
|
"y2": "100%"
|
27
|
-
}, [renderStop('#EAEDF0', 0), renderStop('#DCDEE0', 100)]), _createVNode("linearGradient", {
|
28
|
-
"id": prefix + "4",
|
29
|
-
"x1": "100%",
|
30
|
-
"y1": "100%",
|
31
|
-
"x2": "100%"
|
32
27
|
}, [renderStop('#EAEDF0', 0), renderStop('#DCDEE0', 100)]), _createVNode("radialGradient", {
|
33
|
-
"id": prefix + "
|
28
|
+
"id": prefix + "4",
|
34
29
|
"cx": "50%",
|
35
30
|
"cy": "0%",
|
36
31
|
"fx": "50%",
|
37
32
|
"fy": "0%",
|
38
33
|
"r": "100%",
|
39
|
-
"gradientTransform": "matrix(0 1 -.
|
34
|
+
"gradientTransform": "matrix(0 1 -.54 0 .5 -.5)"
|
40
35
|
}, [renderStop('#EBEDF0', 0), renderStop('#FFF', 100, 0)])]), _createVNode("g", {
|
41
36
|
"fill": "none"
|
42
37
|
}, [_createVNode("g", {
|
43
38
|
"opacity": ".8"
|
44
39
|
}, [_createVNode("path", {
|
45
|
-
"d": "
|
46
|
-
"fill": "url(#" + prefix + "1)"
|
47
|
-
"transform": "matrix(-1 0 0 1 36 7)"
|
40
|
+
"d": "M36 131V53H16v20H2v58h34z",
|
41
|
+
"fill": "url(#" + prefix + "1)"
|
48
42
|
}, null), _createVNode("path", {
|
49
|
-
"d": "
|
50
|
-
"fill": "url(#" + prefix + "1)"
|
51
|
-
"transform": "translate(2 7)"
|
43
|
+
"d": "M123 15h22v14h9v77h-31V15z",
|
44
|
+
"fill": "url(#" + prefix + "1)"
|
52
45
|
}, null)]), _createVNode("path", {
|
53
|
-
"fill": "url(#" + prefix + "
|
46
|
+
"fill": "url(#" + prefix + "4)",
|
54
47
|
"d": "M0 139h160v21H0z"
|
55
48
|
}, null), _createVNode("path", {
|
56
|
-
"d": "
|
57
|
-
"fill": "url(#" + prefix + "2)"
|
58
|
-
"transform": "translate(43 36)"
|
49
|
+
"d": "M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z",
|
50
|
+
"fill": "url(#" + prefix + "2)"
|
59
51
|
}, null), _createVNode("g", {
|
60
52
|
"opacity": ".6",
|
61
53
|
"stroke-linecap": "round",
|
62
54
|
"stroke-width": "7"
|
63
55
|
}, [_createVNode("path", {
|
64
|
-
"d": "
|
65
|
-
"stroke": "url(#" + prefix + "3)"
|
66
|
-
"transform": "translate(43 36)"
|
56
|
+
"d": "M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13",
|
57
|
+
"stroke": "url(#" + prefix + "3)"
|
67
58
|
}, null), _createVNode("path", {
|
68
|
-
"d": "
|
69
|
-
"stroke": "url(#" + prefix + "3)"
|
70
|
-
"transform": "translate(43 36)"
|
59
|
+
"d": "M53 36a34 34 0 0 0 0 48",
|
60
|
+
"stroke": "url(#" + prefix + "3)"
|
71
61
|
}, null), _createVNode("path", {
|
72
|
-
"d": "
|
73
|
-
"stroke": "url(#" + prefix + "
|
74
|
-
"transform": "rotate(-180 76.483 42.257)"
|
62
|
+
"d": "M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13",
|
63
|
+
"stroke": "url(#" + prefix + "3)"
|
75
64
|
}, null), _createVNode("path", {
|
76
|
-
"d": "
|
77
|
-
"stroke": "url(#" + prefix + "
|
78
|
-
"transform": "rotate(-180 89.791 42.146)"
|
65
|
+
"d": "M106 84a34 34 0 0 0 0-48",
|
66
|
+
"stroke": "url(#" + prefix + "3)"
|
79
67
|
}, null)]), _createVNode("g", {
|
80
68
|
"transform": "translate(31 105)"
|
81
69
|
}, [_createVNode("rect", {
|
@@ -89,12 +77,12 @@ export var Network = _createVNode("svg", {
|
|
89
77
|
"y": "8",
|
90
78
|
"width": "80",
|
91
79
|
"height": "18",
|
92
|
-
"rx": "1.
|
80
|
+
"rx": "1.1"
|
93
81
|
}, null), _createVNode("rect", {
|
94
82
|
"fill": "#EBEDF0",
|
95
83
|
"x": "15",
|
96
84
|
"y": "12",
|
97
85
|
"width": "18",
|
98
86
|
"height": "6",
|
99
|
-
"rx": "1.
|
87
|
+
"rx": "1.1"
|
100
88
|
}, null)])])]);
|
package/es/field/Field.d.ts
CHANGED
@@ -278,12 +278,12 @@ declare const _default: import("vue").DefineComponent<{
|
|
278
278
|
value?: string | number | undefined;
|
279
279
|
icon?: string | undefined;
|
280
280
|
size?: import("../cell").CellSize | undefined;
|
281
|
+
id?: string | undefined;
|
281
282
|
valueClass?: unknown;
|
282
283
|
labelClass?: unknown;
|
283
284
|
titleClass?: unknown;
|
284
285
|
titleStyle?: string | import("vue").CSSProperties | undefined;
|
285
286
|
arrowDirection?: import("../cell").CellArrowDirection | undefined;
|
286
|
-
id?: string | undefined;
|
287
287
|
leftIcon?: string | undefined;
|
288
288
|
rightIcon?: string | undefined;
|
289
289
|
maxlength?: string | number | undefined;
|
package/es/field/Field.js
CHANGED
@@ -6,6 +6,7 @@ import { runSyncRule, endComposing, mapInputType, startComposing, getRuleMessage
|
|
6
6
|
import { cellSharedProps } from '../cell/Cell'; // Composables
|
7
7
|
|
8
8
|
import { CUSTOM_FIELD_INJECTION_KEY, useParent } from '@vant/use';
|
9
|
+
import { useId } from '../composables/use-id';
|
9
10
|
import { useExpose } from '../composables/use-expose'; // Components
|
10
11
|
|
11
12
|
import { Icon } from '../icon';
|
@@ -68,6 +69,7 @@ export default defineComponent({
|
|
68
69
|
emit,
|
69
70
|
slots
|
70
71
|
} = _ref;
|
72
|
+
var id = useId();
|
71
73
|
var state = reactive({
|
72
74
|
focused: false,
|
73
75
|
validateFailed: false,
|
@@ -272,14 +274,16 @@ export default defineComponent({
|
|
272
274
|
emit('focus', event);
|
273
275
|
nextTick(adjustTextareaSize); // readonly not work in legacy mobile safari
|
274
276
|
|
275
|
-
|
276
|
-
|
277
|
-
if (readonly) {
|
277
|
+
if (getProp('readonly')) {
|
278
278
|
blur();
|
279
279
|
}
|
280
280
|
};
|
281
281
|
|
282
282
|
var onBlur = event => {
|
283
|
+
if (getProp('readonly')) {
|
284
|
+
return;
|
285
|
+
}
|
286
|
+
|
283
287
|
state.focused = false;
|
284
288
|
updateValue(getModelValue(), 'onBlur');
|
285
289
|
emit('blur', event);
|
@@ -338,6 +342,8 @@ export default defineComponent({
|
|
338
342
|
emit('keypress', event);
|
339
343
|
};
|
340
344
|
|
345
|
+
var getInputId = () => props.id || id + "-input";
|
346
|
+
|
341
347
|
var renderInput = () => {
|
342
348
|
var controlClass = bem('control', [getProp('inputAlign'), {
|
343
349
|
error: showError.value,
|
@@ -353,7 +359,7 @@ export default defineComponent({
|
|
353
359
|
}
|
354
360
|
|
355
361
|
var inputAttrs = {
|
356
|
-
id:
|
362
|
+
id: getInputId(),
|
357
363
|
ref: inputRef,
|
358
364
|
name: props.name,
|
359
365
|
rows: props.rows !== undefined ? +props.rows : undefined,
|
@@ -364,6 +370,7 @@ export default defineComponent({
|
|
364
370
|
autofocus: props.autofocus,
|
365
371
|
placeholder: props.placeholder,
|
366
372
|
autocomplete: props.autocomplete,
|
373
|
+
'aria-labelledby': props.label ? id + "-label" : undefined,
|
367
374
|
onBlur,
|
368
375
|
onFocus,
|
369
376
|
onInput,
|
@@ -447,7 +454,8 @@ export default defineComponent({
|
|
447
454
|
|
448
455
|
if (props.label) {
|
449
456
|
return _createVNode("label", {
|
450
|
-
"
|
457
|
+
"id": id + "-label",
|
458
|
+
"for": getInputId()
|
451
459
|
}, [props.label + colon]);
|
452
460
|
}
|
453
461
|
};
|
package/es/field/index.d.ts
CHANGED
@@ -152,12 +152,12 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
|
|
152
152
|
value?: string | number | undefined;
|
153
153
|
icon?: string | undefined;
|
154
154
|
size?: import("..").CellSize | undefined;
|
155
|
+
id?: string | undefined;
|
155
156
|
valueClass?: unknown;
|
156
157
|
labelClass?: unknown;
|
157
158
|
titleClass?: unknown;
|
158
159
|
titleStyle?: string | import("vue").CSSProperties | undefined;
|
159
160
|
arrowDirection?: import("..").CellArrowDirection | undefined;
|
160
|
-
id?: string | undefined;
|
161
161
|
leftIcon?: string | undefined;
|
162
162
|
rightIcon?: string | undefined;
|
163
163
|
maxlength?: string | number | undefined;
|
@@ -201,4 +201,4 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
|
|
201
201
|
}>>;
|
202
202
|
export default Field;
|
203
203
|
export type { FieldProps };
|
204
|
-
export type { FieldType, FieldRule, FieldInstance, FieldTextAlign, FieldClearTrigger, FieldFormatTrigger, FieldValidateError, FieldAutosizeConfig, FieldValidateTrigger, } from './types';
|
204
|
+
export type { FieldType, FieldRule, FieldInstance, FieldTextAlign, FieldRuleMessage, FieldClearTrigger, FieldFormatTrigger, FieldRuleValidator, FiledRuleFormatter, FieldValidateError, FieldAutosizeConfig, FieldValidateTrigger, } from './types';
|