@saooti/octopus-sdk 42.0.4 → 42.0.5

package/dist/OctopusMultiselect-CDijfV8W.mjs

@@ -0,0 +1,325 @@
+import { t as ClassicCheckbox_default } from "./ClassicCheckbox-CqA5WUGc.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, isRef, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, toDisplayString, unref, vModelText, vShow, watch, withDirectives, withKeys, withModifiers } from "vue";
+import { useI18n } from "vue-i18n";
+import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
+import { onClickOutside } from "@vueuse/core";
+//#region src/components/composable/form/useOctopusDropdown.ts
+function useOctopusDropdown(props, emitSearch, idPrefix = "octopus-dropdown", ignore) {
+	const { t } = useI18n();
+	const instance = getCurrentInstance();
+	const searchQuery = ref("");
+	const isOpen = ref(false);
+	const isHovered = ref(false);
+	const containerRef = ref(null);
+	const inputRef = ref(null);
+	const teleportTarget = ref(".octopus-app");
+	const computedId = computed(() => `${idPrefix}-${instance?.uid}`);
+	const hasSearchListener = computed(() => !!instance?.vnode.props?.onSearch);
+	const displayedOptions = computed(() => {
+		if (hasSearchListener.value) return props.options;
+		const query = searchQuery.value.toLowerCase();
+		if (!query) return props.options;
+		return props.options.filter((option) => getLabel(option).toLowerCase().includes(query));
+	});
+	const inputPlaceholder = computed(() => props.placeholder ?? t("Search"));
+	function getLabel(option) {
+		if (props.optionLabel) return option[props.optionLabel];
+		return option;
+	}
+	function openDropdown() {
+		if (props.isDisabled) return;
+		teleportTarget.value = containerRef.value?.closest(".octopus-popover") ?? ".octopus-app";
+		isOpen.value = true;
+		nextTick(() => {
+			inputRef.value?.focus();
+		});
+	}
+	function closeDropdown() {
+		isOpen.value = false;
+		searchQuery.value = "";
+	}
+	function toggleDropdown() {
+		if (isOpen.value) closeDropdown();
+		else openDropdown();
+	}
+	function handleInput() {
+		if (hasSearchListener.value) emitSearch(searchQuery.value);
+	}
+	onClickOutside(containerRef, closeDropdown, ignore?.length ? { ignore } : void 0);
+	return {
+		searchQuery,
+		isOpen,
+		isHovered,
+		containerRef,
+		inputRef,
+		teleportTarget,
+		computedId,
+		hasSearchListener,
+		displayedOptions,
+		inputPlaceholder,
+		getLabel,
+		openDropdown,
+		closeDropdown,
+		toggleDropdown,
+		handleInput
+	};
+}
+//#endregion
+//#region src/components/form/OctopusMultiselect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["for"];
+var _hoisted_2 = { class: "octopus-multiselect-selection-text" };
+var _hoisted_3 = {
+	key: 0,
+	class: "octopus-multiselect-selection-count"
+};
+var _hoisted_4 = [
+	"id",
+	"placeholder",
+	"disabled"
+];
+var _hoisted_5 = ["disabled"];
+var _hoisted_6 = { class: "octopus-multiselect-options" };
+var _hoisted_7 = { key: 0 };
+var _hoisted_8 = { class: "text-indic px-2" };
+var _hoisted_9 = {
+	key: 1,
+	class: "text-indic px-2"
+};
+//#endregion
+//#region src/components/form/OctopusMultiselect.vue
+var OctopusMultiselect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "OctopusMultiselect",
+	props: {
+		label: {},
+		selected: {},
+		options: {},
+		optionKey: {},
+		optionLabel: {},
+		allowCustomValue: { type: Boolean },
+		disabled: { type: Boolean },
+		placeholder: {},
+		selectAllText: {},
+		noBorder: { type: Boolean },
+		expandOnHover: { type: Boolean },
+		pullSelectedToTop: { type: Boolean }
+	},
+	emits: ["update:selected", "search"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useI18n();
+		const dropdownRef = ref(null);
+		const { searchQuery, isOpen, isHovered, containerRef, inputRef, teleportTarget, computedId, displayedOptions, inputPlaceholder, getLabel, openDropdown, toggleDropdown, handleInput } = useOctopusDropdown(props, (query) => emit("search", query), "multiselect", [dropdownRef]);
+		const selectionRef = ref(null);
+		const dropdownStyle = ref({});
+		function updateDropdownPosition() {
+			if (!containerRef.value) return;
+			const rect = containerRef.value.getBoundingClientRect();
+			dropdownStyle.value = {
+				position: "fixed",
+				top: `${rect.bottom + 2}px`,
+				left: `${rect.left}px`,
+				width: `${rect.width}px`
+			};
+		}
+		function onFieldMouseEnter() {
+			isHovered.value = true;
+			if (props.expandOnHover) nextTick(updateDropdownPosition);
+		}
+		const visibleCount = ref(2);
+		const pinnedSnapshot = ref([]);
+		const customSelectedOptions = computed(() => {
+			if (!props.allowCustomValue) return [];
+			return (props.selected ?? []).filter((item) => !isInOptions(item));
+		});
+		const visibleOptions = computed(() => {
+			const query = searchQuery.value.toLowerCase();
+			const filteredCustom = query ? customSelectedOptions.value.filter((option) => getLabel(option).toLowerCase().includes(query)) : customSelectedOptions.value;
+			const combined = [...displayedOptions.value, ...filteredCustom];
+			if (!props.pullSelectedToTop) return combined;
+			return [...combined.filter(isPinned), ...combined.filter((option) => !isPinned(option))];
+		});
+		const allSelected = computed(() => {
+			if (visibleOptions.value.length === 0) return false;
+			return visibleOptions.value.every((option) => isSelected(option));
+		});
+		const hasSelected = computed(() => (props.selected?.length ?? 0) > 0);
+		const selectionLabels = computed(() => (props.selected ?? []).slice(0, visibleCount.value).map(getLabel).join(", "));
+		const overflowCount = computed(() => Math.max(0, (props.selected?.length ?? 0) - visibleCount.value));
+		const allLabelsText = computed(() => (props.selected ?? []).map(getLabel).join(", "));
+		function isSelected(option) {
+			if (props.optionKey) return props.selected?.find((s) => s[props.optionKey] === option[props.optionKey]) !== void 0;
+			else return props.selected?.includes(option) ?? false;
+		}
+		function isInOptions(option) {
+			if (props.optionKey) return props.options.some((opt) => opt[props.optionKey] === option[props.optionKey]);
+			else return props.options.includes(option);
+		}
+		function isPinned(option) {
+			if (props.optionKey) return pinnedSnapshot.value.some((s) => s[props.optionKey] === option[props.optionKey]);
+			else return pinnedSnapshot.value.includes(option);
+		}
+		function toggleOption(option) {
+			const current = props.selected ?? [];
+			if (isSelected(option)) {
+				const key = props.optionKey;
+				emit("update:selected", key ? current.filter((item) => item[key] !== option[key]) : current.filter((item) => item !== option));
+			} else emit("update:selected", [...current, option]);
+		}
+		function handleCustomValueEnter() {
+			if (!props.allowCustomValue) return;
+			const value = searchQuery.value.trim();
+			if (!value) return;
+			const customOption = value;
+			if (!isSelected(customOption)) emit("update:selected", [...props.selected ?? [], customOption]);
+			searchQuery.value = "";
+		}
+		function toggleAll(val) {
+			const current = props.selected ?? [];
+			if (val) {
+				const toAdd = visibleOptions.value.filter((option) => !isSelected(option));
+				emit("update:selected", [...current, ...toAdd]);
+			} else {
+				const key = props.optionKey;
+				emit("update:selected", current.filter((item) => key ? !visibleOptions.value.some((opt) => opt[key] === item[key]) : !visibleOptions.value.includes(item)));
+			}
+		}
+		function updateVisibleCount() {
+			const container = selectionRef.value;
+			const selected = props.selected ?? [];
+			if (!container || selected.length < 2) {
+				visibleCount.value = selected.length;
+				return;
+			}
+			const availableWidth = container.offsetWidth;
+			if (availableWidth === 0) return;
+			const labels = selected.map(getLabel);
+			const measurer = document.createElement("span");
+			measurer.style.cssText = "position:absolute;visibility:hidden;white-space:nowrap;pointer-events:none;";
+			container.appendChild(measurer);
+			measurer.textContent = labels.join(", ");
+			if (measurer.offsetWidth <= availableWidth) {
+				visibleCount.value = labels.length;
+				container.removeChild(measurer);
+				return;
+			}
+			measurer.textContent = `(+${labels.length})`;
+			const textAvailable = availableWidth - (measurer.offsetWidth + 4);
+			let count = 0;
+			for (let i = 0; i < labels.length; i++) {
+				measurer.textContent = labels.slice(0, i + 1).join(", ");
+				if (measurer.offsetWidth > textAvailable) break;
+				count = i + 1;
+			}
+			container.removeChild(measurer);
+			visibleCount.value = Math.max(1, count);
+		}
+		let resizeObserver = null;
+		onMounted(() => {
+			if (selectionRef.value) {
+				resizeObserver = new ResizeObserver(updateVisibleCount);
+				resizeObserver.observe(selectionRef.value);
+			}
+			updateVisibleCount();
+			window.addEventListener("scroll", updateDropdownPosition, true);
+			window.addEventListener("resize", updateDropdownPosition);
+		});
+		onUnmounted(() => {
+			resizeObserver?.disconnect();
+			window.removeEventListener("scroll", updateDropdownPosition, true);
+			window.removeEventListener("resize", updateDropdownPosition);
+		});
+		watch(() => props.selected, updateVisibleCount);
+		watch(isOpen, (val) => {
+			if (val) {
+				pinnedSnapshot.value = [...props.selected ?? []];
+				nextTick(updateDropdownPosition);
+			} else nextTick(updateVisibleCount);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: normalizeClass(["octopus-multiselect", { "form-margin": __props.label }])
+			}, [
+				__props.label ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					for: unref(computedId),
+					class: "form-label"
+				}, toDisplayString(__props.label), 9, _hoisted_1)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					class: normalizeClass(["octopus-multiselect-field", {
+						disabled: __props.disabled,
+						open: unref(isOpen),
+						noBorder: __props.noBorder
+					}]),
+					onClick: _cache[4] || (_cache[4] = (...args) => unref(openDropdown) && unref(openDropdown)(...args)),
+					onMouseenter: onFieldMouseEnter,
+					onMouseleave: _cache[5] || (_cache[5] = ($event) => isHovered.value = false)
+				}, [
+					withDirectives(createElementVNode("div", {
+						ref_key: "selectionRef",
+						ref: selectionRef,
+						class: "octopus-multiselect-selection"
+					}, [createElementVNode("span", _hoisted_2, toDisplayString(selectionLabels.value), 1), overflowCount.value > 0 ? (openBlock(), createElementBlock("span", _hoisted_3, "(+" + toDisplayString(overflowCount.value) + ")", 1)) : createCommentVNode("", true)], 512), [[vShow, hasSelected.value && !unref(isOpen)]]),
+					withDirectives(createElementVNode("input", {
+						id: unref(computedId),
+						ref_key: "inputRef",
+						ref: inputRef,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchQuery) ? searchQuery.value = $event : null),
+						type: "text",
+						class: "octopus-multiselect-input",
+						placeholder: unref(inputPlaceholder),
+						disabled: __props.disabled,
+						onFocus: _cache[1] || (_cache[1] = (...args) => unref(openDropdown) && unref(openDropdown)(...args)),
+						onInput: _cache[2] || (_cache[2] = (...args) => unref(handleInput) && unref(handleInput)(...args)),
+						onKeydown: withKeys(handleCustomValueEnter, ["enter"])
+					}, null, 40, _hoisted_4), [[vShow, !hasSelected.value || unref(isOpen)], [vModelText, unref(searchQuery)]]),
+					createElementVNode("button", {
+						class: "btn-transparent octopus-multiselect-chevron",
+						disabled: __props.disabled,
+						onClick: _cache[3] || (_cache[3] = withModifiers((...args) => unref(toggleDropdown) && unref(toggleDropdown)(...args), ["stop"]))
+					}, [createVNode(ChevronDownIcon)], 8, _hoisted_5)
+				], 34),
+				(openBlock(), createBlock(Teleport, { to: unref(teleportTarget) }, [__props.expandOnHover && unref(isHovered) && !unref(isOpen) && overflowCount.value > 0 ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "octopus-multiselect-hover-tooltip",
+					style: normalizeStyle(dropdownStyle.value)
+				}, toDisplayString(allLabelsText.value), 5)) : createCommentVNode("", true), unref(isOpen) ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					ref_key: "dropdownRef",
+					ref: dropdownRef,
+					class: "octopus-multiselect-dropdown",
+					style: normalizeStyle(dropdownStyle.value)
+				}, [createVNode(ClassicCheckbox_default, {
+					"text-init": allSelected.value,
+					label: __props.selectAllText ?? unref(t)("All"),
+					"is-disabled": __props.disabled,
+					"onUpdate:textInit": toggleAll
+				}, null, 8, [
+					"text-init",
+					"label",
+					"is-disabled"
+				]), createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleOptions.value, (option, index) => {
+					return openBlock(), createBlock(ClassicCheckbox_default, {
+						key: index,
+						"text-init": isSelected(option),
+						label: unref(getLabel)(option),
+						"is-disabled": __props.disabled,
+						"onUpdate:textInit": ($event) => toggleOption(option)
+					}, null, 8, [
+						"text-init",
+						"label",
+						"is-disabled",
+						"onUpdate:textInit"
+					]);
+				}), 128)), __props.allowCustomValue && unref(searchQuery).trim() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [visibleOptions.value.length > 0 ? (openBlock(), createElementBlock("hr", _hoisted_7)) : createCommentVNode("", true), createElementVNode("span", _hoisted_8, toDisplayString(unref(t)("Press Enter to add this value")), 1)], 64)) : visibleOptions.value.length === 0 ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(t)("No elements found. Consider changing the search query.")), 1)) : createCommentVNode("", true)])], 4)) : createCommentVNode("", true)], 8, ["to"]))
+			], 2);
+		};
+	}
+}), [["__scopeId", "data-v-9fb1fd0d"]]);
+//#endregion
+export { useOctopusDropdown as n, OctopusMultiselect_default as t };
+
+//# sourceMappingURL=OctopusMultiselect-CDijfV8W.mjs.map

