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

package/dist/input/ControlGroup.js

@@ -0,0 +1,50 @@
+import { mergeAttrs } from "../utils/props.js";
+import { AttachedContext } from "../utils/style/attached.js";
+import { useFieldControl } from "../form/Field.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/ControlGroup.tsx
+/** 角色由组件管理 */
+/** 未声明的属性落到 div 上；aria-label 是这组输入的名称 */
+/** ControlGroup 的样式：root、inline、vertical */
+var controlGroupStyles = css.create({
+	root: {
+		display: "flex",
+		alignItems: "stretch",
+		width: "100%"
+	},
+	inline: {
+		display: "inline-flex",
+		width: "auto"
+	},
+	vertical: { flexDirection: "column" }
+});
+/** 组合输入：相连的一排输入框与按钮 */
+var ControlGroup = /*#__PURE__*/ _component((_props, _ctx) => {
+	const orientation = readonlyProp(_props, "orientation", "horizontal");
+	const inline = readonlyProp(_props, "inline", false);
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const field = useFieldControl(() => ({}));
+	AttachedContext.provide({ get orientation() {
+		return orientation.value;
+	} });
+	return () => createVNode("div", mergeAttrs({
+		id: field().id,
+		"aria-labelledby": field().labelledBy,
+		"aria-describedby": field().describedBy,
+		sx: [
+			controlGroupStyles.root,
+			inline.value && controlGroupStyles.inline,
+			orientation.value === "vertical" && controlGroupStyles.vertical
+		]
+	}, rest, { role: "group" }), [children.value]);
+}, {
+	name: "ControlGroup",
+	props: ["orientation", "inline"]
+});
+//#endregion
+export { ControlGroup, controlGroupStyles };
+
+//# sourceMappingURL=ControlGroup.js.map

