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

package/dist/picker/DatePicker.js

@@ -0,0 +1,135 @@
+import { useConfig } from "../config/context.js";
+import { Picker } from "./Picker.js";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { computed, createVNode } from "vue";
+//#region src/picker/DatePicker.tsx
+/** 日期的列 */
+/** 共有的属性 */
+/** 未声明的属性落到选择器的根元素上 */
+var daysIn = (year, month) => new Date(year, month, 0).getDate();
+var range = (from, to) => Array.from({ length: to - from + 1 }, (_, index) => from + index);
+var pad = (value) => String(value).padStart(2, "0");
+/** 日期选择器（Picker） */
+var DatePicker = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const value = bindable(_props, "_value", () => void 0, _ctx.emit);
+	const minDate = readonlyProp(_props, "minDate");
+	const maxDate = readonlyProp(_props, "maxDate");
+	const columns = readonlyProp(_props, "columns", () => [
+		"year",
+		"month",
+		"day"
+	]);
+	const onConfirm = readonlyProp(_props, "onConfirm");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	const now = /* @__PURE__ */ new Date();
+	const min = computed(() => minDate.value ?? new Date(now.getFullYear() - 10, 0, 1));
+	const max = computed(() => maxDate.value ?? new Date(now.getFullYear() + 10, 11, 31));
+	/** 把日期限在范围内（只看年月日） */
+	const clamp = (date) => {
+		const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+		if (day < min.value) return new Date(min.value.getFullYear(), min.value.getMonth(), min.value.getDate());
+		if (day > max.value) return new Date(max.value.getFullYear(), max.value.getMonth(), max.value.getDate());
+		return day;
+	};
+	const current = computed(() => clamp(value.value ?? now));
+	/** 各列的选项：月份、日子按当前的年月与范围裁剪 */
+	const lists = computed(() => {
+		const year = current.value.getFullYear();
+		const month = current.value.getMonth() + 1;
+		const atMin = (unit) => year === min.value.getFullYear() && (unit === "year" || month === min.value.getMonth() + 1);
+		const atMax = (unit) => year === max.value.getFullYear() && (unit === "year" || month === max.value.getMonth() + 1);
+		const units = config.lang.dateUnits;
+		const all = {
+			year: range(min.value.getFullYear(), max.value.getFullYear()).map((n) => ({
+				text: `${n}${units.year}`,
+				value: n
+			})),
+			month: range(atMin("year") ? min.value.getMonth() + 1 : 1, atMax("year") ? max.value.getMonth() + 1 : 12).map((n) => ({
+				text: `${pad(n)}${units.month}`,
+				value: n
+			})),
+			day: range(atMin("month") ? min.value.getDate() : 1, atMax("month") ? max.value.getDate() : daysIn(year, month)).map((n) => ({
+				text: `${pad(n)}${units.day}`,
+				value: n
+			}))
+		};
+		return columns.value.map((column) => all[column]);
+	});
+	const valuesOf = (date) => columns.value.map((column) => column === "year" ? date.getFullYear() : column === "month" ? date.getMonth() + 1 : date.getDate());
+	/** 各列的值 → 日期：缺的列取当前的，日子按月份的天数修正 */
+	const dateOf = (values) => {
+		const pick = (column, fallback) => {
+			const position = columns.value.indexOf(column);
+			return position >= 0 ? Number(values[position]) : fallback;
+		};
+		const year = pick("year", current.value.getFullYear());
+		const month = pick("month", current.value.getMonth() + 1);
+		const day = Math.min(pick("day", current.value.getDate()), daysIn(year, month));
+		return clamp(new Date(year, month - 1, day));
+	};
+	return () => createVNode(Picker, mergeJsxProps(rest, {
+		"columns": lists.value,
+		"_value": valuesOf(current.value),
+		"onChange": _cache[0] || (_cache[0] = ({ values }) => value.value = dateOf(values)),
+		"onConfirm": _cache[1] || (_cache[1] = ({ values }) => onConfirm.value?.(dateOf(values)))
+	}), null);
+}, {
+	name: "DatePicker",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"minDate",
+		"maxDate",
+		"columns",
+		"onConfirm"
+	]
+});
+/** 未声明的属性落到选择器的根元素上 */
+/** 时间选择器（Picker：时、分两列） */
+var TimePicker = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const _cache2 = [];
+	const value = bindable(_props2, "_value", () => "00:00", _ctx2.emit);
+	const minHour = readonlyProp(_props2, "minHour", 0);
+	const maxHour = readonlyProp(_props2, "maxHour", 23);
+	const minuteStep = readonlyProp(_props2, "minuteStep", 1);
+	const onConfirm = readonlyProp(_props2, "onConfirm");
+	const rest = restProps(_props2, _ctx2, true);
+	const config = useConfig();
+	const lists = computed(() => {
+		const units = config.lang.dateUnits;
+		return [range(minHour.value, maxHour.value).map((n) => ({
+			text: `${pad(n)}${units.hour}`,
+			value: n
+		})), range(0, Math.floor(59 / minuteStep.value)).map((n) => ({
+			text: `${pad(n * minuteStep.value)}${units.minute}`,
+			value: n * minuteStep.value
+		}))];
+	});
+	const parts = () => {
+		const [hour = "0", minute = "0"] = value.value.split(":");
+		return [Number(hour), Math.round(Number(minute) / minuteStep.value) * minuteStep.value];
+	};
+	const format = (values) => values.map((n) => pad(Number(n))).join(":");
+	return () => createVNode(Picker, mergeJsxProps(rest, {
+		"columns": lists.value,
+		"_value": parts(),
+		"onChange": _cache2[0] || (_cache2[0] = ({ values }) => value.value = format(values)),
+		"onConfirm": _cache2[1] || (_cache2[1] = ({ values }) => onConfirm.value?.(format(values)))
+	}), null);
+}, {
+	name: "TimePicker",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"minHour",
+		"maxHour",
+		"minuteStep",
+		"onConfirm"
+	]
+});
+//#endregion
+export { DatePicker, TimePicker };
+
+//# sourceMappingURL=DatePicker.js.map

