@saooti/octopus-sdk 41.11.1 → 41.12.0-beta2

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # CHANGELOG
 
+## 41.12.0 (En cours)
+
+**Features**
+
+- Export de `colorFromString` pour usage hors du sdk
+- Ajout d'un composable `useSticky` pour déterminer quand un élément sticky se
+  déclenche
+- Ajout de `@stylistic/eslint-plugin` et mise à jour des règles eslint
+- Ajout d'un prop dans `ClassicPopover` pour modifier le z-index
+- Ajout d'un slot `option` pour `ClassicSelect`
+- Composants `Octopus`
+  - Ajout de `OctopusSelect`, une version moderne de `ClassicSelect`
+  - 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 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**
+
+- Correction d'une exception dans `deepEquals` si la comparaison est faite entre
+  une variable primitive et un objet
+
+**Misc**
+
+- Mise à jour des règles eslint
+
 ## 41.11.1 (17/06/2026)
 
 **Fixes**

package/eslint-config.mjs

@@ -2,6 +2,7 @@ import eslint from '@eslint/js';
 import eslintPluginVue from 'eslint-plugin-vue';
 import globals from 'globals';
 import typescriptEslint from 'typescript-eslint';
+import stylistic from '@stylistic/eslint-plugin';
 
 export default typescriptEslint.config(
   { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
@@ -11,6 +12,9 @@ export default typescriptEslint.config(
       ...typescriptEslint.configs.recommended,
       ...eslintPluginVue.configs['flat/recommended'],
     ],
+    plugins: {
+      '@stylistic': stylistic,
+    },
     files: ['**/*.{ts,vue}'],
     languageOptions: {
       ecmaVersion: 'latest',
@@ -33,11 +37,15 @@ export default typescriptEslint.config(
       "vue/no-ref-as-operand": ['error'],
 
       // Indentation
+      "@stylistic/indent": ['warn', 4, { "SwitchCase": 0 }],
       "vue/html-indent": ['warn', 4],
       "vue/script-indent": ['warn', 4],
+      "@stylistic/no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
 
       // Number of attributes per line (increase because sometimes two is not a lot)
-      "vue/max-attributes-per-line": ['warn', { singleline: 2 } ]
-    },
+      "vue/max-attributes-per-line": ['warn', { singleline: 2 } ],
+
+      "@typescript-eslint/no-unused-vars": "warn"
+    }
   }
 );

package/index.ts

@@ -59,7 +59,8 @@ export * from "./src/components/buttons/";
 // Form
 import ClassicButtonGroup from "./src/components/form/ClassicButtonGroup.vue";
 import OctopusMultiselect from "./src/components/form/OctopusMultiselect.vue";
-export { ClassicButtonGroup, OctopusMultiselect };
+import OctopusSelect from "./src/components/form/OctopusSelect.vue";
+export { ClassicButtonGroup, OctopusMultiselect, OctopusSelect };
 export type { ButtonGroupOption } from "./src/components/form/ClassicButtonGroup.vue";
 
 //Display
@@ -144,6 +145,7 @@ export { useSeoTitleUrl } from "./src/components/composable/route/useSeoTitleUrl
 export { useSeasonsManagement } from "./src/components/composable/useSeasonsManagement.ts";
 export { useTranslation } from "./src/components/composable/useTranslation.ts";
 export { useDayjs } from "./src/components/composable/useDayjs.ts";
+export { useSticky } from "./src/components/composable/useSticky.ts";
 
 //helper
 import domHelper from "./src/helper/domHelper.ts";
@@ -155,6 +157,7 @@ import downloadHelper from "./src/helper/downloadHelper.ts";
 import displayHelper from "./src/helper/displayHelper.ts";
 import debounce from "./src/helper/debounceHelper.ts";
 import { deepEqual } from "./src/helper/equals.ts";
+export { colorFromString } from './src/helper/colorFromString';
 
 //stores
 import {useVastStore} from "./src/stores/VastStore.ts";