package/dist/input/ControlGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlGroup.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/input/ControlGroup.tsx"],"sourcesContent":["/**\n * 组合输入（div，role=\"group\"）：输入框、选择框、按钮连成一条，共用边框：币种 + 金额、协议 + 域名、搜索框 + 搜索按钮。\n *\n *   <ControlGroup aria-label=\"金额\">\n *     <Select items={currencies} _value={currency} aria-label=\"币种\" style=\"width: 6rem\" />\n *     <NumberField _value={amount} aria-label=\"金额\" />\n *   </ControlGroup>\n *\n * 里面的输入框外壳与按钮家族经 AttachedContext 得知自己在组里：去掉相邻一侧的圆角、边框叠在一起，\n * 聚焦的那个浮到上面，焦点环完整。输入框默认占满剩余宽度，选择框、按钮按内容宽。\n * 只有文字的前后缀（单位、https://）用输入框自己的 prefix / suffix，不必拆成两个控件。\n * 放在 Field 里时组是 Field 的控件：标签、说明经 aria-labelledby / aria-describedby 关联到组，点标签聚焦第一个控件；\n * 里面的各个控件不再拿 Field 的 id（会重复），各自写 aria-label。\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 { AttachedContext, type AttachedOrientations } from '../utils/style/attached';\n\n/** 角色由组件管理 */\nexport type ControlGroupManaged = 'role';\n\n/** 未声明的属性落到 div 上；aria-label 是这组输入的名称 */\nexport interface ControlGroupProps extends PartProps<'div', ControlGroupManaged> {\n  /**\n   * 排列方向\n   * @default 'horizontal'\n   */\n  orientation?: keyof AttachedOrientations;\n  /** 不占满一行（行内排列），默认占满 */\n  inline?: boolean;\n  /** 输入框、选择框、按钮 */\n  children?: VNodeChild;\n}\n\n/** ControlGroup 的样式：root、inline、vertical */\nexport const controlGroupStyles = css.create({\n  // 输入框外壳（:not(button)）分掉剩余宽度；按钮、选择框的触发器按内容宽\n  root: { display: 'flex', alignItems: 'stretch', width: '100%' },\n  inline: { display: 'inline-flex', width: 'auto' },\n  vertical: { flexDirection: 'column' },\n});\n\n/** 组合输入：相连的一排输入框与按钮 */\nexport const ControlGroup = _component(\n  ({ orientation = 'horizontal', inline = false, children, ...rest }: ControlGroupProps) => {\n    // 组接 Field：里面的控件与 Field 隔开，不重复拿它的 id 与说明\n    const field = useFieldControl(() => ({}));\n    AttachedContext.provide({\n      get orientation() {\n        return orientation;\n      },\n    });\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            id: field().id,\n            'aria-labelledby': field().labelledBy,\n            'aria-describedby': field().describedBy,\n            sx: [\n              controlGroupStyles.root,\n              inline && controlGroupStyles.inline,\n              orientation === 'vertical' && controlGroupStyles.vertical,\n            ],\n          },\n          rest,\n          { role: 'group' },\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAsCA,IAAa,qBAAqB,IAAI,OAAO;CAE3C,MAAM;EAAE,SAAS;EAAQ,YAAY;EAAW,OAAO;CAAO;CAC9D,QAAQ;EAAE,SAAS;EAAe,OAAO;CAAO;CAChD,UAAU,EAAE,eAAe,SAAS;AACtC,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAA0F;CAAA,MAAA,cAAAA,aAAA,QAAA,eAAzE,YAAY;CAAA,MAAA,SAAAA,aAAA,QAAA,UAAW,KAAK;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAe,OAAIC,UAAA,QAAA,MAAA,KAAA;CAE9D,MAAM,QAAQ,uBAAuB,CAAC,EAAE;CACxC,gBAAgB,QAAQ,EACtB,IAAI,cAAc;EAChB,OAAA,YAAA;CACF,EACF,CAAC;CACD,aAAOC,YAAA,OAEC,WACF;EACE,IAAI,MAAM,CAAC,CAAC;EACZ,mBAAmB,MAAM,CAAC,CAAC;EAC3B,oBAAoB,MAAM,CAAC,CAAC;EAC5B,IAAI;GACF,mBAAmB;GACnB,OAAA,SAAU,mBAAmB;GAC7B,YAAA,UAAgB,cAAc,mBAAmB;EAAQ;CAE7D,GACA,MACA,EAAE,MAAM,QAAQ,CAClB,GAAC,CAAA,SAAA,KAAA,CAAA;AAKP,GAAC;CAAA,MAAA;CAAA,OAAA,CAAA,eAAA,QAAA;AAAA,CACH"}

package/dist/input/FileDrop.d.ts

@@ -0,0 +1,49 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconProps } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+/** 文件是否符合 accept（`image/*`、`.pdf`、`application/json` 这样的逗号分隔列表）；accept 为空时都符合 */
+export declare function matchesAccept(file: File, accept: string | undefined): boolean;
+/** 文件、不可用、必填由组件管理；未声明的属性落到 input 上，外层 label 用 propsRoot */
+export interface FileDropProps extends PartProps<'input', 'type' | 'disabled' | 'required' | 'aria-invalid' | 'aria-describedby'> {
+    /** 接受的文件类型（同原生 accept） */
+    accept?: string;
+    /** 可以选多个 */
+    multiple?: boolean;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 必填 */
+    required?: boolean;
+    /** 只读：不能选文件（同不可用，文件输入框没有原生的只读） */
+    readonly?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 选到了文件（已按 accept 过滤） */
+    onFiles?: (files: File[]) => void;
+    /** 拖进来的文件里不在 accept 里的 */
+    onReject?: (files: File[]) => void;
+    /** 提示文字下面的说明（大小、类型限制） */
+    description?: VNodeChild;
+    /** 外层 label 的部件属性 */
+    propsRoot?: PartProps<'label'>;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 提示文字的部件属性 */
+    propsHint?: PartProps<'span'>;
+    /** 提示文字下面的说明的部件属性 */
+    propsDescription?: PartProps<'span'>;
+    /** 区域里的内容；默认是图标、提示文字（取语言包）与 description */
+    children?: VNodeChild;
+}
+/** FileDrop 的样式：root、dragging、disabled、invalid、icon、hint、description */
+export declare const fileDropStyles: Readonly<{
+    description: css.CompiledStyles;
+    disabled: css.CompiledStyles;
+    dragging: css.CompiledStyles;
+    hint: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    invalid: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 选择文件的区域：点击打开文件对话框，或把文件拖进来 */
+export declare const FileDrop: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<FileDropProps>;

package/dist/input/FileDrop.js

@@ -0,0 +1,201 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.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 { Fragment, createVNode, mergeProps, ref } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Upload } from "@lucide/icons";
+//#region src/input/FileDrop.tsx
+/**
+* 选择文件的区域（label > input[type=file]）：点击（或聚焦后按 Enter / 空格）打开文件对话框，也可以把文件拖进来。
+* 只负责选文件：选到的文件经 onFiles 交出去，不在 accept 里的经 onReject 交出去（拖放不受 accept 限制，这里补上）。
+* 列表、进度、重试见 Upload（建在它上面）。
+*
+*   <FileDrop accept="image/*" multiple onFiles={(files) => add(files)} />
+*
+* 原生 input 只是视觉上隐藏，焦点、键盘、读屏都是浏览器的；区域的文字是它的名称。拖着文件经过时写 data-dragging。
+* 在 Field 里时关联标签、说明与错误。部件：Root（label）、Input（input）、Icon、Hint（提示文字）、Description（说明）。
+*/
+/** 文件是否符合 accept（`image/*`、`.pdf`、`application/json` 这样的逗号分隔列表）；accept 为空时都符合 */
+function matchesAccept(file, accept) {
+	const rules = (accept ?? "").split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+	if (rules.length === 0) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return rules.some((rule) => {
+		if (rule.startsWith(".")) return name.endsWith(rule);
+		if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+		return type === rule;
+	});
+}
+/** 文件、不可用、必填由组件管理；未声明的属性落到 input 上，外层 label 用 propsRoot */
+/** FileDrop 的样式：root、dragging、disabled、invalid、icon、hint、description */
+var fileDropStyles = css.create({
+	root: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "_xs",
+		width: "_full",
+		minHeight: "8em",
+		padding: "_lg",
+		borderWidth: "_sm",
+		borderStyle: "dashed",
+		borderColor: {
+			default: "_borderStrong",
+			":hover": "_accent"
+		},
+		borderRadius: "_md",
+		backgroundColor: "_surface",
+		color: "_text",
+		textAlign: "center",
+		cursor: "pointer",
+		transition: `border-color ${t.durations.sm} ${t.easings.standard}, background-color ${t.durations.sm} ${t.easings.standard}`
+	},
+	dragging: {
+		borderColor: "_accent",
+		backgroundColor: "_accentSoft"
+	},
+	disabled: {
+		opacity: "_disabled",
+		cursor: "not-allowed"
+	},
+	invalid: { borderColor: "_danger" },
+	icon: {
+		width: "1.5em",
+		height: "1.5em",
+		color: "_textMuted"
+	},
+	hint: { fontWeight: "_medium" },
+	description: {
+		fontSize: "_sm",
+		color: "_textMuted"
+	}
+});
+/** 选择文件的区域：点击打开文件对话框，或把文件拖进来 */
+var FileDrop = /*#__PURE__*/ _component((_props, _ctx) => {
+	const accept = readonlyProp(_props, "accept");
+	const multiple = readonlyProp(_props, "multiple", false);
+	const disabled = readonlyProp(_props, "disabled");
+	const required = readonlyProp(_props, "required");
+	const readonly = readonlyProp(_props, "readonly");
+	const invalid = readonlyProp(_props, "invalid");
+	const onFiles = readonlyProp(_props, "onFiles");
+	const onReject = readonlyProp(_props, "onReject");
+	const description = readonlyProp(_props, "description");
+	const id = readonlyProp(_props, "id");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsHint = readonlyProp(_props, "propsHint");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	const locked = () => control().disabled || control().readonly;
+	let dragging = ref(false);
+	let depth = 0;
+	function deliver(list) {
+		const files = [...list ?? []];
+		const accepted = files.filter((file) => matchesAccept(file, accept.value));
+		const rejected = files.filter((file) => !accepted.includes(file));
+		const taken = multiple.value ? accepted : accepted.slice(0, 1);
+		if (taken.length > 0) onFiles.value?.(taken);
+		if (rejected.length > 0) onReject.value?.(rejected);
+	}
+	function onChange(event) {
+		const input = event.target;
+		deliver(input.files);
+		input.value = "";
+	}
+	const accepting = (event) => !locked() && (event.dataTransfer?.types.includes("Files") ?? false);
+	const dragHandlers = {
+		onDragenter: (event) => {
+			if (!accepting(event)) return;
+			event.preventDefault();
+			depth++;
+			dragging.value = true;
+		},
+		onDragover: (event) => {
+			if (!accepting(event)) return;
+			event.preventDefault();
+			event.dataTransfer.dropEffect = "copy";
+		},
+		onDragleave: () => {
+			depth = Math.max(0, depth - 1);
+			if (depth === 0) dragging.value = false;
+		},
+		onDrop: (event) => {
+			if (!accepting(event)) return;
+			event.preventDefault();
+			depth = 0;
+			dragging.value = false;
+			deliver(event.dataTransfer?.files);
+		}
+	};
+	return () => {
+		const field = control();
+		return createVNode("label", mergeProps(mergeAttrs({ sx: [
+			fileDropStyles.root,
+			focusRingStyles.hasVisible,
+			dragging.value && fileDropStyles.dragging,
+			field.invalid && fileDropStyles.invalid,
+			(field.disabled || field.readonly) && fileDropStyles.disabled
+		] }, propsRoot.value, dragHandlers), {
+			"data-dragging": dragging.value || void 0,
+			"data-disabled": field.disabled || void 0,
+			"data-readonly": field.readonly || void 0
+		}), [createVNode("input", mergeAttrs({ sx: visuallyHiddenStyles.hidden }, rest, {
+			type: "file",
+			id: field.id,
+			accept: accept.value,
+			multiple: multiple.value,
+			disabled: field.disabled || field.readonly,
+			required: field.required,
+			"aria-invalid": field.invalid || void 0,
+			"aria-describedby": field.describedBy,
+			onChange
+		}), null), children.value ?? createVNode(Fragment, null, [
+			createVNode(Icon, mergePartProps({
+				icon: Upload,
+				sx: fileDropStyles.icon
+			}, propsIcon.value), null),
+			createVNode("span", mergeAttrs({ sx: fileDropStyles.hint }, propsHint.value), [lang.fileDrop]),
+			hasContent(description.value) && createVNode("span", mergeAttrs({ sx: fileDropStyles.description }, propsDescription.value), [description.value])
+		])]);
+	};
+}, {
+	name: "FileDrop",
+	props: [
+		"accept",
+		"multiple",
+		"disabled",
+		"required",
+		"readonly",
+		"invalid",
+		"onFiles",
+		"onReject",
+		"description",
+		"id",
+		"propsRoot",
+		"propsIcon",
+		"propsHint",
+		"propsDescription"
+	]
+});
+//#endregion
+export { FileDrop, fileDropStyles, matchesAccept };
+
+//# sourceMappingURL=FileDrop.js.map