package/dist/picker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/picker/DatePicker.tsx"],"sourcesContent":["/**\n * 日期选择器与时间选择器：滚轮选年月日（可以只要年月）、选时分（分钟可以按步长）。建在 Picker 上，常放在底部弹出层里。\n *\n *   <DatePicker _value={birthday} minDate={new Date(1950, 0, 1)} maxDate={new Date()} onConfirm={(date) => …} />\n *   <DatePicker _value={month} columns={['year', 'month']} />\n *   <TimePicker _value={time} minuteStep={15} />          time 是 \"09:30\"\n *\n * 换了年月时日子按那个月的天数修正（3 月 31 日换到 2 月是 2 月 28 / 29 日），超出 minDate、maxDate 的项不出现。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { VNodeChild } from 'vue';\nimport { useConfig } from '../config/context';\nimport type { PartProps } from '../utils/props';\nimport { Picker, type PickerOption } from './Picker';\n\n/** 日期的列 */\nexport type DateColumn = 'year' | 'month' | 'day';\n\n/** 共有的属性 */\ninterface PickerShellProps extends Omit<PartProps<'div', 'title'>, 'onChange'> {\n  /** 标题 */\n  title?: VNodeChild;\n  /** 点了取消 */\n  onCancel?: () => void;\n  /** 可见的行数 */\n  visibleItemCount?: number;\n}\n\n/** 未声明的属性落到选择器的根元素上 */\nexport interface DatePickerProps extends PickerShellProps {\n  /** 选中的日期；双向绑定写 `_value={x}`。不给时是今天（限在范围内） */\n  _value?: Date;\n  /** 最早的日期；默认十年前的 1 月 1 日 */\n  minDate?: Date;\n  /** 最晚的日期；默认十年后的 12 月 31 日 */\n  maxDate?: Date;\n  /**\n   * 显示哪几列\n   * @default ['year', 'month', 'day']\n   */\n  columns?: DateColumn[];\n  /** 点了确认 */\n  onConfirm?: (date: Date) => void;\n}\n\nconst daysIn = (year: number, month: number) => new Date(year, month, 0).getDate();\nconst range = (from: number, to: number) =>\n  Array.from({ length: to - from + 1 }, (_, index) => from + index);\nconst pad = (value: number) => String(value).padStart(2, '0');\n\n/** 日期选择器（Picker） */\nexport const DatePicker = _component(\n  ({\n    _value: value = _bindable<Date | undefined>(undefined),\n    minDate,\n    maxDate,\n    columns = ['year', 'month', 'day'],\n    onConfirm,\n    ...rest\n  }: DatePickerProps) => {\n    const config = useConfig();\n    const now = new Date();\n    const min = _derived(minDate ?? new Date(now.getFullYear() - 10, 0, 1));\n    const max = _derived(maxDate ?? new Date(now.getFullYear() + 10, 11, 31));\n    /** 把日期限在范围内（只看年月日） */\n    const clamp = (date: Date) => {\n      const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n      if (day < min) return new Date(min.getFullYear(), min.getMonth(), min.getDate());\n      if (day > max) return new Date(max.getFullYear(), max.getMonth(), max.getDate());\n      return day;\n    };\n    const current = _derived(clamp(value ?? now));\n\n    /** 各列的选项：月份、日子按当前的年月与范围裁剪 */\n    const lists = _derived.by(() => {\n      const year = current.getFullYear();\n      const month = current.getMonth() + 1;\n      const atMin = (unit: 'year' | 'month') =>\n        year === min.getFullYear() && (unit === 'year' || month === min.getMonth() + 1);\n      const atMax = (unit: 'year' | 'month') =>\n        year === max.getFullYear() && (unit === 'year' || month === max.getMonth() + 1);\n      const units = config.lang.dateUnits;\n      const all: Record<DateColumn, PickerOption[]> = {\n        year: range(min.getFullYear(), max.getFullYear()).map((n) => ({\n          text: `${n}${units.year}`,\n          value: n,\n        })),\n        month: range(\n          atMin('year') ? min.getMonth() + 1 : 1,\n          atMax('year') ? max.getMonth() + 1 : 12,\n        ).map((n) => ({ text: `${pad(n)}${units.month}`, value: n })),\n        day: range(\n          atMin('month') ? min.getDate() : 1,\n          atMax('month') ? max.getDate() : daysIn(year, month),\n        ).map((n) => ({ text: `${pad(n)}${units.day}`, value: n })),\n      };\n      return columns.map((column) => all[column]);\n    });\n\n    const valuesOf = (date: Date) =>\n      columns.map((column) =>\n        column === 'year'\n          ? date.getFullYear()\n          : column === 'month'\n            ? date.getMonth() + 1\n            : date.getDate(),\n      );\n    /** 各列的值 → 日期：缺的列取当前的，日子按月份的天数修正 */\n    const dateOf = (values: (string | number)[]) => {\n      const pick = (column: DateColumn, fallback: number) => {\n        const position = columns.indexOf(column);\n        return position >= 0 ? Number(values[position]) : fallback;\n      };\n      const year = pick('year', current.getFullYear());\n      const month = pick('month', current.getMonth() + 1);\n      const day = Math.min(pick('day', current.getDate()), daysIn(year, month));\n      return clamp(new Date(year, month - 1, day));\n    };\n\n    return () => (\n      <Picker\n        {...rest}\n        columns={lists}\n        _value={valuesOf(current)}\n        onChange={({ values }) => (value = dateOf(values))}\n        onConfirm={({ values }) => onConfirm?.(dateOf(values))}\n      />\n    );\n  },\n);\n\n/** 未声明的属性落到选择器的根元素上 */\nexport interface TimePickerProps extends PickerShellProps {\n  /** 选中的时间 \"HH:mm\"；双向绑定写 `_value={x}`。不给时是 00:00 */\n  _value?: string;\n  /**\n   * 最小、最大的小时\n   * @default 0、23\n   */\n  minHour?: number;\n  maxHour?: number;\n  /**\n   * 分钟的步长\n   * @default 1\n   */\n  minuteStep?: number;\n  /** 点了确认 */\n  onConfirm?: (time: string) => void;\n}\n\n/** 时间选择器（Picker：时、分两列） */\nexport const TimePicker = _component(\n  ({\n    _value: value = _bindable('00:00'),\n    minHour = 0,\n    maxHour = 23,\n    minuteStep = 1,\n    onConfirm,\n    ...rest\n  }: TimePickerProps) => {\n    const config = useConfig();\n    const lists = _derived.by(() => {\n      const units = config.lang.dateUnits;\n      return [\n        range(minHour, maxHour).map((n) => ({ text: `${pad(n)}${units.hour}`, value: n })),\n        range(0, Math.floor(59 / minuteStep)).map((n) => ({\n          text: `${pad(n * minuteStep)}${units.minute}`,\n          value: n * minuteStep,\n        })),\n      ];\n    });\n    const parts = () => {\n      const [hour = '0', minute = '0'] = value.split(':');\n      return [Number(hour), Math.round(Number(minute) / minuteStep) * minuteStep];\n    };\n    const format = (values: (string | number)[]) => values.map((n) => pad(Number(n))).join(':');\n    return () => (\n      <Picker\n        {...rest}\n        columns={lists}\n        _value={parts()}\n        onChange={({ values }) => (value = format(values))}\n        onConfirm={({ values }) => onConfirm?.(format(values))}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;AA6CA,IAAM,UAAU,MAAc,UAAkB,IAAI,KAAK,MAAM,OAAO,CAAC,CAAC,CAAC,QAAQ;AACjF,IAAM,SAAS,MAAc,OAC3B,MAAM,KAAK,EAAE,QAAQ,KAAK,OAAO,EAAE,IAAI,GAAG,UAAU,OAAO,KAAK;AAClE,IAAM,OAAO,UAAkB,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;;AAG5D,IAAa,aAAa,0BACxB,QAAA,SAOuB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,SAAA,QAAA,gBANuB,KAAA,GAAS,KAAA,IAAA;CAAA,MAAA,UAAAC,aAAA,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,iBAG3C;EAAC;EAAQ;EAAS;CAAK,CAAC;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAE/B,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,SAAS,UAAU;CACzB,MAAM,sBAAM,IAAI,KAAK;CACrB,MAAM,MAAGC,eAAY,QAAA,SAAW,IAAI,KAAK,IAAI,YAAY,IAAI,IAAI,GAAG,CAAC,CAAC;CACtE,MAAM,MAAGA,eAAY,QAAA,SAAW,IAAI,KAAK,IAAI,YAAY,IAAI,IAAI,IAAI,EAAE,CAAC;;CAExE,MAAM,SAAS,SAAe;EAC5B,MAAM,MAAM,IAAI,KAAK,KAAK,YAAY,GAAG,KAAK,SAAS,GAAG,KAAK,QAAQ,CAAC;EACxE,IAAI,MAAG,IAAA,OAAQ,OAAO,IAAI,KAAK,IAAA,MAAI,YAAY,GAAG,IAAA,MAAI,SAAS,GAAG,IAAA,MAAI,QAAQ,CAAC;EAC/E,IAAI,MAAG,IAAA,OAAQ,OAAO,IAAI,KAAK,IAAA,MAAI,YAAY,GAAG,IAAA,MAAI,SAAS,GAAG,IAAA,MAAI,QAAQ,CAAC;EAC/E,OAAO;CACT;CACA,MAAM,UAAOA,eAAY,MAAM,MAAA,SAAS,GAAG,CAAC;;CAG5C,MAAM,QAAKA,eAAqB;EAC9B,MAAM,OAAO,QAAA,MAAQ,YAAY;EACjC,MAAM,QAAQ,QAAA,MAAQ,SAAS,IAAI;EACnC,MAAM,SAAS,SACb,SAAS,IAAA,MAAI,YAAY,MAAM,SAAS,UAAU,UAAU,IAAA,MAAI,SAAS,IAAI;EAC/E,MAAM,SAAS,SACb,SAAS,IAAA,MAAI,YAAY,MAAM,SAAS,UAAU,UAAU,IAAA,MAAI,SAAS,IAAI;EAC/E,MAAM,QAAQ,OAAO,KAAK;EAC1B,MAAM,MAA0C;GAC9C,MAAM,MAAM,IAAA,MAAI,YAAY,GAAG,IAAA,MAAI,YAAY,CAAC,CAAC,CAAC,KAAK,OAAO;IAC5D,MAAM,GAAG,IAAI,MAAM;IACnB,OAAO;GACT,EAAE;GACF,OAAO,MACL,MAAM,MAAM,IAAI,IAAA,MAAI,SAAS,IAAI,IAAI,GACrC,MAAM,MAAM,IAAI,IAAA,MAAI,SAAS,IAAI,IAAI,EACvC,CAAC,CAAC,KAAK,OAAO;IAAE,MAAM,GAAG,IAAI,CAAC,IAAI,MAAM;IAAS,OAAO;GAAE,EAAE;GAC5D,KAAK,MACH,MAAM,OAAO,IAAI,IAAA,MAAI,QAAQ,IAAI,GACjC,MAAM,OAAO,IAAI,IAAA,MAAI,QAAQ,IAAI,OAAO,MAAM,KAAK,CACrD,CAAC,CAAC,KAAK,OAAO;IAAE,MAAM,GAAG,IAAI,CAAC,IAAI,MAAM;IAAO,OAAO;GAAE,EAAE;EAC5D;EACA,OAAO,QAAA,MAAQ,KAAK,WAAW,IAAI,OAAO;CAC5C,CAAC;CAED,MAAM,YAAY,SAChB,QAAA,MAAQ,KAAK,WACX,WAAW,SACP,KAAK,YAAY,IACjB,WAAW,UACT,KAAK,SAAS,IAAI,IAClB,KAAK,QAAQ,CACrB;;CAEF,MAAM,UAAU,WAAgC;EAC9C,MAAM,QAAQ,QAAoB,aAAqB;GACrD,MAAM,WAAW,QAAA,MAAQ,QAAQ,MAAM;GACvC,OAAO,YAAY,IAAI,OAAO,OAAO,SAAS,IAAI;EACpD;EACA,MAAM,OAAO,KAAK,QAAQ,QAAA,MAAQ,YAAY,CAAC;EAC/C,MAAM,QAAQ,KAAK,SAAS,QAAA,MAAQ,SAAS,IAAI,CAAC;EAClD,MAAM,MAAM,KAAK,IAAI,KAAK,OAAO,QAAA,MAAQ,QAAQ,CAAC,GAAG,OAAO,MAAM,KAAK,CAAC;EACxE,OAAO,MAAM,IAAI,KAAK,MAAM,QAAQ,GAAG,GAAG,CAAC;CAC7C;CAEA,aAAOC,YAAA,QAAAC,cAEC,MAAI;EAAA,WAAA,MAAA;EAAA,UAEA,SAAQ,QAAA,KAAQ;EAAC,YAAA,OAAA,OAAA,OAAA,MACd,EAAE,aAAc,MAAA,QAAQ,OAAO,MAAM;EAAE,aAAA,OAAA,OAAA,OAAA,MACtC,EAAE,aAAa,UAAA,QAAY,OAAO,MAAM,CAAC;CAAC,CAAA,GAAA,IAAA;AAG5D,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;AAsBA,IAAa,aAAa,0BACxB,SAAA,UAOuB;CAAA,MAAA,UAAA,CAAA;CAAA,MAAA,QAAAL,SAAA,SAAA,gBANK,SAAO,MAAA,IAAA;CAAA,MAAA,UAAAC,aAAA,SAAA,WACvB,CAAC;CAAA,MAAA,UAAAA,aAAA,SAAA,WACD,EAAE;CAAA,MAAA,aAAAA,aAAA,SAAA,cACC,CAAC;CAAA,MAAA,YAAAA,aAAA,SAAA,WAAA;CAAA,MAEX,OAAIC,UAAA,SAAA,OAAA,IAAA;CAEP,MAAM,SAAS,UAAU;CACzB,MAAM,QAAKC,eAAqB;EAC9B,MAAM,QAAQ,OAAO,KAAK;EAC1B,OAAO,CACL,MAAK,QAAA,OAAA,QAAA,KAAiB,CAAC,CAAC,KAAK,OAAO;GAAE,MAAM,GAAG,IAAI,CAAC,IAAI,MAAM;GAAQ,OAAO;EAAE,EAAE,GACjF,MAAM,GAAG,KAAK,MAAM,KAAE,WAAA,KAAa,CAAC,CAAC,CAAC,KAAK,OAAO;GAChD,MAAM,GAAG,IAAI,IAAC,WAAA,KAAa,IAAI,MAAM;GACrC,OAAO,IAAC,WAAA;EACV,EAAE,CAAC;CAEP,CAAC;CACD,MAAM,cAAc;EAClB,MAAM,CAAC,OAAO,KAAK,SAAS,OAAO,MAAA,MAAM,MAAM,GAAG;EAClD,OAAO,CAAC,OAAO,IAAI,GAAG,KAAK,MAAM,OAAO,MAAM,IAAC,WAAA,KAAa,IAAC,WAAA,KAAa;CAC5E;CACA,MAAM,UAAU,WAAgC,OAAO,KAAK,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG;CAC1F,aAAOC,YAAA,QAAAC,cAEC,MAAI;EAAA,WAAA,MAAA;EAAA,UAEA,MAAM;EAAC,YAAA,QAAA,OAAA,QAAA,MACJ,EAAE,aAAc,MAAA,QAAQ,OAAO,MAAM;EAAE,aAAA,QAAA,OAAA,QAAA,MACtC,EAAE,aAAa,UAAA,QAAY,OAAO,MAAM,CAAC;CAAC,CAAA,GAAA,IAAA;AAG5D,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/picker/DropdownMenu.d.ts

@@ -0,0 +1,39 @@
+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';
+/** 未声明的属性落到菜单这一排（div）上 */
+export interface DropdownMenuProps extends PartProps<'div', 'role'> {
+    /** 各个 DropdownItem */
+    children?: VNodeChild;
+}
+/** DropdownMenu、DropdownItem 的样式 */
+export declare const dropdownStyles: Readonly<{
+    arrow: css.CompiledStyles;
+    bar: css.CompiledStyles;
+    clip: css.CompiledStyles;
+    option: css.CompiledStyles;
+    overlay: css.CompiledStyles;
+    panel: css.CompiledStyles;
+    title: css.CompiledStyles;
+    titleText: css.CompiledStyles;
+}>;
+/** 下拉菜单（div > 各项的标题；展开的面板在浮层根） */
+export declare const DropdownMenu: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DropdownMenuProps>;
+/** 未声明的属性落到面板（div）上 */
+export interface DropdownItemProps extends Omit<PartProps<'div', 'title' | 'role'>, 'onChange'> {
+    /** 选中的值；双向绑定写 `_value={x}` */
+    _value?: string | number;
+    /** 选项（与 children 二选一） */
+    options?: PickerOption[];
+    /** 标题；不给时显示选中的选项 */
+    title?: VNodeChild;
+    /** 不能展开 */
+    disabled?: boolean;
+    /** 选了另一项 */
+    onChange?: (value: string | number) => void;
+    /** 自定义的面板内容（代替选项） */
+    children?: VNodeChild;
+}
+/** 下拉菜单的一项：标题由菜单画，这里画展开的面板 */
+export declare const DropdownItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DropdownItemProps>;

package/dist/picker/DropdownMenu.js

@@ -0,0 +1,242 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, hasContent, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { useHost } from "../utils/host.js";
+import { usePresence } from "../utils/presence.js";
+import { useLockScroll } from "../overlay/Overlay.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, childrenProp, createContext, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Teleport, computed, createVNode, onBeforeUnmount, ref, shallowReactive } from "vue";
+import { Check, ChevronDown } from "@lucide/icons";
+//#region src/picker/DropdownMenu.tsx
+/**
+* 下拉菜单：列表上方的一排筛选（排序、分类、价格），点一项从这一排下面展开选项，选了就收起；同一时间只展开一个。
+*
+*   <DropdownMenu>
+*     <DropdownItem _value={sort} options={[{ text: '综合排序', value: 'default' }, { text: '销量优先', value: 'sales' }]} />
+*     <DropdownItem title="筛选">…自定义内容（开关、按钮）…</DropdownItem>
+*   </DropdownMenu>
+*
+* 展开的面板与遮罩渲染到浮层根，从这一排的下沿开始（宿主量它的位置），遮罩只盖住下面的部分。
+*/
+/** 一项登记给菜单的 */
+/** 菜单提供给各项的 */
+var DropdownContext = createContext("DropdownMenu");
+/** 未声明的属性落到菜单这一排（div）上 */
+/** DropdownMenu、DropdownItem 的样式 */
+var dropdownStyles = css.create({
+	bar: {
+		position: "relative",
+		zIndex: 10,
+		display: "flex",
+		height: "3em",
+		backgroundColor: "_surface",
+		boxShadow: "_sm"
+	},
+	title: {
+		flex: "1 1 0",
+		minWidth: 0,
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "0.2em",
+		margin: 0,
+		paddingInline: "_sm",
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: {
+			default: "_text",
+			"[aria-expanded=\"true\"]": "_accentText",
+			"[disabled]": "_textDisabled"
+		},
+		fontFamily: "inherit",
+		fontSize: "_md",
+		whiteSpace: "nowrap",
+		cursor: {
+			default: "pointer",
+			"[disabled]": "not-allowed"
+		}
+	},
+	titleText: {
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	},
+	arrow: {
+		flex: "none",
+		fontSize: "0.9em",
+		transform: {
+			default: "none",
+			"[data-open]": "rotate(180deg)"
+		},
+		transitionProperty: "transform",
+		transitionDuration: "_md"
+	},
+	overlay: {
+		position: "fixed",
+		insetInline: 0,
+		insetBlockEnd: 0,
+		zIndex: 2e3,
+		backgroundColor: "_overlay",
+		opacity: {
+			default: 0,
+			"[data-state=\"open\"]": 1
+		},
+		transitionProperty: "opacity",
+		transitionDuration: "_md"
+	},
+	clip: {
+		position: "fixed",
+		insetInline: 0,
+		zIndex: 2001,
+		overflow: "hidden"
+	},
+	panel: {
+		maxHeight: "60vh",
+		overflowY: "auto",
+		backgroundColor: "_surface",
+		borderEndStartRadius: "_lg",
+		borderEndEndRadius: "_lg",
+		transform: {
+			default: "translateY(-100%)",
+			"[data-state=\"open\"]": "none"
+		},
+		transitionProperty: "transform",
+		transitionDuration: "_md",
+		transitionTimingFunction: "_standard"
+	},
+	option: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		minHeight: "_control",
+		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"
+		}
+	}
+});
+/** 下拉菜单（div > 各项的标题；展开的面板在浮层根） */
+var DropdownMenu = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const host = useHost();
+	const entries = shallowReactive([]);
+	let open = ref(-1);
+	let top = ref(0);
+	let bar = null;
+	const toggle = async (index) => {
+		if (open.value === index) return void (open.value = -1);
+		const rect = await host.measure(bar);
+		top.value = rect ? rect.top + rect.height : 0;
+		open.value = index;
+	};
+	DropdownContext.provide({
+		get open() {
+			return open.value;
+		},
+		get top() {
+			return top.value;
+		},
+		register(entry) {
+			entries.push(entry);
+			return {
+				index: () => entries.indexOf(entry),
+				unregister: () => void entries.splice(entries.indexOf(entry), 1)
+			};
+		},
+		close: () => open.value = -1
+	});
+	return () => createVNode("div", mergeJsxProps(mergeAttrs({ sx: dropdownStyles.bar }, rest, { role: "menubar" }), { "ref": _cache[0] || (_cache[0] = (node) => bar = node) }), [entries.map((entry, index) => createVNode("button", mergeJsxProps(mergeAttrs({ sx: dropdownStyles.title }), {
+		"type": "button",
+		"aria-expanded": open.value === index ? "true" : "false",
+		"aria-haspopup": "true",
+		"disabled": entry.disabled,
+		"onClick": () => void toggle(index)
+	}), [createVNode("span", mergeAttrs({ sx: dropdownStyles.titleText }), [entry.title]), createVNode(Icon, mergeJsxProps({
+		"icon": ChevronDown,
+		"sx": dropdownStyles.arrow
+	}, dataAttrs({ "data-open": open.value === index })), null)])), children.value]);
+}, { name: "DropdownMenu" });
+/** 未声明的属性落到面板（div）上 */
+/** 下拉菜单的一项：标题由菜单画，这里画展开的面板 */
+var DropdownItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const _cache2 = [];
+	const value = bindable(_props2, "_value", () => void 0, _ctx2.emit);
+	const options = readonlyProp(_props2, "options", () => []);
+	const title = readonlyProp(_props2, "title");
+	const disabled = readonlyProp(_props2, "disabled", false);
+	const onChange = readonlyProp(_props2, "onChange");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const menu = DropdownContext.inject();
+	const host = useHost();
+	const config = useConfig();
+	const label = computed(() => title.value ?? options.value.find((option) => option.value === value.value)?.text ?? options.value[0]?.text);
+	const handle = menu.register({
+		get title() {
+			return label.value;
+		},
+		get disabled() {
+			return disabled.value;
+		}
+	});
+	onBeforeUnmount(handle.unregister);
+	const isOpen = () => menu.open === handle.index();
+	const presence = usePresence(isOpen);
+	useLockScroll(isOpen);
+	const choose = (option) => {
+		if (option.disabled) return;
+		if (option.value !== value.value) {
+			value.value = option.value;
+			onChange.value?.(option.value);
+		}
+		menu.close();
+	};
+	return () => {
+		if (!presence.mounted) return null;
+		const state = dataAttrs({ "data-state": presence.visible ? "open" : "closed" });
+		return createVNode(Teleport, { "to": host.overlayRoot() }, { default: () => [createVNode("div", mergeJsxProps(mergeAttrs({
+			sx: [config.rootSx, dropdownStyles.overlay],
+			style: { insetBlockStart: `${menu.top}px` }
+		}, state), { "onClick": _cache2[0] || (_cache2[0] = () => menu.close()) }, dataAttrs({ "data-scroll-lock": true })), null), createVNode("div", mergeAttrs({
+			sx: [config.rootSx, dropdownStyles.clip],
+			style: { insetBlockStart: `${menu.top}px` }
+		}), [createVNode("div", mergeAttrs({ sx: dropdownStyles.panel }, rest, {
+			role: "menu",
+			...state
+		}), [hasContent(children.value) ? children.value : options.value.map((option) => {
+			const selected = option.value === value.value;
+			return createVNode("div", mergeJsxProps(mergeAttrs({ sx: dropdownStyles.option }), {
+				"role": "menuitemradio",
+				"aria-checked": selected ? "true" : "false",
+				"aria-selected": selected ? "true" : "false"
+			}, dataAttrs({ "data-disabled": option.disabled }), { "onClick": () => choose(option) }), [createVNode("span", null, [option.text]), selected && createVNode(Icon, { "icon": Check }, null)]);
+		})])])] });
+	};
+}, {
+	name: "DropdownItem",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"options",
+		"title",
+		"disabled",
+		"onChange"
+	]
+});
+//#endregion
+export { DropdownItem, DropdownMenu, dropdownStyles };
+
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/picker/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","names":["_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps","_vtp_bindable","_vtp_readonlyProp","_vue_computed"],"sources":["../../src/picker/DropdownMenu.tsx"],"sourcesContent":["/**\n * 下拉菜单：列表上方的一排筛选（排序、分类、价格），点一项从这一排下面展开选项，选了就收起；同一时间只展开一个。\n *\n *   <DropdownMenu>\n *     <DropdownItem _value={sort} options={[{ text: '综合排序', value: 'default' }, { text: '销量优先', value: 'sales' }]} />\n *     <DropdownItem title=\"筛选\">…自定义内容（开关、按钮）…</DropdownItem>\n *   </DropdownMenu>\n *\n * 展开的面板与遮罩渲染到浮层根，从这一排的下沿开始（宿主量它的位置），遮罩只盖住下面的部分。\n */\nimport { Check, ChevronDown } from '@lucide/icons';\nimport { _component, createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Teleport, onBeforeUnmount, shallowReactive, type VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { useLockScroll } from '../overlay/Overlay';\nimport { useHost } from '../utils/host';\nimport { usePresence } from '../utils/presence';\nimport { dataAttrs, hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport type { PickerOption } from './PickerColumn';\n\n/** 一项登记给菜单的 */\ninterface DropdownEntry {\n  readonly title: VNodeChild;\n  readonly disabled: boolean;\n}\n\n/** 菜单提供给各项的 */\ninterface DropdownState {\n  /** 展开的是第几项；-1 是都收着 */\n  readonly open: number;\n  /** 面板的上沿（px，菜单这一排的下沿） */\n  readonly top: number;\n  register(entry: DropdownEntry): { index: () => number; unregister: () => void };\n  close(): void;\n}\n\nconst DropdownContext = createContext<DropdownState>('DropdownMenu');\n\n/** 未声明的属性落到菜单这一排（div）上 */\nexport interface DropdownMenuProps extends PartProps<'div', 'role'> {\n  /** 各个 DropdownItem */\n  children?: VNodeChild;\n}\n\n/** DropdownMenu、DropdownItem 的样式 */\nexport const dropdownStyles = css.create({\n  bar: {\n    position: 'relative',\n    zIndex: 10,\n    display: 'flex',\n    height: '3em',\n    backgroundColor: '_surface',\n    boxShadow: '_sm',\n  },\n  title: {\n    flex: '1 1 0',\n    minWidth: 0,\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '0.2em',\n    margin: 0,\n    paddingInline: '_sm',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: {\n      default: '_text',\n      '[aria-expanded=\"true\"]': '_accentText',\n      '[disabled]': '_textDisabled',\n    },\n    fontFamily: 'inherit',\n    fontSize: '_md',\n    whiteSpace: 'nowrap',\n    cursor: { default: 'pointer', '[disabled]': 'not-allowed' },\n  },\n  titleText: { overflow: 'hidden', textOverflow: 'ellipsis' },\n  arrow: {\n    flex: 'none',\n    fontSize: '0.9em',\n    transform: { default: 'none', '[data-open]': 'rotate(180deg)' },\n    transitionProperty: 'transform',\n    transitionDuration: '_md',\n  },\n  overlay: {\n    position: 'fixed',\n    insetInline: 0,\n    insetBlockEnd: 0,\n    zIndex: 2000,\n    backgroundColor: '_overlay',\n    opacity: { default: 0, '[data-state=\"open\"]': 1 },\n    transitionProperty: 'opacity',\n    transitionDuration: '_md',\n  },\n  // 面板外面一层裁掉面板滑出来之前的部分\n  clip: { position: 'fixed', insetInline: 0, zIndex: 2001, overflow: 'hidden' },\n  panel: {\n    maxHeight: '60vh',\n    overflowY: 'auto',\n    backgroundColor: '_surface',\n    borderEndStartRadius: '_lg',\n    borderEndEndRadius: '_lg',\n    transform: { default: 'translateY(-100%)', '[data-state=\"open\"]': 'none' },\n    transitionProperty: 'transform',\n    transitionDuration: '_md',\n    transitionTimingFunction: '_standard',\n  },\n  option: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    minHeight: '_control',\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/** 下拉菜单（div > 各项的标题；展开的面板在浮层根） */\nexport const DropdownMenu = _component(({ children, ...rest }: DropdownMenuProps) => {\n  const host = useHost();\n  const entries = shallowReactive<DropdownEntry[]>([]);\n  let open = _state(-1);\n  let top = _state(0);\n  let bar: unknown = null;\n  const toggle = async (index: number) => {\n    if (open === index) return void (open = -1);\n    const rect = await host.measure(bar);\n    top = rect ? rect.top + rect.height : 0;\n    open = index;\n  };\n  DropdownContext.provide({\n    get open() {\n      return open;\n    },\n    get top() {\n      return top;\n    },\n    register(entry) {\n      entries.push(entry);\n      return {\n        index: () => entries.indexOf(entry),\n        unregister: () => void entries.splice(entries.indexOf(entry), 1),\n      };\n    },\n    close: () => (open = -1),\n  });\n  return () => (\n    <div\n      {...mergeAttrs<'div'>({ sx: dropdownStyles.bar }, rest, { role: 'menubar' })}\n      ref={(node: unknown) => (bar = node)}\n    >\n      {entries.map((entry, index) => (\n        <button\n          {...mergeAttrs<'button'>({ sx: dropdownStyles.title })}\n          type=\"button\"\n          aria-expanded={open === index ? 'true' : 'false'}\n          aria-haspopup=\"true\"\n          disabled={entry.disabled}\n          onClick={() => void toggle(index)}\n        >\n          <span {...mergeAttrs<'span'>({ sx: dropdownStyles.titleText })}>{entry.title}</span>\n          <Icon\n            icon={ChevronDown}\n            sx={dropdownStyles.arrow}\n            {...dataAttrs({ 'data-open': open === index })}\n          />\n        </button>\n      ))}\n      {children}\n    </div>\n  );\n});\n\n/** 未声明的属性落到面板（div）上 */\nexport interface DropdownItemProps extends Omit<PartProps<'div', 'title' | 'role'>, 'onChange'> {\n  /** 选中的值；双向绑定写 `_value={x}` */\n  _value?: string | number;\n  /** 选项（与 children 二选一） */\n  options?: PickerOption[];\n  /** 标题；不给时显示选中的选项 */\n  title?: VNodeChild;\n  /** 不能展开 */\n  disabled?: boolean;\n  /** 选了另一项 */\n  onChange?: (value: string | number) => void;\n  /** 自定义的面板内容（代替选项） */\n  children?: VNodeChild;\n}\n\n/** 下拉菜单的一项：标题由菜单画，这里画展开的面板 */\nexport const DropdownItem = _component(\n  ({\n    _value: value = _bindable<string | number | undefined>(undefined),\n    options = [],\n    title,\n    disabled = false,\n    onChange,\n    children,\n    ...rest\n  }: DropdownItemProps) => {\n    const menu = DropdownContext.inject();\n    const host = useHost();\n    const config = useConfig();\n    // 标题在这里算好：菜单的渲染只读这个派生值，不去读这一项可双向绑定的 _value\n    const label = _derived(\n      title ?? options.find((option) => option.value === value)?.text ?? options[0]?.text,\n    );\n    const handle = menu.register({\n      get title() {\n        return label;\n      },\n      get disabled() {\n        return disabled;\n      },\n    });\n    onBeforeUnmount(handle.unregister);\n    const isOpen = () => menu.open === handle.index();\n    const presence = usePresence(isOpen);\n    useLockScroll(isOpen);\n\n    const choose = (option: PickerOption) => {\n      if (option.disabled) return;\n      if (option.value !== value) {\n        value = option.value;\n        onChange?.(option.value);\n      }\n      menu.close();\n    };\n\n    return () => {\n      if (!presence.mounted) return null;\n      const state = dataAttrs({ 'data-state': presence.visible ? 'open' : 'closed' });\n      return (\n        <Teleport to={host.overlayRoot() as never}>\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [config.rootSx, dropdownStyles.overlay],\n                style: { insetBlockStart: `${menu.top}px` },\n              },\n              state,\n            )}\n            onClick={() => menu.close()}\n            {...dataAttrs({ 'data-scroll-lock': true })}\n          />\n          <div\n            {...mergeAttrs<'div'>({\n              sx: [config.rootSx, dropdownStyles.clip],\n              style: { insetBlockStart: `${menu.top}px` },\n            })}\n          >\n            <div\n              {...mergeAttrs<'div'>({ sx: dropdownStyles.panel }, rest, { role: 'menu', ...state })}\n            >\n              {hasContent(children)\n                ? children\n                : options.map((option) => {\n                    const selected = option.value === value;\n                    return (\n                      <div\n                        {...mergeAttrs<'div'>({ sx: dropdownStyles.option })}\n                        role=\"menuitemradio\"\n                        aria-checked={selected ? 'true' : 'false'}\n                        aria-selected={selected ? 'true' : 'false'}\n                        {...dataAttrs({ 'data-disabled': option.disabled })}\n                        onClick={() => choose(option)}\n                      >\n                        <span>{option.text}</span>\n                        {selected && <Icon icon={Check} />}\n                      </div>\n                    );\n                  })}\n            </div>\n          </div>\n        </Teleport>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/picker/Picker.d.ts

@@ -0,0 +1,67 @@
+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 type { PickerOption } from './PickerColumn';
+/** 选项的值 */
+export type PickerValue = string | number;
+/** 确认、变化时给出的 */
+export interface PickerResult {
+    /** 各列选中的值 */
+    values: PickerValue[];
+    /** 各列选中的选项 */
+    options: PickerOption[];
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface PickerProps extends Omit<PartProps<'div', 'title'>, 'onChange'> {
+    /** 选项：一列、几列（数组的数组）、联动（选项带 children） */
+    columns: PickerOption[] | PickerOption[][];
+    /** 各列选中的值；双向绑定写 `_value={x}`（滚动时就写回，确认时 onConfirm） */
+    _value?: PickerValue[];
+    /** 标题 */
+    title?: VNodeChild;
+    /**
+     * 显示标题栏
+     * @default true
+     */
+    showToolbar?: boolean;
+    /** 确认的文字；不给时用语言包 */
+    confirmText?: VNodeChild;
+    /** 取消的文字；不给时用语言包 */
+    cancelText?: VNodeChild;
+    /**
+     * 可见的行数（奇数）
+     * @default 5
+     */
+    visibleItemCount?: number;
+    /** 点了确认 */
+    onConfirm?: (result: PickerResult) => void;
+    /** 点了取消 */
+    onCancel?: () => void;
+    /** 滚到另一项 */
+    onChange?: (result: PickerResult & {
+        columnIndex: number;
+    }) => void;
+    /** 各列的读屏名称 */
+    columnLabels?: string[];
+}
+/** Picker 的样式：root、toolbar、title、action、confirm、columns、mask、indicator */
+export declare const pickerStyles: Readonly<{
+    action: css.CompiledStyles;
+    columns: css.CompiledStyles;
+    confirm: css.CompiledStyles;
+    indicator: css.CompiledStyles;
+    mask: css.CompiledStyles;
+    root: css.CompiledStyles;
+    title: css.CompiledStyles;
+    toolbar: css.CompiledStyles;
+}>;
+/** 按选中的值算出各列（联动时跟着上一列的选择往下展开）与各列选中的序号 */
+export declare function resolveColumns(columns: PickerOption[] | PickerOption[][], values: PickerValue[]): {
+    lists: PickerOption[][];
+    indexes: number[];
+    options: PickerOption[];
+    values: (string | number)[];
+};
+/** 选择器（div > 标题栏 + 各列滚轮） */
+export declare const Picker: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PickerProps>;