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

package/dist/form/Rate.js

@@ -0,0 +1,162 @@
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { useHost } from "../utils/host.js";
+import { useForm } from "./context.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 { createVNode } from "vue";
+import { Star } from "@lucide/icons";
+//#region src/form/Rate.tsx
+/**
+* 评分：一排星，点一颗或在上面滑动选分数，可以有半颗。只读时用来展示评分。
+*
+*   <Rate _value={score} />
+*   <Rate _value={4.5} allowHalf readonly />
+*   <Rate _value={mood} icon={Heart} tone="danger" count={3} />
+*/
+/** 未声明的属性落到根元素（div）上 */
+/** Rate 的样式：root、item、void、各色调、half */
+var rateStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.25em",
+		fontSize: "1.25em",
+		verticalAlign: "middle",
+		userSelect: "none",
+		cursor: {
+			default: "pointer",
+			"[data-readonly]": "default",
+			"[data-disabled]": "not-allowed"
+		},
+		opacity: {
+			default: 1,
+			"[data-disabled]": "_disabled"
+		}
+	},
+	item: {
+		position: "relative",
+		display: "inline-flex"
+	},
+	void: { color: "_fillActive" },
+	warning: { color: "_warning" },
+	danger: { color: "_danger" },
+	accent: { color: "_accent" },
+	half: {
+		position: "absolute",
+		insetBlock: 0,
+		insetInlineStart: 0,
+		width: "50%",
+		overflow: "hidden"
+	}
+});
+/** 评分（div[role=slider] > 各颗星） */
+var Rate = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => 0, _ctx.emit);
+	const count = readonlyProp(_props, "count", 5);
+	const allowHalf = readonlyProp(_props, "allowHalf", false);
+	const readonly = readonlyProp(_props, "readonly", false);
+	const disabled = readonlyProp(_props, "disabled");
+	const icon = readonlyProp(_props, "icon", () => Star);
+	const tone = readonlyProp(_props, "tone", "warning");
+	const onChange = readonlyProp(_props, "onChange");
+	const propsItem = readonlyProp(_props, "propsItem");
+	const rest = restProps(_props, _ctx, true);
+	const host = useHost();
+	const form = useForm();
+	const items = [];
+	let rects = [];
+	const isDisabled = () => disabled.value ?? form?.disabled ?? false;
+	const interactive = () => !readonly.value && !form?.readonly && !isDisabled();
+	const set = (next) => {
+		if (next === value.value) return;
+		value.value = next;
+		onChange.value?.(next);
+	};
+	/** 横坐标落在哪颗星的哪一半：分数 */
+	const scoreAt = (x) => {
+		let score = 0;
+		rects.forEach((rect, index) => {
+			if (!rect || x < rect.left) return;
+			score = allowHalf.value && x < rect.left + rect.width / 2 ? index + .5 : index + 1;
+		});
+		return score;
+	};
+	const measure = async () => {
+		rects = await Promise.all(items.slice(0, count.value).map((item) => host.measure(item)));
+	};
+	const pointX = (event) => {
+		const touch = event.changedTouches?.[0];
+		return touch ? touch.clientX : event.clientX;
+	};
+	return () => {
+		const off = isDisabled();
+		return createVNode("div", mergeAttrs({ sx: [rateStyles.root, rateStyles[tone.value]] }, rest, {
+			role: "slider",
+			tabindex: interactive() ? 0 : void 0,
+			"aria-valuemin": 0,
+			"aria-valuemax": count.value,
+			"aria-valuenow": value.value,
+			"aria-readonly": readonly.value ? "true" : void 0,
+			"aria-disabled": off ? "true" : void 0,
+			onTouchstart: () => interactive() && void measure(),
+			onTouchmove: (event) => {
+				if (!interactive() || !rects.length) return;
+				const score = scoreAt(pointX(event));
+				if (score > 0) set(score);
+			},
+			onClick: (event) => {
+				if (!interactive()) return;
+				const x = pointX(event);
+				const pick = () => {
+					const score = scoreAt(x);
+					set(score === value.value ? 0 : score);
+					rects = [];
+				};
+				if (rects.length) pick();
+				else measure().then(pick);
+			},
+			onKeydown: (event) => {
+				if (!interactive()) return;
+				const delta = allowHalf.value ? .5 : 1;
+				if (event.key === "ArrowRight" || event.key === "ArrowUp") set(Math.min(count.value, value.value + delta));
+				else if (event.key === "ArrowLeft" || event.key === "ArrowDown") set(Math.max(0, value.value - delta));
+				else return;
+				event.preventDefault();
+			},
+			...dataAttrs({
+				"data-touch-move": interactive() || void 0,
+				"data-readonly": readonly.value,
+				"data-disabled": off
+			})
+		}), [Array.from({ length: count.value }, (_, index) => {
+			const fill = Math.min(1, Math.max(0, value.value - index));
+			return createVNode("span", mergeJsxProps(mergeAttrs({ sx: rateStyles.item }, propsItem.value), { "ref": (node) => items[index] = node }), [createVNode(Icon, {
+				"icon": icon.value,
+				"filled": true,
+				"sx": fill === 1 ? void 0 : rateStyles.void
+			}, null), fill > 0 && fill < 1 && createVNode("span", mergeAttrs({ sx: rateStyles.half }), [createVNode(Icon, {
+				"icon": icon.value,
+				"filled": true
+			}, null)])]);
+		})]);
+	};
+}, {
+	name: "Rate",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"count",
+		"allowHalf",
+		"readonly",
+		"disabled",
+		"icon",
+		"tone",
+		"onChange",
+		"propsItem"
+	]
+});
+//#endregion
+export { Rate, rateStyles };
+
+//# sourceMappingURL=Rate.js.map

