@saooti/octopus-sdk 41.11.1 → 41.12.0-beta2

package/src/components/form/OctopusMultiselect.vue

@@ -16,8 +16,22 @@
             class="octopus-multiselect-field"
             :class="{ disabled: isDisabled, open: isOpen, noBorder }"
             @click="openDropdown"
+            @mouseenter="isHovered = true"
+            @mouseleave="isHovered = false"
         >
+            <div
+                v-show="hasSelected && !isOpen"
+                ref="selectionRef"
+                class="octopus-multiselect-selection"
+            >
+                <span class="octopus-multiselect-selection-text">{{ selectionLabels }}</span>
+                <span
+                    v-if="overflowCount > 0"
+                    class="octopus-multiselect-selection-count"
+                >(+{{ overflowCount }})</span>
+            </div>
             <input
+                v-show="!hasSelected || isOpen"
                 :id="computedId"
                 ref="inputRef"
                 v-model="searchQuery"
@@ -37,37 +51,51 @@
             </button>
         </div>
 
-        <div v-if="isOpen" class="octopus-multiselect-dropdown">
-            <ClassicCheckbox
-                :text-init="allSelected"
-                :label="selectAllText ?? t('All')"
-                :is-disabled="isDisabled"
-                @update:text-init="toggleAll"
-            />
+        <div
+            v-if="expandOnHover && isHovered && !isOpen && overflowCount > 0"
+            class="octopus-multiselect-hover-tooltip"
+        >
+            {{ allLabelsText }}
+        </div>
 
-            <div class="octopus-multiselect-options">
+        <Teleport to=".octopus-app">
+            <div
+                v-if="isOpen"
+                ref="dropdownRef"
+                class="octopus-multiselect-dropdown"
+                :style="dropdownStyle"
+            >
                 <ClassicCheckbox
-                    v-for="(option, index) in displayedOptions"
-                    :key="index"
-                    :text-init="isSelected(option)"
-                    :label="getLabel(option)"
+                    :text-init="allSelected"
+                    :label="selectAllText ?? t('All')"
                     :is-disabled="isDisabled"
-                    @update:text-init="toggleOption(option)"
+                    @update:text-init="toggleAll"
                 />
-                <span v-if="displayedOptions.length === 0" class="text-indic px-2">
-                    {{ t('No elements found. Consider changing the search query.') }}
-                </span>
+
+                <div class="octopus-multiselect-options">
+                    <ClassicCheckbox
+                        v-for="(option, index) in displayedOptions"
+                        :key="index"
+                        :text-init="isSelected(option)"
+                        :label="getLabel(option)"
+                        :is-disabled="isDisabled"
+                        @update:text-init="toggleOption(option)"
+                    />
+                    <span v-if="displayedOptions.length === 0" class="text-indic px-2">
+                        {{ t('No elements found. Consider changing the search query.') }}
+                    </span>
+                </div>
             </div>
-        </div>
+        </Teleport>
     </div>
 </template>
 
 <script setup lang="ts" generic="T">
