@zerodep-dev/vue-tsx-pro-mobile 0.0.0-stage → 0.4.0

package/dist/picker/Calendar.d.ts

@@ -0,0 +1,69 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 选择的方式 */
+export interface CalendarTypes {
+    /** 一天（默认） */
+    single: unknown;
+    /** 一段：先点开始，再点结束 */
+    range: unknown;
+    /** 几天：点一下选上，再点一下取消 */
+    multiple: unknown;
+}
+/** 日历的值：一天、一段 [开始, 结束]、几天 */
+export type CalendarValue = Date | [Date, Date] | Date[];
+/** 某一天的额外信息 */
+export interface CalendarDayInfo {
+    /** 日子下面的小字（价格、节日） */
+    bottom?: VNodeChild;
+    /** 这一天不能选 */
+    disabled?: boolean;
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface CalendarProps extends Omit<PartProps<'div', 'title'>, 'onSelect'> {
+    /**
+     * 选择的方式
+     * @default 'single'
+     */
+    type?: keyof CalendarTypes;
+    /** 选中的日期；双向绑定写 `_value={x}`（确认时写回） */
+    _value?: CalendarValue | null;
+    /** 最早可选的日子；默认今天 */
+    minDate?: Date;
+    /** 最晚可选的日子；默认半年后 */
+    maxDate?: Date;
+    /** 标题 */
+    title?: VNodeChild;
+    /**
+     * 下面显示确认按钮
+     * @default true
+     */
+    showConfirm?: boolean;
+    /** 确认的文字；不给时用语言包 */
+    confirmText?: VNodeChild;
+    /** 每一天的额外信息 */
+    dayInfo?: (day: Date) => CalendarDayInfo | undefined;
+    /** 点了一天 */
+    onSelect?: (day: Date) => void;
+    /** 点了确认（或不显示确认按钮时选完了） */
+    onConfirm?: (value: CalendarValue) => void;
+}
+/** Calendar 的样式 */
+export declare const calendarStyles: Readonly<{
+    body: css.CompiledStyles;
+    bottom: css.CompiledStyles;
+    day: css.CompiledStyles;
+    days: css.CompiledStyles;
+    footer: css.CompiledStyles;
+    middle: css.CompiledStyles;
+    month: css.CompiledStyles;
+    monthTitle: css.CompiledStyles;
+    rangeEnd: css.CompiledStyles;
+    rangeStart: css.CompiledStyles;
+    root: css.CompiledStyles;
+    selected: css.CompiledStyles;
+    title: css.CompiledStyles;
+    weekdays: css.CompiledStyles;
+}>;
+/** 日历（div > 标题 + 星期 + 各月 + 确认） */
+export declare const Calendar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CalendarProps>;

package/dist/picker/Calendar.js

@@ -0,0 +1,213 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, hasContent, mergeAttrs } from "../utils/props.js";
+import { Button } from "../base/Button.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, mergeJsxProps, overridable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { computed, createVNode } from "vue";
+//#region src/picker/Calendar.tsx
+/** 选择的方式 */
+/** 日历的值：一天、一段 [开始, 结束]、几天 */
+/** 某一天的额外信息 */
+/** 未声明的属性落到根元素（div）上 */
+/** Calendar 的样式 */
+var calendarStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		backgroundColor: "_surface",
+		userSelect: "none"
+	},
+	title: {
+		paddingBlock: "0.8em",
+		textAlign: "center",
+		fontSize: "_lg",
+		fontWeight: "_semibold",
+		color: "_text"
+	},
+	weekdays: {
+		display: "grid",
+		gridTemplateColumns: "repeat(7, 1fr)",
+		paddingBlock: "0.4em",
+		fontSize: "_xs",
+		color: "_textMuted",
+		textAlign: "center",
+		boxShadow: "_sm"
+	},
+	body: {
+		height: "22em",
+		overflowY: "auto"
+	},
+	month: { paddingBlockEnd: "_sm" },
+	monthTitle: {
+		paddingBlock: "0.7em",
+		textAlign: "center",
+		fontSize: "_md",
+		fontWeight: "_medium",
+		color: "_text"
+	},
+	days: {
+		display: "grid",
+		gridTemplateColumns: "repeat(7, 1fr)",
+		rowGap: "0.25em"
+	},
+	day: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "3.4em",
+		fontSize: "_md",
+		color: {
+			default: "_text",
+			"[data-disabled]": "_textDisabled"
+		},
+		cursor: {
+			default: "pointer",
+			"[data-disabled]": "not-allowed"
+		}
+	},
+	middle: {
+		backgroundColor: "_accentSoft",
+		color: "_accentText"
+	},
+	selected: {
+		borderRadius: "_md",
+		backgroundColor: "_accent",
+		color: "_accentContrast"
+	},
+	rangeStart: {
+		borderStartEndRadius: 0,
+		borderEndEndRadius: 0
+	},
+	rangeEnd: {
+		borderStartStartRadius: 0,
+		borderEndStartRadius: 0
+	},
+	bottom: {
+		fontSize: "0.65em",
+		lineHeight: "1.2",
+		minHeight: "1.2em"
+	},
+	footer: {
+		paddingBlock: "_sm",
+		paddingInline: "_lg",
+		paddingBlockEnd: "calc(0.5em + env(safe-area-inset-bottom))"
+	}
+});
+/** 某天 0 点 */
+var dayOf = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+var sameDay = (a, b) => !!a && a.getTime() === dayOf(b).getTime();
+/** 值 → 选中的日子列表（区间时是 [开始, 结束?]） */
+function toDays(value) {
+	if (!value) return [];
+	return (Array.isArray(value) ? value : [value]).map(dayOf);
+}
+/** 日历（div > 标题 + 星期 + 各月 + 确认） */
+var Calendar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const type = readonlyProp(_props, "type", "single");
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const minDate = readonlyProp(_props, "minDate");
+	const maxDate = readonlyProp(_props, "maxDate");
+	const title = readonlyProp(_props, "title");
+	const showConfirm = readonlyProp(_props, "showConfirm", true);
+	const confirmText = readonlyProp(_props, "confirmText");
+	const dayInfo = readonlyProp(_props, "dayInfo");
+	const onSelect = readonlyProp(_props, "onSelect");
+	const onConfirm = readonlyProp(_props, "onConfirm");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	const today = dayOf(/* @__PURE__ */ new Date());
+	const min = computed(() => dayOf(minDate.value ?? today));
+	const max = computed(() => dayOf(maxDate.value ?? new Date(today.getFullYear(), today.getMonth() + 6, today.getDate())));
+	let picked = overridable(() => toDays(value.value));
+	/** 各月：从 min 的月份到 max 的月份 */
+	const months = computed(() => {
+		const list = [];
+		for (let cursor = new Date(min.value.getFullYear(), min.value.getMonth(), 1); cursor <= max.value; cursor.setMonth(cursor.getMonth() + 1)) list.push({
+			year: cursor.getFullYear(),
+			month: cursor.getMonth()
+		});
+		return list;
+	});
+	const complete = () => type.value === "range" ? picked.value.length === 2 : picked.value.length > 0;
+	const result = () => type.value === "single" ? picked.value[0] : type.value === "range" ? [picked.value[0], picked.value[1]] : [...picked.value];
+	const commit = () => {
+		if (!complete()) return;
+		value.value = result();
+		onConfirm.value?.(value.value);
+	};
+	const choose = (day) => {
+		onSelect.value?.(day);
+		if (type.value === "single") picked.value = [day];
+		else if (type.value === "multiple") picked.value = picked.value.some((item) => sameDay(item, day)) ? picked.value.filter((item) => !sameDay(item, day)) : [...picked.value, day].sort((a, b) => a.getTime() - b.getTime());
+		else if (picked.value.length !== 1 || day < picked.value[0]) picked.value = [day];
+		else picked.value = [picked.value[0], day];
+		if (!showConfirm.value && complete()) commit();
+	};
+	const renderDay = (day) => {
+		const info = dayInfo.value?.(day);
+		const disabled = day < min.value || day > max.value || !!info?.disabled;
+		const [start, end] = picked.value;
+		const isStart = type.value === "range" && sameDay(start, day);
+		const isEnd = type.value === "range" && sameDay(end, day);
+		const selected = type.value === "range" ? isStart || isEnd : picked.value.some((item) => sameDay(item, day));
+		const middle = type.value === "range" && !!start && !!end && day > start && day < end;
+		const bottom = isStart ? config.lang.start : isEnd ? config.lang.end : info?.bottom;
+		return createVNode("div", mergeJsxProps(mergeAttrs({ sx: [
+			calendarStyles.day,
+			middle && calendarStyles.middle,
+			selected && calendarStyles.selected,
+			isStart && !!end && calendarStyles.rangeStart,
+			isEnd && calendarStyles.rangeEnd
+		] }), {
+			"role": "gridcell",
+			"aria-selected": selected ? "true" : void 0,
+			"aria-disabled": disabled ? "true" : void 0
+		}, dataAttrs({ "data-disabled": disabled }), { "onClick": () => !disabled && choose(day) }), [day.getDate(), createVNode("span", mergeAttrs({ sx: calendarStyles.bottom }), [hasContent(bottom) ? bottom : null])]);
+	};
+	return () => {
+		const first = config.lang.firstDayOfWeek;
+		const weekdays = [...config.lang.weekdays.slice(first), ...config.lang.weekdays.slice(0, first)];
+		return createVNode("div", mergeAttrs({ sx: calendarStyles.root }, rest), [
+			hasContent(title.value) && createVNode("div", mergeAttrs({ sx: calendarStyles.title }), [title.value]),
+			createVNode("div", mergeJsxProps(mergeAttrs({ sx: calendarStyles.weekdays }), { "aria-hidden": "true" }), [weekdays.map((name) => createVNode("span", null, [name]))]),
+			createVNode("div", mergeAttrs({ sx: calendarStyles.body }), [months.value.map(({ year, month }) => {
+				const count = new Date(year, month + 1, 0).getDate();
+				const offset = (new Date(year, month, 1).getDay() - first + 7) % 7;
+				return createVNode("div", mergeJsxProps(mergeAttrs({ sx: calendarStyles.month }), {
+					"role": "grid",
+					"aria-label": config.lang.monthTitle(year, month + 1)
+				}), [createVNode("div", mergeAttrs({ sx: calendarStyles.monthTitle }), [config.lang.monthTitle(year, month + 1)]), createVNode("div", mergeAttrs({ sx: calendarStyles.days }), [Array.from({ length: offset }, () => createVNode("span", null, null)), Array.from({ length: count }, (_, index) => renderDay(new Date(year, month, index + 1)))])]);
+			})]),
+			showConfirm.value && createVNode("div", mergeAttrs({ sx: calendarStyles.footer }), [createVNode(Button, {
+				"fullWidth": true,
+				"radius": "full",
+				"disabled": !complete(),
+				"onClick": commit,
+				"key": "__site0"
+			}, {
+				default: () => [confirmText.value ?? config.lang.confirm],
+				$stable: true
+			})])
+		]);
+	};
+}, {
+	name: "Calendar",
+	props: [
+		"type",
+		"_value",
+		"onUpdate:_value",
+		"minDate",
+		"maxDate",
+		"title",
+		"showConfirm",
+		"confirmText",
+		"dayInfo",
+		"onSelect",
+		"onConfirm"
+	]
+});
+//#endregion
+export { Calendar, calendarStyles };
+
+//# sourceMappingURL=Calendar.js.map

