@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/input/Slider.d.ts

@@ -0,0 +1,99 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type StatusTone } from '../utils/style/tone-styles';
+import { type TextSize } from '../utils/style/typography';
+/** 滑块方向 */
+export interface SliderOrientations {
+    /** 横向（默认）：起始端是最小值 */
+    horizontal: unknown;
+    /** 纵向：底端是最小值；高度由使用方给，默认 10em */
+    vertical: unknown;
+}
+/** 单值，或范围 [低, 高] */
+export type SliderValue = number | readonly [number, number];
+/** 轨道上的一个刻度 */
+export interface SliderMark {
+    /** 刻度所在的值 */
+    value: number;
+    /** 刻度下方（纵向时右侧）的文字 */
+    label?: VNodeChild;
+}
+/** 角色、取值与可聚焦由组件管理 */
+export type SliderManaged = 'role' | 'tabindex' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext' | 'aria-orientation' | 'aria-disabled';
+/** 未声明的属性落到滑块（role="slider" 的主元素，范围时两个都有）上，名称写 aria-label；外层用 propsRoot */
+export interface SliderProps<V extends SliderValue = number> extends PartProps<'div', SliderManaged> {
+    /** 当前值：父级写 _value={x} 双向绑定，拖动中实时写回；数组 [低, 高] 时是范围选择 */
+    _value?: V;
+    /** 最小值，默认 0 */
+    min?: number;
+    /** 最大值，默认 100 */
+    max?: number;
+    /** 步长，默认 1；取值总是对齐到 min + n × step */
+    step?: number;
+    /** Page Up / Page Down 的步长，默认为范围的十分之一（至少一个 step） */
+    bigStep?: number;
+    /** 方向，默认 horizontal */
+    orientation?: keyof SliderOrientations;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读：滑块能聚焦、读屏念“只读”，拖动与方向键不改值（查看详情、审批时）；外观照常 */
+    readonly?: boolean;
+    /** 字号档位，滑块与轨道随之缩放；不写时继承 */
+    size?: TextSize;
+    /** 已选范围与滑块描边的色调（与 Button、Badge 等同一套），默认 accent */
+    tone?: StatusTone;
+    /** 刻度：数字或带文字的 { value, label }；有文字时滑块下方（纵向时右侧）留出位置 */
+    marks?: readonly (number | SliderMark)[];
+    /** 读屏念的取值文字（aria-valuetext），如 `(v) => \`${v}%\``；不写时念数字 */
+    valueText?: (value: number) => string;
+    /** 表单字段名：给了就带隐藏的 input（范围时两个同名），随表单提交 */
+    name?: string;
+    /** 一次操作结束（松开、按键）时的值：保存、发请求放在这里，不必每次移动都发 */
+    onValueCommit?: (value: V) => void;
+    /** 外层（轨道与滑块的容器）的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 轨道的部件属性 */
+    propsTrack?: PartProps<'div'>;
+    /** 已选范围（轨道上着色的部分）的部件属性；位置与长度由组件写 */
+    propsRange?: PartProps<'div'>;
+    /** 刻度点的部件属性 */
+    propsMark?: PartProps<'span'> | ((mark: SliderMark) => PartProps<'span'>);
+    /** 刻度文字的部件属性 */
+    propsMarkLabel?: PartProps<'span'> | ((mark: SliderMark) => PartProps<'span'>);
+}
+/** Slider 的样式：root、horizontal、vertical、disabled、readonly、track、range、thumb、mark、markLabel 等 */
+export declare const sliderStyles: Readonly<{
+    disabled: css.CompiledStyles;
+    horizontal: css.CompiledStyles;
+    labelledHorizontal: css.CompiledStyles;
+    labelledVertical: css.CompiledStyles;
+    mark: css.CompiledStyles;
+    markActive: css.CompiledStyles;
+    markHorizontal: css.CompiledStyles;
+    markLabel: css.CompiledStyles;
+    markLabelHorizontal: css.CompiledStyles;
+    markLabelVertical: css.CompiledStyles;
+    markVertical: css.CompiledStyles;
+    range: css.CompiledStyles;
+    rangeHorizontal: css.CompiledStyles;
+    rangeVertical: css.CompiledStyles;
+    readonly: css.CompiledStyles;
+    root: css.CompiledStyles;
+    thumb: css.CompiledStyles;
+    thumbHorizontal: css.CompiledStyles;
+    thumbVertical: css.CompiledStyles;
+    track: css.CompiledStyles;
+    trackHorizontal: css.CompiledStyles;
+    trackVertical: css.CompiledStyles;
+    vertical: css.CompiledStyles;
+}>;
+/** Slider 的样式：inline（横向的起点）、size（横向的长度）、bottom、height（纵向） */
+export declare const sliderPositionStyles: Readonly<{
+    readonly inline: (percent: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly width: (percent: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly bottom: (percent: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly height: (percent: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 滑块：在 min–max 之间按 step 拖动或用键盘选值；value 为 [低, 高] 时选一个范围 */
+export declare const Slider: <V extends SliderValue = number>(props: SliderProps<V>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/input/Slider.js

@@ -0,0 +1,343 @@
+import { clamp, snapToStep } from "../utils/data/number.js";
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { defaultLabelledBy, mergeAttrs } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { startMove } from "../utils/dom/move.js";
+import { inlineArrows, isRtl } from "../utils/dom/direction.js";
+import { toneFillStyles } from "../utils/style/tone-styles.js";
+import { useFieldControl } from "../form/Field.js";
+import { FormValue } from "../form/FormValue.js";
+import { createVNode, isVNode, mergeProps, shallowRef, useId } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/Slider.tsx
+/** 滑块方向 */
+/** 单值，或范围 [低, 高] */
+/** 轨道上的一个刻度 */
+/** 角色、取值与可聚焦由组件管理 */
+/** 未声明的属性落到滑块（role="slider" 的主元素，范围时两个都有）上，名称写 aria-label；外层用 propsRoot */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Slider 的样式：root、horizontal、vertical、disabled、readonly、track、range、thumb、mark、markLabel 等 */
+var sliderStyles = css.create({
+	root: {
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		touchAction: "none",
+		userSelect: "none",
+		cursor: "pointer"
+	},
+	horizontal: {
+		width: `calc(100% - ${t.space.lg} - ${t.space.xs})`,
+		marginInline: `calc((${t.space.lg} + ${t.space.xs}) / 2)`,
+		minHeight: "_minTarget"
+	},
+	vertical: {
+		flexDirection: "column",
+		height: "10em",
+		marginBlock: `calc((${t.space.lg} + ${t.space.xs}) / 2)`,
+		minWidth: "_minTarget"
+	},
+	labelledHorizontal: { paddingBlockEnd: "1.5em" },
+	labelledVertical: { paddingInlineEnd: "3em" },
+	disabled: {
+		opacity: "_disabled",
+		cursor: "not-allowed"
+	},
+	readonly: { cursor: "default" },
+	track: {
+		position: "relative",
+		flexGrow: 1,
+		borderRadius: "_full",
+		backgroundColor: "_fill",
+		overflow: "hidden"
+	},
+	trackHorizontal: { height: `calc(${t.space.xs} * 1.5)` },
+	trackVertical: { width: `calc(${t.space.xs} * 1.5)` },
+	range: {
+		position: "absolute",
+		backgroundColor: "var(--tone-fill)"
+	},
+	rangeHorizontal: { insetBlock: 0 },
+	rangeVertical: { insetInline: 0 },
+	thumb: {
+		position: "absolute",
+		boxSizing: "border-box",
+		width: `calc(${t.space.lg} + ${t.space.xs})`,
+		height: `calc(${t.space.lg} + ${t.space.xs})`,
+		borderWidth: "_sm",
+		borderStyle: "solid",
+		borderColor: "var(--tone-fill)",
+		borderRadius: "_full",
+		backgroundColor: "_surface",
+		boxShadow: "_sm",
+		cursor: "grab"
+	},
+	thumbHorizontal: { marginInlineStart: `calc((${t.space.lg} + ${t.space.xs}) / -2)` },
+	thumbVertical: { marginBottom: `calc((${t.space.lg} + ${t.space.xs}) / -2)` },
+	mark: {
+		position: "absolute",
+		width: "_space.xs",
+		height: "_space.xs",
+		borderRadius: "_full",
+		backgroundColor: "_borderStrong",
+		pointerEvents: "none"
+	},
+	markHorizontal: {
+		top: "50%",
+		translate: {
+			default: "-50% -50%",
+			":dir(rtl)": "50% -50%"
+		}
+	},
+	markVertical: {
+		left: "50%",
+		translate: "-50% 50%"
+	},
+	markActive: { backgroundColor: "var(--tone-on-fill)" },
+	markLabel: {
+		position: "absolute",
+		fontSize: "_sm",
+		lineHeight: "_tight",
+		color: "_textMuted",
+		whiteSpace: "nowrap",
+		pointerEvents: "none"
+	},
+	markLabelHorizontal: {
+		top: `calc(50% + ${t.space.sm})`,
+		translate: {
+			default: "-50% -0.75em",
+			":dir(rtl)": "50% -0.75em"
+		}
+	},
+	markLabelVertical: {
+		left: `calc(50% + ${t.space.md})`,
+		translate: "0 50%"
+	}
+});
+/** Slider 的样式：inline（横向的起点）、size（横向的长度）、bottom、height（纵向） */
+var sliderPositionStyles = css.create({
+	inline: (percent) => ({ insetInlineStart: percent }),
+	width: (percent) => ({ width: percent }),
+	bottom: (percent) => ({ bottom: percent }),
+	height: (percent) => ({ height: percent })
+});
+/** 滑块：在 min–max 之间按 step 拖动或用键盘选值；value 为 [低, 高] 时选一个范围 */
+var Slider = /*#__PURE__*/ _component((_props, _ctx) => {
+	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 bigStep = readonlyProp(_props, "bigStep");
+	const orientation = readonlyProp(_props, "orientation", "horizontal");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const size = readonlyProp(_props, "size");
+	const tone = readonlyProp(_props, "tone", "accent");
+	const marks = readonlyProp(_props, "marks");
+	const valueText = readonlyProp(_props, "valueText");
+	const name = readonlyProp(_props, "name");
+	const onValueCommit = readonlyProp(_props, "onValueCommit");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsTrack = readonlyProp(_props, "propsTrack");
+	const propsRange = readonlyProp(_props, "propsRange");
+	const propsMark = readonlyProp(_props, "propsMark");
+	const propsMarkLabel = readonlyProp(_props, "propsMarkLabel");
+	const id = readonlyProp(_props, "id");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const control = useFieldControl(() => ({
+		id: id.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	/** 不接受改值：不可用或只读 */
+	const off = () => control().disabled || control().readonly;
+	const labelId = useId();
+	let track = shallowRef(null);
+	const thumbs = [null, null];
+	const isRange = () => Array.isArray(value.value);
+	/** 各滑块的值（单值时只有一个） */
+	const values = () => Array.isArray(value.value) ? [...value.value] : [value.value];
+	/** 夹在范围内并对齐到步长 */
+	const snap = (raw) => snapToStep(raw, step.value, min.value, max.value);
+	const rtl = () => orientation.value === "horizontal" && !!track.value && isRtl(track.value);
+	/** 第 index 个滑块能取的范围：范围选择时不能越过另一个 */
+	function bounds(index) {
+		if (!isRange()) return [min.value, max.value];
+		const [low, high] = values();
+		return index === 0 ? [min.value, high] : [low, max.value];
+	}
+	/** 改第 index 个滑块的值 */
+	function set(index, raw) {
+		const [lower, upper] = bounds(index);
+		const next = clamp(snap(raw), lower, upper);
+		if (!isRange()) {
+			value.value = next;
+			return;
+		}
+		const pair = values();
+		pair[index] = next;
+		value.value = pair;
+	}
+	/** 指针位置对应的值 */
+	function valueAt(clientX, clientY) {
+		const rect = track.value.getBoundingClientRect();
+		let ratio = orientation.value === "vertical" ? (rect.bottom - clientY) / rect.height : (clientX - rect.left) / rect.width;
+		if (rtl()) ratio = 1 - ratio;
+		return snap(min.value + clamp(ratio, 0, 1) * (max.value - min.value));
+	}
+	/** 离 target 最近的滑块；两个重合时按方向选（往高处去的拿高的那个） */
+	function nearest(target) {
+		if (!isRange()) return 0;
+		const [low, high] = values();
+		if (low === high) return target > high ? 1 : 0;
+		return Math.abs(target - low) <= Math.abs(target - high) ? 0 : 1;
+	}
+	function grab(event) {
+		if (off() || event.button !== 0 || !track.value) return;
+		event.preventDefault();
+		const target = valueAt(event.clientX, event.clientY);
+		const index = nearest(target);
+		thumbs[index]?.focus();
+		set(index, target);
+		startMove(event, {
+			onMove: ({ clientX, clientY }) => set(index, valueAt(clientX, clientY)),
+			onEnd: () => onValueCommit.value?.(value.value)
+		});
+	}
+	function onKeydown(index, event) {
+		if (off()) return;
+		const current = values()[index];
+		const big = bigStep.value ?? Math.max(step.value, (max.value - min.value) / 10);
+		const { forward, backward } = inlineArrows(rtl());
+		const [lower, upper] = bounds(index);
+		const next = {
+			[forward]: current + step.value,
+			ArrowUp: current + step.value,
+			[backward]: current - step.value,
+			ArrowDown: current - step.value,
+			PageUp: current + big,
+			PageDown: current - big,
+			Home: lower,
+			End: upper
+		};
+		if (!(event.key in next)) return;
+		event.preventDefault();
+		set(index, next[event.key]);
+		onValueCommit.value?.(value.value);
+	}
+	const percentOf = (number) => max.value > min.value ? (clamp(number, min.value, max.value) - min.value) / (max.value - min.value) * 100 : 0;
+	return () => {
+		const vertical = orientation.value === "vertical";
+		const field = control();
+		const range = isRange();
+		const shown = values().map((number) => clamp(number, min.value, max.value));
+		const [start, end] = range ? [percentOf(shown[0]), percentOf(shown[1])] : [0, percentOf(shown[0])];
+		const normalized = (marks.value ?? []).map((mark) => typeof mark === "number" ? { value: mark } : mark);
+		const labelled = normalized.some((mark) => mark.label != null);
+		const position = (percent) => vertical ? sliderPositionStyles.bottom(`${percent}%`) : sliderPositionStyles.inline(`${percent}%`);
+		const renderThumb = (number, index) => {
+			const [lower, upper] = bounds(index);
+			const part = range ? index === 0 ? lang.sliderMin : lang.sliderMax : void 0;
+			const ownLabel = rest["aria-label"];
+			const labelledBy = defaultLabelledBy(rest, field.labelledBy);
+			return createVNode("div", mergeProps({ "key": index }, mergeAttrs({ sx: [
+				sliderStyles.thumb,
+				focusRingStyles.visible,
+				vertical ? sliderStyles.thumbVertical : sliderStyles.thumbHorizontal,
+				position(percentOf(number))
+			] }, rest, {
+				ref: (element) => thumbs[index] = element,
+				role: "slider",
+				id: index === 0 ? field.id : void 0,
+				tabindex: field.disabled ? void 0 : 0,
+				"aria-valuemin": lower,
+				"aria-valuemax": upper,
+				"aria-valuenow": number,
+				"aria-valuetext": valueText.value?.(number),
+				"aria-orientation": orientation.value,
+				"aria-disabled": field.disabled || void 0,
+				"aria-readonly": field.readonly || void 0,
+				"aria-label": part && ownLabel != null ? `${ownLabel} ${part}` : ownLabel,
+				"aria-labelledby": part && labelledBy ? `${labelledBy} ${labelId}-${index}` : labelledBy,
+				"aria-describedby": field.describedBy,
+				"aria-invalid": field.invalid || void 0,
+				onKeydown: (event) => onKeydown(index, event)
+			}), { "data-index": range ? index : void 0 }), [part && labelledBy && createVNode(VisuallyHidden, { "id": `${labelId}-${index}` }, _isSlot(part) ? part : { default: () => [part] })]);
+		};
+		return createVNode("div", mergeProps(mergeAttrs({ sx: [
+			sliderStyles.root,
+			vertical ? sliderStyles.vertical : sliderStyles.horizontal,
+			labelled && (vertical ? sliderStyles.labelledVertical : sliderStyles.labelledHorizontal),
+			toneFillStyles[tone.value],
+			size.value && fontSizeStyles[size.value]
+		] }, propsRoot.value, {
+			sx: [field.readonly && sliderStyles.readonly, field.disabled && sliderStyles.disabled],
+			onPointerdown: grab
+		}), {
+			"data-disabled": field.disabled || void 0,
+			"data-readonly": field.readonly || void 0,
+			"data-orientation": orientation.value,
+			"data-range": range || void 0
+		}), [
+			createVNode("div", mergeAttrs({ sx: [sliderStyles.track, vertical ? sliderStyles.trackVertical : sliderStyles.trackHorizontal] }, propsTrack.value, { ref: track }), [createVNode("div", mergeAttrs({ sx: [sliderStyles.range, vertical ? sliderStyles.rangeVertical : sliderStyles.rangeHorizontal] }, propsRange.value, { sx: [position(start), vertical ? css.bind(sliderPositionStyles.height, () => [`${end - start}%`]) : css.bind(sliderPositionStyles.width, () => [`${end - start}%`])] }), null), normalized.map((mark) => {
+				const percent = percentOf(mark.value);
+				const own = typeof propsMark.value === "function" ? propsMark.value(mark) : propsMark.value;
+				return createVNode("span", mergeProps({ "key": mark.value }, mergeAttrs({ sx: [
+					sliderStyles.mark,
+					vertical ? sliderStyles.markVertical : sliderStyles.markHorizontal,
+					percent >= start && percent <= end && sliderStyles.markActive
+				] }, own, { sx: position(percent) })), null);
+			})]),
+			shown.map(renderThumb),
+			normalized.map((mark) => {
+				if (mark.label == null) return null;
+				const own = typeof propsMarkLabel.value === "function" ? propsMarkLabel.value(mark) : propsMarkLabel.value;
+				return createVNode("span", mergeProps({ "key": mark.value }, mergeAttrs({ sx: [sliderStyles.markLabel, vertical ? sliderStyles.markLabelVertical : sliderStyles.markLabelHorizontal] }, own, {
+					sx: position(percentOf(mark.value)),
+					"aria-hidden": true
+				})), [mark.label]);
+			}),
+			createVNode(FormValue, {
+				"name": name.value,
+				"value": range ? shown : shown[0],
+				"disabled": control().disabled
+			}, null)
+		]);
+	};
+}, {
+	name: "Slider",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"min",
+		"max",
+		"step",
+		"bigStep",
+		"orientation",
+		"disabled",
+		"readonly",
+		"size",
+		"tone",
+		"marks",
+		"valueText",
+		"name",
+		"onValueCommit",
+		"propsRoot",
+		"propsTrack",
+		"propsRange",
+		"propsMark",
+		"propsMarkLabel",
+		"id"
+	]
+});
+//#endregion
+export { Slider, sliderPositionStyles, sliderStyles };
+
+//# sourceMappingURL=Slider.js.map

package/dist/input/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/input/Slider.tsx"],"sourcesContent":["/**\n * 滑块：在一个范围里拖动选值（音量、进度、价格）。WAI-ARIA 的 Slider 模式：滑块是 role=\"slider\"，\n * 方向键 ±step，Page Up / Page Down ±bigStep，Home / End 到两端；从右到左排版时横向的方向键反过来。\n * 点击轨道任意位置直接跳过去并接着拖动。参考 Radix Slider、React Aria useSlider。\n *\n *   <Slider _value={volume} aria-label=\"音量\" />\n *   <Slider _value={price} min={0} max={1000} step={50} valueText={(v) => `${v} 元`} />\n *   <Slider _value={range} aria-label=\"价格\" marks={[0, { value: 500, label: '500' }, 1000]} />   范围：[低, 高]\n *\n * value 是数组 [低, 高] 时是范围选择：两个滑块各自可聚焦、可拖动，不能交叉；点击轨道移动离得近的那个。\n * 两个滑块的名称在 aria-label（或 Field 的标签）后面加上“最小值”“最大值”，取值范围互相限制（同 WAI-ARIA 多滑块）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { startMove } from '../utils/dom/move';\nimport { defaultLabelledBy, mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { toneFillStyles, type StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { clamp, snapToStep } from '../utils/data/number';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { useFieldControl } from '../form/Field';\nimport { FormValue } from '../form/FormValue';\nimport { t } from '../config/theme/tokens';\n\n/** 滑块方向 */\nexport interface SliderOrientations {\n  /** 横向（默认）：起始端是最小值 */\n  horizontal: unknown;\n  /** 纵向：底端是最小值；高度由使用方给，默认 10em */\n  vertical: unknown;\n}\n\n/** 单值，或范围 [低, 高] */\nexport type SliderValue = number | readonly [number, number];\n\n/** 轨道上的一个刻度 */\nexport interface SliderMark {\n  /** 刻度所在的值 */\n  value: number;\n  /** 刻度下方（纵向时右侧）的文字 */\n  label?: VNodeChild;\n}\n\n/** 角色、取值与可聚焦由组件管理 */\nexport type SliderManaged =\n  | 'role'\n  | 'tabindex'\n  | 'aria-valuemin'\n  | 'aria-valuemax'\n  | 'aria-valuenow'\n  | 'aria-valuetext'\n  | 'aria-orientation'\n  | 'aria-disabled';\n\n/** 未声明的属性落到滑块（role=\"slider\" 的主元素，范围时两个都有）上，名称写 aria-label；外层用 propsRoot */\nexport interface SliderProps<V extends SliderValue = number> extends PartProps<\n  'div',\n  SliderManaged\n> {\n  /** 当前值：父级写 _value={x} 双向绑定，拖动中实时写回；数组 [低, 高] 时是范围选择 */\n  _value?: V;\n  /** 最小值，默认 0 */\n  min?: number;\n  /** 最大值，默认 100 */\n  max?: number;\n  /** 步长，默认 1；取值总是对齐到 min + n × step */\n  step?: number;\n  /** Page Up / Page Down 的步长，默认为范围的十分之一（至少一个 step） */\n  bigStep?: number;\n  /** 方向，默认 horizontal */\n  orientation?: keyof SliderOrientations;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：滑块能聚焦、读屏念“只读”，拖动与方向键不改值（查看详情、审批时）；外观照常 */\n  readonly?: boolean;\n  /** 字号档位，滑块与轨道随之缩放；不写时继承 */\n  size?: TextSize;\n  /** 已选范围与滑块描边的色调（与 Button、Badge 等同一套），默认 accent */\n  tone?: StatusTone;\n  /** 刻度：数字或带文字的 { value, label }；有文字时滑块下方（纵向时右侧）留出位置 */\n  marks?: readonly (number | SliderMark)[];\n  /** 读屏念的取值文字（aria-valuetext），如 `(v) => \\`${v}%\\``；不写时念数字 */\n  valueText?: (value: number) => string;\n  /** 表单字段名：给了就带隐藏的 input（范围时两个同名），随表单提交 */\n  name?: string;\n  /** 一次操作结束（松开、按键）时的值：保存、发请求放在这里，不必每次移动都发 */\n  onValueCommit?: (value: V) => void;\n  /** 外层（轨道与滑块的容器）的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 轨道的部件属性 */\n  propsTrack?: PartProps<'div'>;\n  /** 已选范围（轨道上着色的部分）的部件属性；位置与长度由组件写 */\n  propsRange?: PartProps<'div'>;\n  /** 刻度点的部件属性 */\n  propsMark?: PartProps<'span'> | ((mark: SliderMark) => PartProps<'span'>);\n  /** 刻度文字的部件属性 */\n  propsMarkLabel?: PartProps<'span'> | ((mark: SliderMark) => PartProps<'span'>);\n}\n\n/** Slider 的样式：root、horizontal、vertical、disabled、readonly、track、range、thumb、mark、markLabel 等 */\nexport const sliderStyles = css.create({\n  root: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    // 触摸拖动不触发页面滚动\n    touchAction: 'none',\n    userSelect: 'none',\n    cursor: 'pointer',\n  },\n  // 点击区域至少 24px（WCAG 2.5.8）。滑块的中心对准取值，两端各留半个滑块的外边距：\n  // 滑块在最小、最大值时不伸出组件的盒子，不压到旁边的控件\n  horizontal: {\n    width: `calc(100% - ${t.space.lg} - ${t.space.xs})`,\n    marginInline: `calc((${t.space.lg} + ${t.space.xs}) / 2)`,\n    minHeight: '_minTarget',\n  },\n  vertical: {\n    flexDirection: 'column',\n    height: '10em',\n    marginBlock: `calc((${t.space.lg} + ${t.space.xs}) / 2)`,\n    minWidth: '_minTarget',\n  },\n  // 刻度文字放在轨道下方（纵向时右侧），给它留出位置\n  labelledHorizontal: { paddingBlockEnd: '1.5em' },\n  labelledVertical: { paddingInlineEnd: '3em' },\n  disabled: { opacity: '_disabled', cursor: 'not-allowed' },\n  readonly: { cursor: 'default' },\n  track: {\n    position: 'relative',\n    flexGrow: 1,\n    borderRadius: '_full',\n    backgroundColor: '_fill',\n    overflow: 'hidden',\n  },\n  trackHorizontal: { height: `calc(${t.space.xs} * 1.5)` },\n  trackVertical: { width: `calc(${t.space.xs} * 1.5)` },\n  range: { position: 'absolute', backgroundColor: 'var(--tone-fill)' },\n  rangeHorizontal: { insetBlock: 0 },\n  rangeVertical: { insetInline: 0 },\n  thumb: {\n    position: 'absolute',\n    boxSizing: 'border-box',\n    width: `calc(${t.space.lg} + ${t.space.xs})`,\n    height: `calc(${t.space.lg} + ${t.space.xs})`,\n    borderWidth: '_sm',\n    borderStyle: 'solid',\n    borderColor: 'var(--tone-fill)',\n    borderRadius: '_full',\n    backgroundColor: '_surface',\n    boxShadow: '_sm',\n    cursor: 'grab',\n  },\n  // 用逻辑方向的外边距把滑块的中心对准取值位置：从右到左排版时也对\n  thumbHorizontal: { marginInlineStart: `calc((${t.space.lg} + ${t.space.xs}) / -2)` },\n  thumbVertical: { marginBottom: `calc((${t.space.lg} + ${t.space.xs}) / -2)` },\n  // 轨道里的小圆点；在已选范围里时换成反色\n  mark: {\n    position: 'absolute',\n    width: '_space.xs',\n    height: '_space.xs',\n    borderRadius: '_full',\n    backgroundColor: '_borderStrong',\n    pointerEvents: 'none',\n  },\n  markHorizontal: { top: '50%', translate: { default: '-50% -50%', ':dir(rtl)': '50% -50%' } },\n  markVertical: { left: '50%', translate: '-50% 50%' },\n  markActive: { backgroundColor: 'var(--tone-on-fill)' },\n  markLabel: {\n    position: 'absolute',\n    fontSize: '_sm',\n    lineHeight: '_tight',\n    color: '_textMuted',\n    whiteSpace: 'nowrap',\n    pointerEvents: 'none',\n  },\n  markLabelHorizontal: {\n    top: `calc(50% + ${t.space.sm})`,\n    translate: { default: '-50% -0.75em', ':dir(rtl)': '50% -0.75em' },\n  },\n  markLabelVertical: { left: `calc(50% + ${t.space.md})`, translate: '0 50%' },\n});\n\n// 位置是任意值，用动态样式（编译为 CSS 变量）；单独一个 create，见 COMPONENTS.md §4\n/** Slider 的样式：inline（横向的起点）、size（横向的长度）、bottom、height（纵向） */\nexport const sliderPositionStyles = css.create({\n  inline: (percent: string) => ({ insetInlineStart: percent }),\n  width: (percent: string) => ({ width: percent }),\n  bottom: (percent: string) => ({ bottom: percent }),\n  height: (percent: string) => ({ height: percent }),\n});\n\n/** 滑块：在 min–max 之间按 step 拖动或用键盘选值；value 为 [低, 高] 时选一个范围 */\nexport const Slider = _component(\n  <V extends SliderValue = number>({\n    _value: value = _bindable<V>(0 as V),\n    min = 0,\n    max = 100,\n    step = 1,\n    bigStep,\n    orientation = 'horizontal',\n    disabled,\n    readonly,\n    size,\n    tone = 'accent',\n    marks,\n    valueText,\n    name,\n    onValueCommit,\n    propsRoot,\n    propsTrack,\n    propsRange,\n    propsMark,\n    propsMarkLabel,\n    id,\n    ...rest\n  }: SliderProps<V>) => {\n    const lang = useLang();\n    // 在 Field 里时：标签作为名称、关联说明与错误、沿用不可用与只读\n    const control = useFieldControl(() => ({ id, disabled, readonly }));\n    /** 不接受改值：不可用或只读 */\n    const off = () => control().disabled || control().readonly;\n    const labelId = useId();\n    let track = _state.raw<HTMLElement | null>(null);\n    const thumbs: (HTMLElement | null)[] = [null, null];\n\n    const isRange = () => Array.isArray(value);\n    /** 各滑块的值（单值时只有一个） */\n    const values = (): number[] => (Array.isArray(value) ? [...value] : [value as number]);\n    /** 夹在范围内并对齐到步长 */\n    const snap = (raw: number) => snapToStep(raw, step, min, max);\n    const rtl = () => orientation === 'horizontal' && !!track && isRtl(track);\n\n    /** 第 index 个滑块能取的范围：范围选择时不能越过另一个 */\n    function bounds(index: number): [number, number] {\n      if (!isRange()) return [min, max];\n      const [low, high] = values() as [number, number];\n      return index === 0 ? [min, high] : [low, max];\n    }\n\n    /** 改第 index 个滑块的值 */\n    function set(index: number, raw: number) {\n      const [lower, upper] = bounds(index);\n      const next = clamp(snap(raw), lower, upper);\n      if (!isRange()) {\n        value = next as V;\n        return;\n      }\n      const pair = values() as [number, number];\n      pair[index] = next;\n      value = pair as unknown as V;\n    }\n\n    /** 指针位置对应的值 */\n    function valueAt(clientX: number, clientY: number) {\n      const rect = track!.getBoundingClientRect();\n      let ratio =\n        orientation === 'vertical'\n          ? (rect.bottom - clientY) / rect.height\n          : (clientX - rect.left) / rect.width;\n      if (rtl()) ratio = 1 - ratio;\n      return snap(min + clamp(ratio, 0, 1) * (max - min));\n    }\n\n    /** 离 target 最近的滑块；两个重合时按方向选（往高处去的拿高的那个） */\n    function nearest(target: number) {\n      if (!isRange()) return 0;\n      const [low, high] = values() as [number, number];\n      if (low === high) return target > high ? 1 : 0;\n      return Math.abs(target - low) <= Math.abs(target - high) ? 0 : 1;\n    }\n\n    function grab(event: PointerEvent) {\n      if (off() || event.button !== 0 || !track) return;\n      // 不让浏览器把焦点放到别处、开始选中文字；焦点交给滑块，键盘接着可以微调\n      event.preventDefault();\n      const target = valueAt(event.clientX, event.clientY);\n      const index = nearest(target);\n      thumbs[index]?.focus();\n      set(index, target);\n      startMove(event, {\n        onMove: ({ clientX, clientY }) => set(index, valueAt(clientX, clientY)),\n        onEnd: () => onValueCommit?.(value),\n      });\n    }\n\n    function onKeydown(index: number, event: KeyboardEvent) {\n      if (off()) return;\n      const current = values()[index]!;\n      const big = bigStep ?? Math.max(step, (max - min) / 10);\n      // 从右到左排版时，横向的左右键反过来（右边是起点）\n      const { forward, backward } = inlineArrows(rtl());\n      const [lower, upper] = bounds(index);\n      const next: Record<string, number> = {\n        [forward]: current + step,\n        ArrowUp: current + step,\n        [backward]: current - step,\n        ArrowDown: current - step,\n        PageUp: current + big,\n        PageDown: current - big,\n        Home: lower,\n        End: upper,\n      };\n      if (!(event.key in next)) return;\n      event.preventDefault();\n      set(index, next[event.key]!);\n      onValueCommit?.(value);\n    }\n\n    const percentOf = (number: number) =>\n      max > min ? ((clamp(number, min, max) - min) / (max - min)) * 100 : 0;\n\n    return () => {\n      const vertical = orientation === 'vertical';\n      const field = control();\n      const range = isRange();\n      // 父级传入超出范围的值时按范围内显示（不改父级的值），滑块不会跑出轨道\n      const shown = values().map((number) => clamp(number, min, max));\n      const [start, end] = range\n        ? [percentOf(shown[0]!), percentOf(shown[1]!)]\n        : [0, percentOf(shown[0]!)];\n      const normalized = (marks ?? []).map((mark) =>\n        typeof mark === 'number' ? { value: mark } : mark,\n      );\n      const labelled = normalized.some((mark) => mark.label != null);\n      const position = (percent: number) =>\n        vertical\n          ? sliderPositionStyles.bottom(`${percent}%`)\n          : sliderPositionStyles.inline(`${percent}%`);\n\n      const renderThumb = (number: number, index: number) => {\n        const [lower, upper] = bounds(index);\n        const part = range ? (index === 0 ? lang.sliderMin : lang.sliderMax) : undefined;\n        const ownLabel = rest['aria-label'];\n        // 范围时每个滑块的名称后面加“最小值 / 最大值”：有 aria-label 时拼在一起，用 Field 的标签时连上隐藏的文字\n        const labelledBy = defaultLabelledBy(rest, field.labelledBy);\n        return (\n          <div\n            key={index}\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  sliderStyles.thumb,\n                  focusRingStyles.visible,\n                  vertical ? sliderStyles.thumbVertical : sliderStyles.thumbHorizontal,\n                  position(percentOf(number)),\n                ],\n              },\n              rest,\n              {\n                ref: (element: unknown) => (thumbs[index] = element as HTMLElement | null),\n                role: 'slider',\n                id: index === 0 ? field.id : undefined,\n                tabindex: field.disabled ? undefined : 0,\n                'aria-valuemin': lower,\n                'aria-valuemax': upper,\n                'aria-valuenow': number,\n                'aria-valuetext': valueText?.(number),\n                'aria-orientation': orientation,\n                'aria-disabled': field.disabled || undefined,\n                'aria-readonly': field.readonly || undefined,\n                'aria-label': part && ownLabel != null ? `${ownLabel} ${part}` : ownLabel,\n                'aria-labelledby':\n                  part && labelledBy ? `${labelledBy} ${labelId}-${index}` : labelledBy,\n                'aria-describedby': field.describedBy,\n                'aria-invalid': field.invalid || undefined,\n                onKeydown: (event: KeyboardEvent) => onKeydown(index, event),\n              },\n            )}\n            data-index={range ? index : undefined}\n          >\n            {part && labelledBy && (\n              <VisuallyHidden id={`${labelId}-${index}`}>{part}</VisuallyHidden>\n            )}\n          </div>\n        );\n      };\n\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                sliderStyles.root,\n                vertical ? sliderStyles.vertical : sliderStyles.horizontal,\n                labelled &&\n                  (vertical ? sliderStyles.labelledVertical : sliderStyles.labelledHorizontal),\n                toneFillStyles[tone],\n                size && fontSizeStyles[size],\n              ],\n            },\n            propsRoot,\n            {\n              sx: [\n                field.readonly && sliderStyles.readonly,\n                field.disabled && sliderStyles.disabled,\n              ],\n              onPointerdown: grab,\n            },\n          )}\n          data-disabled={field.disabled || undefined}\n          data-readonly={field.readonly || undefined}\n          data-orientation={orientation}\n          data-range={range || undefined}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  sliderStyles.track,\n                  vertical ? sliderStyles.trackVertical : sliderStyles.trackHorizontal,\n                ],\n              },\n              propsTrack,\n              { ref: _toRef(track) },\n            )}\n          >\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    sliderStyles.range,\n                    vertical ? sliderStyles.rangeVertical : sliderStyles.rangeHorizontal,\n                  ],\n                },\n                propsRange,\n                {\n                  sx: [\n                    position(start),\n                    vertical\n                      ? sliderPositionStyles.height(`${end - start}%`)\n                      : sliderPositionStyles.width(`${end - start}%`),\n                  ],\n                },\n              )}\n            />\n            {normalized.map((mark) => {\n              const percent = percentOf(mark.value);\n              const own = typeof propsMark === 'function' ? propsMark(mark) : propsMark;\n              return (\n                <span\n                  key={mark.value}\n                  {...mergeAttrs<'span'>(\n                    {\n                      sx: [\n                        sliderStyles.mark,\n                        vertical ? sliderStyles.markVertical : sliderStyles.markHorizontal,\n                        percent >= start && percent <= end && sliderStyles.markActive,\n                      ],\n                    },\n                    own,\n                    { sx: position(percent) },\n                  )}\n                />\n              );\n            })}\n          </div>\n          {shown.map(renderThumb)}\n          {normalized.map((mark) => {\n            if (mark.label == null) return null;\n            const own =\n              typeof propsMarkLabel === 'function' ? propsMarkLabel(mark) : propsMarkLabel;\n            return (\n              <span\n                key={mark.value}\n                {...mergeAttrs<'span'>(\n                  {\n                    sx: [\n                      sliderStyles.markLabel,\n                      vertical ? sliderStyles.markLabelVertical : sliderStyles.markLabelHorizontal,\n                    ],\n                  },\n                  own,\n                  { sx: position(percentOf(mark.value)), 'aria-hidden': true },\n                )}\n              >\n                {mark.label}\n              </span>\n            );\n          })}\n          <FormValue name={name} value={range ? shown : shown[0]} disabled={control().disabled} />\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/Switch.d.ts

@@ -0,0 +1,63 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type SpinnerProps } from '../base/Spinner';
+import { type PartProps } from '../utils/props';
+import type { StatusTone } from '../utils/style/tone-styles';
+import type { TextSize } from '../utils/style/typography';
+/** 角色、勾选状态与可用性由组件管理；原生的 size 属性让给字号档位 */
+export type SwitchManaged = 'type' | 'role' | 'checked' | 'disabled' | 'required' | 'size' | 'aria-invalid' | 'aria-describedby' | 'aria-busy';
+/** 未声明的属性落到 input 上；外层 label 用 propsRoot */
+export interface SwitchProps extends PartProps<'input', SwitchManaged> {
+    /** 是否打开：父级写 _checked={x} */
+    _checked?: boolean;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读：能聚焦、读屏念“只读”，不能切换（查看详情、审批时）；外观照常 */
+    readonly?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 切换中（如等接口返回）：滑块里显示加载指示，点击无效，带 aria-busy */
+    loading?: boolean;
+    /** 打开时轨道里的文字或图标（如“开”、对勾）；给了它或 uncheckedContent 时轨道随内容加宽 */
+    checkedContent?: VNodeChild;
+    /** 关闭时轨道里的文字或图标 */
+    uncheckedContent?: VNodeChild;
+    /** 字号档位；不写时继承上下文字号 */
+    size?: TextSize;
+    /** 打开时轨道的色调（与 Button、Badge 等同一套），默认 accent；可以用 defaults.Choice 统一改 */
+    tone?: StatusTone;
+    /** 外层 label 的部件属性 */
+    propsRoot?: PartProps<'label'>;
+    /** 叠放层的部件属性 */
+    propsControl?: PartProps<'span'>;
+    /** 滑块的部件属性 */
+    propsThumb?: PartProps<'span'>;
+    /** 轨道里文字（开、关两份）的部件属性 */
+    propsContent?: PartProps<'span'>;
+    /** 轨道里文字的内层（定字号、字重）的部件属性；改字号写这里，外层的内边距才仍按开关的字号算 */
+    propsContentText?: PartProps<'span'>;
+    /** 加载指示的部件属性 */
+    propsSpinner?: Partial<SpinnerProps>;
+    /** 文字的部件属性 */
+    propsLabel?: PartProps<'span'>;
+    /** 文字 */
+    children?: VNodeChild;
+}
+/** Switch 的样式：track、trackWide、trackOff、thumb、thumbOn、content、contentOn、contentOff、contentHidden、contentText、spinner */
+export declare const switchStyles: Readonly<{
+    content: css.CompiledStyles;
+    contentHidden: css.CompiledStyles;
+    contentOff: css.CompiledStyles;
+    contentOn: css.CompiledStyles;
+    contentText: css.CompiledStyles;
+    spinner: css.CompiledStyles;
+    thumb: css.CompiledStyles;
+    thumbOn: css.CompiledStyles;
+    track: css.CompiledStyles;
+    trackOff: css.CompiledStyles;
+    trackWide: css.CompiledStyles;
+}>;
+/** 开关：立即生效的开 / 关 */
+export declare const Switch: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SwitchProps>;