@v-c/picker 1.0.2 → 1.0.4-beta.1

package/dist/PickerInput/RangePicker.d.ts

@@ -4,11 +4,11 @@ import { SelectorIdType } from './Selector/RangeSelector';
 export interface BaseRangePickerProps<DateType extends object> extends Omit<SharedPickerProps<DateType>, 'showTime' | 'id'> {
     id?: SelectorIdType;
     separator?: VueNode;
-    value?: RangeValueType<DateType> | null;
-    defaultValue?: RangeValueType<DateType>;
-    onChange?: (dates: NoUndefinedRangeValueType<DateType> | null, dateStrings: [string, string]) => void;
-    onCalendarChange?: (dates: NoUndefinedRangeValueType<DateType>, dateStrings: [string, string], info: BaseInfo) => void;
-    onOk?: (values: NoUndefinedRangeValueType<DateType>) => void;
+    value?: RangeValueType<DateType | string> | null;
+    defaultValue?: RangeValueType<DateType | string>;
+    onChange?: (dates: NoUndefinedRangeValueType<DateType | string> | null, dateStrings: [string, string]) => void;
+    onCalendarChange?: (dates: NoUndefinedRangeValueType<DateType | string>, dateStrings: [string, string], info: BaseInfo) => void;
+    onOk?: (values: NoUndefinedRangeValueType<DateType | string>) => void;
     placeholder?: [string, string];
     /**
      * Config the popup panel date.
@@ -16,12 +16,12 @@ export interface BaseRangePickerProps<DateType extends object> extends Omit<Shar
      *
      * Note: `defaultPickerValue` priority is higher than `value` for the first open.
      */
-    defaultPickerValue?: [DateType, DateType] | DateType | null;
+    defaultPickerValue?: [DateType | string, DateType | string] | DateType | string | null;
     /**
      * Config each start & end field popup panel date.
      * When config `pickerValue`, you must also provide `onPickerValueChange` to handle changes.
      */
-    pickerValue?: [DateType, DateType] | DateType | null;
+    pickerValue?: [DateType | string, DateType | string] | DateType | string | null;
     /**
      * Each popup panel `pickerValue` includes `mode` change will trigger the callback.
      * @param date The changed picker value

package/dist/PickerInput/RangePicker.js

@@ -3,6 +3,7 @@ import { providePickerContext } from "./context.js";
 import PickerTrigger_default from "../PickerTrigger/index.js";
 import { fillIndex, getFromDate, toArray } from "../utils/miscUtil.js";
 import { pickTriggerProps } from "../PickerTrigger/util.js";
+import { formatValues } from "../utils/valueUtil.js";
 import useCellRender from "./hooks/useCellRender.js";
 import useFieldsInvalidate from "./hooks/useFieldsInvalidate.js";
 import useFilledProps from "./hooks/useFilledProps.js";
@@ -64,6 +65,7 @@ var RangePicker_default = /* @__PURE__ */ defineComponent((props, { expose }) =>
 	const onPanelChange = computed(() => fp.value.onPanelChange);
 	const onCalendarChange = computed(() => fp.value.onCalendarChange);
 	const onOk = computed(() => fp.value.onOk);
+	const valueFormat = computed(() => fp.value.valueFormat);
 	const defaultPickerValue = computed(() => fp.value.defaultPickerValue);
 	const pickerValue = computed(() => fp.value.pickerValue);
 	const onPickerValueChange = computed(() => fp.value.onPickerValueChange);
@@ -96,10 +98,18 @@ var RangePicker_default = /* @__PURE__ */ defineComponent((props, { expose }) =>
 		if (disabled.value.some((fieldDisabled) => !fieldDisabled) || !nextOpen) setMergeOpen(nextOpen, config);
 	};
 	const onInternalCalendarChange = (dates, dateStrings, info) => {
-		if (onCalendarChange.value) onCalendarChange.value(dates, dateStrings, info);
+		if (onCalendarChange.value) onCalendarChange.value(formatValues(dates, {
+			generateConfig: generateConfig.value,
+			locale: locale.value,
+			valueFormat: valueFormat.value
+		}), dateStrings, info);
 	};
 	const onInternalOk = (dates) => {
-		onOk.value?.(dates);
+		onOk.value?.(formatValues(dates, {
+			generateConfig: generateConfig.value,
+			locale: locale.value,
+			valueFormat: valueFormat.value
+		}));
 	};
 	const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange, triggerOk] = useInnerValue(generateConfig, locale, formatList, ref(true), ref(false), defaultValue, value, onInternalCalendarChange, onInternalOk);
 	const calendarValue = computed(() => getCalendarValue.value);
@@ -132,7 +142,16 @@ var RangePicker_default = /* @__PURE__ */ defineComponent((props, { expose }) =>
 	const internalMode = computed(() => mergedMode.value === "date" && mergedShowTime.value ? "datetime" : mergedMode.value);
 	const multiplePanel = computed(() => internalMode.value === picker.value && internalMode.value !== "time");
 	const mergedShowNow = useShowNow(picker, mergedMode, showNow, showToday, ref(true));
-	const [flushSubmit, triggerSubmitChange] = useRangeValue(fp, mergedValue, setInnerValue, () => getCalendarValue.value, triggerCalendarChange, disabled, formatList, focused, mergedOpen, isInvalidateDate);
+	const [flushSubmit, triggerSubmitChange] = useRangeValue(computed(() => ({
+		...fp.value,
+		onChange: (dates, dateStrings) => {
+			fp.value.onChange?.(formatValues(dates, {
+				generateConfig: generateConfig.value,
+				locale: locale.value,
+				valueFormat: valueFormat.value
+			}), dateStrings);
+		}
+	})), mergedValue, setInnerValue, () => getCalendarValue.value, triggerCalendarChange, disabled, formatList, focused, mergedOpen, isInvalidateDate);
 	const mergedDisabledDate = useRangeDisabledDate(calendarValue, disabled, activeIndexList, generateConfig, locale, disabledDate);
 	const [submitInvalidates, onSelectorInvalid] = useFieldsInvalidate(calendarValue, isInvalidateDate, allowEmpty);
 	const [currentPickerValue, setCurrentPickerValue] = useRangePickerValue(generateConfig, locale, calendarValue, modes, mergedOpen, activeIndex, internalPicker, multiplePanel, defaultPickerValue, pickerValue, computed(() => mergedShowTime.value?.defaultOpenValue), onPickerValueChange, minDate, maxDate);
@@ -545,6 +564,11 @@ var RangePicker_default = /* @__PURE__ */ defineComponent((props, { expose }) =>
 			required: false,
 			default: void 0
 		},
+		valueFormat: {
+			type: String,
+			required: false,
+			default: void 0
+		},
 		prefix: {
 			type: [
 				Object,

package/dist/PickerInput/SinglePicker.d.ts

@@ -6,12 +6,12 @@ export interface BasePickerProps<DateType extends object = any> extends SharedPi
     removeIcon?: any;
     /** Only work when `multiple` is in used */
     maxTagCount?: number | 'responsive';
-    value?: DateType | DateType[] | null;
-    defaultValue?: DateType | DateType[];
-    onChange?: (date: DateType | DateType[] | null, dateString: string | string[]) => void;
-    onCalendarChange?: (date: DateType | DateType[], dateString: string | string[], info: BaseInfo) => void;
+    value?: DateType | DateType[] | string | string[] | null;
+    defaultValue?: DateType | DateType[] | string | string[];
+    onChange?: (date: DateType | DateType[] | string | string[] | null, dateString: string | string[]) => void;
+    onCalendarChange?: (date: DateType | DateType[] | string | string[], dateString: string | string[], info: BaseInfo) => void;
     /**  */
-    onOk?: (value?: DateType | DateType[]) => void;
+    onOk?: (value?: DateType | DateType[] | string | string[]) => void;
     placeholder?: string;
     /**
      * Config the popup panel date.
@@ -19,12 +19,12 @@ export interface BasePickerProps<DateType extends object = any> extends SharedPi
      *
      * Note: `defaultPickerValue` priority is higher than `value` for the first open.
      */
-    defaultPickerValue?: DateType | null;
+    defaultPickerValue?: DateType | string | null;
     /**
      * Config each start & end field popup panel date.
      * When config `pickerValue`, you must also provide `onPickerValueChange` to handle changes.
      */
-    pickerValue?: DateType | null;
+    pickerValue?: DateType | string | null;
     /**
      * Each popup panel `pickerValue` change will trigger the callback.
      * @param date The changed picker value

package/dist/PickerInput/SinglePicker.js

@@ -3,6 +3,7 @@ import { providePickerContext } from "./context.js";
 import PickerTrigger_default from "../PickerTrigger/index.js";
 import { toArray } from "../utils/miscUtil.js";
 import { pickTriggerProps } from "../PickerTrigger/util.js";
+import { formatValue, formatValues } from "../utils/valueUtil.js";
 import useCellRender from "./hooks/useCellRender.js";
 import useFieldsInvalidate from "./hooks/useFieldsInvalidate.js";
 import useFilledProps from "./hooks/useFilledProps.js";
@@ -49,6 +50,7 @@ var SinglePicker_default = /* @__PURE__ */ defineComponent((props, { expose }) =
 	const onPanelChange = computed(() => fp.value.onPanelChange);
 	const onCalendarChange = computed(() => fp.value.onCalendarChange);
 	const onOk = computed(() => fp.value.onOk);
+	const valueFormat = computed(() => fp.value.valueFormat);
 	const multiple = computed(() => fp.value.multiple);
 	const defaultPickerValue = computed(() => fp.value.defaultPickerValue);
 	const pickerValue = computed(() => fp.value.pickerValue);
@@ -87,6 +89,16 @@ var SinglePicker_default = /* @__PURE__ */ defineComponent((props, { expose }) =
 		if (values === null) return null;
 		return multiple.value ? values : values[0];
 	}
+	const toValueByFormat = (values) => {
+		const parsed = pickerParam(values);
+		const config = {
+			generateConfig: generateConfig.value,
+			locale: locale.value,
+			valueFormat: valueFormat.value
+		};
+		if (Array.isArray(parsed)) return formatValues(parsed, config);
+		return formatValue(parsed, config);
+	};
 	const toggleDates = useToggleDates(generateConfig, locale, internalPicker);
 	const semanticCtx = useSemantic(classNames, styles);
 	const [mergedOpen, triggerOpen] = useOpen(open, defaultOpen, computed(() => [disabled.value]), (open$1) => {
@@ -96,11 +108,11 @@ var SinglePicker_default = /* @__PURE__ */ defineComponent((props, { expose }) =
 		if (onCalendarChange.value) {
 			const filteredInfo = { ...info };
 			delete filteredInfo.range;
-			onCalendarChange.value(pickerParam(dates), pickerParam(dateStrings), filteredInfo);
+			onCalendarChange.value(toValueByFormat(dates), pickerParam(dateStrings), filteredInfo);
 		}
 	};
 	const onInternalOk = (dates) => {
-		onOk.value?.(pickerParam(dates));
+		onOk.value?.(toValueByFormat(dates));
 	};
 	const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange, triggerOk] = useInnerValue(generateConfig, locale, formatList, ref(false), order, defaultValue, value, onInternalCalendarChange, onInternalOk);
 	const calendarValue = computed(() => getCalendarValue.value);
@@ -123,7 +135,7 @@ var SinglePicker_default = /* @__PURE__ */ defineComponent((props, { expose }) =
 	const internalMode = computed(() => mergedMode.value === "date" && showTime.value ? "datetime" : mergedMode.value);
 	const mergedShowNow = useShowNow(picker, mergedMode, showNow, showToday);
 	const onInternalChange = (dates, dateStrings) => {
-		if (props?.onChange) props?.onChange?.(pickerParam(dates), pickerParam(dateStrings));
+		if (props?.onChange) props?.onChange?.(toValueByFormat(dates), pickerParam(dateStrings));
 	};
 	const [, triggerSubmitChange] = useRangeValue(computed(() => {
 		return {
@@ -521,6 +533,11 @@ var SinglePicker_default = /* @__PURE__ */ defineComponent((props, { expose }) =
 			required: false,
 			default: void 0
 		},
+		valueFormat: {
+			type: String,
+			required: false,
+			default: void 0
+		},
 		prefix: {
 			type: [
 				Object,

package/dist/PickerInput/hooks/useFilledProps.js

@@ -1,4 +1,5 @@
 import { toArray } from "../../utils/miscUtil.js";
+import { parseValue } from "../../utils/valueUtil.js";
 import useLocale from "../../hooks/useLocale.js";
 import { fillShowTimeConfig, getTimeProps } from "../../hooks/useTimeConfig.js";
 import { fillClearIcon } from "../Selector/hooks/useClearIcon.js";
@@ -8,10 +9,10 @@ import useInputReadOnly from "./useInputReadOnly.js";
 import useInvalidate from "./useInvalidate.js";
 import { computed } from "vue";
 import { warning } from "@v-c/util";
-function useList(value, fillMode = false) {
+function useList(value, fillMode = false, transform) {
 	return computed(() => {
 		const val = value.value;
-		const list = val ? toArray(val) : val;
+		const list = val === null || val === void 0 ? val : toArray(val).map((item) => transform ? transform(item) : item);
 		if (fillMode && list && Array.isArray(list)) {
 			const clone = [...list];
 			clone[1] = clone[1] || clone[0];
@@ -31,10 +32,6 @@ function useFilledProps(props, updater) {
 		input: props.value.inputRender,
 		...props.value.components
 	}));
-	const values = useList(computed(() => props.value.value));
-	const defaultValues = useList(computed(() => props.value.defaultValue));
-	const pickerValues = useList(computed(() => props.value.pickerValue));
-	const defaultPickerValues = useList(computed(() => props.value.defaultPickerValue));
 	const internalPicker = computed(() => mergedPicker.value === "date" && props.value.showTime ? "datetime" : mergedPicker.value);
 	const multipleInteractivePicker = computed(() => internalPicker.value === "time" || internalPicker.value === "datetime");
 	const complexPicker = computed(() => multipleInteractivePicker.value || props.value.multiple);
@@ -47,7 +44,17 @@ function useFilledProps(props, updater) {
 	const showTimeFormat = computed(() => timePropsInfo.value[2]);
 	const propFormat = computed(() => timePropsInfo.value[3]);
 	const mergedLocale = useLocale(computed(() => props.value.locale), localeTimeProps);
+	const valueFormat = computed(() => props.value.valueFormat);
+	const parseByValueFormat = (val) => parseValue(val, {
+		generateConfig: props.value.generateConfig,
+		locale: mergedLocale.value,
+		valueFormat: valueFormat.value
+	});
 	const mergedShowTime = computed(() => fillShowTimeConfig(internalPicker.value, showTimeFormat.value, propFormat.value, timeProps.value, mergedLocale.value));
+	const values = useList(computed(() => props.value.value), false, parseByValueFormat);
+	const defaultValues = useList(computed(() => props.value.defaultValue), false, parseByValueFormat);
+	const pickerValues = useList(computed(() => props.value.pickerValue), false, parseByValueFormat);
+	const defaultPickerValues = useList(computed(() => props.value.defaultPickerValue), false, parseByValueFormat);
 	if (process.env.NODE_ENV !== "production") {
 		if (mergedPicker.value === "time") {
 			if ([

package/dist/PickerInput/hooks/useRangeValue.d.ts

@@ -6,7 +6,7 @@ type TriggerCalendarChange<ValueType extends object[]> = (calendarValues: ValueT
  * Control the internal `value` align with prop `value` and provide a temp `calendarValue` for ui.
  * `calendarValue` will be reset when blur & focus & open.
  */
-export declare function useInnerValue<ValueType extends DateType[], DateType extends object = any>(generateConfig: Ref<GenerateConfig<DateType>>, locale: Ref<Locale>, formatList: Ref<FormatType[]>, rangeValue: Ref<boolean | undefined>, order: Ref<boolean | undefined>, defaultValue: Ref<ValueType | undefined>, value: Ref<ValueType | undefined>, onCalendarChange?: (dates: ValueType, dateStrings: [string, string], info: BaseInfo) => void, onOk?: (dates: ValueType) => void): readonly [ComputedRef<ValueType>, (val: ValueType) => void, Ref<ValueType, ValueType>, TriggerCalendarChange<ValueType>, () => void];
+export declare function useInnerValue<ValueType extends DateType[], DateType extends object = any>(generateConfig: Ref<GenerateConfig<DateType>>, locale: Ref<Locale>, formatList: Ref<FormatType[]>, rangeValue: Ref<boolean | undefined>, order: Ref<boolean | undefined>, defaultValue: Ref<ValueType | undefined>, value: Ref<ValueType | undefined>, onCalendarChange?: (dates: ValueType, dateStrings: [string, string], info: BaseInfo) => void, onOk?: (dates: ValueType) => void): any;
 export default function useRangeValue<ValueType extends DateType[], DateType extends object = any>(info: ComputedRef<{
     generateConfig: GenerateConfig<DateType>;
     locale: Locale;

package/dist/PickerInput/hooks/useRangeValue.js

@@ -1,7 +1,7 @@
 import { fillIndex } from "../../utils/miscUtil.js";
 import { formatValue, isSame, isSameTimestamp } from "../../utils/dateUtil.js";
 import useLockEffect from "./useLockEffect.js";
-import { computed, ref, watch } from "vue";
+import { computed, ref, shallowRef, watch } from "vue";
 var EMPTY_VALUE = [];
 function useUtil(generateConfig, locale, formatList) {
 	const getDateTexts = (dates) => {
@@ -30,12 +30,12 @@ function orderDates(dates, generateConfig) {
 	return [...dates].sort((a, b) => generateConfig.isAfter(a, b) ? 1 : -1);
 }
 function useInnerValue(generateConfig, locale, formatList, rangeValue, order, defaultValue, value, onCalendarChange, onOk) {
-	const internalValue = ref(defaultValue.value);
-	const mergedValue = computed(() => {
-		return (value.value !== void 0 ? value.value : internalValue.value) || EMPTY_VALUE;
+	const mergedValue = shallowRef((value.value === void 0 ? defaultValue.value : value.value) || EMPTY_VALUE);
+	watch(value, (value$1) => {
+		mergedValue.value = value$1 || EMPTY_VALUE;
 	});
 	const setInnerValue = (val) => {
-		if (value.value === void 0) internalValue.value = val;
+		if (value.value === void 0) mergedValue.value = val;
 	};
 	const calendarValue = ref(mergedValue.value);
 	watch(mergedValue, (val) => {

package/dist/interface.d.ts

@@ -239,6 +239,11 @@ export interface SharedPickerProps<DateType extends object = any> extends Shared
         format: string;
         type?: 'mask';
     };
+    /**
+     * Use this format to parse incoming string value and format outgoing callback value.
+     * This only affects the first argument in `onChange` / `onCalendarChange` / `onOk`.
+     */
+    valueFormat?: string;
     prefix?: VueNode;
     suffixIcon?: VueNode;
     allowClear?: boolean | {

package/dist/utils/valueUtil.d.ts

@@ -0,0 +1,12 @@
+import { GenerateConfig } from '../generate';
+import { Locale } from '../interface';
+interface ValueFormatConfig<DateType> {
+    generateConfig: GenerateConfig<DateType>;
+    locale: Locale;
+    valueFormat?: string;
+}
+export declare function parseValue<DateType>(value: DateType | string | null | undefined, config: ValueFormatConfig<DateType>): DateType | null | undefined;
+export declare function parseValues<DateType>(values: (DateType | string | null | undefined)[] | null | undefined, config: ValueFormatConfig<DateType>): (DateType | null | undefined)[] | null | undefined;
+export declare function formatValue<DateType>(value: DateType | null | undefined, config: ValueFormatConfig<DateType>): DateType | string | null | undefined;
+export declare function formatValues<DateType>(values: (DateType | null | undefined)[] | null | undefined, config: ValueFormatConfig<DateType>): (string | DateType | null | undefined)[] | null | undefined;
+export {};

package/dist/utils/valueUtil.js

@@ -0,0 +1,21 @@
+function parseValue(value, config) {
+	const { valueFormat, generateConfig, locale } = config;
+	if (!valueFormat || typeof value !== "string") return value;
+	const parsed = generateConfig.locale.parse(locale.locale, value, [valueFormat]);
+	if (parsed && generateConfig.isValidate(parsed)) return parsed;
+	return null;
+}
+function parseValues(values, config) {
+	if (!values) return values;
+	return values.map((value) => parseValue(value, config));
+}
+function formatValue(value, config) {
+	const { valueFormat, generateConfig, locale } = config;
+	if (!valueFormat || value === null || value === void 0) return value;
+	return generateConfig.locale.format(locale.locale, value, valueFormat);
+}
+function formatValues(values, config) {
+	if (!values) return values;
+	return values.map((value) => formatValue(value, config));
+}
+export { formatValue, formatValues, parseValue, parseValues };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/picker",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.0.4-beta.1",
   "description": "picker ui component for vue",
   "publishConfig": {
     "access": "public"
@@ -73,9 +73,9 @@
   },
   "dependencies": {
     "@v-c/overflow": "^1.0.3",
-    "@v-c/resize-observer": "^1.0.8",
-    "@v-c/trigger": "^1.0.10",
-    "@v-c/util": "^1.0.13"
+    "@v-c/trigger": "^1.0.11",
+    "@v-c/util": "^1.0.14",
+    "@v-c/resize-observer": "^1.0.8"
   },
   "devDependencies": {
     "@types/luxon": "^3.7.1"