@v-c/picker 0.0.1

package/dist/PickerPanel/context.d.ts

@@ -0,0 +1,26 @@
+import { Ref } from 'vue';
+import { FilledPanelClassNames, FilledPanelStyles } from '../hooks/useSemantic';
+import { PanelMode, SharedPanelProps } from '../interface';
+export interface SharedPanelContextProps {
+    classNames: FilledPanelClassNames;
+    styles: FilledPanelStyles;
+}
+export declare function provideSharedPanelContext(context: Ref<SharedPanelContextProps>): void;
+export declare function useSharedPanelContext(): Ref<SharedPanelContextProps> | null;
+export interface PanelContextProps<DateType extends object = any> extends Pick<SharedPanelProps<DateType>, 'prefixCls' | 'cellRender' | 'generateConfig' | 'locale' | 'onSelect' | 'hoverValue' | 'hoverRangeValue' | 'onHover' | 'values' | 'pickerValue' | 'disabledDate' | 'minDate' | 'maxDate' | 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'> {
+    panelType: PanelMode;
+    now: DateType;
+    classNames: FilledPanelClassNames;
+    styles: FilledPanelStyles;
+}
+export declare function providePanelContext<DateType extends object = any>(context: Ref<PanelContextProps<DateType>>): void;
+export declare function usePanelContext<DateType extends object = any>(): Ref<PanelContextProps<DateType>> | null;
+export declare function useInfo<DateType extends object = any>(props: SharedPanelProps<DateType>, panelType: PanelMode, sharedContext?: Ref<SharedPanelContextProps> | null): [sharedProps: PanelContextProps<DateType>, now: DateType];
+export interface PickerHackContextProps {
+    hidePrev?: boolean;
+    hideNext?: boolean;
+    hideHeader?: boolean;
+    onCellDblClick?: () => void;
+}
+export declare function providePickerHackContext(context: Ref<PickerHackContextProps>): void;
+export declare function usePickerHackContext(): Ref<PickerHackContextProps> | null;

package/dist/PickerPanel/context.js

@@ -0,0 +1,53 @@
+import { inject, provide } from "vue";
+var SharedPanelContextKey = Symbol("SharedPanelContext");
+function provideSharedPanelContext(context) {
+	provide(SharedPanelContextKey, context);
+}
+function useSharedPanelContext() {
+	return inject(SharedPanelContextKey, null);
+}
+var PanelContextKey = Symbol("PanelContext");
+function providePanelContext(context) {
+	provide(PanelContextKey, context);
+}
+function usePanelContext() {
+	return inject(PanelContextKey, null);
+}
+function useInfo(props, panelType, sharedContext) {
+	const ctx = sharedContext ?? useSharedPanelContext();
+	const classNames = ctx?.value.classNames;
+	const styles = ctx?.value.styles;
+	const { prefixCls, generateConfig, locale, disabledDate, minDate, maxDate, cellRender, hoverValue, hoverRangeValue, onHover, values, pickerValue, onSelect, prevIcon, nextIcon, superPrevIcon, superNextIcon } = props;
+	const now = generateConfig.getNow();
+	return [{
+		now,
+		values,
+		pickerValue,
+		prefixCls,
+		classNames,
+		styles,
+		disabledDate,
+		minDate,
+		maxDate,
+		cellRender,
+		hoverValue,
+		hoverRangeValue,
+		onHover,
+		locale,
+		generateConfig,
+		onSelect,
+		panelType,
+		prevIcon,
+		nextIcon,
+		superPrevIcon,
+		superNextIcon
+	}, now];
+}
+var PickerHackContextKey = Symbol("PickerHackContext");
+function providePickerHackContext(context) {
+	provide(PickerHackContextKey, context);
+}
+function usePickerHackContext() {
+	return inject(PickerHackContextKey, null);
+}
+export { providePanelContext, providePickerHackContext, provideSharedPanelContext, useInfo, usePanelContext, usePickerHackContext, useSharedPanelContext };

package/dist/PickerPanel/index.cjs