package/dist/form/Rate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rate.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/form/Rate.tsx"],"sourcesContent":["/**\n * 评分：一排星，点一颗或在上面滑动选分数，可以有半颗。只读时用来展示评分。\n *\n *   <Rate _value={score} />\n *   <Rate _value={4.5} allowHalf readonly />\n *   <Rate _value={mood} icon={Heart} tone=\"danger\" count={3} />\n */\nimport { Star } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Icon, type IconData } from '../base/Icon';\nimport { useHost, type HostRect } from '../utils/host';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\nimport { useForm } from './context';\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface RateProps extends Omit<PartProps<'div', 'role' | 'tabindex'>, 'onChange'> {\n  /** 分数；双向绑定写 `_value={x}` */\n  _value?: number;\n  /**\n   * 几颗星\n   * @default 5\n   */\n  count?: number;\n  /** 可以选半颗 */\n  allowHalf?: boolean;\n  /** 只读：只展示 */\n  readonly?: boolean;\n  /** 禁用 */\n  disabled?: boolean;\n  /**\n   * 图标\n   * @default Star\n   */\n  icon?: IconData;\n  /**\n   * 选中部分的色调\n   * @default 'warning'\n   */\n  tone?: 'warning' | 'danger' | 'accent';\n  /** 分数变了 */\n  onChange?: (value: number) => void;\n  /** 每颗星的部件属性 */\n  propsItem?: PartProps<'span'>;\n}\n\n/** Rate 的样式：root、item、void、各色调、half */\nexport const rateStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '0.25em',\n    fontSize: '1.25em',\n    verticalAlign: 'middle',\n    userSelect: 'none',\n    cursor: { default: 'pointer', '[data-readonly]': 'default', '[data-disabled]': 'not-allowed' },\n    opacity: { default: 1, '[data-disabled]': '_disabled' },\n  },\n  item: { position: 'relative', display: 'inline-flex' },\n  void: { color: '_fillActive' },\n  warning: { color: '_warning' },\n  danger: { color: '_danger' },\n  accent: { color: '_accent' },\n  // 半颗：选中色的星叠在上面，只露出左半\n  half: {\n    position: 'absolute',\n    insetBlock: 0,\n    insetInlineStart: 0,\n    width: '50%',\n    overflow: 'hidden',\n  },\n});\n\n/** 评分（div[role=slider] > 各颗星） */\nexport const Rate = _component(\n  ({\n    _value: value = _bindable(0),\n    count = 5,\n    allowHalf = false,\n    readonly = false,\n    disabled,\n    icon = Star,\n    tone = 'warning',\n    onChange,\n    propsItem,\n    ...rest\n  }: RateProps) => {\n    const host = useHost();\n    const form = useForm();\n    const items: unknown[] = [];\n    let rects: (HostRect | null)[] = [];\n    const isDisabled = () => disabled ?? form?.disabled ?? false;\n    const interactive = () => !readonly && !form?.readonly && !isDisabled();\n    const set = (next: number) => {\n      if (next === value) return;\n      value = next;\n      onChange?.(next);\n    };\n    /** 横坐标落在哪颗星的哪一半：分数 */\n    const scoreAt = (x: number) => {\n      let score = 0;\n      rects.forEach((rect, index) => {\n        if (!rect || x < rect.left) return;\n        const half = allowHalf && x < rect.left + rect.width / 2;\n        score = half ? index + 0.5 : index + 1;\n      });\n      return score;\n    };\n    const measure = async () => {\n      rects = await Promise.all(items.slice(0, count).map((item) => host.measure(item)));\n    };\n    const pointX = (event: Event) => {\n      const touch = (event as TouchEvent).changedTouches?.[0];\n      return touch ? touch.clientX : (event as MouseEvent).clientX;\n    };\n\n    return () => {\n      const off = isDisabled();\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: [rateStyles.root, rateStyles[tone]] }, rest, {\n            role: 'slider',\n            tabindex: interactive() ? 0 : undefined,\n            'aria-valuemin': 0,\n            'aria-valuemax': count,\n            'aria-valuenow': value,\n            'aria-readonly': readonly ? 'true' : undefined,\n            'aria-disabled': off ? 'true' : undefined,\n            onTouchstart: () => interactive() && void measure(),\n            onTouchmove: (event: TouchEvent) => {\n              if (!interactive() || !rects.length) return;\n              const score = scoreAt(pointX(event));\n              // 滑到最左边也至少一颗：清零只能点同一颗（见 onClick）\n              if (score > 0) set(score);\n            },\n            onClick: (event: Event) => {\n              if (!interactive()) return;\n              const x = pointX(event);\n              const pick = () => {\n                const score = scoreAt(x);\n                // 再点一下当前的分数：清零\n                set(score === value ? 0 : score);\n                // 量到的位置只用这一次：页面滚动、布局变了下次重新量\n                rects = [];\n              };\n              // 鼠标点的（没有按下时量过）：先量\n              if (rects.length) pick();\n              else void measure().then(pick);\n            },\n            onKeydown: (event: KeyboardEvent) => {\n              if (!interactive()) return;\n              const delta = allowHalf ? 0.5 : 1;\n              if (event.key === 'ArrowRight' || event.key === 'ArrowUp')\n                set(Math.min(count, value + delta));\n              else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown')\n                set(Math.max(0, value - delta));\n              else return;\n              event.preventDefault();\n            },\n            ...dataAttrs({\n              // 小程序：收 touchmove（在星上滑动选分数）\n              'data-touch-move': interactive() || undefined,\n              'data-readonly': readonly,\n              'data-disabled': off,\n            }),\n          })}\n        >\n          {Array.from({ length: count }, (_, index) => {\n            const fill = Math.min(1, Math.max(0, value - index));\n            return (\n              <span\n                {...mergeAttrs<'span'>({ sx: rateStyles.item }, propsItem)}\n                ref={(node: unknown) => (items[index] = node)}\n              >\n                <Icon icon={icon} filled sx={fill === 1 ? undefined : rateStyles.void} />\n                {fill > 0 && fill < 1 && (\n                  <span {...mergeAttrs<'span'>({ sx: rateStyles.half })}>\n                    <Icon icon={icon} filled />\n                  </span>\n                )}\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/form/Search.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';
+/** 输入框的属性由组件管理 */
+export type SearchInputManaged = 'value' | 'type' | 'disabled' | 'placeholder' | 'enterkeyhint';
+/** 未声明的属性落到根元素（div）上 */
+export interface SearchProps extends Omit<PartProps<'div', 'role'>, 'onInput'> {
+    /** 搜索的文字；双向绑定写 `_value={x}` */
+    _value?: string;
+    /** 占位文字；不给时用语言包的“搜索” */
+    placeholder?: string;
+    /**
+     * 形状：方角或胶囊
+     * @default 'round'
+     */
+    shape?: 'round' | 'square';
+    /**
+     * 有内容时显示清除按钮
+     * @default true
+     */
+    clearable?: boolean;
+    /** 右边显示“取消” */
+    showAction?: boolean;
+    /** 右边的内容；不给时是语言包的“取消” */
+    action?: VNodeChild;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 按了键盘的搜索键 */
+    onSearch?: (value: string) => void;
+    /** 点了取消：默认清空文字 */
+    onCancel?: () => void;
+    /** 点了清除按钮 */
+    onClear?: () => void;
+    /** 输入框的部件属性 */
+    propsInput?: PartProps<'input', SearchInputManaged>;
+    /** 灰底的输入区的部件属性 */
+    propsBox?: PartProps<'div'>;
+    /** 取消按钮的部件属性 */
+    propsAction?: PartProps<'button'>;
+}
+/** Search 的样式：root、box、square、icon、action */
+export declare const searchStyles: Readonly<{
+    action: css.CompiledStyles;
+    box: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    root: css.CompiledStyles;
+    square: css.CompiledStyles;
+}>;
+/** 搜索框（div > 输入区 + 取消） */
+export declare const Search: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SearchProps>;

