@v-c/picker 0.0.1

package/dist/PickerPanel/PanelHeader.js

@@ -0,0 +1,126 @@
+import { isSameOrAfter } from "../utils/dateUtil.js";
+import { usePanelContext, usePickerHackContext } from "./context.js";
+import { computed, createVNode, defineComponent } from "vue";
+import { clsx } from "@v-c/util";
+var HIDDEN_STYLE = { visibility: "hidden" };
+var PanelHeader_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const context = usePanelContext();
+	const pickerHackContext = usePickerHackContext();
+	const disabledOffsetPrev = computed(() => {
+		const { minDate, generateConfig, locale, pickerValue, panelType } = context.value;
+		const { offset, getEnd } = props;
+		if (!minDate || !offset || !getEnd) return false;
+		return !isSameOrAfter(generateConfig, locale, getEnd(offset(-1, pickerValue)), minDate, panelType);
+	});
+	const disabledSuperOffsetPrev = computed(() => {
+		const { minDate, generateConfig, locale, pickerValue, panelType } = context.value;
+		const { superOffset, getEnd } = props;
+		if (!minDate || !superOffset || !getEnd) return false;
+		return !isSameOrAfter(generateConfig, locale, getEnd(superOffset(-1, pickerValue)), minDate, panelType);
+	});
+	const disabledOffsetNext = computed(() => {
+		const { maxDate, generateConfig, locale, pickerValue, panelType } = context.value;
+		const { offset, getStart } = props;
+		if (!maxDate || !offset || !getStart) return false;
+		return !isSameOrAfter(generateConfig, locale, maxDate, getStart(offset(1, pickerValue)), panelType);
+	});
+	const disabledSuperOffsetNext = computed(() => {
+		const { maxDate, generateConfig, locale, pickerValue, panelType } = context.value;
+		const { superOffset, getStart } = props;
+		if (!maxDate || !superOffset || !getStart) return false;
+		return !isSameOrAfter(generateConfig, locale, maxDate, getStart(superOffset(1, pickerValue)), panelType);
+	});
+	const onOffset = (distance) => {
+		const { offset, onChange } = props;
+		const { pickerValue } = context.value;
+		if (offset && onChange) onChange(offset(distance, pickerValue));
+	};
+	const onSuperOffset = (distance) => {
+		const { superOffset, onChange } = props;
+		const { pickerValue } = context.value;
+		if (superOffset && onChange) onChange(superOffset(distance, pickerValue));
+	};
+	return () => {
+		const { prefixCls, classNames: panelClassNames, styles, prevIcon = "‹", nextIcon = "›", superPrevIcon = "«", superNextIcon = "»", locale } = context.value;
+		const { hidePrev, hideNext, hideHeader } = pickerHackContext?.value || {};
+		const { offset, superOffset } = props;
+		if (hideHeader) return null;
+		const headerPrefixCls = `${prefixCls}-header`;
+		const prevBtnCls = `${headerPrefixCls}-prev-btn`;
+		const nextBtnCls = `${headerPrefixCls}-next-btn`;
+		const superPrevBtnCls = `${headerPrefixCls}-super-prev-btn`;
+		const superNextBtnCls = `${headerPrefixCls}-super-next-btn`;
+		return createVNode("div", {
+			"class": clsx(headerPrefixCls, panelClassNames?.header),
+			"style": styles?.header
+		}, [
+			superOffset && createVNode("button", {
+				"type": "button",
+				"aria-label": locale?.previousYear,
+				"onClick": () => onSuperOffset(-1),
+				"tabindex": -1,
+				"class": clsx(superPrevBtnCls, disabledSuperOffsetPrev.value && `${superPrevBtnCls}-disabled`),
+				"disabled": disabledSuperOffsetPrev.value,
+				"style": hidePrev ? HIDDEN_STYLE : {}
+			}, [superPrevIcon]),
+			offset && createVNode("button", {
+				"type": "button",
+				"aria-label": locale?.previousMonth,
+				"onClick": () => onOffset(-1),
+				"tabindex": -1,
+				"class": clsx(prevBtnCls, disabledOffsetPrev.value && `${prevBtnCls}-disabled`),
+				"disabled": disabledOffsetPrev.value,
+				"style": hidePrev ? HIDDEN_STYLE : {}
+			}, [prevIcon]),
+			createVNode("div", { "class": `${headerPrefixCls}-view` }, [slots.default?.()]),
+			offset && createVNode("button", {
+				"type": "button",
+				"aria-label": locale?.nextMonth,
+				"onClick": () => onOffset(1),
+				"tabindex": -1,
+				"class": clsx(nextBtnCls, disabledOffsetNext.value && `${nextBtnCls}-disabled`),
+				"disabled": disabledOffsetNext.value,
+				"style": hideNext ? HIDDEN_STYLE : {}
+			}, [nextIcon]),
+			superOffset && createVNode("button", {
+				"type": "button",
+				"aria-label": locale?.nextYear,
+				"onClick": () => onSuperOffset(1),
+				"tabindex": -1,
+				"class": clsx(superNextBtnCls, disabledSuperOffsetNext.value && `${superNextBtnCls}-disabled`),
+				"disabled": disabledSuperOffsetNext.value,
+				"style": hideNext ? HIDDEN_STYLE : {}
+			}, [superNextIcon])
+		]);
+	};
+}, {
+	props: {
+		offset: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		superOffset: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		getStart: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		getEnd: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "PanelHeader"
+});
+export { PanelHeader_default as default };

