@saooti/octopus-sdk 41.11.0-beta2 → 41.11.0

package/CHANGELOG.md

@@ -1,10 +1,11 @@
 # CHANGELOG
 
-## 41.11.0 (En cours)
+## 41.11.0 (05/06/2026)
 
 **Features**
 
 - **14327** - Ajout droits pour éléments médiathèque
+- **14494** - Ajout droits pour accès enregistrements
 - Revue du système de droits
   - Propose maintenant des fonction `get*Right`, permettant d'obtenir la raison
     du rejet
@@ -14,10 +15,13 @@
     de l'utilisateur sur un élément particulier
 - Ajout du composant `ClassicTabs` pour simplifier la gestion d'onglets
   - `ClassicNav` est déprécié en conséquence
+- Ajout du composant `OctopusMultiselect`, un composant plus moderne pour les
+  choix multiples
 - Ajout de l'api `mediathequeApi`
 
 **Fixes**
 
+- **14549** - Suppression du fond de `ClassicAvatar` quand l'image est définie
 - Correction des problèmes de placement de `ClassicPopover`
   - Les props `constraintHeight` & `relativeClass` sont maintenant dépréciés
 

package/index.ts

@@ -58,7 +58,8 @@ export * from "./src/components/buttons/";
 
 // Form
 import ClassicButtonGroup from "./src/components/form/ClassicButtonGroup.vue";
-export { ClassicButtonGroup };
+import OctopusMultiselect from "./src/components/form/OctopusMultiselect.vue";
+export { ClassicButtonGroup, OctopusMultiselect };
 export type { ButtonGroupOption } from "./src/components/form/ClassicButtonGroup.vue";
 
 //Display

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.11.0-beta2",
+  "version": "41.11.0",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -31,7 +31,6 @@
     "@vueuse/core": "^13.9.0",
     "autoprefixer": "^10.4.22",
     "axios": "^1.13.2",
-    "dayjs": "^1.11.19",
     "emoji-mart-vue-fast": "^15.0.5",
     "express": "^5.1.0",
     "globals": "^16.5.0",