@@ -175,7 +178,7 @@ export * from "./src/api";
 // Types
 export { type Emission, SeasonMode, emptyEmissionData } from "./src/stores/class/general/emission.ts";
 export { type Organisation, type OrganisationAttributes, emptyOrganisationData, emptyOrgaData } from "./src/stores/class/general/organisation.ts";
-export { type Podcast, type PodcastAvailability, PodcastType } from "./src/stores/class/general/podcast.ts";
+export { type Podcast, type SimplifiedPodcast, type PodcastAvailability, PodcastType, podcastToSimplified } from "./src/stores/class/general/podcast.ts";
 export { type Playlist, type PlaylistRule } from "./src/stores/class/general/playlist.ts";
 export { type Annotations } from "./src/stores/class/general";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.11.1",
+  "version": "41.12.0-beta2",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -61,6 +61,7 @@
   },
   "devDependencies": {
     "@pinia/testing": "^1.0.3",
+    "@stylistic/eslint-plugin": "*",
     "@types/sockjs-client": "^1.5.4",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-vue": "^5.2.4",
@@ -90,9 +91,11 @@
     "url": "git+https://github.com/saooti/octopus-sdk.git"
   },
   "peerDependencies": {
+    "@stylistic/eslint-plugin": "^5.10.0",
     "dayjs": "^1.11.0",
     "eslint-plugin-vue": "^10.9.1",
     "pinia": ">=2.3.0",
+    "typescript-eslint": "^8.47.0",
     "vue": "^3.5.0",
     "vue-i18n": "^11.1.0",
     "vue-router": "^4.6.0"

package/src/api/radioApi.ts

@@ -14,6 +14,19 @@ async function get(radioId: number): Promise<Canal> {
     });
 }
 
+/**
+ * Retrieve all radio canal by organisation
+ * @param organisationId Id of the organisation
+ * @returns The list of canal data
+ */
+async function getAll(organisationId: string): Promise<Array<Canal>> {
+    return await classicApi.fetchData<Array<Canal>>({
+        api: ModuleApi.RADIO,
+        path: "canal/orga/" + organisationId + "/"
+    });
+}
+
 export const radioApi = {
-    get
+    get,
+    getAll
 };

package/src/components/buttons/ClassicButton.vue

@@ -1,7 +1,7 @@
 <!-- A simple button with accessibility in mind -->
 <template>
     <button
-        class="btn"
+        :class="classes"
         :aria-disabled="disabled"
         :title="title"
         :aria-label="title"