package/dist/form/Search.js

@@ -0,0 +1,152 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { fieldStyles } from "./Field.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 { createVNode } from "vue";
+import { CircleX, Search } from "@lucide/icons";
+//#region src/form/Search.tsx
+/**
+* 搜索框：圆角的灰底输入框，前面放大镜，有内容时可清除，右边可带“取消”。按键盘的搜索键时 onSearch。
+*
+*   <Search _value={keyword} onSearch={(text) => load(text)} />
+*   <Search _value={keyword} showAction onCancel={() => back()} placeholder="搜索商品" />
+*/
+/** 输入框的属性由组件管理 */
+/** 未声明的属性落到根元素（div）上 */
+/** Search 的样式：root、box、square、icon、action */
+var searchStyles = css.create({
+	root: {
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "center",
+		gap: "_md",
+		paddingBlock: "0.55em",
+		paddingInline: "_md",
+		fontSize: "_md",
+		lineHeight: "1.5",
+		backgroundColor: "_surface"
+	},
+	box: {
+		flex: "1 1 auto",
+		minWidth: 0,
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		height: "2.3em",
+		paddingInline: "0.8em",
+		borderRadius: "_full",
+		backgroundColor: "_fill",
+		opacity: {
+			default: 1,
+			"[data-disabled]": "_disabled"
+		}
+	},
+	square: { borderRadius: "_sm" },
+	icon: {
+		flex: "none",
+		fontSize: "1.1em",
+		color: "_textMuted"
+	},
+	action: {
+		flex: "none",
+		padding: 0,
+		margin: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: {
+			default: "_text",
+			":active": "_textMuted"
+		},
+		fontFamily: "inherit",
+		fontSize: "inherit",
+		lineHeight: "inherit",
+		cursor: "pointer"
+	}
+});
+/** 搜索框（div > 输入区 + 取消） */
+var Search$1 = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const value = bindable(_props, "_value", () => "", _ctx.emit);
+	const placeholder = readonlyProp(_props, "placeholder");
+	const shape = readonlyProp(_props, "shape", "round");
+	const clearable = readonlyProp(_props, "clearable", true);
+	const showAction = readonlyProp(_props, "showAction", false);
+	const action = readonlyProp(_props, "action");
+	const disabled = readonlyProp(_props, "disabled", false);
+	const onSearch = readonlyProp(_props, "onSearch");
+	const onCancel = readonlyProp(_props, "onCancel");
+	const onClear = readonlyProp(_props, "onClear");
+	const propsInput = readonlyProp(_props, "propsInput");
+	const propsBox = readonlyProp(_props, "propsBox");
+	const propsAction = readonlyProp(_props, "propsAction");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	let input = null;
+	let composing = false;
+	return () => createVNode("div", mergeAttrs({ sx: searchStyles.root }, rest, { role: "search" }), [createVNode("div", mergeAttrs({ sx: [searchStyles.box, shape.value === "square" && searchStyles.square] }, propsBox.value, dataAttrs({ "data-disabled": disabled.value })), [
+		createVNode(Icon, {
+			"icon": Search,
+			"sx": searchStyles.icon
+		}, null),
+		createVNode("input", mergeJsxProps(mergeAttrs({ sx: fieldStyles.input }, propsInput.value, {
+			value: value.value,
+			type: "text",
+			enterkeyhint: "search",
+			disabled: disabled.value,
+			placeholder: placeholder.value ?? config.lang.search,
+			onInput: (event) => {
+				if (!composing) value.value = event.target.value;
+			},
+			onCompositionstart: () => composing = true,
+			onCompositionend: (event) => {
+				composing = false;
+				value.value = event.target.value;
+			},
+			onKeydown: (event) => {
+				if (event.key !== "Enter") return;
+				event.preventDefault();
+				onSearch.value?.(value.value);
+			}
+		}), { "ref": _cache[0] || (_cache[0] = (node) => input = node) }), null),
+		clearable.value && !disabled.value && value.value !== "" && createVNode("button", mergeJsxProps(mergeAttrs({ sx: fieldStyles.clear }), {
+			"type": "button",
+			"aria-label": config.lang.clear,
+			"onMousedown": _cache[1] || (_cache[1] = (event) => event.preventDefault()),
+			"onClick": _cache[2] || (_cache[2] = () => {
+				value.value = "";
+				onClear.value?.();
+				input?.focus();
+			})
+		}), [createVNode(Icon, { "icon": CircleX }, null)])
+	]), showAction.value && createVNode("button", mergeAttrs({ sx: searchStyles.action }, propsAction.value, {
+		type: "button",
+		onClick: () => {
+			value.value = "";
+			onCancel.value?.();
+		}
+	}), [action.value ?? config.lang.cancel])]);
+}, {
+	name: "Search",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"placeholder",
+		"shape",
+		"clearable",
+		"showAction",
+		"action",
+		"disabled",
+		"onSearch",
+		"onCancel",
+		"onClear",
+		"propsInput",
+		"propsBox",
+		"propsAction"
+	]
+});
+//#endregion
+export { Search$1 as Search, searchStyles };
+
+//# sourceMappingURL=Search.js.map