@@ -91,6 +90,7 @@
     "url": "git+https://github.com/saooti/octopus-sdk.git"
   },
   "peerDependencies": {
+    "dayjs": "^1.11.0",
     "eslint-plugin-vue": "^10.9.1",
     "pinia": ">=2.3.0",
     "vue": "^3.5.0",
@@ -99,7 +99,6 @@
   },
   "exports": {
     ".": {
-      "types": "./index.d.ts",
       "default": "./index.ts"
     },
     "./src/*": "./src/*",

package/src/components/buttons/ClassicButton.vue

@@ -1,7 +1,10 @@
+<!-- A simple button with accessibility in mind -->
 <template>
     <button
         class="btn"
         :aria-disabled="disabled"
+        :title="title"
+        :aria-label="title"
         @click="onClick"
     >
         <slot />
@@ -12,6 +15,8 @@
 const props = defineProps<{
     /** Disable the button */
     disabled?: boolean;
+    /** Title of the button */
+    title?: string;
 }>();
 
 const emit = defineEmits<{

package/src/components/composable/useRights.ts

@@ -5,6 +5,7 @@ import type { Podcast } from "../../stores/class/general/podcast";
 import { PlaylistMedia } from "../../stores/class/radio/playlistMedia";
 import { Cartouchier } from "../../stores/class/cartouchier/cartouchier";
 import { Media } from "../../stores/class/general/media";
+import { Conference } from "../../stores/class/conference/conference";
 
 type Role =
     'ADMIN'|'ORGANISATION'|
@@ -339,6 +340,15 @@ export const useRights = () => {
         return getEditTranscriptRight(podcast);
     }
 
+    // Live
+    function getAccessRecordingRight(conference: Conference, isLive: boolean): ActionRight {
+        if (isLive) {
+            return roleContainsAny('LIVE') ? ActionRight.Allowed : ActionRight.DeniedNoRight;
+        } else {
+            return roleContainsAny('ANIMATION', 'RESTRICTED_ANIMATION') ? ActionRight.Allowed : ActionRight.DeniedNoRight;
+        }
+    }
+
     // View/utility checks — outside the action pattern
     function canSeeHistory(): boolean {
         return roleContainsAny('ADMIN', 'ORGANISATION');
@@ -388,6 +398,7 @@ export const useRights = () => {
         getEditMixRight,
         getDeleteMixRight,
         // Other
+        getAccessRecordingRight,
         getEditCodeInsertPlayerRight,
         getEditTranscriptRight,
         getEditTranscriptVisibilityRight,

package/src/components/display/RightsIndicator.vue

@@ -7,6 +7,7 @@
                 aria-hidden="true"
                 fill-color="var(--octopus-primary)"
             />
+            <span v-if="!hasAccess" class="rights-visually-hidden">{{ message }}</span>
             <ClassicPopover
                 v-if="!hasAccess"
                 :target="iconId"
@@ -15,18 +16,20 @@
                 {{ message }}
             </ClassicPopover>
         </div>
-        <ClassicAlert
-            v-else-if="!hasAccess"
-            type="info"
-        >
-            <template #icon>
-                <LockIcon
-                    aria-hidden="true"
-                    fill-color="var(--octopus-primary)"
-                />
-            </template>
-            {{ message }}
-        </ClassicAlert>
+        <div aria-live="polite" aria-atomic="true">
+            <ClassicAlert
+                v-if="text && !hasAccess"
+                type="info"
+            >
+                <template #icon>
+                    <LockIcon
+                        aria-hidden="true"
+                        fill-color="var(--octopus-primary)"
+                    />
+                </template>
+                {{ message }}
+            </ClassicAlert>
+        </div>
     </div>
 </template>
 
@@ -213,3 +216,18 @@ const uid = getCurrentInstance()?.uid;
 /** ID of the icon for reference by the popover */
 const iconId = computed((): string => 'rights-indicator-' + uid);
 </script>
+
+<style scoped lang="scss">
+/** Helper class to keep the data accessible for screen readers */
+.rights-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+</style>

package/src/components/form/ClassicMultiselect.vue

@@ -11,8 +11,9 @@
       <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
         label
       }}
-      <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
+        <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
       </label>
+
       <template v-if="popover">
         <button
           :id="'popover' + id"
@@ -32,6 +33,7 @@
         </ClassicPopover>
       </template>
     </div>
+
     <vSelect
       v-model="optionSelected"
       :input-id="id"
@@ -60,6 +62,7 @@
       <template v-if="optionCustomTemplating.length" #option="option">
         <slot :name="optionCustomTemplating" :option="option" />
       </template>
+
       <template v-else-if="withSelectAll" #option="option">
         <strong v-if="option.id === selectAll.id">
           {{ option[optionLabel] }}
@@ -76,6 +79,10 @@
         <slot :name="optionSelectedCustomTemplating" :option="option" />
       </template>
 
+      <template #selected-option-container="{ option, deselect, disabled, multiple: mul }">
+        <slot name="selected-option-container" v-bind="{ option, deselect, disabled, multiple: mul }" />
+      </template>
+
       <template #no-options="{ searching }">
         <span v-if="searching">{{
           t("No elements found. Consider changing the search query.")

package/src/components/form/ClassicRadio.vue

@@ -10,66 +10,76 @@
                                      `selected` : true if the option is selected
 -->
 <template>
-  <div role="radiogroup" class="d-flex" :class="isColumn !== false ? 'flex-column' : ''">
     <div
-      v-for="option in options"
-      :key="option.title"
-      class="octopus-form-item"
-      :class="isColumn !== false ? 'd-flex flex-nowrap align-items-center' : 'me-2'"
+        role="radiogroup"
+        class="d-flex"
+        :class="isColumn !== false ? 'flex-column' : ''"
     >
-      <input
-        :id="computedId + option.value"
-        :checked="textInit === option.value"
-        type="radio"
-        :name="computedId"
-        :value="option.value"
-        :disabled="isDisabled"
-        @input="onChange($event.target.value)"
-      >
-      <label class="c-hand" :for="computedId + option.value">
-        <slot :name="'label-' + option.value" v-bind="slotBindings(option)">{{ option.title }}</slot>
-      </label>
+        <div
+            v-for="option in options"
+            :key="option.title"
+            class="octopus-form-item"
+            :class="isColumn !== false ? 'd-flex flex-nowrap align-items-center' : 'me-2'"
+        >
+            <input
+                :id="computedId + option.value"
+                :checked="textInit === option.value"
+                type="radio"
+                :name="computedId"
+                :value="option.value"
+                :disabled="isDisabled"
+                @input="onChange($event.target.value)"
+            >
+            <label class="c-hand" :for="computedId + option.value">
+                <slot :name="'label-' + option.value" v-bind="slotBindings(option)">{{ option.title }}</slot>
+            </label>
 
-      <slot :name="'after-' + option.value" v-bind="slotBindings(option)" />
+            <slot :name="'after-' + option.value" v-bind="slotBindings(option)" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup generic="T extends { title: string; value: string|undefined; }" lang="ts">
 import { computed, getCurrentInstance } from 'vue';
 
 //Props 
-const { textInit, isColumn = true, idRadio } = defineProps<{
-  options: Array<T>;
-  textInit?: string;
-  idRadio?: string;
-  isDisabled?: boolean;
-  isColumn?: boolean;
+const { options, textInit, isColumn = true, idRadio } = defineProps<{
+    options: Array<T>;
+    textInit?: string;
+    idRadio?: string;
+    isDisabled?: boolean;
+    isColumn?: boolean;
 }>();
 
 //Emits
 const emit = defineEmits<{
-  (e: 'update:textInit', value: string): void;
+    (e: 'update:textInit', value: string): void;
+    /** Emitted with update:text-init, containing the selected object */
+    (e: 'selected-item', value: T): void;
 }>();
 
 const uid = getCurrentInstance()?.uid;
 const computedId = computed((): string => {
-  if (idRadio !== undefined) {
-    return idRadio;
-  } else {
-    return 'classic-radio-' + uid;
-  }
+    if (idRadio !== undefined) {
+        return idRadio;
+    } else {
+        return 'classic-radio-' + uid;
+    }
 });
 
 //Methods
-function onChange(value: string){
-  emit('update:textInit', value)
+function onChange(value: string): void {
+    emit('update:textInit', value);
+    const item = options.find(elt => elt.value === value);
+    if (item) {
+        emit('selected-item', item);
+    }
 }
 
 function slotBindings(option: T): { option: T; selected: boolean } {
-  return {
-    option,
-    selected: textInit === option.value
-  }
+    return {
+        option,
+        selected: textInit === option.value
+    }
 }
 </script>

package/src/components/form/OctopusMultiselect.vue

@@ -0,0 +1,279 @@
+<template>
+    <div
+        ref="containerRef"
+        class="octopus-multiselect"
+        :class="{ 'form-margin': label }"
+    >
+        <label
+            v-if="label"
+            :for="computedId"
+            class="form-label"
+        >
+            {{ label }}
+        </label>
+
+        <div
+            class="octopus-multiselect-field"
+            :class="{ disabled: isDisabled, open: isOpen, noBorder }"
+            @click="openDropdown"
+        >
+            <input
+                :id="computedId"
+                ref="inputRef"
+                v-model="searchQuery"
+                type="text"
+                class="octopus-multiselect-input"
+                :placeholder="inputPlaceholder"
+                :disabled="isDisabled"
+                @focus="openDropdown"
+                @input="handleInput"
+            >
+            <button
+                class="btn-transparent octopus-multiselect-chevron"
+                :disabled="isDisabled"
+                @click.stop="toggleDropdown"
+            >
+                <ChevronDownIcon />
+            </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 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>
+</template>
+
+<script setup lang="ts" generic="T">
+import { computed, getCurrentInstance, nextTick, ref, shallowRef, watch } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
+import ClassicCheckbox from './ClassicCheckbox.vue';
+
+const props = defineProps<{
+    /** Optional label displayed above the field. */
+    label?: string;
+    /** Currently selected items. Bind with `v-model:selected`. */
+    selected?: T[];
+    /** Full list of options to display or filter. */
+    options: T[];
+    /** Key of each option object to use as the display label. */
+    optionLabel: keyof T & string;
+    /** 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. */
+    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;
+}>();
+
+const emit = defineEmits<{
+    /** Emitted when the selection changes. */
+    (e: 'update:selected', value: T[]): 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 allSelected = computed(() => {
+    if (displayedOptions.value.length === 0) {
+        return false;
+    }
+    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})`;
+});
+
+function getLabel(option: T): string {
+    return option[props.optionLabel] as string;
+}
+
+function isSelected(option: T): boolean {
+    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));
+    } else {
+        emit('update:selected', [...current, option]);
+    }
+}
+
+function toggleAll(val: boolean): void {
+    const current = props.selected ?? [];
+    if (val) {
+        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)));
+    }
+}
+
+function openDropdown(): void {
+    if (props.isDisabled) {
+        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();
+    }
+}
+
+async function handleInput(): Promise<void> {
+    if (!props.onSearch) {
+        return;
+    }
+    const result = await props.onSearch(searchQuery.value);
+    internalOptions.value = result;
+}
+
+onClickOutside(containerRef, closeDropdown);
+</script>
+
+<style lang="scss">
+.octopus-multiselect {
+    position: relative;
+
+    .octopus-multiselect-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-multiselect-input {
+        flex: 1;
+        border: none;
+        background: transparent;
+        padding: 0.4rem 0.5rem;
+        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 {
+        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);
+        }
+    }
+
+    .octopus-multiselect-options {
+        max-height: 14rem;
+        overflow-y: auto;
+
+        .octopus-form-item {
+            padding: 0.25rem 0.5rem;
+        }
+    }
+}
+</style>

package/src/components/misc/ClassicAvatar.vue

@@ -44,12 +44,18 @@ const { useProxyImageUrl } = useImageProxy();
 
 const containerStyle = computed((): StyleValue => {
     const size = `${props.size}px`;
-    return {
-        'background-color': colorFromString(props.name),
-        'font-size': `${props.size / 2}px`,
+    const style: StyleValue = {
         height: size,
         width: size
     };
+
+    // Add background only if there's no image to display
+    if (props.imageUrl === undefined) {
+        style['background-color'] = colorFromString(props.name);
+        style['font-size'] = `${props.size / 2}px`;
+    }
+
+    return style;
 });
 </script>
 

package/src/stores/CacheStore.ts

@@ -0,0 +1,45 @@
+import { useDayjs } from "@/components/composable/useDayjs";
+import { Dayjs } from "dayjs";
+import { defineStore } from "pinia";
+import { reactive } from "vue";
+
+/**
+ * Type for cache storage
+ */
+interface CachedData<T> {
+    /** The stored data */
+    data: T;
+    /** Expiration date of the cached data */
+    expiration: Dayjs;
+}
+
+export const useCacheStore = defineStore('cache', () => {
+
+    const { dayjs } = useDayjs();
+    const cachedData = reactive({} as Record<string, CachedData<unknown>>);
+
+    async function getData<T>(key: string, callback: () => Promise<T>): Promise<T> {
+        let cache = cachedData[key] as CachedData<T>|undefined;
+        if (isDataEmptyOrExpired(cache)) {
+            // Retrieve data from callback
+            const data = await callback();
+            const expiration = dayjs().add(5, 'minutes');
+            cache = { data, expiration };
+            cachedData[key] = cache;
+        }
+
+        return cache.data;
+    }
+
+    function isDataEmptyOrExpired(data: CachedData<unknown>|undefined): boolean {
+        if (!data) {
+            return true;
+        } else {
+            return dayjs().isAfter(data.expiration);
+        }
+    }
+    
+    return {
+        getData
+    }
+});

package/src/stores/class/general/organisation.ts

@@ -22,6 +22,8 @@ export type OrganisationAttributes = {
   MONETISABLE?: MonetisationOptions;
   /** Privacy parameters (JSON) */
   PRIVATE?: string;
+  /** Live recordings enabled */
+  'live.active'?: boolean;
 };
 
 export interface Organisation {

package/tests/components/form/OctopusMultiselect.spec.ts

@@ -0,0 +1,162 @@
+import '@tests/mocks/i18n';
+
+import OctopusMultiselect from '@/components/form/OctopusMultiselect.vue';
+import { mount } from '@tests/utils';
+import { describe, expect, it, vi } from 'vitest';
+
+const options = [
+    { id: 1, name: 'Alpha' },
+    { id: 2, name: 'Beta' },
+    { id: 3, name: 'Gamma' },
+];
+
+describe('OctopusMultiselect', () => {
+    it('renders label when provided', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', label: 'My label' },
+        });
+        expect(wrapper.find('label.form-label').text()).toBe('My label');
+    });
+
+    it('does not render label when not provided', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name' },
+        });
+        expect(wrapper.find('label.form-label').exists()).toBe(false);
+    });
+
+    it('opens dropdown on input focus', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name' },
+        });
+        expect(wrapper.find('.octopus-multiselect-dropdown').exists()).toBe(false);
+        await wrapper.find('input').trigger('focus');
+        expect(wrapper.find('.octopus-multiselect-dropdown').exists()).toBe(true);
+    });
+
+    it('shows "All" checkbox and one checkbox per option when open', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        const checkboxes = wrapper.findAll('input[type="checkbox"]');
+        // 1 for "All" + 3 for options
+        expect(checkboxes).toHaveLength(4);
+    });
+
+    it('filters options locally by search query', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        await wrapper.find('input').setValue('al');
+        await wrapper.find('input').trigger('input');
+        const checkboxes = wrapper.findAll('input[type="checkbox"]');
+        // 1 for "All" + 1 matching "Alpha"
+        expect(checkboxes).toHaveLength(2);
+    });
+
+    it('shows no-results message when filter matches nothing', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name' },
+        });
+        await wrapper.find('input').trigger('focus');
+        await wrapper.find('input').setValue('zzz');
+        await wrapper.find('input').trigger('input');
+        expect(wrapper.find('.text-indic').exists()).toBe(true);
+    });
+
+    it('calls onSearch with current query and updates displayed options', async () => {
+        const searchResult = [{ id: 4, name: 'Delta' }];
+        const onSearch = vi.fn().mockResolvedValue(searchResult);
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', onSearch },
+        });
+        await wrapper.find('input').trigger('focus');
+        await wrapper.find('input').setValue('del');
+        await wrapper.find('input').trigger('input');
+        await vi.dynamicImportSettled();
+        expect(onSearch).toHaveBeenCalledWith('del');
+    });
+
+    it('emits update:selected when toggling a single option', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', selected: [] },
+        });
+        await wrapper.find('input').trigger('focus');
+        const optionCheckboxes = wrapper.findAll('.octopus-multiselect-options input[type="checkbox"]');
+        await optionCheckboxes[0].trigger('input');
+        expect(wrapper.emitted('update:selected')?.[0]).toEqual([[options[0]]]);
+    });
+
+    it('deselects an already-selected option', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', selected: [options[0]] },
+        });
+        await wrapper.find('input').trigger('focus');
+        const optionCheckboxes = wrapper.findAll('.octopus-multiselect-options input[type="checkbox"]');
+        await optionCheckboxes[0].trigger('input');
+        expect(wrapper.emitted('update:selected')?.[0]).toEqual([[]]);
+    });
+
+    it('toggleAll selects all displayed options', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', selected: [] },
+        });
+        await wrapper.find('input').trigger('focus');
+        const allCheckbox = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]');
+        await allCheckbox.trigger('input');
+        const emitted = wrapper.emitted('update:selected')?.[0]?.[0] as unknown[];
+        expect(emitted).toHaveLength(3);
+    });
+
+    it('toggleAll deselects all displayed options when all are selected', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', selected: [...options] },
+        });
+        await wrapper.find('input').trigger('focus');
+        const allCheckbox = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]');
+        await allCheckbox.trigger('input');
+        expect(wrapper.emitted('update:selected')?.[0]).toEqual([[]]);
+    });
+
+    it('shows selected items summary in placeholder', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', selected: [options[0], options[1]] },
+        });
+        const input = wrapper.find('input');
+        expect(input.attributes('placeholder')).toBe('Alpha, Beta');
+    });
+
+    it('shows count in placeholder when more than 2 items selected', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', selected: [...options] },
+        });
+        const input = wrapper.find('input');
+        expect(input.attributes('placeholder')).toBe('Alpha, Beta (+1)');
+    });
+
+    it('disables input when isDisabled is true', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', isDisabled: true },
+        });
+        expect(wrapper.find('input').attributes('disabled')).toBeDefined();
+    });
+
+    it('does not open dropdown when disabled', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', isDisabled: true },
+        });
+        await wrapper.find('input').trigger('focus');
+        expect(wrapper.find('.octopus-multiselect-dropdown').exists()).toBe(false);
+    });
+
+    it('uses selectAllText as the "All" checkbox label when provided', async () => {
+        const wrapper = await mount(OctopusMultiselect, {
+            props: { options, optionLabel: 'name', selectAllText: 'Tout' },
+        });
+        await wrapper.find('input').trigger('focus');
+        const allCheckboxLabel = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item label');
+        expect(allCheckboxLabel.text()).toBe('Tout');
+    });
+});

package/tsconfig.json

@@ -5,15 +5,13 @@
     // "strict": true,
     "jsx": "preserve",
     "importHelpers": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
-    "baseUrl": ".",
     "types": [
-      "webpack-env",
       "sockjs-client"
     ],
     "paths": {
@@ -21,7 +19,7 @@
         "./src/*"
       ],
       "@tests/*": [
-        "tests/*"
+        "./tests/*"
       ]
     },
     "lib": [
@@ -34,9 +32,7 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "src/**/*.vue"
   ],
   "exclude": [
     "node_modules"

package/tsconfig.test.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["sockjs-client", "vitest/globals"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ]
+}

package/vitest.config.js

@@ -12,7 +12,8 @@ export default defineConfig(env => mergeConfig(viteConfig(env), defineConfig({
         environment: 'happy-dom',
         //setupFiles: ['./tests/setup.ts'],
         typecheck: {
-            enabled: true
+            enabled: true,
+            tsconfig: './tsconfig.test.json'
         }
     }
 })));