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

package/dist/input/Switch.js

@@ -0,0 +1,198 @@
+import { t } from "../config/theme/tokens.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { useDelayedLoading } from "../utils/motion/delayed-loading.js";
+import { Spinner } from "../base/Spinner.js";
+import { useFieldControl } from "../form/Field.js";
+import { choiceInputStyles, choiceParts, syncChecked, useChoiceAppearance } from "./choice-styles.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/Switch.tsx
+/** 角色、勾选状态与可用性由组件管理；原生的 size 属性让给字号档位 */
+/** 未声明的属性落到 input 上；外层 label 用 propsRoot */
+/** Switch 的样式：track、trackWide、trackOff、thumb、thumbOn、content、contentOn、contentOff、contentHidden、contentText、spinner */
+var switchStyles = css.create({
+	track: {
+		width: "2.25em",
+		height: "1.25em",
+		borderRadius: "_full",
+		borderColor: "transparent"
+	},
+	trackWide: {
+		width: "_full",
+		minWidth: "2.25em"
+	},
+	trackOff: { backgroundColor: "_borderStrong" },
+	thumb: {
+		display: "grid",
+		placeItems: "center",
+		justifySelf: "start",
+		width: "0.875em",
+		height: "0.875em",
+		marginInlineStart: "0.1875em",
+		borderRadius: "_full",
+		backgroundColor: "_background",
+		boxShadow: "_sm",
+		transition: `margin-inline-start ${t.durations.sm} ${t.easings.standard}`
+	},
+	thumbOn: {
+		marginInlineStart: "calc(100% - 1.0625em)",
+		backgroundColor: "var(--tone-on-fill)"
+	},
+	content: {
+		gridArea: "1 / 1",
+		justifySelf: "stretch",
+		alignSelf: "center",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		whiteSpace: "nowrap",
+		pointerEvents: "none"
+	},
+	contentOn: {
+		paddingInlineStart: "0.5em",
+		paddingInlineEnd: "1.375em",
+		color: "var(--tone-on-fill)"
+	},
+	contentOff: {
+		paddingInlineStart: "1.375em",
+		paddingInlineEnd: "0.5em",
+		color: "_text"
+	},
+	contentHidden: { visibility: "hidden" },
+	contentText: {
+		display: "flex",
+		alignItems: "center",
+		fontSize: "_xs",
+		fontWeight: "_semibold",
+		lineHeight: 1
+	},
+	spinner: {
+		width: "0.75em",
+		height: "0.75em",
+		color: "var(--tone-fill)"
+	}
+});
+/** 开关：立即生效的开 / 关 */
+var Switch = /*#__PURE__*/ _component((_props, _ctx) => {
+	const checked = bindable(_props, "_checked", () => false, _ctx.emit);
+	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 loading = readonlyProp(_props, "loading", false);
+	const checkedContent = readonlyProp(_props, "checkedContent");
+	const uncheckedContent = readonlyProp(_props, "uncheckedContent");
+	const id = readonlyProp(_props, "id");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsControl = readonlyProp(_props, "propsControl");
+	const propsThumb = readonlyProp(_props, "propsThumb");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const propsContentText = readonlyProp(_props, "propsContentText");
+	const propsSpinner = readonlyProp(_props, "propsSpinner");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}));
+	const appearance = useChoiceAppearance(() => ({
+		size: size.value,
+		tone: tone.value
+	}));
+	const spinner = useDelayedLoading(() => loading.value);
+	return () => {
+		const state = control();
+		const s = choiceParts(appearance(), {
+			disabled: state.disabled,
+			readonly: state.readonly
+		});
+		const wide = checkedContent.value != null || uncheckedContent.value != null;
+		const content = (on, child) => createVNode("span", mergeAttrs({ sx: [
+			switchStyles.content,
+			on ? switchStyles.contentOn : switchStyles.contentOff,
+			on !== checked.value && switchStyles.contentHidden
+		] }, propsContent.value, { "aria-hidden": true }), [createVNode("span", mergeAttrs({ sx: switchStyles.contentText }, propsContentText.value), [child])]);
+		return createVNode("label", mergeProps(mergeAttrs(s.root, propsRoot.value), {
+			"data-state": checked.value ? "checked" : "unchecked",
+			"data-disabled": state.disabled || void 0,
+			"data-readonly": state.readonly || void 0,
+			"data-loading": loading.value || void 0
+		}), [createVNode("span", mergeAttrs(s.control, propsControl.value), [
+			createVNode("input", mergeAttrs({
+				...s.input,
+				sx: [
+					s.input.sx,
+					focusRingStyles.tight,
+					switchStyles.track,
+					wide && switchStyles.trackWide,
+					checked.value ? choiceInputStyles.checked : switchStyles.trackOff,
+					state.invalid && choiceInputStyles.invalid
+				]
+			}, rest, {
+				type: "checkbox",
+				role: "switch",
+				id: state.id,
+				checked: checked.value,
+				disabled: state.disabled,
+				required: state.required,
+				"aria-invalid": state.invalid || void 0,
+				"aria-readonly": state.readonly || void 0,
+				"aria-describedby": state.describedBy,
+				"aria-busy": loading.value || void 0,
+				onClick: (event) => {
+					if (loading.value || state.readonly) event.preventDefault();
+				},
+				onChange: (event) => {
+					const target = event.target;
+					checked.value = target.checked;
+					syncChecked([target], () => checked.value);
+				}
+			}), null),
+			wide && content(true, checkedContent.value),
+			wide && content(false, uncheckedContent.value),
+			createVNode("span", mergeAttrs({
+				...s.indicator,
+				sx: [
+					s.indicator.sx,
+					switchStyles.thumb,
+					checked.value && switchStyles.thumbOn
+				]
+			}, propsThumb.value), [spinner.value && createVNode(Spinner, mergePartProps({ propsIcon: { sx: switchStyles.spinner } }, propsSpinner.value), null)])
+		]), hasContent(children.value) && createVNode("span", mergeAttrs(s.label, propsLabel.value), [children.value])]);
+	};
+}, {
+	name: "Switch",
+	props: [
+		"_checked",
+		"onUpdate:_checked",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"size",
+		"tone",
+		"loading",
+		"checkedContent",
+		"uncheckedContent",
+		"id",
+		"propsRoot",
+		"propsControl",
+		"propsThumb",
+		"propsContent",
+		"propsContentText",
+		"propsSpinner",
+		"propsLabel"
+	]
+});
+//#endregion
+export { Switch, switchStyles };
+
+//# sourceMappingURL=Switch.js.map