package/dist/form/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","names":["Search","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_createVNode","SearchIcon","_mergeProps"],"sources":["../../src/form/Search.tsx"],"sourcesContent":["/**\n * 搜索框：圆角的灰底输入框，前面放大镜，有内容时可清除，右边可带“取消”。按键盘的搜索键时 onSearch。\n *\n *   <Search _value={keyword} onSearch={(text) => load(text)} />\n *   <Search _value={keyword} showAction onCancel={() => back()} placeholder=\"搜索商品\" />\n */\nimport { CircleX, Search as SearchIcon } 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, mergeAttrs, type PartProps } from '../utils/props';\nimport { fieldStyles } from './Field';\n\n/** 输入框的属性由组件管理 */\nexport type SearchInputManaged = 'value' | 'type' | 'disabled' | 'placeholder' | 'enterkeyhint';\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface SearchProps extends Omit<PartProps<'div', 'role'>, 'onInput'> {\n  /** 搜索的文字；双向绑定写 `_value={x}` */\n  _value?: string;\n  /** 占位文字；不给时用语言包的“搜索” */\n  placeholder?: string;\n  /**\n   * 形状：方角或胶囊\n   * @default 'round'\n   */\n  shape?: 'round' | 'square';\n  /**\n   * 有内容时显示清除按钮\n   * @default true\n   */\n  clearable?: boolean;\n  /** 右边显示“取消” */\n  showAction?: boolean;\n  /** 右边的内容；不给时是语言包的“取消” */\n  action?: VNodeChild;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 按了键盘的搜索键 */\n  onSearch?: (value: string) => void;\n  /** 点了取消：默认清空文字 */\n  onCancel?: () => void;\n  /** 点了清除按钮 */\n  onClear?: () => void;\n  /** 输入框的部件属性 */\n  propsInput?: PartProps<'input', SearchInputManaged>;\n  /** 灰底的输入区的部件属性 */\n  propsBox?: PartProps<'div'>;\n  /** 取消按钮的部件属性 */\n  propsAction?: PartProps<'button'>;\n}\n\n/** Search 的样式：root、box、square、icon、action */\nexport const searchStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_md',\n    paddingBlock: '0.55em',\n    paddingInline: '_md',\n    fontSize: '_md',\n    lineHeight: '1.5',\n    backgroundColor: '_surface',\n  },\n  box: {\n    flex: '1 1 auto',\n    minWidth: 0,\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    height: '2.3em',\n    paddingInline: '0.8em',\n    borderRadius: '_full',\n    backgroundColor: '_fill',\n    opacity: { default: 1, '[data-disabled]': '_disabled' },\n  },\n  square: { borderRadius: '_sm' },\n  icon: { flex: 'none', fontSize: '1.1em', color: '_textMuted' },\n  action: {\n    flex: 'none',\n    padding: 0,\n    margin: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: { default: '_text', ':active': '_textMuted' },\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: 'inherit',\n    cursor: 'pointer',\n  },\n});\n\n/** 搜索框（div > 输入区 + 取消） */\nexport const Search = _component(\n  ({\n    _value: value = _bindable(''),\n    placeholder,\n    shape = 'round',\n    clearable = true,\n    showAction = false,\n    action,\n    disabled = false,\n    onSearch,\n    onCancel,\n    onClear,\n    propsInput,\n    propsBox,\n    propsAction,\n    ...rest\n  }: SearchProps) => {\n    const config = useConfig();\n    let input: HTMLInputElement | null = null;\n    let composing = false;\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: searchStyles.root }, rest, { role: 'search' })}>\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [searchStyles.box, shape === 'square' && searchStyles.square] },\n            propsBox,\n            dataAttrs({ 'data-disabled': disabled }),\n          )}\n        >\n          <Icon icon={SearchIcon} sx={searchStyles.icon} />\n          <input\n            {...mergeAttrs<'input'>({ sx: fieldStyles.input }, propsInput, {\n              value,\n              // 不用 type=search：WebKit 会再画一个自带的清除按钮\n              type: 'text',\n              enterkeyhint: 'search',\n              disabled,\n              placeholder: placeholder ?? config.lang.search,\n              onInput: (event: Event) => {\n                if (!composing) value = (event.target as HTMLInputElement).value;\n              },\n              onCompositionstart: () => (composing = true),\n              onCompositionend: (event: Event) => {\n                composing = false;\n                value = (event.target as HTMLInputElement).value;\n              },\n              onKeydown: (event: KeyboardEvent) => {\n                if (event.key !== 'Enter') return;\n                event.preventDefault();\n                onSearch?.(value);\n              },\n            })}\n            ref={(node: unknown) => (input = node as HTMLInputElement | null)}\n          />\n          {clearable && !disabled && value !== '' && (\n            <button\n              {...mergeAttrs<'button'>({ sx: fieldStyles.clear })}\n              type=\"button\"\n              aria-label={config.lang.clear}\n              onMousedown={(event: Event) => event.preventDefault()}\n              onClick={() => {\n                value = '';\n                onClear?.();\n                input?.focus();\n              }}\n            >\n              <Icon icon={CircleX} />\n            </button>\n          )}\n        </div>\n        {showAction && (\n          <button\n            {...mergeAttrs<'button'>({ sx: searchStyles.action }, propsAction, {\n              type: 'button',\n              onClick: () => {\n                value = '';\n                onCancel?.();\n              },\n            })}\n          >\n            {action ?? config.lang.cancel}\n          </button>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/form/Slider.d.ts