package/dist/input/FileDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDrop.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps","_Fragment","UploadIcon"],"sources":["../../src/input/FileDrop.tsx"],"sourcesContent":["/**\n * 选择文件的区域（label > input[type=file]）：点击（或聚焦后按 Enter / 空格）打开文件对话框，也可以把文件拖进来。\n * 只负责选文件：选到的文件经 onFiles 交出去，不在 accept 里的经 onReject 交出去（拖放不受 accept 限制，这里补上）。\n * 列表、进度、重试见 Upload（建在它上面）。\n *\n *   <FileDrop accept=\"image/*\" multiple onFiles={(files) => add(files)} />\n *\n * 原生 input 只是视觉上隐藏，焦点、键盘、读屏都是浏览器的；区域的文字是它的名称。拖着文件经过时写 data-dragging。\n * 在 Field 里时关联标签、说明与错误。部件：Root（label）、Input（input）、Icon、Hint（提示文字）、Description（说明）。\n */\nimport { Upload as UploadIcon } 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 { VNodeChild } from 'vue';\nimport { Icon, type IconProps } from '../base/Icon';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { useLang } from '../config/context';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { useFieldControl } from '../form/Field';\nimport { t } from '../config/theme/tokens';\n\n/** 文件是否符合 accept（`image/*`、`.pdf`、`application/json` 这样的逗号分隔列表）；accept 为空时都符合 */\nexport function matchesAccept(file: File, accept: string | undefined): boolean {\n  const rules = (accept ?? '')\n    .split(',')\n    .map((rule) => rule.trim().toLowerCase())\n    .filter(Boolean);\n  if (rules.length === 0) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return rules.some((rule) => {\n    if (rule.startsWith('.')) return name.endsWith(rule);\n    if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1));\n    return type === rule;\n  });\n}\n\n/** 文件、不可用、必填由组件管理；未声明的属性落到 input 上，外层 label 用 propsRoot */\nexport interface FileDropProps extends PartProps<\n  'input',\n  'type' | 'disabled' | 'required' | 'aria-invalid' | 'aria-describedby'\n> {\n  /** 接受的文件类型（同原生 accept） */\n  accept?: string;\n  /** 可以选多个 */\n  multiple?: boolean;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 只读：不能选文件（同不可用，文件输入框没有原生的只读） */\n  readonly?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 选到了文件（已按 accept 过滤） */\n  onFiles?: (files: File[]) => void;\n  /** 拖进来的文件里不在 accept 里的 */\n  onReject?: (files: File[]) => void;\n  /** 提示文字下面的说明（大小、类型限制） */\n  description?: VNodeChild;\n  /** 外层 label 的部件属性 */\n  propsRoot?: PartProps<'label'>;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 提示文字的部件属性 */\n  propsHint?: PartProps<'span'>;\n  /** 提示文字下面的说明的部件属性 */\n  propsDescription?: PartProps<'span'>;\n  /** 区域里的内容；默认是图标、提示文字（取语言包）与 description */\n  children?: VNodeChild;\n}\n\n/** FileDrop 的样式：root、dragging、disabled、invalid、icon、hint、description */\nexport const fileDropStyles = css.create({\n  root: {\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_xs',\n    width: '_full',\n    minHeight: '8em',\n    padding: '_lg',\n    borderWidth: '_sm',\n    borderStyle: 'dashed',\n    borderColor: { default: '_borderStrong', ':hover': '_accent' },\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    color: '_text',\n    textAlign: 'center',\n    cursor: 'pointer',\n    transition: `border-color ${t.durations.sm} ${t.easings.standard}, background-color ${t.durations.sm} ${t.easings.standard}`,\n  },\n  dragging: { borderColor: '_accent', backgroundColor: '_accentSoft' },\n  disabled: { opacity: '_disabled', cursor: 'not-allowed' },\n  invalid: { borderColor: '_danger' },\n  icon: { width: '1.5em', height: '1.5em', color: '_textMuted' },\n  hint: { fontWeight: '_medium' },\n  description: { fontSize: '_sm', color: '_textMuted' },\n});\n\n/** 选择文件的区域：点击打开文件对话框，或把文件拖进来 */\nexport const FileDrop = _component(\n  ({\n    accept,\n    multiple = false,\n    disabled,\n    required,\n    readonly,\n    invalid,\n    onFiles,\n    onReject,\n    description,\n    id,\n    propsRoot,\n    propsIcon,\n    propsHint,\n    propsDescription,\n    children,\n    ...rest\n  }: FileDropProps) => {\n    const lang = useLang();\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    const locked = () => control().disabled || control().readonly;\n    let dragging = _state(false);\n    // dragenter / dragleave 在子元素之间也会触发：计数，回到 0 才算离开\n    let depth = 0;\n\n    function deliver(list: FileList | null | undefined) {\n      const files = [...(list ?? [])];\n      const accepted = files.filter((file) => matchesAccept(file, accept));\n      const rejected = files.filter((file) => !accepted.includes(file));\n      const taken = multiple ? accepted : accepted.slice(0, 1);\n      if (taken.length > 0) onFiles?.(taken);\n      if (rejected.length > 0) onReject?.(rejected);\n    }\n\n    function onChange(event: Event) {\n      const input = event.target as HTMLInputElement;\n      deliver(input.files);\n      // 清空：再选同一个文件也会触发 change\n      input.value = '';\n    }\n\n    const accepting = (event: DragEvent) =>\n      !locked() && (event.dataTransfer?.types.includes('Files') ?? false);\n\n    const dragHandlers = {\n      onDragenter: (event: DragEvent) => {\n        if (!accepting(event)) return;\n        event.preventDefault();\n        depth++;\n        dragging = true;\n      },\n      onDragover: (event: DragEvent) => {\n        if (!accepting(event)) return;\n        // 不阻止默认行为就不会触发 drop\n        event.preventDefault();\n        event.dataTransfer!.dropEffect = 'copy';\n      },\n      onDragleave: () => {\n        depth = Math.max(0, depth - 1);\n        if (depth === 0) dragging = false;\n      },\n      onDrop: (event: DragEvent) => {\n        if (!accepting(event)) return;\n        event.preventDefault();\n        depth = 0;\n        dragging = false;\n        deliver(event.dataTransfer?.files);\n      },\n    };\n\n    return () => {\n      const field = control();\n      return (\n        <label\n          {...mergeAttrs<'label'>(\n            {\n              sx: [\n                fileDropStyles.root,\n                // 原生 input 视觉上隐藏，焦点环画在整个区域上\n                focusRingStyles.hasVisible,\n                dragging && fileDropStyles.dragging,\n                field.invalid && fileDropStyles.invalid,\n                (field.disabled || field.readonly) && fileDropStyles.disabled,\n              ],\n            },\n            propsRoot,\n            dragHandlers,\n          )}\n          data-dragging={dragging || undefined}\n          data-disabled={field.disabled || undefined}\n          data-readonly={field.readonly || undefined}\n        >\n          <input\n            {...mergeAttrs<'input'>({ sx: visuallyHiddenStyles.hidden }, rest, {\n              type: 'file',\n              id: field.id,\n              accept,\n              multiple,\n              disabled: field.disabled || field.readonly,\n              required: field.required,\n              'aria-invalid': field.invalid || undefined,\n              'aria-describedby': field.describedBy,\n              onChange,\n            })}\n          />\n          {children ?? (\n            <>\n              <Icon\n                {...mergePartProps<IconProps>(\n                  { icon: UploadIcon, sx: fileDropStyles.icon },\n                  propsIcon,\n                )}\n              />\n              <span {...mergeAttrs<'span'>({ sx: fileDropStyles.hint }, propsHint)}>\n                {lang.fileDrop}\n              </span>\n              {hasContent(description) && (\n                <span {...mergeAttrs<'span'>({ sx: fileDropStyles.description }, propsDescription)}>\n                  {description}\n                </span>\n              )}\n            </>\n          )}\n        </label>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/ListPopover.d.ts

@@ -0,0 +1,39 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { Ref, VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import type { TextSize } from '../utils/style/typography';
+import { type ListboxViewProps } from './Listbox';
+/** 弹层的属性由组件管理 */
+export type ListPopoverManaged = 'popover';
+/** ListPopover 的属性 */
+export interface ListPopoverProps<T> {
+    /** 面板元素（父组件里 _toRef(panel)）：交给 useAnchoredPopover 定位 */
+    panelRef: Ref<HTMLElement | null>;
+    /** 面板的 toggle 事件：交给 useAnchoredPopover，同步开关状态 */
+    onToggle: (event: ToggleEvent) => void;
+    /** 字号档位：同输入框外壳 */
+    size?: TextSize;
+    /** 列表的名称：外部标签的 id（有它时优先） */
+    labelledBy?: string;
+    /** 列表的名称：没有外部标签时用这段文字（aria-label） */
+    label?: string;
+    /** 加载中：列表显示骨架或顶部进度条 */
+    loading?: boolean;
+    /** 点选了一项 */
+    onPick?: (value: string) => void;
+    /** 列表的组件自己给的属性（list、id、渲染方式…），使用方的 propsListbox 可以覆盖 */
+    listbox: ListboxViewProps<T>;
+    /** 列表上方、不随列表滚动的内容（Select 的搜索框） */
+    header?: VNodeChild;
+    /** 使用方给列表的部件属性 */
+    propsListbox?: Partial<ListboxViewProps<T>>;
+    /** 使用方给弹层面板的部件属性 */
+    propsPopover?: PartProps<'div', ListPopoverManaged>;
+}
+/** ListPopover 的样式：panel、header */
+export declare const listPopoverStyles: Readonly<{
+    header: css.CompiledStyles;
+    panel: css.CompiledStyles;
+}>;
+/** 选项弹出层：锚定的面板、浮层滚动条与选项列表 */
+export declare const ListPopover: <T>(props: ListPopoverProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/input/ListPopover.js

@@ -0,0 +1,81 @@
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { toElement } from "../utils/dom/element.js";
+import { anchoredPanelSx, floatingStyles } from "../utils/dom/floating.js";
+import { ListboxView } from "./Listbox.js";
+import { createVNode, shallowRef } from "vue";
+import { _component, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/ListPopover.tsx
+/** 弹层的属性由组件管理 */
+/** ListPopover 的属性 */
+/** ListPopover 的样式：panel、header */
+var listPopoverStyles = css.create({
+	panel: { maxWidth: "calc(100vw - 2em)" },
+	header: {
+		flexShrink: 0,
+		padding: "_xs",
+		borderBlockEndWidth: "_xs",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_borderMuted"
+	}
+});
+/** 选项弹出层：锚定的面板、浮层滚动条与选项列表 */
+var ListPopover = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const panelRef = readonlyProp(_props, "panelRef");
+	const onToggle = readonlyProp(_props, "onToggle");
+	const size = readonlyProp(_props, "size");
+	const labelledBy = readonlyProp(_props, "labelledBy");
+	const label = readonlyProp(_props, "label");
+	const loading = readonlyProp(_props, "loading");
+	const onPick = readonlyProp(_props, "onPick");
+	const listbox = readonlyProp(_props, "listbox");
+	const header = readonlyProp(_props, "header");
+	const propsListbox = readonlyProp(_props, "propsListbox");
+	const propsPopover = readonlyProp(_props, "propsPopover");
+	let scroller = shallowRef(null);
+	return () => createVNode("div", mergeAttrs({ sx: [
+		anchoredPanelSx(size.value),
+		floatingStyles.scrollPanel,
+		listPopoverStyles.panel
+	] }, propsPopover.value, {
+		ref: panelRef.value,
+		popover: "auto",
+		onToggle: onToggle.value
+	}), [hasContent(header.value) && createVNode("div", css.attrs(listPopoverStyles.header), [header.value]), createVNode(ScrollArea, {
+		"focusable": false,
+		"sx": floatingStyles.scrollArea,
+		"propsViewport": _cache[0] || (_cache[0] = { ref: (element) => scroller.value = toElement(element) }),
+		"key": "__site0"
+	}, {
+		default: () => [createVNode(ListboxView, mergePartProps(listbox.value, propsListbox.value, {
+			id: listbox.value.id,
+			scroller: scroller.value,
+			loading: loading.value,
+			"aria-labelledby": labelledBy.value,
+			"aria-label": labelledBy.value ? void 0 : label.value,
+			onPick: onPick.value
+		}), null)],
+		$stable: true
+	})]);
+}, {
+	name: "ListPopover",
+	props: [
+		"panelRef",
+		"onToggle",
+		"size",
+		"labelledBy",
+		"label",
+		"loading",
+		"onPick",
+		"listbox",
+		"header",
+		"propsListbox",
+		"propsPopover"
+	]
+});
+//#endregion
+export { ListPopover, listPopoverStyles };
+
+//# sourceMappingURL=ListPopover.js.map

package/dist/input/ListPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListPopover.js","names":["_vtp_readonlyProp","_vue_shallowRef","_createVNode"],"sources":["../../src/input/ListPopover.tsx"],"sourcesContent":["/**\n * 选项弹出层（div popover=\"auto\"）：Select、Combobox、TagsInput 共用。锚定的浮层面板、浮层滚动条，\n * 里面是虚拟滚动的选项列表（ListboxView，滚动容器就是这里的 ScrollArea 视口）。\n *\n *   const { onToggle } = useAnchoredPopover(…, panel, …);\n *   <ListPopover panelRef={_toRef(panel)} onToggle={onToggle} size={size} label={…}\n *     listbox={{ list, id, empty, renderOption }} propsListbox={propsListbox} onPick={pick} />\n *\n * 开关与定位由父组件的 useAnchoredPopover 管（它要拿到面板元素）；这里只负责渲染。\n * 弹层渲染在顶层、不是输入框外壳的后代，不继承外壳的字号：按同一个 size 设置。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { Ref, VNodeChild } from 'vue';\nimport { ScrollArea } from '../layout/ScrollArea';\nimport { anchoredPanelSx, floatingStyles } from '../utils/dom/floating';\nimport { toElement } from '../utils/dom/element';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport { ListboxView, type ListboxViewProps } from './Listbox';\n\n/** 弹层的属性由组件管理 */\nexport type ListPopoverManaged = 'popover';\n\n/** ListPopover 的属性 */\nexport interface ListPopoverProps<T> {\n  /** 面板元素（父组件里 _toRef(panel)）：交给 useAnchoredPopover 定位 */\n  panelRef: Ref<HTMLElement | null>;\n  /** 面板的 toggle 事件：交给 useAnchoredPopover，同步开关状态 */\n  onToggle: (event: ToggleEvent) => void;\n  /** 字号档位：同输入框外壳 */\n  size?: TextSize;\n  /** 列表的名称：外部标签的 id（有它时优先） */\n  labelledBy?: string;\n  /** 列表的名称：没有外部标签时用这段文字（aria-label） */\n  label?: string;\n  /** 加载中：列表显示骨架或顶部进度条 */\n  loading?: boolean;\n  /** 点选了一项 */\n  onPick?: (value: string) => void;\n  /** 列表的组件自己给的属性（list、id、渲染方式…），使用方的 propsListbox 可以覆盖 */\n  listbox: ListboxViewProps<T>;\n  /** 列表上方、不随列表滚动的内容（Select 的搜索框） */\n  header?: VNodeChild;\n  /** 使用方给列表的部件属性 */\n  propsListbox?: Partial<ListboxViewProps<T>>;\n  /** 使用方给弹层面板的部件属性 */\n  propsPopover?: PartProps<'div', ListPopoverManaged>;\n}\n\n/** ListPopover 的样式：panel、header */\nexport const listPopoverStyles = css.create({\n  panel: { maxWidth: 'calc(100vw - 2em)' },\n  header: {\n    flexShrink: 0,\n    padding: '_xs',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_borderMuted',\n  },\n});\n\n/** 选项弹出层：锚定的面板、浮层滚动条与选项列表 */\nexport const ListPopover = _component(\n  <T,>({\n    panelRef,\n    onToggle,\n    size,\n    labelledBy,\n    label,\n    loading,\n    onPick,\n    listbox,\n    header,\n    propsListbox,\n    propsPopover,\n  }: ListPopoverProps<T>) => {\n    let scroller = _state.raw<HTMLElement | null>(null);\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [anchoredPanelSx(size), floatingStyles.scrollPanel, listPopoverStyles.panel],\n          },\n          propsPopover,\n          { ref: panelRef, popover: 'auto', onToggle },\n        )}\n      >\n        {/* 使用方常写 cond && <…/>：false 同 undefined，不渲染带分隔线的空头部 */}\n        {hasContent(header) && <div {...css.attrs(listPopoverStyles.header)}>{header}</div>}\n        <ScrollArea\n          focusable={false}\n          sx={floatingStyles.scrollArea}\n          propsViewport={{ ref: (element: unknown) => (scroller = toElement(element)) }}\n        >\n          <ListboxView\n            {...mergePartProps<ListboxViewProps<T>>(listbox, propsListbox, {\n              id: listbox.id,\n              // 这里的 ScrollArea 视口是滚动容器：选项虚拟滚动\n              scroller,\n              loading,\n              'aria-labelledby': labelledBy,\n              'aria-label': labelledBy ? undefined : label,\n              onPick,\n            })}\n          />\n        </ScrollArea>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAmDA,IAAa,oBAAoB,IAAI,OAAO;CAC1C,OAAO,EAAE,UAAU,oBAAoB;CACvC,QAAQ;EACN,YAAY;EACZ,SAAS;EACT,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;CACvB;AACF,CAAC;;AAGD,IAAa,cAAc,0BACzB,QAAA,SAY2B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CACzB,IAAI,WAAQC,WAAkC,IAAI;CAClD,aAAOC,YAAA,OAEC,WACF,EACE,IAAI;EAAC,gBAAe,KAAA,KAAK;EAAG,eAAe;EAAa,kBAAkB;CAAK,EACjF,GAAC,aAAA,OAED;EAAE,KAAG,SAAA;EAAY,SAAS;EAAQ,UAAQ,SAAA;CAAC,CAC7C,GAAC,CAGA,WAAU,OAAA,KAAO,KAACA,YAAA,OAAa,IAAI,MAAM,kBAAkB,MAAM,GAAC,CAAA,OAAA,KAAA,CAAA,GAAgBA,YAAA,YAAA;EAAA,aAEtE;EAAK,MACZ,eAAe;EAAU,iBAAA,OAAA,OAAA,OAAA,KACd,EAAE,MAAM,YAAsB,SAAA,QAAW,UAAU,OAAO,EAAG;EAAC,OAAA;CAAA,GAAA;EAAA,eAAA,CAAAA,YAAA,aAGvE,eAAc,QAAA,OAAA,aAAA,OAA6C;GAC7D,IAAI,QAAA,MAAQ;GAEZ,UAAQ,SAAA;GACR,SAAO,QAAA;GACP,mBAAiB,WAAA;GACjB,cAAc,WAAA,QAAa,KAAA,IAAS,MAAA;GACpC,QAAM,OAAA;EACR,CAAC,GAAC,IAAA,CAAA;EAAA,SAAA;CAAA,CAAA,CAAA,CAAA;AAKZ,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/input/Listbox.d.ts

@@ -0,0 +1,91 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type IconProps } from '../base/Icon';
+import { type TextProps } from '../base/Text';
+import { type EmptyProps } from '../feedback/Empty';
+import { type SkeletonShapeProps } from '../feedback/Skeleton';
+import { type PartProps } from '../utils/props';
+import { type SelectionProps } from '../utils/data/selection';
+import { type ListboxOption, type ListState, type OptionMapping } from './list-state';
+/** 选项的渲染状态：渲染函数据此画高亮、已选的样子 */
+export interface OptionRenderState {
+    /** 已选 */
+    selected: boolean;
+    /** 高亮（键盘或指针所在） */
+    active: boolean;
+}
+/** 选项的部件属性：可以按选项（items 里的原始数据）计算 */
+type OptionProps<T> = PartProps<'div', 'role' | 'id' | 'aria-selected' | 'aria-disabled'> | ((item: T, state: OptionRenderState) => PartProps<'div'>);
+/** ListboxView 的属性：Listbox、Select、Combobox 共用的渲染层 */
+export interface ListboxViewProps<T> extends PartProps<'div', 'role'> {
+    /** 列表状态（useListState） */
+    list: ListState<T>;
+    /** 列表的 id；选项的 id 是 `${id}-${序号}`（aria-activedescendant 指向它） */
+    id: string;
+    /** 多选：aria-multiselectable */
+    multiple?: boolean;
+    /** 滚动容器：Select、Combobox 的弹出层；不给时列表自己滚动（ScrollArea 的浮层滚动条，最高 20em，用 sx 改） */
+    scroller?: HTMLElement | null;
+    /** 加载中：没有选项时显示骨架行，有选项时顶部显示进度条 */
+    loading?: boolean;
+    /** 选项的估计高度（px），默认 36；渲染后以实际高度为准 */
+    estimateSize?: number;
+    /** 自定义选项内容：拿到 items 里的原始数据 */
+    renderOption?: (item: T, state: OptionRenderState) => VNodeChild;
+    /** 没有选项时显示的内容；默认是 Empty（文案取语言包） */
+    empty?: VNodeChild;
+    /** 点选了一项（点击或 Enter，再选已选的那项也会调用）：Select、弹层里的列表据此关闭 */
+    onPick?: (value: string) => void;
+    /** 选项的部件属性 */
+    propsOption?: OptionProps<T>;
+    /** 分组标题的部件属性 */
+    propsGroupLabel?: Partial<TextProps>;
+    /** 已选标记的部件属性 */
+    propsCheck?: Partial<IconProps>;
+    /** 空状态的部件属性 */
+    propsEmpty?: Partial<EmptyProps>;
+    /** 加载中占位行的部件属性 */
+    propsSkeleton?: SkeletonShapeProps;
+}
+/** Listbox 的样式：root、scroll、sizer、row、groupLabel、content 等 */
+export declare const listboxStyles: Readonly<{
+    check: css.CompiledStyles;
+    content: css.CompiledStyles;
+    description: css.CompiledStyles;
+    groupLabel: css.CompiledStyles;
+    hidden: css.CompiledStyles;
+    progress: css.CompiledStyles;
+    root: css.CompiledStyles;
+    row: css.CompiledStyles;
+    scroll: css.CompiledStyles;
+    sizer: css.CompiledStyles;
+    skeleton: css.CompiledStyles;
+}>;
+/** Listbox 的样式：y、height、width */
+export declare const listboxPositionStyles: Readonly<{
+    readonly y: (px: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly height: (px: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly width: (percent: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 列表的渲染层：虚拟滚动的选项、分组标题、已选标记、空状态与加载中；不管焦点，指针悬停高亮、点击选中 */
+export declare const ListboxView: <T>(props: ListboxViewProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;
+/** 高亮项的 id（给 aria-activedescendant）；没有高亮时 undefined */
+export declare function activeOptionId<T>(list: ListState<T>, id: string): string | undefined;
+/** 列表框共有的属性；未声明的属性落到 role="listbox" 的 div 上 */
+export interface ListboxBaseProps<T> extends Omit<ListboxViewProps<T>, 'list' | 'id' | 'multiple' | 'renderOption'> {
+    /** 列表的 id；在 Field 里时默认用 Field 给的 */
+    id?: string;
+    /** 数据：ListboxOption、字符串，或任意数据加 toOption */
+    items: readonly T[];
+    /** 必须有选中项：单选时再点已选项不取消；在必填的 Field 里默认开启 */
+    required?: boolean;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 自定义选项内容：`{(item, { selected, active }) => …}`，拿到 items 里的原始数据 */
+    children?: (item: T, state: OptionRenderState) => VNodeChild;
+}
+/** 单选或多选；items 不是 ListboxOption 或字符串时要给 toOption */
+export type ListboxProps<T = ListboxOption> = ListboxBaseProps<T> & SelectionProps & OptionMapping<T>;
+/** 列表框：焦点在列表上，方向键移动高亮、Enter / 空格选中 */
+export declare const Listbox: <T>(props: ListboxProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;
+export {};