@saooti/octopus-sdk 41.11.1 → 41.12.0-beta

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,6 +51,13 @@
             </button>
         </div>
 
+        <div
+            v-if="expandOnHover && isHovered && !isOpen && overflowCount > 0"
+            class="octopus-multiselect-hover-tooltip"
+        >
+            {{ allLabelsText }}
+        </div>
+
         <div v-if="isOpen" class="octopus-multiselect-dropdown">
             <ClassicCheckbox
                 :text-init="allSelected"
@@ -63,11 +84,11 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { computed, getCurrentInstance, nextTick, ref, shallowRef, watch } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { 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 +97,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 +107,39 @@ 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)
-    );
-});
+const {
+    searchQuery,
+    isOpen,
+    isHovered,
+    containerRef,
+    inputRef,
+    computedId,
+    displayedOptions,
+    inputPlaceholder,
+    getLabel,
+    openDropdown,
+    toggleDropdown,
+    handleInput,
+} = useOctopusDropdown(props, (query) => emit('search', query), 'multiselect');
+
+const selectionRef = ref<HTMLElement | null>(null);
+const visibleCount = ref(2);
 
 const allSelected = computed(() => {
     if (displayedOptions.value.length === 0) {
@@ -133,30 +148,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 +189,80 @@ 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();
+});
+
+onUnmounted(() => {
+    resizeObserver?.disconnect();
+});
+
+watch(() => props.selected, updateVisibleCount);
+
+watch(isOpen, (val) => {
+    if (!val) {
+        nextTick(updateVisibleCount);
+    }
+});
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .octopus-multiselect {
     position: relative;
 
@@ -232,17 +288,57 @@ 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-hover-tooltip {
+        position: absolute;
+        top: calc(100% + 2px);
+        left: 0;
+        right: 0;
+        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.5rem;
+        word-break: break-word;
+        pointer-events: none;
+    }
+
     .octopus-multiselect-chevron {
         padding: 0.25rem 0.5rem;
         display: flex;

package/src/components/form/OctopusSelect.vue

@@ -0,0 +1,237 @@
+<template>
+    <div
+        ref="containerRef"
+        class="octopus-select"
+        :class="{ 'form-margin': label }"
+    >
+        <label
+            v-if="label"
+            :for="computedId"
+            class="form-label"
+        >
+            {{ label }}
+        </label>
+
+        <div
+            class="octopus-select-field"
+            :class="{ disabled: isDisabled, open: isOpen, noBorder }"
+            @click="openDropdown"
+        >
+            <span
+                v-show="selectedLabel && !isOpen"
+                class="octopus-select-value"
+            >{{ selectedLabel }}</span>
+            <input
+                v-show="!selectedLabel || isOpen"
+                :id="computedId"
+                ref="inputRef"
+                v-model="searchQuery"
+                type="text"
+                class="octopus-select-input"
+                :placeholder="inputPlaceholder"
+                :disabled="isDisabled"
+                @focus="openDropdown"
+                @input="handleInput"
+            >
+            <button
+                class="btn-transparent octopus-select-chevron"
+                :disabled="isDisabled"
+                @click.stop="toggleDropdown"
+            >
+                <ChevronDownIcon />
+            </button>
+        </div>
+
+        <div v-if="isOpen" class="octopus-select-dropdown">
+            <div class="octopus-select-options">
+                <button
+                    v-for="(option, index) in displayedOptions"
+                    :key="index"
+                    class="octopus-select-option"
+                    :class="{ selected: isSelected(option) }"
+                    @click="selectOption(option)"
+                >
+                    {{ getLabel(option) }}
+                </button>
+                <span v-if="displayedOptions.length === 0" class="text-indic px-2">
+                    {{ t('No elements found. Consider changing the search query.') }}
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" generic="T">
+import { computed, toRaw } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
+import { useOctopusDropdown } from '../composable/form/useOctopusDropdown';
+
+const props = withDefaults(defineProps<{
+    /** Optional label displayed above the field. */
+    label?: string;
+    /** Currently selected item. Bind with `v-model:value`. */
+    value?: 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 when true. */
+    isDisabled?: boolean;
+    /** Placeholder shown in the input when no item is selected. Defaults to the translated "Search" string. */
+    placeholder?: string;
+    /** Disable the border around the input. */
+    noBorder?: boolean;
+    /** When true (default), clicking the already-selected option clears the selection. */
+    allowDeselect?: boolean;
+}>(), {
+    label: undefined,
+    value: undefined,
+    optionKey: undefined,
+    placeholder: undefined,
+    allowDeselect: true,
+});
+
+const emit = defineEmits<{
+    /** Emitted when the selection changes. */
+    (e: 'update:value', value: T | undefined): 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,
+    isOpen,
+    containerRef,
+    inputRef,
+    computedId,
+    displayedOptions,
+    inputPlaceholder,
+    getLabel,
+    openDropdown,
+    closeDropdown,
+    toggleDropdown,
+    handleInput,
+} = useOctopusDropdown(props, (query) => emit('search', query), 'select');
+
+const selectedLabel = computed(() =>
+    props.value !== undefined ? getLabel(props.value) : undefined
+);
+
+function isSelected(option: T): boolean {
+    if (props.value === undefined) {
+        return false;
+    }
+    if (props.optionKey) {
+        return props.value[props.optionKey] === option[props.optionKey];
+    }
+    return toRaw(props.value as object) === toRaw(option as object);
+}
+
+function selectOption(option: T): void {
+    if (isSelected(option) && props.allowDeselect) {
+        emit('update:value', undefined);
+    } else {
+        emit('update:value', option);
+    }
+    closeDropdown();
+}
+</script>
+
+<style scoped lang="scss">
+.octopus-select {
+    position: relative;
+
+    .octopus-select-field {
+        display: flex;
+        align-items: center;
+        border: 1px solid var(--octopus-border-default);
+        border-radius: var(--octopus-border-radius);
+        background: white;
+        cursor: pointer;
+
+        &.open {
+            border-color: var(--octopus-primary);
+        }
+
+        &.disabled {
+            background: var(--octopus-secondary-lighter);
+            cursor: default;
+        }
+
+        &.noBorder {
+            border: none;
+        }
+    }
+
+    .octopus-select-value {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 0.4rem 0.5rem;
+        padding-right: 0;
+        height: 2rem;
+    }
+
+    .octopus-select-input {
+        flex: 1;
+        border: none;
+        background: transparent;
+        padding: 0.4rem 0.5rem;
+        height: 2rem;
+        outline: none;
+        cursor: inherit;
+        min-width: 0;
+    }
+
+    .octopus-select-chevron {
+        padding: 0.25rem 0.5rem;
+        display: flex;
+        align-items: center;
+    }
+
+    .octopus-select-dropdown {
+        position: absolute;
+        top: calc(100% + 2px);
+        left: 0;
+        right: 0;
+        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-select-options {
+        max-height: 14rem;
+        overflow-y: auto;
+    }
+
+    .octopus-select-option {
+        display: block;
+        width: 100%;
+        text-align: left;
+        padding: 0.25rem 0.5rem;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+
+        &:hover {
+            background: var(--octopus-secondary-lighter);
+        }
+
+        &.selected {
+            font-weight: 600;
+            color: var(--octopus-primary);
+        }
+    }
+}
+</style>

package/src/components/misc/ClassicPopover.vue

@@ -48,7 +48,9 @@ const props = defineProps({
   popoverClass: { type: String, default: undefined },
   isTopLayer: { type: Boolean, default: false },
   /** @deprecated No longer needed. If set to true, max height of popover will not overflow from parent */
-  constrainHeight: { type: Boolean, default: true }
+  constrainHeight: { type: Boolean, default: true },
+  /** Force z-index */
+  zIndex: { type: Number, default: undefined }
 })
 
 //Emits
@@ -74,7 +76,12 @@ const router = useRouter();
 
 //Computed
 const popoverId = computed(() => "popover" + props.target);
-const positionInlineStyle = computed(() => `left: ${posX.value}px; top: ${posY.value}px;max-height:${maxHeight.value}`);
+const positionInlineStyle = computed(() => ({
+  left: `${posX.value}px`,
+  top: `${posY.value}px`,
+  'max-height': maxHeight.value,
+  'z-index': props.zIndex ?? 10
+}));
 const displayPopover = computed(() => show.value && !props.disable);
 const isTopLayerPopover = computed(() => (props.isTopLayer || "octopus-modal"===props.relativeClass) && Object.hasOwn(HTMLElement.prototype, "popover"));
 

package/src/components/misc/modal/ClassicModal.vue

@@ -31,6 +31,7 @@
       </div>
     </div>
     <div v-show="!onlyHeader" class="octopus-modal-body">
+      <slot />
       <slot name="body" />
     </div>
     <div v-show="!onlyHeader" class="octopus-modal-footer">

package/src/components/pages/PlaylistsPage.vue

@@ -1,5 +1,6 @@
 <template>
   <section v-if="isInit" class="page-box">
+    <!-- TODO à intégrer dans frontoffice -->
     <router-link
       v-if="isRolePlaylists && !isPodcastmaker"
       to="/main/priv/edit/playlist"

package/src/helper/colorFromString.ts

@@ -1,15 +1,22 @@
 /**
  * Get a color from a string.
  * Using the same string, the color will always be the same.
+ *
+ * Uses FNV-1a hashing (XOR-then-multiply with the FNV prime 16777619) for strong
+ * bit avalanche: a single character difference propagates through all hash bits,
+ * so similar strings produce very different hues.
+ *
  * @param str The string used for the color
  * @param saturation Saturation of the color
  * @param lightness Lightness of the color
  * @returns A color
  */
 export function colorFromString(str: string, saturation = 80, lightness = 70) {
-    let hash = 0;
-    str.split('').forEach(char => {
-        hash = char.charCodeAt(0) + ((hash << 5) - hash);
-    });
-    return `hsl(${(hash + 360) % 360}, ${saturation}%, ${lightness}%)`;
+    let hash = 2166136261;
+    for (const char of str) {
+        hash ^= char.charCodeAt(0);
+        hash = Math.imul(hash, 16777619) >>> 0;
+    }
+    const hue = Math.round((hash / 0xFFFFFFFF) * 360);
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 }