package/dist/PickerPanel/QuarterPanel/index.cjs

@@ -0,0 +1,211 @@
+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");
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+}
+var QuarterPanel = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const sharedContext = require_context.useSharedPanelContext();
+	require_context.providePanelContext((0, vue.computed)(() => {
+		const [info] = require_context.useInfo(props, "quarter", sharedContext);
+		return info;
+	}));
+	return () => {
+		const { prefixCls, locale = {}, generateConfig = {}, pickerValue, onPickerValueChange, onModeChange } = props;
+		const panelPrefixCls = `${prefixCls}-quarter-panel`;
+		const baseDate = generateConfig.setMonth(pickerValue, 0);
+		const cellQuarterFormat = locale.cellQuarterFormat || "[Q]Q";
+		const yearFormat = locale.yearFormat || "YYYY";
+		const getCellDate = (date, offset) => {
+			return generateConfig.addMonth(date, offset * 3);
+		};
+		const getCellText = (date) => {
+			return require_dateUtil.formatValue(date, {
+				locale,
+				format: cellQuarterFormat,
+				generateConfig
+			});
+		};
+		const getCellClassName = () => ({ [`${prefixCls}-cell-in-view`]: true });
+		const yearNode = (0, vue.createVNode)("button", {
+			"type": "button",
+			"key": "year",
+			"aria-label": locale.yearSelect,
+			"onClick": () => {
+				onModeChange?.("year");
+			},
+			"tabindex": -1,
+			"class": `${prefixCls}-year-btn`
+		}, [require_dateUtil.formatValue(pickerValue, {
+			locale,
+			format: yearFormat,
+			generateConfig
+		})]);
+		return (0, vue.createVNode)("div", { "class": panelPrefixCls }, [(0, vue.createVNode)(require_PanelHeader.default, {
+			"superOffset": (distance, date) => generateConfig.addYear(date, distance),
+			"onChange": onPickerValueChange,
+			"getStart": (date) => generateConfig.setMonth(date, 0),
+			"getEnd": (date) => generateConfig.setMonth(date, 11)
+		}, _isSlot(yearNode) ? yearNode : { default: () => [yearNode] }), (0, vue.createVNode)(require_PanelBody.default, (0, vue.mergeProps)(props, {
+			"titleFormat": locale.fieldQuarterFormat,
+			"colNum": 4,
+			"rowNum": 1,
+			"baseDate": baseDate,
+			"getCellDate": getCellDate,
+			"getCellText": getCellText,
+			"getCellClassName": getCellClassName
+		}), null)]);
+	};
+}, {
+	props: {
+		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: "QuarterPanel",
+	inheritAttrs: false
+});
+var QuarterPanel_default = QuarterPanel;
+exports.default = QuarterPanel_default;

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

