@v-c/picker 0.0.1

package/dist/PickerInput/hooks/useRangeValue.js

@@ -0,0 +1,128 @@
+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";
+var EMPTY_VALUE = [];
+function useUtil(generateConfig, locale, formatList) {
+	const getDateTexts = (dates) => {
+		return dates.map((date) => formatValue(date, {
+			generateConfig: generateConfig.value,
+			locale: locale.value,
+			format: formatList.value[0]
+		}));
+	};
+	const isSameDates = (source, target) => {
+		const maxLen = Math.max(source.length, target.length);
+		let diffIndex = -1;
+		for (let i = 0; i < maxLen; i += 1) {
+			const prev = source[i] || null;
+			const next = target[i] || null;
+			if (prev !== next && !isSameTimestamp(generateConfig.value, prev, next)) {
+				diffIndex = i;
+				break;
+			}
+		}
+		return [diffIndex < 0, diffIndex !== 0];
+	};
+	return [getDateTexts, isSameDates];
+}
+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 setInnerValue = (val) => {
+		if (value.value === void 0) internalValue.value = val;
+	};
+	const calendarValue = ref(mergedValue.value);
+	watch(mergedValue, (val) => {
+		calendarValue.value = val;
+	});
+	const setCalendarValue = (val) => {
+		calendarValue.value = val;
+	};
+	const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList);
+	const triggerCalendarChange = (nextCalendarValues) => {
+		let clone = [...nextCalendarValues];
+		if (rangeValue.value) for (let i = 0; i < 2; i += 1) clone[i] = clone[i] || null;
+		else if (order.value) clone = orderDates(clone.filter((date) => date), generateConfig.value);
+		const [isSameMergedDates, isSameStart] = isSameDates(calendarValue.value, clone);
+		if (!isSameMergedDates) {
+			setCalendarValue(clone);
+			if (onCalendarChange) {
+				const cellTexts = getDateTexts(clone);
+				onCalendarChange(clone, cellTexts, { range: isSameStart ? "end" : "start" });
+			}
+		}
+	};
+	const triggerOk = () => {
+		if (onOk) onOk(calendarValue.value);
+	};
+	return [
+		mergedValue,
+		setInnerValue,
+		calendarValue,
+		triggerCalendarChange,
+		triggerOk
+	];
+}
+function useRangeValue(info, mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange, disabled, formatList, focused, open, isInvalidateDate) {
+	const orderOnChange = computed(() => disabled.value.some((d) => d) ? false : info.value.order);
+	const [getDateTexts, isSameDates] = useUtil(computed(() => info.value.generateConfig), computed(() => info.value.locale), formatList);
+	const submitValue = ref(mergedValue.value);
+	watch(mergedValue, (val) => {
+		submitValue.value = val;
+	});
+	const setSubmitValue = (val) => {
+		submitValue.value = val;
+	};
+	const triggerSubmit = (nextValue) => {
+		const { generateConfig, locale, picker, onChange, allowEmpty, order } = info.value;
+		const isNullValue = nextValue === null;
+		let clone = [...nextValue || submitValue.value];
+		if (isNullValue) {
+			const maxLen = Math.max(disabled.value.length, clone.length);
+			for (let i = 0; i < maxLen; i += 1) if (!disabled.value[i]) clone[i] = null;
+		}
+		if (orderOnChange.value && clone[0] && clone[1]) clone = orderDates(clone, generateConfig);
+		triggerCalendarChange(clone);
+		const [start, end] = clone;
+		const startEmpty = !start;
+		const endEmpty = !end;
+		const validateEmptyDateRange = allowEmpty ? (!startEmpty || allowEmpty[0]) && (!endEmpty || allowEmpty[1]) : true;
+		const validateOrder = !order || startEmpty || endEmpty || isSame(generateConfig, locale, start, end, picker) || generateConfig.isAfter(end, start);
+		const validateDates = (disabled.value[0] || !start || !isInvalidateDate(start, { activeIndex: 0 })) && (disabled.value[1] || !end || !isInvalidateDate(end, {
+			from: start,
+			activeIndex: 1
+		}));
+		const allPassed = isNullValue || validateEmptyDateRange && validateOrder && validateDates;
+		if (allPassed) {
+			setInnerValue(clone);
+			const [isSameMergedDates] = isSameDates(clone, mergedValue.value);
+			if (onChange && !isSameMergedDates) {
+				const everyEmpty = clone.every((val) => !val);
+				onChange(isNullValue && everyEmpty ? null : clone, everyEmpty ? null : getDateTexts(clone));
+			}
+		}
+		return allPassed;
+	};
+	const flushSubmit = (index, needTriggerChange) => {
+		setSubmitValue(fillIndex(submitValue.value, index, getCalendarValue()[index]));
+		if (needTriggerChange) triggerSubmit();
+	};
+	const interactiveFinished = computed(() => !focused.value && !open.value);
+	useLockEffect(computed(() => !interactiveFinished.value), (next) => {
+		if (next === false) {
+			if (!next) {
+				triggerSubmit();
+				triggerCalendarChange(mergedValue.value);
+				submitValue.value = mergedValue.value;
+			}
+		}
+	});
+	return [flushSubmit, triggerSubmit];
+}
+export { useRangeValue as default, useInnerValue };