package/dist/OctopusMultiselect-CDijfV8W.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OctopusMultiselect-CDijfV8W.mjs","names":[],"sources":["../src/components/composable/form/useOctopusDropdown.ts","../src/components/form/OctopusMultiselect.vue","../src/components/form/OctopusMultiselect.vue"],"sourcesContent":["import { computed, getCurrentInstance, nextTick, ref } from 'vue';\nimport { type MaybeElementRef, onClickOutside } from '@vueuse/core';\nimport { useI18n } from 'vue-i18n';\n\nexport interface OctopusDropdownProps<T> {\n    options: T[];\n    optionLabel?: keyof T & string;\n    optionKey?: keyof T;\n    isDisabled?: boolean;\n    placeholder?: string;\n}\n\nexport function useOctopusDropdown<T>(\n    props: OctopusDropdownProps<T>,\n    emitSearch: (query: string) => void,\n    idPrefix: string = 'octopus-dropdown',\n    // Extra elements to exclude from the click-outside check.\n    // Needed when the dropdown is teleported outside containerRef (e.g. to body):\n    // without this, clicking inside the teleported dropdown triggers closeDropdown\n    // because it is no longer a DOM descendant of containerRef.\n    ignore?: MaybeElementRef[]\n) {\n    const { t } = useI18n();\n    const instance = getCurrentInstance();\n\n    const searchQuery = ref('');\n    const isOpen = ref(false);\n    const isHovered = ref(false);\n    const containerRef = ref<HTMLElement | null>(null);\n    const inputRef = ref<HTMLInputElement | null>(null);\n    // Where the dropdown/options list (teleported out of normal flow) should land. Defaults\n    // to the app root, but when this component is used inside a ClassicPopover, teleporting\n    // there instead keeps the dropdown a real DOM descendant of it — otherwise both end up as\n    // siblings under the same teleport target, and ClassicPopover's outside-click/blur checks\n    // (which rely on DOM containment) see clicks inside the dropdown as \"outside\" and close it.\n    const teleportTarget = ref<string | HTMLElement>('.octopus-app');\n\n    const computedId = computed(() => `${idPrefix}-${instance?.uid}`);\n\n    // vnode.props contains the raw parent-provided props before defineEmits strips them\n    // from attrs, so onSearch is present whenever the parent writes @search=\"...\".\n    const hasSearchListener = computed(() => !!instance?.vnode.props?.onSearch);\n\n    const displayedOptions = computed((): T[] => {\n        if (hasSearchListener.value) {\n            return props.options;\n        }\n        const query = searchQuery.value.toLowerCase();\n        if (!query) {\n            return props.options;\n        }\n        return props.options.filter((option) =>\n            getLabel(option).toLowerCase().includes(query)\n        );\n    });\n\n    const inputPlaceholder = computed(() => props.placeholder ?? t('Search'));\n\n    function getLabel(option: T): string {\n        if (props.optionLabel) {\n            return option[props.optionLabel] as string;\n        }\n        return option as unknown as string;\n    }\n\n    function openDropdown(): void {\n        if (props.isDisabled) {\n            return;\n        }\n        teleportTarget.value = containerRef.value?.closest<HTMLElement>('.octopus-popover') ?? '.octopus-app';\n        isOpen.value = true;\n        nextTick(() => {\n            inputRef.value?.focus();\n        });\n    }\n\n    function closeDropdown(): void {\n        isOpen.value = false;\n        searchQuery.value = '';\n    }\n\n    function toggleDropdown(): void {\n        if (isOpen.value) {\n            closeDropdown();\n        } else {\n            openDropdown();\n        }\n    }\n\n    function handleInput(): void {\n        if (hasSearchListener.value) {\n            emitSearch(searchQuery.value);\n        }\n    }\n\n    onClickOutside(containerRef, closeDropdown, ignore?.length ? { ignore } : undefined);\n\n    return {\n        searchQuery,\n        isOpen,\n        isHovered,\n        containerRef,\n        inputRef,\n        teleportTarget,\n        computedId,\n        hasSearchListener,\n        displayedOptions,\n        inputPlaceholder,\n        getLabel,\n        openDropdown,\n        closeDropdown,\n        toggleDropdown,\n        handleInput,\n    };\n}\n","<template>\n    <div\n        ref=\"containerRef\"\n        class=\"octopus-multiselect\"\n        :class=\"{ 'form-margin': label }\"\n    >\n        <label\n            v-if=\"label\"\n            :for=\"computedId\"\n            class=\"form-label\"\n        >\n            {{ label }}\n        </label>\n\n        <div\n            class=\"octopus-multiselect-field\"\n            :class=\"{ disabled, open: isOpen, noBorder }\"\n            @click=\"openDropdown\"\n            @mouseenter=\"onFieldMouseEnter\"\n            @mouseleave=\"isHovered = false\"\n        >\n            <div\n                v-show=\"hasSelected && !isOpen\"\n                ref=\"selectionRef\"\n                class=\"octopus-multiselect-selection\"\n            >\n                <span class=\"octopus-multiselect-selection-text\">{{ selectionLabels }}</span>\n                <span\n                    v-if=\"overflowCount > 0\"\n                    class=\"octopus-multiselect-selection-count\"\n                >(+{{ overflowCount }})</span>\n            </div>\n            <input\n                v-show=\"!hasSelected || isOpen\"\n                :id=\"computedId\"\n                ref=\"inputRef\"\n                v-model=\"searchQuery\"\n                type=\"text\"\n                class=\"octopus-multiselect-input\"\n                :placeholder=\"inputPlaceholder\"\n                :disabled=\"disabled\"\n                @focus=\"openDropdown\"\n                @input=\"handleInput\"\n                @keydown.enter=\"handleCustomValueEnter\"\n            >\n            <button\n                class=\"btn-transparent octopus-multiselect-chevron\"\n                :disabled=\"disabled\"\n                @click.stop=\"toggleDropdown\"\n            >\n                <ChevronDownIcon />\n            </button>\n        </div>\n\n        <Teleport :to=\"teleportTarget\">\n            <div\n                v-if=\"expandOnHover && isHovered && !isOpen && overflowCount > 0\"\n                class=\"octopus-multiselect-hover-tooltip\"\n                :style=\"dropdownStyle\"\n            >\n                {{ allLabelsText }}\n            </div>\n\n            <div\n                v-if=\"isOpen\"\n                ref=\"dropdownRef\"\n                class=\"octopus-multiselect-dropdown\"\n                :style=\"dropdownStyle\"\n            >\n                <ClassicCheckbox\n                    :text-init=\"allSelected\"\n                    :label=\"selectAllText ?? t('All')\"\n                    :is-disabled=\"disabled\"\n                    @update:text-init=\"toggleAll\"\n                />\n\n                <div class=\"octopus-multiselect-options\">\n                    <ClassicCheckbox\n                        v-for=\"(option, index) in visibleOptions\"\n                        :key=\"index\"\n                        :text-init=\"isSelected(option)\"\n                        :label=\"getLabel(option)\"\n                        :is-disabled=\"disabled\"\n                        @update:text-init=\"toggleOption(option)\"\n                    />\n                    <template v-if=\"allowCustomValue && searchQuery.trim()\">\n                        <hr v-if=\"visibleOptions.length > 0\">\n                        <span class=\"text-indic px-2\">\n                            {{ t('Press Enter to add this value') }}\n                        </span>\n                    </template>\n                    <span v-else-if=\"visibleOptions.length === 0\" class=\"text-indic px-2\">\n                        {{ t('No elements found. Consider changing the search query.') }}\n                    </span>\n                </div>\n            </div>\n        </Teleport>\n    </div>\n</template>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { type CSSProperties, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';\nimport ClassicCheckbox from './ClassicCheckbox.vue';\nimport { useOctopusDropdown } from '../composable/form/useOctopusDropdown';\n\nconst props = defineProps<{\n    /** Optional label displayed above the field. */\n    label?: string;\n    /** Currently selected items. Bind with `v-model:selected`. */\n    selected?: T[];\n    /** Full list of options to display or filter. */\n    options: T[];\n    /** Key of each option object to use as the ID */\n    optionKey?: keyof T;\n    /** Key of each option object to use as the display label. Omit when `options` is a\n     *  plain `string[]` — each string is used as its own label. Note: omitting this for\n     *  an object array is a runtime mistake (not caught at compile time) and will render\n     *  \"[object Object]\". */\n    optionLabel?: keyof T & string;\n    /** When true, pressing Enter in the search input adds the typed text as a new\n     *  selected value, even if it doesn't match any option. Intended for use when\n     *  options are plain strings (`optionLabel` omitted) — casting arbitrary typed\n     *  text into an object-shaped T would not produce a valid option. */\n    allowCustomValue?: boolean;\n    /** Disables the field and all checkboxes when true. */\n    disabled?: boolean;\n    /** Placeholder shown in the input when no items are selected. Defaults to the translated \"Search\" string. */\n    placeholder?: string;\n    /** Label for the \"select all\" checkbox. Defaults to the translated \"All\" string. */\n    selectAllText?: string;\n    /** Disable the border around the input */\n    noBorder?: boolean;\n    /** When true, hovering the closed field with overflow shows a tooltip listing all selected items. */\n    expandOnHover?: boolean;\n    /** When true, options selected at the moment the dropdown opens are moved to the\n     *  top of the list. This is a snapshot taken at open time — it does not live-reorder\n     *  while the dropdown stays open, only on the next closed→open transition. */\n    pullSelectedToTop?: boolean;\n}>();\n\nconst emit = defineEmits<{\n    /** Emitted when the selection changes. */\n    (e: 'update:selected', value: T[]): void;\n    /** Emitted on every input change. When listened to, the parent is responsible for\n     *  updating `options`; otherwise the component filters `options` client-side. */\n    (e: 'search', query: string): void;\n}>();\n\nconst { t } = useI18n();\n\n// Ref on the teleported dropdown div — passed as ignored element to useOctopusDropdown\n// so clicks inside the dropdown don't trigger the click-outside handler.\nconst dropdownRef = ref<HTMLElement | null>(null);\n\nconst {\n    searchQuery,\n    isOpen,\n    isHovered,\n    containerRef,\n    inputRef,\n    teleportTarget,\n    computedId,\n    displayedOptions,\n    inputPlaceholder,\n    getLabel,\n    openDropdown,\n    toggleDropdown,\n    handleInput,\n} = useOctopusDropdown(props, (query) => emit('search', query), 'multiselect', [dropdownRef]);\n\nconst selectionRef = ref<HTMLElement | null>(null);\n\n// Position of the teleported dropdown (position: fixed, anchored below the trigger field)\nconst dropdownStyle = ref<CSSProperties>({});\n\n// Also used to position the hover tooltip: both are teleported and anchored the same way\n// (fixed, directly below the field, same width), and are never shown at the same time.\nfunction updateDropdownPosition(): void {\n    if (!containerRef.value) { return; }\n    const rect = containerRef.value.getBoundingClientRect();\n    dropdownStyle.value = {\n        position: 'fixed',\n        top: `${rect.bottom + 2}px`,\n        left: `${rect.left}px`,\n        width: `${rect.width}px`,\n    };\n}\n\nfunction onFieldMouseEnter(): void {\n    isHovered.value = true;\n    if (props.expandOnHover) {\n        nextTick(updateDropdownPosition);\n    }\n}\n\nconst visibleCount = ref(2);\n\n// Selection snapshot captured the instant the dropdown opens, used only to freeze the\n// sort order when pullSelectedToTop is set — does not react to later `selected` changes\n// while the dropdown stays open.\nconst pinnedSnapshot = ref<T[]>([]);\n\n// Selected values not present in `options` — only populated when allowCustomValue is set,\n// so a custom value typed via handleCustomValueEnter still shows (checked) in the dropdown.\nconst customSelectedOptions = computed<T[]>(() => {\n    if (!props.allowCustomValue) { return []; }\n    return (props.selected ?? []).filter((item) => !isInOptions(item));\n});\n\nconst visibleOptions = computed<T[]>(() => {\n    const query = searchQuery.value.toLowerCase();\n    const filteredCustom = query\n        ? customSelectedOptions.value.filter((option) => getLabel(option).toLowerCase().includes(query))\n        : customSelectedOptions.value;\n    const combined = [...displayedOptions.value, ...filteredCustom];\n    if (!props.pullSelectedToTop) {\n        return combined;\n    }\n    return [...combined.filter(isPinned), ...combined.filter((option) => !isPinned(option))];\n});\n\nconst allSelected = computed(() => {\n    if (visibleOptions.value.length === 0) {\n        return false;\n    }\n    return visibleOptions.value.every((option) => isSelected(option));\n});\n\nconst hasSelected = computed(() => (props.selected?.length ?? 0) > 0);\n\nconst selectionLabels = computed(() =>\n    (props.selected ?? []).slice(0, visibleCount.value).map(getLabel).join(', ')\n);\n\nconst overflowCount = computed(() =>\n    Math.max(0, (props.selected?.length ?? 0) - visibleCount.value)\n);\n\nconst allLabelsText = computed(() =>\n    (props.selected ?? []).map(getLabel).join(', ')\n);\n\nfunction isSelected(option: T): boolean {\n    if (props.optionKey) {\n        return props.selected?.find(s => s[props.optionKey] === option[props.optionKey]) !== undefined;\n    } else {\n        return props.selected?.includes(option) ?? false;\n    }\n}\n\nfunction isInOptions(option: T): boolean {\n    if (props.optionKey) {\n        return props.options.some((opt) => opt[props.optionKey] === option[props.optionKey]);\n    } else {\n        return props.options.includes(option);\n    }\n}\n\nfunction isPinned(option: T): boolean {\n    if (props.optionKey) {\n        return pinnedSnapshot.value.some((s) => s[props.optionKey] === option[props.optionKey]);\n    } else {\n        return pinnedSnapshot.value.includes(option);\n    }\n}\n\nfunction toggleOption(option: T): void {\n    const current = props.selected ?? [];\n    if (isSelected(option)) {\n        const key = props.optionKey;\n        emit('update:selected', key\n            ? current.filter((item) => item[key] !== option[key])\n            : current.filter((item) => item !== option)\n        );\n    } else {\n        emit('update:selected', [...current, option]);\n    }\n}\n\nfunction handleCustomValueEnter(): void {\n    if (!props.allowCustomValue) { return; }\n    const value = searchQuery.value.trim();\n    if (!value) { return; }\n    const customOption = value as unknown as T;\n    if (!isSelected(customOption)) {\n        emit('update:selected', [...(props.selected ?? []), customOption]);\n    }\n    searchQuery.value = '';\n}\n\nfunction toggleAll(val: boolean): void {\n    const current = props.selected ?? [];\n    if (val) {\n        const toAdd = visibleOptions.value.filter((option: T) => !isSelected(option));\n        emit('update:selected', [...current, ...toAdd]);\n    } else {\n        const key = props.optionKey;\n        emit('update:selected', current.filter((item: T) => key\n            ? !visibleOptions.value.some((opt) => opt[key] === item[key])\n            : !visibleOptions.value.includes(item)\n        ));\n    }\n}\n\nfunction updateVisibleCount(): void {\n    const container = selectionRef.value;\n    const selected = props.selected ?? [];\n    if (!container || selected.length < 2) {\n        visibleCount.value = selected.length;\n        return;\n    }\n\n    const availableWidth = container.offsetWidth;\n    if (availableWidth === 0) {\n        return;\n    }\n\n    const labels = selected.map(getLabel);\n    const measurer = document.createElement('span');\n    measurer.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;pointer-events:none;';\n    container.appendChild(measurer);\n\n    measurer.textContent = labels.join(', ');\n    if (measurer.offsetWidth <= availableWidth) {\n        visibleCount.value = labels.length;\n        container.removeChild(measurer);\n        return;\n    }\n\n    measurer.textContent = `(+${labels.length})`;\n    const badgeWidth = measurer.offsetWidth + 4;\n    const textAvailable = availableWidth - badgeWidth;\n\n    let count = 0;\n    for (let i = 0; i < labels.length; i++) {\n        measurer.textContent = labels.slice(0, i + 1).join(', ');\n        if (measurer.offsetWidth > textAvailable) {\n            break;\n        }\n        count = i + 1;\n    }\n\n    container.removeChild(measurer);\n    visibleCount.value = Math.max(1, count);\n}\n\nlet resizeObserver: ResizeObserver | null = null;\n\nonMounted(() => {\n    if (selectionRef.value) {\n        resizeObserver = new ResizeObserver(updateVisibleCount);\n        resizeObserver.observe(selectionRef.value);\n    }\n    updateVisibleCount();\n    // Keep the teleported dropdown aligned when the page scrolls or the viewport resizes\n    window.addEventListener('scroll', updateDropdownPosition, true);\n    window.addEventListener('resize', updateDropdownPosition);\n});\n\nonUnmounted(() => {\n    resizeObserver?.disconnect();\n    window.removeEventListener('scroll', updateDropdownPosition, true);\n    window.removeEventListener('resize', updateDropdownPosition);\n});\n\nwatch(() => props.selected, updateVisibleCount);\n\nwatch(isOpen, (val) => {\n    if (val) {\n        pinnedSnapshot.value = [...(props.selected ?? [])];\n        nextTick(updateDropdownPosition);\n    } else {\n        nextTick(updateVisibleCount);\n    }\n});\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-multiselect {\n    position: relative;\n\n    .octopus-multiselect-field {\n        display: flex;\n        align-items: center;\n        border: 1px solid var(--octopus-border-default);\n        border-radius: var(--octopus-border-radius);\n        background: white;\n        cursor: pointer;\n\n        &.open {\n            border-color: var(--octopus-primary);\n        }\n\n        &.disabled {\n            background: var(--octopus-secondary-lighter);\n            cursor: default;\n        }\n\n        &.noBorder {\n            border: none;\n        }\n    }\n\n    .octopus-multiselect-selection {\n        display: flex;\n        align-items: center;\n        flex: 1;\n        min-width: 0;\n        padding: 0.4rem 0.5rem;\n        height: 2rem;\n        gap: 0.25rem;\n    }\n\n    .octopus-multiselect-selection-text {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .octopus-multiselect-selection-count {\n        flex-shrink: 0;\n        white-space: nowrap;\n        color: var(--octopus-primary);\n    }\n\n    .octopus-multiselect-input {\n        flex: 1;\n        border: none;\n        background: transparent;\n        padding: 0.4rem 0.5rem;\n        padding-right: 0;\n        height: 2rem;\n        outline: none;\n        cursor: inherit;\n        min-width: 0;\n    }\n\n    .octopus-multiselect-chevron {\n        padding: 0.25rem 0.5rem;\n        display: flex;\n        align-items: center;\n    }\n\n}\n\n// Dropdown/tooltip are teleported to body — scoped rules must be top-level so that\n// [data-v-xxxx] is matched directly on the element rather than via a descendant-of-.octopus-multiselect selector.\n.octopus-multiselect-hover-tooltip {\n    z-index: 101;\n    background: white;\n    border: 1px solid var(--octopus-border-default);\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    padding: 0.5rem;\n    word-break: break-word;\n    pointer-events: none;\n}\n\n.octopus-multiselect-dropdown {\n    z-index: 100;\n    background: white;\n    border: 1px solid var(--octopus-border-default);\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    padding: 0.25rem 0;\n\n    > .octopus-form-item {\n        padding: 0.25rem 0.5rem;\n        border-bottom: 1px solid var(--octopus-secondary);\n    }\n}\n\n.octopus-multiselect-options {\n    max-height: 14rem;\n    overflow-y: auto;\n\n    .octopus-form-item {\n        padding: 0.25rem 0.5rem;\n    }\n}\n\nhr {\n    border-top: 1px solid var(--octopus-secondary);\n    border-bottom: none;\n    margin: 0;\n}\n</style>\n","<template>\n    <div\n        ref=\"containerRef\"\n        class=\"octopus-multiselect\"\n        :class=\"{ 'form-margin': label }\"\n    >\n        <label\n            v-if=\"label\"\n            :for=\"computedId\"\n            class=\"form-label\"\n        >\n            {{ label }}\n        </label>\n\n        <div\n            class=\"octopus-multiselect-field\"\n            :class=\"{ disabled, open: isOpen, noBorder }\"\n            @click=\"openDropdown\"\n            @mouseenter=\"onFieldMouseEnter\"\n            @mouseleave=\"isHovered = false\"\n        >\n            <div\n                v-show=\"hasSelected && !isOpen\"\n                ref=\"selectionRef\"\n                class=\"octopus-multiselect-selection\"\n            >\n                <span class=\"octopus-multiselect-selection-text\">{{ selectionLabels }}</span>\n                <span\n                    v-if=\"overflowCount > 0\"\n                    class=\"octopus-multiselect-selection-count\"\n                >(+{{ overflowCount }})</span>\n            </div>\n            <input\n                v-show=\"!hasSelected || isOpen\"\n                :id=\"computedId\"\n                ref=\"inputRef\"\n                v-model=\"searchQuery\"\n                type=\"text\"\n                class=\"octopus-multiselect-input\"\n                :placeholder=\"inputPlaceholder\"\n                :disabled=\"disabled\"\n                @focus=\"openDropdown\"\n                @input=\"handleInput\"\n                @keydown.enter=\"handleCustomValueEnter\"\n            >\n            <button\n                class=\"btn-transparent octopus-multiselect-chevron\"\n                :disabled=\"disabled\"\n                @click.stop=\"toggleDropdown\"\n            >\n                <ChevronDownIcon />\n            </button>\n        </div>\n\n        <Teleport :to=\"teleportTarget\">\n            <div\n                v-if=\"expandOnHover && isHovered && !isOpen && overflowCount > 0\"\n                class=\"octopus-multiselect-hover-tooltip\"\n                :style=\"dropdownStyle\"\n            >\n                {{ allLabelsText }}\n            </div>\n\n            <div\n                v-if=\"isOpen\"\n                ref=\"dropdownRef\"\n                class=\"octopus-multiselect-dropdown\"\n                :style=\"dropdownStyle\"\n            >\n                <ClassicCheckbox\n                    :text-init=\"allSelected\"\n                    :label=\"selectAllText ?? t('All')\"\n                    :is-disabled=\"disabled\"\n                    @update:text-init=\"toggleAll\"\n                />\n\n                <div class=\"octopus-multiselect-options\">\n                    <ClassicCheckbox\n                        v-for=\"(option, index) in visibleOptions\"\n                        :key=\"index\"\n                        :text-init=\"isSelected(option)\"\n                        :label=\"getLabel(option)\"\n                        :is-disabled=\"disabled\"\n                        @update:text-init=\"toggleOption(option)\"\n                    />\n                    <template v-if=\"allowCustomValue && searchQuery.trim()\">\n                        <hr v-if=\"visibleOptions.length > 0\">\n                        <span class=\"text-indic px-2\">\n                            {{ t('Press Enter to add this value') }}\n                        </span>\n                    </template>\n                    <span v-else-if=\"visibleOptions.length === 0\" class=\"text-indic px-2\">\n                        {{ t('No elements found. Consider changing the search query.') }}\n                    </span>\n                </div>\n            </div>\n        </Teleport>\n    </div>\n</template>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { type CSSProperties, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';\nimport ClassicCheckbox from './ClassicCheckbox.vue';\nimport { useOctopusDropdown } from '../composable/form/useOctopusDropdown';\n\nconst props = defineProps<{\n    /** Optional label displayed above the field. */\n    label?: string;\n    /** Currently selected items. Bind with `v-model:selected`. */\n    selected?: T[];\n    /** Full list of options to display or filter. */\n    options: T[];\n    /** Key of each option object to use as the ID */\n    optionKey?: keyof T;\n    /** Key of each option object to use as the display label. Omit when `options` is a\n     *  plain `string[]` — each string is used as its own label. Note: omitting this for\n     *  an object array is a runtime mistake (not caught at compile time) and will render\n     *  \"[object Object]\". */\n    optionLabel?: keyof T & string;\n    /** When true, pressing Enter in the search input adds the typed text as a new\n     *  selected value, even if it doesn't match any option. Intended for use when\n     *  options are plain strings (`optionLabel` omitted) — casting arbitrary typed\n     *  text into an object-shaped T would not produce a valid option. */\n    allowCustomValue?: boolean;\n    /** Disables the field and all checkboxes when true. */\n    disabled?: boolean;\n    /** Placeholder shown in the input when no items are selected. Defaults to the translated \"Search\" string. */\n    placeholder?: string;\n    /** Label for the \"select all\" checkbox. Defaults to the translated \"All\" string. */\n    selectAllText?: string;\n    /** Disable the border around the input */\n    noBorder?: boolean;\n    /** When true, hovering the closed field with overflow shows a tooltip listing all selected items. */\n    expandOnHover?: boolean;\n    /** When true, options selected at the moment the dropdown opens are moved to the\n     *  top of the list. This is a snapshot taken at open time — it does not live-reorder\n     *  while the dropdown stays open, only on the next closed→open transition. */\n    pullSelectedToTop?: boolean;\n}>();\n\nconst emit = defineEmits<{\n    /** Emitted when the selection changes. */\n    (e: 'update:selected', value: T[]): void;\n    /** Emitted on every input change. When listened to, the parent is responsible for\n     *  updating `options`; otherwise the component filters `options` client-side. */\n    (e: 'search', query: string): void;\n}>();\n\nconst { t } = useI18n();\n\n// Ref on the teleported dropdown div — passed as ignored element to useOctopusDropdown\n// so clicks inside the dropdown don't trigger the click-outside handler.\nconst dropdownRef = ref<HTMLElement | null>(null);\n\nconst {\n    searchQuery,\n    isOpen,\n    isHovered,\n    containerRef,\n    inputRef,\n    teleportTarget,\n    computedId,\n    displayedOptions,\n    inputPlaceholder,\n    getLabel,\n    openDropdown,\n    toggleDropdown,\n    handleInput,\n} = useOctopusDropdown(props, (query) => emit('search', query), 'multiselect', [dropdownRef]);\n\nconst selectionRef = ref<HTMLElement | null>(null);\n\n// Position of the teleported dropdown (position: fixed, anchored below the trigger field)\nconst dropdownStyle = ref<CSSProperties>({});\n\n// Also used to position the hover tooltip: both are teleported and anchored the same way\n// (fixed, directly below the field, same width), and are never shown at the same time.\nfunction updateDropdownPosition(): void {\n    if (!containerRef.value) { return; }\n    const rect = containerRef.value.getBoundingClientRect();\n    dropdownStyle.value = {\n        position: 'fixed',\n        top: `${rect.bottom + 2}px`,\n        left: `${rect.left}px`,\n        width: `${rect.width}px`,\n    };\n}\n\nfunction onFieldMouseEnter(): void {\n    isHovered.value = true;\n    if (props.expandOnHover) {\n        nextTick(updateDropdownPosition);\n    }\n}\n\nconst visibleCount = ref(2);\n\n// Selection snapshot captured the instant the dropdown opens, used only to freeze the\n// sort order when pullSelectedToTop is set — does not react to later `selected` changes\n// while the dropdown stays open.\nconst pinnedSnapshot = ref<T[]>([]);\n\n// Selected values not present in `options` — only populated when allowCustomValue is set,\n// so a custom value typed via handleCustomValueEnter still shows (checked) in the dropdown.\nconst customSelectedOptions = computed<T[]>(() => {\n    if (!props.allowCustomValue) { return []; }\n    return (props.selected ?? []).filter((item) => !isInOptions(item));\n});\n\nconst visibleOptions = computed<T[]>(() => {\n    const query = searchQuery.value.toLowerCase();\n    const filteredCustom = query\n        ? customSelectedOptions.value.filter((option) => getLabel(option).toLowerCase().includes(query))\n        : customSelectedOptions.value;\n    const combined = [...displayedOptions.value, ...filteredCustom];\n    if (!props.pullSelectedToTop) {\n        return combined;\n    }\n    return [...combined.filter(isPinned), ...combined.filter((option) => !isPinned(option))];\n});\n\nconst allSelected = computed(() => {\n    if (visibleOptions.value.length === 0) {\n        return false;\n    }\n    return visibleOptions.value.every((option) => isSelected(option));\n});\n\nconst hasSelected = computed(() => (props.selected?.length ?? 0) > 0);\n\nconst selectionLabels = computed(() =>\n    (props.selected ?? []).slice(0, visibleCount.value).map(getLabel).join(', ')\n);\n\nconst overflowCount = computed(() =>\n    Math.max(0, (props.selected?.length ?? 0) - visibleCount.value)\n);\n\nconst allLabelsText = computed(() =>\n    (props.selected ?? []).map(getLabel).join(', ')\n);\n\nfunction isSelected(option: T): boolean {\n    if (props.optionKey) {\n        return props.selected?.find(s => s[props.optionKey] === option[props.optionKey]) !== undefined;\n    } else {\n        return props.selected?.includes(option) ?? false;\n    }\n}\n\nfunction isInOptions(option: T): boolean {\n    if (props.optionKey) {\n        return props.options.some((opt) => opt[props.optionKey] === option[props.optionKey]);\n    } else {\n        return props.options.includes(option);\n    }\n}\n\nfunction isPinned(option: T): boolean {\n    if (props.optionKey) {\n        return pinnedSnapshot.value.some((s) => s[props.optionKey] === option[props.optionKey]);\n    } else {\n        return pinnedSnapshot.value.includes(option);\n    }\n}\n\nfunction toggleOption(option: T): void {\n    const current = props.selected ?? [];\n    if (isSelected(option)) {\n        const key = props.optionKey;\n        emit('update:selected', key\n            ? current.filter((item) => item[key] !== option[key])\n            : current.filter((item) => item !== option)\n        );\n    } else {\n        emit('update:selected', [...current, option]);\n    }\n}\n\nfunction handleCustomValueEnter(): void {\n    if (!props.allowCustomValue) { return; }\n    const value = searchQuery.value.trim();\n    if (!value) { return; }\n    const customOption = value as unknown as T;\n    if (!isSelected(customOption)) {\n        emit('update:selected', [...(props.selected ?? []), customOption]);\n    }\n    searchQuery.value = '';\n}\n\nfunction toggleAll(val: boolean): void {\n    const current = props.selected ?? [];\n    if (val) {\n        const toAdd = visibleOptions.value.filter((option: T) => !isSelected(option));\n        emit('update:selected', [...current, ...toAdd]);\n    } else {\n        const key = props.optionKey;\n        emit('update:selected', current.filter((item: T) => key\n            ? !visibleOptions.value.some((opt) => opt[key] === item[key])\n            : !visibleOptions.value.includes(item)\n        ));\n    }\n}\n\nfunction updateVisibleCount(): void {\n    const container = selectionRef.value;\n    const selected = props.selected ?? [];\n    if (!container || selected.length < 2) {\n        visibleCount.value = selected.length;\n        return;\n    }\n\n    const availableWidth = container.offsetWidth;\n    if (availableWidth === 0) {\n        return;\n    }\n\n    const labels = selected.map(getLabel);\n    const measurer = document.createElement('span');\n    measurer.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;pointer-events:none;';\n    container.appendChild(measurer);\n\n    measurer.textContent = labels.join(', ');\n    if (measurer.offsetWidth <= availableWidth) {\n        visibleCount.value = labels.length;\n        container.removeChild(measurer);\n        return;\n    }\n\n    measurer.textContent = `(+${labels.length})`;\n    const badgeWidth = measurer.offsetWidth + 4;\n    const textAvailable = availableWidth - badgeWidth;\n\n    let count = 0;\n    for (let i = 0; i < labels.length; i++) {\n        measurer.textContent = labels.slice(0, i + 1).join(', ');\n        if (measurer.offsetWidth > textAvailable) {\n            break;\n        }\n        count = i + 1;\n    }\n\n    container.removeChild(measurer);\n    visibleCount.value = Math.max(1, count);\n}\n\nlet resizeObserver: ResizeObserver | null = null;\n\nonMounted(() => {\n    if (selectionRef.value) {\n        resizeObserver = new ResizeObserver(updateVisibleCount);\n        resizeObserver.observe(selectionRef.value);\n    }\n    updateVisibleCount();\n    // Keep the teleported dropdown aligned when the page scrolls or the viewport resizes\n    window.addEventListener('scroll', updateDropdownPosition, true);\n    window.addEventListener('resize', updateDropdownPosition);\n});\n\nonUnmounted(() => {\n    resizeObserver?.disconnect();\n    window.removeEventListener('scroll', updateDropdownPosition, true);\n    window.removeEventListener('resize', updateDropdownPosition);\n});\n\nwatch(() => props.selected, updateVisibleCount);\n\nwatch(isOpen, (val) => {\n    if (val) {\n        pinnedSnapshot.value = [...(props.selected ?? [])];\n        nextTick(updateDropdownPosition);\n    } else {\n        nextTick(updateVisibleCount);\n    }\n});\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-multiselect {\n    position: relative;\n\n    .octopus-multiselect-field {\n        display: flex;\n        align-items: center;\n        border: 1px solid var(--octopus-border-default);\n        border-radius: var(--octopus-border-radius);\n        background: white;\n        cursor: pointer;\n\n        &.open {\n            border-color: var(--octopus-primary);\n        }\n\n        &.disabled {\n            background: var(--octopus-secondary-lighter);\n            cursor: default;\n        }\n\n        &.noBorder {\n            border: none;\n        }\n    }\n\n    .octopus-multiselect-selection {\n        display: flex;\n        align-items: center;\n        flex: 1;\n        min-width: 0;\n        padding: 0.4rem 0.5rem;\n        height: 2rem;\n        gap: 0.25rem;\n    }\n\n    .octopus-multiselect-selection-text {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .octopus-multiselect-selection-count {\n        flex-shrink: 0;\n        white-space: nowrap;\n        color: var(--octopus-primary);\n    }\n\n    .octopus-multiselect-input {\n        flex: 1;\n        border: none;\n        background: transparent;\n        padding: 0.4rem 0.5rem;\n        padding-right: 0;\n        height: 2rem;\n        outline: none;\n        cursor: inherit;\n        min-width: 0;\n    }\n\n    .octopus-multiselect-chevron {\n        padding: 0.25rem 0.5rem;\n        display: flex;\n        align-items: center;\n    }\n\n}\n\n// Dropdown/tooltip are teleported to body — scoped rules must be top-level so that\n// [data-v-xxxx] is matched directly on the element rather than via a descendant-of-.octopus-multiselect selector.\n.octopus-multiselect-hover-tooltip {\n    z-index: 101;\n    background: white;\n    border: 1px solid var(--octopus-border-default);\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    padding: 0.5rem;\n    word-break: break-word;\n    pointer-events: none;\n}\n\n.octopus-multiselect-dropdown {\n    z-index: 100;\n    background: white;\n    border: 1px solid var(--octopus-border-default);\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    padding: 0.25rem 0;\n\n    > .octopus-form-item {\n        padding: 0.25rem 0.5rem;\n        border-bottom: 1px solid var(--octopus-secondary);\n    }\n}\n\n.octopus-multiselect-options {\n    max-height: 14rem;\n    overflow-y: auto;\n\n    .octopus-form-item {\n        padding: 0.25rem 0.5rem;\n    }\n}\n\nhr {\n    border-top: 1px solid var(--octopus-secondary);\n    border-bottom: none;\n    margin: 0;\n}\n</style>\n"],"mappings":"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"}

package/dist/OctopusMultiselect-tXNIWVpp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OctopusMultiselect-tXNIWVpp.mjs","names":[],"sources":["../src/components/composable/form/useOctopusDropdown.ts","../src/components/form/OctopusMultiselect.vue","../src/components/form/OctopusMultiselect.vue"],"sourcesContent":["import { computed, getCurrentInstance, nextTick, ref } from 'vue';\nimport { type MaybeElementRef, onClickOutside } from '@vueuse/core';\nimport { useI18n } from 'vue-i18n';\n\nexport interface OctopusDropdownProps<T> {\n    options: T[];\n    optionLabel?: keyof T & string;\n    optionKey?: keyof T;\n    isDisabled?: boolean;\n    placeholder?: string;\n}\n\nexport function useOctopusDropdown<T>(\n    props: OctopusDropdownProps<T>,\n    emitSearch: (query: string) => void,\n    idPrefix: string = 'octopus-dropdown',\n    // Extra elements to exclude from the click-outside check.\n    // Needed when the dropdown is teleported outside containerRef (e.g. to body):\n    // without this, clicking inside the teleported dropdown triggers closeDropdown\n    // because it is no longer a DOM descendant of containerRef.\n    ignore?: MaybeElementRef[]\n) {\n    const { t } = useI18n();\n    const instance = getCurrentInstance();\n\n    const searchQuery = ref('');\n    const isOpen = ref(false);\n    const isHovered = ref(false);\n    const containerRef = ref<HTMLElement | null>(null);\n    const inputRef = ref<HTMLInputElement | null>(null);\n    // Where the dropdown/options list (teleported out of normal flow) should land. Defaults\n    // to the app root, but when this component is used inside a ClassicPopover, teleporting\n    // there instead keeps the dropdown a real DOM descendant of it — otherwise both end up as\n    // siblings under the same teleport target, and ClassicPopover's outside-click/blur checks\n    // (which rely on DOM containment) see clicks inside the dropdown as \"outside\" and close it.\n    const teleportTarget = ref<string | HTMLElement>('.octopus-app');\n\n    const computedId = computed(() => `${idPrefix}-${instance?.uid}`);\n\n    // vnode.props contains the raw parent-provided props before defineEmits strips them\n    // from attrs, so onSearch is present whenever the parent writes @search=\"...\".\n    const hasSearchListener = computed(() => !!instance?.vnode.props?.onSearch);\n\n    const displayedOptions = computed((): T[] => {\n        if (hasSearchListener.value) {\n            return props.options;\n        }\n        const query = searchQuery.value.toLowerCase();\n        if (!query) {\n            return props.options;\n        }\n        return props.options.filter((option) =>\n            getLabel(option).toLowerCase().includes(query)\n        );\n    });\n\n    const inputPlaceholder = computed(() => props.placeholder ?? t('Search'));\n\n    function getLabel(option: T): string {\n        if (props.optionLabel) {\n            return option[props.optionLabel] as string;\n        }\n        return option as unknown as string;\n    }\n\n    function openDropdown(): void {\n        if (props.isDisabled) {\n            return;\n        }\n        teleportTarget.value = containerRef.value?.closest<HTMLElement>('.octopus-popover') ?? '.octopus-app';\n        isOpen.value = true;\n        nextTick(() => {\n            inputRef.value?.focus();\n        });\n    }\n\n    function closeDropdown(): void {\n        isOpen.value = false;\n        searchQuery.value = '';\n    }\n\n    function toggleDropdown(): void {\n        if (isOpen.value) {\n            closeDropdown();\n        } else {\n            openDropdown();\n        }\n    }\n\n    function handleInput(): void {\n        if (hasSearchListener.value) {\n            emitSearch(searchQuery.value);\n        }\n    }\n\n    onClickOutside(containerRef, closeDropdown, ignore?.length ? { ignore } : undefined);\n\n    return {\n        searchQuery,\n        isOpen,\n        isHovered,\n        containerRef,\n        inputRef,\n        teleportTarget,\n        computedId,\n        hasSearchListener,\n        displayedOptions,\n        inputPlaceholder,\n        getLabel,\n        openDropdown,\n        closeDropdown,\n        toggleDropdown,\n        handleInput,\n    };\n}\n","<template>\n    <div\n        ref=\"containerRef\"\n        class=\"octopus-multiselect\"\n        :class=\"{ 'form-margin': label }\"\n    >\n        <label\n            v-if=\"label\"\n            :for=\"computedId\"\n            class=\"form-label\"\n        >\n            {{ label }}\n        </label>\n\n        <div\n            class=\"octopus-multiselect-field\"\n            :class=\"{ disabled, open: isOpen, noBorder }\"\n            @click=\"openDropdown\"\n            @mouseenter=\"onFieldMouseEnter\"\n            @mouseleave=\"isHovered = false\"\n        >\n            <div\n                v-show=\"hasSelected && !isOpen\"\n                ref=\"selectionRef\"\n                class=\"octopus-multiselect-selection\"\n            >\n                <span class=\"octopus-multiselect-selection-text\">{{ selectionLabels }}</span>\n                <span\n                    v-if=\"overflowCount > 0\"\n                    class=\"octopus-multiselect-selection-count\"\n                >(+{{ overflowCount }})</span>\n            </div>\n            <input\n                v-show=\"!hasSelected || isOpen\"\n                :id=\"computedId\"\n                ref=\"inputRef\"\n                v-model=\"searchQuery\"\n                type=\"text\"\n                class=\"octopus-multiselect-input\"\n                :placeholder=\"inputPlaceholder\"\n                :disabled=\"disabled\"\n                @focus=\"openDropdown\"\n                @input=\"handleInput\"\n                @keydown.enter=\"handleCustomValueEnter\"\n            >\n            <button\n                class=\"btn-transparent octopus-multiselect-chevron\"\n                :disabled=\"disabled\"\n                @click.stop=\"toggleDropdown\"\n            >\n                <ChevronDownIcon />\n            </button>\n        </div>\n\n        <Teleport :to=\"teleportTarget\">\n            <div\n                v-if=\"expandOnHover && isHovered && !isOpen && overflowCount > 0\"\n                class=\"octopus-multiselect-hover-tooltip\"\n                :style=\"dropdownStyle\"\n            >\n                {{ allLabelsText }}\n            </div>\n\n            <div\n                v-if=\"isOpen\"\n                ref=\"dropdownRef\"\n                class=\"octopus-multiselect-dropdown\"\n                :style=\"dropdownStyle\"\n            >\n                <ClassicCheckbox\n                    :text-init=\"allSelected\"\n                    :label=\"selectAllText ?? t('All')\"\n                    :is-disabled=\"disabled\"\n                    @update:text-init=\"toggleAll\"\n                />\n\n                <div class=\"octopus-multiselect-options\">\n                    <ClassicCheckbox\n                        v-for=\"(option, index) in visibleOptions\"\n                        :key=\"index\"\n                        :text-init=\"isSelected(option)\"\n                        :label=\"getLabel(option)\"\n                        :is-disabled=\"disabled\"\n                        @update:text-init=\"toggleOption(option)\"\n                    />\n                    <template v-if=\"allowCustomValue && searchQuery.trim()\">\n                        <hr v-if=\"visibleOptions.length > 0\">\n                        <span class=\"text-indic px-2\">\n                            {{ t('Press Enter to add this value') }}\n                        </span>\n                    </template>\n                    <span v-else-if=\"visibleOptions.length === 0\" class=\"text-indic px-2\">\n                        {{ t('No elements found. Consider changing the search query.') }}\n                    </span>\n                </div>\n            </div>\n        </Teleport>\n    </div>\n</template>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { type CSSProperties, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';\nimport ClassicCheckbox from './ClassicCheckbox.vue';\nimport { useOctopusDropdown } from '../composable/form/useOctopusDropdown';\n\nconst props = defineProps<{\n    /** Optional label displayed above the field. */\n    label?: string;\n    /** Currently selected items. Bind with `v-model:selected`. */\n    selected?: T[];\n    /** Full list of options to display or filter. */\n    options: T[];\n    /** Key of each option object to use as the ID */\n    optionKey?: keyof T;\n    /** Key of each option object to use as the display label. Omit when `options` is a\n     *  plain `string[]` — each string is used as its own label. Note: omitting this for\n     *  an object array is a runtime mistake (not caught at compile time) and will render\n     *  \"[object Object]\". */\n    optionLabel?: keyof T & string;\n    /** When true, pressing Enter in the search input adds the typed text as a new\n     *  selected value, even if it doesn't match any option. Intended for use when\n     *  options are plain strings (`optionLabel` omitted) — casting arbitrary typed\n     *  text into an object-shaped T would not produce a valid option. */\n    allowCustomValue?: boolean;\n    /** Disables the field and all checkboxes when true. */\n    disabled?: boolean;\n    /** Placeholder shown in the input when no items are selected. Defaults to the translated \"Search\" string. */\n    placeholder?: string;\n    /** Label for the \"select all\" checkbox. Defaults to the translated \"All\" string. */\n    selectAllText?: string;\n    /** Disable the border around the input */\n    noBorder?: boolean;\n    /** When true, hovering the closed field with overflow shows a tooltip listing all selected items. */\n    expandOnHover?: boolean;\n    /** When true, options selected at the moment the dropdown opens are moved to the\n     *  top of the list. This is a snapshot taken at open time — it does not live-reorder\n     *  while the dropdown stays open, only on the next closed→open transition. */\n    pullSelectedToTop?: boolean;\n}>();\n\nconst emit = defineEmits<{\n    /** Emitted when the selection changes. */\n    (e: 'update:selected', value: T[]): void;\n    /** Emitted on every input change. When listened to, the parent is responsible for\n     *  updating `options`; otherwise the component filters `options` client-side. */\n    (e: 'search', query: string): void;\n}>();\n\nconst { t } = useI18n();\n\n// Ref on the teleported dropdown div — passed as ignored element to useOctopusDropdown\n// so clicks inside the dropdown don't trigger the click-outside handler.\nconst dropdownRef = ref<HTMLElement | null>(null);\n\nconst {\n    searchQuery,\n    isOpen,\n    isHovered,\n    containerRef,\n    inputRef,\n    teleportTarget,\n    computedId,\n    displayedOptions,\n    inputPlaceholder,\n    getLabel,\n    openDropdown,\n    toggleDropdown,\n    handleInput,\n} = useOctopusDropdown(props, (query) => emit('search', query), 'multiselect', [dropdownRef]);\n\nconst selectionRef = ref<HTMLElement | null>(null);\n\n// Position of the teleported dropdown (position: fixed, anchored below the trigger field)\nconst dropdownStyle = ref<CSSProperties>({});\n\n// Also used to position the hover tooltip: both are teleported and anchored the same way\n// (fixed, directly below the field, same width), and are never shown at the same time.\nfunction updateDropdownPosition(): void {\n    if (!containerRef.value) { return; }\n    const rect = containerRef.value.getBoundingClientRect();\n    dropdownStyle.value = {\n        position: 'fixed',\n        top: `${rect.bottom + 2}px`,\n        left: `${rect.left}px`,\n        width: `${rect.width}px`,\n    };\n}\n\nfunction onFieldMouseEnter(): void {\n    isHovered.value = true;\n    if (props.expandOnHover) {\n        nextTick(updateDropdownPosition);\n    }\n}\n\nconst visibleCount = ref(2);\n\n// Selection snapshot captured the instant the dropdown opens, used only to freeze the\n// sort order when pullSelectedToTop is set — does not react to later `selected` changes\n// while the dropdown stays open.\nconst pinnedSnapshot = ref<T[]>([]);\n\n// Selected values not present in `options` — only populated when allowCustomValue is set,\n// so a custom value typed via handleCustomValueEnter still shows (checked) in the dropdown.\nconst customSelectedOptions = computed<T[]>(() => {\n    if (!props.allowCustomValue) { return []; }\n    return (props.selected ?? []).filter((item) => !isInOptions(item));\n});\n\nconst visibleOptions = computed<T[]>(() => {\n    const query = searchQuery.value.toLowerCase();\n    const filteredCustom = query\n        ? customSelectedOptions.value.filter((option) => getLabel(option).toLowerCase().includes(query))\n        : customSelectedOptions.value;\n    const combined = [...displayedOptions.value, ...filteredCustom];\n    if (!props.pullSelectedToTop) {\n        return combined;\n    }\n    return [...combined.filter(isPinned), ...combined.filter((option) => !isPinned(option))];\n});\n\nconst allSelected = computed(() => {\n    if (visibleOptions.value.length === 0) {\n        return false;\n    }\n    return visibleOptions.value.every((option) => isSelected(option));\n});\n\nconst hasSelected = computed(() => (props.selected?.length ?? 0) > 0);\n\nconst selectionLabels = computed(() =>\n    (props.selected ?? []).slice(0, visibleCount.value).map(getLabel).join(', ')\n);\n\nconst overflowCount = computed(() =>\n    Math.max(0, (props.selected?.length ?? 0) - visibleCount.value)\n);\n\nconst allLabelsText = computed(() =>\n    (props.selected ?? []).map(getLabel).join(', ')\n);\n\nfunction isSelected(option: T): boolean {\n    if (props.optionKey) {\n        return props.selected?.find(s => s[props.optionKey] === option[props.optionKey]) !== undefined;\n    } else {\n        return props.selected?.includes(option) ?? false;\n    }\n}\n\nfunction isInOptions(option: T): boolean {\n    if (props.optionKey) {\n        return props.options.some((opt) => opt[props.optionKey] === option[props.optionKey]);\n    } else {\n        return props.options.includes(option);\n    }\n}\n\nfunction isPinned(option: T): boolean {\n    if (props.optionKey) {\n        return pinnedSnapshot.value.some((s) => s[props.optionKey] === option[props.optionKey]);\n    } else {\n        return pinnedSnapshot.value.includes(option);\n    }\n}\n\nfunction toggleOption(option: T): void {\n    const current = props.selected ?? [];\n    if (isSelected(option)) {\n        const key = props.optionKey;\n        emit('update:selected', key\n            ? current.filter((item) => item[key] !== option[key])\n            : current.filter((item) => item !== option)\n        );\n    } else {\n        emit('update:selected', [...current, option]);\n    }\n}\n\nfunction handleCustomValueEnter(): void {\n    if (!props.allowCustomValue) { return; }\n    const value = searchQuery.value.trim();\n    if (!value) { return; }\n    const customOption = value as unknown as T;\n    if (!isSelected(customOption)) {\n        emit('update:selected', [...(props.selected ?? []), customOption]);\n    }\n    searchQuery.value = '';\n}\n\nfunction toggleAll(val: boolean): void {\n    const current = props.selected ?? [];\n    if (val) {\n        const toAdd = visibleOptions.value.filter((option: T) => !isSelected(option));\n        emit('update:selected', [...current, ...toAdd]);\n    } else {\n        const key = props.optionKey;\n        emit('update:selected', current.filter((item: T) => key\n            ? !visibleOptions.value.some((opt) => opt[key] === item[key])\n            : !visibleOptions.value.includes(item)\n        ));\n    }\n}\n\nfunction updateVisibleCount(): void {\n    const container = selectionRef.value;\n    const selected = props.selected ?? [];\n    if (!container || selected.length < 2) {\n        visibleCount.value = selected.length;\n        return;\n    }\n\n    const availableWidth = container.offsetWidth;\n    if (availableWidth === 0) {\n        return;\n    }\n\n    const labels = selected.map(getLabel);\n    const measurer = document.createElement('span');\n    measurer.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;pointer-events:none;';\n    container.appendChild(measurer);\n\n    measurer.textContent = labels.join(', ');\n    if (measurer.offsetWidth <= availableWidth) {\n        visibleCount.value = labels.length;\n        container.removeChild(measurer);\n        return;\n    }\n\n    measurer.textContent = `(+${labels.length})`;\n    const badgeWidth = measurer.offsetWidth + 4;\n    const textAvailable = availableWidth - badgeWidth;\n\n    let count = 0;\n    for (let i = 0; i < labels.length; i++) {\n        measurer.textContent = labels.slice(0, i + 1).join(', ');\n        if (measurer.offsetWidth > textAvailable) {\n            break;\n        }\n        count = i + 1;\n    }\n\n    container.removeChild(measurer);\n    visibleCount.value = Math.max(1, count);\n}\n\nlet resizeObserver: ResizeObserver | null = null;\n\nonMounted(() => {\n    if (selectionRef.value) {\n        resizeObserver = new ResizeObserver(updateVisibleCount);\n        resizeObserver.observe(selectionRef.value);\n    }\n    updateVisibleCount();\n    // Keep the teleported dropdown aligned when the page scrolls or the viewport resizes\n    window.addEventListener('scroll', updateDropdownPosition, true);\n    window.addEventListener('resize', updateDropdownPosition);\n});\n\nonUnmounted(() => {\n    resizeObserver?.disconnect();\n    window.removeEventListener('scroll', updateDropdownPosition, true);\n    window.removeEventListener('resize', updateDropdownPosition);\n});\n\nwatch(() => props.selected, updateVisibleCount);\n\nwatch(isOpen, (val) => {\n    if (val) {\n        pinnedSnapshot.value = [...(props.selected ?? [])];\n        nextTick(updateDropdownPosition);\n    } else {\n        nextTick(updateVisibleCount);\n    }\n});\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-multiselect {\n    position: relative;\n\n    .octopus-multiselect-field {\n        display: flex;\n        align-items: center;\n        border: 1px solid var(--octopus-border-default);\n        border-radius: var(--octopus-border-radius);\n        background: white;\n        cursor: pointer;\n\n        &.open {\n            border-color: var(--octopus-primary);\n        }\n\n        &.disabled {\n            background: var(--octopus-secondary-lighter);\n            cursor: default;\n        }\n\n        &.noBorder {\n            border: none;\n        }\n    }\n\n    .octopus-multiselect-selection {\n        display: flex;\n        align-items: center;\n        flex: 1;\n        min-width: 0;\n        padding: 0.4rem 0.5rem;\n        height: 2rem;\n        gap: 0.25rem;\n    }\n\n    .octopus-multiselect-selection-text {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .octopus-multiselect-selection-count {\n        flex-shrink: 0;\n        white-space: nowrap;\n        color: var(--octopus-primary);\n    }\n\n    .octopus-multiselect-input {\n        flex: 1;\n        border: none;\n        background: transparent;\n        padding: 0.4rem 0.5rem;\n        padding-right: 0;\n        height: 2rem;\n        outline: none;\n        cursor: inherit;\n        min-width: 0;\n    }\n\n    .octopus-multiselect-chevron {\n        padding: 0.25rem 0.5rem;\n        display: flex;\n        align-items: center;\n    }\n\n}\n\n// Dropdown/tooltip are teleported to body — scoped rules must be top-level so that\n// [data-v-xxxx] is matched directly on the element rather than via a descendant-of-.octopus-multiselect selector.\n.octopus-multiselect-hover-tooltip {\n    z-index: 101;\n    background: white;\n    border: 1px solid var(--octopus-border-default);\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    padding: 0.5rem;\n    word-break: break-word;\n    pointer-events: none;\n}\n\n.octopus-multiselect-dropdown {\n    z-index: 100;\n    background: white;\n    border: 1px solid var(--octopus-border-default);\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    padding: 0.25rem 0;\n\n    > .octopus-form-item {\n        padding: 0.25rem 0.5rem;\n        border-bottom: 1px solid var(--octopus-secondary);\n    }\n}\n\n.octopus-multiselect-options {\n    max-height: 14rem;\n    overflow-y: auto;\n\n    .octopus-form-item {\n        padding: 0.25rem 0.5rem;\n    }\n}\n\nhr {\n    border-top: 1px solid var(--octopus-secondary);\n    border-bottom: none;\n    margin: 0;\n}\n</style>\n","<template>\n    <div\n        ref=\"containerRef\"\n        class=\"octopus-multiselect\"\n        :class=\"{ 'form-margin': label }\"\n    >\n        <label\n            v-if=\"label\"\n            :for=\"computedId\"\n            class=\"form-label\"\n        >\n            {{ label }}\n        </label>\n\n        <div\n            class=\"octopus-multiselect-field\"\n            :class=\"{ disabled, open: isOpen, noBorder }\"\n            @click=\"openDropdown\"\n            @mouseenter=\"onFieldMouseEnter\"\n            @mouseleave=\"isHovered = false\"\n        >\n            <div\n                v-show=\"hasSelected && !isOpen\"\n                ref=\"selectionRef\"\n                class=\"octopus-multiselect-selection\"\n            >\n                <span class=\"octopus-multiselect-selection-text\">{{ selectionLabels }}</span>\n                <span\n                    v-if=\"overflowCount > 0\"\n                    class=\"octopus-multiselect-selection-count\"\n                >(+{{ overflowCount }})</span>\n            </div>\n            <input\n                v-show=\"!hasSelected || isOpen\"\n                :id=\"computedId\"\n                ref=\"inputRef\"\n                v-model=\"searchQuery\"\n                type=\"text\"\n                class=\"octopus-multiselect-input\"\n                :placeholder=\"inputPlaceholder\"\n                :disabled=\"disabled\"\n                @focus=\"openDropdown\"\n                @input=\"handleInput\"\n                @keydown.enter=\"handleCustomValueEnter\"\n            >\n            <button\n                class=\"btn-transparent octopus-multiselect-chevron\"\n                :disabled=\"disabled\"\n                @click.stop=\"toggleDropdown\"\n            >\n                <ChevronDownIcon />\n            </button>\n        </div>\n\n        <Teleport :to=\"teleportTarget\">\n            <div\n                v-if=\"expandOnHover && isHovered && !isOpen && overflowCount > 0\"\n                class=\"octopus-multiselect-hover-tooltip\"\n                :style=\"dropdownStyle\"\n            >\n                {{ allLabelsText }}\n            </div>\n\n            <div\n                v-if=\"isOpen\"\n                ref=\"dropdownRef\"\n                class=\"octopus-multiselect-dropdown\"\n                :style=\"dropdownStyle\"\n            >\n                <ClassicCheckbox\n                    :text-init=\"allSelected\"\n                    :label=\"selectAllText ?? t('All')\"\n                    :is-disabled=\"disabled\"\n                    @update:text-init=\"toggleAll\"\n                />\n\n                <div class=\"octopus-multiselect-options\">\n                    <ClassicCheckbox\n                        v-for=\"(option, index) in visibleOptions\"\n                        :key=\"index\"\n                        :text-init=\"isSelected(option)\"\n                        :label=\"getLabel(option)\"\n                        :is-disabled=\"disabled\"\n                        @update:text-init=\"toggleOption(option)\"\n                    />\n                    <template v-if=\"allowCustomValue && searchQuery.trim()\">\n                        <hr v-if=\"visibleOptions.length > 0\">\n                        <span class=\"text-indic px-2\">\n                            {{ t('Press Enter to add this value') }}\n                        </span>\n                    </template>\n                    <span v-else-if=\"visibleOptions.length === 0\" class=\"text-indic px-2\">\n                        {{ t('No elements found. Consider changing the search query.') }}\n                    </span>\n                </div>\n            </div>\n        </Teleport>\n    </div>\n</template>\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { type CSSProperties, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';\nimport ClassicCheckbox from './ClassicCheckbox.vue';\nimport { useOctopusDropdown } from '../composable/form/useOctopusDropdown';\n\nconst props = defineProps<{\n    /** Optional label displayed above the field. */\n    label?: string;\n    /** Currently selected items. Bind with `v-model:selected`. */\n    selected?: T[];\n    /** Full list of options to display or filter. */\n    options: T[];\n    /** Key of each option object to use as the ID */\n    optionKey?: keyof T;\n    /** Key of each option object to use as the display label. Omit when `options` is a\n     *  plain `string[]` — each string is used as its own label. Note: omitting this for\n     *  an object array is a runtime mistake (not caught at compile time) and will render\n     *  \"[object Object]\". */\n    optionLabel?: keyof T & string;\n    /** When true, pressing Enter in the search input adds the typed text as a new\n     *  selected value, even if it doesn't match any option. Intended for use when\n     *  options are plain strings (`optionLabel` omitted) — casting arbitrary typed\n     *  text into an object-shaped T would not produce a valid option. */\n    allowCustomValue?: boolean;\n    /** Disables the field and all checkboxes when true. */\n    disabled?: boolean;\n    /** Placeholder shown in the input when no items are selected. Defaults to the translated \"Search\" string. */\n    placeholder?: string;\n    /** Label for the \"select all\" checkbox. Defaults to the translated \"All\" string. */\n    selectAllText?: string;\n    /** Disable the border around the input */\n    noBorder?: boolean;\n    /** When true, hovering the closed field with overflow shows a tooltip listing all selected items. */\n    expandOnHover?: boolean;\n    /** When true, options selected at the moment the dropdown opens are moved to the\n     *  top of the list. This is a snapshot taken at open time — it does not live-reorder\n     *  while the dropdown stays open, only on the next closed→open transition. */\n    pullSelectedToTop?: boolean;\n}>();\n\nconst emit = defineEmits<{\n    /** Emitted when the selection changes. */\n    (e: 'update:selected', value: T[]): void;\n    /** Emitted on every input change. When listened to, the parent is responsible for\n     *  updating `options`; otherwise the component filters `options` client-side. */\n    (e: 'search', query: string): void;\n}>();\n\nconst { t } = useI18n();\n\n// Ref on the teleported dropdown div — passed as ignored element to useOctopusDropdown\n// so clicks inside the dropdown don't trigger the click-outside handler.\nconst dropdownRef = ref<HTMLElement | null>(null);\n\nconst {\n    searchQuery,\n    isOpen,\n    isHovered,\n    containerRef,\n    inputRef,\n    teleportTarget,\n    computedId,\n    displayedOptions,\n    inputPlaceholder,\n    getLabel,\n    openDropdown,\n    toggleDropdown,\n    handleInput,\n} = useOctopusDropdown(props, (query) => emit('search', query), 'multiselect', [dropdownRef]);\n\nconst selectionRef = ref<HTMLElement | null>(null);\n\n// Position of the teleported dropdown (position: fixed, anchored below the trigger field)\nconst dropdownStyle = ref<CSSProperties>({});\n\n// Also used to position the hover tooltip: both are teleported and anchored the same way\n// (fixed, directly below the field, same width), and are never shown at the same time.\nfunction updateDropdownPosition(): void {\n    if (!containerRef.value) { return; }\n    const rect = containerRef.value.getBoundingClientRect();\n    dropdownStyle.value = {\n        position: 'fixed',\n        top: `${rect.bottom + 2}px`,\n        left: `${rect.left}px`,\n        width: `${rect.width}px`,\n    };\n}\n\nfunction onFieldMouseEnter(): void {\n    isHovered.value = true;\n    if (props.expandOnHover) {\n        nextTick(updateDropdownPosition);\n    }\n}\n\nconst visibleCount = ref(2);\n\n// Selection snapshot captured the instant the dropdown opens, used only to freeze the\n// sort order when pullSelectedToTop is set — does not react to later `selected` changes\n// while the dropdown stays open.\nconst pinnedSnapshot = ref<T[]>([]);\n\n// Selected values not present in `options` — only populated when allowCustomValue is set,\n// so a custom value typed via handleCustomValueEnter still shows (checked) in the dropdown.\nconst customSelectedOptions = computed<T[]>(() => {\n    if (!props.allowCustomValue) { return []; }\n    return (props.selected ?? []).filter((item) => !isInOptions(item));\n});\n\nconst visibleOptions = computed<T[]>(() => {\n    const query = searchQuery.value.toLowerCase();\n    const filteredCustom = query\n        ? customSelectedOptions.value.filter((option) => getLabel(option).toLowerCase().includes(query))\n        : customSelectedOptions.value;\n    const combined = [...displayedOptions.value, ...filteredCustom];\n    if (!props.pullSelectedToTop) {\n        return combined;\n    }\n    return [...combined.filter(isPinned), ...combined.filter((option) => !isPinned(option))];\n});\n\nconst allSelected = computed(() => {\n    if (visibleOptions.value.length === 0) {\n        return false;\n    }\n    return visibleOptions.value.every((option) => isSelected(option));\n});\n\nconst hasSelected = computed(() => (props.selected?.length ?? 0) > 0);\n\nconst selectionLabels = computed(() =>\n    (props.selected ?? []).slice(0, visibleCount.value).map(getLabel).join(', ')\n);\n\nconst overflowCount = computed(() =>\n    Math.max(0, (props.selected?.length ?? 0) - visibleCount.value)\n);\n\nconst allLabelsText = computed(() =>\n    (props.selected ?? []).map(getLabel).join(', ')\n);\n\nfunction isSelected(option: T): boolean {\n    if (props.optionKey) {\n        return props.selected?.find(s => s[props.optionKey] === option[props.optionKey]) !== undefined;\n    } else {\n        return props.selected?.includes(option) ?? false;\n    }\n}\n\nfunction isInOptions(option: T): boolean {\n    if (props.optionKey) {\n        return props.options.some((opt) => opt[props.optionKey] === option[props.optionKey]);\n    } else {\n        return props.options.includes(option);\n    }\n}\n\nfunction isPinned(option: T): boolean {\n    if (props.optionKey) {\n        return pinnedSnapshot.value.some((s) => s[props.optionKey] === option[props.optionKey]);\n    } else {\n        return pinnedSnapshot.value.includes(option);\n    }\n}\n\nfunction toggleOption(option: T): void {\n    const current = props.selected ?? [];\n    if (isSelected(option)) {\n        const key = props.optionKey;\n        emit('update:selected', key\n            ? current.filter((item) => item[key] !== option[key])\n            : current.filter((item) => item !== option)\n        );\n    } else {\n        emit('update:selected', [...current, option]);\n    }\n}\n\nfunction handleCustomValueEnter(): void {\n    if (!props.allowCustomValue) { return; }\n    const value = searchQuery.value.trim();\n    if (!value) { return; }\n    const customOption = value as unknown as T;\n    if (!isSelected(customOption)) {\n        emit('update:selected', [...(props.selected ?? []), customOption]);\n    }\n    searchQuery.value = '';\n}\n\nfunction toggleAll(val: boolean): void {\n    const current = props.selected ?? [];\n    if (val) {\n        const toAdd = visibleOptions.value.filter((option: T) => !isSelected(option));\n        emit('update:selected', [...current, ...toAdd]);\n    } else {\n        const key = props.optionKey;\n        emit('update:selected', current.filter((item: T) => key\n            ? !visibleOptions.value.some((opt) => opt[key] === item[key])\n            : !visibleOptions.value.includes(item)\n        ));\n    }\n}\n\nfunction updateVisibleCount(): void {\n    const container = selectionRef.value;\n    const selected = props.selected ?? [];\n    if (!container || selected.length < 2) {\n        visibleCount.value = selected.length;\n        return;\n    }\n\n    const availableWidth = container.offsetWidth;\n    if (availableWidth === 0) {\n        return;\n    }\n\n    const labels = selected.map(getLabel);\n    const measurer = document.createElement('span');\n    measurer.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;pointer-events:none;';\n    container.appendChild(measurer);\n\n    measurer.textContent = labels.join(', ');\n    if (measurer.offsetWidth <= availableWidth) {\n        visibleCount.value = labels.length;\n        container.removeChild(measurer);\n        return;\n    }\n\n    measurer.textContent = `(+${labels.length})`;\n    const badgeWidth = measurer.offsetWidth + 4;\n    const textAvailable = availableWidth - badgeWidth;\n\n    let count = 0;\n    for (let i = 0; i < labels.length; i++) {\n        measurer.textContent = labels.slice(0, i + 1).join(', ');\n        if (measurer.offsetWidth > textAvailable) {\n            break;\n        }\n        count = i + 1;\n    }\n\n    container.removeChild(measurer);\n    visibleCount.value = Math.max(1, count);\n}\n\nlet resizeObserver: ResizeObserver | null = null;\n\nonMounted(() => {\n    if (selectionRef.value) {\n        resizeObserver = new ResizeObserver(updateVisibleCount);\n        resizeObserver.observe(selectionRef.value);\n    }\n    updateVisibleCount();\n    // Keep the teleported dropdown aligned when the page scrolls or the viewport resizes\n    window.addEventListener('scroll', updateDropdownPosition, true);\n    window.addEventListener('resize', updateDropdownPosition);\n});\n\nonUnmounted(() => {\n    resizeObserver?.disconnect();\n    window.removeEventListener('scroll', updateDropdownPosition, true);\n    window.removeEventListener('resize', updateDropdownPosition);\n});\n\nwatch(() => props.selected, updateVisibleCount);\n\nwatch(isOpen, (val) => {\n    if (val) {\n        pinnedSnapshot.value = [...(props.selected ?? [])];\n        nextTick(updateDropdownPosition);\n    } else {\n        nextTick(updateVisibleCount);\n    }\n});\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-multiselect {\n    position: relative;\n\n    .octopus-multiselect-field {\n        display: flex;\n        align-items: center;\n        border: 1px solid var(--octopus-border-default);\n        border-radius: var(--octopus-border-radius);\n        background: white;\n        cursor: pointer;\n\n        &.open {\n            border-color: var(--octopus-primary);\n        }\n\n        &.disabled {\n            background: var(--octopus-secondary-lighter);\n            cursor: default;\n        }\n\n        &.noBorder {\n            border: none;\n        }\n    }\n\n    .octopus-multiselect-selection {\n        display: flex;\n        align-items: center;\n        flex: 1;\n        min-width: 0;\n        padding: 0.4rem 0.5rem;\n        height: 2rem;\n        gap: 0.25rem;\n    }\n\n    .octopus-multiselect-selection-text {\n        flex: 1;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .octopus-multiselect-selection-count {\n        flex-shrink: 0;\n        white-space: nowrap;\n        color: var(--octopus-primary);\n    }\n\n    .octopus-multiselect-input {\n        flex: 1;\n        border: none;\n        background: transparent;\n        padding: 0.4rem 0.5rem;\n        padding-right: 0;\n        height: 2rem;\n        outline: none;\n        cursor: inherit;\n        min-width: 0;\n    }\n\n    .octopus-multiselect-chevron {\n        padding: 0.25rem 0.5rem;\n        display: flex;\n        align-items: center;\n    }\n\n}\n\n// Dropdown/tooltip are teleported to body — scoped rules must be top-level so that\n// [data-v-xxxx] is matched directly on the element rather than via a descendant-of-.octopus-multiselect selector.\n.octopus-multiselect-hover-tooltip {\n    z-index: 101;\n    background: white;\n    border: 1px solid var(--octopus-border-default);\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    padding: 0.5rem;\n    word-break: break-word;\n    pointer-events: none;\n}\n\n.octopus-multiselect-dropdown {\n    z-index: 100;\n    background: white;\n    border: 1px solid var(--octopus-border-default);\n    border-radius: var(--octopus-border-radius);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    padding: 0.25rem 0;\n\n    > .octopus-form-item {\n        padding: 0.25rem 0.5rem;\n        border-bottom: 1px solid var(--octopus-secondary);\n    }\n}\n\n.octopus-multiselect-options {\n    max-height: 14rem;\n    overflow-y: auto;\n\n    .octopus-form-item {\n        padding: 0.25rem 0.5rem;\n    }\n}\n\nhr {\n    border-top: 1px solid var(--octopus-secondary);\n    border-bottom: none;\n    margin: 0;\n}\n</style>\n"],"mappings":"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"}