@v-c/picker 0.0.5 → 0.0.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.
Files changed (7) hide show
  1. package/dist/PickerInput/Popup/index.cjs +36 -35
  2. package/dist/PickerInput/Popup/index.js +37 -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,56 @@ 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)();
29
+ (0, vue.computed)(() => activeInfo.value[0]);
30
+ (0, vue.computed)(() => activeInfo.value[1]);
31
+ (0, vue.computed)(() => activeInfo.value[2]);
28
32
  const onResize = (info) => {
29
33
  if (info.width) containerWidth.value = info.width;
30
34
  };
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
- }
35
+ const rangeEnabled = (0, vue.ref)(props.range);
36
+ (0, vue.watch)(() => props.range, (val) => {
37
+ rangeEnabled.value = val;
42
38
  });
39
+ (0, _v_c_resize_observer.useResizeObserver)(rangeEnabled, containerRef, onResize);
43
40
  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
- ], () => {
41
+ const calculateOffsets = () => {
56
42
  const [activeInputLeft, activeInputRight, selectorWidth] = activeInfo.value;
57
43
  if (props.range && wrapperRef.value) {
58
44
  const arrowWidth = arrowRef.value?.offsetWidth || 0;
59
45
  const wrapperRect = wrapperRef.value.getBoundingClientRect();
60
46
  if (!wrapperRect.height || wrapperRect.right < 0) {
61
- retryTimes.value = Math.max(0, retryTimes.value - 1);
47
+ if (retryTimes.value > 0) {
48
+ retryTimes.value--;
49
+ requestAnimationFrame(() => {
50
+ calculateOffsets();
51
+ });
52
+ }
62
53
  return;
63
54
  }
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;
55
+ arrowOffset.value = (rtl.value ? activeInputRight - arrowWidth : activeInputLeft) - wrapperRect.left;
56
+ if (containerWidth.value && containerWidth.value < selectorWidth) {
57
+ const offset = rtl.value ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth.value) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth.value;
67
58
  containerOffset.value = Math.max(0, offset);
68
59
  } else containerOffset.value = 0;
69
60
  }
70
- }, {
71
- immediate: true,
72
- flush: "post"
73
- });
61
+ };
62
+ (0, vue.watch)(() => props.activeInfo, async () => {
63
+ retryTimes.value = 10;
64
+ await (0, vue.nextTick)();
65
+ calculateOffsets();
66
+ }, { immediate: true });
67
+ (0, vue.watch)([
68
+ rtl,
69
+ containerWidth,
70
+ () => props.range
71
+ ], async () => {
72
+ await (0, vue.nextTick)();
73
+ calculateOffsets();
74
+ }, { flush: "post" });
74
75
  function filterEmpty(list) {
75
76
  return list.filter((item) => item);
76
77
  }
@@ -114,13 +115,13 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
114
115
  const marginLeft = "marginLeft";
115
116
  const marginRight = "marginRight";
116
117
  let renderNode = (0, vue.createVNode)("div", {
117
- "ref": domRef,
118
+ "ref": range ? containerRef : void 0,
118
119
  "onMousedown": onPanelMouseDown,
119
120
  "tabindex": -1,
120
121
  "class": (0, _v_c_util.clsx)(containerPrefixCls, `${ctx.value.prefixCls}-${internalMode}-panel-container`, classNames?.popup?.container),
121
122
  "style": {
122
- [rtl ? marginRight : marginLeft]: containerOffset,
123
- [rtl ? marginLeft : marginRight]: "auto",
123
+ [rtl.value ? marginRight : marginLeft]: `${containerOffset.value}px`,
124
+ [rtl.value ? marginLeft : marginRight]: "auto",
124
125
  ...styles?.popup?.container
125
126
  },
126
127
  "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,56 @@ 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();
24
+ computed(() => activeInfo.value[0]);
25
+ computed(() => activeInfo.value[1]);
26
+ computed(() => activeInfo.value[2]);
23
27
  const onResize = (info) => {
24
28
  if (info.width) containerWidth.value = info.width;
25
29
  };
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
- }
30
+ const rangeEnabled = ref(props.range);
31
+ watch(() => props.range, (val) => {
32
+ rangeEnabled.value = val;
37
33
  });
34
+ useResizeObserver(rangeEnabled, containerRef, onResize);
38
35
  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
- ], () => {
36
+ const calculateOffsets = () => {
51
37
  const [activeInputLeft, activeInputRight, selectorWidth] = activeInfo.value;
52
38
  if (props.range && wrapperRef.value) {
53
39
  const arrowWidth = arrowRef.value?.offsetWidth || 0;
54
40
  const wrapperRect = wrapperRef.value.getBoundingClientRect();
55
41
  if (!wrapperRect.height || wrapperRect.right < 0) {
56
- retryTimes.value = Math.max(0, retryTimes.value - 1);
42
+ if (retryTimes.value > 0) {
43
+ retryTimes.value--;
44
+ requestAnimationFrame(() => {
45
+ calculateOffsets();
46
+ });
47
+ }
57
48
  return;
58
49
  }
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;
50
+ arrowOffset.value = (rtl.value ? activeInputRight - arrowWidth : activeInputLeft) - wrapperRect.left;
51
+ if (containerWidth.value && containerWidth.value < selectorWidth) {
52
+ const offset = rtl.value ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth.value) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth.value;
62
53
  containerOffset.value = Math.max(0, offset);
63
54
  } else containerOffset.value = 0;
64
55
  }
65
- }, {
66
- immediate: true,
67
- flush: "post"
68
- });
56
+ };
57
+ watch(() => props.activeInfo, async () => {
58
+ retryTimes.value = 10;
59
+ await nextTick();
60
+ calculateOffsets();
61
+ }, { immediate: true });
62
+ watch([
63
+ rtl,
64
+ containerWidth,
65
+ () => props.range
66
+ ], async () => {
67
+ await nextTick();
68
+ calculateOffsets();
69
+ }, { flush: "post" });
69
70
  function filterEmpty(list) {
70
71
  return list.filter((item) => item);
71
72
  }
@@ -109,13 +110,13 @@ var Popup_default = /* @__PURE__ */ defineComponent((props) => {
109
110
  const marginLeft = "marginLeft";
110
111
  const marginRight = "marginRight";
111
112
  let renderNode = createVNode("div", {
112
- "ref": domRef,
113
+ "ref": range ? containerRef : void 0,
113
114
  "onMousedown": onPanelMouseDown,
114
115
  "tabindex": -1,
115
116
  "class": clsx(containerPrefixCls, `${ctx.value.prefixCls}-${internalMode}-panel-container`, classNames?.popup?.container),
116
117
  "style": {
117
- [rtl ? marginRight : marginLeft]: containerOffset,
118
- [rtl ? marginLeft : marginRight]: "auto",
118
+ [rtl.value ? marginRight : marginLeft]: `${containerOffset.value}px`,
119
+ [rtl.value ? marginLeft : marginRight]: "auto",
119
120
  ...styles?.popup?.container
120
121
  },
121
122
  "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.6",
5
5
  "description": "picker ui component for vue",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -73,8 +73,9 @@
73
73
  },
74
74
  "dependencies": {
75
75
  "@v-c/overflow": "^1.0.1",
76
- "@v-c/util": "^1.0.7",
77
- "@v-c/trigger": "^1.0.2"
76
+ "@v-c/util": "^1.0.8",
77
+ "@v-c/trigger": "^1.0.5",
78
+ "@v-c/resize-observer": "^1.0.6"
78
79
  },
79
80
  "devDependencies": {
80
81
  "@types/luxon": "^3.7.1"