@@ -0,0 +1,3 @@
+import { SharedPanelProps } from '../../interface';
+declare const QuarterPanel: import('vue').DefineSetupFnComponent<SharedPanelProps<any>, {}, {}, SharedPanelProps<any> & {}, import('vue').PublicProps>;
+export default QuarterPanel;

package/dist/PickerPanel/QuarterPanel/index.js

@@ -0,0 +1,205 @@
+import { formatValue } from "../../utils/dateUtil.js";
+import { providePanelContext, useInfo, useSharedPanelContext } from "../context.js";
+import PanelBody_default from "../PanelBody.js";
+import PanelHeader_default from "../PanelHeader.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var QuarterPanel_default = /* @__PURE__ */ defineComponent((props) => {
+	const sharedContext = useSharedPanelContext();
+	providePanelContext(computed(() => {
+		const [info] = useInfo(props, "quarter", sharedContext);
+		return info;
+	}));
+	return () => {
+		const { prefixCls, locale = {}, generateConfig = {}, pickerValue, onPickerValueChange, onModeChange } = props;
+		const panelPrefixCls = `${prefixCls}-quarter-panel`;
+		const baseDate = generateConfig.setMonth(pickerValue, 0);
+		const cellQuarterFormat = locale.cellQuarterFormat || "[Q]Q";
+		const yearFormat = locale.yearFormat || "YYYY";
+		const getCellDate = (date, offset) => {
+			return generateConfig.addMonth(date, offset * 3);
+		};
+		const getCellText = (date) => {
+			return formatValue(date, {
+				locale,
+				format: cellQuarterFormat,
+				generateConfig
+			});
+		};
+		const getCellClassName = () => ({ [`${prefixCls}-cell-in-view`]: true });
+		const yearNode = createVNode("button", {
+			"type": "button",
+			"key": "year",
+			"aria-label": locale.yearSelect,
+			"onClick": () => {
+				onModeChange?.("year");
+			},
+			"tabindex": -1,
+			"class": `${prefixCls}-year-btn`
+		}, [formatValue(pickerValue, {
+			locale,
+			format: yearFormat,
+			generateConfig
+		})]);
+		return createVNode("div", { "class": panelPrefixCls }, [createVNode(PanelHeader_default, {
+			"superOffset": (distance, date) => generateConfig.addYear(date, distance),
+			"onChange": onPickerValueChange,
+			"getStart": (date) => generateConfig.setMonth(date, 0),
+			"getEnd": (date) => generateConfig.setMonth(date, 11)
+		}, _isSlot(yearNode) ? yearNode : { default: () => [yearNode] }), createVNode(PanelBody_default, mergeProps(props, {
+			"titleFormat": locale.fieldQuarterFormat,
+			"colNum": 4,
+			"rowNum": 1,
+			"baseDate": baseDate,
+			"getCellDate": getCellDate,
+			"getCellText": getCellText,
+			"getCellClassName": getCellClassName
+		}), null)]);
+	};
+}, {
+	props: {
+		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: "QuarterPanel",
+	inheritAttrs: false
+});
+export { QuarterPanel_default as default };

package/dist/PickerPanel/TimePanel/TimePanelBody/TimeColumn.cjs

