@saooti/octopus-sdk 41.12.0-beta → 41.12.0-beta3

package/.claude/scheduled_tasks.lock

@@ -0,0 +1 @@
+{"sessionId":"92d5c13f-8d38-4dc6-a66d-c7256640dc6f","pid":10553,"procStart":"32347","acquiredAt":1783406560303}

package/CHANGELOG.md

@@ -15,9 +15,12 @@
   - Mise en commun de code entre `OctopusSelect` & `OctopusMultiselect`
   - Ajustement de `OctopusMultiselect` pour fonctionner correctement avec des
     objets identiques avec références différentes
+  - Ajout de nouvelles options à `OctopusMultiselect` pour permettre la saisie
+    de données et avoir une meilleure UX en cas de longue liste
 - Ajout de nouvelles classes utilitaires dans le css
 - Ajout de nouvelles options d'apparence pour `ClassicButton`
 - Changement propriété principale de `ClassicButtonGroup` pour plus de cohérence
+- Ajout de variables CSS pour configurer l'aspect de divers boutons
 
 **Fixes**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.12.0-beta",
+  "version": "41.12.0-beta3",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -51,7 +51,7 @@
     "typescript-eslint": "^8.47.0",
     "video.js": "^8.23.6",
     "videojs-quality-selector-hls": "^1.1.1",
-    "vite": "^6.4.1",
+    "vite": "^8.0.16",
     "vite-bundle-visualizer": "^1.2.1",
     "vue-material-design-icons": "^5.3.1",
     "vue-recaptcha": "^2.0.3",
@@ -64,7 +64,7 @@
     "@stylistic/eslint-plugin": "*",
     "@types/sockjs-client": "^1.5.4",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.7",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.39.1",
     "eslint-plugin-vue": "10.9.1",

package/src/components/composable/form/useOctopusDropdown.ts

