@xihan-ui/vue 1.1.0 → 2.0.0

package/dist/components/date-picker/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","names":[],"sources":["../../../src/components/date-picker/date-picker.ts"],"mappings":"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"}
+{"version":3,"file":"date-picker.d.ts","names":[],"sources":["../../../src/components/date-picker/date-picker.ts"],"mappings":"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"}

package/dist/components/date-picker/date-picker.js

@@ -1,143 +1,80 @@
 import { withXhConfig } from "../../config/config.js";
+import { XhPortal } from "../../runtime/portal.js";
 import { useScrollbars } from "../../runtime/use-scrollbars.js";
+import { useFormControlProps } from "../form/use-form-control.js";
 import { useFieldLabelWiring, useFieldStateWiring } from "../field/use-field-control.js";
 import { slotPaints } from "../../runtime/slot-content.js";
-import { provideDatePicker, provideDatePickerCell, provideDatePickerPanel, provideDatePickerSegmentGroup, useDatePickerCellContext, useDatePickerContext, useDatePickerPanelContext, useDatePickerSegmentGroupContext } from "./context.js";
-import { useDatePicker } from "./use-date-picker.js";
-import { Teleport, computed, defineComponent, h, mergeProps } from "vue";
+import { provideDatePicker, provideDatePickerCell, provideDatePickerPanel, useDatePickerCellContext, useDatePickerContext, useDatePickerPanelContext } from "./context.js";
+import { useDatePickerWithRoot } from "./use-date-picker.js";
+import { computed, defineComponent, h, mergeProps, onUpdated, ref } from "vue";
+import { resolveDatePickerPanelIndex } from "@xihan-ui/headless";
 //#region src/components/date-picker/date-picker.ts
 /**
-* 部件属于并排的第几张面板：自己写了就按自己写的，没写就跟着所在的日历走。
-* 兼收字符串以支持模板里写 index="1"。
+* 部件属于并排的第几张面板：自己写了即按自己写的，未写时跟随所在的日历。
+* 兼收字符串以支持模板中写 index="1"。
 */
 function usePanelIndex(props) {
 	const panel = useDatePickerPanelContext();
-	return computed(() => {
-		if (props.index === void 0 || props.index === "") return panel.index.value;
-		const n = Math.trunc(Number(props.index));
-		return Number.isFinite(n) && n >= 0 ? n : panel.index.value;
-	});
-}
-/** 按组号取那一组分段输入；非区间模式下终点那组缺席。 */
-function fieldOf(api, index) {
-	return index === 1 ? api.fieldEnd : api.field;
+	return computed(() => resolveDatePickerPanelIndex(props.index, panel.index.value));
 }
 const XhDatePickerRoot = defineComponent({
 	name: "XhDatePickerRoot",
 	props: {
-		value: {
-			type: [String, Array],
-			default: void 0
-		},
-		defaultValue: {
-			type: [String, Array],
-			default: void 0
-		},
+		value: { type: [String, Array] },
+		defaultValue: { type: [String, Array] },
 		open: {
 			type: Boolean,
 			default: void 0
 		},
 		defaultOpen: Boolean,
-		min: {
-			type: String,
-			default: void 0
-		},
-		max: {
-			type: String,
-			default: void 0
-		},
-		locale: {
-			type: String,
-			default: void 0
-		},
-		timeZone: {
-			type: String,
-			default: void 0
-		},
-		selectionMode: {
-			type: String,
-			default: void 0
-		},
-		/** 挑的粒度：天（默认）/ 月 / 季度 / 年。输入行铺哪几段也跟着它走。 */
-		view: {
-			type: String,
-			default: void 0
-		},
-		/** 面板此刻钻到了哪一层；给定即受控，缺省跟着 view。 */
-		activeView: {
-			type: String,
-			default: void 0
-		},
-		/** 输入行铺哪几段；不给就按 view 推。 */
-		segments: {
-			type: Array,
-			default: void 0
-		},
-		/** 周选：点任意一天选中它所在的整周。只在 view=day 且区间模式下生效。 */
-		weekSelection: {
-			type: Boolean,
-			default: void 0
-		},
-		/** 并排展示几页；缺省单选 1，区间按两端定：同一页放得下就 1，跨页才 2。 */
-		visibleCount: {
-			type: Number,
-			default: void 0
-		},
-		/** 日历恒渲染六行，默认开。关掉后翻页时浮层高度会跟着月份变。 */
+		min: { type: String },
+		max: { type: String },
+		locale: { type: String },
+		timeZone: { type: String },
+		selectionMode: { type: String },
+		/** 选择粒度；与 selectionMode 正交，输入行铺设哪几段也跟随它。 */
+		granularity: { type: String },
+		/** 面板当前所处的层级；给定即受控，默认跟随 granularity。 */
+		activeView: { type: String },
+		/** 输入行铺设哪几段；未提供时按 granularity 推导。 */
+		segments: { type: Array },
+		/** 并排展示几页；默认 1。 */
+		visibleCount: { type: Number },
+		/** 日历恒渲染六行，默认开启。关闭后翻页时浮层高度会随月份变化。 */
 		fixedWeeks: {
 			type: Boolean,
 			default: void 0
 		},
-		/** 初始聚焦日，同时决定展开时先落在哪一页；不给就退回首个选中值，再退回今天。 */
-		defaultFocusedValue: {
-			type: String,
-			default: void 0
-		},
-		/** 快捷选项；给了就在浮层里多出一列，日子要在自己的 computed 里算好再传。 */
-		presets: {
-			type: Array,
-			default: void 0
-		},
-		isDateUnavailable: {
-			type: Function,
-			default: void 0
-		},
-		disabled: Boolean,
-		readOnly: Boolean,
-		invalid: Boolean,
-		required: Boolean,
-		name: {
-			type: String,
-			default: void 0
-		},
-		endName: {
-			type: String,
-			default: void 0
-		},
-		translations: {
-			type: Object,
-			default: void 0
-		},
-		variant: {
-			type: String,
-			default: void 0
-		},
-		tone: {
-			type: String,
+		/** 初始聚焦日，同时决定展开时先落在哪一页；未提供时退回首个选中值，再退回今天。 */
+		defaultFocusedValue: { type: String },
+		/** 快捷选项；提供后浮层中多出一列，日期要在自己的 computed 中计算后再传入。 */
+		presets: { type: Array },
+		isDateUnavailable: { type: Function },
+		disabled: {
+			type: Boolean,
 			default: void 0
 		},
-		size: {
-			type: String,
+		readOnly: {
+			type: Boolean,
 			default: void 0
 		},
-		placement: {
-			type: String,
+		invalid: {
+			type: Boolean,
 			default: void 0
 		},
-		offset: {
-			type: Number,
+		required: {
+			type: Boolean,
 			default: void 0
 		},
+		name: { type: String },
+		translations: { type: Object },
+		variant: { type: String },
+		tone: { type: String },
+		size: { type: String },
+		placement: { type: String },
+		offset: { type: Number },
+		/** 文字方向；浮层迁移到落点后无法继承作者子树上的方向，需要 RTL 时显式提供。 */
+		dir: { type: String },
 		closeOnSelect: {
 			type: Boolean,
 			default: void 0
@@ -146,10 +83,7 @@ const XhDatePickerRoot = defineComponent({
 			type: Boolean,
 			default: void 0
 		},
-		timeGranularity: {
-			type: String,
-			default: void 0
-		}
+		timeGranularity: { type: String }
 	},
 	emits: {
 		"value-change": (_details) => true,
@@ -162,6 +96,7 @@ const XhDatePickerRoot = defineComponent({
 	},
 	slots: Object,
 	setup(props, { slots, emit }) {
+		const rootRef = ref(null);
 		const notifyValue = (details) => {
 			emit("value-change", details);
 			emit("update:value", details.value);
@@ -175,27 +110,31 @@ const XhDatePickerRoot = defineComponent({
 			emit("active-view-change", details);
 			emit("update:activeView", details.activeView);
 		};
-		const ctx = useDatePicker(withXhConfig("date-picker", props), {
+		const ctx = useDatePickerWithRoot(withXhConfig("date-picker", useFormControlProps(props)), {
 			onValueChange: notifyValue,
 			onOpenChange: notifyOpen,
 			onFocusedValueChange: notifyFocus,
 			onActiveViewChange: notifyActiveView
-		});
+		}, rootRef);
 		provideDatePicker(ctx);
-		return () => h("div", ctx.api.value.getRootProps(), slots.default?.({
+		return () => h("div", {
+			...ctx.api.value.getRootProps(),
+			ref: rootRef
+		}, slots.default?.({
 			open: ctx.api.value.open,
 			value: ctx.api.value.value,
 			valueAsString: ctx.api.value.valueAsString,
+			periodValue: ctx.api.value.periodValue,
 			focusedValue: ctx.api.value.focusedValue,
 			visibleMonth: ctx.api.value.calendar.visibleMonth,
 			panels: ctx.api.value.calendar.panels,
+			periods: ctx.api.value.calendar.periods,
 			weeks: ctx.api.value.calendar.weeks,
 			weekDays: ctx.api.value.calendar.weekDays,
 			headingLabel: ctx.api.value.calendar.headingLabel,
 			canGoPrev: ctx.api.value.calendar.canGoPrev,
 			canGoNext: ctx.api.value.calendar.canGoNext,
 			segments: ctx.api.value.field.segments,
-			endSegments: ctx.api.value.fieldEnd?.segments ?? [],
 			canClear: ctx.api.value.canClear,
 			setOpen: ctx.api.value.setOpen,
 			setValue: ctx.api.value.setValue,
@@ -224,37 +163,23 @@ const XhDatePickerControl = defineComponent({
 });
 const XhDatePickerSegmentGroup = defineComponent({
 	name: "XhDatePickerSegmentGroup",
-	props: { index: {
-		type: [Number, String],
-		default: 0
-	} },
-	setup(props, { slots }) {
+	setup(_, { slots }) {
 		const ctx = useDatePickerContext();
-		const index = computed(() => Number(props.index) === 1 ? 1 : 0);
-		provideDatePickerSegmentGroup({ index });
-		return () => h("div", ctx.api.value.getSegmentGroupProps({ index: index.value }), slots.default?.());
+		return () => h("div", ctx.api.value.getSegmentGroupProps(), slots.default?.());
 	}
 });
 const XhDatePickerSegment = defineComponent({
 	name: "XhDatePickerSegment",
 	props: {
-		index: {
-			type: [Number, String],
-			default: void 0
-		},
-		/** 按段名声明这一格。段集里没有这一块时它收起；与 index 二选一，两个都写按段名算。 */
-		segment: {
-			type: String,
-			default: void 0
-		}
+		index: { type: [Number, String] },
+		/** 按段名声明该格。段集中没有该段时它收起；与 index 二选一，两个都写时按段名计算。 */
+		segment: { type: String }
 	},
 	slots: Object,
 	setup(props, { slots }) {
 		const ctx = useDatePickerContext();
-		const group = useDatePickerSegmentGroupContext();
 		return () => {
-			const field = fieldOf(ctx.api.value, group.index.value);
-			if (!field) return null;
+			const { field } = ctx.api.value;
 			const declared = props.segment != null ? { segment: props.segment } : { index: Math.trunc(Number(props.index)) };
 			const state = field.segmentOf(declared);
 			return h("div", field.getSegmentProps(declared), slots.default ? slots.default({ segment: state }) : state?.text);
@@ -275,23 +200,41 @@ const XhDatePickerTrigger = defineComponent({
 		const fieldLabel = useFieldLabelWiring();
 		const ctx = useDatePickerContext();
 		return () => h("button", fieldLabel.value({
-			...ctx.api.value.getTriggerProps(),
-			...fieldWiring.value
+			...fieldWiring.value,
+			...ctx.api.value.getTriggerProps()
 		}), slots.default?.());
 	}
 });
 const XhDatePickerPositioner = defineComponent({
 	name: "XhDatePickerPositioner",
+	props: { 
+	/** 本实例的 Portal 容器；优先于应用级配置。 */
+container: { type: Object } },
 	inheritAttrs: false,
-	setup(_, { slots, attrs }) {
+	setup(props, { slots, attrs }) {
 		const ctx = useDatePickerContext();
-		const bars = useScrollbars({ scrollable: () => ctx.contentRef.value });
-		return () => h(Teleport, { to: ctx.portalTarget.value }, [h("div", {
-			...mergeProps(ctx.api.value.getPositionerProps(), attrs),
-			ref: (el) => {
-				ctx.positionerRef.value = el;
-			}
-		}, [...slots.default?.() ?? [], ...bars.render()])]);
+		const bars = useScrollbars({
+			scrollable: () => ctx.contentRef.value,
+			scope: ctx.services.root.scope,
+			axes: ["vertical", "horizontal"],
+			props: () => ({
+				dir: ctx.api.value.getPositionerProps().dir,
+				size: "sm"
+			})
+		});
+		return () => {
+			const target = props.container ?? ctx.portalTarget.value;
+			return h(XhPortal, {
+				to: target,
+				source: ctx.controlRef,
+				disabled: props.container == null && typeof target === "string"
+			}, () => [h("div", {
+				...mergeProps(ctx.api.value.getPositionerProps(), attrs),
+				ref: (el) => {
+					ctx.positionerRef.value = el;
+				}
+			}, [...slots.default?.() ?? [], ...bars.render()])]);
+		};
 	}
 });
 const XhDatePickerContent = defineComponent({
@@ -321,25 +264,42 @@ index: {
 		return () => h("div", ctx.api.value.getCalendarProps(), slots.default?.());
 	}
 });
-const XhDatePickerPresets = defineComponent({
-	name: "XhDatePickerPresets",
+const XhDatePickerPresetGroup = defineComponent({
+	name: "XhDatePickerPresetGroup",
 	slots: Object,
-	setup(_, { slots }) {
+	inheritAttrs: false,
+	setup(_, { slots, attrs }) {
 		const ctx = useDatePickerContext();
+		const presetGroupRef = ref(null);
+		const bars = useScrollbars({
+			scrollable: () => presetGroupRef.value,
+			anchor: "layer",
+			axes: ["vertical", "horizontal"],
+			props: () => ({
+				dir: ctx.api.value.getPositionerProps().dir,
+				size: "sm"
+			})
+		});
+		onUpdated(() => bars.measure());
 		return () => {
 			const api = ctx.api.value;
 			const authored = slots.default?.({ presets: api.presets });
-			return h("div", api.getPresetsProps(), slotPaints(authored) ? authored : api.presets.map((preset) => h("div", {
+			return [h("div", {
+				...mergeProps(api.getPresetGroupProps(), attrs),
+				ref: (el) => {
+					presetGroupRef.value = el;
+				}
+			}, slotPaints(authored) ? authored : api.presets.map((preset) => h("div", {
 				...api.getPresetProps({ value: preset.value }),
 				key: preset.value
-			}, preset.label)));
+			}, preset.label))), ...bars.render()];
 		};
 	}
 });
 const XhDatePickerPreset = defineComponent({
 	name: "XhDatePickerPreset",
 	props: { 
-	/** 这一条的身份，与 presets 数据里的 value 逐字对上。 */
+	/** 该条目的身份，与 presets 数据中的 value 逐字对应。 */
 value: {
 		type: String,
 		required: true
@@ -354,20 +314,52 @@ value: {
 		};
 	}
 });
+/** 一列时间选项连同贴在它盒子上的竖条：每列一台滚动条机器，列数随 showSeconds 变时组件实例跟着增减。 */
+const XhDatePickerTimeColumnHost = defineComponent({
+	name: "XhDatePickerTimeColumnHost",
+	props: { unit: {
+		type: String,
+		required: true
+	} },
+	setup(props) {
+		const ctx = useDatePickerContext();
+		const timeColumnRef = ref(null);
+		const bars = useScrollbars({
+			scrollable: () => timeColumnRef.value,
+			anchor: "layer",
+			props: () => ({
+				dir: ctx.api.value.getPositionerProps().dir,
+				size: "sm"
+			})
+		});
+		onUpdated(() => bars.measure());
+		return () => {
+			const api = ctx.api.value;
+			const column = api.timeColumns.find((item) => item.unit === props.unit);
+			if (!column) return null;
+			return [h("div", {
+				...api.getTimeColumnProps({ unit: column.unit }),
+				ref: (el) => {
+					timeColumnRef.value = el;
+				}
+			}, column.options.map((option) => h("div", {
+				...api.getTimeItemProps({
+					unit: column.unit,
+					value: option
+				}),
+				key: option
+			}, option))), ...bars.render()];
+		};
+	}
+});
 const XhDatePickerTimePanel = defineComponent({
 	name: "XhDatePickerTimePanel",
 	setup() {
 		const ctx = useDatePickerContext();
-		return () => ctx.api.value.timeColumns.map((column) => h("div", {
-			...ctx.api.value.getTimeColumnProps({ unit: column.unit }),
+		return () => ctx.api.value.timeColumns.map((column) => h(XhDatePickerTimeColumnHost, {
+			unit: column.unit,
 			key: column.unit
-		}, column.options.map((option) => h("div", {
-			...ctx.api.value.getTimeItemProps({
-				unit: column.unit,
-				value: option
-			}),
-			key: option
-		}, option))));
+		}));
 	}
 });
 const XhDatePickerConfirmTrigger = defineComponent({
@@ -415,11 +407,8 @@ const XhDatePickerNextYearTrigger = defineComponent({
 const XhDatePickerHeading = defineComponent({
 	name: "XhDatePickerHeading",
 	props: { 
-	/** 属于第几个面板；不写就跟着所在的日历走。 */
-index: {
-		type: [Number, String],
-		default: void 0
-	} },
+	/** 属于第几个面板；未写时跟随所在的日历。 */
+index: { type: [Number, String] } },
 	setup(props, { slots }) {
 		const ctx = useDatePickerContext();
 		const index = usePanelIndex(props);
@@ -429,11 +418,8 @@ index: {
 const XhDatePickerHeadingYearTrigger = defineComponent({
 	name: "XhDatePickerHeadingYearTrigger",
 	props: { 
-	/** 属于第几个面板；不写就跟着所在的日历走。 */
-index: {
-		type: [Number, String],
-		default: void 0
-	} },
+	/** 属于第几个面板；未写时跟随所在的日历。 */
+index: { type: [Number, String] } },
 	setup(props, { slots }) {
 		const ctx = useDatePickerContext();
 		const index = usePanelIndex(props);
@@ -443,11 +429,8 @@ index: {
 const XhDatePickerHeadingMonthTrigger = defineComponent({
 	name: "XhDatePickerHeadingMonthTrigger",
 	props: { 
-	/** 属于第几个面板；不写就跟着所在的日历走。 */
-index: {
-		type: [Number, String],
-		default: void 0
-	} },
+	/** 属于第几个面板；未写时跟随所在的日历。 */
+index: { type: [Number, String] } },
 	setup(props, { slots }) {
 		const ctx = useDatePickerContext();
 		const index = usePanelIndex(props);
@@ -457,11 +440,8 @@ index: {
 const XhDatePickerGrid = defineComponent({
 	name: "XhDatePickerGrid",
 	props: { 
-	/** 属于第几个面板；不写就跟着所在的日历走。 */
-index: {
-		type: [Number, String],
-		default: void 0
-	} },
+	/** 属于第几个面板；未写时跟随所在的日历。 */
+index: { type: [Number, String] } },
 	setup(props, { slots }) {
 		const ctx = useDatePickerContext();
 		const index = usePanelIndex(props);
@@ -495,7 +475,7 @@ const XhDatePickerWeekRow = defineComponent({
 const XhDatePickerWeekNumber = defineComponent({
 	name: "XhDatePickerWeekNumber",
 	props: { 
-	/** 这一行行首那天的 ISO 串。 */
+	/** 该行行首那一天的 ISO 串。 */
 value: {
 		type: String,
 		required: true
@@ -526,13 +506,10 @@ const XhDatePickerCell = defineComponent({
 			required: true
 		},
 		/**
-		* 属于第几个面板；不写就跟着所在的日历走。同一天会同时出现在两个面板里
-		* （8 月末那几天也铺在 9 月的首行），「是不是本月」只有连着面板一起看才判得出来。
+		* 属于第几个面板；未写时跟随所在的日历。同一天会同时出现在两个面板中
+		* （8 月末的几天也铺在 9 月的首行），是否为本月只有连同面板一起看才能判定。
 		*/
-		index: {
-			type: [Number, String],
-			default: void 0
-		}
+		index: { type: [Number, String] }
 	},
 	setup(props, { slots }) {
 		const ctx = useDatePickerContext();
@@ -555,22 +532,12 @@ const XhDatePickerCellTrigger = defineComponent({
 });
 const XhDatePickerHiddenInput = defineComponent({
 	name: "XhDatePickerHiddenInput",
-	props: { index: {
-		type: [Number, String],
-		default: void 0
-	} },
-	setup(props) {
+	setup() {
 		const ctx = useDatePickerContext();
-		const group = useDatePickerSegmentGroupContext();
-		return () => {
-			const index = props.index === void 0 ? group.index.value : Number(props.index) === 1 ? 1 : 0;
-			const field = fieldOf(ctx.api.value, index);
-			if (!field) return null;
-			return h("input", field.getHiddenInputProps());
-		};
+		return () => h("input", ctx.api.value.field.getHiddenInputProps());
 	}
 });
 //#endregion
-export { XhDatePickerCalendar, XhDatePickerCell, XhDatePickerCellTrigger, XhDatePickerClearTrigger, XhDatePickerConfirmTrigger, XhDatePickerContent, XhDatePickerControl, XhDatePickerGrid, XhDatePickerGridBody, XhDatePickerGridHead, XhDatePickerHeader, XhDatePickerHeading, XhDatePickerHeadingMonthTrigger, XhDatePickerHeadingYearTrigger, XhDatePickerHiddenInput, XhDatePickerLabel, XhDatePickerNextTrigger, XhDatePickerNextYearTrigger, XhDatePickerPositioner, XhDatePickerPreset, XhDatePickerPresets, XhDatePickerPrevTrigger, XhDatePickerPrevYearTrigger, XhDatePickerRoot, XhDatePickerSegment, XhDatePickerSegmentGroup, XhDatePickerTimePanel, XhDatePickerTrigger, XhDatePickerWeekDay, XhDatePickerWeekNumber, XhDatePickerWeekRow };
+export { XhDatePickerCalendar, XhDatePickerCell, XhDatePickerCellTrigger, XhDatePickerClearTrigger, XhDatePickerConfirmTrigger, XhDatePickerContent, XhDatePickerControl, XhDatePickerGrid, XhDatePickerGridBody, XhDatePickerGridHead, XhDatePickerHeader, XhDatePickerHeading, XhDatePickerHeadingMonthTrigger, XhDatePickerHeadingYearTrigger, XhDatePickerHiddenInput, XhDatePickerLabel, XhDatePickerNextTrigger, XhDatePickerNextYearTrigger, XhDatePickerPositioner, XhDatePickerPreset, XhDatePickerPresetGroup, XhDatePickerPrevTrigger, XhDatePickerPrevYearTrigger, XhDatePickerRoot, XhDatePickerSegment, XhDatePickerSegmentGroup, XhDatePickerTimePanel, XhDatePickerTrigger, XhDatePickerWeekDay, XhDatePickerWeekNumber, XhDatePickerWeekRow };
 
 //# sourceMappingURL=date-picker.js.map