@@ -12,11 +12,17 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
 const props = defineProps<{
     /** Disable the button */
     disabled?: boolean;
     /** Title of the button */
     title?: string;
+    /** Primary style for button */
+    primary?: boolean;
+    /** Icon style for button */
+    icon?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -24,6 +30,17 @@ const emit = defineEmits<{
     (e: 'click'): void;
 }>();
 
+const classes = computed((): Array<string> => {
+    const ary: Array<string> = ['btn', 'd-flex'];
+    if (props.primary) {
+        ary.push('btn-primary');
+    }
+    if (props.icon) {
+        ary.push('btn-icon');
+    }
+    return ary;
+});
+
 function onClick(): void {
     if (!props.disabled) {
         emit('click');

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

@@ -0,0 +1,104 @@
+import { computed, getCurrentInstance, nextTick, ref } from 'vue';
+import { type MaybeElementRef, onClickOutside } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+
+export interface OctopusDropdownProps<T> {
+    options: T[];
+    optionLabel: keyof T & string;
+    optionKey?: keyof T;
+    isDisabled?: boolean;
+    placeholder?: string;
+}
+
+export function useOctopusDropdown<T>(
+    props: OctopusDropdownProps<T>,
+    emitSearch: (query: string) => void,
+    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();
+
+    const searchQuery = ref('');
+    const isOpen = ref(false);
+    const isHovered = ref(false);
+    const containerRef = ref<HTMLElement | null>(null);
+    const inputRef = ref<HTMLInputElement | null>(null);
+
+    const computedId = computed(() => `${idPrefix}-${instance?.uid}`);
+
+    // vnode.props contains the raw parent-provided props before defineEmits strips them
+    // from attrs, so onSearch is present whenever the parent writes @search="...".
+    const hasSearchListener = computed(() => !!instance?.vnode.props?.onSearch);
+
+    const displayedOptions = computed((): T[] => {
+        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: T): string {
+        return option[props.optionLabel] as string;
+    }
+
+    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();
+        }
+    }
+
+    function handleInput(): void {
+        if (hasSearchListener.value) {
+            emitSearch(searchQuery.value);
+        }
+    }
+
+    onClickOutside(containerRef, closeDropdown, ignore?.length ? { ignore } : undefined);
+
+    return {
+        searchQuery,
+        isOpen,
+        isHovered,
+        containerRef,
+        inputRef,
+        computedId,
+        hasSearchListener,
+        displayedOptions,
+        inputPlaceholder,
+        getLabel,
+        openDropdown,
+        closeDropdown,
+        toggleDropdown,
+        handleInput,
+    };
+}

package/src/components/composable/useSticky.ts

@@ -0,0 +1,45 @@
+import { ref, toValue, onMounted, onBeforeUnmount, type Ref, type MaybeRef } from 'vue';
+
+/**
+ * Detects whether a sticky element is currently stuck (fixed at its `top` offset)
+ * or in its natural DOM position.
+ *
+ * A 1px invisible sentinel element is inserted immediately before the sticky element.
+ * When that sentinel scrolls out of the IntersectionObserver's root viewport (adjusted
+ * by `topOffset`), the element is considered stuck.
+ *
+ * `topOffset` must match the element's CSS `top` value in pixels. It is read once at
+ * mount time. Pass a `Ref<number>` if the value is computed asynchronously (e.g. from
+ * a CSS variable set by JavaScript after first render).
+ */
+export function useSticky(elementRef: Ref<HTMLElement | null>, topOffset: MaybeRef<number> = 0) {
+    const isStuck = ref(false);
+    let sentinel: HTMLElement | null = null;
+    let observer: IntersectionObserver | null = null;
+
+    onMounted(() => {
+        const el = elementRef.value;
+        if (!el) {
+            return;
+        }
+
+        const offset = toValue(topOffset);
+
+        sentinel = document.createElement('div');
+        sentinel.style.cssText = 'height:1px;pointer-events:none;';
+        el.parentNode!.insertBefore(sentinel, el);
+
+        observer = new IntersectionObserver(
+            ([entry]) => { isStuck.value = !entry.isIntersecting; },
+            { rootMargin: `-${offset}px 0px 0px 0px` }
+        );
+        observer.observe(sentinel);
+    });
+
+    onBeforeUnmount(() => {
+        observer?.disconnect();
+        sentinel?.remove();
+    });
+
+    return { isStuck };
+}

package/src/components/display/emission/EmissionGroupChooser.vue

@@ -1,23 +1,19 @@
 <template>
-    <ClassicMultiselect
-        id="group-chooser"
-        ref="selectGroup"
+    <OctopusMultiselect
+        :placeholder="placeholder ?? $t('Search - Emission groups placeholder')"
+        :selected="groups"
+        :options="allGroups"
+        :no-border="noBorder"
         option-label="name"
-        :placeholder="$t('Search - Emission groups placeholder')"
-        :max-element="maxElement"
-        width="400px"
-        in-modal
-        :option-chosen="groups"
-        multiple
-        @on-search="onSearch"
-        @selected="emitSelected"
+        option-key="groupId"
+        @update:selected="emitSelected"
     />
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from "vue";
+import { onMounted, ref } from "vue";
 
-import ClassicMultiselect from "../../form/ClassicMultiselect.vue"; 
+import OctopusMultiselect from "../../form/OctopusMultiselect.vue"; 
 import { groupsApi, EmissionGroup } from "../../../api/groupsApi";
 
 //Props 
@@ -26,29 +22,31 @@ const props = defineProps<{
     organisationId?: string|Array<string>;
     /** Currently selected groups */
     groups: Array<EmissionGroup>;
+    /** Change default placeholder */
+    placeholder?: string;
+    /** Disable borders */
+    noBorder?: boolean;
 }>();
 
 //Emits
-const emit = defineEmits(["update:groups"]);
+const emit = defineEmits<{
+    (e: "update:groups", groups: Array<EmissionGroup>): void;
+}>();
 
 //Data
-const maxElement = 50;
-const selectGroupRef = useTemplateRef('selectGroup');
+const maxElement = 200;
+const allGroups = ref<Array<EmissionGroup>>([]);
 
-//Methods
-async function onSearch(query?: string): Promise<void> {
+onMounted(async() => {
     const response = await groupsApi.search({
         first: 0,
         size: maxElement,
-        search: query,
         organisationIds: [props.organisationId].flat(),
     });
 
-    selectGroupRef.value!.afterSearch(
-        response.result.filter(g => g.emissionIds?.length ?? 0 > 0),
-        response.count
-    );
-}
+    // Only groups with emissions are available
+    allGroups.value =  response.result.filter(g => g.emissionIds?.length ?? 0 > 0);
+});
 
 function emitSelected(option: Array<EmissionGroup>) {
     emit("update:groups", option);

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/ClassicButtonGroup.vue

@@ -5,7 +5,7 @@
             :key="option.value"
             type="button"
             class="btn"
-            :class="{ active: modelValue.includes(option.value) }"
+            :class="{ active: value.includes(option.value) }"
             @click="toggle(option.value)"
         >
             {{ option.label }}
@@ -13,28 +13,30 @@
     </div>
 </template>
 
-<script setup lang="ts">
-export interface ButtonGroupOption {
+<script setup lang="ts" generic="T">
+export interface ButtonGroupOption<T> {
     label: string;
-    value: string;
+    value: T;
 }
 
 const props = defineProps<{
-    options: ButtonGroupOption[];
-    modelValue: string[];
+    /** Currently selected values */
+    value: T[];
+    /** Possible values */
+    options: ButtonGroupOption<T>[];
 }>();
 
 const emit = defineEmits<{
-    'update:modelValue': [values: string[]];
+    (e: 'update:value', values: T[]): void;
 }>();
 
-function toggle(value: string): void {
-    const isSelected = props.modelValue.includes(value);
-    if (isSelected && props.modelValue.length <= 1) { return; }
+function toggle(value: T): void {
+    const isSelected = props.value.includes(value);
+    if (isSelected && props.value.length <= 1) { return; }
     const newValues = isSelected
-        ? props.modelValue.filter(v => v !== value)
-        : [...props.modelValue, value];
-    emit('update:modelValue', newValues);
+        ? props.value.filter(v => v !== value)
+        : [...props.value, value];
+    emit('update:value', newValues);
 }
 </script>
 

package/src/components/form/ClassicSelect.vue

@@ -17,7 +17,14 @@
       :required="displayRequired"
       @change="onChange($event.target.value)"
     >
-      <option v-if="placeholder" value="" disabled selected>{{ placeholder }}</option>
+      <option
+        v-if="placeholder"
+        value=""
+        disabled
+        selected
+      >
+        {{ placeholder }}
+      </option>
       <option
         v-for="option in optionsOrder"
         :key="option.title"
@@ -25,7 +32,9 @@
         :data-selenium="'select-option-' + option.value"
         :style="option.fontFamily ? 'font-family:' + option.fontFamily : ''"
       >
-        {{ option.title }}
+        <slot name="option" :option="option">
+          {{ option.title }}
+        </slot>
       </option>
     </select>
   </div>