@@ -1,10 +1,10 @@
 import { computed, getCurrentInstance, nextTick, ref } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { type MaybeElementRef, onClickOutside } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 
 export interface OctopusDropdownProps<T> {
     options: T[];
-    optionLabel: keyof T & string;
+    optionLabel?: keyof T & string;
     optionKey?: keyof T;
     isDisabled?: boolean;
     placeholder?: string;
@@ -13,7 +13,12 @@ export interface OctopusDropdownProps<T> {
 export function useOctopusDropdown<T>(
     props: OctopusDropdownProps<T>,
     emitSearch: (query: string) => void,
-    idPrefix: string = 'octopus-dropdown'
+    idPrefix: string = 'octopus-dropdown',
+    // Extra elements to exclude from the click-outside check.
+    // Needed when the dropdown is teleported outside containerRef (e.g. to body):
+    // without this, clicking inside the teleported dropdown triggers closeDropdown
+    // because it is no longer a DOM descendant of containerRef.
+    ignore?: MaybeElementRef[]
 ) {
     const { t } = useI18n();
     const instance = getCurrentInstance();
@@ -46,7 +51,10 @@ export function useOctopusDropdown<T>(
     const inputPlaceholder = computed(() => props.placeholder ?? t('Search'));
 
     function getLabel(option: T): string {
-        return option[props.optionLabel] as string;
+        if (props.optionLabel) {
+            return option[props.optionLabel] as string;
+        }
+        return option as unknown as string;
     }
 
     function openDropdown(): void {
@@ -78,7 +86,7 @@ export function useOctopusDropdown<T>(
         }
     }
 
-    onClickOutside(containerRef, closeDropdown);
+    onClickOutside(containerRef, closeDropdown, ignore?.length ? { ignore } : undefined);
 
     return {
         searchQuery,

package/src/components/display/podcasts/PodcastPlayButton.vue

@@ -359,15 +359,15 @@ async function play(isVideo: boolean): Promise<void> {
     left: 0;
     font-size: 1rem;
     color: white;
-    background-color: var(--octopus-primary-less-transparent);
-    border-radius: var(--octopus-border-radius);
+    background-color: var(--octopus-btn-play-bg);
+    border-radius: var(--octopus-btn-play-radius);
 
     @media (width <= 960px) {
       font-size: 0.8rem;
     }
 
     button{
-      color: white;
+      color: var(--octopus-btn-play-fg);
       background-color: transparent;
       border: 0;
       display: flex;

package/src/components/form/OctopusMultiselect.vue

@@ -41,6 +41,7 @@
                 :disabled="isDisabled"
                 @focus="openDropdown"
                 @input="handleInput"
+                @keydown.enter="handleCustomValueEnter"
             >
             <button
                 class="btn-transparent octopus-multiselect-chevron"
@@ -58,33 +59,46 @@
             {{ allLabelsText }}
         </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 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 visibleOptions"
+                        :key="index"
+                        :text-init="isSelected(option)"
+                        :label="getLabel(option)"
+                        :is-disabled="isDisabled"
+                        @update:text-init="toggleOption(option)"
+                    />
+                    <template v-if="allowCustomValue && searchQuery.trim()">
+                        <hr v-if="visibleOptions.length > 0">
+                        <span class="text-indic px-2">
+                            {{ t('Press Enter to add this value') }}
+                        </span>
+                    </template>
+                    <span v-else-if="visibleOptions.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, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+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';
@@ -99,8 +113,16 @@ const props = defineProps<{
     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;
+    /** Key of each option object to use as the display label. Omit when `options` is a
+     *  plain `string[]` — each string is used as its own label. Note: omitting this for
+     *  an object array is a runtime mistake (not caught at compile time) and will render
+     *  "[object Object]". */
+    optionLabel?: keyof T & string;
+    /** When true, pressing Enter in the search input adds the typed text as a new
+     *  selected value, even if it doesn't match any option. Intended for use when
+     *  options are plain strings (`optionLabel` omitted) — casting arbitrary typed
+     *  text into an object-shaped T would not produce a valid option. */
+    allowCustomValue?: boolean;
     /** Disables the field and all checkboxes when true. */
     isDisabled?: boolean;
     /** Placeholder shown in the input when no items are selected. Defaults to the translated "Search" string. */
@@ -111,6 +133,10 @@ const props = defineProps<{
     noBorder?: boolean;
     /** When true, hovering the closed field with overflow shows a tooltip listing all selected items. */
     expandOnHover?: boolean;
+    /** When true, options selected at the moment the dropdown opens are moved to the
+     *  top of the list. This is a snapshot taken at open time — it does not live-reorder
+     *  while the dropdown stays open, only on the next closed→open transition. */
+    pullSelectedToTop?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -123,6 +149,10 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+// 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,
@@ -136,16 +166,54 @@ const {
     openDropdown,
     toggleDropdown,
     handleInput,
-} = useOctopusDropdown(props, (query) => emit('search', query), 'multiselect');
+} = 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);
 
+// Selection snapshot captured the instant the dropdown opens, used only to freeze the
+// sort order when pullSelectedToTop is set — does not react to later `selected` changes
+// while the dropdown stays open.
+const pinnedSnapshot = ref<T[]>([]);
+
+// Selected values not present in `options` — only populated when allowCustomValue is set,
+// so a custom value typed via handleCustomValueEnter still shows (checked) in the dropdown.
+const customSelectedOptions = computed<T[]>(() => {
+    if (!props.allowCustomValue) { return []; }
+    return (props.selected ?? []).filter((item) => !isInOptions(item));
+});
+
+const visibleOptions = computed<T[]>(() => {
+    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 (displayedOptions.value.length === 0) {
+    if (visibleOptions.value.length === 0) {
         return false;
     }
-    return displayedOptions.value.every((option) => isSelected(option));
+    return visibleOptions.value.every((option) => isSelected(option));
 });
 
 const hasSelected = computed(() => (props.selected?.length ?? 0) > 0);
@@ -170,6 +238,22 @@ function isSelected(option: T): boolean {
     }
 }
 
+function isInOptions(option: T): boolean {
+    if (props.optionKey) {
+        return props.options.some((opt) => opt[props.optionKey] === option[props.optionKey]);
+    } else {
+        return props.options.includes(option);
+    }
+}
+
+function isPinned(option: T): boolean {
+    if (props.optionKey) {
+        return pinnedSnapshot.value.some((s) => s[props.optionKey] === option[props.optionKey]);
+    } else {
+        return pinnedSnapshot.value.includes(option);
+    }
+}
+
 function toggleOption(option: T): void {
     const current = props.selected ?? [];
     if (isSelected(option)) {
@@ -183,16 +267,27 @@ function toggleOption(option: T): void {
     }
 }
 
+function handleCustomValueEnter(): void {
+    if (!props.allowCustomValue) { return; }
+    const value = searchQuery.value.trim();
+    if (!value) { return; }
+    const customOption = value as unknown as T;
+    if (!isSelected(customOption)) {
+        emit('update:selected', [...(props.selected ?? []), customOption]);
+    }
+    searchQuery.value = '';
+}
+
 function toggleAll(val: boolean): void {
     const current = props.selected ?? [];
     if (val) {
-        const toAdd = displayedOptions.value.filter((option: T) => !isSelected(option));
+        const toAdd = visibleOptions.value.filter((option: T) => !isSelected(option));
         emit('update:selected', [...current, ...toAdd]);
     } else {
         const key = props.optionKey;
         emit('update:selected', current.filter((item: T) => key
-            ? !displayedOptions.value.some((opt) => opt[key] === item[key])
-            : !displayedOptions.value.includes(item)
+            ? !visibleOptions.value.some((opt) => opt[key] === item[key])
+            : !visibleOptions.value.includes(item)
         ));
     }
 }
@@ -247,16 +342,24 @@ onMounted(() => {
         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) {
+    if (val) {
+        pinnedSnapshot.value = [...(props.selected ?? [])];
+        nextTick(updateDropdownPosition);
+    } else {
         nextTick(updateVisibleCount);
     }
 });
@@ -345,31 +448,36 @@ watch(isOpen, (val) => {
         align-items: center;
     }
 
-    .octopus-multiselect-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-form-item {
-            padding: 0.25rem 0.5rem;
-            border-bottom: 1px solid var(--octopus-secondary);
-        }
+// 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-multiselect-options {
+    max-height: 14rem;
+    overflow-y: auto;
 
-        .octopus-form-item {
-            padding: 0.25rem 0.5rem;
-        }
+    .octopus-form-item {
+        padding: 0.25rem 0.5rem;
     }
 }
+
+hr {
+    border-top: 1px solid var(--octopus-secondary);
+    border-bottom: none;
+    margin: 0;
+}
 </style>

package/src/components/form/OctopusSelect.vue

@@ -42,27 +42,34 @@
             </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>
+        <Teleport to=".octopus-app">
+            <div
+                v-if="isOpen"
+                ref="dropdownRef"
+                class="octopus-select-dropdown"
+                :style="dropdownStyle"
+            >
+                <div class="octopus-select-options">
+                    <button
+                        v-for="(option, index) in visibleOptions"
+                        :key="index"
+                        class="octopus-select-option"
+                        :class="{ selected: isSelected(option) }"
+                        @click="selectOption(option)"
+                    >
+                        {{ getLabel(option) }}
+                    </button>
+                    <span v-if="visibleOptions.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, toRaw } from 'vue';
+import { type CSSProperties, computed, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
 import { useOctopusDropdown } from '../composable/form/useOctopusDropdown';
@@ -86,6 +93,10 @@ const props = withDefaults(defineProps<{
     noBorder?: boolean;
     /** When true (default), clicking the already-selected option clears the selection. */
     allowDeselect?: boolean;
+    /** When true, the option matching the current value is moved to the top of the list
+     *  the moment the dropdown opens. This is a snapshot taken at open time — it does not
+     *  live-reorder while the dropdown stays open, only on the next closed→open transition. */
+    pullSelectedToTop?: boolean;
 }>(), {
     label: undefined,
     value: undefined,
@@ -104,6 +115,10 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+// 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,
@@ -117,7 +132,44 @@ const {
     closeDropdown,
     toggleDropdown,
     handleInput,
-} = useOctopusDropdown(props, (query) => emit('search', query), 'select');
+} = useOctopusDropdown(props, (query) => emit('search', query), 'select', [dropdownRef]);
+
+// 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`,
+    };
+}
+
+// Value snapshot captured the instant the dropdown opens, used only to freeze the
+// sort order when pullSelectedToTop is set — does not react to later `value` changes
+// while the dropdown stays open.
+const pinnedValue = ref<T | undefined>(undefined);
+
+watch(isOpen, (val) => {
+    if (val) {
+        pinnedValue.value = props.value;
+        nextTick(updateDropdownPosition);
+    }
+});
+
+onMounted(() => {
+    // Keep the teleported dropdown aligned when the page scrolls or the viewport resizes
+    window.addEventListener('scroll', updateDropdownPosition, true);
+    window.addEventListener('resize', updateDropdownPosition);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', updateDropdownPosition, true);
+    window.removeEventListener('resize', updateDropdownPosition);
+});
 
 const selectedLabel = computed(() =>
     props.value !== undefined ? getLabel(props.value) : undefined
@@ -133,6 +185,23 @@ function isSelected(option: T): boolean {
     return toRaw(props.value as object) === toRaw(option as object);
 }
 
+function isPinned(option: T): boolean {
+    if (pinnedValue.value === undefined) {
+        return false;
+    }
+    if (props.optionKey) {
+        return pinnedValue.value[props.optionKey] === option[props.optionKey];
+    }
+    return toRaw(pinnedValue.value as object) === toRaw(option as object);
+}
+
+const visibleOptions = computed<T[]>(() => {
+    if (!props.pullSelectedToTop) {
+        return displayedOptions.value;
+    }
+    return [...displayedOptions.value.filter(isPinned), ...displayedOptions.value.filter((option) => !isPinned(option))];
+});
+
 function selectOption(option: T): void {
     if (isSelected(option) && props.allowDeselect) {
         emit('update:value', undefined);
@@ -197,41 +266,40 @@ function selectOption(option: T): void {
         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;
-    }
+// 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-select selector.
+.octopus-select-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-select-option {
-        display: block;
-        width: 100%;
-        text-align: left;
-        padding: 0.25rem 0.5rem;
-        border: none;
-        background: transparent;
-        cursor: pointer;
+.octopus-select-options {
+    max-height: 14rem;
+    overflow-y: auto;
+}
 
-        &:hover {
-            background: var(--octopus-secondary-lighter);
-        }
+.octopus-select-option {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 0.25rem 0.5rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
 
-        &.selected {
-            font-weight: 600;
-            color: var(--octopus-primary);
-        }
+    &:hover {
+        background: var(--octopus-secondary-lighter);
+    }
+
+    &.selected {
+        font-weight: 600;
+        color: var(--octopus-primary);
     }
 }
 </style>

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

@@ -110,6 +110,8 @@ function closePopup(): void {
 
   @media (width <= 500px) {
     width: 95vw;
+    margin-left: 2.5vw;
+    margin-right: 2.5vw;
   }
 
  .octopus-modal-body {