package/dist/PickerInput/hooks/useShowNow.cjs

@@ -0,0 +1,15 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+function useShowNow(picker, mode, showNow, showToday, rangePicker) {
+	return (0, vue.computed)(() => {
+		if (mode.value !== "date" && mode.value !== "time") return false;
+		if (showNow.value !== void 0) return showNow.value;
+		if (showToday.value !== void 0) return showToday.value;
+		return !rangePicker?.value && (picker.value === "date" || picker.value === "time");
+	});
+}
+exports.default = useShowNow;

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

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import { InternalMode, PanelMode } from '../../interface';
+export default function useShowNow(picker: Ref<InternalMode>, mode: Ref<PanelMode>, showNow: Ref<boolean | undefined>, showToday: Ref<boolean | undefined>, rangePicker?: Ref<boolean | undefined>): import('vue').ComputedRef<boolean>;

package/dist/PickerInput/hooks/useShowNow.js

@@ -0,0 +1,10 @@
+import { computed } from "vue";
+function useShowNow(picker, mode, showNow, showToday, rangePicker) {
+	return computed(() => {
+		if (mode.value !== "date" && mode.value !== "time") return false;
+		if (showNow.value !== void 0) return showNow.value;
+		if (showToday.value !== void 0) return showToday.value;
+		return !rangePicker?.value && (picker.value === "date" || picker.value === "time");
+	});
+}
+export { useShowNow as default };

package/dist/PickerPanel/DatePanel/index.cjs

