vant 4.6.4 → 4.6.5
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-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 +6 -4
- 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/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 +5 -3
- 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 +24 -13
- package/lib/vant.es.js +24 -13
- package/lib/vant.js +24 -13
- package/lib/vant.min.js +1 -1
- 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
|
@@ -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({
|
@@ -149,7 +151,7 @@ var stdin_default = defineComponent({
|
|
149
151
|
}
|
150
152
|
});
|
151
153
|
return () => {
|
152
|
-
const Content = _withDirectives(_createVNode("div", {
|
154
|
+
const Content = _withDirectives(_createVNode("div", _mergeProps({
|
153
155
|
"class": bem(),
|
154
156
|
"ref": rootRef,
|
155
157
|
"onTouchstartPassive": onTouchStart,
|
@@ -157,7 +159,7 @@ var stdin_default = defineComponent({
|
|
157
159
|
"onTouchcancel": onTouchEnd,
|
158
160
|
"onClick": onClick,
|
159
161
|
"style": rootStyle.value
|
160
|
-
}, [slots.default ? slots.default() : _createVNode(Icon, {
|
162
|
+
}, attrs), [slots.default ? slots.default() : _createVNode(Icon, {
|
161
163
|
"name": props.icon,
|
162
164
|
"class": bem("icon")
|
163
165
|
}, 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.5";
|
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;
|
@@ -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)({
|
@@ -182,7 +184,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
182
184
|
}
|
183
185
|
});
|
184
186
|
return () => {
|
185
|
-
const Content = (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
|
187
|
+
const Content = (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
|
186
188
|
"class": bem(),
|
187
189
|
"ref": rootRef,
|
188
190
|
"onTouchstartPassive": onTouchStart,
|
@@ -190,7 +192,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
|
|
190
192
|
"onTouchcancel": onTouchEnd,
|
191
193
|
"onClick": onClick,
|
192
194
|
"style": rootStyle.value
|
193
|
-
}, [slots.default ? slots.default() : (0, import_vue.createVNode)(import_icon.default, {
|
195
|
+
}, attrs), [slots.default ? slots.default() : (0, import_vue.createVNode)(import_icon.default, {
|
194
196
|
"name": props.icon,
|
195
197
|
"class": bem("icon")
|
196
198
|
}, 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;
|