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

package/dist/input/Radio.js

@@ -0,0 +1,211 @@
+import { t } from "../config/theme/tokens.js";
+import { defaultLabelledBy, hasContent, mergeAttrs } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { useRecipe } from "../config/styles.js";
+import { useFieldControl } from "../form/Field.js";
+import { toListboxOption } from "./list-state.js";
+import { choiceInputStyles, choiceParts, choiceRecipe, readonlyChoiceHandlers, syncChecked, useChoiceAppearance } from "./choice-styles.js";
+import { createVNode, mergeProps, useId } from "vue";
+import { _component, bindable, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/Radio.tsx
+/** RadioGroup 交给组内 Radio 的状态 */
+/** RadioGroup 的上下文：自定义的单选项可以 inject 它接入组 */
+var RadioGroupContext = createContext("RadioGroup");
+/** 未声明的属性落到 div（role="radiogroup"）上 */
+/** RadioGroup 的属性：items 是 ListboxOption、字符串时不用 toOption */
+/** 单选组：value 是选中项的值 */
+var RadioGroup = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const name = readonlyProp(_props, "name");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const size = readonlyProp(_props, "size");
+	const tone = readonlyProp(_props, "tone");
+	const orientation = readonlyProp(_props, "orientation", "vertical");
+	const id = readonlyProp(_props, "id");
+	const items = readonlyProp(_props, "items");
+	const toOption = readonlyProp(_props, "toOption");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const generatedName = useId();
+	const control = useFieldControl(() => ({
+		id: id.value,
+		disabled: disabled.value,
+		readonly: readonly.value,
+		required: required.value,
+		invalid: invalid.value
+	}));
+	const appearance = useChoiceAppearance(() => ({
+		size: size.value,
+		tone: tone.value
+	}));
+	RadioGroupContext.provide({
+		get value() {
+			return value.value;
+		},
+		get name() {
+			return name.value ?? generatedName;
+		},
+		get disabled() {
+			return control().disabled;
+		},
+		get readonly() {
+			return control().readonly;
+		},
+		get required() {
+			return control().required;
+		},
+		get invalid() {
+			return control().invalid;
+		},
+		get size() {
+			return appearance().size;
+		},
+		get tone() {
+			return appearance().tone;
+		},
+		select: (next) => value.value = next
+	});
+	return () => {
+		const state = control();
+		return createVNode("div", mergeProps(mergeAttrs(appearance().recipe({ orientation: orientation.value }).group, rest, {
+			id: state.id,
+			role: "radiogroup",
+			"aria-labelledby": defaultLabelledBy(rest, state.labelledBy),
+			"aria-describedby": state.describedBy,
+			"aria-invalid": state.invalid || void 0,
+			"aria-required": state.required || void 0,
+			"aria-readonly": state.readonly || void 0
+		}), {
+			"data-orientation": orientation.value,
+			"data-disabled": state.disabled || void 0,
+			"data-readonly": state.readonly || void 0
+		}), [children.value ?? items.value?.map((item) => {
+			const option = toListboxOption(item, toOption.value);
+			return createVNode(Radio, {
+				"key": option.value,
+				"value": option.value,
+				"disabled": option.disabled || void 0,
+				"description": option.description
+			}, { default: () => [option.label] });
+		})]);
+	};
+}, {
+	name: "RadioGroup",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"name",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"size",
+		"tone",
+		"orientation",
+		"id",
+		"items",
+		"toOption"
+	]
+});
+/** 选中、名称与可用性由组管理 */
+/** 未声明的属性落到 input 上；外层 label 用 propsRoot */
+/** RadioGroup、Radio 的样式：circle、dot、dotChecked */
+var radioStyles = css.create({
+	circle: {
+		width: "1.125em",
+		height: "1.125em",
+		borderRadius: "_full"
+	},
+	dot: {
+		width: "0.45em",
+		height: "0.45em",
+		borderRadius: "_full",
+		backgroundColor: "var(--tone-on-fill)",
+		transform: "scale(0)",
+		transition: `transform ${t.durations.sm} ${t.easings.standard}`
+	},
+	dotChecked: { transform: "none" }
+});
+/** 单选项：放在 RadioGroup 里 */
+var Radio = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const value = readonlyProp(_props2, "value");
+	const disabled = readonlyProp(_props2, "disabled");
+	const propsRoot = readonlyProp(_props2, "propsRoot");
+	const propsControl = readonlyProp(_props2, "propsControl");
+	const propsIndicator = readonlyProp(_props2, "propsIndicator");
+	const propsLabel = readonlyProp(_props2, "propsLabel");
+	const description = readonlyProp(_props2, "description");
+	const propsDescription = readonlyProp(_props2, "propsDescription");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const group = RadioGroupContext.inject();
+	const descriptionId = `${useId()}-description`;
+	const recipe = useRecipe(choiceRecipe);
+	return () => {
+		const checked = group.value === value.value;
+		const off = disabled.value ?? group.disabled;
+		const s = choiceParts({
+			size: group.size,
+			tone: group.tone,
+			recipe
+		}, {
+			disabled: off,
+			readonly: group.readonly
+		});
+		return createVNode("label", mergeProps(mergeAttrs(s.root, propsRoot.value), {
+			"data-state": checked ? "checked" : "unchecked",
+			"data-disabled": off || void 0,
+			"data-readonly": group.readonly || void 0
+		}), [createVNode("span", mergeAttrs(s.control, propsControl.value), [createVNode("input", mergeAttrs({
+			...s.input,
+			sx: [
+				s.input.sx,
+				focusRingStyles.tight,
+				radioStyles.circle,
+				checked && choiceInputStyles.checked,
+				group.invalid && choiceInputStyles.invalid
+			]
+		}, rest, {
+			type: "radio",
+			name: group.name,
+			value: value.value,
+			checked,
+			disabled: off,
+			required: group.required,
+			"aria-describedby": hasContent(description.value) ? descriptionId : void 0,
+			onChange: (event) => {
+				group.select(value.value);
+				const radios = event.target.closest("[role=\"radiogroup\"]")?.querySelectorAll("input[type=\"radio\"]");
+				syncChecked([...radios ?? []], (input) => input.value === group.value);
+			},
+			...group.readonly && readonlyChoiceHandlers
+		}), null), createVNode("span", mergeAttrs({
+			...s.indicator,
+			sx: [
+				s.indicator.sx,
+				radioStyles.dot,
+				checked && radioStyles.dotChecked
+			]
+		}, propsIndicator.value), null)]), (hasContent(children.value) || hasContent(description.value)) && createVNode("span", mergeAttrs(s.label, propsLabel.value), [children.value, hasContent(description.value) && createVNode("span", mergeAttrs(s.description, propsDescription.value, { id: descriptionId }), [description.value])])]);
+	};
+}, {
+	name: "Radio",
+	props: [
+		"value",
+		"disabled",
+		"propsRoot",
+		"propsControl",
+		"propsIndicator",
+		"propsLabel",
+		"description",
+		"propsDescription"
+	]
+});
+//#endregion
+export { Radio, RadioGroup, RadioGroupContext, radioStyles };
+
+//# sourceMappingURL=Radio.js.map