@@ -0,0 +1,294 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_dateUtil = require("../../utils/dateUtil.cjs");
+const require_context = require("../context.cjs");
+const require_PanelBody = require("../PanelBody.cjs");
+const require_PanelHeader = require("../PanelHeader.cjs");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+}
+var DatePanel = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const sharedContext = require_context.useSharedPanelContext();
+	const panelContext = (0, vue.computed)(() => {
+		const [info] = require_context.useInfo(props, props.mode || "date", sharedContext);
+		return info;
+	});
+	require_context.providePanelContext(panelContext);
+	return () => {
+		const { prefixCls, panelName = "date", locale, generateConfig, pickerValue, onPickerValueChange, onModeChange, mode = "date", disabledDate, onSelect, onHover, showWeek } = props;
+		const panelPrefixCls = `${prefixCls}-${panelName}-panel`;
+		const cellPrefixCls = `${prefixCls}-cell`;
+		const isWeek = mode === "week";
+		const weekFirstDay = generateConfig?.locale?.getWeekFirstDay?.(locale.locale) ?? 0;
+		const monthStartDate = generateConfig?.setDate(pickerValue, 1);
+		const baseDate = require_dateUtil.getWeekStartDate(locale.locale, generateConfig, monthStartDate);
+		const month = generateConfig?.getMonth?.(pickerValue);
+		const cellDateFormat = locale?.cellDateFormat || locale?.dayFormat || "D";
+		const yearFormat = locale?.yearFormat || "YYYY";
+		const prefixColumn = (showWeek === void 0 ? isWeek : showWeek) ? (date) => {
+			const disabled = disabledDate?.(date, { type: "week" });
+			return (0, vue.createVNode)("td", {
+				"key": "week",
+				"class": (0, _v_c_util.clsx)(cellPrefixCls, `${cellPrefixCls}-week`, { [`${cellPrefixCls}-disabled`]: disabled }),
+				"onClick": () => {
+					if (!disabled) onSelect?.(date);
+				},
+				"onMouseenter": () => {
+					if (!disabled) onHover?.(date);
+				},
+				"onMouseleave": () => {
+					if (!disabled) onHover?.(null);
+				}
+			}, [(0, vue.createVNode)("div", { "class": `${cellPrefixCls}-inner` }, [generateConfig?.locale.getWeek?.(locale.locale, date)])]);
+		} : void 0;
+		const headerCells = [];
+		const weekDaysLocale = locale?.shortWeekDays || (generateConfig?.locale?.getShortWeekDays ? generateConfig.locale.getShortWeekDays(locale.locale) : []);
+		if (prefixColumn) headerCells.push((0, vue.createVNode)("th", { "key": "empty" }, [(0, vue.createVNode)("span", { "style": {
+			width: 0,
+			height: 0,
+			position: "absolute",
+			overflow: "hidden",
+			opacity: 0
+		} }, [locale.week])]));
+		for (let i = 0; i < 7; i += 1) headerCells.push((0, vue.createVNode)("th", { "key": i }, [weekDaysLocale[(i + weekFirstDay) % 7]]));
+		const getCellDate = (date, offset) => {
+			return generateConfig?.addDate?.(date, offset);
+		};
+		const getCellText = (date) => {
+			return require_dateUtil.formatValue(date, {
+				locale,
+				format: cellDateFormat,
+				generateConfig
+			});
+		};
+		const getCellClassName = (date) => {
+			const nowVal = panelContext.value.now;
+			return {
+				[`${prefixCls}-cell-in-view`]: require_dateUtil.isSameMonth(generateConfig, date, pickerValue),
+				[`${prefixCls}-cell-today`]: require_dateUtil.isSameDate(generateConfig, date, nowVal)
+			};
+		};
+		const monthsLocale = locale?.shortMonths || (generateConfig?.locale?.getShortMonths ? generateConfig.locale.getShortMonths?.(locale.locale) : []);
+		const yearNode = (0, vue.createVNode)("button", {
+			"type": "button",
+			"aria-label": locale?.yearSelect,
+			"key": "year",
+			"onClick": () => {
+				onModeChange?.("year", pickerValue);
+			},
+			"tabindex": -1,
+			"class": `${prefixCls}-year-btn`
+		}, [require_dateUtil.formatValue(pickerValue, {
+			locale,
+			format: yearFormat,
+			generateConfig
+		})]);
+		const monthNode = (0, vue.createVNode)("button", {
+			"type": "button",
+			"aria-label": locale?.monthSelect,
+			"key": "month",
+			"onClick": () => {
+				onModeChange?.("month", pickerValue);
+			},
+			"tabindex": -1,
+			"class": `${prefixCls}-month-btn`
+		}, [locale?.monthFormat ? require_dateUtil.formatValue(pickerValue, {
+			locale,
+			format: locale.monthFormat,
+			generateConfig
+		}) : monthsLocale[month]]);
+		const monthYearNodes = locale?.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode];
+		return (0, vue.createVNode)("div", { "class": (0, _v_c_util.clsx)(panelPrefixCls, showWeek && `${panelPrefixCls}-show-week`) }, [(0, vue.createVNode)(require_PanelHeader.default, {
+			"offset": (distance, date) => generateConfig?.addMonth?.(date, distance),
+			"superOffset": (distance, date) => generateConfig?.addYear?.(date, distance),
+			"onChange": onPickerValueChange,
+			"getStart": (date) => generateConfig?.setDate?.(date, 1),
+			"getEnd": (date) => {
+				let clone = generateConfig?.setDate?.(date, 1);
+				clone = generateConfig?.addMonth(clone, 1);
+				return generateConfig?.addDate(clone, -1);
+			}
+		}, _isSlot(monthYearNodes) ? monthYearNodes : { default: () => [monthYearNodes] }), (0, vue.createVNode)(require_PanelBody.default, (0, vue.mergeProps)(props, {
+			"titleFormat": locale?.fieldDateFormat,
+			"colNum": 7,
+			"rowNum": 6,
+			"baseDate": baseDate,
+			"headerCells": headerCells,
+			"getCellDate": getCellDate,
+			"getCellText": getCellText,
+			"getCellClassName": getCellClassName,
+			"prefixColumn": prefixColumn,
+			"cellSelection": !isWeek
+		}), null)]);
+	};
+}, {
+	props: {
+		panelName: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		rowClassName: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		mode: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		cellSelection: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		locale: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		generateConfig: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		pickerValue: {
+			required: true,
+			default: void 0
+		},
+		onPickerValueChange: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		value: {
+			required: false,
+			default: void 0
+		},
+		onSelect: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		values: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		onModeChange: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		disabledDate: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		minDate: {
+			required: false,
+			default: void 0
+		},
+		maxDate: {
+			required: false,
+			default: void 0
+		},
+		cellRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		hoverRangeValue: {
+			type: [Array, null],
+			required: true,
+			default: void 0
+		},
+		hoverValue: {
+			type: [Array, null],
+			required: false,
+			default: void 0
+		},
+		onHover: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		showTime: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		showWeek: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		prevIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		nextIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		superPrevIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		superNextIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "DatePanel",
+	inheritAttrs: false
+});
+var DatePanel_default = DatePanel;
+exports.default = DatePanel_default;

package/dist/PickerPanel/DatePanel/index.d.ts

@@ -0,0 +1,9 @@
+import { PanelMode, SharedPanelProps } from '../../interface';
+export interface DatePanelProps<DateType extends object = any> extends SharedPanelProps<DateType> {
+    panelName?: PanelMode;
+    rowClassName?: (date: DateType) => string;
+    mode?: PanelMode;
+    cellSelection?: boolean;
+}
+declare const DatePanel: import('vue').DefineSetupFnComponent<DatePanelProps<any>, {}, {}, DatePanelProps<any> & {}, import('vue').PublicProps>;
+export default DatePanel;