package/dist/input/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/input/Switch.tsx"],"sourcesContent":["/**\n * 开关（原生 input type=\"checkbox\" + role=\"switch\"）：立即生效的开 / 关设置，如“接收通知”。\n * 需要提交才生效的选项用 Checkbox。结构与样式见 choice-styles.ts：input 画成轨道，滑块叠在上面。\n *\n *   <Switch _checked={notify}>接收通知</Switch>\n *\n * 读屏念“开关，开 / 关”；空格切换（原生）。在 Field 里时关联说明与错误、沿用其状态。\n * 切换要等接口时用 loading：滑块里转圈、点击无效。轨道里可以放文字或图标（checkedContent / uncheckedContent），对读屏隐藏。\n * 部件：Root（label）、Control（叠放层）、Thumb（滑块）、Content（轨道里的文字）、ContentText（文字的字号层）、Spinner、Label（文字）；未声明的属性落到 input 上。\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 { Spinner, type SpinnerProps } from '../base/Spinner';\nimport { useDelayedLoading } from '../utils/motion/delayed-loading';\nimport { hasContent, mergeAttrs, mergePartProps, 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 { choiceInputStyles, choiceParts, syncChecked, useChoiceAppearance } from './choice-styles';\nimport { t } from '../config/theme/tokens';\n\n/** 角色、勾选状态与可用性由组件管理；原生的 size 属性让给字号档位 */\nexport type SwitchManaged =\n  | 'type'\n  | 'role'\n  | 'checked'\n  | 'disabled'\n  | 'required'\n  | 'size'\n  | 'aria-invalid'\n  | 'aria-describedby'\n  | 'aria-busy';\n\n/** 未声明的属性落到 input 上；外层 label 用 propsRoot */\nexport interface SwitchProps extends PartProps<'input', SwitchManaged> {\n  /** 是否打开：父级写 _checked={x} */\n  _checked?: boolean;\n  /** 不可用 */\n  disabled?: boolean;\n  /** 只读：能聚焦、读屏念“只读”，不能切换（查看详情、审批时）；外观照常 */\n  readonly?: boolean;\n  /** 必填 */\n  required?: boolean;\n  /** 校验未通过 */\n  invalid?: boolean;\n  /** 切换中（如等接口返回）：滑块里显示加载指示，点击无效，带 aria-busy */\n  loading?: boolean;\n  /** 打开时轨道里的文字或图标（如“开”、对勾）；给了它或 uncheckedContent 时轨道随内容加宽 */\n  checkedContent?: VNodeChild;\n  /** 关闭时轨道里的文字或图标 */\n  uncheckedContent?: VNodeChild;\n  /** 字号档位；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 打开时轨道的色调（与 Button、Badge 等同一套），默认 accent；可以用 defaults.Choice 统一改 */\n  tone?: StatusTone;\n  /** 外层 label 的部件属性 */\n  propsRoot?: PartProps<'label'>;\n  /** 叠放层的部件属性 */\n  propsControl?: PartProps<'span'>;\n  /** 滑块的部件属性 */\n  propsThumb?: PartProps<'span'>;\n  /** 轨道里文字（开、关两份）的部件属性 */\n  propsContent?: PartProps<'span'>;\n  /** 轨道里文字的内层（定字号、字重）的部件属性；改字号写这里，外层的内边距才仍按开关的字号算 */\n  propsContentText?: PartProps<'span'>;\n  /** 加载指示的部件属性 */\n  propsSpinner?: Partial<SpinnerProps>;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 文字 */\n  children?: VNodeChild;\n}\n\n/** Switch 的样式：track、trackWide、trackOff、thumb、thumbOn、content、contentOn、contentOff、contentHidden、contentText、spinner */\nexport const switchStyles = css.create({\n  track: { width: '2.25em', height: '1.25em', borderRadius: '_full', borderColor: 'transparent' },\n  // 轨道里有文字：宽度随文字（两份文字叠在同一格里，取较宽的，切换时宽度不跳）\n  trackWide: { width: '_full', minWidth: '2.25em' },\n  trackOff: { backgroundColor: '_borderStrong' },\n  // 滑块靠起始边，打开后移到结束边：用逻辑方向的外边距，从右到左排版自动反过来\n  thumb: {\n    display: 'grid',\n    placeItems: 'center',\n    justifySelf: 'start',\n    width: '0.875em',\n    height: '0.875em',\n    marginInlineStart: '0.1875em',\n    borderRadius: '_full',\n    backgroundColor: '_background',\n    boxShadow: '_sm',\n    transition: `margin-inline-start ${t.durations.sm} ${t.easings.standard}`,\n  },\n  // 移到结束边：百分比相对整条轨道，轨道随文字加宽时同样贴边\n  thumbOn: { marginInlineStart: 'calc(100% - 1.0625em)', backgroundColor: 'var(--tone-on-fill)' },\n  // 用 flex 居中：按行内文字排时随外层的行高落在基线上，图标会比轨道中线偏下\n  content: {\n    gridArea: '1 / 1',\n    justifySelf: 'stretch',\n    alignSelf: 'center',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    whiteSpace: 'nowrap',\n    pointerEvents: 'none',\n  },\n  // 文字在滑块的另一侧\n  contentOn: {\n    paddingInlineStart: '0.5em',\n    paddingInlineEnd: '1.375em',\n    color: 'var(--tone-on-fill)',\n  },\n  contentOff: { paddingInlineStart: '1.375em', paddingInlineEnd: '0.5em', color: '_text' },\n  contentHidden: { visibility: 'hidden' },\n  // 字号缩在里层：外层的内边距按开关的字号算，给滑块留的位置才够\n  contentText: {\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: '_xs',\n    fontWeight: '_semibold',\n    lineHeight: 1,\n  },\n  spinner: { width: '0.75em', height: '0.75em', color: 'var(--tone-fill)' },\n});\n\n/** 开关：立即生效的开 / 关 */\nexport const Switch = _component(\n  ({\n    _checked: checked = _bindable(false),\n    disabled,\n    readonly,\n    required,\n    invalid,\n    size,\n    tone,\n    loading = false,\n    checkedContent,\n    uncheckedContent,\n    id,\n    propsRoot,\n    propsControl,\n    propsThumb,\n    propsContent,\n    propsContentText,\n    propsSpinner,\n    propsLabel,\n    children,\n    ...rest\n  }: SwitchProps) => {\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }));\n    const appearance = useChoiceAppearance(() => ({ size, tone }));\n    // 很快完成的切换不闪加载指示；点击拦截、aria-busy 按真实的 loading\n    const spinner = useDelayedLoading(() => loading);\n    return () => {\n      const state = control();\n      const s = choiceParts(appearance(), { disabled: state.disabled, readonly: state.readonly });\n      const wide = checkedContent != null || uncheckedContent != null;\n      const content = (on: boolean, child: VNodeChild) => (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              sx: [\n                switchStyles.content,\n                on ? switchStyles.contentOn : switchStyles.contentOff,\n                on !== checked && switchStyles.contentHidden,\n              ],\n            },\n            propsContent,\n            { 'aria-hidden': true },\n          )}\n        >\n          <span {...mergeAttrs<'span'>({ sx: switchStyles.contentText }, propsContentText)}>\n            {child}\n          </span>\n        </span>\n      );\n      return (\n        <label\n          {...mergeAttrs<'label'>(s.root, propsRoot)}\n          data-state={checked ? 'checked' : 'unchecked'}\n          data-disabled={state.disabled || undefined}\n          data-readonly={state.readonly || undefined}\n          data-loading={loading || 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                    switchStyles.track,\n                    wide && switchStyles.trackWide,\n                    checked ? choiceInputStyles.checked : switchStyles.trackOff,\n                    state.invalid && choiceInputStyles.invalid,\n                  ],\n                },\n                rest,\n                {\n                  type: 'checkbox',\n                  role: 'switch',\n                  id: state.id,\n                  checked,\n                  disabled: state.disabled,\n                  required: state.required,\n                  'aria-invalid': state.invalid || undefined,\n                  'aria-readonly': state.readonly || undefined,\n                  'aria-describedby': state.describedBy,\n                  'aria-busy': loading || undefined,\n                  // 切换中、只读时不接受切换：拦下 click，勾选状态就不变\n                  onClick: (event: MouseEvent) => {\n                    if (loading || state.readonly) event.preventDefault();\n                  },\n                  onChange: (event: Event) => {\n                    const target = event.target as HTMLInputElement;\n                    checked = target.checked;\n                    syncChecked([target], () => checked);\n                  },\n                },\n              )}\n            />\n            {wide && content(true, checkedContent)}\n            {wide && content(false, uncheckedContent)}\n            <span\n              {...mergeAttrs<'span'>(\n                {\n                  ...s.indicator,\n                  sx: [s.indicator.sx, switchStyles.thumb, checked && switchStyles.thumbOn],\n                },\n                propsThumb,\n              )}\n            >\n              {spinner.value && (\n                <Spinner\n                  {...mergePartProps<SpinnerProps>(\n                    { propsIcon: { sx: switchStyles.spinner } },\n                    propsSpinner,\n                  )}\n                />\n              )}\n            </span>\n          </span>\n          {hasContent(children) && (\n            <span {...mergeAttrs<'span'>(s.label, propsLabel)}>{children}</span>\n          )}\n        </label>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/input/TagsInput.d.ts

@@ -0,0 +1,70 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import type { PresetIconButtonProps } from '../base/CloseButton';
+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 ControlIconOptions, type ControlOptions } from './control';
+import { type ListboxViewProps, type OptionRenderState } from './Listbox';
+import { type ListboxOption, type OptionMapping } from './list-state';
+/** 角色、展开状态与可用性由组件管理 */
+export type TagsInputManaged = 'value' | 'role' | 'size' | 'disabled' | 'readonly' | 'autocomplete' | 'aria-autocomplete' | 'aria-expanded' | 'aria-controls' | 'aria-activedescendant' | 'aria-invalid' | 'aria-required' | 'aria-describedby';
+/** TagsInput 除 toOption 外的属性；未声明的属性落到 input（主元素）上，外壳用 propsRoot */
+export interface TagsInputBaseProps<T> extends PartProps<'input', TagsInputManaged>, ControlOptions, ControlIconOptions, OpenChangeProps {
+    /** 已选的值：父级写 _value={list} */
+    _value?: string[];
+    /** 建议：ListboxOption、字符串，或任意数据加 toOption；不给时是纯自由输入 */
+    items?: readonly T[];
+    /** 允许加入不在建议里的文字，默认 true */
+    allowCustomValue?: boolean;
+    /** 失焦时把输入框里还没确认的文字加成标签，默认 true（同 Mantine）；false 时文字留在框里 */
+    acceptOnBlur?: boolean;
+    /** 把输入拆成标签的分隔符，默认 [',', '，', ';', '；']；回车与粘贴里的换行总是分隔 */
+    delimiters?: readonly string[];
+    /** 最多几个标签；到了上限不再加入 */
+    max?: number;
+    /** 输入框里的文字：父级可以写 _inputValue={x}（异步取建议时据此搜索） */
+    _inputValue?: string;
+    /** 建议列表是否打开 */
+    _open?: boolean;
+    /** 过滤建议：默认按显示文字包含输入；false 不过滤（异步搜索） */
+    filter?: false | ((item: T, query: string) => boolean);
+    /** 正在取建议 */
+    loading?: boolean;
+    /** 弹出位置，默认 bottom-start */
+    placement?: FloatingPlacement;
+    /** 有标签时显示清空按钮 */
+    clearable?: boolean;
+    /** 表单提交时的 name（每个值一个隐藏的 input） */
+    name?: string;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 只读：标签不能移除，不能输入 */
+    readonly?: boolean;
+    /** 必填：至少要有一个标签（读屏念“必填”；校验交给表单） */
+    required?: boolean;
+    /** 校验未通过 */
+    invalid?: boolean;
+    /** 自定义建议的内容 */
+    children?: (item: T, state: OptionRenderState) => VNodeChild;
+    /** 外壳的部件属性 */
+    propsRoot?: PartProps<'div'>;
+    /** 每个标签的部件属性，可以按值计算 */
+    propsTag?: Partial<TagProps> | ((value: string) => Partial<TagProps>);
+    /** 清空按钮的部件属性 */
+    propsClear?: Partial<PresetIconButtonProps>;
+    /** 弹出层的部件属性 */
+    propsPopover?: PartProps<'div', 'id' | 'popover'>;
+    /** 建议列表的部件属性 */
+    propsListbox?: Partial<ListboxViewProps<T>>;
+}
+/** 标签输入的属性；items 不是 ListboxOption 或字符串时要给 toOption */
+export type TagsInputProps<T = ListboxOption> = TagsInputBaseProps<T> & OptionMapping<T>;
+/** TagsInput 的样式：root、input、popover */
+export declare const tagsInputStyles: Readonly<{
+    input: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 标签输入：输入框里排着 Tag，回车或分隔符加入，退格删最后一个 */
+export declare const TagsInput: <T = ListboxOption>(props: TagsInputProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/input/TagsInput.js

@@ -0,0 +1,314 @@
+import { useTextMatcher } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Tag } from "../base/Tag.js";
+import { useAnchoredPopover } from "../utils/dom/floating.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { useLayoutAnimation } from "../utils/motion/layout.js";
+import { useFieldControl } from "../form/Field.js";
+import { isComposingKey } from "../utils/dom/hotkeys.js";
+import { handleListKeydown, toListboxOption, useListState, useSelectedOptions } from "./list-state.js";
+import { controlClear, controlIcon, controlParts, focusOnShell, useControlAppearance } from "./control.js";
+import { activeOptionId } from "./Listbox.js";
+import { FormValue } from "../form/FormValue.js";
+import { ListPopover } from "./ListPopover.js";
+import { Fragment, createVNode, isVNode, mergeProps, shallowRef, useId, vModelText, watch, withDirectives } from "vue";
+import { _component, bindable, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/input/TagsInput.tsx
+/** 角色、展开状态与可用性由组件管理 */
+/** TagsInput 除 toOption 外的属性；未声明的属性落到 input（主元素）上，外壳用 propsRoot */
+/** 标签输入的属性；items 不是 ListboxOption 或字符串时要给 toOption */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** TagsInput 的样式：root、input、popover */
+var tagsInputStyles = css.create({
+	root: {
+		flexWrap: "wrap",
+		rowGap: "_xs",
+		paddingBlock: "_xs"
+	},
+	input: { flexBasis: "6em" }
+});
+/** 默认的分隔符：英文、中文的逗号与分号 */
+var DELIMITERS = [
+	",",
+	"，",
+	";",
+	"；"
+];
+/** 标签输入：输入框里排着 Tag，回车或分隔符加入，退格删最后一个 */
+var TagsInput = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const value = bindable(_props, "_value", () => [], _ctx.emit);
+	const items = readonlyProp(_props, "items", () => []);
+	const toOption = readonlyProp(_props, "toOption");
+	const allowCustomValue = readonlyProp(_props, "allowCustomValue", true);
+	const acceptOnBlur = readonlyProp(_props, "acceptOnBlur", true);
+	const delimiters = readonlyProp(_props, "delimiters", () => DELIMITERS);
+	const max = readonlyProp(_props, "max");
+	const inputValue = bindable(_props, "_inputValue", () => "", _ctx.emit);
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const filter = readonlyProp(_props, "filter");
+	const loading = readonlyProp(_props, "loading", false);
+	const placement = readonlyProp(_props, "placement", "bottom-start");
+	const clearable = readonlyProp(_props, "clearable", false);
+	const name = readonlyProp(_props, "name");
+	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 children = childrenProp(_props);
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const icon = readonlyProp(_props, "icon");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsTag = readonlyProp(_props, "propsTag");
+	const propsClear = readonlyProp(_props, "propsClear");
+	const propsPopover = readonlyProp(_props, "propsPopover");
+	const propsListbox = readonlyProp(_props, "propsListbox");
+	const rest = restProps(_props, _ctx, false);
+	const textMatcher = useTextMatcher();
+	const listId = useId();
+	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 shell = shallowRef(null);
+	let input = shallowRef(null);
+	let panel = shallowRef(null);
+	const layout = useLayoutAnimation(() => shell.value, { children: "[data-tag]" });
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	const optionOf = (item) => toListboxOption(item, toOption.value);
+	const suggestions = () => items.value.length > 0 || filter.value === false;
+	const selectedOf = useSelectedOptions({
+		items: () => items.value,
+		toOption: optionOf
+	});
+	const labelOf = (tag) => selectedOf([tag])[0].label;
+	const list = useListState({
+		items: () => {
+			const query = inputValue.value.trim();
+			if (filter.value === false || !query) return items.value;
+			const matcher = textMatcher();
+			return items.value.filter((item) => filter.value ? filter.value(item, query) : matcher(optionOf(item).label, query));
+		},
+		toOption: optionOf,
+		selected: () => value.value,
+		mode: () => "multiple",
+		onChange: (next) => void layout.change(() => value.value = [...next])
+	});
+	/** 把一段文字变成值：是建议的文字或值时取建议的值，否则（允许时）原样 */
+	function resolve(text) {
+		const trimmed = text.trim();
+		if (!trimmed) return void 0;
+		const item = items.value.find((candidate) => {
+			const option = optionOf(candidate);
+			return option.value === trimmed || option.label === trimmed;
+		});
+		if (item !== void 0) return optionOf(item).value;
+		return allowCustomValue.value ? trimmed : void 0;
+	}
+	/** 加入几段文字；重复的、超出上限的不加；返回是否加入了 */
+	function add(texts) {
+		const next = [...value.value];
+		for (const text of texts) {
+			const tag = resolve(text);
+			if (tag === void 0 || next.includes(tag) || max.value != null && next.length >= max.value) continue;
+			next.push(tag);
+		}
+		if (next.length === value.value.length) return false;
+		layout.change(() => value.value = next);
+		return true;
+	}
+	const remove = (tag) => void layout.change(() => value.value = value.value.filter((item) => item !== tag));
+	const splitter = () => new RegExp(`[${[
+		...delimiters.value,
+		"\n",
+		"\r",
+		"	"
+	].map((d) => d.replace(/[\\\]^-]/g, "\\$&")).join("")}]`);
+	watch(() => inputValue.value, (text) => {
+		const parts = text.split(splitter());
+		if (parts.length > 1) {
+			add(parts.slice(0, -1));
+			inputValue.value = parts.at(-1);
+			return;
+		}
+		if (suggestions() && text && !control().readonly) {
+			setOpen(true, "trigger");
+			list.move("first");
+		}
+	});
+	function onKeydown(event) {
+		const state = control();
+		if (state.disabled || state.readonly || isComposingKey(event)) return;
+		if (event.key === "Backspace" && !inputValue.value && value.value.length) {
+			event.preventDefault();
+			remove(value.value.at(-1));
+			return;
+		}
+		if (open.value && suggestions()) {
+			if (handleListKeydown(list, event, { homeEnd: false })) {
+				event.preventDefault();
+				if (event.key === "Enter") inputValue.value = "";
+				return;
+			}
+		} else if (event.key === "ArrowDown" && suggestions()) {
+			event.preventDefault();
+			list.activateDefault();
+			setOpen(true, "trigger", event);
+			return;
+		}
+		if (event.key === "Enter" && inputValue.value.trim()) {
+			event.preventDefault();
+			if (add([inputValue.value])) inputValue.value = "";
+		}
+	}
+	function onPaste(event) {
+		const parts = (event.clipboardData?.getData("text") ?? "").split(splitter());
+		if (parts.length < 2) return;
+		event.preventDefault();
+		add(parts);
+	}
+	const { onToggle } = useAnchoredPopover(() => ({
+		open: open.value && suggestions(),
+		anchor: shell.value,
+		panel: panel.value,
+		floating: {
+			placement: placement.value,
+			matchWidth: true,
+			fitHeight: true
+		},
+		restoreFocus: false
+	}), { close: (reason, event) => setOpen(false, reason, event) });
+	return () => {
+		const state = control();
+		const s = controlParts(appearance(), state);
+		const editable = !state.disabled && !state.readonly;
+		return createVNode(Fragment, null, [createVNode("div", mergeProps(mergeAttrs({
+			...s.root,
+			sx: [s.root.sx, tagsInputStyles.root]
+		}, propsRoot.value, {
+			ref: shell,
+			"aria-disabled": state.disabled || void 0,
+			onPointerdown: focusOnShell(() => input.value)
+		}), {
+			"data-state": open.value ? "open" : "closed",
+			"data-invalid": state.invalid || void 0,
+			"data-disabled": state.disabled || void 0
+		}), [
+			controlIcon(s, icon.value, propsIcon.value),
+			value.value.map((tag) => {
+				let _slot;
+				const own = typeof propsTag.value === "function" ? propsTag.value(tag) : propsTag.value;
+				return createVNode(Tag, mergeProps({ "key": tag }, mergePartProps({ variant: "surface" }, own, { onRemove: editable ? () => remove(tag) : void 0 }), { "data-tag": "" }), _isSlot(_slot = labelOf(tag)) ? _slot : { default: () => [_slot] });
+			}),
+			withDirectives(createVNode("input", mergeProps(mergeAttrs({
+				...s.input,
+				sx: [s.input.sx, tagsInputStyles.input]
+			}, rest, {
+				ref: input,
+				id: state.id,
+				role: suggestions() ? "combobox" : void 0,
+				autocomplete: "off",
+				disabled: state.disabled,
+				readonly: state.readonly,
+				"aria-autocomplete": suggestions() ? "list" : void 0,
+				"aria-expanded": suggestions() ? open.value : void 0,
+				"aria-controls": suggestions() ? listId : void 0,
+				"aria-activedescendant": open.value && suggestions() ? activeOptionId(list, listId) : void 0,
+				"aria-invalid": state.invalid || void 0,
+				"aria-required": state.required || void 0,
+				"aria-describedby": state.describedBy,
+				onKeydown,
+				onPaste,
+				onBlur: (event) => {
+					setOpen(false, "focus", event);
+					if (acceptOnBlur.value && inputValue.value.trim() && !control().readonly && add([inputValue.value])) inputValue.value = "";
+				}
+			}), { "onUpdate:modelValue": ($event) => inputValue.value = $event }), null), [[vModelText, inputValue.value]]),
+			clearable.value && value.value.length > 0 && editable && controlClear(s, propsClear.value, () => {
+				layout.change(() => value.value = []);
+				input.value?.focus();
+			}),
+			createVNode(FormValue, {
+				"name": name.value,
+				"value": value.value,
+				"disabled": state.disabled
+			}, null)
+		]), suggestions() && createVNode(ListPopover, {
+			"panelRef": panel,
+			"onToggle": onToggle,
+			"size": appearance().size,
+			"labelledBy": state.labelledBy,
+			"label": rest["aria-label"],
+			"loading": loading.value,
+			"onPick": _cache[0] || (_cache[0] = () => {
+				inputValue.value = "";
+				input.value?.focus();
+			}),
+			"listbox": {
+				list,
+				id: listId,
+				multiple: true,
+				renderOption: children.value
+			},
+			"propsListbox": propsListbox.value,
+			"propsPopover": propsPopover.value
+		}, null)]);
+	};
+}, {
+	name: "TagsInput",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"items",
+		"toOption",
+		"allowCustomValue",
+		"acceptOnBlur",
+		"delimiters",
+		"max",
+		"_inputValue",
+		"onUpdate:_inputValue",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"filter",
+		"loading",
+		"placement",
+		"clearable",
+		"name",
+		"variant",
+		"size",
+		"radius",
+		"disabled",
+		"readonly",
+		"required",
+		"invalid",
+		"id",
+		"propsRoot",
+		"icon",
+		"propsIcon",
+		"propsTag",
+		"propsClear",
+		"propsPopover",
+		"propsListbox"
+	]
+});
+//#endregion
+export { TagsInput, tagsInputStyles };
+
+//# sourceMappingURL=TagsInput.js.map