@v-c/picker 0.0.4 → 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.
@@ -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,
@@ -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,
@@ -170,8 +170,10 @@ var RangePicker = /* @__PURE__ */ (0, vue.defineComponent)((props, { expose }) =
170
170
  const enabledIndex = disabled.value.findIndex((d) => !d);
171
171
  if (enabledIndex >= 0) selectorRef.value?.focus({ index: enabledIndex });
172
172
  }
173
- triggerOpen(true);
174
- onClick.value?.(event);
173
+ (0, vue.nextTick)(() => {
174
+ triggerOpen(true);
175
+ onClick.value?.(event);
176
+ });
175
177
  };
176
178
  const onSelectorClear = () => {
177
179
  triggerSubmitChange(null);
@@ -15,7 +15,7 @@ import useRangeValue, { useInnerValue } from "./hooks/useRangeValue.js";
15
15
  import useShowNow from "./hooks/useShowNow.js";
16
16
  import Popup_default from "./Popup/index.js";
17
17
  import RangeSelector_default from "./Selector/RangeSelector.js";
18
- import { computed, createVNode, defineComponent, mergeProps, ref, shallowRef, watch } from "vue";
18
+ import { computed, createVNode, defineComponent, mergeProps, nextTick, ref, shallowRef, watch } from "vue";
19
19
  import { clsx } from "@v-c/util";
20
20
  import omit$1 from "@v-c/util/dist/omit";
21
21
  import pickAttrs from "@v-c/util/dist/pickAttrs";
@@ -162,8 +162,10 @@ var RangePicker_default = /* @__PURE__ */ defineComponent((props, { expose }) =>
162
162
  const enabledIndex = disabled.value.findIndex((d) => !d);
163
163
  if (enabledIndex >= 0) selectorRef.value?.focus({ index: enabledIndex });
164
164
  }
165
- triggerOpen(true);
166
- onClick.value?.(event);
165
+ nextTick(() => {
166
+ triggerOpen(true);
167
+ onClick.value?.(event);
168
+ });
167
169
  };
168
170
  const onSelectorClear = () => {
169
171
  triggerSubmitChange(null);
@@ -15,7 +15,9 @@ function useDelayState(value, defaultValue, onChange) {
15
15
  if (rafRef.value) _v_c_util_dist_raf.default.cancel(rafRef.value);
16
16
  };
17
17
  const doUpdate = () => {
18
- if (value.value === void 0) internalValue.value = nextValueRef.value;
18
+ if (value.value === void 0) (0, vue.nextTick)(() => {
19
+ internalValue.value = nextValueRef.value;
20
+ });
19
21
  if (onChange && state.value !== nextValueRef.value) onChange(nextValueRef.value);
20
22
  };
21
23
  const updateValue = (next, immediately) => {
@@ -1,4 +1,4 @@
1
- import { computed, onBeforeUnmount, ref, watch } from "vue";
1
+ import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
2
2
  import raf from "@v-c/util/dist/raf";
3
3
  function useDelayState(value, defaultValue, onChange) {
4
4
  const internalValue = ref(defaultValue);
@@ -9,7 +9,9 @@ function useDelayState(value, defaultValue, onChange) {
9
9
  if (rafRef.value) raf.cancel(rafRef.value);
10
10
  };
11
11
  const doUpdate = () => {
12
- if (value.value === void 0) internalValue.value = nextValueRef.value;
12
+ if (value.value === void 0) nextTick(() => {
13
+ internalValue.value = nextValueRef.value;
14
+ });
13
15
  if (onChange && state.value !== nextValueRef.value) onChange(nextValueRef.value);
14
16
  };
15
17
  const updateValue = (next, immediately) => {
@@ -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) {
@@ -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) {
@@ -17,7 +17,7 @@ var TimePanel = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
17
17
  }));
18
18
  return () => {
19
19
  const { prefixCls, value, locale, generateConfig, showTime } = props;
20
- const format = typeof showTime === "object" && showTime.format ? showTime.format : locale?.fieldTimeFormat || "HH:mm:ss";
20
+ const format = typeof showTime === "object" && showTime && showTime.format ? showTime.format : locale?.fieldTimeFormat || "HH:mm:ss";
21
21
  const panelPrefixCls = `${prefixCls}-time-panel`;
22
22
  return (0, vue.createVNode)("div", { "class": (0, _v_c_util.clsx)(panelPrefixCls) }, [(0, vue.createVNode)(require_PanelHeader.default, null, { default: () => [value ? require_dateUtil.formatValue(value, {
23
23
  locale,
@@ -12,7 +12,7 @@ var TimePanel_default = /* @__PURE__ */ defineComponent((props) => {
12
12
  }));
13
13
  return () => {
14
14
  const { prefixCls, value, locale, generateConfig, showTime } = props;
15
- const format = typeof showTime === "object" && showTime.format ? showTime.format : locale?.fieldTimeFormat || "HH:mm:ss";
15
+ const format = typeof showTime === "object" && showTime && showTime.format ? showTime.format : locale?.fieldTimeFormat || "HH:mm:ss";
16
16
  const panelPrefixCls = `${prefixCls}-time-panel`;
17
17
  return createVNode("div", { "class": clsx(panelPrefixCls) }, [createVNode(PanelHeader_default, null, { default: () => [value ? formatValue(value, {
18
18
  locale,
@@ -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: {
@@ -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.4",
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/trigger": "^1.0.2",
77
- "@v-c/util": "^1.0.6"
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"