@@ -0,0 +1,473 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_context = require("../PickerInput/context.cjs");
+const require_miscUtil = require("../utils/miscUtil.cjs");
+const require_useCellRender = require("../PickerInput/hooks/useCellRender.cjs");
+const require_en_US = require("../locale/en_US.cjs");
+const require_useLocale = require("../hooks/useLocale.cjs");
+const require_useTimeConfig = require("../hooks/useTimeConfig.cjs");
+const require_dateUtil = require("../utils/dateUtil.cjs");
+const require_useToggleDates = require("../hooks/useToggleDates.cjs");
+const require_context$1 = require("./context.cjs");
+const require_index = require("./DatePanel/index.cjs");
+const require_index$1 = require("./TimePanel/index.cjs");
+const require_index$2 = require("./DateTimePanel/index.cjs");
+const require_index$3 = require("./DecadePanel/index.cjs");
+const require_index$4 = require("./MonthPanel/index.cjs");
+const require_index$5 = require("./QuarterPanel/index.cjs");
+const require_index$6 = require("./WeekPanel/index.cjs");
+const require_index$7 = require("./YearPanel/index.cjs");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+var DefaultComponents = {
+	date: require_index.default,
+	datetime: require_index$2.default,
+	week: require_index$6.default,
+	month: require_index$4.default,
+	quarter: require_index$5.default,
+	year: require_index$7.default,
+	decade: require_index$3.default,
+	time: require_index$1.default
+};
+var PickerPanel = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
+	const pickerContext = require_context.usePickerContext();
+	const rootRef = (0, vue.ref)();
+	const mergedPrefixCls = (0, vue.computed)(() => pickerContext.value.prefixCls || props.prefixCls || "vc-picker");
+	const mergedGenerateConfig = (0, vue.computed)(() => props.generateConfig || pickerContext.value.generateConfig);
+	const mergedLocale = (0, vue.computed)(() => props.locale || pickerContext.value.locale || require_en_US.default);
+	const timePropsInfo = (0, vue.computed)(() => require_useTimeConfig.getTimeProps({
+		...props,
+		locale: mergedLocale.value,
+		format: void 0,
+		picker: props.picker
+	}));
+	const localeTimeProps = (0, vue.computed)(() => timePropsInfo.value[1]);
+	const showTimeFormat = (0, vue.computed)(() => timePropsInfo.value[2]);
+	const propFormat = (0, vue.computed)(() => timePropsInfo.value[3]);
+	const timeProps = (0, vue.computed)(() => timePropsInfo.value[0]);
+	const filledLocale = require_useLocale.default(mergedLocale, localeTimeProps);
+	const internalPicker = (0, vue.computed)(() => {
+		if (props.picker === "date" && props.showTime) return "datetime";
+		return props.picker || "date";
+	});
+	const mergedShowTime = (0, vue.computed)(() => require_useTimeConfig.fillShowTimeConfig(internalPicker.value, showTimeFormat.value, propFormat.value, timeProps.value, filledLocale.value));
+	const now = (0, vue.computed)(() => mergedGenerateConfig.value?.getNow?.());
+	const internalModeState = (0, vue.ref)(props.picker || "date");
+	const mergedMode = (0, vue.computed)(() => props.mode || internalModeState.value);
+	const setMergedMode = (m) => {
+		internalModeState.value = m;
+	};
+	const internalMode = (0, vue.computed)(() => mergedMode.value === "date" && mergedShowTime.value ? "datetime" : mergedMode.value);
+	const toggleDates = require_useToggleDates.default(mergedGenerateConfig, filledLocale, internalPicker);
+	const internalValueState = (0, vue.ref)(props.defaultValue);
+	const innerValue = (0, vue.computed)(() => props.value !== void 0 ? props.value : internalValueState.value);
+	const setMergedValue = (val) => {
+		internalValueState.value = val;
+	};
+	const mergedValue = (0, vue.computed)(() => {
+		const vals = require_miscUtil.toArray(innerValue.value).filter((val) => val);
+		return props.multiple ? vals : vals.slice(0, 1);
+	});
+	const triggerChange = (nextValue) => {
+		setMergedValue(nextValue);
+		if (props.onChange && (nextValue === null || mergedValue.value.length !== nextValue.length || mergedValue.value.some((ori, index) => !require_dateUtil.isSame(mergedGenerateConfig.value, filledLocale.value, ori, nextValue[index], internalPicker.value)))) props.onChange(props.multiple ? nextValue : nextValue?.[0]);
+	};
+	const onInternalSelect = (newDate) => {
+		props.onSelect?.(newDate);
+		if (mergedMode.value === props.picker) triggerChange(props.multiple ? toggleDates(mergedValue.value, newDate) : [newDate]);
+	};
+	const internalPickerValueState = (0, vue.ref)(props.defaultPickerValue || mergedValue.value[0] || now.value);
+	const mergedPickerValue = (0, vue.computed)(() => props.pickerValue !== void 0 ? props.pickerValue : internalPickerValueState.value);
+	const setInternalPickerValue = (val) => {
+		internalPickerValueState.value = val;
+	};
+	(0, vue.watch)(() => mergedValue.value[0], (val) => {
+		if (val && props.pickerValue === void 0) setInternalPickerValue(val);
+	});
+	const triggerPanelChange = (viewDate, nextMode) => {
+		props.onPanelChange?.(viewDate || mergedPickerValue.value, nextMode || mergedMode.value);
+	};
+	const setPickerValue = (nextPickerValue, triggerPanelEvent = false) => {
+		setInternalPickerValue(nextPickerValue);
+		props.onPickerValueChange?.(nextPickerValue);
+		if (triggerPanelEvent) triggerPanelChange(nextPickerValue);
+	};
+	const triggerModeChange = (nextMode, viewDate) => {
+		setMergedMode(nextMode);
+		if (viewDate) setPickerValue(viewDate);
+		triggerPanelChange(viewDate, nextMode);
+	};
+	const onPanelValueSelect = (nextValue) => {
+		onInternalSelect(nextValue);
+		setPickerValue(nextValue);
+		if (mergedMode.value !== props.picker) {
+			const decadeYearQueue = ["decade", "year"];
+			const decadeYearMonthQueue = [...decadeYearQueue, "month"];
+			const queue = {
+				quarter: [...decadeYearQueue, "quarter"],
+				week: [...decadeYearMonthQueue, "week"],
+				date: [...decadeYearMonthQueue, "date"]
+			}[props.picker || "date"] || decadeYearMonthQueue;
+			const nextMode = queue[queue.indexOf(mergedMode.value) + 1];
+			if (nextMode) triggerModeChange(nextMode, nextValue);
+		}
+	};
+	const hoverRangeDate = (0, vue.computed)(() => {
+		let start;
+		let end;
+		if (Array.isArray(props.hoverRangeValue)) [start, end] = props.hoverRangeValue;
+		else start = props.hoverRangeValue;
+		if (!start && !end) return null;
+		start = start || end;
+		end = end || start;
+		return mergedGenerateConfig.value.isAfter(start, end) ? [end, start] : [start, end];
+	});
+	const onInternalCellRender = require_useCellRender.default((0, vue.toRef)(props, "cellRender"), (0, vue.toRef)(props, "dateRender"), (0, vue.toRef)(props, "monthCellRender"));
+	require_context$1.provideSharedPanelContext((0, vue.computed)(() => ({
+		classNames: pickerContext.value.classNames?.popup ?? props.classNames ?? {},
+		styles: pickerContext.value.styles?.popup ?? props.styles ?? {}
+	})));
+	const parentHackContext = require_context$1.usePickerHackContext();
+	require_context$1.providePickerHackContext((0, vue.computed)(() => ({
+		...parentHackContext?.value || {},
+		hideHeader: props.hideHeader
+	})));
+	if (process.env.NODE_ENV !== "production") (0, _v_c_util.warning)(!mergedValue.value || mergedValue.value.every((val) => mergedGenerateConfig.value.isValidate(val)), "Invalidate date pass to `value` or `defaultValue`.");
+	return () => {
+		const PanelComponent = props.components?.[internalMode.value] || DefaultComponents[internalMode.value] || require_index.default;
+		const panelCls = `${mergedPrefixCls.value}-panel`;
+		const panelProps = require_miscUtil.pickProps(props, [
+			"showWeek",
+			"prevIcon",
+			"nextIcon",
+			"superPrevIcon",
+			"superNextIcon",
+			"disabledDate",
+			"minDate",
+			"maxDate",
+			"onHover"
+		]);
+		return (0, vue.createVNode)("div", (0, vue.mergeProps)({
+			"ref": rootRef,
+			"tabindex": props.tabindex,
+			"class": (0, _v_c_util.clsx)(panelCls, { [`${panelCls}-rtl`]: props.direction === "rtl" })
+		}, attrs), [(0, vue.createVNode)(PanelComponent, (0, vue.mergeProps)(panelProps, {
+			"showTime": mergedShowTime.value,
+			"prefixCls": mergedPrefixCls.value,
+			"locale": filledLocale.value,
+			"generateConfig": mergedGenerateConfig.value,
+			"onModeChange": triggerModeChange,
+			"pickerValue": mergedPickerValue.value,
+			"onPickerValueChange": (nextPickerValue) => {
+				setPickerValue(nextPickerValue, true);
+			},
+			"value": mergedValue.value[0],
+			"onSelect": onPanelValueSelect,
+			"values": mergedValue.value,
+			"cellRender": onInternalCellRender,
+			"hoverRangeValue": hoverRangeDate.value,
+			"hoverValue": props.hoverValue
+		}), null)]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		onSelect: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		defaultPickerValue: {
+			required: false,
+			default: void 0
+		},
+		pickerValue: {
+			required: false,
+			default: void 0
+		},
+		onPickerValueChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		mode: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		onPanelChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		picker: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		showTime: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		showWeek: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		cellRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		dateRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		monthCellRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		hoverValue: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		hoverRangeValue: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		onHover: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		components: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		hideHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		locale: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		generateConfig: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		disabledDate: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		minDate: {
+			required: false,
+			default: void 0
+		},
+		maxDate: {
+			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
+		},
+		format: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		showNow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showHour: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showMinute: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showSecond: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showMillisecond: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		use12Hours: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		hourStep: {
+			required: false,
+			default: void 0
+		},
+		minuteStep: {
+			required: false,
+			default: void 0
+		},
+		secondStep: {
+			required: false,
+			default: void 0
+		},
+		millisecondStep: {
+			required: false,
+			default: void 0
+		},
+		hideDisabledOptions: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			type: [Array, null],
+			required: false,
+			default: void 0
+		},
+		defaultOpenValue: {
+			required: false,
+			default: void 0
+		},
+		disabledHours: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		disabledMinutes: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		disabledSeconds: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		disabledTime: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		changeOnScroll: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		tabindex: {
+			type: [
+				Number,
+				String,
+				null
+			],
+			required: false,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		value: {
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "PickerPanel",
+	inheritAttrs: false
+});
+var PickerPanel_default = PickerPanel;
+exports.default = PickerPanel_default;

package/dist/PickerPanel/index.d.ts

@@ -0,0 +1,65 @@
+import { VueNode } from '../../../util/src/type';
+import { CSSProperties, HTMLAttributes } from 'vue';
+import { CellRender, Components, Locale, OnPanelChange, PanelMode, PanelSemanticName, PickerMode, SharedPanelProps, SharedTimeProps } from '../interface';
+export interface PickerPanelRef {
+    nativeElement: HTMLDivElement;
+}
+export interface BasePickerPanelProps<DateType extends object = any> extends Pick<SharedPanelProps<DateType>, 'locale' | 'generateConfig' | 'disabledDate' | 'minDate' | 'maxDate' | 'prevIcon' | 'nextIcon' | 'superPrevIcon' | 'superNextIcon'>, SharedTimeProps<DateType>, Pick<HTMLAttributes, 'tabindex'> {
+    prefixCls?: string;
+    direction?: 'ltr' | 'rtl';
+    onSelect?: (date: DateType) => void;
+    defaultPickerValue?: DateType | null;
+    pickerValue?: DateType | null;
+    onPickerValueChange?: (date: DateType) => void;
+    mode?: PanelMode;
+    /**
+     * Compatible with origin API.
+     * Not mean the PickerPanel `onChange` event.
+     */
+    onPanelChange?: OnPanelChange<DateType>;
+    picker?: PickerMode;
+    showTime?: true | SharedTimeProps<DateType>;
+    /**
+     * Only worked in `date` mode. Show the current week
+     */
+    showWeek?: boolean;
+    cellRender?: CellRender<DateType>;
+    /** @deprecated use cellRender instead of dateRender */
+    dateRender?: (currentDate: DateType, today: DateType) => VueNode;
+    /** @deprecated use cellRender instead of monthCellRender */
+    monthCellRender?: (currentDate: DateType, locale: Locale) => VueNode;
+    /** @private Used for Picker passing */
+    hoverValue?: DateType[];
+    /** @private Used for Picker passing */
+    hoverRangeValue?: [start: DateType, end: DateType];
+    /** @private Used for Picker passing */
+    onHover?: (date: DateType) => void;
+    components?: Components;
+    /** @private This is internal usage. Do not use in your production env */
+    hideHeader?: boolean;
+}
+export interface SinglePickerPanelProps<DateType extends object = any> extends BasePickerPanelProps<DateType> {
+    multiple?: false;
+    defaultValue?: DateType;
+    value?: DateType | null;
+    onChange?: (date: DateType) => void;
+}
+export type PickerPanelProps<DateType extends object = any> = BasePickerPanelProps<DateType> & {
+    /** multiple selection. Not support time or datetime picker */
+    multiple?: boolean;
+    defaultValue?: DateType | DateType[] | null;
+    value?: DateType | DateType[] | null;
+    onChange?: (date: DateType | DateType[]) => void;
+    styles?: Partial<Record<PanelSemanticName, CSSProperties>>;
+    classNames?: Partial<Record<PanelSemanticName, string>>;
+};
+declare const PickerPanel: import('vue').DefineSetupFnComponent<PickerPanelProps<any>, {}, {}, BasePickerPanelProps<any> & {
+    /** multiple selection. Not support time or datetime picker */
+    multiple?: boolean;
+    defaultValue?: any;
+    value?: any;
+    onChange?: ((date: any) => void) | undefined;
+    styles?: Partial<Record<PanelSemanticName, CSSProperties>>;
+    classNames?: Partial<Record<PanelSemanticName, string>>;
+} & {}, import('vue').PublicProps>;
+export default PickerPanel;