@v-c/picker 0.0.5 → 0.0.7

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 (7) hide show
  1. package/dist/PickerInput/Popup/index.cjs +33 -35
  2. package/dist/PickerInput/Popup/index.js +34 -36
  3. package/dist/PickerPanel/TimePanel/TimePanelBody/useScrollTo.cjs +0 -1
  4. package/dist/PickerPanel/TimePanel/TimePanelBody/useScrollTo.js +0 -1
  5. package/dist/PickerTrigger/index.cjs +23 -21
  6. package/dist/PickerTrigger/index.js +23 -21
  7. package/package.json +4 -3
package/dist/PickerInput/Popup/index.cjs CHANGED
@@ -10,6 +10,7 @@ const require_PopupPanel = require("./PopupPanel.cjs");
10
10
  const require_PresetPanel = require("./PresetPanel.cjs");
11
11
  let vue = require("vue");
12
12
  let _v_c_util = require("@v-c/util");
13
+ let _v_c_resize_observer = require("@v-c/resize-observer");
13
14
  var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
14
15
  const activeInfo = (0, vue.computed)(() => props.activeInfo || [
15
16
  0,
@@ -21,56 +22,53 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
21
22
  const rtl = (0, vue.computed)(() => props.direction === "rtl");
22
23
  const arrowRef = (0, vue.ref)();
23
24
  const wrapperRef = (0, vue.ref)();
25
+ const containerRef = (0, vue.ref)();
24
26
  const containerWidth = (0, vue.ref)(0);
25
27
  const containerOffset = (0, vue.ref)(0);
26
28
  const arrowOffset = (0, vue.ref)(0);
27
- const domRef = (0, vue.shallowRef)();
28
29
  const onResize = (info) => {
29
30
  if (info.width) containerWidth.value = info.width;
30
31
  };
31
- (0, vue.onMounted)(() => {
32
- if (domRef.value) {
33
- const observer = new ResizeObserver((entries) => {
34
- const entry = entries[0];
35
- onResize(entry, domRef.value);
36
- });
37
- observer.observe(domRef.value);
38
- (0, vue.onUnmounted)(() => {
39
- observer.disconnect();
40
- });
41
- }
32
+ const rangeEnabled = (0, vue.ref)(props.range);
33
+ (0, vue.watch)(() => props.range, (val) => {
34
+ rangeEnabled.value = val;
42
35
  });
36
+ (0, _v_c_resize_observer.useResizeObserver)(rangeEnabled, containerRef, onResize);
43
37
  const retryTimes = (0, vue.ref)(0);
44
- (0, vue.watch)(() => activeInfo.value[0], () => {
45
- retryTimes.value = 10;
46
- }, {
47
- immediate: true,
48
- flush: "post"
49
- });
50
- (0, vue.watch)([
51
- retryTimes,
52
- rtl,
53
- activeInfo,
54
- () => props.range
55
- ], () => {
38
+ const calculateOffsets = () => {
56
39
  const [activeInputLeft, activeInputRight, selectorWidth] = activeInfo.value;
57
40
  if (props.range && wrapperRef.value) {
58
41
  const arrowWidth = arrowRef.value?.offsetWidth || 0;
59
42
  const wrapperRect = wrapperRef.value.getBoundingClientRect();
60
43
  if (!wrapperRect.height || wrapperRect.right < 0) {
61
- retryTimes.value = Math.max(0, retryTimes.value - 1);
44
+ if (retryTimes.value > 0) {
45
+ retryTimes.value--;
46
+ requestAnimationFrame(() => {
47
+ calculateOffsets();
48
+ });
49
+ }
62
50
  return;
63
51
  }
64
- arrowOffset.value = (rtl ? activeInputRight - arrowWidth : activeInputLeft) - wrapperRect.left;
65
- if (containerWidth && containerWidth.value < selectorWidth) {
66
- const offset = rtl ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth.value) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth.value;
52
+ arrowOffset.value = (rtl.value ? activeInputRight - arrowWidth : activeInputLeft) - wrapperRect.left;
53
+ if (containerWidth.value && containerWidth.value < selectorWidth) {
54
+ const offset = rtl.value ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth.value) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth.value;
67
55
  containerOffset.value = Math.max(0, offset);
68
56
  } else containerOffset.value = 0;
69
57
  }
70
- }, {
71
- immediate: true,
72
- flush: "post"
73
- });
58
+ };
59
+ (0, vue.watch)(() => props.activeInfo, async () => {
60
+ retryTimes.value = 10;
61
+ await (0, vue.nextTick)();
62
+ calculateOffsets();
63
+ }, { immediate: true });
64
+ (0, vue.watch)([
65
+ rtl,
66
+ containerWidth,
67
+ () => props.range
68
+ ], async () => {
69
+ await (0, vue.nextTick)();
70
+ calculateOffsets();
71
+ }, { flush: "post" });
74
72
  function filterEmpty(list) {
75
73
  return list.filter((item) => item);
76
74
  }
@@ -114,13 +112,13 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
114
112
  const marginLeft = "marginLeft";
115
113
  const marginRight = "marginRight";
116
114
  let renderNode = (0, vue.createVNode)("div", {
117
- "ref": domRef,
115
+ "ref": range ? containerRef : void 0,
118
116
  "onMousedown": onPanelMouseDown,
119
117
  "tabindex": -1,
120
118
  "class": (0, _v_c_util.clsx)(containerPrefixCls, `${ctx.value.prefixCls}-${internalMode}-panel-container`, classNames?.popup?.container),
121
119
  "style": {
122
- [rtl ? marginRight : marginLeft]: containerOffset,
123
- [rtl ? marginLeft : marginRight]: "auto",
120
+ [rtl.value ? marginRight : marginLeft]: `${containerOffset.value}px`,
121
+ [rtl.value ? marginLeft : marginRight]: "auto",
124
122
  ...styles?.popup?.container
125
123
  },
126
124
  "onFocusin": onPanelFocusIn,
package/dist/PickerInput/Popup/index.js CHANGED
@@ -3,8 +3,9 @@ import { toArray } from "../../utils/miscUtil.js";
3
3
  import Footer_default from "./Footer.js";
4
4
  import PopupPanel_default from "./PopupPanel.js";
5
5
  import PresetPanel_default from "./PresetPanel.js";
6
- import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
6
+ import { computed, createVNode, defineComponent, mergeProps, nextTick, ref, watch } from "vue";
7
7
  import { clsx, omit } from "@v-c/util";
8
+ import { useResizeObserver } from "@v-c/resize-observer";
8
9
  var Popup_default = /* @__PURE__ */ defineComponent((props) => {
9
10
  const activeInfo = computed(() => props.activeInfo || [
10
11
  0,
@@ -16,56 +17,53 @@ var Popup_default = /* @__PURE__ */ defineComponent((props) => {
16
17
  const rtl = computed(() => props.direction === "rtl");
17
18
  const arrowRef = ref();
18
19
  const wrapperRef = ref();
20
+ const containerRef = ref();
19
21
  const containerWidth = ref(0);
20
22
  const containerOffset = ref(0);
21
23
  const arrowOffset = ref(0);
22
- const domRef = shallowRef();
23
24
  const onResize = (info) => {
24
25
  if (info.width) containerWidth.value = info.width;
25
26
  };
26
- onMounted(() => {
27
- if (domRef.value) {
28
- const observer = new ResizeObserver((entries) => {
29
- const entry = entries[0];
30
- onResize(entry, domRef.value);
31
- });
32
- observer.observe(domRef.value);
33
- onUnmounted(() => {
34
- observer.disconnect();
35
- });
36
- }
27
+ const rangeEnabled = ref(props.range);
28
+ watch(() => props.range, (val) => {
29
+ rangeEnabled.value = val;
37
30
  });
31
+ useResizeObserver(rangeEnabled, containerRef, onResize);
38
32
  const retryTimes = ref(0);
39
- watch(() => activeInfo.value[0], () => {
40
- retryTimes.value = 10;
41
- }, {
42
- immediate: true,
43
- flush: "post"
44
- });
45
- watch([
46
- retryTimes,
47
- rtl,
48
- activeInfo,
49
- () => props.range
50
- ], () => {
33
+ const calculateOffsets = () => {
51
34
  const [activeInputLeft, activeInputRight, selectorWidth] = activeInfo.value;
52
35
  if (props.range && wrapperRef.value) {
53
36
  const arrowWidth = arrowRef.value?.offsetWidth || 0;
54
37
  const wrapperRect = wrapperRef.value.getBoundingClientRect();
55
38
  if (!wrapperRect.height || wrapperRect.right < 0) {
56
- retryTimes.value = Math.max(0, retryTimes.value - 1);
39
+ if (retryTimes.value > 0) {
40
+ retryTimes.value--;
41
+ requestAnimationFrame(() => {
42
+ calculateOffsets();
43
+ });
44
+ }
57
45
  return;
58
46
  }
59
- arrowOffset.value = (rtl ? activeInputRight - arrowWidth : activeInputLeft) - wrapperRect.left;
60
- if (containerWidth && containerWidth.value < selectorWidth) {
61
- const offset = rtl ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth.value) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth.value;
47
+ arrowOffset.value = (rtl.value ? activeInputRight - arrowWidth : activeInputLeft) - wrapperRect.left;
48
+ if (containerWidth.value && containerWidth.value < selectorWidth) {
49
+ const offset = rtl.value ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth.value) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth.value;
62
50
  containerOffset.value = Math.max(0, offset);
63
51
  } else containerOffset.value = 0;
64
52
  }
65
- }, {
66
- immediate: true,
67
- flush: "post"
68
- });
53
+ };
54
+ watch(() => props.activeInfo, async () => {
55
+ retryTimes.value = 10;
56
+ await nextTick();
57
+ calculateOffsets();
58
+ }, { immediate: true });
59
+ watch([
60
+ rtl,
61
+ containerWidth,
62
+ () => props.range
63
+ ], async () => {
64
+ await nextTick();
65
+ calculateOffsets();
66
+ }, { flush: "post" });
69
67
  function filterEmpty(list) {
70
68
  return list.filter((item) => item);
71
69
  }
@@ -109,13 +107,13 @@ var Popup_default = /* @__PURE__ */ defineComponent((props) => {
109
107
  const marginLeft = "marginLeft";
110
108
  const marginRight = "marginRight";
111
109
  let renderNode = createVNode("div", {
112
- "ref": domRef,
110
+ "ref": range ? containerRef : void 0,
113
111
  "onMousedown": onPanelMouseDown,
114
112
  "tabindex": -1,
115
113
  "class": clsx(containerPrefixCls, `${ctx.value.prefixCls}-${internalMode}-panel-container`, classNames?.popup?.container),
116
114
  "style": {
117
- [rtl ? marginRight : marginLeft]: containerOffset,
118
- [rtl ? marginLeft : marginRight]: "auto",
115
+ [rtl.value ? marginRight : marginLeft]: `${containerOffset.value}px`,
116
+ [rtl.value ? marginLeft : marginRight]: "auto",
119
117
  ...styles?.popup?.container
120
118
  },
121
119
  "onFocusin": onPanelFocusIn,
package/dist/PickerPanel/TimePanel/TimePanelBody/useScrollTo.cjs CHANGED
@@ -20,7 +20,6 @@ function useScrollTo(ulRef, value) {
20
20
  const startScroll = () => {
21
21
  const ul = (0, vue.unref)(ulRef);
22
22
  const val = (0, vue.unref)(value);
23
- console.log(val, "Ss");
24
23
  scrollDistRef.value = null;
25
24
  scrollRafTimesRef.value = 0;
26
25
  if (ul) {
package/dist/PickerPanel/TimePanel/TimePanelBody/useScrollTo.js CHANGED
@@ -14,7 +14,6 @@ function useScrollTo(ulRef, value) {
14
14
  const startScroll = () => {
15
15
  const ul = unref(ulRef);
16
16
  const val = unref(value);
17
- console.log(val, "Ss");
18
17
  scrollDistRef.value = null;
19
18
  scrollRafTimesRef.value = 0;
20
19
  if (ul) {
package/dist/PickerTrigger/index.cjs CHANGED
@@ -47,27 +47,29 @@ var PickerTrigger = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots })
47
47
  const ctx = require_context.usePickerContext();
48
48
  const dropdownPrefixCls = (0, vue.computed)(() => `${ctx.value.prefixCls}-dropdown`);
49
49
  const realPlacement = (0, vue.computed)(() => require_uiUtil.getRealPlacement(props.placement, props.direction === "rtl"));
50
- return () => (0, vue.createVNode)(_v_c_trigger.default, {
51
- "showAction": [],
52
- "hideAction": ["click"],
53
- "popupPlacement": realPlacement.value,
54
- "builtinPlacements": props.builtinPlacements || BUILT_IN_PLACEMENTS,
55
- "prefixCls": dropdownPrefixCls.value,
56
- "popupMotion": props.transitionName ? { motionName: props.transitionName } : void 0,
57
- "popup": props.popupElement,
58
- "popupAlign": props.popupAlign,
59
- "popupVisible": props.visible,
60
- "popupClassName": (0, _v_c_util.clsx)(props.popupClassName, {
61
- [`${dropdownPrefixCls.value}-range`]: props.range,
62
- [`${dropdownPrefixCls.value}-rtl`]: props.direction === "rtl"
63
- }),
64
- "popupStyle": props.popupStyle,
65
- "stretch": "minWidth",
66
- "getPopupContainer": props.getPopupContainer,
67
- "onPopupVisibleChange": (nextVisible) => {
68
- if (!nextVisible) props.onClose?.();
69
- }
70
- }, { default: () => [slots.default?.()] });
50
+ return () => {
51
+ return (0, vue.createVNode)(_v_c_trigger.default, {
52
+ "showAction": [],
53
+ "hideAction": ["click"],
54
+ "popupPlacement": realPlacement.value,
55
+ "builtinPlacements": props.builtinPlacements || BUILT_IN_PLACEMENTS,
56
+ "prefixCls": dropdownPrefixCls.value,
57
+ "popupMotion": props.transitionName ? { motionName: props.transitionName } : void 0,
58
+ "popup": props.popupElement,
59
+ "popupAlign": props.popupAlign,
60
+ "popupVisible": props.visible,
61
+ "popupClassName": (0, _v_c_util.clsx)(props.popupClassName, {
62
+ [`${dropdownPrefixCls.value}-range`]: props.range,
63
+ [`${dropdownPrefixCls.value}-rtl`]: props.direction === "rtl"
64
+ }),
65
+ "popupStyle": props.popupStyle,
66
+ "stretch": "minWidth",
67
+ "getPopupContainer": props.getPopupContainer,
68
+ "onPopupVisibleChange": (nextVisible) => {
69
+ if (!nextVisible) props.onClose?.();
70
+ }
71
+ }, { default: () => [slots.default?.()] });
72
+ };
71
73
  }, {
72
74
  props: {
73
75
  popupElement: {
package/dist/PickerTrigger/index.js CHANGED
@@ -41,27 +41,29 @@ var PickerTrigger_default = /* @__PURE__ */ defineComponent((props, { slots }) =
41
41
  const ctx = usePickerContext();
42
42
  const dropdownPrefixCls = computed(() => `${ctx.value.prefixCls}-dropdown`);
43
43
  const realPlacement = computed(() => getRealPlacement(props.placement, props.direction === "rtl"));
44
- return () => createVNode(Trigger, {
45
- "showAction": [],
46
- "hideAction": ["click"],
47
- "popupPlacement": realPlacement.value,
48
- "builtinPlacements": props.builtinPlacements || BUILT_IN_PLACEMENTS,
49
- "prefixCls": dropdownPrefixCls.value,
50
- "popupMotion": props.transitionName ? { motionName: props.transitionName } : void 0,
51
- "popup": props.popupElement,
52
- "popupAlign": props.popupAlign,
53
- "popupVisible": props.visible,
54
- "popupClassName": clsx(props.popupClassName, {
55
- [`${dropdownPrefixCls.value}-range`]: props.range,
56
- [`${dropdownPrefixCls.value}-rtl`]: props.direction === "rtl"
57
- }),
58
- "popupStyle": props.popupStyle,
59
- "stretch": "minWidth",
60
- "getPopupContainer": props.getPopupContainer,
61
- "onPopupVisibleChange": (nextVisible) => {
62
- if (!nextVisible) props.onClose?.();
63
- }
64
- }, { default: () => [slots.default?.()] });
44
+ return () => {
45
+ return createVNode(Trigger, {
46
+ "showAction": [],
47
+ "hideAction": ["click"],
48
+ "popupPlacement": realPlacement.value,
49
+ "builtinPlacements": props.builtinPlacements || BUILT_IN_PLACEMENTS,
50
+ "prefixCls": dropdownPrefixCls.value,
51
+ "popupMotion": props.transitionName ? { motionName: props.transitionName } : void 0,
52
+ "popup": props.popupElement,
53
+ "popupAlign": props.popupAlign,
54
+ "popupVisible": props.visible,
55
+ "popupClassName": clsx(props.popupClassName, {
56
+ [`${dropdownPrefixCls.value}-range`]: props.range,
57
+ [`${dropdownPrefixCls.value}-rtl`]: props.direction === "rtl"
58
+ }),
59
+ "popupStyle": props.popupStyle,
60
+ "stretch": "minWidth",
61
+ "getPopupContainer": props.getPopupContainer,
62
+ "onPopupVisibleChange": (nextVisible) => {
63
+ if (!nextVisible) props.onClose?.();
64
+ }
65
+ }, { default: () => [slots.default?.()] });
66
+ };
65
67
  }, {
66
68
  props: {
67
69
  popupElement: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@v-c/picker",
3
3
  "type": "module",
4
- "version": "0.0.5",
4
+ "version": "0.0.7",
5
5
  "description": "picker ui component for vue",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -72,9 +72,10 @@
72
72
  }
73
73
  },
74
74
  "dependencies": {
75
+ "@v-c/util": "^1.0.8",
76
+ "@v-c/resize-observer": "^1.0.7",
75
77
  "@v-c/overflow": "^1.0.1",
76
- "@v-c/util": "^1.0.7",
77
- "@v-c/trigger": "^1.0.2"
78
+ "@v-c/trigger": "^1.0.5"
78
79
  },
79
80
  "devDependencies": {
80
81
  "@types/luxon": "^3.7.1"