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

package/dist/input/OtpField.js

@@ -0,0 +1,200 @@
+import { t } from "../config/theme/tokens.js";
+import { mergeAttrs } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { useFieldControl } from "../form/Field.js";
+import { createVNode, mergeProps, ref } 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/OtpField.tsx
+/** 能输入的字符 */
+/** 值、类型与状态由组件管理 */
+/** 未声明的属性落到 input（主元素）上；格子的容器用 propsRoot */
+var blink = css.keyframes({ "50%": { opacity: 0 } });
+/** OtpField 的样式：root、input、slot、active、invalid、disabled、caret、separator */
+var otpFieldStyles = css.create({
+	root: {
+		position: "relative",
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_xs"
+	},
+	input: {
+		position: "absolute",
+		inset: 0,
+		width: "100%",
+		height: "100%",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		outlineStyle: "none",
+		backgroundColor: "transparent",
+		appearance: "none",
+		color: "transparent",
+		caretColor: "transparent",
+		fontSize: "1em",
+		letterSpacing: "-0.5em",
+		cursor: "text",
+		"::selection": { backgroundColor: "transparent" }
+	},
+	slot: {
+		boxSizing: "border-box",
+		position: "relative",
+		display: "grid",
+		placeItems: "center",
+		width: "2.5em",
+		height: `max(2.75em, ${t.sizes.minTarget})`,
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_border",
+		borderRadius: "_md",
+		backgroundColor: "_surface",
+		color: "_text",
+		fontSize: "1.15em",
+		fontWeight: "_semibold",
+		fontVariantNumeric: "tabular-nums",
+		transition: `border-color ${t.durations.sm} ${t.easings.standard}`
+	},
+	active: {
+		borderColor: "_accent",
+		outlineWidth: "_borderWidths.sm",
+		outlineStyle: "solid",
+		outlineColor: "_accentBorder",
+		outlineOffset: 0
+	},
+	invalid: { borderColor: "_danger" },
+	disabled: { opacity: "_disabled" },
+	caret: {
+		width: "1px",
+		height: "1.1em",
+		backgroundColor: "_text",
+		animationName: {
+			default: blink,
+			"@media (prefers-reduced-motion: reduce)": "none"
+		},
+		animationDuration: "1s",
+		animationIterationCount: "infinite",
+		animationTimingFunction: "steps(1)"
+	},
+	separator: {
+		width: "0.6em",
+		height: "2px",
+		backgroundColor: "_borderStrong"
+	}
+});
+var SANITIZE = {
+	numeric: (text) => text.replace(/\D/g, ""),
+	alphanumeric: (text) => text.replace(/[^0-9a-z]/gi, "").toUpperCase()
+};
+/** 验证码输入框：一个原生 input + 显示用的格子 */
+var OtpField = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => "", _ctx.emit);
+	const length = readonlyProp(_props, "length", 6);
+	const type = readonlyProp(_props, "type", "numeric");
+	const groups = readonlyProp(_props, "groups");
+	const mask = readonlyProp(_props, "mask", false);
+	const onComplete = readonlyProp(_props, "onComplete");
+	const size = readonlyProp(_props, "size");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const id = readonlyProp(_props, "id");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsSlot = readonlyProp(_props, "propsSlot");
+	const propsSeparator = readonlyProp(_props, "propsSeparator");
+	const rest = restProps(_props, _ctx, true);
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	let focused = ref(false);
+	function onInput(event) {
+		const input = event.target;
+		const next = SANITIZE[type.value](input.value).slice(0, length.value);
+		if (input.value !== next) input.value = next;
+		if (next === value.value) return;
+		value.value = next;
+		if (next.length === length.value) onComplete.value?.(next);
+	}
+	/** 第 index 格后面是不是一组的结尾（要加分隔） */
+	const groupEnds = () => {
+		const ends = /* @__PURE__ */ new Set();
+		let sum = 0;
+		for (const size of groups.value ?? []) {
+			sum += size;
+			if (sum < length.value) ends.add(sum - 1);
+		}
+		return ends;
+	};
+	return () => {
+		const state = control();
+		const chars = value.value.split("");
+		const current = Math.min(chars.length, length.value - 1);
+		const ends = groupEnds();
+		return createVNode("div", mergeProps(mergeAttrs({ sx: [otpFieldStyles.root, size.value && fontSizeStyles[size.value]] }, propsRoot.value), {
+			"data-invalid": state.invalid || void 0,
+			"data-disabled": state.disabled || void 0
+		}), [Array.from({ length: length.value }, (_, index) => {
+			const char = chars[index];
+			const active = focused.value && !state.readonly && index === current;
+			return [createVNode("div", mergeProps({
+				"key": `slot-${index}`,
+				"aria-hidden": "true"
+			}, mergeAttrs({ sx: [
+				otpFieldStyles.slot,
+				state.invalid && otpFieldStyles.invalid,
+				active && otpFieldStyles.active,
+				state.disabled && otpFieldStyles.disabled
+			] }, propsSlot.value), { "data-state": char ? "filled" : "empty" }), [char ? mask.value ? "•" : char : active && createVNode("span", css.attrs(otpFieldStyles.caret), null)]), ends.has(index) && createVNode("span", mergeProps({
+				"key": `separator-${index}`,
+				"aria-hidden": "true"
+			}, mergeAttrs({ sx: otpFieldStyles.separator }, propsSeparator.value)), null)];
+		}), createVNode("input", mergeAttrs({
+			sx: otpFieldStyles.input,
+			autocomplete: "one-time-code",
+			spellcheck: false
+		}, rest, {
+			id: state.id,
+			value: value.value,
+			type: mask.value ? "password" : "text",
+			inputmode: type.value === "numeric" ? "numeric" : "text",
+			pattern: type.value === "numeric" ? `\\d{${length.value}}` : `[0-9A-Za-z]{${length.value}}`,
+			maxlength: length.value,
+			disabled: state.disabled,
+			readonly: state.readonly,
+			required: state.required,
+			"aria-invalid": state.invalid || void 0,
+			"aria-describedby": state.describedBy,
+			onInput,
+			onFocus: () => focused.value = true,
+			onBlur: () => focused.value = false
+		}), null)]);
+	};
+}, {
+	name: "OtpField",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"length",
+		"type",
+		"groups",
+		"mask",
+		"onComplete",
+		"size",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"id",
+		"propsRoot",
+		"propsSlot",
+		"propsSeparator"
+	]
+});
+//#endregion
+export { OtpField, otpFieldStyles };
+
+//# sourceMappingURL=OtpField.js.map

