@vizejs/ui 0.426.2 → 0.427.0

package/dist/mention-CwpShhLf.mjs

@@ -0,0 +1,1234 @@
+import { a as useDeterministicId, n as deriveDeterministicId } from "./deterministic-id-bMmJU5xD.mjs";
+import { createContext } from "./context.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { n as useDismissableLayer } from "./dismissable-layer-B9LIsTUt.mjs";
+import { t as portal_default } from "./portal-DeHaLxGL.mjs";
+import { t as positioner_default } from "./positioner--uuI0oZY.mjs";
+import { t as presence_default } from "./presence-CTG1EV3w.mjs";
+import { t as createCollectionRegistry } from "./collection-Cncgrq4U.mjs";
+import { n as useCompositeNavigation } from "./composite-navigation-D6WKS_BY.mjs";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeProps, onMounted, onUnmounted, openBlock, renderSlot, shallowRef, unref, useTemplateRef, watch, withCtx } from "vue";
+//#region src/families/form/mention/mention-caret.ts
+/** Computed-style properties copied onto the textarea mirror. */
+const mirroredProperties = [
+	"boxSizing",
+	"width",
+	"height",
+	"overflowX",
+	"overflowY",
+	"borderTopWidth",
+	"borderRightWidth",
+	"borderBottomWidth",
+	"borderLeftWidth",
+	"borderStyle",
+	"paddingTop",
+	"paddingRight",
+	"paddingBottom",
+	"paddingLeft",
+	"fontStyle",
+	"fontVariant",
+	"fontWeight",
+	"fontStretch",
+	"fontSize",
+	"fontSizeAdjust",
+	"lineHeight",
+	"fontFamily",
+	"textAlign",
+	"textTransform",
+	"textIndent",
+	"textDecoration",
+	"letterSpacing",
+	"wordSpacing",
+	"tabSize",
+	"direction"
+];
+function toRect(rect) {
+	return {
+		height: rect.height,
+		width: rect.width,
+		x: rect.x,
+		y: rect.y
+	};
+}
+/**
+* Measure the viewport rect of the caret at `index` inside a textarea or
+* input with a hidden mirror element that copies its text layout.
+*/
+function measureTextFieldCaret(element, index) {
+	const document = element.ownerDocument;
+	const view = document.defaultView;
+	const fieldRect = element.getBoundingClientRect();
+	if (view === null) return toRect(fieldRect);
+	const style = view.getComputedStyle(element);
+	const mirror = document.createElement("div");
+	const mirrorStyle = mirror.style;
+	for (const property of mirroredProperties) mirrorStyle[property] = style[property];
+	mirrorStyle.position = "fixed";
+	mirrorStyle.visibility = "hidden";
+	mirrorStyle.pointerEvents = "none";
+	mirrorStyle.left = `${fieldRect.x}px`;
+	mirrorStyle.top = `${fieldRect.y}px`;
+	mirrorStyle.whiteSpace = element instanceof HTMLInputElement ? "pre" : "pre-wrap";
+	mirrorStyle.overflowWrap = "break-word";
+	mirror.textContent = element.value.slice(0, index);
+	const marker = document.createElement("span");
+	marker.textContent = element.value.slice(index) || ".";
+	mirror.append(marker);
+	document.body.append(mirror);
+	try {
+		const rect = marker.getBoundingClientRect();
+		return {
+			height: Number.parseFloat(style.lineHeight) || rect.height || 0,
+			width: 1,
+			x: rect.x - element.scrollLeft,
+			y: rect.y - element.scrollTop
+		};
+	} finally {
+		mirror.remove();
+	}
+}
+/** Resolve a global text offset to a text node position inside `root`. */
+function locateTextOffset(root, offset) {
+	const walker = root.ownerDocument?.createTreeWalker(root, 4);
+	let remaining = offset;
+	let last = null;
+	while (walker !== void 0) {
+		const next = walker.nextNode();
+		if (next === null) break;
+		if (!(next instanceof Text)) continue;
+		last = next;
+		if (remaining <= next.data.length) return {
+			node: next,
+			offset: remaining
+		};
+		remaining -= next.data.length;
+	}
+	if (last !== null) return {
+		node: last,
+		offset: last.data.length
+	};
+	return {
+		node: root,
+		offset: 0
+	};
+}
+/** Measure the caret rect at `index` inside a contenteditable element. */
+function measureEditableCaret(element, index) {
+	const document = element.ownerDocument;
+	const position = locateTextOffset(element, index);
+	const range = document.createRange();
+	range.setStart(position.node, position.offset);
+	range.collapse(true);
+	const rect = range.getBoundingClientRect();
+	if (rect.width === 0 && rect.height === 0) {
+		const first = range.getClientRects()[0];
+		return toRect(first ?? element.getBoundingClientRect());
+	}
+	return toRect(rect);
+}
+/** Read the plain text of a field. */
+function readFieldText(element) {
+	if (element instanceof HTMLTextAreaElement || element instanceof HTMLInputElement) return element.value;
+	return element.textContent ?? "";
+}
+/** Read the collapsed caret offset of a field, or `null` for a range selection. */
+function readFieldCaret(element) {
+	if (element instanceof HTMLTextAreaElement || element instanceof HTMLInputElement) {
+		const { selectionStart, selectionEnd } = element;
+		if (selectionStart === null || selectionStart !== selectionEnd) return null;
+		return selectionStart;
+	}
+	const selection = element.ownerDocument.getSelection();
+	if (selection === null || selection.rangeCount === 0 || !selection.isCollapsed) return null;
+	const focus = selection.focusNode;
+	if (focus === null || !element.contains(focus)) return null;
+	const range = element.ownerDocument.createRange();
+	range.selectNodeContents(element);
+	range.setEnd(focus, selection.focusOffset);
+	return range.toString().length;
+}
+/** Replace `[start, end)` of a contenteditable's text and place the caret after the insertion. */
+function replaceEditableText(element, start, end, inserted) {
+	const document = element.ownerDocument;
+	const from = locateTextOffset(element, start);
+	const to = locateTextOffset(element, end);
+	const range = document.createRange();
+	range.setStart(from.node, from.offset);
+	range.setEnd(to.node, to.offset);
+	range.deleteContents();
+	const node = document.createTextNode(inserted);
+	range.insertNode(node);
+	element.normalize();
+	const caret = locateTextOffset(element, start + inserted.length);
+	const selection = document.getSelection();
+	if (selection !== null) {
+		const collapsed = document.createRange();
+		collapsed.setStart(caret.node, caret.offset);
+		collapsed.collapse(true);
+		selection.removeAllRanges();
+		selection.addRange(collapsed);
+	}
+}
+/** Measure the caret rect at `index` for either field kind. */
+function measureFieldCaret(element, index) {
+	if (element instanceof HTMLTextAreaElement || element instanceof HTMLInputElement) return measureTextFieldCaret(element, index);
+	return measureEditableCaret(element, index);
+}
+//#endregion
+//#region src/families/form/mention/mention-context.ts
+const mentionContext = createContext("Mention");
+//#endregion
+//#region src/families/form/mention/mention-core.ts
+/** The default `@` trigger. */
+const defaultMentionTriggers = Object.freeze([Object.freeze({ char: "@" })]);
+const boundary = /[\s\p{P}\p{S}]/u;
+const whitespace = /\s/u;
+function isBoundary(text, index, trigger) {
+	if (index === 0) return true;
+	const previous = text[index - 1] ?? "";
+	if (previous === trigger.char.at(-1)) return false;
+	return boundary.test(previous);
+}
+function acceptsQuery(query, trigger) {
+	if (query.includes("\n")) return false;
+	if (query.startsWith(trigger.char)) return false;
+	if (trigger.allowSpaces !== true && whitespace.test(query)) return false;
+	if (trigger.allowSpaces === true && /^\s/u.test(query)) return false;
+	if (query.length < (trigger.minChars ?? 0)) return false;
+	if (trigger.pattern !== void 0) {
+		trigger.pattern.lastIndex = 0;
+		const match = trigger.pattern.exec(query);
+		if (match === null || match.index !== 0 || match[0].length !== query.length) return false;
+	}
+	return true;
+}
+/**
+* Find the trigger token that ends at `caret`, or `null`.
+*
+* A trigger activates at the start of the text or after whitespace,
+* punctuation, or a symbol, so `mail@example` never opens a popup. The
+* query ends at whitespace unless the trigger allows spaces, and always at a
+* newline. The nearest valid trigger before the caret wins.
+*/
+function detectMention(text, caret, triggers = defaultMentionTriggers) {
+	if (!Number.isInteger(caret) || caret < 0 || caret > text.length || triggers.length === 0) return null;
+	const lookback = Math.max(...triggers.map((trigger) => trigger.maxChars ?? 64)) + 8;
+	const floor = Math.max(0, caret - lookback);
+	const anySpaces = triggers.some((trigger) => trigger.allowSpaces === true);
+	for (let index = caret - 1; index >= floor; index--) {
+		const character = text[index] ?? "";
+		if (character === "\n") return null;
+		for (const trigger of triggers) {
+			if (trigger.char.length === 0) continue;
+			const start = index - trigger.char.length + 1;
+			if (start < 0 || text.slice(start, index + 1) !== trigger.char) continue;
+			if (!isBoundary(text, start, trigger)) continue;
+			const query = text.slice(index + 1, caret);
+			if (query.length > (trigger.maxChars ?? 64)) continue;
+			if (acceptsQuery(query, trigger)) return Object.freeze({
+				end: caret,
+				query,
+				start,
+				trigger
+			});
+		}
+		if (!anySpaces && whitespace.test(character)) return null;
+	}
+	return null;
+}
+/** Whether two matches describe the same token. */
+function isSameMention(left, right) {
+	if (left === null || right === null) return left === right;
+	return left.start === right.start && left.end === right.end && left.query === right.query && left.trigger.char === right.trigger.char;
+}
+/** Default insertion: the trigger, the item text, and one trailing space. */
+function defaultMentionInsert(text, trigger) {
+	return `${trigger.char}${text} `;
+}
+/** Replace the matched token with `inserted` and place the caret after it. */
+function applyMentionEdit(text, match, inserted) {
+	const before = text.slice(0, match.start);
+	let after = text.slice(match.end);
+	if (/\s$/u.test(inserted) && /^[ \t]/u.test(after)) after = after.slice(1);
+	return Object.freeze({
+		caret: before.length + inserted.length,
+		end: match.end,
+		inserted,
+		start: match.start,
+		text: `${before}${inserted}${after}`
+	});
+}
+/** Normalize text for accent- and case-insensitive filtering. */
+function normalizeMentionText(text) {
+	return text.normalize("NFKD").replace(/\p{M}+/gu, "").toLocaleLowerCase();
+}
+/** Default filter: the item text contains the query. */
+function containsMentionFilter(text, query) {
+	const needle = normalizeMentionText(query);
+	return needle.length === 0 || normalizeMentionText(text).includes(needle);
+}
+//#endregion
+//#region src/families/form/mention/mention-root.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$5 = [
+	"id",
+	"data-state",
+	"data-trigger",
+	"data-disabled",
+	"data-loading"
+];
+//#endregion
+//#region src/families/form/mention/mention-root.vue
+var mention_root_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "mention-root",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		modelValue: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		items: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		loadItems: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		debounce: {
+			type: Number,
+			required: false,
+			default: 150
+		},
+		triggers: {
+			type: Array,
+			required: false,
+			default: () => defaultMentionTriggers
+		},
+		itemText: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		filter: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		insert: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		loop: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"select",
+		"update:query",
+		"query-change",
+		"update:open",
+		"open-change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		/** Data stored in the collection for each rendered item. */
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "mention"
+		});
+		const fieldId = computed(() => deriveDeterministicId(baseId.value, "field"));
+		const listboxId = computed(() => deriveDeterministicId(baseId.value, "listbox"));
+		const disabledState = computed(() => __props.disabled);
+		const textState = useControllableState({
+			value: () => __props.modelValue,
+			defaultValue: () => __props.defaultValue,
+			onChange: (next) => emit("update:modelValue", next)
+		});
+		const text = computed(() => textState.value.value);
+		const openState = useControllableState({
+			value: () => __props.open,
+			defaultValue: () => __props.defaultOpen
+		});
+		const match = shallowRef(null);
+		const dismissedAt = shallowRef(null);
+		const isOpen = computed(() => openState.value.value && match.value !== null && !__props.disabled);
+		const state = computed(() => isOpen.value ? "open" : "closed");
+		const query = computed(() => match.value?.query ?? "");
+		const fieldElement = shallowRef(null);
+		const contentElement = shallowRef(null);
+		let fieldKind = "text";
+		const registry = createCollectionRegistry();
+		const navigation = useCompositeNavigation({
+			registry,
+			focusStrategy: "active-descendant",
+			getItemId: (item) => item.value.id.value,
+			isDisabled: disabledState,
+			loop: () => __props.loop
+		});
+		const activeKey = computed(() => registry.activeKey.value);
+		function currentActiveKey() {
+			return activeKey.value;
+		}
+		const activeItem = computed(() => {
+			const key = currentActiveKey();
+			return key === null ? null : registry.getItem(key) ?? null;
+		});
+		const activeDescendant = computed(() => isOpen.value ? activeItem.value?.value.id.value : void 0);
+		const empty = computed(() => registry.items.value.length === 0);
+		const triggerChar = computed(() => match.value?.trigger.char);
+		const loaded = shallowRef(void 0);
+		const status = shallowRef("idle");
+		const loadError = shallowRef(void 0);
+		function textFor(item) {
+			if (__props.itemText !== void 0) return __props.itemText(item);
+			if (typeof item === "string") return item;
+			if (typeof item === "object" && item !== null) for (const key of [
+				"label",
+				"name",
+				"title",
+				"text"
+			]) {
+				const candidate = Reflect.get(item, key);
+				if (typeof candidate === "string") return candidate;
+			}
+			return String(item);
+		}
+		function currentFilter() {
+			if (__props.filter === false) return null;
+			if (__props.filter !== void 0) return __props.filter;
+			return __props.loadItems === void 0 ? (_item, currentQuery, _trigger, itemTextValue) => containsMentionFilter(itemTextValue, currentQuery) : null;
+		}
+		function currentMatch() {
+			return match.value;
+		}
+		function currentField() {
+			return fieldElement.value;
+		}
+		function currentLoader() {
+			return __props.loadItems;
+		}
+		const filteredItems = computed(() => {
+			const source = (__props.loadItems === void 0 ? __props.items : loaded.value) ?? [];
+			const active = currentMatch();
+			const predicate = currentFilter();
+			if (active === null || predicate === null) return source;
+			return source.filter((item) => predicate(item, active.query, active.trigger, textFor(item)));
+		});
+		function setOpen(value, nativeEvent = null) {
+			const previous = openState.value.value;
+			const next = value && !__props.disabled;
+			const changed = openState.set(next);
+			if (changed || previous !== next) {
+				emit("update:open", next);
+				emit("open-change", next, previous, nativeEvent);
+			}
+			return changed;
+		}
+		function updateMatch(next, nativeEvent) {
+			const previous = currentMatch();
+			if (next !== null && dismissedAt.value !== null && dismissedAt.value !== next.start) dismissedAt.value = null;
+			if (next === null) dismissedAt.value = null;
+			if (!isSameMention(previous, next)) {
+				match.value = next;
+				if (previous?.query !== next?.query || previous?.trigger !== next?.trigger) {
+					emit("update:query", next?.query ?? "");
+					emit("query-change", next?.query ?? null, next?.trigger ?? null);
+				}
+			}
+			const shouldOpen = next !== null && dismissedAt.value === null;
+			if (shouldOpen !== openState.value.value) setOpen(shouldOpen, nativeEvent);
+		}
+		function detect(nativeEvent) {
+			const element = currentField();
+			if (element === null || __props.disabled) {
+				updateMatch(null, nativeEvent);
+				return;
+			}
+			const caret = readFieldCaret(element);
+			const value = readFieldText(element);
+			updateMatch(caret === null ? null : detectMention(value, caret, __props.triggers), nativeEvent);
+		}
+		function onFieldInput(event) {
+			const element = currentField();
+			if (element === null || __props.disabled) return;
+			textState.set(readFieldText(element));
+			detect(event);
+		}
+		function onFieldCaret(event) {
+			detect(event);
+		}
+		function onFieldBlur(event) {
+			const target = event.relatedTarget;
+			if (target instanceof Node && contentElement.value?.contains(target) === true) return;
+			if (openState.value.value) setOpen(false, event);
+		}
+		function navigate(command, event) {
+			if (registry.activeKey.value === null && (command === "next" || command === "previous")) {
+				const key = registry.getNavigationKey(command === "next" ? "first" : "last");
+				if (key !== null) registry.setActiveKey(key);
+				return;
+			}
+			navigation.navigate(command, event);
+		}
+		function currentActiveItem() {
+			return activeItem.value;
+		}
+		function chooseActive(event) {
+			const item = currentActiveItem();
+			if (item === null || item.disabled) return false;
+			return choose(item.value.value, event);
+		}
+		function dismiss(nativeEvent = null) {
+			const active = currentMatch();
+			if (active !== null) dismissedAt.value = active.start;
+			setOpen(false, nativeEvent);
+		}
+		function onFieldKeydown(event) {
+			if (!isOpen.value || event.isComposing || event.defaultPrevented) return;
+			switch (event.key) {
+				case "ArrowDown":
+				case "ArrowUp":
+					if (event.altKey || event.ctrlKey || event.metaKey) return;
+					event.preventDefault();
+					navigate(event.key === "ArrowDown" ? "next" : "previous", event);
+					return;
+				case "Home":
+				case "End":
+					event.preventDefault();
+					navigate(event.key === "Home" ? "first" : "last", event);
+					return;
+				case "PageDown":
+				case "PageUp":
+					event.preventDefault();
+					navigate(event.key === "PageDown" ? "page-next" : "page-previous", event);
+					return;
+				case "Enter":
+				case "Tab":
+					if (event.shiftKey && event.key === "Tab") return;
+					if (chooseActive(event)) event.preventDefault();
+					return;
+				case "Escape":
+					event.preventDefault();
+					dismiss(event);
+					return;
+				default:
+			}
+		}
+		function choose(value, nativeEvent) {
+			const active = currentMatch();
+			const element = currentField();
+			if (active === null || __props.disabled) return false;
+			const current = element === null ? text.value : readFieldText(element);
+			const inserted = __props.insert?.(value, active.trigger, textFor(value)) ?? defaultMentionInsert(textFor(value), active.trigger);
+			const edit = applyMentionEdit(current, active, inserted);
+			if (element !== null && fieldKind === "editable") {
+				replaceEditableText(element, active.start, active.end, inserted);
+				textState.set(readFieldText(element));
+			} else {
+				textState.set(edit.text);
+				if (element instanceof HTMLTextAreaElement || element instanceof HTMLInputElement) {
+					element.value = edit.text;
+					element.setSelectionRange(edit.caret, edit.caret);
+				}
+			}
+			emit("select", value, active.trigger);
+			updateMatch(null, nativeEvent);
+			element?.focus();
+			return true;
+		}
+		let controller = null;
+		let timer = null;
+		function cancelLoad() {
+			controller?.abort();
+			controller = null;
+			if (timer !== null) clearTimeout(timer);
+			timer = null;
+		}
+		function runLoad(active) {
+			const loader = currentLoader();
+			if (loader === void 0) return;
+			controller?.abort();
+			const request = new AbortController();
+			controller = request;
+			status.value = "loading";
+			Promise.resolve().then(() => loader(active.query, active.trigger, { signal: request.signal })).then((result) => {
+				if (request.signal.aborted) return;
+				loaded.value = Object.freeze([...result]);
+				loadError.value = void 0;
+				status.value = "success";
+			}, (error) => {
+				if (request.signal.aborted) return;
+				loadError.value = error;
+				status.value = "error";
+			});
+		}
+		watch([isOpen, query], ([nextOpen]) => {
+			if (__props.loadItems === void 0) return;
+			const active = currentMatch();
+			if (!nextOpen || active === null) {
+				cancelLoad();
+				if (status.value === "loading") status.value = "idle";
+				return;
+			}
+			controller?.abort();
+			controller = null;
+			loaded.value = void 0;
+			loadError.value = void 0;
+			status.value = "loading";
+			if (timer !== null) clearTimeout(timer);
+			timer = null;
+			if (__props.debounce <= 0) {
+				runLoad(active);
+				return;
+			}
+			timer = setTimeout(() => {
+				timer = null;
+				const latest = currentMatch();
+				if (latest !== null) runLoad(latest);
+			}, __props.debounce);
+		});
+		watch(query, () => {
+			if (registry.activeKey.value !== null) registry.setActiveKey(null);
+		});
+		watch([isOpen, registry.navigableItems], ([nextOpen, navigable]) => {
+			if (!nextOpen) {
+				if (registry.activeKey.value !== null) registry.setActiveKey(null);
+				return;
+			}
+			const key = registry.activeKey.value;
+			if (key === null || !navigable.some((item) => item.key === key)) registry.setActiveKey(navigable[0]?.key ?? null);
+		}, { flush: "post" });
+		onUnmounted(cancelLoad);
+		const zeroRect = Object.freeze({
+			height: 0,
+			width: 0,
+			x: 0,
+			y: 0
+		});
+		const context = {
+			activeDescendant,
+			activeKey,
+			attachField: (element, kind) => {
+				fieldElement.value = element;
+				fieldKind = kind;
+			},
+			caretReference: { getBoundingClientRect: () => {
+				const element = currentField();
+				const active = currentMatch();
+				if (element === null) return zeroRect;
+				if (active === null) return element.getBoundingClientRect();
+				return measureFieldCaret(element, active.start);
+			} },
+			choose,
+			contentElement,
+			disabled: disabledState,
+			empty,
+			fieldElement,
+			fieldId,
+			highlight: (key) => {
+				if (!registry.navigableItems.value.some((item) => item.key === key)) return false;
+				return registry.setActiveKey(key);
+			},
+			listboxId,
+			onFieldBlur,
+			onFieldCaret,
+			onFieldInput,
+			onFieldKeydown,
+			open: isOpen,
+			query,
+			registerItem: (input) => registry.register({
+				disabled: input.disabled,
+				element: input.element,
+				key: input.id.value,
+				textValue: input.textValue,
+				value: {
+					id: input.id,
+					value: input.value
+				}
+			}),
+			setOpen,
+			state,
+			status: computed(() => status.value),
+			text
+		};
+		mentionContext.provide(context);
+		const slotState = computed(() => ({
+			error: loadError.value,
+			filteredItems: filteredItems.value,
+			loading: status.value === "loading",
+			match: match.value,
+			open: isOpen.value,
+			query: query.value,
+			state: state.value,
+			status: status.value,
+			text: text.value,
+			trigger: match.value?.trigger ?? null
+		}));
+		__expose({
+			dismiss: () => dismiss(null),
+			focus: (options) => currentField()?.focus(options),
+			match,
+			open: isOpen,
+			refresh: () => {
+				nextTick(() => detect(null));
+			},
+			select: (item) => choose(item, null),
+			text
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(baseId),
+				"data-vize-ui": "mention",
+				part: "root",
+				"data-state": state.value,
+				"data-trigger": triggerChar.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-loading": status.value === "loading" ? "true" : void 0
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$5);
+		};
+	}
+}), [["__scopeId", "data-v-c9f8ac0f"]]);
+//#endregion
+//#region src/families/form/mention/mention-content.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$4 = ["hidden", "data-state"];
+const _hoisted_2$1 = [
+	"id",
+	"aria-label",
+	"aria-busy",
+	"hidden",
+	"data-state",
+	"data-placement"
+];
+//#endregion
+//#region src/families/form/mention/mention-content.vue
+var mention_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "mention-content",
+	props: {
+		placement: {
+			type: String,
+			required: false,
+			default: "bottom-start"
+		},
+		strategy: {
+			type: String,
+			required: false,
+			default: "fixed"
+		},
+		offset: {
+			type: Number,
+			required: false,
+			default: 4
+		},
+		collisionPadding: {
+			type: Number,
+			required: false,
+			default: 8
+		},
+		flip: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		size: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		to: {
+			type: null,
+			required: false,
+			default: "body"
+		},
+		portalDisabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		defer: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		forceMount: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: [
+		"escape-key-down",
+		"pointer-down-outside",
+		"dismiss"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = mentionContext.use();
+		const element = useTemplateRef("element");
+		const present = computed(() => context.open.value || __props.forceMount);
+		const positionerProps = computed(() => ({
+			collisionPadding: __props.collisionPadding,
+			flip: __props.flip,
+			offset: __props.offset,
+			placement: __props.placement,
+			reference: context.caretReference,
+			shift: __props.shift,
+			size: __props.size,
+			strategy: __props.strategy
+		}));
+		const layer = useDismissableLayer({
+			root: element,
+			branches: () => context.fieldElement.value === null ? [] : [context.fieldElement.value],
+			enabled: () => context.open.value,
+			onEscapeKeyDown: (event) => emit("escape-key-down", event),
+			onPointerDownOutside: (event) => emit("pointer-down-outside", event),
+			onDismiss: (event) => {
+				emit("dismiss", event);
+				context.setOpen(false, event.originalEvent);
+			}
+		});
+		const contentBindings = computed(() => ({
+			...layer.layerProps,
+			role: "listbox",
+			onMousedown: keepFieldFocus,
+			onPointerdown: keepFieldFocus
+		}));
+		watch(element, (next, previous) => {
+			if (previous !== null && context.contentElement.value === previous) context.contentElement.value = null;
+			if (next !== null) context.contentElement.value = next;
+			layer.refresh();
+		}, { flush: "post" });
+		onUnmounted(() => {
+			if (context.contentElement.value === element.value) context.contentElement.value = null;
+		});
+		function keepFieldFocus(event) {
+			if (event.button === 0) event.preventDefault();
+		}
+		function isPlacement(value) {
+			return /^(?:top|right|bottom|left)(?:-(?:start|center|end))?$/u.test(value);
+		}
+		function placementOf(value) {
+			return typeof value === "string" && isPlacement(value) ? value : __props.placement;
+		}
+		function slotState(resolved) {
+			return {
+				open: context.open.value,
+				placement: placementOf(resolved),
+				query: context.query.value
+			};
+		}
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-vize-ui": "mention-content-host",
+				part: "content-host",
+				hidden: unref(context).open.value ? void 0 : true,
+				"data-state": unref(context).state.value
+			}, [present.value ? (openBlock(), createBlock(portal_default, {
+				key: 0,
+				to: __props.to,
+				disabled: __props.portalDisabled,
+				defer: __props.defer
+			}, {
+				default: withCtx(() => [createVNode(presence_default, {
+					present: unref(context).open.value,
+					"force-mount": __props.forceMount
+				}, {
+					default: withCtx(() => [createVNode(positioner_default, normalizeProps(guardReactiveProps(positionerProps.value)), {
+						default: withCtx(({ placement: resolved }) => [createElementVNode("div", mergeProps({
+							id: unref(context).listboxId.value,
+							ref_key: "element",
+							ref: element
+						}, contentBindings.value, {
+							tabindex: "-1",
+							"aria-label": __props.ariaLabel,
+							"aria-busy": unref(context).status.value === "loading" ? "true" : void 0,
+							"data-vize-ui": "mention-content",
+							part: "content",
+							hidden: unref(context).open.value ? void 0 : true,
+							"data-state": unref(context).state.value,
+							"data-placement": placementOf(resolved)
+						}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState(resolved))), void 0, true)], 16, _hoisted_2$1)]),
+						_: 3
+					}, 16)]),
+					_: 3
+				}, 8, ["present", "force-mount"])]),
+				_: 3
+			}, 8, [
+				"to",
+				"disabled",
+				"defer"
+			])) : createCommentVNode("v-if", true)], 8, _hoisted_1$4);
+		};
+	}
+}), [["__scopeId", "data-v-d7b3acb7"]]);
+//#endregion
+//#region src/families/form/mention/mention-editable.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = ["id", "data-state"];
+//#endregion
+//#region src/families/form/mention/mention-editable.vue
+var mention_editable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "mention-editable",
+	props: {
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		multiline: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = mentionContext.use();
+		const element = useTemplateRef("element");
+		const props = computed(() => ({
+			"aria-activedescendant": context.activeDescendant.value,
+			"aria-autocomplete": "list",
+			"aria-controls": context.open.value ? context.listboxId.value : void 0,
+			"aria-describedby": __props.ariaDescribedby,
+			"aria-disabled": context.disabled.value ? "true" : void 0,
+			"aria-haspopup": "listbox",
+			"aria-label": __props.ariaLabel,
+			"aria-labelledby": __props.ariaLabelledby,
+			"aria-multiline": __props.multiline ? "true" : "false",
+			contenteditable: context.disabled.value ? "false" : "true",
+			role: "textbox",
+			tabindex: 0,
+			onBlur: (event) => context.onFieldBlur(event),
+			onClick: (event) => context.onFieldCaret(event),
+			onFocus: (event) => context.onFieldCaret(event),
+			onInput: (event) => context.onFieldInput(event),
+			onKeydown: (event) => context.onFieldKeydown(event),
+			onKeyup: (event) => {
+				if (event.key !== "ArrowDown" && event.key !== "ArrowUp") context.onFieldCaret(event);
+			}
+		}));
+		onMounted(() => {
+			context.attachField(element.value, "editable");
+		});
+		onUnmounted(() => {
+			if (context.fieldElement.value === element.value) context.attachField(null, "editable");
+		});
+		__expose({
+			element,
+			focus: (options) => element.value?.focus(options)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				id: unref(context).fieldId.value,
+				ref_key: "element",
+				ref: element
+			}, props.value, {
+				"data-vize-ui": "mention-editable",
+				part: "editable",
+				"data-state": unref(context).state.value
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-37fadb54"]]);
+//#endregion
+//#region src/families/form/mention/mention-empty.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = ["hidden"];
+//#endregion
+//#region src/families/form/mention/mention-empty.vue
+var mention_empty_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "mention-empty",
+	setup(__props) {
+		const context = mentionContext.use();
+		const visible = computed(() => context.empty.value && context.status.value !== "loading");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "presentation",
+				"data-vize-ui": "mention-empty",
+				part: "empty",
+				hidden: visible.value ? void 0 : true
+			}, [visible.value ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				query: unref(context).query.value
+			}, void 0, true) : createCommentVNode("v-if", true)], 8, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-130b1669"]]);
+//#endregion
+//#region src/families/form/mention/mention-input.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = [
+	"id",
+	"aria-expanded",
+	"name",
+	"placeholder",
+	"value",
+	"disabled",
+	"data-state"
+];
+const _hoisted_2 = [
+	"id",
+	"name",
+	"rows",
+	"placeholder",
+	"value",
+	"disabled",
+	"data-state"
+];
+//#endregion
+//#region src/families/form/mention/mention-input.vue
+var mention_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "mention-input",
+	props: {
+		as: {
+			type: String,
+			required: false,
+			default: "textarea"
+		},
+		name: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		rows: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = mentionContext.use();
+		const textarea = useTemplateRef("textarea");
+		const input = useTemplateRef("input");
+		const fieldProps = computed(() => ({
+			onBlur: (event) => context.onFieldBlur(event),
+			onClick: (event) => context.onFieldCaret(event),
+			onFocus: (event) => context.onFieldCaret(event),
+			onInput: (event) => context.onFieldInput(event),
+			onKeydown: (event) => context.onFieldKeydown(event),
+			onKeyup: (event) => {
+				if (event.key !== "ArrowDown" && event.key !== "ArrowUp") context.onFieldCaret(event);
+			},
+			"aria-activedescendant": context.activeDescendant.value,
+			"aria-autocomplete": "list",
+			"aria-controls": context.open.value ? context.listboxId.value : void 0,
+			"aria-describedby": __props.ariaDescribedby,
+			"aria-label": __props.ariaLabel,
+			"aria-labelledby": __props.ariaLabelledby
+		}));
+		function element() {
+			return __props.as === "input" ? input.value : textarea.value;
+		}
+		onMounted(() => {
+			context.attachField(element(), "text");
+		});
+		onUnmounted(() => {
+			if (context.fieldElement.value === element()) context.attachField(null, "text");
+		});
+		__expose({
+			element,
+			focus: (options) => element()?.focus(options)
+		});
+		return (_ctx, _cache) => {
+			return __props.as === "input" ? (openBlock(), createElementBlock("input", mergeProps({
+				key: 0,
+				id: unref(context).fieldId.value,
+				ref_key: "input",
+				ref: input
+			}, fieldProps.value, {
+				type: "text",
+				role: "combobox",
+				autocomplete: "off",
+				"aria-expanded": unref(context).open.value ? "true" : "false",
+				name: __props.name,
+				placeholder: __props.placeholder,
+				value: unref(context).text.value,
+				disabled: unref(context).disabled.value,
+				"data-vize-ui": "mention-input",
+				part: "input",
+				"data-state": unref(context).state.value
+			}), null, 16, _hoisted_1$1)) : (openBlock(), createElementBlock("textarea", mergeProps({
+				key: 1,
+				id: unref(context).fieldId.value,
+				ref_key: "textarea",
+				ref: textarea
+			}, fieldProps.value, {
+				"aria-haspopup": "listbox",
+				name: __props.name,
+				rows: __props.rows,
+				placeholder: __props.placeholder,
+				value: unref(context).text.value,
+				disabled: unref(context).disabled.value,
+				"data-vize-ui": "mention-input",
+				part: "input",
+				"data-state": unref(context).state.value
+			}), null, 16, _hoisted_2));
+		};
+	}
+}), [["__scopeId", "data-v-6d6690ac"]]);
+//#endregion
+//#region src/families/form/mention/mention-item.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"data-highlighted",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/form/mention/mention-item.vue
+var mention_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "mention-item",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		value: {
+			type: null,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		textValue: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = mentionContext.use();
+		const element = useTemplateRef("element");
+		const optionId = useDeterministicId({
+			id: () => __props.id,
+			hint: "mention-option"
+		});
+		const itemDisabled = computed(() => context.disabled.value || __props.disabled);
+		const active = computed(() => context.activeKey.value === optionId.value);
+		const slotState = computed(() => ({
+			active: active.value,
+			disabled: itemDisabled.value,
+			value: __props.value
+		}));
+		const handlers = computed(() => ({
+			role: "option",
+			onClick: (event) => {
+				if (!itemDisabled.value) context.choose(__props.value, event);
+			},
+			onPointermove: (event) => {
+				if (!itemDisabled.value && !active.value && event.pointerType !== "touch") context.highlight(optionId.value);
+			}
+		}));
+		let registration = null;
+		watch([() => __props.value, optionId], () => {
+			registration?.unregister();
+			registration = context.registerItem({
+				disabled: itemDisabled,
+				element,
+				id: optionId,
+				textValue: () => __props.textValue,
+				value: __props.value
+			});
+		}, {
+			flush: "sync",
+			immediate: true
+		});
+		onUnmounted(() => {
+			registration?.unregister();
+			registration = null;
+		});
+		__expose({
+			active,
+			element,
+			select: () => context.choose(__props.value, null)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				id: unref(optionId),
+				ref_key: "element",
+				ref: element
+			}, handlers.value, {
+				"aria-selected": active.value ? "true" : "false",
+				"aria-disabled": itemDisabled.value ? "true" : void 0,
+				"data-vize-ui": "mention-item",
+				part: "item",
+				"data-highlighted": active.value ? "true" : void 0,
+				"data-disabled": itemDisabled.value ? "true" : void 0
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-389983d8"]]);
+//#endregion
+export { measureTextFieldCaret as _, mention_content_default as a, replaceEditableText as b, containsMentionFilter as c, detectMention as d, isSameMention as f, measureFieldCaret as g, measureEditableCaret as h, mention_editable_default as i, defaultMentionInsert as l, locateTextOffset as m, mention_input_default as n, mention_root_default as o, normalizeMentionText as p, mention_empty_default as r, applyMentionEdit as s, mention_item_default as t, defaultMentionTriggers as u, readFieldCaret as v, readFieldText as y };