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

package/dist/picker/Picker.js

@@ -0,0 +1,185 @@
+import { t } from "../theme/tokens.js";
+import { useConfig } from "../config/context.js";
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { PICKER_ITEM_HEIGHT, PickerColumn } from "./PickerColumn.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { computed, createVNode } from "vue";
+//#region src/picker/Picker.tsx
+/** 选项的值 */
+/** 确认、变化时给出的 */
+/** 未声明的属性落到根元素（div）上 */
+/** Picker 的样式：root、toolbar、title、action、confirm、columns、mask、indicator */
+var pickerStyles = css.create({
+	root: {
+		position: "relative",
+		backgroundColor: "_surface",
+		userSelect: "none"
+	},
+	toolbar: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		height: "3em"
+	},
+	title: {
+		flex: "1 1 auto",
+		textAlign: "center",
+		fontSize: "_lg",
+		fontWeight: "_semibold",
+		color: "_text"
+	},
+	action: {
+		flex: "none",
+		display: "inline-flex",
+		alignItems: "center",
+		height: "100%",
+		margin: 0,
+		paddingBlock: 0,
+		paddingInline: "_lg",
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: {
+			default: "_textMuted",
+			":active": "_text"
+		},
+		fontFamily: "inherit",
+		fontSize: "_md",
+		cursor: "pointer"
+	},
+	confirm: { color: {
+		default: "_accentText",
+		":active": "_accentActive"
+	} },
+	columns: {
+		position: "relative",
+		display: "flex",
+		fontSize: "_md"
+	},
+	mask: {
+		position: "absolute",
+		inset: 0,
+		zIndex: 1,
+		pointerEvents: "none",
+		backgroundImage: `linear-gradient(180deg, ${t.colors.surface}, transparent), linear-gradient(0deg, ${t.colors.surface}, transparent)`,
+		backgroundPosition: "top, bottom",
+		backgroundRepeat: "no-repeat"
+	},
+	indicator: {
+		position: "absolute",
+		insetInline: "_lg",
+		zIndex: 2,
+		height: `${PICKER_ITEM_HEIGHT}em`,
+		pointerEvents: "none",
+		borderBlockWidth: "_hairline",
+		borderBlockStyle: "solid",
+		borderBlockColor: "_border"
+	}
+});
+var isMulti = (columns) => Array.isArray(columns[0]);
+/** 按选中的值算出各列（联动时跟着上一列的选择往下展开）与各列选中的序号 */
+function resolveColumns(columns, values) {
+	const lists = [];
+	if (isMulti(columns)) lists.push(...columns);
+	else {
+		let list = columns;
+		for (let depth = 0; list?.length; depth++) {
+			lists.push(list);
+			list = (list.find((option) => option.value === values[depth] && !option.disabled) ?? list.find((option) => !option.disabled))?.children;
+		}
+	}
+	const indexes = lists.map((list, depth) => {
+		const found = list.findIndex((option) => option.value === values[depth] && !option.disabled);
+		return found >= 0 ? found : Math.max(0, list.findIndex((option) => !option.disabled));
+	});
+	const options = lists.map((list, depth) => list[indexes[depth]]).filter(Boolean);
+	return {
+		lists,
+		indexes,
+		options,
+		values: options.map((option) => option.value)
+	};
+}
+/** 选择器（div > 标题栏 + 各列滚轮） */
+var Picker = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const columns = readonlyProp(_props, "columns");
+	const value = bindable(_props, "_value", () => [], _ctx.emit);
+	const title = readonlyProp(_props, "title");
+	const showToolbar = readonlyProp(_props, "showToolbar", true);
+	const confirmText = readonlyProp(_props, "confirmText");
+	const cancelText = readonlyProp(_props, "cancelText");
+	const visibleItemCount = readonlyProp(_props, "visibleItemCount", 5);
+	const onConfirm = readonlyProp(_props, "onConfirm");
+	const onCancel = readonlyProp(_props, "onCancel");
+	const onChange = readonlyProp(_props, "onChange");
+	const columnLabels = readonlyProp(_props, "columnLabels");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	const resolved = computed(() => resolveColumns(columns.value, value.value));
+	const select = (columnIndex, index) => {
+		const next = [...resolved.value.values];
+		next[columnIndex] = resolved.value.lists[columnIndex][index].value;
+		const settled = resolveColumns(columns.value, isMulti(columns.value) ? next : next.slice(0, columnIndex + 1));
+		value.value = settled.values;
+		onChange.value?.({
+			values: settled.values,
+			options: settled.options,
+			columnIndex
+		});
+	};
+	return () => {
+		const visible = visibleItemCount.value % 2 ? visibleItemCount.value : visibleItemCount.value + 1;
+		const fade = `100% ${(visible - 1) / 2 * PICKER_ITEM_HEIGHT}em`;
+		return createVNode("div", mergeAttrs({ sx: pickerStyles.root }, rest), [showToolbar.value && createVNode("div", mergeAttrs({ sx: pickerStyles.toolbar }), [
+			createVNode("button", mergeJsxProps(mergeAttrs({ sx: pickerStyles.action }), {
+				"type": "button",
+				"onClick": _cache[0] || (_cache[0] = () => onCancel.value?.())
+			}), [cancelText.value ?? config.lang.cancel]),
+			hasContent(title.value) && createVNode("div", mergeAttrs({ sx: pickerStyles.title }), [title.value]),
+			createVNode("button", mergeJsxProps(mergeAttrs({ sx: [pickerStyles.action, pickerStyles.confirm] }), {
+				"type": "button",
+				"onClick": _cache[1] || (_cache[1] = () => onConfirm.value?.({
+					values: resolved.value.values,
+					options: resolved.value.options
+				}))
+			}), [confirmText.value ?? config.lang.confirm])
+		]), createVNode("div", mergeAttrs({ sx: pickerStyles.columns }), [
+			resolved.value.lists.map((list, columnIndex) => createVNode(PickerColumn, {
+				"options": list,
+				"index": resolved.value.indexes[columnIndex],
+				"visible": visible,
+				"label": columnLabels.value?.[columnIndex],
+				"onSelect": (index) => select(columnIndex, index)
+			}, null)),
+			createVNode("div", mergeAttrs({
+				sx: pickerStyles.mask,
+				style: { backgroundSize: `${fade}, ${fade}` }
+			}), null),
+			createVNode("div", mergeAttrs({
+				sx: pickerStyles.indicator,
+				style: { insetBlockStart: `${(visible - 1) / 2 * PICKER_ITEM_HEIGHT}em` }
+			}), null)
+		])]);
+	};
+}, {
+	name: "Picker",
+	props: [
+		"columns",
+		"_value",
+		"onUpdate:_value",
+		"title",
+		"showToolbar",
+		"confirmText",
+		"cancelText",
+		"visibleItemCount",
+		"onConfirm",
+		"onCancel",
+		"onChange",
+		"columnLabels"
+	]
+});
+//#endregion
+export { Picker, pickerStyles, resolveColumns };
+
+//# sourceMappingURL=Picker.js.map

