vant 4.5.0 → 4.6.0

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.
Files changed (119) hide show
  1. package/es/barrage/index.d.ts +1 -1
  2. package/es/barrage/types.d.ts +6 -0
  3. package/es/composables/use-touch.d.ts +1 -0
  4. package/es/composables/use-touch.mjs +8 -1
  5. package/es/config-provider/types.d.ts +1 -1
  6. package/es/dropdown-menu/index.d.ts +1 -1
  7. package/es/field/Field.mjs +1 -1
  8. package/es/floating-bubble/FloatingBubble.d.ts +86 -0
  9. package/es/floating-bubble/FloatingBubble.mjs +177 -0
  10. package/es/floating-bubble/index.css +1 -0
  11. package/es/floating-bubble/index.d.ts +63 -0
  12. package/es/floating-bubble/index.mjs +10 -0
  13. package/es/floating-bubble/style/index.d.ts +1 -0
  14. package/es/floating-bubble/style/index.mjs +4 -0
  15. package/es/floating-bubble/types.d.ts +8 -0
  16. package/es/floating-bubble/types.mjs +0 -0
  17. package/es/floating-panel/FloatingPanel.mjs +5 -4
  18. package/es/floating-panel/index.d.ts +3 -2
  19. package/es/floating-panel/index.mjs +3 -1
  20. package/es/floating-panel/types.d.ts +9 -0
  21. package/es/floating-panel/types.mjs +0 -0
  22. package/es/image-preview/ImagePreviewItem.mjs +1 -2
  23. package/es/index.d.ts +3 -1
  24. package/es/index.mjs +7 -1
  25. package/es/picker/PickerColumn.mjs +7 -2
  26. package/es/rate/Rate.d.ts +4 -0
  27. package/es/rate/Rate.mjs +16 -10
  28. package/es/rate/index.css +1 -1
  29. package/es/rate/index.d.ts +3 -0
  30. package/es/rolling-text/RollingText.d.ts +104 -0
  31. package/es/rolling-text/RollingText.mjs +98 -0
  32. package/es/rolling-text/RollingTextItem.d.ts +67 -0
  33. package/es/rolling-text/RollingTextItem.mjs +47 -0
  34. package/es/rolling-text/index.css +1 -0
  35. package/es/rolling-text/index.d.ts +79 -0
  36. package/es/rolling-text/index.mjs +10 -0
  37. package/es/rolling-text/style/index.d.ts +1 -0
  38. package/es/rolling-text/style/index.mjs +2 -0
  39. package/es/rolling-text/types.d.ts +17 -0
  40. package/es/rolling-text/types.mjs +0 -0
  41. package/es/signature/index.d.ts +1 -0
  42. package/es/signature/types.d.ts +6 -0
  43. package/es/signature/types.mjs +0 -0
  44. package/es/slider/Slider.d.ts +1 -1
  45. package/es/slider/index.d.ts +1 -1
  46. package/es/stepper/Stepper.d.ts +1 -1
  47. package/es/stepper/index.d.ts +1 -1
  48. package/es/utils/closest.d.ts +1 -0
  49. package/es/utils/closest.mjs +8 -0
  50. package/es/utils/constant.d.ts +1 -0
  51. package/es/utils/constant.mjs +3 -1
  52. package/es/utils/index.d.ts +1 -0
  53. package/es/utils/index.mjs +1 -0
  54. package/es/watermark/index.d.ts +1 -0
  55. package/es/watermark/types.d.ts +3 -0
  56. package/es/watermark/types.mjs +0 -0
  57. package/lib/barrage/index.d.ts +1 -1
  58. package/lib/barrage/types.d.ts +6 -0
  59. package/lib/composables/use-touch.d.ts +1 -0
  60. package/lib/composables/use-touch.js +8 -1
  61. package/lib/config-provider/types.d.ts +1 -1
  62. package/lib/dropdown-menu/index.d.ts +1 -1
  63. package/lib/field/Field.js +1 -1
  64. package/lib/floating-bubble/FloatingBubble.d.ts +86 -0
  65. package/lib/floating-bubble/FloatingBubble.js +206 -0
  66. package/lib/floating-bubble/index.css +1 -0
  67. package/lib/floating-bubble/index.d.ts +63 -0
  68. package/lib/floating-bubble/index.js +39 -0
  69. package/lib/floating-bubble/style/index.d.ts +1 -0
  70. package/lib/floating-bubble/style/index.js +4 -0
  71. package/lib/floating-bubble/types.d.ts +8 -0
  72. package/lib/floating-bubble/types.js +15 -0
  73. package/lib/floating-panel/FloatingPanel.js +5 -4
  74. package/lib/floating-panel/index.d.ts +3 -2
  75. package/lib/floating-panel/index.js +3 -1
  76. package/lib/floating-panel/types.d.ts +9 -0
  77. package/lib/floating-panel/types.js +15 -0
  78. package/lib/image-preview/ImagePreviewItem.js +1 -2
  79. package/lib/index.css +1 -1
  80. package/lib/index.d.ts +3 -1
  81. package/lib/index.js +7 -1
  82. package/lib/picker/PickerColumn.js +7 -2
  83. package/lib/rate/Rate.d.ts +4 -0
  84. package/lib/rate/Rate.js +16 -10
  85. package/lib/rate/index.css +1 -1
  86. package/lib/rate/index.d.ts +3 -0
  87. package/lib/rolling-text/RollingText.d.ts +104 -0
  88. package/lib/rolling-text/RollingText.js +127 -0
  89. package/lib/rolling-text/RollingTextItem.d.ts +67 -0
  90. package/lib/rolling-text/RollingTextItem.js +66 -0
  91. package/lib/rolling-text/index.css +1 -0
  92. package/lib/rolling-text/index.d.ts +79 -0
  93. package/lib/rolling-text/index.js +39 -0
  94. package/lib/rolling-text/style/index.d.ts +1 -0
  95. package/lib/rolling-text/style/index.js +2 -0
  96. package/lib/rolling-text/types.d.ts +17 -0
  97. package/lib/rolling-text/types.js +15 -0
  98. package/lib/signature/index.d.ts +1 -0
  99. package/lib/signature/types.d.ts +6 -0
  100. package/lib/signature/types.js +15 -0
  101. package/lib/slider/Slider.d.ts +1 -1
  102. package/lib/slider/index.d.ts +1 -1
  103. package/lib/stepper/Stepper.d.ts +1 -1
  104. package/lib/stepper/index.d.ts +1 -1
  105. package/lib/utils/closest.d.ts +1 -0
  106. package/lib/utils/closest.js +27 -0
  107. package/lib/utils/constant.d.ts +1 -0
  108. package/lib/utils/constant.js +3 -1
  109. package/lib/utils/index.d.ts +1 -0
  110. package/lib/utils/index.js +1 -0
  111. package/lib/vant.cjs.js +2340 -2012
  112. package/lib/vant.es.js +2340 -2012
  113. package/lib/vant.js +2340 -2012
  114. package/lib/vant.min.js +1 -1
  115. package/lib/watermark/index.d.ts +1 -0
  116. package/lib/watermark/types.d.ts +3 -0
  117. package/lib/watermark/types.js +15 -0
  118. package/lib/web-types.json +1 -1
  119. package/package.json +1 -1