-import { computed, getCurrentInstance, nextTick, ref, shallowRef, watch } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { type CSSProperties, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
 import ClassicCheckbox from './ClassicCheckbox.vue';
+import { useOctopusDropdown } from '../composable/form/useOctopusDropdown';
 
 const props = defineProps<{
     /** Optional label displayed above the field. */
@@ -76,6 +104,8 @@ const props = defineProps<{
     selected?: T[];
     /** Full list of options to display or filter. */
     options: T[];
+    /** Key of each option object to use as the ID */
+    optionKey?: keyof T;
     /** Key of each option object to use as the display label. */
     optionLabel: keyof T & string;
     /** Disables the field and all checkboxes when true. */
@@ -84,47 +114,57 @@ const props = defineProps<{
     placeholder?: string;
     /** Label for the "select all" checkbox. Defaults to the translated "All" string. */
     selectAllText?: string;
-    /** If provided, called on every input change; its return value replaces the displayed options. */
-    onSearch?: (query: string) => T[] | Promise<T[]>;
     /** Disable the border around the input */
     noBorder?: boolean;
+    /** When true, hovering the closed field with overflow shows a tooltip listing all selected items. */
+    expandOnHover?: boolean;
 }>();
 
 const emit = defineEmits<{
     /** Emitted when the selection changes. */
     (e: 'update:selected', value: T[]): void;
+    /** Emitted on every input change. When listened to, the parent is responsible for
+     *  updating `options`; otherwise the component filters `options` client-side. */
+    (e: 'search', query: string): void;
 }>();
 
 const { t } = useI18n();
 
-const searchQuery = ref('');
-const isOpen = ref(false);
-const internalOptions = shallowRef<T[]>([]);
-const containerRef = ref<HTMLElement | null>(null);
-const inputRef = ref<HTMLInputElement | null>(null);
-
-const computedId = computed(() => 'multiselect-' + getCurrentInstance()?.uid);
-
-watch(
-    () => props.options,
-    (val) => {
-        internalOptions.value = val;
-    },
-    { immediate: true }
-);
-
-const displayedOptions = computed((): Array<T> => {
-    if (props.onSearch) {
-        return internalOptions.value;
-    }
-    const query = searchQuery.value.toLowerCase();
-    if (!query) {
-        return props.options;
-    }
-    return props.options.filter((option) =>
-        getLabel(option).toLowerCase().includes(query)
-    );
-});
+// Ref on the teleported dropdown div — passed as ignored element to useOctopusDropdown
+// so clicks inside the dropdown don't trigger the click-outside handler.
+const dropdownRef = ref<HTMLElement | null>(null);
+
+const {
+    searchQuery,
+    isOpen,
+    isHovered,
+    containerRef,
+    inputRef,
+    computedId,
+    displayedOptions,
+    inputPlaceholder,
+    getLabel,
+    openDropdown,
+    toggleDropdown,
+    handleInput,
+} = useOctopusDropdown(props, (query) => emit('search', query), 'multiselect', [dropdownRef]);
+
+const selectionRef = ref<HTMLElement | null>(null);
+
+// Position of the teleported dropdown (position: fixed, anchored below the trigger field)
+const dropdownStyle = ref<CSSProperties>({});
+
+function updateDropdownPosition(): void {
+    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`,
+    };
+}
+const visibleCount = ref(2);
 
 const allSelected = computed(() => {
     if (displayedOptions.value.length === 0) {
@@ -133,30 +173,36 @@ const allSelected = computed(() => {
     return displayedOptions.value.every((option) => isSelected(option));
 });
 
-const inputPlaceholder = computed(() => {
-    const selected = props.selected ?? [];
-    if (selected.length === 0) {
-        return props.placeholder ?? t('Search');
-    }
-    const labels = selected.map(getLabel);
-    if (labels.length <= 2) {
-        return labels.join(', ');
-    }
-    return `${labels.slice(0, 2).join(', ')} (+${labels.length - 2})`;
-});
+const hasSelected = computed(() => (props.selected?.length ?? 0) > 0);
 
-function getLabel(option: T): string {
-    return option[props.optionLabel] as string;
-}
+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: T): boolean {
-    return props.selected?.includes(option) ?? false;
+    if (props.optionKey) {
+        return props.selected?.find(s => s[props.optionKey] === option[props.optionKey]) !== undefined;
+    } else {
+        return props.selected?.includes(option) ?? false;
+    }
 }
 
 function toggleOption(option: T): void {
     const current = props.selected ?? [];
     if (isSelected(option)) {
-        emit('update:selected', current.filter((item) => item !== 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]);
     }
@@ -168,45 +214,87 @@ function toggleAll(val: boolean): void {
         const toAdd = displayedOptions.value.filter((option: T) => !isSelected(option));
         emit('update:selected', [...current, ...toAdd]);
     } else {
-        emit('update:selected', current.filter((item: T) => !displayedOptions.value.includes(item)));
+        const key = props.optionKey;
+        emit('update:selected', current.filter((item: T) => key
+            ? !displayedOptions.value.some((opt) => opt[key] === item[key])
+            : !displayedOptions.value.includes(item)
+        ));
     }
 }
 
-function openDropdown(): void {
-    if (props.isDisabled) {
+function updateVisibleCount(): void {
+    const container = selectionRef.value;
+    const selected = props.selected ?? [];
+    if (!container || selected.length < 2) {
+        visibleCount.value = selected.length;
         return;
     }
-    isOpen.value = true;
-    nextTick(() => {
-        inputRef.value?.focus();
-    });
-}
-
-function closeDropdown(): void {
-    isOpen.value = false;
-    searchQuery.value = '';
-}
 
-function toggleDropdown(): void {
-    if (isOpen.value) {
-        closeDropdown();
-    } else {
-        openDropdown();
+    const availableWidth = container.offsetWidth;
+    if (availableWidth === 0) {
+        return;
     }
-}
 
-async function handleInput(): Promise<void> {
-    if (!props.onSearch) {
+    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;
     }
-    const result = await props.onSearch(searchQuery.value);
-    internalOptions.value = result;
+
+    measurer.textContent = `(+${labels.length})`;
+    const badgeWidth = measurer.offsetWidth + 4;
+    const textAvailable = availableWidth - badgeWidth;
+
+    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);
 }
 
-onClickOutside(containerRef, closeDropdown);
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+    if (selectionRef.value) {
+        resizeObserver = new ResizeObserver(updateVisibleCount);
+        resizeObserver.observe(selectionRef.value);
+    }
+    updateVisibleCount();
+    // Keep the teleported dropdown aligned when the page scrolls or the viewport resizes
+    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) {
+        nextTick(updateDropdownPosition);
+    } else {
+        nextTick(updateVisibleCount);
+    }
+});
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .octopus-multiselect {
     position: relative;
 
@@ -232,48 +320,87 @@ onClickOutside(containerRef, closeDropdown);
         }
     }
 
+    .octopus-multiselect-selection {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+        padding: 0.4rem 0.5rem;
+        height: 2rem;
+        gap: 0.25rem;
+    }
+
+    .octopus-multiselect-selection-text {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .octopus-multiselect-selection-count {
+        flex-shrink: 0;
+        white-space: nowrap;
+        color: var(--octopus-primary);
+    }
+
     .octopus-multiselect-input {
         flex: 1;
         border: none;
         background: transparent;
         padding: 0.4rem 0.5rem;
+        padding-right: 0;
         height: 2rem;
         outline: none;
         cursor: inherit;
         min-width: 0;
     }
 
-    .octopus-multiselect-chevron {
-        padding: 0.25rem 0.5rem;
-        display: flex;
-        align-items: center;
-    }
-
-    .octopus-multiselect-dropdown {
+    .octopus-multiselect-hover-tooltip {
         position: absolute;
         top: calc(100% + 2px);
         left: 0;
         right: 0;
-        z-index: 100;
+        z-index: 101;
         background: white;
         border: 1px solid var(--octopus-border-default);
         border-radius: var(--octopus-border-radius);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        padding: 0.25rem 0;
+        padding: 0.5rem;
+        word-break: break-word;
+        pointer-events: none;
+    }
 
-        > .octopus-form-item {
-            padding: 0.25rem 0.5rem;
-            border-bottom: 1px solid var(--octopus-secondary);
-        }
+    .octopus-multiselect-chevron {
+        padding: 0.25rem 0.5rem;
+        display: flex;
+        align-items: center;
     }
 
-    .octopus-multiselect-options {
-        max-height: 14rem;
-        overflow-y: auto;
+}
 
-        .octopus-form-item {
-            padding: 0.25rem 0.5rem;
-        }
+// Dropdown is teleported to body — scoped rules must be top-level so that [data-v-xxxx]
+// is matched directly on the element rather than via a descendant-of-.octopus-multiselect selector.
+.octopus-multiselect-dropdown {
+    z-index: 100;
+    background: white;
+    border: 1px solid var(--octopus-border-default);
+    border-radius: var(--octopus-border-radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 0.25rem 0;
+
+    > .octopus-form-item {
+        padding: 0.25rem 0.5rem;
+        border-bottom: 1px solid var(--octopus-secondary);
+    }
+}
+
+.octopus-multiselect-options {
+    max-height: 14rem;
+    overflow-y: auto;
+
+    .octopus-form-item {
+        padding: 0.25rem 0.5rem;
     }
 }
 </style>