package/dist/picker/Picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/picker/Picker.tsx"],"sourcesContent":["/**\n * 选择器：一列或几列滚轮，上面一条标题栏（取消、标题、确认）。常放在底部弹出层里。\n *\n *   <Popup _open={show} position=\"bottom\" round>\n *     <Picker title=\"城市\" columns={cities} _value={city} onConfirm={({ values }) => …} onCancel={() => (show = false)} />\n *   </Popup>\n *\n * columns 三种写法：一列（选项数组）、几列各自独立（选项数组的数组）、联动（选项带 children：省 → 市 → 区）。\n * _value 是各列选中的值；没给或对不上时选每列第一个可选的。\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 { useConfig } from '../config/context';\nimport { t } from '../theme/tokens';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { PICKER_ITEM_HEIGHT, PickerColumn, type PickerOption } from './PickerColumn';\n\nexport type { PickerOption } from './PickerColumn';\n\n/** 选项的值 */\nexport type PickerValue = string | number;\n\n/** 确认、变化时给出的 */\nexport interface PickerResult {\n  /** 各列选中的值 */\n  values: PickerValue[];\n  /** 各列选中的选项 */\n  options: PickerOption[];\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface PickerProps extends Omit<PartProps<'div', 'title'>, 'onChange'> {\n  /** 选项：一列、几列（数组的数组）、联动（选项带 children） */\n  columns: PickerOption[] | PickerOption[][];\n  /** 各列选中的值；双向绑定写 `_value={x}`（滚动时就写回，确认时 onConfirm） */\n  _value?: PickerValue[];\n  /** 标题 */\n  title?: VNodeChild;\n  /**\n   * 显示标题栏\n   * @default true\n   */\n  showToolbar?: boolean;\n  /** 确认的文字；不给时用语言包 */\n  confirmText?: VNodeChild;\n  /** 取消的文字；不给时用语言包 */\n  cancelText?: VNodeChild;\n  /**\n   * 可见的行数（奇数）\n   * @default 5\n   */\n  visibleItemCount?: number;\n  /** 点了确认 */\n  onConfirm?: (result: PickerResult) => void;\n  /** 点了取消 */\n  onCancel?: () => void;\n  /** 滚到另一项 */\n  onChange?: (result: PickerResult & { columnIndex: number }) => void;\n  /** 各列的读屏名称 */\n  columnLabels?: string[];\n}\n\n/** Picker 的样式：root、toolbar、title、action、confirm、columns、mask、indicator */\nexport const pickerStyles = css.create({\n  root: { position: 'relative', backgroundColor: '_surface', userSelect: 'none' },\n  toolbar: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    height: '3em',\n  },\n  title: {\n    flex: '1 1 auto',\n    textAlign: 'center',\n    fontSize: '_lg',\n    fontWeight: '_semibold',\n    color: '_text',\n  },\n  action: {\n    flex: 'none',\n    // 小程序里按钮是 view：文字要自己居中\n    display: 'inline-flex',\n    alignItems: 'center',\n    height: '100%',\n    margin: 0,\n    paddingBlock: 0,\n    paddingInline: '_lg',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: { default: '_textMuted', ':active': '_text' },\n    fontFamily: 'inherit',\n    fontSize: '_md',\n    cursor: 'pointer',\n  },\n  confirm: { color: { default: '_accentText', ':active': '_accentActive' } },\n  columns: { position: 'relative', display: 'flex', fontSize: '_md' },\n  // 上下渐隐到底色，中间一行留白；选中的那一行上下各一条细线\n  mask: {\n    position: 'absolute',\n    inset: 0,\n    zIndex: 1,\n    pointerEvents: 'none',\n    backgroundImage: `linear-gradient(180deg, ${t.colors.surface}, transparent), linear-gradient(0deg, ${t.colors.surface}, transparent)`,\n    backgroundPosition: 'top, bottom',\n    backgroundRepeat: 'no-repeat',\n  },\n  indicator: {\n    position: 'absolute',\n    insetInline: '_lg',\n    zIndex: 2,\n    height: `${PICKER_ITEM_HEIGHT}em`,\n    pointerEvents: 'none',\n    borderBlockWidth: '_hairline',\n    borderBlockStyle: 'solid',\n    borderBlockColor: '_border',\n  },\n});\n\nconst isMulti = (columns: PickerOption[] | PickerOption[][]): columns is PickerOption[][] =>\n  Array.isArray(columns[0]);\n\n/** 按选中的值算出各列（联动时跟着上一列的选择往下展开）与各列选中的序号 */\nexport function resolveColumns(columns: PickerOption[] | PickerOption[][], values: PickerValue[]) {\n  const lists: PickerOption[][] = [];\n  if (isMulti(columns)) lists.push(...columns);\n  else {\n    let list: PickerOption[] | undefined = columns;\n    for (let depth = 0; list?.length; depth++) {\n      lists.push(list);\n      const chosen: PickerOption | undefined =\n        list.find((option) => option.value === values[depth] && !option.disabled) ??\n        list.find((option) => !option.disabled);\n      list = chosen?.children;\n    }\n  }\n  const indexes = lists.map((list, depth) => {\n    const found = list.findIndex((option) => option.value === values[depth] && !option.disabled);\n    return found >= 0\n      ? found\n      : Math.max(\n          0,\n          list.findIndex((option) => !option.disabled),\n        );\n  });\n  const options = lists.map((list, depth) => list[indexes[depth]!]!).filter(Boolean);\n  return { lists, indexes, options, values: options.map((option) => option.value) };\n}\n\n/** 选择器（div > 标题栏 + 各列滚轮） */\nexport const Picker = _component(\n  ({\n    columns,\n    _value: value = _bindable<PickerValue[]>([]),\n    title,\n    showToolbar = true,\n    confirmText,\n    cancelText,\n    visibleItemCount = 5,\n    onConfirm,\n    onCancel,\n    onChange,\n    columnLabels,\n    ...rest\n  }: PickerProps) => {\n    const config = useConfig();\n    const resolved = _derived(resolveColumns(columns, value));\n    const select = (columnIndex: number, index: number) => {\n      const next = [...resolved.values];\n      next[columnIndex] = resolved.lists[columnIndex]![index]!.value;\n      // 联动：后面的列重新按第一个可选的算\n      const settled = resolveColumns(\n        columns,\n        isMulti(columns) ? next : next.slice(0, columnIndex + 1),\n      );\n      value = settled.values;\n      onChange?.({ values: settled.values, options: settled.options, columnIndex });\n    };\n    return () => {\n      const visible = visibleItemCount % 2 ? visibleItemCount : visibleItemCount + 1;\n      const fade = `100% ${((visible - 1) / 2) * PICKER_ITEM_HEIGHT}em`;\n      return (\n        <div {...mergeAttrs<'div'>({ sx: pickerStyles.root }, rest)}>\n          {showToolbar && (\n            <div {...mergeAttrs<'div'>({ sx: pickerStyles.toolbar })}>\n              <button\n                {...mergeAttrs<'button'>({ sx: pickerStyles.action })}\n                type=\"button\"\n                onClick={() => onCancel?.()}\n              >\n                {cancelText ?? config.lang.cancel}\n              </button>\n              {hasContent(title) && (\n                <div {...mergeAttrs<'div'>({ sx: pickerStyles.title })}>{title}</div>\n              )}\n              <button\n                {...mergeAttrs<'button'>({ sx: [pickerStyles.action, pickerStyles.confirm] })}\n                type=\"button\"\n                onClick={() => onConfirm?.({ values: resolved.values, options: resolved.options })}\n              >\n                {confirmText ?? config.lang.confirm}\n              </button>\n            </div>\n          )}\n          <div {...mergeAttrs<'div'>({ sx: pickerStyles.columns })}>\n            {resolved.lists.map((list, columnIndex) => (\n              <PickerColumn\n                options={list}\n                index={resolved.indexes[columnIndex]!}\n                visible={visible}\n                label={columnLabels?.[columnIndex]}\n                onSelect={(index) => select(columnIndex, index)}\n              />\n            ))}\n            <div\n              {...mergeAttrs<'div'>({\n                sx: pickerStyles.mask,\n                style: { backgroundSize: `${fade}, ${fade}` },\n              })}\n            />\n            <div\n              {...mergeAttrs<'div'>({\n                sx: pickerStyles.indicator,\n                style: { insetBlockStart: `${((visible - 1) / 2) * PICKER_ITEM_HEIGHT}em` },\n              })}\n            />\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/picker/PickerColumn.d.ts

@@ -0,0 +1,36 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+/** 一个选项 */
+export interface PickerOption {
+    /** 显示的文字 */
+    text: VNodeChild;
+    /** 值 */
+    value: string | number;
+    /** 不能选 */
+    disabled?: boolean;
+    /** 联动时的下一列 */
+    children?: PickerOption[];
+}
+/** 一列的属性 */
+export interface PickerColumnProps {
+    /** 选项 */
+    options: PickerOption[];
+    /** 选中的序号 */
+    index: number;
+    /** 可见的行数（奇数） */
+    visible: number;
+    /** 读屏的名称 */
+    label?: string;
+    /** 选中的项变了（拖完、点了、按了方向键） */
+    onSelect: (index: number) => void;
+}
+/** 一行的高度（em） */
+export declare const PICKER_ITEM_HEIGHT = 2.75;
+/** PickerColumn 的样式 */
+export declare const pickerColumnStyles: Readonly<{
+    column: css.CompiledStyles;
+    item: css.CompiledStyles;
+    list: css.CompiledStyles;
+}>;
+/** 滚轮的一列（div[role=listbox]） */
+export declare const PickerColumn: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PickerColumnProps>;

package/dist/picker/PickerColumn.js

@@ -0,0 +1,175 @@
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { useHost } from "../utils/host.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, mergeJsxProps, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, onMounted, ref } from "vue";
+//#region src/picker/PickerColumn.tsx
+/** 一个选项 */
+/** 一列的属性 */
+/** 一行的高度（em） */
+var PICKER_ITEM_HEIGHT = 2.75;
+/** PickerColumn 的样式 */
+var pickerColumnStyles = css.create({
+	column: {
+		position: "relative",
+		flex: "1 1 0",
+		minWidth: 0,
+		overflow: "hidden",
+		touchAction: "none",
+		userSelect: "none",
+		outlineStyle: "none"
+	},
+	list: {
+		transitionProperty: "transform",
+		transitionTimingFunction: "cubic-bezier(0.23, 1, 0.68, 1)"
+	},
+	item: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: `${PICKER_ITEM_HEIGHT}em`,
+		paddingInline: "_xs",
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis",
+		fontSize: "_md",
+		color: {
+			default: "_text",
+			"[data-disabled]": "_textDisabled"
+		},
+		cursor: {
+			default: "pointer",
+			"[data-disabled]": "not-allowed"
+		}
+	}
+});
+/** 离边缘还能多拖的阻尼：越过两端时只跟手三分之一 */
+var RESISTANCE = 1 / 3;
+/** 找到离 index 最近的可选项 */
+function nearestEnabled(options, index) {
+	const clamped = Math.min(options.length - 1, Math.max(0, index));
+	for (let distance = 0; distance < options.length; distance++) for (const candidate of [clamped + distance, clamped - distance]) if (options[candidate] && !options[candidate].disabled) return candidate;
+	return clamped;
+}
+/** 滚轮的一列（div[role=listbox]） */
+var PickerColumn = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const options = readonlyProp(_props, "options");
+	const index = readonlyProp(_props, "index");
+	const visible = readonlyProp(_props, "visible");
+	const label = readonlyProp(_props, "label");
+	const onSelect = readonlyProp(_props, "onSelect");
+	const host = useHost();
+	let column = null;
+	let itemPx = 44;
+	const measure = async () => {
+		const rect = await host.measure(column);
+		if (rect?.height) itemPx = rect.height / visible.value;
+	};
+	onMounted(() => void measure());
+	let drag = ref(null);
+	let duration = ref(0);
+	let start = {
+		y: 0,
+		time: 0,
+		index: 0
+	};
+	let moves = [];
+	const select = (next, ms) => {
+		duration.value = ms;
+		const target = nearestEnabled(options.value, next);
+		if (target !== index.value) onSelect.value(target);
+	};
+	const onTouchstart = (event) => {
+		measure();
+		const y = event.touches[0].clientY;
+		start = {
+			y,
+			time: Date.now(),
+			index: index.value
+		};
+		moves = [{
+			y,
+			time: start.time
+		}];
+		drag.value = 0;
+		duration.value = 0;
+	};
+	const onTouchmove = (event) => {
+		if (drag.value === null) return;
+		event.preventDefault();
+		const y = event.touches[0].clientY;
+		const now = Date.now();
+		moves = [...moves.filter((move) => now - move.time < 100), {
+			y,
+			time: now
+		}];
+		let offset = y - start.y;
+		const top = start.index * itemPx;
+		const bottom = (options.value.length - 1 - start.index) * itemPx;
+		if (offset > top) offset = top + (offset - top) * RESISTANCE;
+		if (offset < -bottom) offset = -bottom + (offset + bottom) * RESISTANCE;
+		drag.value = offset;
+	};
+	const onTouchend = () => {
+		if (drag.value === null) return;
+		const offset = drag.value;
+		drag.value = null;
+		const first = moves[0];
+		const last = moves[moves.length - 1];
+		const velocity = last.time > first.time ? (last.y - first.y) / (last.time - first.time) : 0;
+		const momentum = Math.abs(velocity) > .3 ? velocity * 250 : 0;
+		const steps = Math.round((offset + momentum) / itemPx);
+		select(start.index - steps, Math.min(1e3, 200 + Math.abs(momentum) * 1.5));
+	};
+	return () => {
+		const middle = (visible.value - 1) / 2 * PICKER_ITEM_HEIGHT;
+		const transform = drag.value === null ? `translateY(${middle - index.value * PICKER_ITEM_HEIGHT}em)` : `translateY(calc(${middle - start.index * PICKER_ITEM_HEIGHT}em + ${drag.value}px))`;
+		return createVNode("div", mergeJsxProps(mergeAttrs({
+			sx: pickerColumnStyles.column,
+			style: { height: `${visible.value * PICKER_ITEM_HEIGHT}em` }
+		}), {
+			"role": "listbox",
+			"aria-label": label.value,
+			"tabindex": 0,
+			"onTouchstart": onTouchstart,
+			"onTouchmove": onTouchmove,
+			"onTouchend": onTouchend,
+			"onTouchcancel": onTouchend,
+			"onKeydown": _cache[0] || (_cache[0] = (event) => {
+				const delta = {
+					ArrowDown: 1,
+					ArrowUp: -1
+				}[event.key];
+				if (delta === void 0) return;
+				event.preventDefault();
+				let next = index.value + delta;
+				while (options.value[next]?.disabled) next += delta;
+				if (options.value[next]) select(next, 200);
+			})
+		}, dataAttrs({ "data-touch-move": "catch" }), { "ref": _cache[1] || (_cache[1] = (node) => column = node) }), [createVNode("div", mergeAttrs({
+			sx: pickerColumnStyles.list,
+			style: {
+				transform,
+				transitionDuration: `${drag.value === null ? duration.value : 0}ms`
+			}
+		}), [options.value.map((option, position) => createVNode("div", mergeJsxProps(mergeAttrs({ sx: pickerColumnStyles.item }), {
+			"role": "option",
+			"aria-selected": position === index.value ? "true" : "false",
+			"aria-disabled": option.disabled ? "true" : void 0
+		}, dataAttrs({ "data-disabled": option.disabled }), { "onClick": () => !option.disabled && select(position, 200) }), [option.text]))])]);
+	};
+}, {
+	name: "PickerColumn",
+	props: [
+		"options",
+		"index",
+		"visible",
+		"label",
+		"onSelect"
+	]
+});
+//#endregion
+export { PICKER_ITEM_HEIGHT, PickerColumn, pickerColumnStyles };
+
+//# sourceMappingURL=PickerColumn.js.map