package/dist/input/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/input/Radio.tsx"],"sourcesContent":["/**\n * 单选组（role=\"radiogroup\"）与单选项（原生 input type=\"radio\"）。结构与样式见 choice-styles.ts。\n *\n *   <Field label=\"配送方式\">\n *     <RadioGroup _value={shipping}>\n *       <Radio value=\"express\">快递</Radio>\n *       <Radio value=\"pickup\">自提</Radio>\n *     </RadioGroup>\n *   </Field>\n *\n * 同一组的原生 radio 共用一个 name：Tab 只停在选中项（没有选中时停在第一项），方向键在组内移动并选中，\n * 这些都是浏览器的原生行为，不需要漫游焦点。组以 Field 的标签为名称（aria-labelledby），关联说明与错误。\n *\n * 部件（Radio）：Root（label）、Control（叠放层）、Indicator（圆点）、Label（文字）；未声明的属性落到 input 上。\n */\nimport { createContext, _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 { useFieldControl } from '../form/Field';\nimport { toListboxOption, type ListboxOption, type OptionMapping } from './list-state';\nimport { hasContent, defaultLabelledBy, mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport type { TextSize } from '../utils/style/typography';\nimport { useRecipe } from '../config/styles';\nimport {\n  choiceInputStyles,\n  choiceParts,\n  choiceRecipe,\n  useChoiceAppearance,\n  type ChoiceOrientations,\n  readonlyChoiceHandlers,\n  syncChecked,\n} from './choice-styles';\nimport { t } from '../config/theme/tokens';\n\n/** RadioGroup 交给组内 Radio 的状态 */\nexport interface RadioGroupState {\n  /** 选中的值 */\n  readonly value: string | null;\n  /** 原生单选框的 name：同组共用，方向键在组内移动 */\n  readonly name: string;\n  /** 整组不可用 */\n  readonly disabled: boolean;\n  /** 整组只读 */\n  readonly readonly: boolean;\n  /** 必填 */\n  readonly required: boolean;\n  /** 整组校验未通过 */\n  readonly invalid: boolean;\n  /** 字号档位；不写时继承 */\n  readonly size: TextSize | undefined;\n  /** 选中时的色调 */\n  readonly tone: StatusTone;\n  /** 选中一个值 */\n  select(value: string): void;\n}\n\n/** RadioGroup 的上下文：自定义的单选项可以 inject 它接入组 */\nexport const RadioGroupContext = createContext<RadioGroupState>('RadioGroup');\n\n/** 未声明的属性落到 div（role=\"radiogroup\"）上 */\nexport interface RadioGroupBaseProps<T> extends PartProps<'div', 'role'> {\n  /** 选中项的值：父级写 _value={x}；没有选中时是 null */\n  _value?: string | null;\n  /** 表单提交时的 name；不写时自动生成（同组的 radio 要共用一个 name 才互斥） */\n  name?: string;\n  /** 整组不可用 */\n  disabled?: boolean;\n  /** 整组只读：能聚焦、读屏念“只读”，选中项不能改（查看详情、审批时）；外观照常 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 字号档位；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 选中时的色调（与 Button、Badge 等同一套），默认 accent；可以用 defaults.Choice 统一改 */\n  tone?: StatusTone;\n  /** 排列方向，默认 vertical */\n  orientation?: keyof ChoiceOrientations;\n  /** 各项：ListboxOption（值、文字、说明、不可用）、字符串，或任意数据加 toOption；写了 children 时不用 */\n  items?: readonly T[];\n  /** Radio；不写时按 items 生成 */\n  children?: VNodeChild;\n}\n\n/** RadioGroup 的属性：items 是 ListboxOption、字符串时不用 toOption */\nexport type RadioGroupProps<T = ListboxOption> = RadioGroupBaseProps<T> & OptionMapping<T>;\n\n/** 单选组：value 是选中项的值 */\nexport const RadioGroup = _component(\n  <T = ListboxOption,>({\n    _value: value = _bindable<string | null>(null),\n    name,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    size,\n    tone,\n    orientation = 'vertical',\n    id,\n    items,\n    toOption,\n    children,\n    ...rest\n  }: RadioGroupProps<T>) => {\n    const generatedName = useId();\n    const control = useFieldControl(() => ({ id, disabled, readonly, required, invalid }));\n    const appearance = useChoiceAppearance(() => ({ size, tone }));\n    RadioGroupContext.provide({\n      get value() {\n        return value;\n      },\n      get name() {\n        return name ?? generatedName;\n      },\n      get disabled() {\n        return control().disabled;\n      },\n      get readonly() {\n        return control().readonly;\n      },\n      get required() {\n        return control().required;\n      },\n      get invalid() {\n        return control().invalid;\n      },\n      get size() {\n        return appearance().size;\n      },\n      get tone() {\n        return appearance().tone;\n      },\n      select: (next) => (value = next),\n    });\n\n    return () => {\n      const state = control();\n      return (\n        <div\n          {...mergeAttrs<'div'>(appearance().recipe({ orientation }).group, rest, {\n            id: state.id,\n            role: 'radiogroup',\n            'aria-labelledby': defaultLabelledBy(rest, state.labelledBy),\n            'aria-describedby': state.describedBy,\n            'aria-invalid': state.invalid || undefined,\n            'aria-required': state.required || undefined,\n            'aria-readonly': state.readonly || undefined,\n          })}\n          data-orientation={orientation}\n          data-disabled={state.disabled || undefined}\n          data-readonly={state.readonly || undefined}\n        >\n          {children ??\n            items?.map((item) => {\n              const option = toListboxOption(item, toOption);\n              return (\n                <Radio\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled || undefined}\n                  description={option.description}\n                >\n                  {option.label}\n                </Radio>\n              );\n            })}\n        </div>\n      );\n    };\n  },\n);\n\n/** 选中、名称与可用性由组管理 */\nexport type RadioManaged = 'type' | 'name' | 'checked' | 'required' | 'size' | 'value';\n\n/** 未声明的属性落到 input 上；外层 label 用 propsRoot */\nexport interface RadioProps extends PartProps<'input', RadioManaged> {\n  /** 这一项的值 */\n  value: string;\n  /** 这一项不可用 */\n  disabled?: boolean;\n  /** 外层 label 的部件属性 */\n  propsRoot?: PartProps<'label'>;\n  /** 叠放层的部件属性 */\n  propsControl?: PartProps<'span'>;\n  /** 圆点的部件属性 */\n  propsIndicator?: PartProps<'span'>;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 文字下方的说明（aria-describedby） */\n  description?: VNodeChild;\n  /** 说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 文字 */\n  children?: VNodeChild;\n}\n\n/** RadioGroup、Radio 的样式：circle、dot、dotChecked */\nexport const radioStyles = css.create({\n  circle: { width: '1.125em', height: '1.125em', borderRadius: '_full' },\n  dot: {\n    width: '0.45em',\n    height: '0.45em',\n    borderRadius: '_full',\n    backgroundColor: 'var(--tone-on-fill)',\n    transform: 'scale(0)',\n    transition: `transform ${t.durations.sm} ${t.easings.standard}`,\n  },\n  dotChecked: { transform: 'none' },\n});\n\n/** 单选项：放在 RadioGroup 里 */\nexport const Radio = _component(\n  ({\n    value,\n    disabled,\n    propsRoot,\n    propsControl,\n    propsIndicator,\n    propsLabel,\n    description,\n    propsDescription,\n    children,\n    ...rest\n  }: RadioProps) => {\n    const group = RadioGroupContext.inject();\n    const descriptionId = `${useId()}-description`;\n    const recipe = useRecipe(choiceRecipe);\n    return () => {\n      const checked = group.value === value;\n      const off = disabled ?? group.disabled;\n      const s = choiceParts(\n        { size: group.size, tone: group.tone, recipe },\n        { disabled: off, readonly: group.readonly },\n      );\n      return (\n        <label\n          {...mergeAttrs<'label'>(s.root, propsRoot)}\n          data-state={checked ? 'checked' : 'unchecked'}\n          data-disabled={off || undefined}\n          data-readonly={group.readonly || undefined}\n        >\n          <span {...mergeAttrs<'span'>(s.control, propsControl)}>\n            <input\n              {...mergeAttrs<'input'>(\n                {\n                  ...s.input,\n                  sx: [\n                    s.input.sx,\n                    focusRingStyles.tight,\n                    radioStyles.circle,\n                    checked && choiceInputStyles.checked,\n                    group.invalid && choiceInputStyles.invalid,\n                  ],\n                },\n                rest,\n                {\n                  type: 'radio',\n                  name: group.name,\n                  value,\n                  checked,\n                  disabled: off,\n                  required: group.required,\n                  'aria-describedby': hasContent(description) ? descriptionId : undefined,\n                  onChange: (event: Event) => {\n                    group.select(value);\n                    // 浏览器已经取消了同组原来选中的那个：整组一起对回父级的值\n                    const radios = (event.target as HTMLElement)\n                      .closest('[role=\"radiogroup\"]')\n                      ?.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]');\n                    syncChecked([...(radios ?? [])], (input) => input.value === group.value);\n                  },\n                  ...(group.readonly && readonlyChoiceHandlers),\n                },\n              )}\n            />\n            <span\n              {...mergeAttrs<'span'>(\n                {\n                  ...s.indicator,\n                  sx: [s.indicator.sx, radioStyles.dot, checked && radioStyles.dotChecked],\n                },\n                propsIndicator,\n              )}\n            />\n          </span>\n          {(hasContent(children) || hasContent(description)) && (\n            <span {...mergeAttrs<'span'>(s.label, propsLabel)}>\n              {children}\n              {hasContent(description) && (\n                <span\n                  {...mergeAttrs<'span'>(s.description, propsDescription, {\n                    id: descriptionId,\n                  })}\n                >\n                  {description}\n                </span>\n              )}\n            </span>\n          )}\n        </label>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/Rating.d.ts

@@ -0,0 +1,62 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type IconData } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+import type { StatusTone } from '../utils/style/tone-styles';
+/** 角色由组件管理 */
+export type RatingManaged = 'role';
+/** 未声明的属性落到外层 div 上；名称写 aria-label，或放在 Field 里 */
+export interface RatingProps extends PartProps<'div', RatingManaged> {
+    /** 分数：父级写 _value={score}；没有评分时是 null */
+    _value?: number | null;
+    /** 一共几颗星，默认 5 */
+    count?: number;
+    /** 可以选半颗 */
+    allowHalf?: boolean;
+    /** 再点一次已选的分数时清空，默认 true */
+    clearable?: boolean;
+    /** 图标，默认星星 */
+    icon?: IconData;
+    /** 选中的颜色，默认 warning（金黄） */
+    tone?: StatusTone;
+    /** 字号档位：图标随之缩放 */
+    size?: TextSize;
+    /** 只读：只显示分数（一个 role="img"） */
+    readonly?: boolean;
+    /** 不可用（不写时取 Field 的） */
+    disabled?: boolean;
+    /** 表单提交时的 name */
+    name?: string;
+    /** 每颗星的部件属性 */
+    propsStar?: PartProps<'span'>;
+}
+/** Rating 的样式：root、star、readonly、icon、empty、fill、clip、clipIcon、whole、startHalf、endHalf、disabled */
+export declare const ratingStyles: Readonly<{
+    clip: css.CompiledStyles;
+    clipIcon: css.CompiledStyles;
+    disabled: css.CompiledStyles;
+    empty: css.CompiledStyles;
+    endHalf: css.CompiledStyles;
+    fill: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    readonly: css.CompiledStyles;
+    root: css.CompiledStyles;
+    star: css.CompiledStyles;
+    startHalf: css.CompiledStyles;
+    whole: css.CompiledStyles;
+}>;
+/** Rating 的颜色：neutral、accent、info、success、warning、danger */
+export declare const ratingToneStyles: Readonly<{
+    accent: css.CompiledStyles;
+    danger: css.CompiledStyles;
+    info: css.CompiledStyles;
+    neutral: css.CompiledStyles;
+    success: css.CompiledStyles;
+    warning: css.CompiledStyles;
+}>;
+/** 填色那层的宽度 */
+export declare const ratingClipStyles: Readonly<{
+    readonly width: (percent: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 评分：一排可以点的星 */
+export declare const Rating: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<RatingProps>;

package/dist/input/Rating.js

@@ -0,0 +1,225 @@
+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 { Icon } from "../base/Icon.js";
+import { visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { useFieldControl } from "../form/Field.js";
+import { createVNode, mergeProps, ref, 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";
+import { Star } from "@lucide/icons";
+//#region src/input/Rating.tsx
+/**
+* 评分：几颗星（或别的图标）里选一个分数，供应商评价、满意度、优先级。可以半星，可以只读显示。
+*
+*   <Field label="交付质量"><Rating _value={score} /></Field>
+*   <Rating value={4.5} readonly />                         只读：一个 role="img"，读“4.5 星，满分 5 星”
+*   <Rating _value={score} allowHalf count={10} icon={Heart} tone="danger" />
+*
+* 可编辑时是单选组（role="radiogroup"）：每颗星是一个原生 radio（视觉上隐藏），方向键、表单提交、读屏都是原生的；
+* 名称是“3 星”这样的文字（lang.ratingStar）。指针悬停时预览将要选的分数；再点一次已选的分数清空（clearable，默认开）。
+* 半星：每颗星左右各一半，各是一个 radio。部件：Root（div）、Star（span，每颗星）、Icon。
+*/
+/** 角色由组件管理 */
+/** 未声明的属性落到外层 div 上；名称写 aria-label，或放在 Field 里 */
+/** Rating 的样式：root、star、readonly、icon、empty、fill、clip、clipIcon、whole、startHalf、endHalf、disabled */
+var ratingStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.15em",
+		lineHeight: 1
+	},
+	star: {
+		position: "relative",
+		display: "inline-grid",
+		width: "1.35em",
+		height: "1.35em",
+		borderRadius: "_sm",
+		cursor: "pointer",
+		transition: `scale ${t.durations.sm} ${t.easings.standard}`,
+		scale: {
+			default: null,
+			":hover": "1.12"
+		}
+	},
+	readonly: {
+		cursor: "default",
+		scale: null
+	},
+	icon: {
+		gridArea: "1 / 1",
+		width: "100%",
+		height: "100%"
+	},
+	empty: { color: "_borderStrong" },
+	fill: { fill: "currentColor" },
+	clip: {
+		gridArea: "1 / 1",
+		overflow: "hidden",
+		pointerEvents: "none"
+	},
+	clipIcon: {
+		display: "block",
+		width: "1.35em",
+		height: "1.35em",
+		maxWidth: "none"
+	},
+	whole: {
+		position: "absolute",
+		inset: 0
+	},
+	startHalf: {
+		position: "absolute",
+		insetBlock: 0,
+		insetInlineStart: 0,
+		width: "50%"
+	},
+	endHalf: {
+		position: "absolute",
+		insetBlock: 0,
+		insetInlineEnd: 0,
+		width: "50%"
+	},
+	disabled: {
+		opacity: "_disabled",
+		cursor: "not-allowed"
+	}
+});
+/** Rating 的颜色：neutral、accent、info、success、warning、danger */
+var ratingToneStyles = css.create({
+	neutral: { color: {
+		default: "_textMuted",
+		"@media (forced-colors: active)": "Highlight"
+	} },
+	accent: { color: {
+		default: "_accent",
+		"@media (forced-colors: active)": "Highlight"
+	} },
+	info: { color: {
+		default: "_info",
+		"@media (forced-colors: active)": "Highlight"
+	} },
+	success: { color: {
+		default: "_success",
+		"@media (forced-colors: active)": "Highlight"
+	} },
+	warning: { color: {
+		default: "_warning",
+		"@media (forced-colors: active)": "Highlight"
+	} },
+	danger: { color: {
+		default: "_danger",
+		"@media (forced-colors: active)": "Highlight"
+	} }
+});
+/** 填色那层的宽度 */
+var ratingClipStyles = css.create({ width: (percent) => ({ width: percent }) });
+/** 评分：一排可以点的星 */
+var Rating = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const count = readonlyProp(_props, "count", 5);
+	const allowHalf = readonlyProp(_props, "allowHalf", false);
+	const clearable = readonlyProp(_props, "clearable", true);
+	const icon = readonlyProp(_props, "icon", () => Star);
+	const tone = readonlyProp(_props, "tone", "warning");
+	const size = readonlyProp(_props, "size");
+	const readonly = readonlyProp(_props, "readonly");
+	const disabled = readonlyProp(_props, "disabled");
+	const name = readonlyProp(_props, "name");
+	const id = readonlyProp(_props, "id");
+	const propsStar = readonlyProp(_props, "propsStar");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const generatedName = useId();
+	const control = useFieldControl(() => ({
+		id: id.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	let hover = ref(null);
+	/** 第 index 颗星（从 1 开始）填了多少：0、50、100 */
+	const filled = (shown, index) => shown == null ? 0 : shown >= index ? 100 : shown >= index - .5 ? 50 : 0;
+	function pick(next) {
+		value.value = clearable.value && value.value === next ? null : next;
+		hover.value = null;
+	}
+	const starIcon = (percent) => [createVNode(Icon, {
+		"icon": icon.value,
+		"sx": _cache[0] || (_cache[0] = [ratingStyles.icon, ratingStyles.empty])
+	}, null), percent > 0 && createVNode("span", css.attrs(ratingStyles.clip, ratingClipStyles.width(`${percent}%`)), [createVNode(Icon, {
+		"icon": icon.value,
+		"sx": [
+			ratingStyles.clipIcon,
+			ratingStyles.fill,
+			ratingToneStyles[tone.value]
+		]
+	}, null)])];
+	return () => {
+		const state = control();
+		const stars = Array.from({ length: count.value }, (_, index) => index + 1);
+		if (state.readonly) return createVNode("div", mergeAttrs({
+			sx: [ratingStyles.root, size.value && fontSizeStyles[size.value]],
+			"aria-labelledby": defaultLabelledBy(rest, state.labelledBy)
+		}, rest, {
+			id: state.id,
+			role: "img",
+			"aria-label": lang.ratingSummary(value.value, count.value)
+		}), [stars.map((index) => createVNode("span", mergeProps({
+			"key": index,
+			"aria-hidden": "true"
+		}, mergeAttrs({ sx: [ratingStyles.star, ratingStyles.readonly] }, propsStar.value)), [starIcon(filled(value.value, index))]))]);
+		const shown = hover.value ?? value.value;
+		const radio = (score, sx) => createVNode("label", mergeProps(css.attrs(sx), { "onPointerenter": () => hover.value = score }), [createVNode("input", mergeProps({
+			"type": "radio",
+			"name": name.value ?? generatedName,
+			"value": String(score),
+			"checked": value.value === score,
+			"disabled": state.disabled,
+			"aria-label": lang.ratingStar(score),
+			"onClick": () => pick(score)
+		}, css.attrs(visuallyHiddenStyles.hidden)), null)]);
+		return createVNode("div", mergeAttrs({
+			sx: [
+				ratingStyles.root,
+				size.value && fontSizeStyles[size.value],
+				state.disabled && ratingStyles.disabled
+			],
+			"aria-labelledby": defaultLabelledBy(rest, state.labelledBy)
+		}, rest, {
+			id: state.id,
+			role: "radiogroup",
+			"aria-describedby": state.describedBy,
+			"aria-disabled": state.disabled || void 0,
+			onPointerleave: () => hover.value = null
+		}), [stars.map((index) => createVNode("span", mergeProps({ "key": index }, mergeAttrs({ sx: [ratingStyles.star, focusRingStyles.within] }, propsStar.value), { "data-state": filled(value.value, index) === 100 ? "full" : filled(value.value, index) ? "half" : "empty" }), [
+			starIcon(filled(shown, index)),
+			allowHalf.value && radio(index - .5, ratingStyles.startHalf),
+			radio(index, allowHalf.value ? ratingStyles.endHalf : ratingStyles.whole)
+		]))]);
+	};
+}, {
+	name: "Rating",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"count",
+		"allowHalf",
+		"clearable",
+		"icon",
+		"tone",
+		"size",
+		"readonly",
+		"disabled",
+		"name",
+		"id",
+		"propsStar"
+	]
+});
+//#endregion
+export { Rating, ratingClipStyles, ratingStyles, ratingToneStyles };
+
+//# sourceMappingURL=Rating.js.map

package/dist/input/Rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/input/Rating.tsx"],"sourcesContent":["/**\n * 评分：几颗星（或别的图标）里选一个分数，供应商评价、满意度、优先级。可以半星，可以只读显示。\n *\n *   <Field label=\"交付质量\"><Rating _value={score} /></Field>\n *   <Rating value={4.5} readonly />                         只读：一个 role=\"img\"，读“4.5 星，满分 5 星”\n *   <Rating _value={score} allowHalf count={10} icon={Heart} tone=\"danger\" />\n *\n * 可编辑时是单选组（role=\"radiogroup\"）：每颗星是一个原生 radio（视觉上隐藏），方向键、表单提交、读屏都是原生的；\n * 名称是“3 星”这样的文字（lang.ratingStar）。指针悬停时预览将要选的分数；再点一次已选的分数清空（clearable，默认开）。\n * 半星：每颗星左右各一半，各是一个 radio。部件：Root（div）、Star（span，每颗星）、Icon。\n */\nimport { Star } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { SxStyles } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId } from 'vue';\nimport { Icon, type IconData } from '../base/Icon';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFieldControl } from '../form/Field';\nimport { defaultLabelledBy, mergeAttrs, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { t } from '../config/theme/tokens';\n\n/** 角色由组件管理 */\nexport type RatingManaged = 'role';\n\n/** 未声明的属性落到外层 div 上；名称写 aria-label，或放在 Field 里 */\nexport interface RatingProps extends PartProps<'div', RatingManaged> {\n  /** 分数：父级写 _value={score}；没有评分时是 null */\n  _value?: number | null;\n  /** 一共几颗星，默认 5 */\n  count?: number;\n  /** 可以选半颗 */\n  allowHalf?: boolean;\n  /** 再点一次已选的分数时清空，默认 true */\n  clearable?: boolean;\n  /** 图标，默认星星 */\n  icon?: IconData;\n  /** 选中的颜色，默认 warning（金黄） */\n  tone?: StatusTone;\n  /** 字号档位：图标随之缩放 */\n  size?: TextSize;\n  /** 只读：只显示分数（一个 role=\"img\"） */\n  readonly?: boolean;\n  /** 不可用（不写时取 Field 的） */\n  disabled?: boolean;\n  /** 表单提交时的 name */\n  name?: string;\n  /** 每颗星的部件属性 */\n  propsStar?: PartProps<'span'>;\n}\n\n/** Rating 的样式：root、star、readonly、icon、empty、fill、clip、clipIcon、whole、startHalf、endHalf、disabled */\nexport const ratingStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'center', gap: '0.15em', lineHeight: 1 },\n  // 每颗星：空心图标打底，填色的那层按比例裁出；radio 盖满（半星时左右各一半）\n  star: {\n    position: 'relative',\n    display: 'inline-grid',\n    width: '1.35em',\n    height: '1.35em',\n    borderRadius: '_sm',\n    cursor: 'pointer',\n    transition: `scale ${t.durations.sm} ${t.easings.standard}`,\n    scale: { default: null, ':hover': '1.12' },\n  },\n  readonly: { cursor: 'default', scale: null },\n  icon: { gridArea: '1 / 1', width: '100%', height: '100%' },\n  empty: { color: '_borderStrong' },\n  // 填色的那层：currentColor 填满图标\n  fill: { fill: 'currentColor' },\n  clip: { gridArea: '1 / 1', overflow: 'hidden', pointerEvents: 'none' },\n  // 裁出来的那层按整颗星的大小画，不随裁出的宽度缩小\n  clipIcon: { display: 'block', width: '1.35em', height: '1.35em', maxWidth: 'none' },\n  // 点击区域：整颗；半星时起始边一半、结束边一半\n  whole: { position: 'absolute', inset: 0 },\n  startHalf: { position: 'absolute', insetBlock: 0, insetInlineStart: 0, width: '50%' },\n  endHalf: { position: 'absolute', insetBlock: 0, insetInlineEnd: 0, width: '50%' },\n  disabled: { opacity: '_disabled', cursor: 'not-allowed' },\n});\n\n// 选中的颜色用各色调的实色（金黄的星、红色的心）：实心与空心靠形状区分，不只靠颜色；Windows 高对比下用系统高亮色\n/** Rating 的颜色：neutral、accent、info、success、warning、danger */\nexport const ratingToneStyles = css.create({\n  neutral: { color: { default: '_textMuted', '@media (forced-colors: active)': 'Highlight' } },\n  accent: { color: { default: '_accent', '@media (forced-colors: active)': 'Highlight' } },\n  info: { color: { default: '_info', '@media (forced-colors: active)': 'Highlight' } },\n  success: { color: { default: '_success', '@media (forced-colors: active)': 'Highlight' } },\n  warning: { color: { default: '_warning', '@media (forced-colors: active)': 'Highlight' } },\n  danger: { color: { default: '_danger', '@media (forced-colors: active)': 'Highlight' } },\n});\n\n/** 填色那层的宽度 */\nexport const ratingClipStyles = css.create({\n  width: (percent: string) => ({ width: percent }),\n});\n\n/** 评分：一排可以点的星 */\nexport const Rating = _component(\n  ({\n    _value: value = _bindable<number | null>(null),\n    count = 5,\n    allowHalf = false,\n    clearable = true,\n    icon = Star,\n    tone = 'warning',\n    size,\n    readonly,\n    disabled,\n    name,\n    id,\n    propsStar,\n    ...rest\n  }: RatingProps) => {\n    const lang = useLang();\n    const generatedName = useId();\n    const control = useFieldControl(() => ({ id, disabled, readonly }));\n    // 指针悬停时预览的分数\n    let hover = _state<number | null>(null);\n\n    /** 第 index 颗星（从 1 开始）填了多少：0、50、100 */\n    const filled = (shown: number | null, index: number) =>\n      shown == null ? 0 : shown >= index ? 100 : shown >= index - 0.5 ? 50 : 0;\n\n    function pick(next: number) {\n      value = clearable && value === next ? null : next;\n      hover = null;\n    }\n\n    const starIcon = (percent: number) => [\n      <Icon icon={icon} sx={[ratingStyles.icon, ratingStyles.empty]} />,\n      percent > 0 && (\n        <span {...css.attrs(ratingStyles.clip, ratingClipStyles.width(`${percent}%`))}>\n          <Icon\n            icon={icon}\n            sx={[ratingStyles.clipIcon, ratingStyles.fill, ratingToneStyles[tone]]}\n          />\n        </span>\n      ),\n    ];\n\n    return () => {\n      const state = control();\n      const stars = Array.from({ length: count }, (_, index) => index + 1);\n\n      if (state.readonly) {\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [ratingStyles.root, size && fontSizeStyles[size]],\n                'aria-labelledby': defaultLabelledBy(rest, state.labelledBy),\n              },\n              rest,\n              { id: state.id, role: 'img', 'aria-label': lang.ratingSummary(value, count) },\n            )}\n          >\n            {stars.map((index) => (\n              <span\n                key={index}\n                aria-hidden=\"true\"\n                {...mergeAttrs<'span'>(\n                  { sx: [ratingStyles.star, ratingStyles.readonly] },\n                  propsStar,\n                )}\n              >\n                {starIcon(filled(value, index))}\n              </span>\n            ))}\n          </div>\n        );\n      }\n\n      const shown = hover ?? value;\n      const radio = (score: number, sx: SxStyles) => (\n        <label {...css.attrs(sx)} onPointerenter={() => (hover = score)}>\n          <input\n            type=\"radio\"\n            name={name ?? generatedName}\n            value={String(score)}\n            checked={value === score}\n            disabled={state.disabled}\n            aria-label={lang.ratingStar(score)}\n            onClick={() => pick(score)}\n            {...css.attrs(visuallyHiddenStyles.hidden)}\n          />\n        </label>\n      );\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                ratingStyles.root,\n                size && fontSizeStyles[size],\n                state.disabled && ratingStyles.disabled,\n              ],\n              'aria-labelledby': defaultLabelledBy(rest, state.labelledBy),\n            },\n            rest,\n            {\n              id: state.id,\n              role: 'radiogroup',\n              'aria-describedby': state.describedBy,\n              'aria-disabled': state.disabled || undefined,\n              onPointerleave: () => (hover = null),\n            },\n          )}\n        >\n          {stars.map((index) => (\n            <span\n              key={index}\n              {...mergeAttrs<'span'>(\n                {\n                  sx: [ratingStyles.star, focusRingStyles.within],\n                },\n                propsStar,\n              )}\n              data-state={\n                filled(value, index) === 100 ? 'full' : filled(value, index) ? 'half' : 'empty'\n              }\n            >\n              {starIcon(filled(shown, index))}\n              {allowHalf && radio(index - 0.5, ratingStyles.startHalf)}\n              {radio(index, allowHalf ? ratingStyles.endHalf : ratingStyles.whole)}\n            </span>\n          ))}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/Select.d.ts

@@ -0,0 +1,97 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import type { PresetIconButtonProps } from '../base/CloseButton';
+import { type IconProps } from '../base/Icon';
+import type { TagProps } from '../base/Tag';
+import { type FloatingPlacement } from '../utils/dom/floating';
+import { type OpenChangeProps } from '../utils/dom/open-change';
+import { type PartProps } from '../utils/props';
+import { type SelectionProps } from '../utils/data/selection';
+import { type ControlIconOptions, type ControlOptions } from './control';
+import { type ListboxViewProps, type OptionRenderState } from './Listbox';
+import { type ListboxOption, type OptionMapping } from './list-state';
+import { type OptionsLoader } from './remote-items';
+import { type SelectedTagsProps } from './SelectedTags';
+import { type TextFieldProps } from './TextField';
+/** 角色、展开状态与可用性由组件管理 */
+export type SelectManaged = 'type' | 'role' | 'value' | 'disabled' | 'aria-haspopup' | 'aria-expanded' | 'aria-controls' | 'aria-activedescendant' | 'aria-invalid' | 'aria-required' | 'aria-describedby';
+/** 下拉选择共有的属性；未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */
+export interface SelectBaseProps<T> extends PartProps<'button', SelectManaged>, ControlOptions, ControlIconOptions, OpenChangeProps {
+    /** 数据：ListboxOption、字符串，或任意数据加 toOption；有 load 时是第一次加载之前的选项（编辑页放上已选的那一项） */
+    items?: readonly T[];
+    /** 没有选择时显示的文字，默认取语言包（请选择） */
+    placeholder?: string;
+    /** 是否打开：父级可以写 _open={x} */
+    _open?: boolean;
+    /** 弹出位置，默认 bottom-start */
+    placement?: FloatingPlacement;
+    /** 有选择时显示清空按钮 */
+    clearable?: boolean;
+    /** 弹出层顶部带搜索框，输入过滤选项：选项多（供应商、人员、件号）时用 */
+    searchable?: boolean;
+    /** 搜索时怎样算匹配；默认显示文字包含输入（忽略大小写与重音）。false 时不在本地过滤（服务端按 search 过滤） */
+    filter?: false | ((item: T, query: string) => boolean);
+    /** 搜索框里的文字：打开时清空；父级写 _search={x} 拿到它（自己发请求时） */
+    _search?: string;
+    /** 远程选项：打开时与搜索词停下 300 ms 后调用，结果代替 items；只采用最后一次，被顶掉的请求 signal 中止 */
+    load?: OptionsLoader<T>;
+    /**
+     * 可以新建选项（自带搜索框）：输入的文字没有对应的选项时，列表末尾多一项“新建“…””，选中后值就是这段文字。
+     * 在 onCreate 里把它加进 items（或存到服务端）；不加时触发框里照样显示这段文字
+     */
+    creatable?: boolean;
+    /** 新建了一项（creatable 时）：参数是输入的文字，也就是选中的值 */
+    onCreate?: (text: string) => void;
+    /** 多选时触发框里最多显示几个标签，其余收进“+N”；'responsive' 时排成一行、按宽度放，放不下的收起 */
+    maxTagCount?: number | 'responsive';
+    /** 表单提交时的 name（用隐藏的 input） */
+    name?: string;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读：能聚焦、能看到已选的内容，不能打开、不能清空 */
+    readonly?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 自定义选项内容：`{(option, { selected, active }) => …}` */
+    children?: (item: T, state: OptionRenderState) => VNodeChild;
+    /** 自定义触发框里显示的内容（已选的选项）；默认单选显示文字、多选显示标签 */
+    renderValue?: (selected: readonly T[]) => VNodeChild;
+    /** 正在取选项（异步加载）：没有选项时列表里是骨架行，已有选项时顶部显示进度条 */
+    loading?: boolean;
+    /** 没有选项时列表里显示的内容 */
+    empty?: VNodeChild;
+    /** 外壳的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 已选内容那一层的部件属性 */
+    propsValue?: PartProps<'span'>;
+    /** 多选时每个标签的部件属性 */
+    propsTag?: Partial<TagProps>;
+    /** 多选时那排标签的部件属性 */
+    propsTags?: Partial<SelectedTagsProps>;
+    /** 清空按钮的部件属性 */
+    propsClear?: Partial<PresetIconButtonProps>;
+    /** 下拉箭头的部件属性 */
+    propsChevron?: Partial<IconProps>;
+    /** 弹出层的部件属性 */
+    propsPopover?: PartProps<'div', 'id' | 'popover'>;
+    /** 列表的部件属性 */
+    propsListbox?: Partial<ListboxViewProps<T>>;
+    /** 搜索框的部件属性（searchable 时） */
+    propsSearch?: Partial<TextFieldProps>;
+}
+/** 单选或多选；items 不是 ListboxOption 或字符串时要给 toOption */
+export type SelectProps<T = ListboxOption> = SelectBaseProps<T> & SelectionProps & OptionMapping<T>;
+/** Select 的样式：root、trigger、value、placeholder、chevronOpen 等 */
+export declare const selectStyles: Readonly<{
+    chevronOpen: css.CompiledStyles;
+    placeholder: css.CompiledStyles;
+    root: css.CompiledStyles;
+    search: css.CompiledStyles;
+    trigger: css.CompiledStyles;
+    triggerBehindTags: css.CompiledStyles;
+    value: css.CompiledStyles;
+}>;
+/** 下拉选择：触发框 + 弹出的选项列表 */
+export declare const Select: <T>(props: SelectProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;