@@ -61,7 +61,7 @@ export declare const Barrage: import("../utils").WithInstall<import("vue").Defin
61
61
  export default Barrage;
62
62
  export { barrageProps } from './Barrage';
63
63
  export type { BarrageProps, BarrageItem } from './Barrage';
64
- export type { BarrageInstance } from './types';
64
+ export type { BarrageInstance, BarrageThemeVars } from './types';
65
65
  declare module 'vue' {
66
66
  interface GlobalComponents {
67
67
  VanBarrage: typeof Barrage;
@@ -5,3 +5,9 @@ export type BarrageExpose = {
5
5
  pause(): void;
6
6
  };
7
7
  export type BarrageInstance = ComponentPublicInstance<BarrageProps, BarrageExpose>;
8
+ export type BarrageThemeVars = {
9
+ barrageFontSize?: string;
10
+ barrageSpace?: string;
11
+ barrageFont?: string;
12
+ barrageColor?: string;
13
+ };
@@ -12,5 +12,6 @@ export declare function useTouch(): {
12
12
  direction: import("vue").Ref<Direction>;
13
13
  isVertical: () => boolean;
14
14
  isHorizontal: () => boolean;
15
+ isTap: import("vue").Ref<boolean>;
15
16
  };
16
17
  export {};
@@ -1,4 +1,5 @@
1
1
  import { ref } from "vue";
2
+ import { TAP_OFFSET } from "../utils/index.mjs";
2
3
  function getDirection(x, y) {
3
4
  if (x > y) {
4
5
  return "horizontal";
@@ -16,6 +17,7 @@ function useTouch() {
16
17
  const offsetX = ref(0);
17
18
  const offsetY = ref(0);
18
19
  const direction = ref("");
20
+ const isTap = ref(true);
19
21
  const isVertical = () => direction.value === "vertical";
20
22
  const isHorizontal = () => direction.value === "horizontal";
21
23
  const reset = () => {
@@ -24,6 +26,7 @@ function useTouch() {
24
26
  offsetX.value = 0;
25
27
  offsetY.value = 0;
26
28
  direction.value = "";
29
+ isTap.value = true;
27
30
  };
28
31
  const start = (event) => {
29
32
  reset();
@@ -40,6 +43,9 @@ function useTouch() {
40
43
  if (!direction.value || offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE) {
41
44
  direction.value = getDirection(offsetX.value, offsetY.value);
42
45
  }
46
+ if (isTap.value && (offsetX.value > TAP_OFFSET || offsetY.value > TAP_OFFSET)) {
47
+ isTap.value = false;
48
+ }
43
49
  };
44
50
  return {
45
51
  move,
@@ -53,7 +59,8 @@ function useTouch() {
53
59
  offsetY,
54
60
  direction,
55
61
  isVertical,
56
- isHorizontal
62
+ isHorizontal,
63
+ isTap
57
64
  };
58
65
  }
59
66
  export {
@@ -1 +1 @@
1
- export type ConfigProviderThemeVars = import('../action-bar').ActionBarThemeVars & import('../action-bar-button').ActionBarButtonThemeVars & import('../action-bar-icon').ActionBarIconThemeVars & import('../action-sheet').ActionSheetThemeVars & import('../address-edit').AddressEditThemeVars & import('../address-list').AddressListThemeVars & import('../badge').BadgeThemeVars & import('../button').ButtonThemeVars & import('../calendar').CalendarThemeVars & import('../card').CardThemeVars & import('../cascader').CascaderThemeVars & import('../cell').CellThemeVars & import('../cell-group').CellGroupThemeVars & import('../checkbox').CheckboxThemeVars & import('../circle').CircleThemeVars & import('../collapse-item').CollapseItemThemeVars & import('../contact-card').ContactCardThemeVars & import('../contact-edit').ContactEditThemeVars & import('../contact-list').ContactListThemeVars & import('../count-down').CountDownThemeVars & import('../coupon').CouponThemeVars & import('../coupon-cell').CouponCellThemeVars & import('../coupon-list').CouponListThemeVars & import('../dialog').DialogThemeVars & import('../divider').DividerThemeVars & import('../dropdown-item').DropdownItemThemeVars & import('../dropdown-menu').DropdownMenuThemeVars & import('../empty').EmptyThemeVars & import('../field').FieldThemeVars & import('../grid-item').GridItemThemeVars & import('../image').ImageThemeVars & import('../image-preview').ImagePreviewThemeVars & import('../index-anchor').IndexAnchorThemeVars & import('../index-bar').IndexBarThemeVars & import('../list').ListThemeVars & import('../loading').LoadingThemeVars & import('../nav-bar').NavBarThemeVars & import('../notice-bar').NoticeBarThemeVars & import('../notify').NotifyThemeVars & import('../number-keyboard').NumberKeyboardThemeVars & import('../overlay').OverlayThemeVars & import('../pagination').PaginationThemeVars & import('../password-input').PasswordInputThemeVars & import('../picker').PickerThemeVars & import('../picker-group').PickerGroupThemeVars & import('../popover').PopoverThemeVars & import('../popup').PopupThemeVars & import('../progress').ProgressThemeVars & import('../pull-refresh').PullRefreshThemeVars & import('../radio').RadioThemeVars & import('../rate').RateThemeVars & import('../search').SearchThemeVars & import('../share-sheet').ShareSheetThemeVars & import('../sidebar').SidebarThemeVars & import('../sidebar-item').SidebarItemThemeVars & import('../skeleton').SkeletonThemeVars & import('../slider').SliderThemeVars & import('../step').StepThemeVars & import('../stepper').StepperThemeVars & import('../steps').StepsThemeVars & import('../sticky').StickyThemeVars & import('../submit-bar').SubmitBarThemeVars & import('../swipe').SwipeThemeVars & import('../switch').SwitchThemeVars & import('../tabbar').TabbarThemeVars & import('../tabbar-item').TabbarItemThemeVars & import('../tabs').TabsThemeVars & import('../tag').TagThemeVars & import('../toast').ToastThemeVars & import('../tree-select').TreeSelectThemeVars & import('../uploader').UploaderThemeVars;
1
+ export type ConfigProviderThemeVars = import('../action-bar').ActionBarThemeVars & import('../action-bar-button').ActionBarButtonThemeVars & import('../action-bar-icon').ActionBarIconThemeVars & import('../action-sheet').ActionSheetThemeVars & import('../address-edit').AddressEditThemeVars & import('../address-list').AddressListThemeVars & import('../badge').BadgeThemeVars & import('../barrage').BarrageThemeVars & import('../button').ButtonThemeVars & import('../calendar').CalendarThemeVars & import('../card').CardThemeVars & import('../cascader').CascaderThemeVars & import('../cell').CellThemeVars & import('../cell-group').CellGroupThemeVars & import('../checkbox').CheckboxThemeVars & import('../circle').CircleThemeVars & import('../collapse-item').CollapseItemThemeVars & import('../contact-card').ContactCardThemeVars & import('../contact-edit').ContactEditThemeVars & import('../contact-list').ContactListThemeVars & import('../count-down').CountDownThemeVars & import('../coupon').CouponThemeVars & import('../coupon-cell').CouponCellThemeVars & import('../coupon-list').CouponListThemeVars & import('../dialog').DialogThemeVars & import('../divider').DividerThemeVars & import('../dropdown-item').DropdownItemThemeVars & import('../dropdown-menu').DropdownMenuThemeVars & import('../empty').EmptyThemeVars & import('../field').FieldThemeVars & import('../floating-bubble').FloatingBubbleThemeVars & import('../floating-panel').FloatingPanelThemeVars & import('../grid-item').GridItemThemeVars & import('../image').ImageThemeVars & import('../image-preview').ImagePreviewThemeVars & import('../index-anchor').IndexAnchorThemeVars & import('../index-bar').IndexBarThemeVars & import('../list').ListThemeVars & import('../loading').LoadingThemeVars & import('../nav-bar').NavBarThemeVars & import('../notice-bar').NoticeBarThemeVars & import('../notify').NotifyThemeVars & import('../number-keyboard').NumberKeyboardThemeVars & import('../overlay').OverlayThemeVars & import('../pagination').PaginationThemeVars & import('../password-input').PasswordInputThemeVars & import('../picker').PickerThemeVars & import('../picker-group').PickerGroupThemeVars & import('../popover').PopoverThemeVars & import('../popup').PopupThemeVars & import('../progress').ProgressThemeVars & import('../pull-refresh').PullRefreshThemeVars & import('../radio').RadioThemeVars & import('../rate').RateThemeVars & import('../rolling-text').RollingTextThemeVars & import('../search').SearchThemeVars & import('../share-sheet').ShareSheetThemeVars & import('../sidebar').SidebarThemeVars & import('../sidebar-item').SidebarItemThemeVars & import('../signature').SignatureThemeVars & import('../skeleton').SkeletonThemeVars & import('../slider').SliderThemeVars & import('../step').StepThemeVars & import('../stepper').StepperThemeVars & import('../steps').StepsThemeVars & import('../sticky').StickyThemeVars & import('../submit-bar').SubmitBarThemeVars & import('../swipe').SwipeThemeVars & import('../switch').SwitchThemeVars & import('../tabbar').TabbarThemeVars & import('../tabbar-item').TabbarItemThemeVars & import('../tabs').TabsThemeVars & import('../tag').TagThemeVars & import('../toast').ToastThemeVars & import('../tree-select').TreeSelectThemeVars & import('../uploader').UploaderThemeVars & import('../watermark').WatermarkThemeVars;
@@ -55,7 +55,7 @@ export declare const DropdownMenu: import("../utils").WithInstall<import("vue").
55
55
  export default DropdownMenu;
56
56
  export { dropdownMenuProps } from './DropdownMenu';
57
57
  export type { DropdownMenuProps };
58
- export type { DropdownMenuDirection, DropdownMenuThemeVars } from './types';
58
+ export type { DropdownMenuInstance, DropdownMenuDirection, DropdownMenuThemeVars, } from './types';
59
59
  declare module 'vue' {
60
60
  interface GlobalComponents {
61
61
  VanDropdownMenu: typeof DropdownMenu;
@@ -427,7 +427,7 @@ var stdin_default = defineComponent({
427
427
  if (props.label) {
428
428
  return _createVNode("label", {
429
429
  "id": `${id}-label`,
430
- "for": getInputId(),
430
+ "for": slots.input ? void 0 : getInputId(),
431
431
  "onClick": (event) => {
432
432
  preventDefault(event);
433
433
  focus();
@@ -0,0 +1,86 @@
1
+ import { PropType, type ExtractPropTypes } from 'vue';
2
+ export type FloatingBubbleAxis = 'x' | 'y' | 'xy' | 'lock';
3
+ export type FloatingBubbleMagnetic = 'x' | 'y';
4
+ export type FloatingBubbleOffset = {
5
+ x: number;
6
+ y: number;
7
+ };
8
+ export declare const floatingBubbleProps: {
9
+ axis: {
10
+ type: PropType<FloatingBubbleAxis>;
11
+ default: FloatingBubbleAxis;
12
+ };
13
+ magnetic: PropType<FloatingBubbleMagnetic>;
14
+ icon: StringConstructor;
15
+ gap: {
16
+ type: NumberConstructor;
17
+ default: number;
18
+ };
19
+ offset: {
20
+ type: PropType<FloatingBubbleOffset>;
21
+ default: () => {
22
+ x: number;
23
+ y: number;
24
+ };
25
+ };
26
+ teleport: {
27
+ type: PropType<string | import("vue").RendererElement | null | undefined>;
28
+ default: string;
29
+ };
30
+ };
31
+ export type FloatingBubbleProps = ExtractPropTypes<typeof floatingBubbleProps>;
32
+ declare const _default: import("vue").DefineComponent<{
33
+ axis: {
34
+ type: PropType<FloatingBubbleAxis>;
35
+ default: FloatingBubbleAxis;
36
+ };
37
+ magnetic: PropType<FloatingBubbleMagnetic>;
38
+ icon: StringConstructor;
39
+ gap: {
40
+ type: NumberConstructor;
41
+ default: number;
42
+ };
43
+ offset: {
44
+ type: PropType<FloatingBubbleOffset>;
45
+ default: () => {
46
+ x: number;
47
+ y: number;
48
+ };
49
+ };
50
+ teleport: {
51
+ type: PropType<string | import("vue").RendererElement | null | undefined>;
52
+ default: string;
53
+ };
54
+ }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:offset" | "offsetChange")[], "click" | "update:offset" | "offsetChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
55
+ axis: {
56
+ type: PropType<FloatingBubbleAxis>;
57
+ default: FloatingBubbleAxis;
58
+ };
59
+ magnetic: PropType<FloatingBubbleMagnetic>;
60
+ icon: StringConstructor;
61
+ gap: {
62
+ type: NumberConstructor;
63
+ default: number;
64
+ };
65
+ offset: {
66
+ type: PropType<FloatingBubbleOffset>;
67
+ default: () => {
68
+ x: number;
69
+ y: number;
70
+ };
71
+ };
72
+ teleport: {
73
+ type: PropType<string | import("vue").RendererElement | null | undefined>;
74
+ default: string;
75
+ };
76
+ }>> & {
77
+ onClick?: ((...args: any[]) => any) | undefined;
78
+ "onUpdate:offset"?: ((...args: any[]) => any) | undefined;
79
+ onOffsetChange?: ((...args: any[]) => any) | undefined;
80
+ }, {
81
+ offset: FloatingBubbleOffset;
82
+ teleport: string | import("vue").RendererElement | null | undefined;
83
+ gap: number;
84
+ axis: FloatingBubbleAxis;
85
+ }, {}>;
86
+ export default _default;
@@ -0,0 +1,177 @@
1
+ import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
2
+ import { Teleport, computed, defineComponent, nextTick, onMounted, ref, watch, onActivated, onDeactivated } from "vue";
3
+ import { useRect, useEventListener } from "@vant/use";
4
+ import { useTouch } from "../composables/use-touch.mjs";
5
+ import { addUnit, closest, createNamespace, makeNumberProp, makeStringProp, pick, windowWidth, windowHeight } from "../utils/index.mjs";
6
+ import Icon from "../icon/index.mjs";
7
+ const floatingBubbleProps = {
8
+ axis: makeStringProp("y"),
9
+ magnetic: String,
10
+ icon: String,
11
+ gap: makeNumberProp(24),
12
+ offset: {
13
+ type: Object,
14
+ default: () => ({
15
+ x: -1,
16
+ y: -1
17
+ })
18
+ },
19
+ teleport: {
20
+ type: [String, Object],
21
+ default: "body"
22
+ }
23
+ };
24
+ const [name, bem] = createNamespace("floating-bubble");
25
+ var stdin_default = defineComponent({
26
+ name,
27
+ props: floatingBubbleProps,
28
+ emits: ["click", "update:offset", "offsetChange"],
29
+ setup(props, {
30
+ slots,
31
+ emit
32
+ }) {
33
+ const rootRef = ref();
34
+ const state = ref({
35
+ x: 0,
36
+ y: 0,
37
+ width: 0,
38
+ height: 0
39
+ });
40
+ const boundary = computed(() => ({
41
+ top: props.gap,
42
+ right: windowWidth.value - state.value.height - props.gap,
43
+ bottom: windowHeight.value - state.value.width - props.gap,
44
+ left: props.gap
45
+ }));
46
+ const dragging = ref(false);
47
+ let initialized = false;
48
+ const rootStyle = computed(() => {
49
+ const style = {};
50
+ const x = addUnit(state.value.x);
51
+ const y = addUnit(state.value.y);
52
+ style.transform = `translate3d(${x}, ${y}, 0)`;
53
+ if (dragging.value || !initialized) {
54
+ style.transition = "none";
55
+ }
56
+ return style;
57
+ });
58
+ const updateState = () => {
59
+ const {
60
+ width,
61
+ height
62
+ } = useRect(rootRef.value);
63
+ const {
64
+ offset
65
+ } = props;
66
+ state.value = {
67
+ x: offset.x > -1 ? offset.x : windowWidth.value - width - props.gap,
68
+ y: offset.y > -1 ? offset.y : windowHeight.value - height - props.gap,
69
+ width,
70
+ height
71
+ };
72
+ };
73
+ const touch = useTouch();
74
+ let prevX = 0;
75
+ let prevY = 0;
76
+ const onTouchStart = (e) => {
77
+ touch.start(e);
78
+ dragging.value = true;
79
+ prevX = state.value.x;
80
+ prevY = state.value.y;
81
+ };
82
+ const onTouchMove = (e) => {
83
+ e.preventDefault();
84
+ touch.move(e);
85
+ if (props.axis === "lock")
86
+ return;
87
+ if (!touch.isTap.value) {
88
+ if (props.axis === "x" || props.axis === "xy") {
89
+ let nextX = prevX + touch.deltaX.value;
90
+ if (nextX < boundary.value.left)
91
+ nextX = boundary.value.left;
92
+ if (nextX > boundary.value.right)
93
+ nextX = boundary.value.right;
94
+ state.value.x = nextX;
95
+ }
96
+ if (props.axis === "y" || props.axis === "xy") {
97
+ let nextY = prevY + touch.deltaY.value;
98
+ if (nextY < boundary.value.top)
99
+ nextY = boundary.value.top;
100
+ if (nextY > boundary.value.bottom)
101
+ nextY = boundary.value.bottom;
102
+ state.value.y = nextY;
103
+ }
104
+ const offset = pick(state.value, ["x", "y"]);
105
+ emit("update:offset", offset);
106
+ }
107
+ };
108
+ useEventListener("touchmove", onTouchMove, {
109
+ target: rootRef
110
+ });
111
+ const onTouchEnd = () => {
112
+ dragging.value = false;
113
+ nextTick(() => {
114
+ if (props.magnetic === "x") {
115
+ const nextX = closest([boundary.value.left, boundary.value.right], state.value.x);
116
+ state.value.x = nextX;
117
+ }
118
+ if (props.magnetic === "y") {
119
+ const nextY = closest([boundary.value.top, boundary.value.bottom], state.value.y);
120
+ state.value.y = nextY;
121
+ }
122
+ if (!touch.isTap.value) {
123
+ const offset = pick(state.value, ["x", "y"]);
124
+ emit("update:offset", offset);
125
+ if (prevX !== offset.x || prevY !== offset.y) {
126
+ emit("offsetChange", offset);
127
+ }
128
+ }
129
+ });
130
+ };
131
+ const onClick = (e) => {
132
+ if (touch.isTap.value)
133
+ emit("click", e);
134
+ };
135
+ onMounted(() => {
136
+ updateState();
137
+ nextTick(() => {
138
+ initialized = true;
139
+ });
140
+ });
141
+ watch([windowWidth, windowHeight, () => props.gap, () => props.offset], () => updateState(), {
142
+ deep: true
143
+ });
144
+ const show = ref(true);
145
+ onActivated(() => {
146
+ show.value = true;
147
+ });
148
+ onDeactivated(() => {
149
+ if (props.teleport) {
150
+ show.value = false;
151
+ }
152
+ });
153
+ return () => {
154
+ const Content = _withDirectives(_createVNode("div", {
155
+ "class": bem(),
156
+ "ref": rootRef,
157
+ "onTouchstartPassive": onTouchStart,
158
+ "onTouchend": onTouchEnd,
159
+ "onTouchcancel": onTouchEnd,
160
+ "onClick": onClick,
161
+ "style": rootStyle.value
162
+ }, [slots.default ? slots.default() : _createVNode(Icon, {
163
+ "name": props.icon,
164
+ "class": bem("icon")
165
+ }, null)]), [[_vShow, show.value]]);
166
+ return props.teleport ? _createVNode(Teleport, {
167
+ "to": props.teleport
168
+ }, {
169
+ default: () => [Content]
170
+ }) : Content;
171
+ };
172
+ }
173
+ });
174
+ export {
175
+ stdin_default as default,
176
+ floatingBubbleProps
177
+ };
@@ -0,0 +1 @@
1
+ :root{--van-floating-bubble-size: 48px;--van-floating-bubble-initial-gap: 24px;--van-floating-bubble-icon-size: 28px;--van-floating-bubble-background: var(--van-primary-color);--van-floating-bubble-color: var(--van-background-2);--van-floating-bubble-z-index: 999}.van-floating-bubble{position:fixed;left:0;top:0;right:var(--van-floating-bubble-initial-gap);bottom:var(--van-floating-bubble-initial-gap);width:var(--van-floating-bubble-size);height:var(--van-floating-bubble-size);box-sizing:border-box;display:flex;justify-content:center;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;background:var(--van-floating-bubble-background);color:var(--van-floating-bubble-color);border-radius:var(--van-radius-max);z-index:var(--van-floating-bubble-z-index);transition:transform .3s}.van-floating-bubble:active{opacity:.9}.van-floating-bubble__icon{font-size:var(--van-floating-bubble-icon-size)}
@@ -0,0 +1,63 @@
1
+ export declare const FloatingBubble: import("../utils").WithInstall<import("vue").DefineComponent<{
2
+ axis: {
3
+ type: import("vue").PropType<import("./FloatingBubble").FloatingBubbleAxis>;
4
+ default: import("./FloatingBubble").FloatingBubbleAxis;
5
+ };
6
+ magnetic: import("vue").PropType<import("./FloatingBubble").FloatingBubbleMagnetic>;
7
+ icon: StringConstructor;
8
+ gap: {
9
+ type: NumberConstructor;
10
+ default: number;
11
+ };
12
+ offset: {
13
+ type: import("vue").PropType<import("./FloatingBubble").FloatingBubbleOffset>;
14
+ default: () => {
15
+ x: number;
16
+ y: number;
17
+ };
18
+ };
19
+ teleport: {
20
+ type: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
21
+ default: string;
22
+ };
23
+ }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:offset" | "offsetChange")[], "click" | "update:offset" | "offsetChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
24
+ axis: {
25
+ type: import("vue").PropType<import("./FloatingBubble").FloatingBubbleAxis>;
26
+ default: import("./FloatingBubble").FloatingBubbleAxis;
27
+ };
28
+ magnetic: import("vue").PropType<import("./FloatingBubble").FloatingBubbleMagnetic>;
29
+ icon: StringConstructor;
30
+ gap: {
31
+ type: NumberConstructor;
32
+ default: number;
33
+ };
34
+ offset: {
35
+ type: import("vue").PropType<import("./FloatingBubble").FloatingBubbleOffset>;
36
+ default: () => {
37
+ x: number;
38
+ y: number;
39
+ };
40
+ };
41
+ teleport: {
42
+ type: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
43
+ default: string;
44
+ };
45
+ }>> & {
46
+ onClick?: ((...args: any[]) => any) | undefined;
47
+ "onUpdate:offset"?: ((...args: any[]) => any) | undefined;
48
+ onOffsetChange?: ((...args: any[]) => any) | undefined;
49
+ }, {
50
+ offset: import("./FloatingBubble").FloatingBubbleOffset;
51
+ teleport: string | import("vue").RendererElement | null | undefined;
52
+ gap: number;
53
+ axis: import("./FloatingBubble").FloatingBubbleAxis;
54
+ }, {}>>;
55
+ export default FloatingBubble;
56
+ export { floatingBubbleProps } from './FloatingBubble';
57
+ export type { FloatingBubbleProps, FloatingBubbleAxis, FloatingBubbleMagnetic, FloatingBubbleOffset, } from './FloatingBubble';
58
+ export type { FloatingBubbleThemeVars } from './types';
59
+ declare module 'vue' {
60
+ interface GlobalComponents {
61
+ FloatingBubble: typeof FloatingBubble;
62
+ }
63
+ }
@@ -0,0 +1,10 @@
1
+ import { withInstall } from "../utils/index.mjs";
2
+ import _FloatingBubble from "./FloatingBubble.mjs";
3
+ const FloatingBubble = withInstall(_FloatingBubble);
4
+ var stdin_default = FloatingBubble;
5
+ import { floatingBubbleProps } from "./FloatingBubble.mjs";
6
+ export {
7
+ FloatingBubble,
8
+ stdin_default as default,
9
+ floatingBubbleProps
10
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,4 @@
1
+ import "../../style/base.css";
2
+ import "../../badge/index.css";
3
+ import "../../icon/index.css";
4
+ import "../index.css";
@@ -0,0 +1,8 @@
1
+ export type FloatingBubbleThemeVars = {
2
+ floatingBubbleSize?: string;
3
+ floatingBubbleInitialGap?: string;
4
+ floatingBubbleIconSize?: string;
5
+ floatingBubbleBackground: string;
6
+ floatingBubbleColor?: string;
7
+ floatingBubbleZIndex?: number | string;
8
+ };
File without changes
@@ -1,7 +1,7 @@
1
1
  import { createVNode as _createVNode } from "vue";
2
2
  import { computed, defineComponent, ref, watch } from "vue";
3
- import { addUnit, createNamespace, makeArrayProp, makeNumericProp, truthProp } from "../utils/index.mjs";
4
- import { useWindowSize } from "@vant/use";
3
+ import { addUnit, closest, createNamespace, makeArrayProp, makeNumericProp, truthProp } from "../utils/index.mjs";
4
+ import { useWindowSize, useEventListener } from "@vant/use";
5
5
  import { useLockScroll } from "../composables/use-lock-scroll.mjs";
6
6
  import { useTouch } from "../composables/use-touch.mjs";
7
7
  import { useSyncPropRef } from "../composables/use-sync-prop-ref.mjs";
@@ -56,7 +56,6 @@ var stdin_default = defineComponent({
56
56
  }
57
57
  return moveY;
58
58
  };
59
- const closest = (arr, target) => arr.reduce((pre, cur) => Math.abs(pre - target) < Math.abs(cur - target) ? pre : cur);
60
59
  let startY;
61
60
  const touch = useTouch();
62
61
  const onTouchstart = (e) => {
@@ -97,6 +96,9 @@ var stdin_default = defineComponent({
97
96
  immediate: true
98
97
  });
99
98
  useLockScroll(rootRef, () => true);
99
+ useEventListener("touchmove", onTouchmove, {
100
+ target: rootRef
101
+ });
100
102
  return () => {
101
103
  var _a;
102
104
  return _createVNode("div", {
@@ -106,7 +108,6 @@ var stdin_default = defineComponent({
106
108
  "ref": rootRef,
107
109
  "style": rootStyle.value,
108
110
  "onTouchstartPassive": onTouchstart,
109
- "onTouchmove": onTouchmove,
110
111
  "onTouchend": onTouchend,
111
112
  "onTouchcancel": onTouchend
112
113
  }, [_createVNode("div", {
@@ -1,4 +1,3 @@
1
- import { FloatingPanelProps } from './FloatingPanel';
2
1
  export declare const FloatingPanel: import("../utils").WithInstall<import("vue").DefineComponent<{
3
2
  height: {
4
3
  type: (NumberConstructor | StringConstructor)[];
@@ -52,7 +51,9 @@ export declare const FloatingPanel: import("../utils").WithInstall<import("vue")
52
51
  contentDraggable: boolean;
53
52
  }, {}>>;
54
53
  export default FloatingPanel;
55
- export type { FloatingPanelProps };
54
+ export { floatingPanelProps } from './FloatingPanel';
55
+ export type { FloatingPanelProps } from './FloatingPanel';
56
+ export type { FloatingPanelThemeVars } from './types';
56
57
  declare module 'vue' {
57
58
  interface GlobalComponents {
58
59
  VanFloatingPanel: typeof FloatingPanel;
@@ -2,7 +2,9 @@ import { withInstall } from "../utils/index.mjs";
2
2
  import _FloatingPanel from "./FloatingPanel.mjs";
3
3
  const FloatingPanel = withInstall(_FloatingPanel);
4
4
  var stdin_default = FloatingPanel;
5
+ import { floatingPanelProps } from "./FloatingPanel.mjs";
5
6
  export {
6
7
  FloatingPanel,
7
- stdin_default as default
8
+ stdin_default as default,
9
+ floatingPanelProps
8
10
  };
@@ -0,0 +1,9 @@
1
+ export type FloatingPanelThemeVars = {
2
+ floatingPanelBorderRadius?: string;
3
+ floatingPanelHeaderHeight?: string;
4
+ floatingPanelZIndex?: number | string;
5
+ floatingPanelBackground?: string;
6
+ floatingPanelBarWidth?: string;
7
+ floatingPanelBarHeight?: string;
8
+ floatingPanelBarColor?: string;
9
+ };
File without changes
@@ -1,6 +1,6 @@
1
1
  import { createVNode as _createVNode } from "vue";
2
2
  import { ref, watch, computed, reactive, defineComponent } from "vue";
3
- import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp, LONG_PRESS_START_TIME } from "../utils/index.mjs";
3
+ import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp, LONG_PRESS_START_TIME, TAP_OFFSET } from "../utils/index.mjs";
4
4
  import { useTouch } from "../composables/use-touch.mjs";
5
5
  import { raf, useEventListener, useRect } from "@vant/use";
6
6
  import { Image } from "../image/index.mjs";
@@ -192,7 +192,6 @@ var stdin_default = defineComponent({
192
192
  } = touch;
193
193
  const deltaTime = Date.now() - touchStartTime;
194
194
  const TAP_TIME = 250;
195
- const TAP_OFFSET = 5;
196
195
  if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) {
197
196
  if (deltaTime < TAP_TIME) {
198
197
  if (doubleTapTimer) {
package/es/index.d.ts CHANGED
@@ -35,6 +35,7 @@ export * from "./dropdown-item";
35
35
  export * from "./dropdown-menu";
36
36
  export * from "./empty";
37
37
  export * from "./field";
38
+ export * from "./floating-bubble";
38
39
  export * from "./floating-panel";
39
40
  export * from "./form";
40
41
  export * from "./grid";
@@ -64,6 +65,7 @@ export * from "./pull-refresh";
64
65
  export * from "./radio";
65
66
  export * from "./radio-group";
66
67
  export * from "./rate";
68
+ export * from "./rolling-text";
67
69
  export * from "./row";
68
70
  export * from "./search";
69
71
  export * from "./share-sheet";
@@ -103,4 +105,4 @@ declare namespace _default {
103
105
  }
104
106
  export default _default;
105
107
  export function install(app: any): void;
106
- export const version: "4.5.0";
108
+ export const version: "4.6.0";
package/es/index.mjs CHANGED
@@ -35,6 +35,7 @@ import { DropdownItem } from "./dropdown-item/index.mjs";
35
35
  import { DropdownMenu } from "./dropdown-menu/index.mjs";
36
36
  import { Empty } from "./empty/index.mjs";
37
37
  import { Field } from "./field/index.mjs";
38
+ import { FloatingBubble } from "./floating-bubble/index.mjs";
38
39
  import { FloatingPanel } from "./floating-panel/index.mjs";
39
40
  import { Form } from "./form/index.mjs";
40
41
  import { Grid } from "./grid/index.mjs";
@@ -63,6 +64,7 @@ import { PullRefresh } from "./pull-refresh/index.mjs";
63
64
  import { Radio } from "./radio/index.mjs";
64
65
  import { RadioGroup } from "./radio-group/index.mjs";
65
66
  import { Rate } from "./rate/index.mjs";
67
+ import { RollingText } from "./rolling-text/index.mjs";
66
68
  import { Row } from "./row/index.mjs";
67
69
  import { Search } from "./search/index.mjs";
68
70
  import { ShareSheet } from "./share-sheet/index.mjs";
@@ -96,7 +98,7 @@ import { Toast } from "./toast/index.mjs";
96
98
  import { TreeSelect } from "./tree-select/index.mjs";
97
99
  import { Uploader } from "./uploader/index.mjs";
98
100
  import { Watermark } from "./watermark/index.mjs";
99
- const version = "4.5.0";
101
+ const version = "4.6.0";
100
102
  function install(app) {
101
103
  const components = [
102
104
  ActionBar,
@@ -136,6 +138,7 @@ function install(app) {
136
138
  DropdownMenu,
137
139
  Empty,
138
140
  Field,
141
+ FloatingBubble,
139
142
  FloatingPanel,
140
143
  Form,
141
144
  Grid,
@@ -164,6 +167,7 @@ function install(app) {
164
167
  Radio,
165
168
  RadioGroup,
166
169
  Rate,
170
+ RollingText,
167
171
  Row,
168
172
  Search,
169
173
  ShareSheet,
@@ -243,6 +247,7 @@ export * from "./dropdown-item/index.mjs";
243
247
  export * from "./dropdown-menu/index.mjs";
244
248
  export * from "./empty/index.mjs";
245
249
  export * from "./field/index.mjs";
250
+ export * from "./floating-bubble/index.mjs";
246
251
  export * from "./floating-panel/index.mjs";
247
252
  export * from "./form/index.mjs";
248
253
  export * from "./grid/index.mjs";
@@ -272,6 +277,7 @@ export * from "./pull-refresh/index.mjs";
272
277
  export * from "./radio/index.mjs";
273
278
  export * from "./radio-group/index.mjs";
274
279
  export * from "./rate/index.mjs";
280
+ export * from "./rolling-text/index.mjs";
275
281
  export * from "./row/index.mjs";
276
282
  export * from "./search/index.mjs";
277
283
  export * from "./share-sheet/index.mjs";