@v-c/picker 1.1.3 → 1.2.1
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.js +2 -1
- package/dist/PickerInput/RangePicker.js +20 -3
- package/dist/PickerInput/Selector/Input.js +6 -2
- package/dist/PickerInput/Selector/RangeSelector.js +7 -0
- package/dist/PickerInput/Selector/SingleSelector/index.js +7 -0
- package/dist/PickerInput/Selector/hooks/useClearIcon.d.ts +1 -1
- package/dist/PickerInput/SinglePicker.js +17 -2
- package/dist/PickerInput/hooks/useRangeValue.js +2 -1
- package/dist/PickerPanel/TimePanel/TimePanelBody/TimeColumn.js +1 -2
- package/dist/PickerPanel/TimePanel/TimePanelBody/index.js +2 -1
- package/dist/PickerPanel/TimePanel/index.js +1 -2
- package/dist/PickerPanel/index.js +4 -1
- package/dist/generate/dayjs.js +1 -4
- package/dist/interface.d.ts +2 -0
- package/package.json +10 -5
|
@@ -45,7 +45,8 @@ var Popup = /* @__PURE__ */ defineComponent((props) => {
|
|
|
45
45
|
}
|
|
46
46
|
return;
|
|
47
47
|
}
|
|
48
|
-
|
|
48
|
+
const nextArrowOffset = (rtl.value ? activeInputRight - arrowWidth : activeInputLeft) - wrapperRect.left;
|
|
49
|
+
arrowOffset.value = nextArrowOffset;
|
|
49
50
|
if (containerWidth.value && containerWidth.value < selectorWidth) {
|
|
50
51
|
const offset = rtl.value ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth.value) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth.value;
|
|
51
52
|
containerOffset.value = Math.max(0, offset);
|
|
@@ -128,7 +128,9 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
128
128
|
if (!showTime.value) return null;
|
|
129
129
|
const { disabledTime } = showTime.value;
|
|
130
130
|
const proxyDisabledTime = disabledTime ? (date) => {
|
|
131
|
-
|
|
131
|
+
const range = getActiveRange(activeIndex.value);
|
|
132
|
+
const fromDate = getFromDate(calendarValue.value, activeIndexList.value, activeIndex.value);
|
|
133
|
+
return disabledTime(date, range, { from: fromDate });
|
|
132
134
|
} : void 0;
|
|
133
135
|
return {
|
|
134
136
|
...showTime.value,
|
|
@@ -198,6 +200,7 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
198
200
|
const onSelectorClear = () => {
|
|
199
201
|
triggerSubmitChange(null);
|
|
200
202
|
triggerOpen(false, { force: true });
|
|
203
|
+
fp.value.onClear?.();
|
|
201
204
|
};
|
|
202
205
|
const hoverSource = ref(null);
|
|
203
206
|
const internalHoverValues = ref(null);
|
|
@@ -238,7 +241,8 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
238
241
|
lastOperation("panel");
|
|
239
242
|
};
|
|
240
243
|
const onSelectorChange = (date, index) => {
|
|
241
|
-
|
|
244
|
+
const clone = fillCalendarValue(date, index);
|
|
245
|
+
triggerCalendarChange(clone);
|
|
242
246
|
};
|
|
243
247
|
const onSelectorInputChange = () => {
|
|
244
248
|
lastOperation("input");
|
|
@@ -256,7 +260,8 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
256
260
|
onKeyDown.value?.(event, preventDefault);
|
|
257
261
|
};
|
|
258
262
|
const onPanelSelect = (date) => {
|
|
259
|
-
|
|
263
|
+
const clone = fillIndex(calendarValue.value, activeIndex.value, date);
|
|
264
|
+
triggerCalendarChange(clone);
|
|
260
265
|
if (!needConfirm.value && !complexPicker.value && internalPicker.value === internalMode.value) triggerPartConfirm(date);
|
|
261
266
|
};
|
|
262
267
|
const onPopupClose = () => {
|
|
@@ -273,6 +278,7 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
273
278
|
...Object.keys(domProps),
|
|
274
279
|
"onChange",
|
|
275
280
|
"onCalendarChange",
|
|
281
|
+
"onClear",
|
|
276
282
|
"style",
|
|
277
283
|
"className",
|
|
278
284
|
"onPanelChange",
|
|
@@ -630,6 +636,10 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
630
636
|
required: false,
|
|
631
637
|
default: void 0
|
|
632
638
|
},
|
|
639
|
+
onClear: {
|
|
640
|
+
required: false,
|
|
641
|
+
default: void 0
|
|
642
|
+
},
|
|
633
643
|
onKeyDown: {
|
|
634
644
|
type: Function,
|
|
635
645
|
required: false,
|
|
@@ -773,6 +783,13 @@ var RangePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
773
783
|
default: void 0
|
|
774
784
|
},
|
|
775
785
|
class: {
|
|
786
|
+
type: [
|
|
787
|
+
Boolean,
|
|
788
|
+
null,
|
|
789
|
+
String,
|
|
790
|
+
Object,
|
|
791
|
+
Array
|
|
792
|
+
],
|
|
776
793
|
required: false,
|
|
777
794
|
default: void 0
|
|
778
795
|
},
|
|
@@ -75,7 +75,8 @@ var Input = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
|
|
|
75
75
|
};
|
|
76
76
|
const onFormatMouseUp = (event) => {
|
|
77
77
|
const { selectionStart: start } = event.target;
|
|
78
|
-
|
|
78
|
+
const closeMaskIndex = maskFormat.value.getMaskCellIndex(start);
|
|
79
|
+
focusCellIndex.value = closeMaskIndex;
|
|
79
80
|
forceSelectionSyncMark.value = {};
|
|
80
81
|
props.onMouseUp?.(event);
|
|
81
82
|
mouseDownRef.value = false;
|
|
@@ -158,7 +159,10 @@ var Input = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
|
|
|
158
159
|
focusCellText.value = "";
|
|
159
160
|
}
|
|
160
161
|
}
|
|
161
|
-
if (nextFillText !== null)
|
|
162
|
+
if (nextFillText !== null) {
|
|
163
|
+
const nextFocusValue = inputValue.value.slice(0, selectionStart.value) + leftPad(nextFillText, maskCellLen) + inputValue.value.slice(selectionEnd.value);
|
|
164
|
+
triggerInputChange(nextFocusValue.slice(0, props.format.length));
|
|
165
|
+
}
|
|
162
166
|
forceSelectionSyncMark.value = {};
|
|
163
167
|
};
|
|
164
168
|
const rafRef = ref();
|
|
@@ -334,6 +334,13 @@ var RangeSelector = /* @__PURE__ */ defineComponent((props, { attrs, expose }) =
|
|
|
334
334
|
default: void 0
|
|
335
335
|
},
|
|
336
336
|
class: {
|
|
337
|
+
type: [
|
|
338
|
+
Boolean,
|
|
339
|
+
null,
|
|
340
|
+
String,
|
|
341
|
+
Object,
|
|
342
|
+
Array
|
|
343
|
+
],
|
|
337
344
|
required: false,
|
|
338
345
|
default: void 0
|
|
339
346
|
},
|
|
@@ -313,6 +313,13 @@ var SingleSelector = /* @__PURE__ */ defineComponent((props, { attrs, expose })
|
|
|
313
313
|
default: void 0
|
|
314
314
|
},
|
|
315
315
|
class: {
|
|
316
|
+
type: [
|
|
317
|
+
Boolean,
|
|
318
|
+
null,
|
|
319
|
+
String,
|
|
320
|
+
Object,
|
|
321
|
+
Array
|
|
322
|
+
],
|
|
316
323
|
required: false,
|
|
317
324
|
default: void 0
|
|
318
325
|
},
|
|
@@ -11,7 +11,7 @@ export declare function fillClearIcon(prefixCls: string, allowClear?: boolean |
|
|
|
11
11
|
[key: string]: any;
|
|
12
12
|
}> | (string | number | boolean | void | import('vue').Component | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
13
13
|
[key: string]: any;
|
|
14
|
-
}> | null | undefined)[] |
|
|
14
|
+
}> | null | undefined)[] | null;
|
|
15
15
|
export default function useClearIcon(prefixCls: Ref<string>, allowClear?: Ref<boolean | {
|
|
16
16
|
clearIcon?: VueNode;
|
|
17
17
|
}>, clearIcon?: ComputedRef<VueNode>): ComputedRef<VueNode>;
|
|
@@ -181,6 +181,7 @@ var SinglePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
181
181
|
const onSelectorClear = () => {
|
|
182
182
|
triggerSubmitChange(null);
|
|
183
183
|
triggerOpen(false, { force: true });
|
|
184
|
+
fp.value.onClear?.();
|
|
184
185
|
};
|
|
185
186
|
const hoverSource = ref(null);
|
|
186
187
|
const internalHoverValue = ref(null);
|
|
@@ -205,7 +206,8 @@ var SinglePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
205
206
|
onSetHover(nextValue, "preset");
|
|
206
207
|
};
|
|
207
208
|
const onPresetSubmit = (nextValue) => {
|
|
208
|
-
|
|
209
|
+
const nextCalendarValues = multiple.value ? toggleDates(getCalendarValue.value, nextValue) : [nextValue];
|
|
210
|
+
if (triggerSubmitChange(nextCalendarValues) && !multiple.value) triggerOpen(false, { force: true });
|
|
209
211
|
};
|
|
210
212
|
const onNow = (now) => {
|
|
211
213
|
onPresetSubmit(now);
|
|
@@ -220,7 +222,8 @@ var SinglePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
220
222
|
const onPanelSelect = (date) => {
|
|
221
223
|
lastOperation("panel");
|
|
222
224
|
if (multiple.value && internalMode.value !== picker.value) return;
|
|
223
|
-
|
|
225
|
+
const nextValues = multiple.value ? toggleDates(getCalendarValue.value, date) : [date];
|
|
226
|
+
triggerCalendarChange(nextValues);
|
|
224
227
|
if (!needConfirm.value && !complexPicker.value && internalPicker.value === internalMode.value) triggerConfirm();
|
|
225
228
|
};
|
|
226
229
|
const onPopupClose = () => {
|
|
@@ -234,6 +237,7 @@ var SinglePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
234
237
|
...Object.keys(domProps),
|
|
235
238
|
"onChange",
|
|
236
239
|
"onCalendarChange",
|
|
240
|
+
"onClear",
|
|
237
241
|
"style",
|
|
238
242
|
"className",
|
|
239
243
|
"onPanelChange",
|
|
@@ -601,6 +605,10 @@ var SinglePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
601
605
|
required: false,
|
|
602
606
|
default: void 0
|
|
603
607
|
},
|
|
608
|
+
onClear: {
|
|
609
|
+
required: false,
|
|
610
|
+
default: void 0
|
|
611
|
+
},
|
|
604
612
|
onKeyDown: {
|
|
605
613
|
type: Function,
|
|
606
614
|
required: false,
|
|
@@ -744,6 +752,13 @@ var SinglePicker = /* @__PURE__ */ defineComponent((props, { expose }) => {
|
|
|
744
752
|
default: void 0
|
|
745
753
|
},
|
|
746
754
|
class: {
|
|
755
|
+
type: [
|
|
756
|
+
Boolean,
|
|
757
|
+
null,
|
|
758
|
+
String,
|
|
759
|
+
Object,
|
|
760
|
+
Array
|
|
761
|
+
],
|
|
747
762
|
required: false,
|
|
748
763
|
default: void 0
|
|
749
764
|
},
|
|
@@ -117,7 +117,8 @@ function useRangeValue(info, mergedValue, setInnerValue, getCalendarValue, trigg
|
|
|
117
117
|
return allPassed;
|
|
118
118
|
};
|
|
119
119
|
const flushSubmit = (index, needTriggerChange) => {
|
|
120
|
-
|
|
120
|
+
const nextSubmitValue = fillIndex(submitValue.value, index, getCalendarValue()[index]);
|
|
121
|
+
setSubmitValue(nextSubmitValue);
|
|
121
122
|
if (needTriggerChange) triggerSubmit();
|
|
122
123
|
};
|
|
123
124
|
const interactiveFinished = computed(() => !focused.value && !open.value);
|
|
@@ -55,9 +55,8 @@ var TimeColumn = /* @__PURE__ */ defineComponent((props) => {
|
|
|
55
55
|
const { prefixCls, cellRender, now, locale, classNames: panelClassNames, styles } = context.value;
|
|
56
56
|
const panelPrefixCls = `${prefixCls}-time-panel`;
|
|
57
57
|
const cellPrefixCls = `${prefixCls}-time-panel-cell`;
|
|
58
|
-
const columnPrefixCls = `${panelPrefixCls}-column`;
|
|
59
58
|
return createVNode("ul", {
|
|
60
|
-
"class":
|
|
59
|
+
"class": `${panelPrefixCls}-column`,
|
|
61
60
|
"ref": ulRef,
|
|
62
61
|
"data-type": type,
|
|
63
62
|
"onScroll": onInternalScroll
|
|
@@ -67,7 +67,8 @@ var TimePanelBody = /* @__PURE__ */ defineComponent((props) => {
|
|
|
67
67
|
}];
|
|
68
68
|
})();
|
|
69
69
|
const triggerChange = (nextDate) => {
|
|
70
|
-
|
|
70
|
+
const validateDate = getValidTime(nextDate);
|
|
71
|
+
onSelect(validateDate);
|
|
71
72
|
};
|
|
72
73
|
const triggerDateTmpl = (() => {
|
|
73
74
|
let tmpl = value.value || context.value.pickerValue || generateConfig.value.getNow();
|
|
@@ -14,8 +14,7 @@ var TimePanel = /* @__PURE__ */ defineComponent((props) => {
|
|
|
14
14
|
return () => {
|
|
15
15
|
const { prefixCls, value, locale, generateConfig, showTime } = props;
|
|
16
16
|
const format = typeof showTime === "object" && showTime && showTime.format ? showTime.format : locale?.fieldTimeFormat || "HH:mm:ss";
|
|
17
|
-
|
|
18
|
-
return createVNode("div", { "class": clsx(panelPrefixCls) }, [createVNode(PanelHeader, null, { default: () => [value ? formatValue(value, {
|
|
17
|
+
return createVNode("div", { "class": clsx(`${prefixCls}-time-panel`) }, [createVNode(PanelHeader, null, { default: () => [value ? formatValue(value, {
|
|
19
18
|
locale,
|
|
20
19
|
format,
|
|
21
20
|
generateConfig
|
|
@@ -73,7 +73,10 @@ var PickerPanel = /* @__PURE__ */ defineComponent((props, { attrs }) => {
|
|
|
73
73
|
};
|
|
74
74
|
const onInternalSelect = (newDate) => {
|
|
75
75
|
props.onSelect?.(newDate);
|
|
76
|
-
if (mergedMode.value === props.picker)
|
|
76
|
+
if (mergedMode.value === props.picker) {
|
|
77
|
+
const nextValues = props.multiple ? toggleDates(mergedValue.value, newDate) : [newDate];
|
|
78
|
+
triggerChange(nextValues);
|
|
79
|
+
}
|
|
77
80
|
};
|
|
78
81
|
const internalPickerValueState = ref(props.defaultPickerValue || mergedValue.value[0] || now.value);
|
|
79
82
|
const mergedPickerValue = computed(() => props.pickerValue !== void 0 ? props.pickerValue : internalPickerValueState.value);
|
package/dist/generate/dayjs.js
CHANGED
|
@@ -38,8 +38,6 @@ var localeMap = {
|
|
|
38
38
|
function parseLocale(locale) {
|
|
39
39
|
return localeMap[locale] || locale.split("_")[0];
|
|
40
40
|
}
|
|
41
|
-
/* istanbul ignore next */
|
|
42
|
-
function parseNoMatchNotice() {}
|
|
43
41
|
var generateConfig = {
|
|
44
42
|
getNow: () => {
|
|
45
43
|
const now = dayjs();
|
|
@@ -91,13 +89,12 @@ var generateConfig = {
|
|
|
91
89
|
const nextWeek = firstWeek.add(j, "week");
|
|
92
90
|
if (nextWeek.format("Wo") === weekStr) return nextWeek;
|
|
93
91
|
}
|
|
94
|
-
parseNoMatchNotice();
|
|
95
92
|
return null;
|
|
96
93
|
}
|
|
97
94
|
const date = dayjs(formatText, format, true).locale(localeStr);
|
|
98
95
|
if (date.isValid()) return date;
|
|
99
96
|
}
|
|
100
|
-
if (text)
|
|
97
|
+
if (text) {}
|
|
101
98
|
return null;
|
|
102
99
|
}
|
|
103
100
|
}
|
package/dist/interface.d.ts
CHANGED
|
@@ -253,6 +253,8 @@ export interface SharedPickerProps<DateType extends object = any> extends Shared
|
|
|
253
253
|
clearIcon?: VueNode;
|
|
254
254
|
onFocus?: PickerFocusEventHandler;
|
|
255
255
|
onBlur?: PickerFocusEventHandler;
|
|
256
|
+
/** Trigger when the clear icon is clicked. */
|
|
257
|
+
onClear?: VoidFunction;
|
|
256
258
|
/** `preventDefault` is deprecated which will remove from future version. */
|
|
257
259
|
onKeyDown?: LegacyOnKeyDown;
|
|
258
260
|
inputReadOnly?: boolean;
|
package/package.json
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@v-c/picker",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.1
|
|
4
|
+
"version": "1.2.1",
|
|
5
5
|
"description": "picker ui component for vue",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
8
8
|
},
|
|
9
9
|
"author": "",
|
|
10
10
|
"license": "MIT",
|
|
11
|
+
"homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/picker",
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/antdv-next/vue-components.git"
|
|
15
|
+
},
|
|
11
16
|
"keywords": [
|
|
12
17
|
"picker",
|
|
13
18
|
"vue-component"
|
|
@@ -72,13 +77,13 @@
|
|
|
72
77
|
}
|
|
73
78
|
},
|
|
74
79
|
"dependencies": {
|
|
75
|
-
"@v-c/resize-observer": "^1.1.0",
|
|
76
|
-
"@v-c/util": "^1.0.19",
|
|
77
80
|
"@v-c/overflow": "^1.1.0",
|
|
78
|
-
"@v-c/
|
|
81
|
+
"@v-c/util": "^1.0.19",
|
|
82
|
+
"@v-c/trigger": "^1.0.17",
|
|
83
|
+
"@v-c/resize-observer": "^1.1.2"
|
|
79
84
|
},
|
|
80
85
|
"devDependencies": {
|
|
81
|
-
"@types/luxon": "^3.7.
|
|
86
|
+
"@types/luxon": "^3.7.2"
|
|
82
87
|
},
|
|
83
88
|
"scripts": {
|
|
84
89
|
"build": "vite build",
|