vant 4.6.4 → 4.6.6
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/README.md +4 -1
- package/es/dropdown-item/DropdownItem.mjs +1 -1
- package/es/dropdown-item/types.d.ts +2 -1
- package/es/dropdown-menu/DropdownMenu.d.ts +3 -0
- package/es/dropdown-menu/DropdownMenu.mjs +7 -3
- package/es/dropdown-menu/index.css +1 -1
- package/es/dropdown-menu/index.d.ts +2 -0
- package/es/floating-bubble/FloatingBubble.mjs +11 -5
- package/es/floating-panel/FloatingPanel.d.ts +3 -12
- package/es/floating-panel/FloatingPanel.mjs +13 -8
- package/es/floating-panel/index.d.ts +2 -8
- package/es/index.d.ts +1 -1
- package/es/index.mjs +1 -1
- package/es/toast/index.d.ts +1 -1
- package/es/vue-tsx-shim.d.ts +1 -0
- package/lib/dropdown-item/DropdownItem.js +1 -1
- package/lib/dropdown-item/types.d.ts +2 -1
- package/lib/dropdown-menu/DropdownMenu.d.ts +3 -0
- package/lib/dropdown-menu/DropdownMenu.js +7 -3
- package/lib/dropdown-menu/index.css +1 -1
- package/lib/dropdown-menu/index.d.ts +2 -0
- package/lib/floating-bubble/FloatingBubble.js +10 -4
- package/lib/floating-panel/FloatingPanel.d.ts +3 -12
- package/lib/floating-panel/FloatingPanel.js +11 -6
- package/lib/floating-panel/index.d.ts +2 -8
- package/lib/index.css +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib/toast/index.d.ts +1 -1
- package/lib/vant.cjs.js +30 -15
- package/lib/vant.es.js +30 -15
- package/lib/vant.js +30 -15
- package/lib/vant.min.js +1 -1
- package/lib/vue-tsx-shim.d.ts +1 -0
- package/lib/web-types.json +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
@@ -53,7 +53,7 @@ npm i vant
|
|
53
53
|
npm i vant@latest-v2
|
54
54
|
```
|
55
55
|
|
56
|
-
Using `yarn` or `
|
56
|
+
Using `yarn`, `pnpm`, or `bun`:
|
57
57
|
|
58
58
|
```bash
|
59
59
|
# with yarn
|
@@ -61,6 +61,9 @@ yarn add vant
|
|
61
61
|
|
62
62
|
# with pnpm
|
63
63
|
pnpm add vant
|
64
|
+
|
65
|
+
# with Bun
|
66
|
+
bun add vant
|
64
67
|
```
|
65
68
|
|
66
69
|
## Quickstart
|
@@ -1,10 +1,11 @@
|
|
1
1
|
import type { DropdownItemProps } from './DropdownItem';
|
2
2
|
import type { VNode, ComponentPublicInstance } from 'vue';
|
3
3
|
import type { Numeric } from '../utils';
|
4
|
+
export type DropdownItemOptionValue = Numeric | boolean;
|
4
5
|
export type DropdownItemOption = {
|
5
6
|
text: string;
|
6
7
|
icon?: string;
|
7
|
-
value:
|
8
|
+
value: DropdownItemOptionValue;
|
8
9
|
};
|
9
10
|
export type DropdownItemExpose = {
|
10
11
|
toggle: (show?: boolean, options?: {
|
@@ -23,6 +23,7 @@ export declare const dropdownMenuProps: {
|
|
23
23
|
type: BooleanConstructor;
|
24
24
|
default: true;
|
25
25
|
};
|
26
|
+
swipeThreshold: (NumberConstructor | StringConstructor)[];
|
26
27
|
};
|
27
28
|
export type DropdownMenuProps = ExtractPropTypes<typeof dropdownMenuProps>;
|
28
29
|
export declare const DROPDOWN_KEY: InjectionKey<DropdownMenuProvide>;
|
@@ -49,6 +50,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
49
50
|
type: BooleanConstructor;
|
50
51
|
default: true;
|
51
52
|
};
|
53
|
+
swipeThreshold: (NumberConstructor | StringConstructor)[];
|
52
54
|
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
|
53
55
|
overlay: {
|
54
56
|
type: BooleanConstructor;
|
@@ -72,6 +74,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
72
74
|
type: BooleanConstructor;
|
73
75
|
default: true;
|
74
76
|
};
|
77
|
+
swipeThreshold: (NumberConstructor | StringConstructor)[];
|
75
78
|
}>>, {
|
76
79
|
overlay: boolean;
|
77
80
|
duration: string | number;
|
@@ -12,7 +12,8 @@ const dropdownMenuProps = {
|
|
12
12
|
direction: makeStringProp("down"),
|
13
13
|
activeColor: String,
|
14
14
|
closeOnClickOutside: truthProp,
|
15
|
-
closeOnClickOverlay: truthProp
|
15
|
+
closeOnClickOverlay: truthProp,
|
16
|
+
swipeThreshold: numericProp
|
16
17
|
};
|
17
18
|
const DROPDOWN_KEY = Symbol(name);
|
18
19
|
var stdin_default = defineComponent({
|
@@ -31,6 +32,7 @@ var stdin_default = defineComponent({
|
|
31
32
|
} = useChildren(DROPDOWN_KEY);
|
32
33
|
const scrollParent = useScrollParent(root);
|
33
34
|
const opened = computed(() => children.some((item) => item.state.showWrapper));
|
35
|
+
const scrollable = computed(() => props.swipeThreshold && children.length > +props.swipeThreshold);
|
34
36
|
const barStyle = computed(() => {
|
35
37
|
if (opened.value && isDef(props.zIndex)) {
|
36
38
|
return {
|
@@ -87,7 +89,8 @@ var stdin_default = defineComponent({
|
|
87
89
|
"role": "button",
|
88
90
|
"tabindex": disabled ? void 0 : 0,
|
89
91
|
"class": [bem("item", {
|
90
|
-
disabled
|
92
|
+
disabled,
|
93
|
+
grow: scrollable.value
|
91
94
|
}), {
|
92
95
|
[HAPTICS_FEEDBACK]: !disabled
|
93
96
|
}],
|
@@ -131,7 +134,8 @@ var stdin_default = defineComponent({
|
|
131
134
|
"ref": barRef,
|
132
135
|
"style": barStyle.value,
|
133
136
|
"class": bem("bar", {
|
134
|
-
opened: opened.value
|
137
|
+
opened: opened.value,
|
138
|
+
scrollable: scrollable.value
|
135
139
|
})
|
136
140
|
}, [children.map(renderTitle)]), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
|
137
141
|
};
|
@@ -1 +1 @@
|
|
1
|
-
:root{--van-dropdown-menu-height: 48px;--van-dropdown-menu-background: var(--van-background-2);--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, .12);--van-dropdown-menu-title-font-size: 15px;--van-dropdown-menu-title-text-color: var(--van-text-color);--van-dropdown-menu-title-active-text-color: var(--van-primary-color);--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);--van-dropdown-menu-title-line-height: var(--van-line-height-lg);--van-dropdown-menu-option-active-color: var(--van-primary-color);--van-dropdown-menu-content-max-height: 80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background);box-shadow:var(--van-dropdown-menu-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active:after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}
|
1
|
+
:root{--van-dropdown-menu-height: 48px;--van-dropdown-menu-background: var(--van-background-2);--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, .12);--van-dropdown-menu-title-font-size: 15px;--van-dropdown-menu-title-text-color: var(--van-text-color);--van-dropdown-menu-title-active-text-color: var(--van-primary-color);--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);--van-dropdown-menu-title-line-height: var(--van-line-height-lg);--van-dropdown-menu-option-active-color: var(--van-primary-color);--van-dropdown-menu-content-max-height: 80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background);box-shadow:var(--van-dropdown-menu-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__bar--scrollable{padding-left:var(--van-padding-base);padding-right:var(--van-padding-xs);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.van-dropdown-menu__bar--scrollable::-webkit-scrollbar{display:none}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__item--grow{flex:1 0 auto;padding-left:var(--van-padding-base);padding-right:var(--van-padding-sm)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active:after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}
|
@@ -22,6 +22,7 @@ export declare const DropdownMenu: import("../utils").WithInstall<import("vue").
|
|
22
22
|
type: BooleanConstructor;
|
23
23
|
default: true;
|
24
24
|
};
|
25
|
+
swipeThreshold: (NumberConstructor | StringConstructor)[];
|
25
26
|
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
26
27
|
overlay: {
|
27
28
|
type: BooleanConstructor;
|
@@ -45,6 +46,7 @@ export declare const DropdownMenu: import("../utils").WithInstall<import("vue").
|
|
45
46
|
type: BooleanConstructor;
|
46
47
|
default: true;
|
47
48
|
};
|
49
|
+
swipeThreshold: (NumberConstructor | StringConstructor)[];
|
48
50
|
}>>, {
|
49
51
|
overlay: boolean;
|
50
52
|
duration: string | number;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
|
1
|
+
import { withDirectives as _withDirectives, mergeProps as _mergeProps, vShow as _vShow, createVNode as _createVNode } from "vue";
|
2
2
|
import { Teleport, computed, defineComponent, nextTick, onMounted, ref, watch, onActivated, onDeactivated } from "vue";
|
3
3
|
import { pick, addUnit, closest, createNamespace, makeNumberProp, makeStringProp, windowWidth, windowHeight } from "../utils/index.mjs";
|
4
4
|
import { useRect, useEventListener } from "@vant/use";
|
@@ -24,11 +24,13 @@ const floatingBubbleProps = {
|
|
24
24
|
const [name, bem] = createNamespace("floating-bubble");
|
25
25
|
var stdin_default = defineComponent({
|
26
26
|
name,
|
27
|
+
inheritAttrs: false,
|
27
28
|
props: floatingBubbleProps,
|
28
29
|
emits: ["click", "update:offset", "offsetChange"],
|
29
30
|
setup(props, {
|
30
31
|
slots,
|
31
|
-
emit
|
32
|
+
emit,
|
33
|
+
attrs
|
32
34
|
}) {
|
33
35
|
const rootRef = ref();
|
34
36
|
const state = ref({
|
@@ -56,6 +58,8 @@ var stdin_default = defineComponent({
|
|
56
58
|
return style;
|
57
59
|
});
|
58
60
|
const updateState = () => {
|
61
|
+
if (!show.value)
|
62
|
+
return;
|
59
63
|
const {
|
60
64
|
width,
|
61
65
|
height
|
@@ -131,6 +135,8 @@ var stdin_default = defineComponent({
|
|
131
135
|
const onClick = (e) => {
|
132
136
|
if (touch.isTap.value)
|
133
137
|
emit("click", e);
|
138
|
+
else
|
139
|
+
e.stopPropagation();
|
134
140
|
};
|
135
141
|
onMounted(() => {
|
136
142
|
updateState();
|
@@ -149,15 +155,15 @@ var stdin_default = defineComponent({
|
|
149
155
|
}
|
150
156
|
});
|
151
157
|
return () => {
|
152
|
-
const Content = _withDirectives(_createVNode("div", {
|
158
|
+
const Content = _withDirectives(_createVNode("div", _mergeProps({
|
153
159
|
"class": bem(),
|
154
160
|
"ref": rootRef,
|
155
161
|
"onTouchstartPassive": onTouchStart,
|
156
162
|
"onTouchend": onTouchEnd,
|
157
163
|
"onTouchcancel": onTouchEnd,
|
158
|
-
"
|
164
|
+
"onClickCapture": onClick,
|
159
165
|
"style": rootStyle.value
|
160
|
-
}, [slots.default ? slots.default() : _createVNode(Icon, {
|
166
|
+
}, attrs), [slots.default ? slots.default() : _createVNode(Icon, {
|
161
167
|
"name": props.icon,
|
162
168
|
"class": bem("icon")
|
163
169
|
}, null)]), [[_vShow, show.value]]);
|
@@ -16,10 +16,7 @@ export declare const floatingPanelProps: {
|
|
16
16
|
type: BooleanConstructor;
|
17
17
|
default: true;
|
18
18
|
};
|
19
|
-
lockScroll:
|
20
|
-
type: BooleanConstructor;
|
21
|
-
default: true;
|
22
|
-
};
|
19
|
+
lockScroll: BooleanConstructor;
|
23
20
|
safeAreaInsetBottom: {
|
24
21
|
type: BooleanConstructor;
|
25
22
|
default: true;
|
@@ -43,10 +40,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
43
40
|
type: BooleanConstructor;
|
44
41
|
default: true;
|
45
42
|
};
|
46
|
-
lockScroll:
|
47
|
-
type: BooleanConstructor;
|
48
|
-
default: true;
|
49
|
-
};
|
43
|
+
lockScroll: BooleanConstructor;
|
50
44
|
safeAreaInsetBottom: {
|
51
45
|
type: BooleanConstructor;
|
52
46
|
default: true;
|
@@ -68,10 +62,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
68
62
|
type: BooleanConstructor;
|
69
63
|
default: true;
|
70
64
|
};
|
71
|
-
lockScroll:
|
72
|
-
type: BooleanConstructor;
|
73
|
-
default: true;
|
74
|
-
};
|
65
|
+
lockScroll: BooleanConstructor;
|
75
66
|
safeAreaInsetBottom: {
|
76
67
|
type: BooleanConstructor;
|
77
68
|
default: true;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { createVNode as _createVNode } from "vue";
|
2
|
-
import {
|
3
|
-
import { addUnit, closest, createNamespace, makeArrayProp, makeNumericProp, truthProp, windowHeight } from "../utils/index.mjs";
|
2
|
+
import { ref, watch, computed, defineComponent } from "vue";
|
3
|
+
import { addUnit, closest, createNamespace, makeArrayProp, makeNumericProp, preventDefault, truthProp, windowHeight } from "../utils/index.mjs";
|
4
4
|
import { useEventListener } from "@vant/use";
|
5
5
|
import { useLockScroll } from "../composables/use-lock-scroll.mjs";
|
6
6
|
import { useTouch } from "../composables/use-touch.mjs";
|
@@ -10,11 +10,10 @@ const floatingPanelProps = {
|
|
10
10
|
anchors: makeArrayProp(),
|
11
11
|
duration: makeNumericProp(0.2),
|
12
12
|
contentDraggable: truthProp,
|
13
|
-
lockScroll:
|
13
|
+
lockScroll: Boolean,
|
14
14
|
safeAreaInsetBottom: truthProp
|
15
15
|
};
|
16
16
|
const [name, bem] = createNamespace("floating-panel");
|
17
|
-
const DAMP = 0.2;
|
18
17
|
var stdin_default = defineComponent({
|
19
18
|
name,
|
20
19
|
props: floatingPanelProps,
|
@@ -23,6 +22,7 @@ var stdin_default = defineComponent({
|
|
23
22
|
emit,
|
24
23
|
slots
|
25
24
|
}) {
|
25
|
+
const DAMP = 0.2;
|
26
26
|
const rootRef = ref();
|
27
27
|
const contentRef = ref();
|
28
28
|
const height = useSyncPropRef(() => +props.height, (value) => emit("update:height", value));
|
@@ -55,24 +55,28 @@ var stdin_default = defineComponent({
|
|
55
55
|
return moveY;
|
56
56
|
};
|
57
57
|
let startY;
|
58
|
+
let maxScroll = -1;
|
58
59
|
const touch = useTouch();
|
59
60
|
const onTouchstart = (e) => {
|
60
61
|
touch.start(e);
|
61
62
|
dragging.value = true;
|
62
63
|
startY = -height.value;
|
64
|
+
maxScroll = -1;
|
63
65
|
};
|
64
66
|
const onTouchmove = (e) => {
|
65
67
|
var _a;
|
66
68
|
touch.move(e);
|
67
69
|
const target = e.target;
|
68
70
|
if (contentRef.value === target || ((_a = contentRef.value) == null ? void 0 : _a.contains(target))) {
|
71
|
+
const {
|
72
|
+
scrollTop
|
73
|
+
} = contentRef.value;
|
74
|
+
maxScroll = Math.max(maxScroll, scrollTop);
|
69
75
|
if (!props.contentDraggable)
|
70
76
|
return;
|
71
77
|
if (-startY < boundary.value.max) {
|
72
|
-
|
73
|
-
|
74
|
-
e.stopPropagation();
|
75
|
-
} else if (!(contentRef.value.scrollTop <= 0 && touch.deltaY.value > 0)) {
|
78
|
+
preventDefault(e, true);
|
79
|
+
} else if (!(scrollTop <= 0 && touch.deltaY.value > 0) || maxScroll > 0) {
|
76
80
|
return;
|
77
81
|
}
|
78
82
|
}
|
@@ -80,6 +84,7 @@ var stdin_default = defineComponent({
|
|
80
84
|
height.value = -ease(moveY);
|
81
85
|
};
|
82
86
|
const onTouchend = () => {
|
87
|
+
maxScroll = -1;
|
83
88
|
dragging.value = false;
|
84
89
|
height.value = closest(anchors.value, height.value);
|
85
90
|
if (height.value !== -startY) {
|
@@ -15,10 +15,7 @@ export declare const FloatingPanel: import("../utils").WithInstall<import("vue")
|
|
15
15
|
type: BooleanConstructor;
|
16
16
|
default: true;
|
17
17
|
};
|
18
|
-
lockScroll:
|
19
|
-
type: BooleanConstructor;
|
20
|
-
default: true;
|
21
|
-
};
|
18
|
+
lockScroll: BooleanConstructor;
|
22
19
|
safeAreaInsetBottom: {
|
23
20
|
type: BooleanConstructor;
|
24
21
|
default: true;
|
@@ -40,10 +37,7 @@ export declare const FloatingPanel: import("../utils").WithInstall<import("vue")
|
|
40
37
|
type: BooleanConstructor;
|
41
38
|
default: true;
|
42
39
|
};
|
43
|
-
lockScroll:
|
44
|
-
type: BooleanConstructor;
|
45
|
-
default: true;
|
46
|
-
};
|
40
|
+
lockScroll: BooleanConstructor;
|
47
41
|
safeAreaInsetBottom: {
|
48
42
|
type: BooleanConstructor;
|
49
43
|
default: true;
|
package/es/index.d.ts
CHANGED
package/es/index.mjs
CHANGED
@@ -98,7 +98,7 @@ import { Toast } from "./toast/index.mjs";
|
|
98
98
|
import { TreeSelect } from "./tree-select/index.mjs";
|
99
99
|
import { Uploader } from "./uploader/index.mjs";
|
100
100
|
import { Watermark } from "./watermark/index.mjs";
|
101
|
-
const version = "4.6.
|
101
|
+
const version = "4.6.6";
|
102
102
|
function install(app) {
|
103
103
|
const components = [
|
104
104
|
ActionBar,
|
package/es/toast/index.d.ts
CHANGED
@@ -79,7 +79,7 @@ export default Toast;
|
|
79
79
|
export { toastProps } from './Toast';
|
80
80
|
export { showToast, closeToast, showFailToast, showLoadingToast, showSuccessToast, allowMultipleToast, setToastDefaultOptions, resetToastDefaultOptions, } from './function-call';
|
81
81
|
export type { ToastProps } from './Toast';
|
82
|
-
export type { ToastType, ToastOptions, ToastPosition, ToastThemeVars, ToastWordBreak, } from './types';
|
82
|
+
export type { ToastType, ToastOptions, ToastPosition, ToastThemeVars, ToastWordBreak, ToastWrapperInstance, } from './types';
|
83
83
|
declare module 'vue' {
|
84
84
|
interface GlobalComponents {
|
85
85
|
VanToast: typeof Toast;
|
package/es/vue-tsx-shim.d.ts
CHANGED
@@ -122,7 +122,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
122
122
|
};
|
123
123
|
return (0, import_vue.createVNode)(import_cell.Cell, {
|
124
124
|
"role": "menuitem",
|
125
|
-
"key": option.value,
|
125
|
+
"key": String(option.value),
|
126
126
|
"icon": option.icon,
|
127
127
|
"title": option.text,
|
128
128
|
"class": bem("option", {
|
@@ -1,10 +1,11 @@
|
|
1
1
|
import type { DropdownItemProps } from './DropdownItem';
|
2
2
|
import type { VNode, ComponentPublicInstance } from 'vue';
|
3
3
|
import type { Numeric } from '../utils';
|
4
|
+
export type DropdownItemOptionValue = Numeric | boolean;
|
4
5
|
export type DropdownItemOption = {
|
5
6
|
text: string;
|
6
7
|
icon?: string;
|
7
|
-
value:
|
8
|
+
value: DropdownItemOptionValue;
|
8
9
|
};
|
9
10
|
export type DropdownItemExpose = {
|
10
11
|
toggle: (show?: boolean, options?: {
|
@@ -23,6 +23,7 @@ export declare const dropdownMenuProps: {
|
|
23
23
|
type: BooleanConstructor;
|
24
24
|
default: true;
|
25
25
|
};
|
26
|
+
swipeThreshold: (NumberConstructor | StringConstructor)[];
|
26
27
|
};
|
27
28
|
export type DropdownMenuProps = ExtractPropTypes<typeof dropdownMenuProps>;
|
28
29
|
export declare const DROPDOWN_KEY: InjectionKey<DropdownMenuProvide>;
|
@@ -49,6 +50,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
49
50
|
type: BooleanConstructor;
|
50
51
|
default: true;
|
51
52
|
};
|
53
|
+
swipeThreshold: (NumberConstructor | StringConstructor)[];
|
52
54
|
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
|
53
55
|
overlay: {
|
54
56
|
type: BooleanConstructor;
|
@@ -72,6 +74,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
72
74
|
type: BooleanConstructor;
|
73
75
|
default: true;
|
74
76
|
};
|
77
|
+
swipeThreshold: (NumberConstructor | StringConstructor)[];
|
75
78
|
}>>, {
|
76
79
|
overlay: boolean;
|
77
80
|
duration: string | number;
|
@@ -36,7 +36,8 @@ const dropdownMenuProps = {
|
|
36
36
|
direction: (0, import_utils.makeStringProp)("down"),
|
37
37
|
activeColor: String,
|
38
38
|
closeOnClickOutside: import_utils.truthProp,
|
39
|
-
closeOnClickOverlay: import_utils.truthProp
|
39
|
+
closeOnClickOverlay: import_utils.truthProp,
|
40
|
+
swipeThreshold: import_utils.numericProp
|
40
41
|
};
|
41
42
|
const DROPDOWN_KEY = Symbol(name);
|
42
43
|
var stdin_default = (0, import_vue2.defineComponent)({
|
@@ -55,6 +56,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
55
56
|
} = (0, import_use.useChildren)(DROPDOWN_KEY);
|
56
57
|
const scrollParent = (0, import_use.useScrollParent)(root);
|
57
58
|
const opened = (0, import_vue2.computed)(() => children.some((item) => item.state.showWrapper));
|
59
|
+
const scrollable = (0, import_vue2.computed)(() => props.swipeThreshold && children.length > +props.swipeThreshold);
|
58
60
|
const barStyle = (0, import_vue2.computed)(() => {
|
59
61
|
if (opened.value && (0, import_utils.isDef)(props.zIndex)) {
|
60
62
|
return {
|
@@ -111,7 +113,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
111
113
|
"role": "button",
|
112
114
|
"tabindex": disabled ? void 0 : 0,
|
113
115
|
"class": [bem("item", {
|
114
|
-
disabled
|
116
|
+
disabled,
|
117
|
+
grow: scrollable.value
|
115
118
|
}), {
|
116
119
|
[import_utils.HAPTICS_FEEDBACK]: !disabled
|
117
120
|
}],
|
@@ -155,7 +158,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
155
158
|
"ref": barRef,
|
156
159
|
"style": barStyle.value,
|
157
160
|
"class": bem("bar", {
|
158
|
-
opened: opened.value
|
161
|
+
opened: opened.value,
|
162
|
+
scrollable: scrollable.value
|
159
163
|
})
|
160
164
|
}, [children.map(renderTitle)]), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
|
161
165
|
};
|
@@ -1 +1 @@
|
|
1
|
-
:root{--van-dropdown-menu-height: 48px;--van-dropdown-menu-background: var(--van-background-2);--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, .12);--van-dropdown-menu-title-font-size: 15px;--van-dropdown-menu-title-text-color: var(--van-text-color);--van-dropdown-menu-title-active-text-color: var(--van-primary-color);--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);--van-dropdown-menu-title-line-height: var(--van-line-height-lg);--van-dropdown-menu-option-active-color: var(--van-primary-color);--van-dropdown-menu-content-max-height: 80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background);box-shadow:var(--van-dropdown-menu-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active:after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}
|
1
|
+
:root{--van-dropdown-menu-height: 48px;--van-dropdown-menu-background: var(--van-background-2);--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, .12);--van-dropdown-menu-title-font-size: 15px;--van-dropdown-menu-title-text-color: var(--van-text-color);--van-dropdown-menu-title-active-text-color: var(--van-primary-color);--van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);--van-dropdown-menu-title-line-height: var(--van-line-height-lg);--van-dropdown-menu-option-active-color: var(--van-primary-color);--van-dropdown-menu-content-max-height: 80%}.van-dropdown-menu{-webkit-user-select:none;user-select:none}.van-dropdown-menu__bar{position:relative;display:flex;height:var(--van-dropdown-menu-height);background:var(--van-dropdown-menu-background);box-shadow:var(--van-dropdown-menu-shadow)}.van-dropdown-menu__bar--opened{z-index:calc(var(--van-dropdown-item-z-index) + 1)}.van-dropdown-menu__bar--scrollable{padding-left:var(--van-padding-base);padding-right:var(--van-padding-xs);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.van-dropdown-menu__bar--scrollable::-webkit-scrollbar{display:none}.van-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;min-width:0}.van-dropdown-menu__item--disabled .van-dropdown-menu__title{color:var(--van-dropdown-menu-title-disabled-text-color)}.van-dropdown-menu__item--grow{flex:1 0 auto;padding-left:var(--van-padding-base);padding-right:var(--van-padding-sm)}.van-dropdown-menu__title{position:relative;box-sizing:border-box;max-width:100%;padding:var(--van-dropdown-menu-title-padding);color:var(--van-dropdown-menu-title-text-color);font-size:var(--van-dropdown-menu-title-font-size);line-height:var(--van-dropdown-menu-title-line-height)}.van-dropdown-menu__title:after{position:absolute;top:50%;right:-4px;margin-top:-5px;border:3px solid;border-color:transparent transparent var(--van-gray-4) var(--van-gray-4);transform:rotate(-45deg);opacity:.8;content:""}.van-dropdown-menu__title--active{color:var(--van-dropdown-menu-title-active-text-color)}.van-dropdown-menu__title--active:after{border-color:transparent transparent currentColor currentColor}.van-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}
|
@@ -22,6 +22,7 @@ export declare const DropdownMenu: import("../utils").WithInstall<import("vue").
|
|
22
22
|
type: BooleanConstructor;
|
23
23
|
default: true;
|
24
24
|
};
|
25
|
+
swipeThreshold: (NumberConstructor | StringConstructor)[];
|
25
26
|
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
26
27
|
overlay: {
|
27
28
|
type: BooleanConstructor;
|
@@ -45,6 +46,7 @@ export declare const DropdownMenu: import("../utils").WithInstall<import("vue").
|
|
45
46
|
type: BooleanConstructor;
|
46
47
|
default: true;
|
47
48
|
};
|
49
|
+
swipeThreshold: (NumberConstructor | StringConstructor)[];
|
48
50
|
}>>, {
|
49
51
|
overlay: boolean;
|
50
52
|
duration: string | number;
|
@@ -57,11 +57,13 @@ const floatingBubbleProps = {
|
|
57
57
|
const [name, bem] = (0, import_utils.createNamespace)("floating-bubble");
|
58
58
|
var stdin_default = (0, import_vue2.defineComponent)({
|
59
59
|
name,
|
60
|
+
inheritAttrs: false,
|
60
61
|
props: floatingBubbleProps,
|
61
62
|
emits: ["click", "update:offset", "offsetChange"],
|
62
63
|
setup(props, {
|
63
64
|
slots,
|
64
|
-
emit
|
65
|
+
emit,
|
66
|
+
attrs
|
65
67
|
}) {
|
66
68
|
const rootRef = (0, import_vue2.ref)();
|
67
69
|
const state = (0, import_vue2.ref)({
|
@@ -89,6 +91,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
89
91
|
return style;
|
90
92
|
});
|
91
93
|
const updateState = () => {
|
94
|
+
if (!show.value)
|
95
|
+
return;
|
92
96
|
const {
|
93
97
|
width,
|
94
98
|
height
|
@@ -164,6 +168,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
164
168
|
const onClick = (e) => {
|
165
169
|
if (touch.isTap.value)
|
166
170
|
emit("click", e);
|
171
|
+
else
|
172
|
+
e.stopPropagation();
|
167
173
|
};
|
168
174
|
(0, import_vue2.onMounted)(() => {
|
169
175
|
updateState();
|
@@ -182,15 +188,15 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
182
188
|
}
|
183
189
|
});
|
184
190
|
return () => {
|
185
|
-
const Content = (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
|
191
|
+
const Content = (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
|
186
192
|
"class": bem(),
|
187
193
|
"ref": rootRef,
|
188
194
|
"onTouchstartPassive": onTouchStart,
|
189
195
|
"onTouchend": onTouchEnd,
|
190
196
|
"onTouchcancel": onTouchEnd,
|
191
|
-
"
|
197
|
+
"onClickCapture": onClick,
|
192
198
|
"style": rootStyle.value
|
193
|
-
}, [slots.default ? slots.default() : (0, import_vue.createVNode)(import_icon.default, {
|
199
|
+
}, attrs), [slots.default ? slots.default() : (0, import_vue.createVNode)(import_icon.default, {
|
194
200
|
"name": props.icon,
|
195
201
|
"class": bem("icon")
|
196
202
|
}, null)]), [[import_vue.vShow, show.value]]);
|
@@ -16,10 +16,7 @@ export declare const floatingPanelProps: {
|
|
16
16
|
type: BooleanConstructor;
|
17
17
|
default: true;
|
18
18
|
};
|
19
|
-
lockScroll:
|
20
|
-
type: BooleanConstructor;
|
21
|
-
default: true;
|
22
|
-
};
|
19
|
+
lockScroll: BooleanConstructor;
|
23
20
|
safeAreaInsetBottom: {
|
24
21
|
type: BooleanConstructor;
|
25
22
|
default: true;
|
@@ -43,10 +40,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
43
40
|
type: BooleanConstructor;
|
44
41
|
default: true;
|
45
42
|
};
|
46
|
-
lockScroll:
|
47
|
-
type: BooleanConstructor;
|
48
|
-
default: true;
|
49
|
-
};
|
43
|
+
lockScroll: BooleanConstructor;
|
50
44
|
safeAreaInsetBottom: {
|
51
45
|
type: BooleanConstructor;
|
52
46
|
default: true;
|
@@ -68,10 +62,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
68
62
|
type: BooleanConstructor;
|
69
63
|
default: true;
|
70
64
|
};
|
71
|
-
lockScroll:
|
72
|
-
type: BooleanConstructor;
|
73
|
-
default: true;
|
74
|
-
};
|
65
|
+
lockScroll: BooleanConstructor;
|
75
66
|
safeAreaInsetBottom: {
|
76
67
|
type: BooleanConstructor;
|
77
68
|
default: true;
|
@@ -33,11 +33,10 @@ const floatingPanelProps = {
|
|
33
33
|
anchors: (0, import_utils.makeArrayProp)(),
|
34
34
|
duration: (0, import_utils.makeNumericProp)(0.2),
|
35
35
|
contentDraggable: import_utils.truthProp,
|
36
|
-
lockScroll:
|
36
|
+
lockScroll: Boolean,
|
37
37
|
safeAreaInsetBottom: import_utils.truthProp
|
38
38
|
};
|
39
39
|
const [name, bem] = (0, import_utils.createNamespace)("floating-panel");
|
40
|
-
const DAMP = 0.2;
|
41
40
|
var stdin_default = (0, import_vue2.defineComponent)({
|
42
41
|
name,
|
43
42
|
props: floatingPanelProps,
|
@@ -46,6 +45,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
46
45
|
emit,
|
47
46
|
slots
|
48
47
|
}) {
|
48
|
+
const DAMP = 0.2;
|
49
49
|
const rootRef = (0, import_vue2.ref)();
|
50
50
|
const contentRef = (0, import_vue2.ref)();
|
51
51
|
const height = (0, import_use_sync_prop_ref.useSyncPropRef)(() => +props.height, (value) => emit("update:height", value));
|
@@ -78,24 +78,28 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
78
78
|
return moveY;
|
79
79
|
};
|
80
80
|
let startY;
|
81
|
+
let maxScroll = -1;
|
81
82
|
const touch = (0, import_use_touch.useTouch)();
|
82
83
|
const onTouchstart = (e) => {
|
83
84
|
touch.start(e);
|
84
85
|
dragging.value = true;
|
85
86
|
startY = -height.value;
|
87
|
+
maxScroll = -1;
|
86
88
|
};
|
87
89
|
const onTouchmove = (e) => {
|
88
90
|
var _a;
|
89
91
|
touch.move(e);
|
90
92
|
const target = e.target;
|
91
93
|
if (contentRef.value === target || ((_a = contentRef.value) == null ? void 0 : _a.contains(target))) {
|
94
|
+
const {
|
95
|
+
scrollTop
|
96
|
+
} = contentRef.value;
|
97
|
+
maxScroll = Math.max(maxScroll, scrollTop);
|
92
98
|
if (!props.contentDraggable)
|
93
99
|
return;
|
94
100
|
if (-startY < boundary.value.max) {
|
95
|
-
|
96
|
-
|
97
|
-
e.stopPropagation();
|
98
|
-
} else if (!(contentRef.value.scrollTop <= 0 && touch.deltaY.value > 0)) {
|
101
|
+
(0, import_utils.preventDefault)(e, true);
|
102
|
+
} else if (!(scrollTop <= 0 && touch.deltaY.value > 0) || maxScroll > 0) {
|
99
103
|
return;
|
100
104
|
}
|
101
105
|
}
|
@@ -103,6 +107,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
103
107
|
height.value = -ease(moveY);
|
104
108
|
};
|
105
109
|
const onTouchend = () => {
|
110
|
+
maxScroll = -1;
|
106
111
|
dragging.value = false;
|
107
112
|
height.value = (0, import_utils.closest)(anchors.value, height.value);
|
108
113
|
if (height.value !== -startY) {
|
@@ -15,10 +15,7 @@ export declare const FloatingPanel: import("../utils").WithInstall<import("vue")
|
|
15
15
|
type: BooleanConstructor;
|
16
16
|
default: true;
|
17
17
|
};
|
18
|
-
lockScroll:
|
19
|
-
type: BooleanConstructor;
|
20
|
-
default: true;
|
21
|
-
};
|
18
|
+
lockScroll: BooleanConstructor;
|
22
19
|
safeAreaInsetBottom: {
|
23
20
|
type: BooleanConstructor;
|
24
21
|
default: true;
|
@@ -40,10 +37,7 @@ export declare const FloatingPanel: import("../utils").WithInstall<import("vue")
|
|
40
37
|
type: BooleanConstructor;
|
41
38
|
default: true;
|
42
39
|
};
|
43
|
-
lockScroll:
|
44
|
-
type: BooleanConstructor;
|
45
|
-
default: true;
|
46
|
-
};
|
40
|
+
lockScroll: BooleanConstructor;
|
47
41
|
safeAreaInsetBottom: {
|
48
42
|
type: BooleanConstructor;
|
49
43
|
default: true;
|