@@ -0,0 +1,145 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../../../_virtual/rolldown_runtime.cjs");
+const require_context = require("../../context.cjs");
+const require_useScrollTo = require("./useScrollTo.cjs");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+var SCROLL_DELAY = 300;
+function flattenUnits(units) {
+	return units.map(({ value, label, disabled }) => [
+		value,
+		label,
+		disabled
+	].join(",")).join(";");
+}
+var TimeColumn = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const context = require_context.usePanelContext();
+	const ulRef = (0, vue.ref)();
+	const checkDelayRef = (0, vue.ref)();
+	const clearDelayCheck = () => {
+		clearTimeout(checkDelayRef.value);
+	};
+	const [syncScroll, stopScroll, isScrolling] = require_useScrollTo.default(ulRef, (0, vue.computed)(() => props.value ?? props.optionalValue));
+	(0, vue.watch)([
+		() => props.value,
+		() => props.optionalValue,
+		() => flattenUnits(props.units)
+	], () => {
+		syncScroll();
+		clearDelayCheck();
+	}, { flush: "post" });
+	(0, vue.onMounted)(() => {
+		syncScroll();
+	});
+	(0, vue.onBeforeUnmount)(() => {
+		stopScroll();
+		clearDelayCheck();
+	});
+	const onInternalScroll = (event) => {
+		clearDelayCheck();
+		const target = event.target;
+		if (!isScrolling() && props.changeOnScroll) checkDelayRef.value = setTimeout(() => {
+			const ul = ulRef.value;
+			const firstLiTop = ul.querySelector(`li`).offsetTop;
+			const liDistList = Array.from(ul.querySelectorAll(`li`)).map((li) => li.offsetTop - firstLiTop).map((top, index) => {
+				if (props.units[index].disabled) return Number.MAX_SAFE_INTEGER;
+				return Math.abs(top - target.scrollTop);
+			});
+			const minDist = Math.min(...liDistList);
+			const minDistIndex = liDistList.findIndex((dist) => dist === minDist);
+			const targetUnit = props.units[minDistIndex];
+			if (targetUnit && !targetUnit.disabled) props.onChange(targetUnit.value);
+		}, SCROLL_DELAY);
+	};
+	return () => {
+		const { units, value, type, onChange, onHover, onDblClick } = props;
+		const { prefixCls, cellRender, now, locale, classNames: panelClassNames, styles } = context.value;
+		const panelPrefixCls = `${prefixCls}-time-panel`;
+		const cellPrefixCls = `${prefixCls}-time-panel-cell`;
+		const columnPrefixCls = `${panelPrefixCls}-column`;
+		return (0, vue.createVNode)("ul", {
+			"class": columnPrefixCls,
+			"ref": ulRef,
+			"data-type": type,
+			"onScroll": onInternalScroll
+		}, [units.map(({ label, value: unitValue, disabled }) => {
+			const inner = (0, vue.createVNode)("div", { "class": `${cellPrefixCls}-inner` }, [label]);
+			return (0, vue.createVNode)("li", {
+				"key": unitValue,
+				"style": styles?.item,
+				"class": (0, _v_c_util.clsx)(cellPrefixCls, panelClassNames?.item, {
+					[`${cellPrefixCls}-selected`]: value === unitValue,
+					[`${cellPrefixCls}-disabled`]: disabled
+				}),
+				"onClick": () => {
+					if (!disabled) onChange(unitValue);
+				},
+				"onDblclick": () => {
+					if (!disabled && onDblClick) onDblClick();
+				},
+				"onMouseenter": () => {
+					onHover(unitValue);
+				},
+				"onMouseleave": () => {
+					onHover(null);
+				},
+				"data-value": unitValue
+			}, [cellRender ? cellRender(unitValue, {
+				prefixCls,
+				originNode: inner,
+				today: now,
+				type: "time",
+				subType: type,
+				locale
+			}) : inner]);
+		})]);
+	};
+}, {
+	props: {
+		units: {
+			type: Array,
+			required: true,
+			default: void 0
+		},
+		value: {
+			type: [Number, String],
+			required: false,
+			default: void 0
+		},
+		optionalValue: {
+			type: [Number, String],
+			required: false,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		onHover: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		onDblClick: {
+			required: false,
+			default: void 0
+		},
+		changeOnScroll: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "TimeColumn"
+});
+var TimeColumn_default = TimeColumn;
+exports.default = TimeColumn_default;

package/dist/PickerPanel/TimePanel/TimePanelBody/TimeColumn.d.ts

@@ -0,0 +1,17 @@
+export interface Unit<ValueType = number | string> {
+    label: any;
+    value: ValueType;
+    disabled?: boolean;
+}
+export interface TimeColumnProps {
+    units: Unit[];
+    value?: number | string;
+    optionalValue?: number | string;
+    type: 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem';
+    onChange: (value: number | string) => void;
+    onHover: (value: number | string) => void;
+    onDblClick?: VoidFunction;
+    changeOnScroll?: boolean;
+}
+declare const TimeColumn: import('vue').DefineSetupFnComponent<TimeColumnProps, {}, {}, TimeColumnProps & {}, import('vue').PublicProps>;
+export default TimeColumn;