@v-c/picker 1.0.4-beta.1 → 1.1.0-rc.1

package/dist/PickerInput/Selector/RangeSelector.js

@@ -1,12 +1,13 @@
 import { usePickerContext } from "../context.js";
 import useInputProps from "./hooks/useInputHooks.js";
 import useRootProps from "./hooks/useRootProps.js";
-import Icon_default, { ClearIcon } from "./Icon.js";
-import Input_default from "./Input.js";
+import Icon, { ClearIcon } from "./Icon.js";
+import Input from "./Input.js";
 import { computed, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
 import { clsx } from "@v-c/util";
 import ResizeObserver from "@v-c/resize-observer";
-var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
+//#region src/PickerInput/Selector/RangeSelector.tsx
+var RangeSelector = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
 	const pickerContext = usePickerContext();
 	const prefixCls = computed(() => pickerContext.value.prefixCls);
 	const classNames = computed(() => pickerContext.value.classNames);
@@ -100,14 +101,14 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 				"class": clsx(`${prefixCls.value}-prefix`, classNames.value.prefix),
 				"style": styles.value.prefix
 			}, [prefix]),
-			createVNode(Input_default, mergeProps({ "ref": inputStartRef }, getInputProps(0), {
+			createVNode(Input, mergeProps({ "ref": inputStartRef }, getInputProps(0), {
 				"class": `${prefixCls.value}-input-start`,
 				"autofocus": startAutoFocus.value,
 				"tabindex": tabIndex.value,
 				"data-range": "start"
 			}), null),
 			createVNode("div", { "class": `${prefixCls.value}-range-separator` }, [separator ?? "~"]),
-			createVNode(Input_default, mergeProps({ "ref": inputEndRef }, getInputProps(1), {
+			createVNode(Input, mergeProps({ "ref": inputEndRef }, getInputProps(1), {
 				"class": `${prefixCls.value}-input-end`,
 				"autofocus": endAutoFocus.value,
 				"tabindex": tabIndex.value,
@@ -117,7 +118,7 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 				"class": `${prefixCls.value}-active-bar`,
 				"style": activeBarStyle.value
 			}, null),
-			createVNode(Icon_default, {
+			createVNode(Icon, {
 				"type": "suffix",
 				"icon": suffixIcon
 			}, null),
@@ -136,8 +137,7 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 		},
 		activeIndex: {
 			type: [Number, null],
-			required: true,
-			default: void 0
+			required: true
 		},
 		separator: {
 			type: [
@@ -159,18 +159,15 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 		},
 		onChange: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		disabled: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		},
 		allHelp: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		placeholder: {
 			type: [String, Array],
@@ -179,8 +176,7 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 		},
 		invalid: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		},
 		placement: {
 			type: String,
@@ -204,13 +200,11 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 		},
 		onActiveInfo: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		picker: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		prefix: {
 			type: [
@@ -268,23 +262,17 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 		},
 		focused: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onFocus: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onBlur: {
 			type: Function,
-			required: true,
-			default: void 0
-		},
-		onSubmit: {
-			required: true,
-			default: void 0
+			required: true
 		},
+		onSubmit: { required: true },
 		onKeyDown: {
 			type: Function,
 			required: false,
@@ -292,13 +280,11 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 		},
 		locale: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		generateConfig: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		direction: {
 			type: String,
@@ -307,31 +293,22 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 		},
 		onClick: {
 			type: [Function, Array],
-			required: true,
-			default: void 0
-		},
-		onClear: {
-			required: true,
-			default: void 0
+			required: true
 		},
+		onClear: { required: true },
 		format: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		},
 		maskFormat: {
 			type: String,
 			required: false,
 			default: void 0
 		},
-		onInputChange: {
-			required: true,
-			default: void 0
-		},
+		onInputChange: { required: true },
 		onInvalid: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		preserveInvalidOnBlur: {
 			type: Boolean,
@@ -340,13 +317,11 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 		},
 		open: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onOpenChange: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		inputReadOnly: {
 			type: Boolean,
@@ -1383,4 +1358,5 @@ var RangeSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, exp
 	name: "RangeSelector",
 	inheritAttrs: false
 });
-export { RangeSelector_default as default };
+//#endregion
+export { RangeSelector as default };

package/dist/PickerInput/Selector/SingleSelector/MultipleDates.d.ts

@@ -8,6 +8,13 @@ export interface MultipleDatesProps<DateType extends object = any> {
     disabled?: boolean;
     placeholder?: VueNode;
     maxTagCount?: number | 'responsive';
+    tagRender?: (props: {
+        label: VueNode;
+        value: DateType;
+        disabled: boolean;
+        onClose: (event?: MouseEvent) => void;
+        closable: boolean;
+    }) => VueNode;
 }
 declare const MultipleDates: import('vue').DefineSetupFnComponent<MultipleDatesProps<any>, {}, {}, MultipleDatesProps<any> & {}, import('vue').PublicProps>;
 export default MultipleDates;

package/dist/PickerInput/Selector/SingleSelector/MultipleDates.js

@@ -1,9 +1,10 @@
 import { createVNode, defineComponent } from "vue";
 import { clsx } from "@v-c/util";
 import Overflow from "@v-c/overflow";
-var MultipleDates_default = /* @__PURE__ */ defineComponent((props) => {
+//#region src/PickerInput/Selector/SingleSelector/MultipleDates.tsx
+var MultipleDates = /* @__PURE__ */ defineComponent((props) => {
 	return () => {
-		const { prefixCls, value, onRemove, removeIcon = "×", formatDate, disabled, maxTagCount, placeholder } = props;
+		const { prefixCls, value, onRemove, removeIcon = "×", formatDate, disabled, maxTagCount, placeholder, tagRender } = props;
 		const selectorCls = `${prefixCls}-selector`;
 		const selectionCls = `${prefixCls}-selection`;
 		const overflowCls = `${selectionCls}-overflow`;
@@ -23,8 +24,15 @@ var MultipleDates_default = /* @__PURE__ */ defineComponent((props) => {
 			const displayLabel = formatDate(date);
 			const onClose = (event) => {
 				if (event) event.stopPropagation();
-				onRemove(date);
+				if (!disabled) onRemove(date);
 			};
+			if (tagRender) return tagRender({
+				label: displayLabel,
+				value: date,
+				disabled: !!disabled,
+				onClose,
+				closable: !disabled
+			});
 			return renderSelector(displayLabel, onClose);
 		}
 		function renderRest(omittedValues) {
@@ -43,18 +51,15 @@ var MultipleDates_default = /* @__PURE__ */ defineComponent((props) => {
 	props: {
 		prefixCls: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		value: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onRemove: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		removeIcon: {
 			type: [
@@ -71,8 +76,7 @@ var MultipleDates_default = /* @__PURE__ */ defineComponent((props) => {
 		},
 		formatDate: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		disabled: {
 			type: Boolean,
@@ -96,8 +100,14 @@ var MultipleDates_default = /* @__PURE__ */ defineComponent((props) => {
 			type: [Number, String],
 			required: false,
 			default: void 0
+		},
+		tagRender: {
+			type: Function,
+			required: false,
+			default: void 0
 		}
 	},
 	name: "MultipleDates"
 });
-export { MultipleDates_default as default };
+//#endregion
+export { MultipleDates as default };

package/dist/PickerInput/Selector/SingleSelector/index.d.ts

@@ -13,6 +13,13 @@ export interface SingleSelectorProps<DateType extends object = any> extends Sele
     removeIcon?: any;
     maxTagCount?: number | 'responsive';
     multiple?: boolean;
+    tagRender?: (props: {
+        label: any;
+        value: DateType;
+        disabled: boolean;
+        onClose: (event?: MouseEvent) => void;
+        closable: boolean;
+    }) => any;
     onMouseDown?: (e: MouseEvent) => void;
     autoFocus?: boolean;
     tabIndex?: number | string;

package/dist/PickerInput/Selector/SingleSelector/index.js

@@ -2,12 +2,13 @@ import { usePickerContext } from "../../context.js";
 import { isSame } from "../../../utils/dateUtil.js";
 import useInputProps from "../hooks/useInputHooks.js";
 import useRootProps from "../hooks/useRootProps.js";
-import Icon_default, { ClearIcon } from "../Icon.js";
-import Input_default from "../Input.js";
-import MultipleDates_default from "./MultipleDates.js";
+import Icon, { ClearIcon } from "../Icon.js";
+import Input from "../Input.js";
+import MultipleDates from "./MultipleDates.js";
 import { Fragment, computed, createVNode, defineComponent, mergeProps, ref } from "vue";
 import { clsx } from "@v-c/util";
-var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
+//#region src/PickerInput/Selector/SingleSelector/index.tsx
+var SingleSelector = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
 	const rtl = computed(() => props.direction === "rtl");
 	const ctx = usePickerContext();
 	const prefixCls = computed(() => ctx.value.prefixCls);
@@ -42,10 +43,10 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 		active: props.focused
 	}));
 	return () => {
-		const { prefix, clearIcon, suffixIcon, placeholder, onClick, onClear, multiple, maxTagCount, removeIcon, onMouseDown, value, disabled, invalid, autoFocus, tabIndex } = props;
+		const { prefix, clearIcon, suffixIcon, placeholder, onClick, onClear, multiple, maxTagCount, removeIcon, tagRender, onMouseDown, value, disabled, invalid, autoFocus, tabIndex } = props;
 		const showClear = !!(clearIcon && value && value.length && !disabled);
 		const selectorNode = multiple ? createVNode(Fragment, null, [
-			createVNode(MultipleDates_default, {
+			createVNode(MultipleDates, {
 				"prefixCls": prefixCls.value,
 				"value": value,
 				"onRemove": onMultipleRemove,
@@ -53,7 +54,8 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 				"maxTagCount": maxTagCount,
 				"disabled": disabled,
 				"removeIcon": removeIcon,
-				"placeholder": placeholder
+				"placeholder": placeholder,
+				"tagRender": tagRender
 			}, null),
 			createVNode("input", {
 				"class": `${prefixCls.value}-multiple-input`,
@@ -63,7 +65,7 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 				"autofocus": autoFocus,
 				"tabindex": tabIndex
 			}, null),
-			createVNode(Icon_default, {
+			createVNode(Icon, {
 				"type": "suffix",
 				"icon": suffixIcon
 			}, null),
@@ -71,7 +73,7 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 				"icon": clearIcon,
 				"onClear": onClear
 			}, null)
-		]) : createVNode(Input_default, mergeProps({ "ref": inputRef }, getInputProps(), {
+		]) : createVNode(Input, mergeProps({ "ref": inputRef }, getInputProps(), {
 			"autofocus": autoFocus,
 			"tabindex": tabIndex,
 			"suffixIcon": suffixIcon,
@@ -119,13 +121,11 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 		},
 		onChange: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		internalPicker: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		disabled: {
 			type: Boolean,
@@ -149,8 +149,7 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 		},
 		onInvalid: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		removeIcon: {
 			required: false,
@@ -166,6 +165,11 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 			required: false,
 			default: void 0
 		},
+		tagRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
 		onMouseDown: {
 			type: Function,
 			required: false,
@@ -183,8 +187,7 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 		},
 		picker: {
 			type: String,
-			required: true,
-			default: void 0
+			required: true
 		},
 		prefix: {
 			type: [
@@ -242,23 +245,17 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 		},
 		focused: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onFocus: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onBlur: {
 			type: Function,
-			required: true,
-			default: void 0
-		},
-		onSubmit: {
-			required: true,
-			default: void 0
+			required: true
 		},
+		onSubmit: { required: true },
 		onKeyDown: {
 			type: Function,
 			required: false,
@@ -266,13 +263,11 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 		},
 		locale: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		generateConfig: {
 			type: Object,
-			required: true,
-			default: void 0
+			required: true
 		},
 		direction: {
 			type: String,
@@ -281,27 +276,19 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 		},
 		onClick: {
 			type: [Function, Array],
-			required: true,
-			default: void 0
-		},
-		onClear: {
-			required: true,
-			default: void 0
+			required: true
 		},
+		onClear: { required: true },
 		format: {
 			type: Array,
-			required: true,
-			default: void 0
+			required: true
 		},
 		maskFormat: {
 			type: String,
 			required: false,
 			default: void 0
 		},
-		onInputChange: {
-			required: true,
-			default: void 0
-		},
+		onInputChange: { required: true },
 		preserveInvalidOnBlur: {
 			type: Boolean,
 			required: false,
@@ -309,13 +296,11 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 		},
 		open: {
 			type: Boolean,
-			required: true,
-			default: void 0
+			required: true
 		},
 		onOpenChange: {
 			type: Function,
-			required: true,
-			default: void 0
+			required: true
 		},
 		inputReadOnly: {
 			type: Boolean,
@@ -1352,4 +1337,5 @@ var SingleSelector_default = /* @__PURE__ */ defineComponent((props, { attrs, ex
 	name: "SingleSelector",
 	inheritAttrs: false
 });
-export { SingleSelector_default as default };
+//#endregion
+export { SingleSelector as default };

package/dist/PickerInput/Selector/hooks/useClearIcon.js

@@ -1,5 +1,6 @@
 import { computed, createVNode } from "vue";
 import { warning } from "@v-c/util";
+//#region src/PickerInput/Selector/hooks/useClearIcon.tsx
 function fillClearIcon(prefixCls, allowClear, clearIcon) {
 	if (process.env.NODE_ENV !== "production" && clearIcon) warning(false, "`clearIcon` will be removed in future. Please use `allowClear` instead.");
 	if (allowClear === false) return null;
@@ -8,4 +9,5 @@ function fillClearIcon(prefixCls, allowClear, clearIcon) {
 function useClearIcon(prefixCls, allowClear, clearIcon) {
 	return computed(() => fillClearIcon(prefixCls.value, allowClear?.value, clearIcon?.value));
 }
+//#endregion
 export { useClearIcon as default, fillClearIcon };

package/dist/PickerInput/Selector/hooks/useInputHooks.js

@@ -1,5 +1,6 @@
 import { computed } from "vue";
 import { warning } from "@v-c/util";
+//#region src/PickerInput/Selector/hooks/useInputHooks.ts
 function formatValue(value, { generateConfig, locale, format }) {
 	if (!value) return "";
 	if (typeof format === "function") return format(value);
@@ -117,4 +118,5 @@ function useInputProps(props, postProps) {
 	};
 	return [getInputProps, getText];
 }
+//#endregion
 export { useInputProps as default };

package/dist/PickerInput/Selector/hooks/useRootProps.js

@@ -1,9 +1,11 @@
 import { pickProps } from "../../../utils/miscUtil.js";
 import { computed } from "vue";
+//#region src/PickerInput/Selector/hooks/useRootProps.ts
 var propNames = ["onMouseEnter", "onMouseLeave"];
 function useRootProps(props) {
 	return computed(() => {
 		return pickProps(props, propNames);
 	});
 }
+//#endregion
 export { useRootProps as default };

package/dist/PickerInput/Selector/util.js

@@ -1,3 +1,4 @@
+//#region src/PickerInput/Selector/util.ts
 function getMaskRange(key) {
 	return {
 		YYYY: [
@@ -27,4 +28,5 @@ function raf(callback, delayFrames = 1) {
 raf.cancel = (id) => {
 	cancelAnimationFrame(id);
 };
+//#endregion
 export { getMaskRange, raf };

package/dist/PickerInput/SinglePicker.d.ts

@@ -1,4 +1,11 @@
 import { BaseInfo, PanelMode, SharedPickerProps, SharedTimeProps, ValueDate } from '../interface';
+export interface CustomTagProps<DateType extends object = any> {
+    label: any;
+    value: DateType;
+    disabled: boolean;
+    onClose: (event?: MouseEvent) => void;
+    closable: boolean;
+}
 export interface BasePickerProps<DateType extends object = any> extends SharedPickerProps<DateType> {
     id?: string;
     /** Not support `time` or `datetime` picker */
@@ -6,6 +13,8 @@ export interface BasePickerProps<DateType extends object = any> extends SharedPi
     removeIcon?: any;
     /** Only work when `multiple` is in used */
     maxTagCount?: number | 'responsive';
+    /** Only works when `multiple` is in use */
+    tagRender?: (props: CustomTagProps<DateType>) => any;
     value?: DateType | DateType[] | string | string[] | null;
     defaultValue?: DateType | DateType[] | string | string[];
     onChange?: (date: DateType | DateType[] | string | string[] | null, dateString: string | string[]) => void;