package/dist/picker/PickerColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerColumn.js","names":["_vtp_readonlyProp","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/picker/PickerColumn.tsx"],"sourcesContent":["/**\n * 滚轮的一列（Picker、DatePicker、TimePicker 共用，内部组件）：上下拖动带惯性，松手对齐到最近的一项，跳过禁用的项；\n * 点一项直接滚过去；H5 里聚焦后可以用方向键。\n *\n * 项高按 em 写（随字号），拖动要换算成像素：挂上时量一次列的高度，每次按下时再量。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted, type VNodeChild } from 'vue';\nimport { useHost } from '../utils/host';\nimport { dataAttrs, mergeAttrs } from '../utils/props';\n\n/** 一个选项 */\nexport interface PickerOption {\n  /** 显示的文字 */\n  text: VNodeChild;\n  /** 值 */\n  value: string | number;\n  /** 不能选 */\n  disabled?: boolean;\n  /** 联动时的下一列 */\n  children?: PickerOption[];\n}\n\n/** 一列的属性 */\nexport interface PickerColumnProps {\n  /** 选项 */\n  options: PickerOption[];\n  /** 选中的序号 */\n  index: number;\n  /** 可见的行数（奇数） */\n  visible: number;\n  /** 读屏的名称 */\n  label?: string;\n  /** 选中的项变了（拖完、点了、按了方向键） */\n  onSelect: (index: number) => void;\n}\n\n/** 一行的高度（em） */\nexport const PICKER_ITEM_HEIGHT = 2.75;\n\n/** PickerColumn 的样式 */\nexport const pickerColumnStyles = css.create({\n  column: {\n    position: 'relative',\n    flex: '1 1 0',\n    minWidth: 0,\n    overflow: 'hidden',\n    touchAction: 'none',\n    userSelect: 'none',\n    outlineStyle: 'none',\n  },\n  list: {\n    transitionProperty: 'transform',\n    transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.68, 1)',\n  },\n  item: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: `${PICKER_ITEM_HEIGHT}em`,\n    paddingInline: '_xs',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    fontSize: '_md',\n    color: { default: '_text', '[data-disabled]': '_textDisabled' },\n    cursor: { default: 'pointer', '[data-disabled]': 'not-allowed' },\n  },\n});\n\n/** 离边缘还能多拖的阻尼：越过两端时只跟手三分之一 */\nconst RESISTANCE = 1 / 3;\n\n/** 找到离 index 最近的可选项 */\nfunction nearestEnabled(options: PickerOption[], index: number): number {\n  const clamped = Math.min(options.length - 1, Math.max(0, index));\n  for (let distance = 0; distance < options.length; distance++) {\n    for (const candidate of [clamped + distance, clamped - distance])\n      if (options[candidate] && !options[candidate].disabled) return candidate;\n  }\n  return clamped;\n}\n\n/** 滚轮的一列（div[role=listbox]） */\nexport const PickerColumn = _component(\n  ({ options, index, visible, label, onSelect }: PickerColumnProps) => {\n    const host = useHost();\n    let column: unknown = null;\n    // 一行的像素高度：量列的高度除以可见的行数\n    let itemPx = 44;\n    const measure = async () => {\n      const rect = await host.measure(column);\n      if (rect?.height) itemPx = rect.height / visible;\n    };\n    onMounted(() => void measure());\n\n    // 拖动中的偏移（px，相对选中项居中的位置）；null 是没在拖\n    let drag = _state<number | null>(null);\n    let duration = _state(0);\n    let start = { y: 0, time: 0, index: 0 };\n    let moves: { y: number; time: number }[] = [];\n\n    const select = (next: number, ms: number) => {\n      duration = ms;\n      const target = nearestEnabled(options, next);\n      if (target !== index) onSelect(target);\n    };\n    const onTouchstart = (event: TouchEvent) => {\n      void measure();\n      const y = event.touches[0]!.clientY;\n      start = { y, time: Date.now(), index };\n      moves = [{ y, time: start.time }];\n      drag = 0;\n      duration = 0;\n    };\n    const onTouchmove = (event: TouchEvent) => {\n      if (drag === null) return;\n      event.preventDefault();\n      const y = event.touches[0]!.clientY;\n      const now = Date.now();\n      moves = [...moves.filter((move) => now - move.time < 100), { y, time: now }];\n      let offset = y - start.y;\n      // 越过第一项、最后一项时加阻尼\n      const top = start.index * itemPx;\n      const bottom = (options.length - 1 - start.index) * itemPx;\n      if (offset > top) offset = top + (offset - top) * RESISTANCE;\n      if (offset < -bottom) offset = -bottom + (offset + bottom) * RESISTANCE;\n      drag = offset;\n    };\n    const onTouchend = () => {\n      if (drag === null) return;\n      const offset = drag;\n      drag = null;\n      // 惯性：最后 100ms 的速度（px/ms）乘一个时长，快甩滚得远\n      const first = moves[0]!;\n      const last = moves[moves.length - 1]!;\n      const velocity = last.time > first.time ? (last.y - first.y) / (last.time - first.time) : 0;\n      const momentum = Math.abs(velocity) > 0.3 ? velocity * 250 : 0;\n      const steps = Math.round((offset + momentum) / itemPx);\n      select(start.index - steps, Math.min(1000, 200 + Math.abs(momentum) * 1.5));\n    };\n\n    return () => {\n      // 列表的偏移：选中的项在中间那一行\n      const middle = ((visible - 1) / 2) * PICKER_ITEM_HEIGHT;\n      const transform =\n        drag === null\n          ? `translateY(${middle - index * PICKER_ITEM_HEIGHT}em)`\n          : `translateY(calc(${middle - start.index * PICKER_ITEM_HEIGHT}em + ${drag}px))`;\n      return (\n        <div\n          {...mergeAttrs<'div'>({\n            sx: pickerColumnStyles.column,\n            style: { height: `${visible * PICKER_ITEM_HEIGHT}em` },\n          })}\n          role=\"listbox\"\n          aria-label={label}\n          tabindex={0}\n          onTouchstart={onTouchstart}\n          onTouchmove={onTouchmove}\n          onTouchend={onTouchend}\n          onTouchcancel={onTouchend}\n          onKeydown={(event: KeyboardEvent) => {\n            const delta = { ArrowDown: 1, ArrowUp: -1 }[event.key];\n            if (delta === undefined) return;\n            event.preventDefault();\n            // 方向键越过禁用的项往同一个方向找\n            let next = index + delta;\n            while (options[next]?.disabled) next += delta;\n            if (options[next]) select(next, 200);\n          }}\n          // 小程序：收 touchmove，拖动期间页面不跟着滚\n          {...dataAttrs({ 'data-touch-move': 'catch' })}\n          ref={(node: unknown) => (column = node)}\n        >\n          <div\n            {...mergeAttrs<'div'>({\n              sx: pickerColumnStyles.list,\n              style: { transform, transitionDuration: `${drag === null ? duration : 0}ms` },\n            })}\n          >\n            {options.map((option, position) => (\n              <div\n                {...mergeAttrs<'div'>({ sx: pickerColumnStyles.item })}\n                role=\"option\"\n                aria-selected={position === index ? 'true' : 'false'}\n                aria-disabled={option.disabled ? 'true' : undefined}\n                {...dataAttrs({ 'data-disabled': option.disabled })}\n                onClick={() => !option.disabled && select(position, 200)}\n              >\n                {option.text}\n              </div>\n            ))}\n          </div>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/theme/dark.d.ts

@@ -0,0 +1,121 @@
+/**
+ * 暗色主题与"跟随系统"：只改颜色与阴影两组变量的类，挂在 ThemeProvider 的根元素上（或任意祖先上），换主题不用重新渲染组件。
+ * 取值同 Radix Colors 的暗色色阶（与 tokens.ts 注释里写的暗色值一致）。
+ */
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+/** 暗色主题：颜色与阴影两个类，一起挂上 */
+export declare const darkTheme: (css.Theme<css.VarGroup<{
+    readonly background: "#f0f0f3";
+    readonly surface: "#ffffff";
+    readonly surfaceMuted: "#f9f9fb";
+    readonly fill: "#f0f0f3";
+    readonly fillActive: "#e8e8ec";
+    readonly text: "#1c2024";
+    readonly textMuted: "#60646c";
+    readonly textPlaceholder: "#80838d";
+    readonly textDisabled: "#b9bbc6";
+    readonly border: "#d9d9e0";
+    readonly borderStrong: "#cdced6";
+    readonly accent: "#3e63dd";
+    readonly accentActive: "#3358d4";
+    readonly accentContrast: "#ffffff";
+    readonly accentText: "#3a5bc7";
+    readonly accentSoft: "#edf2fe";
+    readonly accentSoftActive: "#e1e9ff";
+    readonly accentBorder: "#abbdf9";
+    readonly danger: "#ce2c31";
+    readonly dangerActive: "#b8272c";
+    readonly dangerContrast: "#ffffff";
+    readonly dangerText: "#b8272c";
+    readonly dangerSoft: "#feebec";
+    readonly dangerSoftActive: "#ffdbdc";
+    readonly dangerBorder: "#f4a9aa";
+    readonly success: "#008751";
+    readonly successActive: "#007143";
+    readonly successContrast: "#ffffff";
+    readonly successText: "#193b2d";
+    readonly successSoft: "#e6f6eb";
+    readonly successSoftActive: "#d6f1df";
+    readonly successBorder: "#8eceaa";
+    readonly warning: "#ffc53d";
+    readonly warningActive: "#ffcd5f";
+    readonly warningContrast: "#4f3422";
+    readonly warningText: "#4f3422";
+    readonly warningSoft: "#fff7c2";
+    readonly warningSoftActive: "#ffee9c";
+    readonly warningBorder: "#e9c162";
+    readonly info: "#0073e0";
+    readonly infoActive: "#0060bd";
+    readonly infoContrast: "#ffffff";
+    readonly infoText: "#113264";
+    readonly infoSoft: "#e6f4fe";
+    readonly infoSoftActive: "#d5efff";
+    readonly infoBorder: "#8ec8f6";
+    readonly inverseSurface: "#1c2024";
+    readonly inverseText: "#fcfcfd";
+    readonly overlay: "rgba(0, 0, 0, 0.5)";
+    readonly focusRing: "#3e63dd";
+}>> | css.Theme<css.VarGroup<{
+    readonly none: "none";
+    readonly sm: "0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px -2px rgba(0, 0, 0, 0.08)";
+    readonly md: "0 4px 16px -4px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.08)";
+    readonly lg: "0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.1)";
+}>>)[];
+/** 跟随系统：系统是暗色时用暗色值 */
+export declare const systemTheme: (css.Theme<css.VarGroup<{
+    readonly background: "#f0f0f3";
+    readonly surface: "#ffffff";
+    readonly surfaceMuted: "#f9f9fb";
+    readonly fill: "#f0f0f3";
+    readonly fillActive: "#e8e8ec";
+    readonly text: "#1c2024";
+    readonly textMuted: "#60646c";
+    readonly textPlaceholder: "#80838d";
+    readonly textDisabled: "#b9bbc6";
+    readonly border: "#d9d9e0";
+    readonly borderStrong: "#cdced6";
+    readonly accent: "#3e63dd";
+    readonly accentActive: "#3358d4";
+    readonly accentContrast: "#ffffff";
+    readonly accentText: "#3a5bc7";
+    readonly accentSoft: "#edf2fe";
+    readonly accentSoftActive: "#e1e9ff";
+    readonly accentBorder: "#abbdf9";
+    readonly danger: "#ce2c31";
+    readonly dangerActive: "#b8272c";
+    readonly dangerContrast: "#ffffff";
+    readonly dangerText: "#b8272c";
+    readonly dangerSoft: "#feebec";
+    readonly dangerSoftActive: "#ffdbdc";
+    readonly dangerBorder: "#f4a9aa";
+    readonly success: "#008751";
+    readonly successActive: "#007143";
+    readonly successContrast: "#ffffff";
+    readonly successText: "#193b2d";
+    readonly successSoft: "#e6f6eb";
+    readonly successSoftActive: "#d6f1df";
+    readonly successBorder: "#8eceaa";
+    readonly warning: "#ffc53d";
+    readonly warningActive: "#ffcd5f";
+    readonly warningContrast: "#4f3422";
+    readonly warningText: "#4f3422";
+    readonly warningSoft: "#fff7c2";
+    readonly warningSoftActive: "#ffee9c";
+    readonly warningBorder: "#e9c162";
+    readonly info: "#0073e0";
+    readonly infoActive: "#0060bd";
+    readonly infoContrast: "#ffffff";
+    readonly infoText: "#113264";
+    readonly infoSoft: "#e6f4fe";
+    readonly infoSoftActive: "#d5efff";
+    readonly infoBorder: "#8ec8f6";
+    readonly inverseSurface: "#1c2024";
+    readonly inverseText: "#fcfcfd";
+    readonly overlay: "rgba(0, 0, 0, 0.5)";
+    readonly focusRing: "#3e63dd";
+}>> | css.Theme<css.VarGroup<{
+    readonly none: "none";
+    readonly sm: "0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px -2px rgba(0, 0, 0, 0.08)";
+    readonly md: "0 4px 16px -4px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.08)";
+    readonly lg: "0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.1)";
+}>>)[];

package/dist/theme/dark.js

@@ -0,0 +1,77 @@
+import { colors, shadows } from "./tokens.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/theme/dark.ts
+/**
+* 暗色主题与"跟随系统"：只改颜色与阴影两组变量的类，挂在 ThemeProvider 的根元素上（或任意祖先上），换主题不用重新渲染组件。
+* 取值同 Radix Colors 的暗色色阶（与 tokens.ts 注释里写的暗色值一致）。
+*/
+/** 暗色主题的颜色 */
+var darkColors = {
+	background: "#111113",
+	surface: "#18191b",
+	surfaceMuted: "#212225",
+	fill: "#272a2d",
+	fillActive: "#2e3135",
+	text: "#edeef0",
+	textMuted: "#b0b4ba",
+	textPlaceholder: "#777b84",
+	textDisabled: "#5a6169",
+	border: "#363a3f",
+	borderStrong: "#43484e",
+	accent: "#3e63dd",
+	accentActive: "#3758d4",
+	accentContrast: "#ffffff",
+	accentText: "#9eb1ff",
+	accentSoft: "#182449",
+	accentSoftActive: "#1d2e62",
+	accentBorder: "#3a4f97",
+	danger: "#b54548",
+	dangerActive: "#a33b3e",
+	dangerContrast: "#ffffff",
+	dangerText: "#ff9592",
+	dangerSoft: "#3b1219",
+	dangerSoftActive: "#500f1c",
+	dangerBorder: "#8c333a",
+	success: "#30a46c",
+	successActive: "#52af7d",
+	successContrast: "#111113",
+	successText: "#3dd68c",
+	successSoft: "#132d21",
+	successSoftActive: "#113b29",
+	successBorder: "#28684a",
+	warning: "#ffc53d",
+	warningActive: "#ffcd5f",
+	warningContrast: "#111113",
+	warningText: "#ffca16",
+	warningSoft: "#302008",
+	warningSoftActive: "#3f2700",
+	warningBorder: "#714f19",
+	info: "#0090ff",
+	infoActive: "#3d9fff",
+	infoContrast: "#111113",
+	infoText: "#70b8ff",
+	infoSoft: "#0d2847",
+	infoSoftActive: "#003362",
+	infoBorder: "#205d9e",
+	inverseSurface: "#edeef0",
+	inverseText: "#111113",
+	overlay: "rgba(0, 0, 0, 0.7)",
+	focusRing: "#3e63dd"
+};
+/** 暗色主题里阴影看不出来，靠表面的层级区分 */
+var darkShadows = {
+	sm: "none",
+	md: "none",
+	lg: "0 12px 40px -8px rgba(0, 0, 0, 0.6)"
+};
+var SYSTEM_DARK = "@media (prefers-color-scheme: dark)";
+/** 按系统偏好取值：亮色时不改，系统是暗色时换成暗色值 */
+var followSystem = (values) => Object.fromEntries(Object.entries(values).map(([key, value]) => [key, { [SYSTEM_DARK]: value }]));
+/** 暗色主题：颜色与阴影两个类，一起挂上 */
+var darkTheme = [css.createTheme(colors, darkColors), css.createTheme(shadows, darkShadows)];
+/** 跟随系统：系统是暗色时用暗色值 */
+var systemTheme = [css.createTheme(colors, followSystem(darkColors)), css.createTheme(shadows, followSystem(darkShadows))];
+//#endregion
+export { darkTheme, systemTheme };
+
+//# sourceMappingURL=dark.js.map

package/dist/theme/dark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dark.js","names":[],"sources":["../../src/theme/dark.ts"],"sourcesContent":["/**\n * 暗色主题与\"跟随系统\"：只改颜色与阴影两组变量的类，挂在 ThemeProvider 的根元素上（或任意祖先上），换主题不用重新渲染组件。\n * 取值同 Radix Colors 的暗色色阶（与 tokens.ts 注释里写的暗色值一致）。\n */\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { colors, shadows } from './tokens';\n\n/** 暗色主题的颜色 */\nconst darkColors = {\n  background: '#111113',\n  surface: '#18191b',\n  surfaceMuted: '#212225',\n  fill: '#272a2d',\n  fillActive: '#2e3135',\n  text: '#edeef0',\n  textMuted: '#b0b4ba',\n  textPlaceholder: '#777b84',\n  textDisabled: '#5a6169',\n  border: '#363a3f',\n  borderStrong: '#43484e',\n  accent: '#3e63dd',\n  accentActive: '#3758d4',\n  accentContrast: '#ffffff',\n  accentText: '#9eb1ff',\n  accentSoft: '#182449',\n  accentSoftActive: '#1d2e62',\n  accentBorder: '#3a4f97',\n  danger: '#b54548',\n  dangerActive: '#a33b3e',\n  dangerContrast: '#ffffff',\n  dangerText: '#ff9592',\n  dangerSoft: '#3b1219',\n  dangerSoftActive: '#500f1c',\n  dangerBorder: '#8c333a',\n  success: '#30a46c',\n  successActive: '#52af7d',\n  successContrast: '#111113',\n  successText: '#3dd68c',\n  successSoft: '#132d21',\n  successSoftActive: '#113b29',\n  successBorder: '#28684a',\n  warning: '#ffc53d',\n  warningActive: '#ffcd5f',\n  warningContrast: '#111113',\n  warningText: '#ffca16',\n  warningSoft: '#302008',\n  warningSoftActive: '#3f2700',\n  warningBorder: '#714f19',\n  info: '#0090ff',\n  infoActive: '#3d9fff',\n  infoContrast: '#111113',\n  infoText: '#70b8ff',\n  infoSoft: '#0d2847',\n  infoSoftActive: '#003362',\n  infoBorder: '#205d9e',\n  inverseSurface: '#edeef0',\n  inverseText: '#111113',\n  overlay: 'rgba(0, 0, 0, 0.7)',\n  focusRing: '#3e63dd',\n} satisfies Record<Extract<keyof typeof colors, string>, string>;\n\n/** 暗色主题里阴影看不出来，靠表面的层级区分 */\nconst darkShadows = { sm: 'none', md: 'none', lg: '0 12px 40px -8px rgba(0, 0, 0, 0.6)' };\n\nconst SYSTEM_DARK = '@media (prefers-color-scheme: dark)';\n\n/** 按系统偏好取值：亮色时不改，系统是暗色时换成暗色值 */\nconst followSystem = (values: Record<string, string>) =>\n  Object.fromEntries(Object.entries(values).map(([key, value]) => [key, { [SYSTEM_DARK]: value }]));\n\n/** 暗色主题：颜色与阴影两个类，一起挂上 */\nexport const darkTheme = [\n  css.createTheme(colors, darkColors),\n  css.createTheme(shadows, darkShadows),\n];\n\n/** 跟随系统：系统是暗色时用暗色值 */\nexport const systemTheme = [\n  css.createTheme(colors, followSystem(darkColors)),\n  css.createTheme(shadows, followSystem(darkShadows)),\n];\n"],"mappings":";;;;;;;;AAQA,IAAM,aAAa;CACjB,YAAY;CACZ,SAAS;CACT,cAAc;CACd,MAAM;CACN,YAAY;CACZ,MAAM;CACN,WAAW;CACX,iBAAiB;CACjB,cAAc;CACd,QAAQ;CACR,cAAc;CACd,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,cAAc;CACd,QAAQ;CACR,cAAc;CACd,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,cAAc;CACd,SAAS;CACT,eAAe;CACf,iBAAiB;CACjB,aAAa;CACb,aAAa;CACb,mBAAmB;CACnB,eAAe;CACf,SAAS;CACT,eAAe;CACf,iBAAiB;CACjB,aAAa;CACb,aAAa;CACb,mBAAmB;CACnB,eAAe;CACf,MAAM;CACN,YAAY;CACZ,cAAc;CACd,UAAU;CACV,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,WAAW;AACb;;AAGA,IAAM,cAAc;CAAE,IAAI;CAAQ,IAAI;CAAQ,IAAI;AAAsC;AAExF,IAAM,cAAc;;AAGpB,IAAM,gBAAgB,WACpB,OAAO,YAAY,OAAO,QAAQ,MAAM,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,GAAG,cAAc,MAAM,CAAC,CAAC,CAAC;;AAGlG,IAAa,YAAY,CACvB,IAAI,YAAY,QAAQ,UAAU,GAClC,IAAI,YAAY,SAAS,WAAW,CACtC;;AAGA,IAAa,cAAc,CACzB,IAAI,YAAY,QAAQ,aAAa,UAAU,CAAC,GAChD,IAAI,YAAY,SAAS,aAAa,WAAW,CAAC,CACpD"}