package/dist/input/OtpField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpField.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/input/OtpField.tsx"],"sourcesContent":["/**\n * 验证码输入框：一格一个字符的短信验证码、动态口令、取件码。\n *\n *   <Field label=\"短信验证码\"><OtpField _value={code} onComplete={verify} /></Field>\n *   <OtpField length={8} type=\"alphanumeric\" groups={[4, 4]} aria-label=\"恢复码\" />\n *\n * 参考 input-otp（shadcn 的 InputOTP）的做法：只有一个真正的 input（透明、盖在格子上面），格子只是显示。\n * 所以短信验证码的自动填充（autocomplete=\"one-time-code\"）、整段粘贴、退格、选中都是原生的，读屏看到的是一个输入框；\n * 输入时只留数字（或字母数字），填满时调用 onComplete。焦点在框里时当前格画焦点环，空格里有闪烁的光标。\n * 部件：Root（div：格子的容器）、Input（主元素）、Slot（div，每格一个）、Separator（groups 之间）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useFieldControl } from '../form/Field';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { t } from '../config/theme/tokens';\n\n/** 能输入的字符 */\nexport interface OtpCharsets {\n  /** 只有数字（默认），手机弹出数字键盘 */\n  numeric: unknown;\n  /** 字母与数字，字母转成大写 */\n  alphanumeric: unknown;\n}\n\n/** 值、类型与状态由组件管理 */\nexport type OtpFieldManaged =\n  'value' | 'type' | 'maxlength' | 'inputmode' | 'pattern' | 'disabled' | 'readonly' | 'required';\n\n/** 未声明的属性落到 input（主元素）上；格子的容器用 propsRoot */\nexport interface OtpFieldProps extends PartProps<'input', OtpFieldManaged> {\n  /** 输入的字符：父级写 _value={code} */\n  _value?: string;\n  /** 几位，默认 6 */\n  length?: number;\n  /** 能输入的字符，默认 numeric */\n  type?: keyof OtpCharsets;\n  /** 分组显示（如 [3, 3] 在中间加一道短横线）；各组加起来要等于 length */\n  groups?: readonly number[];\n  /** 显示成圆点（动态口令、支付密码） */\n  mask?: boolean;\n  /** 填满时调用（输入、粘贴、自动填充都算） */\n  onComplete?: (value: string) => void;\n  /** 字号档位：格子随之缩放 */\n  size?: TextSize;\n  /** 不可用（不写时取 Field 的） */\n  disabled?: boolean;\n  /** 只读（不写时取 Field 的） */\n  readonly?: boolean;\n  /** 必填（不写时取 Field 的） */\n  required?: boolean;\n  /** 校验未通过（不写时取 Field 的） */\n  invalid?: boolean;\n  /** 格子的容器的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 每一格的部件属性 */\n  propsSlot?: PartProps<'div'>;\n  /** 分组之间的分隔的部件属性 */\n  propsSeparator?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\nconst blink = css.keyframes({ '50%': { opacity: 0 } });\n\n/** OtpField 的样式：root、input、slot、active、invalid、disabled、caret、separator */\nexport const otpFieldStyles = css.create({\n  root: {\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_xs',\n  },\n  // 真正的输入框盖在格子上面：透明、光标与选中都不显示，点哪一格都是点它\n  input: {\n    position: 'absolute',\n    inset: 0,\n    width: '100%',\n    height: '100%',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    outlineStyle: 'none',\n    backgroundColor: 'transparent',\n    appearance: 'none',\n    color: 'transparent',\n    caretColor: 'transparent',\n    fontSize: '1em',\n    letterSpacing: '-0.5em',\n    cursor: 'text',\n    '::selection': { backgroundColor: 'transparent' },\n  },\n  slot: {\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'grid',\n    placeItems: 'center',\n    width: '2.5em',\n    height: `max(2.75em, ${t.sizes.minTarget})`,\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    color: '_text',\n    fontSize: '1.15em',\n    fontWeight: '_semibold',\n    fontVariantNumeric: 'tabular-nums',\n    transition: `border-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  // 当前格：同输入框聚焦时的强调描边与焦点环\n  active: {\n    borderColor: '_accent',\n    outlineWidth: '_borderWidths.sm',\n    outlineStyle: 'solid',\n    outlineColor: '_accentBorder',\n    outlineOffset: 0,\n  },\n  invalid: { borderColor: '_danger' },\n  disabled: { opacity: '_disabled' },\n  // 空的当前格里闪烁的光标；减少动态效果时常亮\n  caret: {\n    width: '1px',\n    height: '1.1em',\n    backgroundColor: '_text',\n    animationName: { default: blink, '@media (prefers-reduced-motion: reduce)': 'none' },\n    animationDuration: '1s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'steps(1)',\n  },\n  separator: { width: '0.6em', height: '2px', backgroundColor: '_borderStrong' },\n});\n\nconst SANITIZE = {\n  numeric: (text: string) => text.replace(/\\D/g, ''),\n  alphanumeric: (text: string) => text.replace(/[^0-9a-z]/gi, '').toUpperCase(),\n};\n\n/** 验证码输入框：一个原生 input + 显示用的格子 */\nexport const OtpField = _component(\n  ({\n    _value: value = _bindable(''),\n    length = 6,\n    type = 'numeric',\n    groups,\n    mask = false,\n    onComplete,\n    size,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    propsRoot,\n    propsSlot,\n    propsSeparator,\n    ...rest\n  }: OtpFieldProps) => {\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let focused = _state(false);\n\n    function onInput(event: Event) {\n      const input = event.target as HTMLInputElement;\n      const next = SANITIZE[type](input.value).slice(0, length);\n      // 过滤掉的字符不留在输入框里\n      if (input.value !== next) input.value = next;\n      if (next === value) return;\n      value = next;\n      if (next.length === length) onComplete?.(next);\n    }\n\n    /** 第 index 格后面是不是一组的结尾（要加分隔） */\n    const groupEnds = () => {\n      const ends = new Set<number>();\n      let sum = 0;\n      for (const size of groups ?? []) {\n        sum += size;\n        if (sum < length) ends.add(sum - 1);\n      }\n      return ends;\n    };\n\n    return () => {\n      const state = control();\n      // 值只有数字与字母（输入时已过滤），按字符拆开就是按格\n      const chars = value.split('');\n      const current = Math.min(chars.length, length - 1);\n      const ends = groupEnds();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [otpFieldStyles.root, size && fontSizeStyles[size]] },\n            propsRoot,\n          )}\n          data-invalid={state.invalid || undefined}\n          data-disabled={state.disabled || undefined}\n        >\n          {Array.from({ length }, (_, index) => {\n            const char = chars[index];\n            const active = focused && !state.readonly && index === current;\n            return [\n              <div\n                key={`slot-${index}`}\n                aria-hidden=\"true\"\n                {...mergeAttrs<'div'>(\n                  {\n                    sx: [\n                      otpFieldStyles.slot,\n                      state.invalid && otpFieldStyles.invalid,\n                      active && otpFieldStyles.active,\n                      state.disabled && otpFieldStyles.disabled,\n                    ],\n                  },\n                  propsSlot,\n                )}\n                data-state={char ? 'filled' : 'empty'}\n              >\n                {char\n                  ? mask\n                    ? '•'\n                    : char\n                  : active && <span {...css.attrs(otpFieldStyles.caret)} />}\n              </div>,\n              ends.has(index) && (\n                <span\n                  key={`separator-${index}`}\n                  aria-hidden=\"true\"\n                  {...mergeAttrs<'span'>({ sx: otpFieldStyles.separator }, propsSeparator)}\n                />\n              ),\n            ];\n          })}\n          <input\n            {...mergeAttrs<'input'>(\n              { sx: otpFieldStyles.input, autocomplete: 'one-time-code', spellcheck: false },\n              rest,\n              {\n                id: state.id,\n                value,\n                type: mask ? 'password' : 'text',\n                inputmode: type === 'numeric' ? 'numeric' : 'text',\n                pattern: type === 'numeric' ? `\\\\d{${length}}` : `[0-9A-Za-z]{${length}}`,\n                maxlength: length,\n                disabled: state.disabled,\n                readonly: state.readonly,\n                required: state.required,\n                'aria-invalid': state.invalid || undefined,\n                'aria-describedby': state.describedBy,\n                onInput,\n                onFocus: () => (focused = true),\n                onBlur: () => (focused = false),\n              },\n            )}\n          />\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/PeoplePicker.d.ts

@@ -0,0 +1,42 @@
+import { type DialogProps } from '../overlay/Dialog';
+import { type PartProps } from '../utils/props';
+import { type ControlOptions } from './control';
+import { type PeopleEntry, type PeopleSource, type PeopleType } from './people';
+import { type PeoplePickerPanelProps } from './PeoplePickerPanel';
+import { type SelectManaged } from './Select';
+import { type SelectedTagsProps } from './SelectedTags';
+/** 未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */
+export interface PeoplePickerProps extends PartProps<'button', SelectManaged>, ControlOptions {
+    /** 数据来源 */
+    source: PeopleSource;
+    /** 选中的：父级写 _value={list} 双向绑定 */
+    _value?: readonly PeopleEntry[];
+    /** 能选哪几种，默认只有人员 */
+    types?: readonly PeopleType[];
+    /** 最多选几个；1 时只选一个 */
+    max?: number;
+    /** 记“最近选过的”用的键（存在浏览器里） */
+    recentKey?: string;
+    /** 没有选时的占位，也是对话框的标题；默认“选择人员” */
+    placeholder?: string;
+    /** 多选时最多显示几个标签，其余收进“+N”；'responsive' 时排成一行按宽度放 */
+    maxTagCount?: number | 'responsive';
+    /** 不可用；也可由 Field 提供 */
+    disabled?: boolean;
+    /** 只读：不能打开、不能移除；也可由 Field 提供 */
+    readonly?: boolean;
+    /** 必填；也可由 Field 提供 */
+    required?: boolean;
+    /** 校验未通过；也可由 Field 提供 */
+    invalid?: boolean;
+    /** 外壳的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 标签那一排的部件属性 */
+    propsTags?: Partial<SelectedTagsProps>;
+    /** 对话框的部件属性 */
+    propsDialog?: Partial<DialogProps>;
+    /** 面板的部件属性 */
+    propsPanel?: Partial<PeoplePickerPanelProps>;
+}
+/** 人员与组织选择器 */
+export declare const PeoplePicker: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PeoplePickerProps>;

package/dist/input/PeoplePicker.js

@@ -0,0 +1,185 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { buttonBaseStyles } from "../base/button-core.js";
+import { useFieldControl } from "../form/Field.js";
+import { clickOnShell, controlParts, focusOnShell, useControlAppearance } from "./control.js";
+import { Dialog } from "../overlay/Dialog.js";
+import { SelectedTags } from "./SelectedTags.js";
+import { selectStyles } from "./Select.js";
+import { peopleKey } from "./people.js";
+import { PeoplePickerPanel } from "./PeoplePickerPanel.js";
+import { Fragment, createVNode, mergeProps, ref, shallowRef } 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 { UsersRound } from "@lucide/icons";
+//#region src/input/PeoplePicker.tsx
+/**
+* 人员与组织选择器（表单字段）：触发框里是已选的标签，点开对话框里的 PeoplePickerPanel 挑选，按“确定”才写回，“取消”放弃这次的改动。
+*
+*   <Field label="抄送"><PeoplePicker source={source} _value={cc} types={['user', 'department']} recentKey="cc" /></Field>
+*   <PeoplePicker source={source} _value={owner} max={1} placeholder="选择经办人" />      只选一个：值仍是数组，最多一项
+*
+* 触发框同 Select 的外壳：多选时已选的标签排在触发按钮前面（可移除），按钮里只留给读屏的文字；一个时直接显示名字。
+* 键盘：触发按钮上 Enter / 空格 / ↓ 打开，Backspace 移除最后一个；对话框里的键盘见 PeoplePickerPanel。
+* 部件：Root（外壳）、Tags、Trigger（button，主元素）、Value、Dialog、Panel。
+*/
+/** 未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */
+/** 人员与组织选择器 */
+var PeoplePicker = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const source = readonlyProp(_props, "source");
+	const value = bindable(_props, "_value", () => [], _ctx.emit);
+	const types = readonlyProp(_props, "types");
+	const max = readonlyProp(_props, "max");
+	const recentKey = readonlyProp(_props, "recentKey");
+	const placeholder = readonlyProp(_props, "placeholder");
+	const maxTagCount = readonlyProp(_props, "maxTagCount");
+	const variant = readonlyProp(_props, "variant");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const required = readonlyProp(_props, "required");
+	const invalid = readonlyProp(_props, "invalid");
+	const id = readonlyProp(_props, "id");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsTags = readonlyProp(_props, "propsTags");
+	const propsDialog = readonlyProp(_props, "propsDialog");
+	const propsPanel = readonlyProp(_props, "propsPanel");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const appearance = useControlAppearance(() => ({
+		variant: variant.value,
+		size: size.value,
+		radius: radius.value
+	}));
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	let open = ref(false);
+	let draft = ref([]);
+	let trigger = shallowRef(null);
+	const locked = () => control().disabled || control().readonly;
+	function show() {
+		if (locked()) return;
+		draft.value = [...value.value];
+		open.value = true;
+	}
+	function remove(key) {
+		value.value = value.value.filter((entry) => peopleKey(entry) !== key);
+	}
+	function onKeydown(event) {
+		if (locked()) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			show();
+		} else if (event.key === "Backspace" && value.value.length > 0) {
+			event.preventDefault();
+			value.value = value.value.slice(0, -1);
+		}
+	}
+	return () => {
+		const state = control();
+		const s = controlParts(appearance(), state);
+		const title = placeholder.value ?? lang.peoplePlaceholder;
+		const tagged = max.value !== 1 && value.value.length > 0;
+		const shown = value.value.length === 0 ? createVNode("span", css.attrs(selectStyles.placeholder), [title]) : tagged ? createVNode("span", css.attrs(visuallyHiddenStyles.hidden), [lang.selectSummary(value.value.map((entry) => entry.name))]) : value.value[0].name;
+		return createVNode(Fragment, null, [createVNode("div", mergeProps(mergeAttrs({
+			...s.root,
+			sx: [s.root.sx, selectStyles.root]
+		}, propsRoot.value, {
+			onPointerdown: state.disabled ? void 0 : focusOnShell(() => trigger.value),
+			onClick: locked() ? void 0 : clickOnShell(() => trigger.value, show)
+		}), {
+			"data-invalid": state.invalid || void 0,
+			"data-disabled": state.disabled || void 0
+		}), [
+			tagged && createVNode(SelectedTags, mergePartProps({
+				tags: value.value.map((entry) => ({
+					value: peopleKey(entry),
+					label: entry.name
+				})),
+				maxTagCount: maxTagCount.value,
+				onRemove: locked() ? void 0 : remove
+			}, propsTags.value), null),
+			createVNode("button", mergeAttrs({ sx: [
+				buttonBaseStyles.root,
+				selectStyles.trigger,
+				tagged && selectStyles.triggerBehindTags
+			] }, rest, {
+				ref: (element) => trigger.value = element,
+				id: state.id,
+				type: "button",
+				disabled: state.disabled,
+				"aria-haspopup": "dialog",
+				"aria-expanded": open.value,
+				"aria-invalid": state.invalid || void 0,
+				"aria-required": state.required || void 0,
+				"aria-readonly": state.readonly || void 0,
+				"aria-describedby": state.describedBy,
+				onClick: () => {
+					trigger.value?.focus();
+					show();
+				},
+				onKeydown
+			}), [createVNode("span", css.attrs(selectStyles.value), [shown])]),
+			createVNode(Icon, mergeProps(s.icon, { "icon": UsersRound }), null)
+		]), createVNode(Dialog, mergeProps(mergePartProps({
+			size: "lg",
+			title,
+			onConfirm: () => {
+				value.value = draft.value;
+			}
+		}, propsDialog.value), {
+			"_open": open.value,
+			"onUpdate:_open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
+			"key": "__site0"
+		}), {
+			default: () => [createVNode(PeoplePickerPanel, mergeProps(mergePartProps({
+				source: source.value,
+				types: types.value,
+				max: max.value,
+				recentKey: recentKey.value,
+				propsSearch: { autofocus: true }
+			}, propsPanel.value), {
+				"_value": draft.value,
+				"onUpdate:_value": _cache[1] || (_cache[1] = ($event) => draft.value = $event)
+			}), null)],
+			$stable: true
+		})]);
+	};
+}, {
+	name: "PeoplePicker",
+	props: [
+		"source",
+		"_value",
+		"onUpdate:_value",
+		"types",
+		"max",
+		"recentKey",
+		"placeholder",
+		"maxTagCount",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"id",
+		"propsRoot",
+		"propsTags",
+		"propsDialog",
+		"propsPanel"
+	]
+});
+//#endregion
+export { PeoplePicker };
+
+//# sourceMappingURL=PeoplePicker.js.map

package/dist/input/PeoplePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeoplePicker.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_ref","_vue_shallowRef","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/input/PeoplePicker.tsx"],"sourcesContent":["/**\n * 人员与组织选择器（表单字段）：触发框里是已选的标签，点开对话框里的 PeoplePickerPanel 挑选，按“确定”才写回，“取消”放弃这次的改动。\n *\n *   <Field label=\"抄送\"><PeoplePicker source={source} _value={cc} types={['user', 'department']} recentKey=\"cc\" /></Field>\n *   <PeoplePicker source={source} _value={owner} max={1} placeholder=\"选择经办人\" />      只选一个：值仍是数组，最多一项\n *\n * 触发框同 Select 的外壳：多选时已选的标签排在触发按钮前面（可移除），按钮里只留给读屏的文字；一个时直接显示名字。\n * 键盘：触发按钮上 Enter / 空格 / ↓ 打开，Backspace 移除最后一个；对话框里的键盘见 PeoplePickerPanel。\n * 部件：Root（外壳）、Tags、Trigger（button，主元素）、Value、Dialog、Panel。\n */\nimport { UsersRound } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { buttonBaseStyles } from '../base/button-core';\nimport { Icon } from '../base/Icon';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { useFieldControl } from '../form/Field';\nimport { Dialog, type DialogProps } from '../overlay/Dialog';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport {\n  clickOnShell,\n  controlParts,\n  focusOnShell,\n  useControlAppearance,\n  type ControlOptions,\n} from './control';\nimport { peopleKey, type PeopleEntry, type PeopleSource, type PeopleType } from './people';\nimport { PeoplePickerPanel, type PeoplePickerPanelProps } from './PeoplePickerPanel';\nimport { selectStyles, type SelectManaged } from './Select';\nimport { SelectedTags, type SelectedTagsProps } from './SelectedTags';\n\n/** 未声明的属性落到触发按钮（主元素）上，外壳用 propsRoot */\nexport interface PeoplePickerProps extends PartProps<'button', SelectManaged>, ControlOptions {\n  /** 数据来源 */\n  source: PeopleSource;\n  /** 选中的：父级写 _value={list} 双向绑定 */\n  _value?: readonly PeopleEntry[];\n  /** 能选哪几种，默认只有人员 */\n  types?: readonly PeopleType[];\n  /** 最多选几个；1 时只选一个 */\n  max?: number;\n  /** 记“最近选过的”用的键（存在浏览器里） */\n  recentKey?: string;\n  /** 没有选时的占位，也是对话框的标题；默认“选择人员” */\n  placeholder?: string;\n  /** 多选时最多显示几个标签，其余收进“+N”；'responsive' 时排成一行按宽度放 */\n  maxTagCount?: number | 'responsive';\n  /** 不可用；也可由 Field 提供 */\n  disabled?: boolean;\n  /** 只读：不能打开、不能移除；也可由 Field 提供 */\n  readonly?: boolean;\n  /** 必填；也可由 Field 提供 */\n  required?: boolean;\n  /** 校验未通过；也可由 Field 提供 */\n  invalid?: boolean;\n  /** 外壳的部件属性 */\n  propsRoot?: PartProps<'div'>;\n  /** 标签那一排的部件属性 */\n  propsTags?: Partial<SelectedTagsProps>;\n  /** 对话框的部件属性 */\n  propsDialog?: Partial<DialogProps>;\n  /** 面板的部件属性 */\n  propsPanel?: Partial<PeoplePickerPanelProps>;\n}\n\n/** 人员与组织选择器 */\nexport const PeoplePicker = _component(\n  ({\n    source,\n    _value: value = _bindable<readonly PeopleEntry[]>([]),\n    types,\n    max,\n    recentKey,\n    placeholder,\n    maxTagCount,\n    variant,\n    size,\n    radius,\n    disabled,\n    readonly,\n    required,\n    invalid,\n    id,\n    propsRoot,\n    propsTags,\n    propsDialog,\n    propsPanel,\n    ...rest\n  }: PeoplePickerProps) => {\n    const lang = useLang();\n    const appearance = useControlAppearance(() => ({ variant, size, radius }));\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    let open = _state(false);\n    // 对话框里改的是草稿：确定才写回\n    let draft = _state<readonly PeopleEntry[]>([]);\n    let trigger = _state.raw<HTMLElement | null>(null);\n\n    const locked = () => control().disabled || control().readonly;\n\n    function show() {\n      if (locked()) return;\n      draft = [...value];\n      open = true;\n    }\n\n    function remove(key: string) {\n      value = value.filter((entry) => peopleKey(entry) !== key);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (locked()) return;\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        show();\n      } else if (event.key === 'Backspace' && value.length > 0) {\n        event.preventDefault();\n        value = value.slice(0, -1);\n      }\n    }\n\n    return () => {\n      const state = control();\n      const s = controlParts(appearance(), state);\n      const title = placeholder ?? lang.peoplePlaceholder;\n      const tagged = max !== 1 && value.length > 0;\n      const shown =\n        value.length === 0 ? (\n          <span {...css.attrs(selectStyles.placeholder)}>{title}</span>\n        ) : tagged ? (\n          <span {...css.attrs(visuallyHiddenStyles.hidden)}>\n            {lang.selectSummary(value.map((entry) => entry.name))}\n          </span>\n        ) : (\n          value[0]!.name\n        );\n      return (\n        <>\n          <div\n            {...mergeAttrs<'div'>({ ...s.root, sx: [s.root.sx, selectStyles.root] }, propsRoot, {\n              onPointerdown: state.disabled ? undefined : focusOnShell(() => trigger),\n              onClick: locked() ? undefined : clickOnShell(() => trigger, show),\n            })}\n            data-invalid={state.invalid || undefined}\n            data-disabled={state.disabled || undefined}\n          >\n            {tagged && (\n              <SelectedTags\n                {...mergePartProps<SelectedTagsProps>(\n                  {\n                    tags: value.map((entry) => ({ value: peopleKey(entry), label: entry.name })),\n                    maxTagCount,\n                    onRemove: locked() ? undefined : remove,\n                  },\n                  propsTags,\n                )}\n              />\n            )}\n            <button\n              {...mergeAttrs<'button'>(\n                {\n                  sx: [\n                    buttonBaseStyles.root,\n                    selectStyles.trigger,\n                    tagged && selectStyles.triggerBehindTags,\n                  ],\n                },\n                rest,\n                {\n                  ref: (element: unknown) => (trigger = element as HTMLElement | null),\n                  id: state.id,\n                  type: 'button',\n                  disabled: state.disabled,\n                  'aria-haspopup': 'dialog',\n                  'aria-expanded': open,\n                  'aria-invalid': state.invalid || undefined,\n                  'aria-required': state.required || undefined,\n                  'aria-readonly': state.readonly || undefined,\n                  'aria-describedby': state.describedBy,\n                  onClick: () => {\n                    trigger?.focus();\n                    show();\n                  },\n                  onKeydown,\n                },\n              )}\n            >\n              <span {...css.attrs(selectStyles.value)}>{shown}</span>\n            </button>\n            <Icon {...s.icon} icon={UsersRound} />\n          </div>\n          <Dialog\n            {...mergePartProps<DialogProps>(\n              {\n                size: 'lg',\n                title,\n                onConfirm: () => {\n                  value = draft;\n                },\n              },\n              propsDialog,\n            )}\n            _open={open}\n          >\n            <PeoplePickerPanel\n              {...mergePartProps<PeoplePickerPanelProps>(\n                // 打开对话框时焦点在搜索框里，直接就能输入\n                { source, types, max, recentKey, propsSearch: { autofocus: true } },\n                propsPanel,\n              )}\n              _value={draft}\n            />\n          </Dialog>\n        </>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/PeoplePickerPanel.d.ts

@@ -0,0 +1,42 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+import { type PeopleEntry, type PeopleSource, type PeopleType } from './people';
+import { type TextFieldProps } from './TextField';
+/** 未声明的属性落到外层 div 上 */
+export interface PeoplePickerPanelProps extends PartProps<'div'> {
+    /** 数据来源 */
+    source: PeopleSource;
+    /** 选中的：父级写 _value={list} 双向绑定 */
+    _value?: readonly PeopleEntry[];
+    /** 能选哪几种，默认只有人员 */
+    types?: readonly PeopleType[];
+    /** 最多选几个；1 时勾一个就换掉原来的 */
+    max?: number;
+    /** 记“最近选过的”用的键（存在浏览器里）；不写时没有“最近”页 */
+    recentKey?: string;
+    /** 两边列表的高度（CSS 长度），默认 '20rem' */
+    listHeight?: string;
+    /** 左边的部件属性 */
+    propsBrowse?: PartProps<'div'>;
+    /** 右边的部件属性 */
+    propsSelected?: PartProps<'div'>;
+    /** 搜索框的部件属性 */
+    propsSearch?: Partial<TextFieldProps>;
+}
+/** PeoplePickerPanel 的样式：root、grid、browse、selected、header、list、start */
+export declare const peoplePickerPanelStyles: Readonly<{
+    browse: css.CompiledStyles;
+    grid: css.CompiledStyles;
+    header: css.CompiledStyles;
+    list: css.CompiledStyles;
+    root: css.CompiledStyles;
+    selected: css.CompiledStyles;
+    start: css.CompiledStyles;
+    status: css.CompiledStyles;
+}>;
+/** 随属性变的样式：列表的高度 */
+export declare const peoplePickerPanelDynamicStyles: Readonly<{
+    readonly height: (height: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 人员与组织选择面板 */
+export declare const PeoplePickerPanel: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PeoplePickerPanelProps>;