package/dist/picker/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vtp_overridable","_createVNode","_mergeProps"],"sources":["../../src/picker/Calendar.tsx"],"sourcesContent":["/**\n * 日历：按月排开的日期格子，选一天、选一段（入住到离店）、或选几天。常放在底部弹出层里，下面一个确认按钮。\n *\n *   <Calendar _value={date} onConfirm={(day) => …} />\n *   <Calendar type=\"range\" _value={stay} minDate={today} maxDate={inSixMonths} dayInfo={(day) => ({ bottom: '¥299' })} />\n *   <Calendar type=\"multiple\" _value={days} />\n *\n * 选的过程在组件里，点了确认才写回 _value（showConfirm 为 false 时选完就写回）。一周从周几开始、星期的写法随语言包。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { useConfig } from '../config/context';\nimport { dataAttrs, hasContent, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 选择的方式 */\nexport interface CalendarTypes {\n  /** 一天（默认） */\n  single: unknown;\n  /** 一段：先点开始，再点结束 */\n  range: unknown;\n  /** 几天：点一下选上，再点一下取消 */\n  multiple: unknown;\n}\n\n/** 日历的值：一天、一段 [开始, 结束]、几天 */\nexport type CalendarValue = Date | [Date, Date] | Date[];\n\n/** 某一天的额外信息 */\nexport interface CalendarDayInfo {\n  /** 日子下面的小字（价格、节日） */\n  bottom?: VNodeChild;\n  /** 这一天不能选 */\n  disabled?: boolean;\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface CalendarProps extends Omit<PartProps<'div', 'title'>, 'onSelect'> {\n  /**\n   * 选择的方式\n   * @default 'single'\n   */\n  type?: keyof CalendarTypes;\n  /** 选中的日期；双向绑定写 `_value={x}`（确认时写回） */\n  _value?: CalendarValue | null;\n  /** 最早可选的日子；默认今天 */\n  minDate?: Date;\n  /** 最晚可选的日子；默认半年后 */\n  maxDate?: Date;\n  /** 标题 */\n  title?: VNodeChild;\n  /**\n   * 下面显示确认按钮\n   * @default true\n   */\n  showConfirm?: boolean;\n  /** 确认的文字；不给时用语言包 */\n  confirmText?: VNodeChild;\n  /** 每一天的额外信息 */\n  dayInfo?: (day: Date) => CalendarDayInfo | undefined;\n  /** 点了一天 */\n  onSelect?: (day: Date) => void;\n  /** 点了确认（或不显示确认按钮时选完了） */\n  onConfirm?: (value: CalendarValue) => void;\n}\n\n/** Calendar 的样式 */\nexport const calendarStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    backgroundColor: '_surface',\n    userSelect: 'none',\n  },\n  title: {\n    paddingBlock: '0.8em',\n    textAlign: 'center',\n    fontSize: '_lg',\n    fontWeight: '_semibold',\n    color: '_text',\n  },\n  weekdays: {\n    display: 'grid',\n    gridTemplateColumns: 'repeat(7, 1fr)',\n    paddingBlock: '0.4em',\n    fontSize: '_xs',\n    color: '_textMuted',\n    textAlign: 'center',\n    boxShadow: '_sm',\n  },\n  body: { height: '22em', overflowY: 'auto' },\n  month: { paddingBlockEnd: '_sm' },\n  monthTitle: {\n    paddingBlock: '0.7em',\n    textAlign: 'center',\n    fontSize: '_md',\n    fontWeight: '_medium',\n    color: '_text',\n  },\n  days: { display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', rowGap: '0.25em' },\n  day: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '3.4em',\n    fontSize: '_md',\n    color: { default: '_text', '[data-disabled]': '_textDisabled' },\n    cursor: { default: 'pointer', '[data-disabled]': 'not-allowed' },\n  },\n  // 区间中间的几天：浅色底连成一条\n  middle: { backgroundColor: '_accentSoft', color: '_accentText' },\n  selected: { borderRadius: '_md', backgroundColor: '_accent', color: '_accentContrast' },\n  rangeStart: { borderStartEndRadius: 0, borderEndEndRadius: 0 },\n  rangeEnd: { borderStartStartRadius: 0, borderEndStartRadius: 0 },\n  bottom: { fontSize: '0.65em', lineHeight: '1.2', minHeight: '1.2em' },\n  footer: {\n    paddingBlock: '_sm',\n    paddingInline: '_lg',\n    paddingBlockEnd: 'calc(0.5em + env(safe-area-inset-bottom))',\n  },\n});\n\n/** 某天 0 点 */\nconst dayOf = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());\nconst sameDay = (a: Date | undefined, b: Date) => !!a && a.getTime() === dayOf(b).getTime();\n\n/** 值 → 选中的日子列表（区间时是 [开始, 结束?]） */\nfunction toDays(value: CalendarValue | null | undefined): Date[] {\n  if (!value) return [];\n  return (Array.isArray(value) ? value : [value]).map(dayOf);\n}\n\n/** 日历（div > 标题 + 星期 + 各月 + 确认） */\nexport const Calendar = _component(\n  ({\n    type = 'single',\n    _value: value = _bindable<CalendarValue | null>(null),\n    minDate,\n    maxDate,\n    title,\n    showConfirm = true,\n    confirmText,\n    dayInfo,\n    onSelect,\n    onConfirm,\n    ...rest\n  }: CalendarProps) => {\n    const config = useConfig();\n    const today = dayOf(new Date());\n    const min = _derived(dayOf(minDate ?? today));\n    const max = _derived(\n      dayOf(maxDate ?? new Date(today.getFullYear(), today.getMonth() + 6, today.getDate())),\n    );\n    // 选的过程：确认前不写回 _value（覆盖派生值）；外面改了 _value 时重新跟随\n    let picked = _derived(toDays(value));\n\n    /** 各月：从 min 的月份到 max 的月份 */\n    const months = _derived.by(() => {\n      const list: { year: number; month: number }[] = [];\n      for (\n        let cursor = new Date(min.getFullYear(), min.getMonth(), 1);\n        cursor <= max;\n        cursor.setMonth(cursor.getMonth() + 1)\n      )\n        list.push({ year: cursor.getFullYear(), month: cursor.getMonth() });\n      return list;\n    });\n\n    const complete = () => (type === 'range' ? picked.length === 2 : picked.length > 0);\n    const result = (): CalendarValue =>\n      type === 'single' ? picked[0]! : type === 'range' ? [picked[0]!, picked[1]!] : [...picked];\n    const commit = () => {\n      if (!complete()) return;\n      value = result();\n      onConfirm?.(value);\n    };\n\n    const choose = (day: Date) => {\n      onSelect?.(day);\n      if (type === 'single') picked = [day];\n      else if (type === 'multiple')\n        picked = picked.some((item) => sameDay(item, day))\n          ? picked.filter((item) => !sameDay(item, day))\n          : [...picked, day].sort((a, b) => a.getTime() - b.getTime());\n      // 区间：没开始或已经选完时重新开始；点在开始之前时当成新的开始\n      else if (picked.length !== 1 || day < picked[0]!) picked = [day];\n      else picked = [picked[0]!, day];\n      if (!showConfirm && complete()) commit();\n    };\n\n    const renderDay = (day: Date) => {\n      const info = dayInfo?.(day);\n      const disabled = day < min || day > max || !!info?.disabled;\n      const [start, end] = picked;\n      const isStart = type === 'range' && sameDay(start, day);\n      const isEnd = type === 'range' && sameDay(end, day);\n      const selected =\n        type === 'range' ? isStart || isEnd : picked.some((item) => sameDay(item, day));\n      const middle = type === 'range' && !!start && !!end && day > start && day < end;\n      const bottom = isStart ? config.lang.start : isEnd ? config.lang.end : info?.bottom;\n      return (\n        <div\n          {...mergeAttrs<'div'>({\n            sx: [\n              calendarStyles.day,\n              middle && calendarStyles.middle,\n              selected && calendarStyles.selected,\n              isStart && !!end && calendarStyles.rangeStart,\n              isEnd && calendarStyles.rangeEnd,\n            ],\n          })}\n          role=\"gridcell\"\n          aria-selected={selected ? 'true' : undefined}\n          aria-disabled={disabled ? 'true' : undefined}\n          {...dataAttrs({ 'data-disabled': disabled })}\n          onClick={() => !disabled && choose(day)}\n        >\n          {day.getDate()}\n          <span {...mergeAttrs<'span'>({ sx: calendarStyles.bottom })}>\n            {hasContent(bottom) ? bottom : null}\n          </span>\n        </div>\n      );\n    };\n\n    return () => {\n      const first = config.lang.firstDayOfWeek;\n      const weekdays = [\n        ...config.lang.weekdays.slice(first),\n        ...config.lang.weekdays.slice(0, first),\n      ];\n      return (\n        <div {...mergeAttrs<'div'>({ sx: calendarStyles.root }, rest)}>\n          {hasContent(title) && (\n            <div {...mergeAttrs<'div'>({ sx: calendarStyles.title })}>{title}</div>\n          )}\n          <div {...mergeAttrs<'div'>({ sx: calendarStyles.weekdays })} aria-hidden=\"true\">\n            {weekdays.map((name) => (\n              <span>{name}</span>\n            ))}\n          </div>\n          <div {...mergeAttrs<'div'>({ sx: calendarStyles.body })}>\n            {months.map(({ year, month }) => {\n              const count = new Date(year, month + 1, 0).getDate();\n              // 第一天前面空几格\n              const offset = (new Date(year, month, 1).getDay() - first + 7) % 7;\n              return (\n                <div\n                  {...mergeAttrs<'div'>({ sx: calendarStyles.month })}\n                  role=\"grid\"\n                  aria-label={config.lang.monthTitle(year, month + 1)}\n                >\n                  <div {...mergeAttrs<'div'>({ sx: calendarStyles.monthTitle })}>\n                    {config.lang.monthTitle(year, month + 1)}\n                  </div>\n                  <div {...mergeAttrs<'div'>({ sx: calendarStyles.days })}>\n                    {Array.from({ length: offset }, () => (\n                      <span />\n                    ))}\n                    {Array.from({ length: count }, (_, index) =>\n                      renderDay(new Date(year, month, index + 1)),\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n          {showConfirm && (\n            <div {...mergeAttrs<'div'>({ sx: calendarStyles.footer })}>\n              <Button fullWidth radius=\"full\" disabled={!complete()} onClick={commit}>\n                {confirmText ?? config.lang.confirm}\n              </Button>\n            </div>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/picker/Cascader.d.ts

@@ -0,0 +1,50 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { PickerOption } from './PickerColumn';
+/** 选择的结果 */
+export interface CascaderResult {
+    /** 最后一级的值 */
+    value: string | number;
+    /** 一路选的各级选项 */
+    selectedOptions: PickerOption[];
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface CascaderProps extends Omit<PartProps<'div', 'title' | 'placeholder'>, 'onChange'> {
+    /** 选项树（选项带 children 时有下一级） */
+    options: PickerOption[];
+    /** 最后一级选中的值；双向绑定写 `_value={x}` */
+    _value?: string | number;
+    /** 标题 */
+    title?: VNodeChild;
+    /** 还没选的那一级标签上的文字；不给时用语言包的“请选择” */
+    placeholder?: VNodeChild;
+    /**
+     * 右上角的关闭按钮
+     * @default true
+     */
+    closeable?: boolean;
+    /** 选了某一级的一项 */
+    onChange?: (result: CascaderResult & {
+        tabIndex: number;
+    }) => void;
+    /** 选到了最后一级 */
+    onFinish?: (result: CascaderResult) => void;
+    /** 点了关闭 */
+    onClose?: () => void;
+}
+/** Cascader 的样式 */
+export declare const cascaderStyles: Readonly<{
+    close: css.CompiledStyles;
+    header: css.CompiledStyles;
+    list: css.CompiledStyles;
+    option: css.CompiledStyles;
+    root: css.CompiledStyles;
+    tab: css.CompiledStyles;
+    tabs: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 在选项树里找到值为 value 的项，返回一路上的选项 */
+export declare function findPath(options: PickerOption[], value: string | number | undefined): PickerOption[];
+/** 级联选择（div > 标题栏 + 各级标签 + 当前一级的选项） */
+export declare const Cascader: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<CascaderProps>;

package/dist/picker/Cascader.js

@@ -0,0 +1,199 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, hasContent, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, mergeJsxProps, overridable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+import { Check, X } from "@lucide/icons";
+//#region src/picker/Cascader.tsx
+/**
+* 级联选择：一级级往下选（省 → 市 → 区），上面一排标签显示每一级选了什么（点标签回到那一级重选），下面是当前这一级的选项。
+* 选到没有下一级的项时完成。常放在底部弹出层里。
+*
+*   <Cascader title="所在地区" options={areaOptions()} _value={code} onFinish={({ selectedOptions }) => …} onClose={…} />
+*
+* _value 是最后一级的值；给了时按它找回整条路径。
+*/
+/** 选择的结果 */
+/** 未声明的属性落到根元素（div）上 */
+/** Cascader 的样式 */
+var cascaderStyles = css.create({
+	root: {
+		backgroundColor: "_surface",
+		userSelect: "none"
+	},
+	header: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		height: "3em",
+		paddingInline: "_lg"
+	},
+	title: {
+		fontSize: "_lg",
+		fontWeight: "_semibold",
+		color: "_text"
+	},
+	close: {
+		display: "inline-flex",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: "_textMuted",
+		fontSize: "_xl",
+		cursor: "pointer"
+	},
+	tabs: {
+		display: "flex",
+		gap: "_lg",
+		overflowX: "auto",
+		paddingInline: "_lg",
+		borderBlockEndWidth: "_hairline",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_border",
+		scrollbarWidth: "none"
+	},
+	tab: {
+		position: "relative",
+		flex: "none",
+		maxWidth: "8em",
+		height: "2.6em",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis",
+		color: {
+			default: "_text",
+			"[data-empty]": "_textMuted"
+		},
+		fontFamily: "inherit",
+		fontSize: "_md",
+		fontWeight: {
+			default: "_normal",
+			"[aria-selected=\"true\"]": "_semibold"
+		},
+		cursor: "pointer",
+		backgroundImage: {
+			default: "none",
+			"[aria-selected=\"true\"]": "linear-gradient(currentColor, currentColor)"
+		},
+		backgroundSize: "1.6em 0.2em",
+		backgroundPosition: "center bottom",
+		backgroundRepeat: "no-repeat"
+	},
+	list: {
+		height: "22em",
+		overflowY: "auto",
+		paddingBlock: "_sm"
+	},
+	option: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		paddingBlock: "0.65em",
+		paddingInline: "_lg",
+		fontSize: "_md",
+		color: {
+			default: "_text",
+			"[aria-selected=\"true\"]": "_accentText",
+			"[data-disabled]": "_textDisabled"
+		},
+		backgroundColor: {
+			default: "transparent",
+			":active:not([data-disabled])": "_fillActive"
+		},
+		cursor: {
+			default: "pointer",
+			"[data-disabled]": "not-allowed"
+		}
+	}
+});
+/** 在选项树里找到值为 value 的项，返回一路上的选项 */
+function findPath(options, value) {
+	if (value === void 0) return [];
+	for (const option of options) {
+		if (option.value === value) return [option];
+		const rest = findPath(option.children ?? [], value);
+		if (rest.length) return [option, ...rest];
+	}
+	return [];
+}
+/** 级联选择（div > 标题栏 + 各级标签 + 当前一级的选项） */
+var Cascader = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const options = readonlyProp(_props, "options");
+	const value = bindable(_props, "_value", () => void 0, _ctx.emit);
+	const title = readonlyProp(_props, "title");
+	const placeholder = readonlyProp(_props, "placeholder");
+	const closeable = readonlyProp(_props, "closeable", true);
+	const onChange = readonlyProp(_props, "onChange");
+	const onFinish = readonlyProp(_props, "onFinish");
+	const onClose = readonlyProp(_props, "onClose");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	let path = overridable(() => findPath(options.value, value.value));
+	let tab = overridable(() => Math.max(0, path.value.length - 1));
+	/** 第 level 级的选项 */
+	const levelOptions = (level) => level === 0 ? options.value : path.value[level - 1]?.children ?? [];
+	const choose = (level, option) => {
+		if (option.disabled) return;
+		path.value = [...path.value.slice(0, level), option];
+		const result = {
+			value: option.value,
+			selectedOptions: path.value
+		};
+		onChange.value?.({
+			...result,
+			tabIndex: level
+		});
+		if (option.children?.length) tab.value = level + 1;
+		else {
+			value.value = option.value;
+			onFinish.value?.(result);
+		}
+	};
+	return () => {
+		const levels = path.value.length + (path.value[path.value.length - 1]?.children?.length || !path.value.length ? 1 : 0);
+		return createVNode("div", mergeAttrs({ sx: cascaderStyles.root }, rest), [
+			createVNode("div", mergeAttrs({ sx: cascaderStyles.header }), [createVNode("span", mergeAttrs({ sx: cascaderStyles.title }), [hasContent(title.value) ? title.value : null]), closeable.value && createVNode("button", mergeJsxProps(mergeAttrs({ sx: cascaderStyles.close }), {
+				"type": "button",
+				"aria-label": config.lang.close,
+				"onClick": _cache[0] || (_cache[0] = () => onClose.value?.())
+			}), [createVNode(Icon, { "icon": X }, null)])]),
+			createVNode("div", mergeJsxProps(mergeAttrs({ sx: cascaderStyles.tabs }), { "role": "tablist" }), [Array.from({ length: levels }, (_, level) => createVNode("button", mergeJsxProps(mergeAttrs({ sx: cascaderStyles.tab }), {
+				"type": "button",
+				"role": "tab",
+				"aria-selected": level === tab.value ? "true" : "false"
+			}, dataAttrs({ "data-empty": !path.value[level] }), { "onClick": () => tab.value = level }), [path.value[level]?.text ?? placeholder.value ?? config.lang.select]))]),
+			createVNode("div", mergeJsxProps(mergeAttrs({ sx: cascaderStyles.list }), { "role": "listbox" }), [levelOptions(tab.value).map((option) => {
+				const selected = path.value[tab.value]?.value === option.value;
+				return createVNode("div", mergeJsxProps(mergeAttrs({ sx: cascaderStyles.option }), {
+					"role": "option",
+					"aria-selected": selected ? "true" : "false",
+					"aria-disabled": option.disabled ? "true" : void 0
+				}, dataAttrs({ "data-disabled": option.disabled }), { "onClick": () => choose(tab.value, option) }), [createVNode("span", null, [option.text]), selected && createVNode(Icon, { "icon": Check }, null)]);
+			})])
+		]);
+	};
+}, {
+	name: "Cascader",
+	props: [
+		"options",
+		"_value",
+		"onUpdate:_value",
+		"title",
+		"placeholder",
+		"closeable",
+		"onChange",
+		"onFinish",
+		"onClose"
+	]
+});
+//#endregion
+export { Cascader, cascaderStyles, findPath };
+
+//# sourceMappingURL=Cascader.js.map