@@ -0,0 +1,43 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+/** 一个数，或区间的两端 */
+export type SliderValue = number | [number, number];
+/** 未声明的属性落到根元素（div）上 */
+export interface SliderProps extends Omit<PartProps<'div'>, 'onChange'> {
+    /** 当前的值；双向绑定写 `_value={x}`。数组时是区间 */
+    _value?: SliderValue;
+    /**
+     * 最小值
+     * @default 0
+     */
+    min?: number;
+    /**
+     * 最大值
+     * @default 100
+     */
+    max?: number;
+    /**
+     * 步长
+     * @default 1
+     */
+    step?: number;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 只读 */
+    readonly?: boolean;
+    /** 松手（或点了轨道、按了方向键）之后 */
+    onChange?: (value: SliderValue) => void;
+    /** 轨道的部件属性 */
+    propsTrack?: PartProps<'div'>;
+    /** 滑块（两个时都用）的部件属性 */
+    propsThumb?: PartProps<'div'>;
+}
+/** Slider 的样式：root、track、fill、thumb */
+export declare const sliderStyles: Readonly<{
+    fill: css.CompiledStyles;
+    root: css.CompiledStyles;
+    thumb: css.CompiledStyles;
+    track: css.CompiledStyles;
+}>;
+/** 滑块（div > 轨道：已选的一段 + 滑块） */
+export declare const Slider: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SliderProps>;

