@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.
- package/dist/PickerInput/Popup/index.cjs +36 -35
- package/dist/PickerInput/Popup/index.js +37 -36
- package/dist/PickerInput/RangePicker.cjs +4 -2
- package/dist/PickerInput/RangePicker.js +5 -3
- package/dist/PickerInput/hooks/useDelayState.cjs +3 -1
- package/dist/PickerInput/hooks/useDelayState.js +4 -2
- package/dist/PickerPanel/TimePanel/TimePanelBody/useScrollTo.cjs +0 -1
- package/dist/PickerPanel/TimePanel/TimePanelBody/useScrollTo.js +0 -1
- package/dist/PickerPanel/TimePanel/index.cjs +1 -1
- package/dist/PickerPanel/TimePanel/index.js +1 -1
- package/dist/PickerTrigger/index.cjs +23 -21
- package/dist/PickerTrigger/index.js +23 -21
- package/package.json +4 -3
|
@@ -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
|
-
|
|
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.
|
|
32
|
-
|
|
33
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
72
|
-
|
|
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":
|
|
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,
|
|
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
|
-
|
|
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
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
67
|
-
|
|
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":
|
|
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
|
-
|
|
174
|
-
|
|
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
|
-
|
|
166
|
-
|
|
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)
|
|
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)
|
|
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) => {
|
|
@@ -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 () =>
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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 () =>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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
|
+
"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/
|
|
77
|
-
"@v-c/
|
|
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"
|