package/dist/picker/Cascader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cascader.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vtp_overridable","_createVNode","_mergeProps"],"sources":["../../src/picker/Cascader.tsx"],"sourcesContent":["/**\n * 级联选择：一级级往下选（省 → 市 → 区），上面一排标签显示每一级选了什么（点标签回到那一级重选），下面是当前这一级的选项。\n * 选到没有下一级的项时完成。常放在底部弹出层里。\n *\n *   <Cascader title=\"所在地区\" options={areaOptions()} _value={code} onFinish={({ selectedOptions }) => …} onClose={…} />\n *\n * _value 是最后一级的值；给了时按它找回整条路径。\n */\nimport { Check, X } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { dataAttrs, hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport type { PickerOption } from './PickerColumn';\n\n/** 选择的结果 */\nexport interface CascaderResult {\n  /** 最后一级的值 */\n  value: string | number;\n  /** 一路选的各级选项 */\n  selectedOptions: PickerOption[];\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface CascaderProps extends Omit<PartProps<'div', 'title' | 'placeholder'>, 'onChange'> {\n  /** 选项树（选项带 children 时有下一级） */\n  options: PickerOption[];\n  /** 最后一级选中的值；双向绑定写 `_value={x}` */\n  _value?: string | number;\n  /** 标题 */\n  title?: VNodeChild;\n  /** 还没选的那一级标签上的文字；不给时用语言包的“请选择” */\n  placeholder?: VNodeChild;\n  /**\n   * 右上角的关闭按钮\n   * @default true\n   */\n  closeable?: boolean;\n  /** 选了某一级的一项 */\n  onChange?: (result: CascaderResult & { tabIndex: number }) => void;\n  /** 选到了最后一级 */\n  onFinish?: (result: CascaderResult) => void;\n  /** 点了关闭 */\n  onClose?: () => void;\n}\n\n/** Cascader 的样式 */\nexport const cascaderStyles = css.create({\n  root: { backgroundColor: '_surface', userSelect: 'none' },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    height: '3em',\n    paddingInline: '_lg',\n  },\n  title: { fontSize: '_lg', fontWeight: '_semibold', color: '_text' },\n  close: {\n    display: 'inline-flex',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: '_textMuted',\n    fontSize: '_xl',\n    cursor: 'pointer',\n  },\n  tabs: {\n    display: 'flex',\n    gap: '_lg',\n    overflowX: 'auto',\n    paddingInline: '_lg',\n    borderBlockEndWidth: '_hairline',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n    scrollbarWidth: 'none',\n  },\n  tab: {\n    position: 'relative',\n    flex: 'none',\n    maxWidth: '8em',\n    height: '2.6em',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    color: { default: '_text', '[data-empty]': '_textMuted' },\n    fontFamily: 'inherit',\n    fontSize: '_md',\n    fontWeight: { default: '_normal', '[aria-selected=\"true\"]': '_semibold' },\n    cursor: 'pointer',\n    // 当前一级的下划线（背景渐变画在底部，不用伪元素）\n    backgroundImage: {\n      default: 'none',\n      '[aria-selected=\"true\"]': 'linear-gradient(currentColor, currentColor)',\n    },\n    backgroundSize: '1.6em 0.2em',\n    backgroundPosition: 'center bottom',\n    backgroundRepeat: 'no-repeat',\n  },\n  list: { height: '22em', overflowY: 'auto', paddingBlock: '_sm' },\n  option: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    paddingBlock: '0.65em',\n    paddingInline: '_lg',\n    fontSize: '_md',\n    color: {\n      default: '_text',\n      '[aria-selected=\"true\"]': '_accentText',\n      '[data-disabled]': '_textDisabled',\n    },\n    backgroundColor: { default: 'transparent', ':active:not([data-disabled])': '_fillActive' },\n    cursor: { default: 'pointer', '[data-disabled]': 'not-allowed' },\n  },\n});\n\n/** 在选项树里找到值为 value 的项，返回一路上的选项 */\nexport function findPath(\n  options: PickerOption[],\n  value: string | number | undefined,\n): PickerOption[] {\n  if (value === undefined) return [];\n  for (const option of options) {\n    if (option.value === value) return [option];\n    const rest = findPath(option.children ?? [], value);\n    if (rest.length) return [option, ...rest];\n  }\n  return [];\n}\n\n/** 级联选择（div > 标题栏 + 各级标签 + 当前一级的选项） */\nexport const Cascader = _component(\n  ({\n    options,\n    _value: value = _bindable<string | number | undefined>(undefined),\n    title,\n    placeholder,\n    closeable = true,\n    onChange,\n    onFinish,\n    onClose,\n    ...rest\n  }: CascaderProps) => {\n    const config = useConfig();\n    // 一路选的项：按 _value 找回，选的过程中覆盖；外面改了 _value 时重新跟随\n    let path = _derived(findPath(options, value));\n    // 当前的一级：默认是最后选的那一级，点标签、选了有下一级的项时覆盖\n    let tab = _derived(Math.max(0, path.length - 1));\n    /** 第 level 级的选项 */\n    const levelOptions = (level: number) =>\n      level === 0 ? options : (path[level - 1]?.children ?? []);\n    const choose = (level: number, option: PickerOption) => {\n      if (option.disabled) return;\n      path = [...path.slice(0, level), option];\n      const result = { value: option.value, selectedOptions: path };\n      onChange?.({ ...result, tabIndex: level });\n      if (option.children?.length) tab = level + 1;\n      else {\n        value = option.value;\n        onFinish?.(result);\n      }\n    };\n\n    return () => {\n      // 标签：选过的各级，加上还没选的下一级\n      const levels =\n        path.length + (path[path.length - 1]?.children?.length || !path.length ? 1 : 0);\n      return (\n        <div {...mergeAttrs<'div'>({ sx: cascaderStyles.root }, rest)}>\n          <div {...mergeAttrs<'div'>({ sx: cascaderStyles.header })}>\n            <span {...mergeAttrs<'span'>({ sx: cascaderStyles.title })}>\n              {hasContent(title) ? title : null}\n            </span>\n            {closeable && (\n              <button\n                {...mergeAttrs<'button'>({ sx: cascaderStyles.close })}\n                type=\"button\"\n                aria-label={config.lang.close}\n                onClick={() => onClose?.()}\n              >\n                <Icon icon={X} />\n              </button>\n            )}\n          </div>\n          <div {...mergeAttrs<'div'>({ sx: cascaderStyles.tabs })} role=\"tablist\">\n            {Array.from({ length: levels }, (_, level) => (\n              <button\n                {...mergeAttrs<'button'>({ sx: cascaderStyles.tab })}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={level === tab ? 'true' : 'false'}\n                {...dataAttrs({ 'data-empty': !path[level] })}\n                onClick={() => (tab = level)}\n              >\n                {path[level]?.text ?? placeholder ?? config.lang.select}\n              </button>\n            ))}\n          </div>\n          <div {...mergeAttrs<'div'>({ sx: cascaderStyles.list })} role=\"listbox\">\n            {levelOptions(tab).map((option) => {\n              const selected = path[tab]?.value === option.value;\n              return (\n                <div\n                  {...mergeAttrs<'div'>({ sx: cascaderStyles.option })}\n                  role=\"option\"\n                  aria-selected={selected ? 'true' : 'false'}\n                  aria-disabled={option.disabled ? 'true' : undefined}\n                  {...dataAttrs({ 'data-disabled': option.disabled })}\n                  onClick={() => choose(tab, option)}\n                >\n                  <span>{option.text}</span>\n                  {selected && <Icon icon={Check} />}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/picker/DatePicker.d.ts

@@ -0,0 +1,52 @@
+import type { VNodeChild } from 'vue';
+import type { PartProps } from '../utils/props';
+/** 日期的列 */
+export type DateColumn = 'year' | 'month' | 'day';
+/** 共有的属性 */
+interface PickerShellProps extends Omit<PartProps<'div', 'title'>, 'onChange'> {
+    /** 标题 */
+    title?: VNodeChild;
+    /** 点了取消 */
+    onCancel?: () => void;
+    /** 可见的行数 */
+    visibleItemCount?: number;
+}
+/** 未声明的属性落到选择器的根元素上 */
+export interface DatePickerProps extends PickerShellProps {
+    /** 选中的日期；双向绑定写 `_value={x}`。不给时是今天（限在范围内） */
+    _value?: Date;
+    /** 最早的日期；默认十年前的 1 月 1 日 */
+    minDate?: Date;
+    /** 最晚的日期；默认十年后的 12 月 31 日 */
+    maxDate?: Date;
+    /**
+     * 显示哪几列
+     * @default ['year', 'month', 'day']
+     */
+    columns?: DateColumn[];
+    /** 点了确认 */
+    onConfirm?: (date: Date) => void;
+}
+/** 日期选择器（Picker） */
+export declare const DatePicker: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DatePickerProps>;
+/** 未声明的属性落到选择器的根元素上 */
+export interface TimePickerProps extends PickerShellProps {
+    /** 选中的时间 "HH:mm"；双向绑定写 `_value={x}`。不给时是 00:00 */
+    _value?: string;
+    /**
+     * 最小、最大的小时
+     * @default 0、23
+     */
+    minHour?: number;
+    maxHour?: number;
+    /**
+     * 分钟的步长
+     * @default 1
+     */
+    minuteStep?: number;
+    /** 点了确认 */
+    onConfirm?: (time: string) => void;
+}
+/** 时间选择器（Picker：时、分两列） */
+export declare const TimePicker: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TimePickerProps>;
+export {};