package/dist/form/Slider.js

@@ -0,0 +1,213 @@
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { useHost } from "../utils/host.js";
+import { useForm } from "./context.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 { createVNode, ref } from "vue";
+//#region src/form/Slider.tsx
+/** 一个数，或区间的两端 */
+/** 未声明的属性落到根元素（div）上 */
+/** Slider 的样式：root、track、fill、thumb */
+var sliderStyles = css.create({
+	root: {
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		height: "2em",
+		paddingInline: "0.75em",
+		touchAction: "pan-y",
+		userSelect: "none",
+		opacity: {
+			default: 1,
+			"[data-disabled]": "_disabled"
+		}
+	},
+	track: {
+		position: "relative",
+		flex: "1 1 auto",
+		height: "0.25em",
+		borderRadius: "_full",
+		backgroundColor: "_fillActive"
+	},
+	fill: {
+		position: "absolute",
+		insetBlock: 0,
+		borderRadius: "_full",
+		backgroundColor: "_accent"
+	},
+	thumb: {
+		boxSizing: "border-box",
+		position: "absolute",
+		insetBlockStart: "50%",
+		width: "1.5em",
+		height: "1.5em",
+		borderRadius: "_full",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_border",
+		backgroundColor: "#fff",
+		boxShadow: "_sm",
+		transform: "translate(-50%, -50%)",
+		cursor: {
+			default: "grab",
+			"[data-disabled]": "not-allowed"
+		}
+	}
+});
+var LOCK_DISTANCE = 6;
+/** 滑块（div > 轨道：已选的一段 + 滑块） */
+var Slider = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const value = bindable(_props, "_value", () => 0, _ctx.emit);
+	const min = readonlyProp(_props, "min", 0);
+	const max = readonlyProp(_props, "max", 100);
+	const step = readonlyProp(_props, "step", 1);
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly", false);
+	const onChange = readonlyProp(_props, "onChange");
+	const propsTrack = readonlyProp(_props, "propsTrack");
+	const propsThumb = readonlyProp(_props, "propsThumb");
+	const rest = restProps(_props, _ctx, true);
+	const host = useHost();
+	const form = useForm();
+	let track = null;
+	let rect = null;
+	let horizontal = ref(false);
+	let start = {
+		x: 0,
+		y: 0
+	};
+	let direction = null;
+	let active = 0;
+	const interactive = () => !(disabled.value ?? form?.disabled) && !readonly.value && !form?.readonly;
+	const ends = () => Array.isArray(value.value) ? value.value : [min.value, value.value];
+	const percent = (number) => (number - min.value) / (max.value - min.value || 1) * 100;
+	const snap = (number) => {
+		const stepped = Math.round((number - min.value) / step.value) * step.value + min.value;
+		return Number(Math.min(max.value, Math.max(min.value, stepped)).toFixed(10));
+	};
+	const valueAt = (x) => rect ? snap(min.value + (x - rect.left) / (rect.width || 1) * (max.value - min.value)) : null;
+	/** 把一端改成 next：区间两端交叉时换成拖另一端 */
+	const setEnd = (index, next) => {
+		if (!Array.isArray(value.value)) return void (value.value = next);
+		const pair = [...value.value];
+		pair[index] = next;
+		if (pair[0] > pair[1]) {
+			pair.reverse();
+			active = 1 - index;
+		}
+		value.value = pair;
+	};
+	const nearest = (number) => {
+		if (!Array.isArray(value.value)) return 0;
+		return Math.abs(number - value.value[0]) <= Math.abs(number - value.value[1]) ? 0 : 1;
+	};
+	const pointX = (event) => event.changedTouches?.[0]?.clientX ?? event.clientX;
+	const onTouchstart = (event) => {
+		if (!interactive()) return;
+		const touch = event.touches[0];
+		start = {
+			x: touch.clientX,
+			y: touch.clientY
+		};
+		direction = null;
+		host.measure(track).then((measured) => rect = measured);
+	};
+	const onTouchmove = (event) => {
+		if (!interactive() || !rect) return;
+		const touch = event.touches[0];
+		if (!direction) {
+			const dx = touch.clientX - start.x;
+			const dy = touch.clientY - start.y;
+			if (Math.abs(dx) < LOCK_DISTANCE && Math.abs(dy) < LOCK_DISTANCE) return;
+			direction = Math.abs(dx) > Math.abs(dy) ? "h" : "v";
+			horizontal.value = direction === "h";
+			if (horizontal.value) active = nearest(valueAt(start.x) ?? min.value);
+		}
+		if (direction !== "h") return;
+		const next = valueAt(touch.clientX);
+		if (next !== null) setEnd(active, next);
+	};
+	const onTouchend = () => {
+		if (horizontal.value) onChange.value?.(value.value);
+		horizontal.value = false;
+	};
+	const onClick = (event) => {
+		if (!interactive()) return;
+		const x = pointX(event);
+		host.measure(track).then((measured) => {
+			rect = measured;
+			const next = valueAt(x);
+			if (next === null) return;
+			active = nearest(next);
+			setEnd(active, next);
+			onChange.value?.(value.value);
+		});
+	};
+	const onKeydown = (index, event) => {
+		if (!interactive()) return;
+		const delta = {
+			ArrowRight: step.value,
+			ArrowUp: step.value,
+			ArrowLeft: -step.value,
+			ArrowDown: -step.value
+		}[event.key];
+		if (delta === void 0) return;
+		event.preventDefault();
+		setEnd(index, snap(ends()[index] + delta));
+		onChange.value?.(value.value);
+	};
+	return () => {
+		const off = !interactive();
+		const [low, high] = ends();
+		const range = Array.isArray(value.value);
+		const thumbs = range ? [low, high] : [high];
+		return createVNode("div", mergeAttrs({ sx: sliderStyles.root }, rest, {
+			onTouchstart,
+			onTouchmove,
+			onTouchend,
+			onTouchcancel: onTouchend,
+			onClick,
+			...dataAttrs({
+				"data-touch-move": horizontal.value ? "catch" : true,
+				"data-disabled": disabled.value ?? form?.disabled
+			})
+		}), [createVNode("div", mergeJsxProps(mergeAttrs({ sx: sliderStyles.track }, propsTrack.value), { "ref": _cache[0] || (_cache[0] = (node) => track = node) }), [createVNode("div", mergeAttrs({
+			sx: sliderStyles.fill,
+			style: {
+				insetInlineStart: `${range ? percent(low) : 0}%`,
+				width: `${percent(high) - (range ? percent(low) : 0)}%`
+			}
+		}), null), thumbs.map((number, index) => createVNode("div", mergeAttrs({
+			sx: sliderStyles.thumb,
+			style: { insetInlineStart: `${percent(number)}%` }
+		}, propsThumb.value, {
+			role: "slider",
+			tabindex: off ? void 0 : 0,
+			"aria-valuemin": min.value,
+			"aria-valuemax": max.value,
+			"aria-valuenow": number,
+			"aria-disabled": off ? "true" : void 0,
+			onKeydown: (event) => onKeydown(range ? index : 1, event),
+			...dataAttrs({ "data-disabled": off })
+		}), null))])]);
+	};
+}, {
+	name: "Slider",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"min",
+		"max",
+		"step",
+		"disabled",
+		"readonly",
+		"onChange",
+		"propsTrack",
+		"propsThumb"
+	]
+});
+//#endregion
+export { Slider, sliderStyles };
+
+//# sourceMappingURL=Slider.js.map