@astryx-vue/core 0.2.5 → 0.3.0

package/dist/Tokenizer-rwzamZg4.js

@@ -1,473 +0,0 @@
-import { t as useAnnounce } from "./announce-Cnio10Wk.js";
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
-import { t as _sfc_main$1 } from "./Field-8zRxzDHE.js";
-import { t as _sfc_main$2 } from "./Token-D2GsI_Ei.js";
-import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-BN9LQnon.js";
-import { r as useTypeaheadMenu, t as _sfc_main$3 } from "./TypeaheadMenu-BEObzonz.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
-import "../styles/visually-hidden-utility.css";
-import "../styles/typeahead.css";
-import "../styles/tokenizer.css";
-//#region src/Tokenizer/Tokenizer.vue
-const _hoisted_1 = {
-	key: 0,
-	class: "astryx-tokenizer-icon",
-	"aria-hidden": "true"
-};
-const _hoisted_2 = ["onKeydown"];
-const _hoisted_3 = {
-	key: 0,
-	class: "astryx-tokenizer-more"
-};
-const _hoisted_4 = {
-	class: "astryx-tokenizer-more",
-	"data-overflow-indicator": ""
-};
-const _hoisted_5 = [
-	"placeholder",
-	"value",
-	"disabled",
-	"readonly",
-	"aria-disabled",
-	"aria-expanded",
-	"aria-activedescendant",
-	"aria-describedby",
-	"aria-required",
-	"title"
-];
-const _hoisted_6 = ["aria-label"];
-const _hoisted_7 = [
-	"name",
-	"value",
-	"disabled"
-];
-const _hoisted_8 = ["aria-label", "data-placement"];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxTokenizer",
-	inheritAttrs: false,
-	__name: "Tokenizer",
-	props: {
-		modelValue: { default: () => [] },
-		searchSource: {},
-		label: {},
-		labelHidden: {
-			type: Boolean,
-			default: false
-		},
-		description: {},
-		placeholder: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		disabledReason: {},
-		status: { default: "default" },
-		statusMessage: {},
-		size: { default: "md" },
-		clearable: {
-			type: Boolean,
-			default: false
-		},
-		debounceMs: { default: 150 },
-		maxMenuItems: { default: 10 },
-		showOnFocus: {
-			type: Boolean,
-			default: false
-		},
-		emptyText: {},
-		maxEntries: {},
-		creatable: {
-			type: Boolean,
-			default: false
-		},
-		overflow: { default: "none" },
-		required: {
-			type: Boolean,
-			default: false
-		},
-		optional: {
-			type: Boolean,
-			default: false
-		},
-		name: {},
-		width: {}
-	},
-	emits: [
-		"update:modelValue",
-		"change",
-		"search",
-		"openChange"
-	],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const messages = useAstryxMessages();
-		const inputId = `astryx-tokenizer-${useId()}`;
-		const listboxId = `${inputId}-listbox`;
-		const disabledId = `${inputId}-disabled`;
-		const values = computed(() => props.modelValue ?? []);
-		const focused = ref(false);
-		const placeholderHeight = ref(0);
-		const announce = useAnnounce();
-		const anchorRef = useTemplateRef("anchorRef");
-		const listboxRef = useTemplateRef("listboxRef");
-		const inputRef = useTemplateRef("inputRef");
-		const tokenEls = /* @__PURE__ */ new Map();
-		const placeholder = computed(() => props.placeholder ?? messages.value.tokenizer.placeholder);
-		const emptyText = computed(() => props.emptyText ?? messages.value.tokenizer.empty);
-		const focusableDisabled = computed(() => props.disabled && Boolean(props.disabledReason?.trim()));
-		const atMax = computed(() => props.maxEntries != null && values.value.length >= props.maxEntries);
-		const collapsed = computed(() => props.overflow !== "none" && !focused.value);
-		const floating = computed(() => props.overflow === "unfocused-layer" && focused.value);
-		const fieldStatus = computed(() => {
-			if (!props.statusMessage || props.status === "default") return void 0;
-			return {
-				type: props.status,
-				message: props.statusMessage
-			};
-		});
-		const describedBy = computed(() => {
-			return [
-				props.description ? `${inputId}-description` : void 0,
-				props.statusMessage ? `${inputId}-status` : void 0,
-				focusableDisabled.value ? disabledId : void 0
-			].filter(Boolean).join(" ") || void 0;
-		});
-		const menu = useTypeaheadMenu({
-			source: () => props.searchSource,
-			debounceMs: () => props.debounceMs,
-			showOnFocus: () => props.showOnFocus && !atMax.value,
-			maxItems: () => props.maxMenuItems,
-			disabled: () => props.disabled || atMax.value,
-			excludeIds: () => values.value.map((item) => item.id),
-			blockedLabels: () => values.value.map((item) => item.label),
-			creatable: () => props.creatable && !atMax.value,
-			createLabel: (query) => messages.value.tokenizer.create(query),
-			onSelect: (entry) => add(entry.item, entry.create ? "create" : "add"),
-			onQueryChange: (query) => emit("search", query)
-		});
-		const anchored = useAnchoredListbox({
-			anchor: anchorRef,
-			layer: listboxRef,
-			isOpen: menu.combobox.isOpen,
-			onDismiss: () => menu.close()
-		});
-		const tokenCount = computed(() => values.value.length);
-		const overflow = useOverflow(tokenCount, { gap: 4 });
-		const visibleCount = computed(() => collapsed.value ? overflow.visibleCount.value : tokenCount.value);
-		const hiddenCount = computed(() => Math.max(0, tokenCount.value - visibleCount.value));
-		const measureMoreLabel = computed(() => messages.value.tokenizer.more(Math.max(hiddenCount.value, 1)));
-		const visibleItems = computed(() => values.value.slice(0, visibleCount.value));
-		watch(collapsed, () => {
-			nextTick(() => overflow.remeasure());
-		});
-		watch(() => menu.combobox.isOpen.value, (isOpen) => {
-			emit("openChange", isOpen);
-		});
-		watch(() => menu.combobox.activeIndex.value, (index) => {
-			if (!menu.combobox.isOpen.value || index < 0) return;
-			nextTick(() => scrollOptionIntoView(listboxRef.value, menu.entries.value[index]?.id));
-		});
-		function commit(next, change) {
-			emit("update:modelValue", next);
-			emit("change", next, change);
-		}
-		function add(item, type) {
-			if (props.disabled || atMax.value || values.value.some((entry) => entry.id === item.id)) return;
-			commit([...values.value, item], {
-				type,
-				item
-			});
-			announce(messages.value.tokenizer.added(item.label));
-			menu.query.value = "";
-			if (!props.showOnFocus) menu.close();
-			nextTick(() => inputRef.value?.focus());
-		}
-		function remove(item) {
-			if (props.disabled) return;
-			commit(values.value.filter((entry) => entry.id !== item.id), {
-				type: "remove",
-				item
-			});
-			announce(messages.value.tokenizer.removed(item.label));
-			nextTick(() => inputRef.value?.focus());
-		}
-		function clearAll(event) {
-			event?.stopPropagation();
-			if (props.disabled || values.value.length === 0) return;
-			commit([], { type: "clear" });
-			announce(messages.value.tokenizer.removed(values.value[values.value.length - 1]?.label ?? ""));
-			menu.close();
-			inputRef.value?.focus();
-		}
-		function setTokenEl(index, element) {
-			if (element instanceof HTMLElement) tokenEls.set(index, element);
-			else tokenEls.delete(index);
-		}
-		function focusToken(index) {
-			nextTick(() => tokenEls.get(index)?.focus());
-		}
-		function onInput(event) {
-			if (props.disabled || atMax.value) return;
-			menu.setQuery(event.target.value);
-		}
-		function onFocusIn() {
-			if (!focused.value && props.overflow === "unfocused-layer") placeholderHeight.value = anchorRef.value?.offsetHeight ?? 0;
-			focused.value = true;
-		}
-		function onFocusOut(event) {
-			const next = event.relatedTarget;
-			if (next instanceof Node && (anchorRef.value?.contains(next) || listboxRef.value?.contains(next))) return;
-			focused.value = false;
-			menu.close();
-		}
-		function onInputKeyDown(event) {
-			const input = inputRef.value;
-			if (event.key === "Backspace" && menu.query.value === "" && values.value.length > 0) {
-				event.preventDefault();
-				const last = values.value[values.value.length - 1];
-				if (last) remove(last);
-				return;
-			}
-			if (event.key === "ArrowLeft" && input && input.selectionStart === 0 && input.selectionEnd === 0 && values.value.length > 0) {
-				event.preventDefault();
-				focusToken(values.value.length - 1);
-				return;
-			}
-			menu.onKeyDown(event);
-		}
-		function onTokenKeyDown(event, item, index) {
-			if (event.key === "ArrowLeft" && index > 0) {
-				event.preventDefault();
-				focusToken(index - 1);
-			} else if (event.key === "ArrowRight") {
-				event.preventDefault();
-				if (index < values.value.length - 1) focusToken(index + 1);
-				else inputRef.value?.focus();
-			} else if (event.key === "Escape") inputRef.value?.focus();
-			else if (!props.disabled && (event.key === "Backspace" || event.key === "Delete")) {
-				event.preventDefault();
-				remove(item);
-				if (index > 0) focusToken(index - 1);
-			}
-		}
-		function onFieldClick(event) {
-			if (props.disabled) return;
-			const target = event.target;
-			if (target instanceof Element && target.closest("button, a")) return;
-			inputRef.value?.focus();
-		}
-		function highlight(index) {
-			const entry = menu.entries.value[index];
-			if (entry && !entry.disabled) menu.combobox.activeIndex.value = index;
-		}
-		function onMenuSelect(id) {
-			const entry = menu.entries.value.find((item) => item.id === id);
-			if (!entry || entry.disabled) return;
-			add(entry.create ? entry.item : entry.item, entry.create ? "create" : "add");
-		}
-		__expose({
-			focus: () => inputRef.value?.focus(),
-			blur: () => inputRef.value?.blur()
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createVNode(_sfc_main$1, {
-				class: normalizeClass(["astryx-tokenizer", [`size-${props.size}`, { "is-floating": floating.value }]]),
-				label: props.label,
-				"input-id": inputId,
-				description: props.description,
-				"is-label-hidden": props.labelHidden,
-				"is-disabled": props.disabled,
-				"is-required": props.required,
-				"is-optional": props.optional,
-				status: fieldStatus.value,
-				width: props.width
-			}, {
-				default: withCtx(() => [
-					floating.value ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: "astryx-tokenizer-placeholder",
-						style: normalizeStyle({ height: `${placeholderHeight.value}px` })
-					}, null, 4)) : createCommentVNode("v-if", true),
-					createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/no-static-element-interactions -- 点空白处只是把焦点交给输入框；方向键和删除由输入框与标签处理。 "),
-					createElementVNode("div", {
-						ref_key: "anchorRef",
-						ref: anchorRef,
-						class: normalizeClass(["astryx-tokenizer-control", [`status-${props.status}`, {
-							"is-open": unref(menu).combobox.isOpen.value,
-							"is-disabled": props.disabled,
-							"is-floating": floating.value,
-							"has-tokens": values.value.length > 0
-						}]]),
-						onClick: onFieldClick,
-						onFocusin: onFocusIn,
-						onFocusout: onFocusOut
-					}, [
-						_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("v-if", true),
-						createElementVNode("span", {
-							ref: unref(overflow).containerRef,
-							class: normalizeClass(["astryx-tokenizer-tokens", { "is-collapsed": collapsed.value }])
-						}, [
-							createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 方向键在标签容器上移动焦点，删除由内部按钮处理。 "),
-							(openBlock(true), createElementBlock(Fragment, null, renderList(visibleItems.value, (item, index) => {
-								return openBlock(), createElementBlock("span", {
-									key: item.id,
-									ref_for: true,
-									ref: (element) => setTokenEl(index, element),
-									class: "astryx-tokenizer-token",
-									tabindex: "-1",
-									onKeydown: ($event) => onTokenKeyDown($event, item, index)
-								}, [renderSlot(_ctx.$slots, "token", {
-									item,
-									remove: () => remove(item)
-								}, () => [createVNode(_sfc_main$2, {
-									label: item.label,
-									size: props.size,
-									disabled: props.disabled,
-									removable: "",
-									onRemove: ($event) => remove(item)
-								}, null, 8, [
-									"label",
-									"size",
-									"disabled",
-									"onRemove"
-								])])], 40, _hoisted_2);
-							}), 128)),
-							collapsed.value && hiddenCount.value > 0 ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(messages).tokenizer.more(hiddenCount.value)), 1)) : createCommentVNode("v-if", true)
-						], 2),
-						createElementVNode("span", {
-							ref: unref(overflow).measureRef,
-							class: "astryx-tokenizer-measure",
-							"aria-hidden": "true"
-						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (item) => {
-							return openBlock(), createElementBlock("span", {
-								key: item.id,
-								class: "astryx-tokenizer-token"
-							}, [createVNode(_sfc_main$2, {
-								label: item.label,
-								size: props.size,
-								removable: ""
-							}, null, 8, ["label", "size"])]);
-						}), 128)), createElementVNode("span", _hoisted_4, toDisplayString(measureMoreLabel.value), 1)], 512),
-						createElementVNode("input", {
-							id: inputId,
-							ref_key: "inputRef",
-							ref: inputRef,
-							class: "astryx-tokenizer-input",
-							type: "text",
-							role: "combobox",
-							autocomplete: "off",
-							autocapitalize: "off",
-							placeholder: values.value.length === 0 ? placeholder.value : void 0,
-							value: unref(menu).query.value,
-							disabled: props.disabled && !focusableDisabled.value,
-							readonly: focusableDisabled.value || atMax.value || void 0,
-							"aria-disabled": focusableDisabled.value ? "true" : void 0,
-							"aria-expanded": unref(menu).combobox.isOpen.value,
-							"aria-controls": listboxId,
-							"aria-autocomplete": "list",
-							"aria-activedescendant": unref(menu).activeId.value ? `${listboxId}-option-${unref(menu).combobox.activeIndex.value}` : void 0,
-							"aria-describedby": describedBy.value,
-							"aria-required": props.required || void 0,
-							title: props.disabledReason,
-							onInput,
-							onKeydown: onInputKeyDown
-						}, null, 40, _hoisted_5),
-						renderSlot(_ctx.$slots, "end"),
-						props.clearable && values.value.length > 0 && !props.disabled ? (openBlock(), createElementBlock("button", {
-							key: 1,
-							type: "button",
-							class: "astryx-tokenizer-clear",
-							"aria-label": unref(messages).tokenizer.clear,
-							onClick: clearAll
-						}, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
-							width: "16",
-							height: "16",
-							viewBox: "0 0 16 16",
-							fill: "none",
-							"aria-hidden": "true"
-						}, [createElementVNode("path", {
-							d: "M12 4L4 12M4 4L12 12",
-							stroke: "currentColor",
-							"stroke-width": "1.5",
-							"stroke-linecap": "round"
-						})], -1)])], 8, _hoisted_6)) : createCommentVNode("v-if", true),
-						focusableDisabled.value ? (openBlock(), createElementBlock("span", {
-							key: 2,
-							id: disabledId,
-							class: "astryx-visually-hidden"
-						}, toDisplayString(props.disabledReason), 1)) : createCommentVNode("v-if", true),
-						(openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (item) => {
-							return openBlock(), createElementBlock("input", {
-								key: `${props.name}-${item.id}`,
-								type: "hidden",
-								name: props.name,
-								value: item.id,
-								disabled: !props.name
-							}, null, 8, _hoisted_7);
-						}), 128))
-					], 34)
-				]),
-				_: 3
-			}, 8, [
-				"class",
-				"label",
-				"description",
-				"is-label-hidden",
-				"is-disabled",
-				"is-required",
-				"is-optional",
-				"status",
-				"width"
-			]), (openBlock(), createBlock(Teleport, { to: "body" }, [withDirectives(createElementVNode("div", {
-				id: listboxId,
-				ref_key: "listboxRef",
-				ref: listboxRef,
-				class: "astryx-typeahead-listbox",
-				role: "listbox",
-				"aria-label": unref(messages).tokenizer.results,
-				"data-placement": unref(anchored).position.value.placement,
-				style: normalizeStyle(unref(anchored).style.value),
-				tabindex: "-1"
-			}, [createVNode(_sfc_main$3, {
-				entries: unref(menu).entries.value.map((entry) => ({
-					id: entry.id,
-					label: entry.label,
-					description: entry.description,
-					disabled: entry.disabled,
-					selected: values.value.some((item) => item.id === entry.item.id)
-				})),
-				"active-index": unref(menu).combobox.activeIndex.value,
-				status: unref(menu).status.value,
-				"listbox-id": listboxId,
-				"empty-text": emptyText.value,
-				"loading-text": unref(messages).tokenizer.loading,
-				"error-text": unref(messages).tokenizer.error,
-				onSelect: onMenuSelect,
-				onHighlight: highlight
-			}, createSlots({ _: 2 }, [_ctx.$slots.item ? {
-				name: "item",
-				fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", {
-					item: unref(menu).entries.value.find((entry) => entry.id === slotProps.entry.id).item,
-					isActive: slotProps.isActive,
-					isSelected: slotProps.isSelected
-				})]),
-				key: "0"
-			} : void 0, _ctx.$slots.empty ? {
-				name: "empty",
-				fn: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
-				key: "1"
-			} : void 0]), 1032, [
-				"entries",
-				"active-index",
-				"status",
-				"empty-text",
-				"loading-text",
-				"error-text"
-			])], 12, _hoisted_8), [[vShow, unref(menu).combobox.isOpen.value]])]))], 64);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };