@saooti/octopus-sdk 41.0.15 → 41.0.17

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# CHANGELOG
+
+## 41.0.17 (07/11/2025)
+
+**Features**
+
+- Ajout options de configuration sur `ClassicHelpButton`
+
+**Fixes**
+
+- Correction anomalie fermeture `ClassicPopover`
+
+**Misc**
+
+- Ajout du `CHANGELOG`
+- Ajustements configuration typescript pour analyse de code
+- Nouvelles règles eslint
+
+## 41.0.16 (04/11/2025)
+
+- Bannière 'en cours de traitement' ne s'affiche plus dans les listes
+- Ajustements sur `ClassicSelect` & `ClassicHelpButton`
+- Ajout de ClassicAlert, pour l'affichage de message

package/eslint.config.mjs

@@ -23,9 +23,21 @@ export default typescriptEslint.config(
     rules: {
       // your rules
       "curly": ['error'],
+
+      // Please don't use console statements and duplicated imports, TODOs are marked
       "no-console": ['warn', { allow: ['warn', 'error'] }],
       "no-warning-comments": ['warn'],
-      "no-duplicate-imports": ['warn']
+      "no-duplicate-imports": ['warn'],
+
+      // Prevent errors when testing on refs (instead of value of ref)
+      "vue/no-ref-as-operand": ['error'],
+
+      // Indentation
+      "vue/html-indent": ['warn', 4],
+      "vue/script-indent": ['warn', 4],
+
+      // Number of attributes per line (increase because sometimes two is not a lot)
+      "vue/max-attributes-per-line": ['warn', { singleline: 2 } ]
     },
   }
 );

package/index.ts

@@ -39,6 +39,7 @@ export const getClassicLazy = () => import("./src/components/misc/ClassicLazy.vu
 export const getContractPreviewModal = () => import("./src/components/misc/modal/ContractPreviewModal.vue");
 export const getClassicModalInBody = () => import("./src/components/misc/modal/ClassicModalInBody.vue");
 export const getClassicHelpButton = () => import("./src/components/misc/ClassicHelpButton.vue");
+export const getClassicAlert = () => import("./src/components/misc/ClassicAlert.vue");
 
 
 //Display
@@ -152,6 +153,9 @@ export const getXIcon = () => import("./src/components/icons/XIcon.vue");
 // Routing
 import { setupRouter } from './src/router/utils';
 
+// Types
+import { type SelectOption } from "./src/components/form/ClassicSelect.vue";
+
 export {
     useResizePhone,
     useTagOf,
@@ -183,5 +187,6 @@ export {
     deepEqual,
     downloadHelper,
     displayHelper,
-    setupRouter
+    setupRouter,
+    SelectOption,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.0.15",
+  "version": "41.0.17",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/composable/route/useRouteUpdateParams.ts

@@ -1,5 +1,10 @@
 import { useRoute, useRouter } from 'vue-router';
-export const useRouteUpdateParams = ()=>{
+
+interface RouteParams {
+  productor: string;
+}
+
+export const useRouteUpdateParams = () => {
 
   const router  = useRouter();
   const route  = useRoute();
@@ -38,11 +43,18 @@ export const useRouteUpdateParams = ()=>{
     }
   }
 
+  /*
+  function updateRouteParams(params: Partial<RouteParams>) {
+    router.push({ query: {
+      ...route.query,
+      ...params
+    }});
+  }*/
 
-	return {
+  return {
     updatePaginateSize,
     updateRouteParam,
     updateRouteParamAdvanced,
     updateFiltersParam
-	}
+  }
 }

package/src/components/display/playlist/PodcastList.vue

@@ -1,8 +1,13 @@
+<!--
+  Component displaying a list of podcasts IN A PLAYLIST
+  Do not confuse this with PodcastList from podcasts
+-->
 <template>
   <div>
     <h3 class="mb-3 align-self-baseline">
       {{ titleList }}
     </h3>
+
     <ClassicSearch
       v-if="!loading && notEmptyPlaylist"
       v-model:text-init="searchPattern"
@@ -10,6 +15,7 @@
       id-search="podcast-list-search"
       :label="t('Search')"
     />
+
     <ListPaginate
       id="podcastPlaylistListPaginate"
       v-model:first="dfirst"
@@ -38,7 +44,12 @@
             :key="p.podcastId"
             :min-height="410"
           >
-            <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
+            <PodcastItem
+              v-if="0 !== p.podcastId"
+              :podcast="p"
+              :in-list="true"
+            />
+
             <template #preview>
               <router-link
                 :to="{

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

@@ -1,3 +1,8 @@
+<!--
+  Component to display the image of a podcast.
+  May also display additional information, for example when an error occured
+  when processing the file (using PodcastPlayButton).
+-->
 <template>
   <div
     v-if="podcast"
@@ -16,10 +21,9 @@
         height="270"
         aria-hidden="true"
         alt=""
-        
         class="img-box img-box-podcast"
         :title="t('Episode name image', { name: podcast.title })"
-      />
+      >
     </router-link>
     <div
       v-if="state.generalParameters.podcastmaker"
@@ -43,6 +47,7 @@
       :podcast="podcast"
       :hide-play="hidePlay"
       :fetch-conference="fetchConference"
+      :in-list="inList"
     />
     <button
       v-if="displayDescription && isMobile"
@@ -73,6 +78,8 @@ const props = defineProps({
   arrowDirection: { default: "up", type: String },
   isAnimatorLive: { default: false, type: Boolean },
   fetchConference: { default: undefined, type: Object as () => Conference },
+  /** Indicates that the podcast is displayed in a list */
+  inList: { default: false, type: Boolean }
 })
 
 //Emits
@@ -104,23 +111,37 @@ const isRecordedInLive = computed(() => {
   );
 });
 const statusText = computed(() => {
-  if (!props.fetchConference) return "";
+  if (!props.fetchConference) {
+    return "";
+  }
+
   switch (props.fetchConference.status) {
     case "PLANNED":
       return t("live in few time");
+
     case "PENDING":
-      if (props.isAnimatorLive) return t("Open studio");
-      return t("live upcoming");
+      if (props.isAnimatorLive) {
+        return t("Open studio");
+      } else {
+        return t("live upcoming");
+      }
+
     case "RECORDING":
       return t("In live");
+
     case "DEBRIEFING":
-      if ("READY_TO_RECORD" === props.podcast.processingStatus)
+      if ("READY_TO_RECORD" === props.podcast.processingStatus) {
         return t("Not recording");
-      return t("Debriefing");
+      } else {
+        return t("Debriefing");
+      }
+
     case "ERROR":
       return t("In error");
+
     case "PUBLISHING":
       return t("Publishing");
+
     default:
       return "";
   }

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

@@ -10,6 +10,7 @@
       :display-description="0 !== description.length"
       :arrow-direction="arrowDirection"
       :fetch-conference="fetchConference"
+      :in-list="inList"
       @hide-description="hideDescription"
       @show-description="showDescription"
     />
@@ -50,7 +51,9 @@ import { Conference } from "@/stores/class/conference/conference";
 const props = defineProps({
   podcast: { default: () => ({}), type: Object as () => Podcast },
   fetchConference: { default: undefined, type: Object as () => Conference },
-})
+  /** Indicates that the podcast is displayed in a list */
+  inList: { default: false, type: Boolean }
+});
 
 //Data 
 const isMobile = ref(false);

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

@@ -1,3 +1,7 @@
+<!--
+  Component displaying a list of podcast
+  DO NOT confuse this with PodcastList from playlist
+-->
 <template>
   <ListPaginate
     id="podcastListPaginate"
@@ -28,7 +32,11 @@
           :key="p.podcastId"
           :min-height="410"
         >
-          <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
+          <PodcastItem
+            v-if="0 !== p.podcastId"
+            :podcast="p"
+            in-list
+          />
           <template #preview>
             <router-link
               :to="{

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

@@ -1,9 +1,23 @@
+<!--
+  Component displaying the play button on a podcast.
+  If the podcast is not available, an overlay is displayed with a message.
+-->
 <template>
-  <div v-if="!hidePlay || recordingLive" :class="classicPodcastPlay ? '' : 'img-blur-background'">
-    <div v-if="!classicPodcastPlay" class="live-image-status bg-dark">
+  <div
+    v-if="!hidePlay || recordingLive"
+    :class="{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }"
+  >
+    <div
+      v-if="displayBanner"
+      class="live-image-status bg-dark"
+    >
       {{ textVisible }}
     </div>
-    <div class="multi-buttons-play" :class="justButtons ? 'play-button-relative' : ''">
+
+    <div
+      class="multi-buttons-play"
+      :class="justButtons ? 'play-button-relative' : ''"
+    >
       <template v-if="!isLiveToBeRecorded">
         <button 
           class="d-flex"
@@ -16,8 +30,14 @@
             v-if="!playingPodcast || (playingPodcast && playerStore.playerVideo)"
             :size="'audio' === hoverType ? 50 : 40"
           />
-          <PodcastIsPlaying v-if="playingPodcast && !playerStore.playerVideo"/>
-          <time v-if="!isVideoPodcast" class="ms-1" :datetime="durationIso">{{ durationString }}</time>
+          <PodcastIsPlaying v-if="playingPodcast && !playerStore.playerVideo" />
+          <time
+            v-if="!isVideoPodcast"
+            class="ms-1"
+            :datetime="durationIso"
+          >
+            {{ durationString }}
+          </time>
         </button>
         <button 
           v-if="isVideoPodcast"
@@ -27,15 +47,35 @@
           @mouseenter="hoverType = 'video'"
           @mouseleave="hoverType = ''"
         >
-          <PlayVideoIcon v-if="!playerStore.playerVideo" :size="'video' === hoverType ? 50 : 40" />
-          <PodcastIsPlaying v-if="playingPodcast && playerStore.playerVideo"/>
-          <time class="ms-2" :datetime="durationIso">{{ durationString }}</time>
+          <PlayVideoIcon
+            v-if="!playerStore.playerVideo"
+            :size="'video' === hoverType ? 50 : 40"
+          />
+          <PodcastIsPlaying v-if="playingPodcast && playerStore.playerVideo" />
+          <time
+            class="ms-2"
+            :datetime="durationIso"
+          >
+            {{ durationString }}
+          </time>
         </button>
-        <div v-if="!classicPodcastPlay" class="special-icon-play-button">
-          <component :is="iconName" :size="16" />
+
+        <div
+          v-if="displayBanner"
+          class="special-icon-play-button"
+        >
+          <component
+            :is="iconName"
+            :size="16"
+          />
         </div>
       </template>
-      <component :is="iconName" v-else :size="50" :title="textVisible" />
+      <component
+        :is="iconName"
+        v-else
+        :size="50"
+        :title="textVisible"
+      />
     </div>
   </div>
 </template>
@@ -70,6 +110,8 @@ const props = defineProps({
   hidePlay: { default: false, type: Boolean },
   fetchConference: { default: undefined, type: Object as () => Conference },
   justButtons: { default: false, type: Boolean },
+  /** Indicates that the podcast is displayed in a list */
+  inList: { default: false, type: Boolean }
 })
 
 
@@ -119,42 +161,65 @@ const isLiveValidAndVisible = computed(() => {
     props.podcast.availability.visibility
   );
 });
+
+/** Whether the podcast can be played */
 const classicPodcastPlay = computed(() => {
   return (
     isLiveValidAndVisible.value &&
     !isLiveToBeRecorded.value &&
     ("READY_TO_RECORD" === props.podcast.processingStatus ||
       "READY" === props.podcast.processingStatus ||
-      ("PROCESSING" === props.podcast.processingStatus &&
-        undefined === authStore.authOrgaId))
+      "PROCESSING" === props.podcast.processingStatus)
   );
 });
+
+const displayBanner = computed(() => {
+  return !classicPodcastPlay.value || ("PROCESSING" === props.podcast.processingStatus && !props.inList);
+});
+
 const iconName = computed(() => {
-  if (isLiveToBeRecorded.value) return ClockOutlineIcon;
+  if (isLiveToBeRecorded.value) {
+    return ClockOutlineIcon;
+  }
+
   if ("READY" === props.podcast.processingStatus || props.fetchConference) {
-    if (!props.podcast.valid) return CheckIcon;
+    if (!props.podcast.valid) {
+      return CheckIcon;
+    }
+
     if (
       !props.podcast.availability.visibility &&
       props.podcast.availability.date
-    )
+    ) {
       return ClockOutlineIcon;
+    }
+
     return EyeOffOutlineIcon;
   }
+
   if (
     "PLANNED" === props.podcast.processingStatus ||
     "PROCESSING" === props.podcast.processingStatus
-  )
+  ) {
     return TimerSandEmptyIcon;
-  if ("CANCELED" === props.podcast.processingStatus) return CancelIcon;
+  }
+
+  if ("CANCELED" === props.podcast.processingStatus) {
+    return CancelIcon;
+  }
   return AlertIcon;
 });
+
+/** The text to display when the podcast is not ready */
 const textVisible = computed(() => {
   if (isLiveToBeRecorded.value){
     return t("Podcast linked to waiting live");
   }
     
   if ("READY" === props.podcast.processingStatus || props.fetchConference) {
-    if (!props.podcast.valid) return t("Podcast to validate");
+    if (!props.podcast.valid) {
+      return t("Podcast to validate");
+    }
     if (
       !props.podcast.availability.visibility &&
       props.podcast.availability.date
@@ -174,6 +239,7 @@ const textVisible = computed(() => {
   }
   return t("Podcast in error");
 });
+
 const recordingLive = computed(() => {
   return (
     undefined !== props.fetchConference &&
@@ -188,7 +254,9 @@ const durationString = computed(() => {
   );
 });
 const durationIso = computed(() => {
-  if (!props.podcast || props.podcast.duration <= 1) return "";
+  if (!props.podcast || props.podcast.duration <= 1) {
+    return "";
+  }
   return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();
 });
 
@@ -230,6 +298,10 @@ function play(isVideo: boolean): void {
     background-color:var(--octopus-background-transparent);
     // Allow pointer events to go through (allow click on image beneath blur)
     pointer-events: none;
+
+    &.allow-play {
+      pointer-events: all;
+    }
   }
 
   .live-image-status {

package/src/components/form/ClassicSelect.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="classic-select" :class="{ 'form-margin': displayLabel }">
-    <label v-show="displayLabel" :for="idSelect" :class="classLabel">{{
-      label
-    }}
-    <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/></label>
+    <label v-show="displayLabel" :for="idSelect" :class="classLabel">
+      {{ label }}
+      <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
+      <slot name="after-label" />
+    </label>
+
     <select
       :id="idSelect"
       :value="textInit"
@@ -28,37 +30,36 @@
     </select>
   </div>
 </template>
+
 <script setup lang="ts">
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 
+export interface SelectOption<T = number|string|undefined> {
+  title: string;
+  value: T;
+  fontFamily?: string;
+}
+
 //Props 
 const props = defineProps({
   idSelect: { default: "", type: String },
-    label: { default: "", type: String },
-    displayLabel: { default: true, type: Boolean },
-    transparent: { default: false, type: Boolean },
-    isDisabled: { default: false, type: Boolean },
-    options: {
-      default: () => [],
-      type: Array as () => Array<{
-        title: string;
-        value: number | string | undefined;
-        fontFamily?: string;
-      }>,
-    },
-    topOption: { default: undefined,type: Object as () => {
-      title: string;
-      value: number | string | undefined;
-      fontFamily?: string;
-    },
-    },
-    textInit: { default: undefined, type: [String, Number] },
-    classLabel: { default: "form-label", type: String },
-    orderOptions: { default: true, type: Boolean},
-    placeholder: { default: undefined, type: String},
-    displayRequired: { default: false, type: Boolean },
+  label: { default: "", type: String },
+  displayLabel: { default: true, type: Boolean },
+  transparent: { default: false, type: Boolean },
+  isDisabled: { default: false, type: Boolean },
+  options: {
+    default: () => [],
+    type: Array as () => Array<SelectOption>,
+  },
+  topOption: { default: undefined,type: Object as () => SelectOption,
+  },
+  textInit: { default: undefined, type: [String, Number] },
+  classLabel: { default: "form-label", type: String },
+  orderOptions: { default: true, type: Boolean},
+  placeholder: { default: undefined, type: String},
+  displayRequired: { default: false, type: Boolean },
 })
 
 
@@ -100,9 +101,8 @@ function onChange(value:string){
   emit('update:textInit', value)
 }
 </script>
-<style lang="scss">
-
 
+<style lang="scss">
 .octopus-app {
   select option:is(:checked, :hover){
     box-shadow: 0 0 10px 100px var(--octopus-secondary) inset;

package/src/components/misc/ClassicAccordion.vue

@@ -21,7 +21,7 @@
           :src="imageUrl"
           aria-hidden="true"
           alt=""
-        />
+        >
         <span>{{ title }}</span>
         <slot name="afterTitle"/>
         <ChevronDownIcon class="ms-auto" :class="{ 'arrow-transform': isOpen }" />
@@ -58,7 +58,7 @@ const emit = defineEmits(["open"]);
 const isOpen = ref(false);
 
 //Watch
-watch(isOpen, () => emit("open"));
+watch(isOpen, () => emit("open", isOpen.value));
 
 onMounted(()=>{
   isOpen.value = props.initOpen;

package/src/components/misc/ClassicAlert.vue

@@ -0,0 +1,98 @@
+<!--
+    Simple component to display a message to the user.
+    Usage:
+        <ClassicAlert type='info'>This is an information</ClassicAlert>
+        <ClassicAlert type='success'>Your changes have been saved</ClassicAlert>
+        <ClassicAlert type='warning'>Some data will be lost</ClassicAlert>
+        <ClassicAlert type='error'>An error occured while saving</ClassicAlert>
+-->
+<template>
+    <div
+        class="p-2 pe-4 my-2 rounded d-flex alert"
+        :class="cardClass"
+    >
+        <!-- The icon -->
+        <component
+            :is="iconComponent"
+            v-if="!noIcon"
+            class="icon"
+            :size="30"
+        />
+
+        <!-- Main content -->
+        <span class="ms-2">
+            <strong v-if="title">
+                {{ title }}
+                <br>
+            </strong>
+
+            <slot />
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import Alert from 'vue-material-design-icons/Alert.vue';
+import CheckCircle from 'vue-material-design-icons/CheckCircle.vue';
+import CloseCircle from 'vue-material-design-icons/CloseCircle.vue';
+import Information from 'vue-material-design-icons/Information.vue';
+
+const { type } = defineProps<{
+    /** Disables the icon when true */
+    noIcon?: boolean;
+    /** An optional title for the alert */
+    title?: string;
+    /** The type of message */
+    type: 'info'|'success'|'warning'|'error';
+}>();
+
+/** The class applied to the alert */
+const cardClass = computed(() => {
+    return 'alert-' + type;
+});
+
+const iconComponent = computed(() => {
+    if (type === 'info') {
+        return Information;
+    } else if (type === 'success') {
+        return CheckCircle;
+    } else if (type === 'warning') {
+        return Alert;
+    } else if (type === 'error') {
+        return CloseCircle;
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+.alert {
+    //color: white;
+    border: 1px solid;
+    border-left: 8px solid;
+
+    .icon {
+        align-items: start !important;
+    }
+
+    $types: (
+        'success': hsl(from var(--octopus-primary) h s 45),
+        'info': var(--octopus-primary),
+        'warning': var(--octopus-warning),
+        'error': var(--octopus-danger),
+    );
+
+    &.alert {
+        @each $type, $color in $types {
+            &-#{$type} {
+                background-color: hsl(from #{$color} h s 95) !important;
+                border-color: #{$color} !important;
+                .icon {
+                    color: #{$color};
+                }
+            }
+        }
+    }
+}
+</style>

package/src/components/misc/ClassicHelpButton.vue

@@ -1,28 +1,28 @@
 <!--
-  A simple component to display a help button that shows its message when
-  hovered.
+    A simple component to display a help button that shows its message when
+    hovered.
 
-  Usage: 
-    <ClassicHelpButton>This is my help message</ClassicHelpButton>
+    Usage: 
+        <ClassicHelpButton>This is my help message</ClassicHelpButton>
 -->
 <template>
-  <button
-    :id="computedId"
-    class="btn-transparent"
-  >
-    <!-- Button icon -->
-    <HelpCircleIcon :size="30" />
-
-    <!-- Tooltip -->
-    <ClassicPopover
-      :target="computedId"
-      popover-class="popover-z-index"
+    <button
+        :id="computedId"
+        class="btn-transparent"
     >
-      <div class="reset">
-        <slot />
-      </div>
-    </ClassicPopover>
-  </button>
+        <!-- Button icon -->
+        <HelpCircleIcon :fill-color="color" :size="iconSize" />
+
+        <!-- Tooltip -->
+        <ClassicPopover
+            :target="computedId"
+            popover-class="help-popover"
+        >
+            <div class="content">
+                <slot />
+            </div>
+        </ClassicPopover>
+    </button>
 </template>
 
 <script setup lang="ts">
@@ -31,14 +31,44 @@ import { computed, getCurrentInstance } from 'vue';
 import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
 import ClassicPopover from './ClassicPopover.vue';
 
+const { colored, small } = defineProps<{
+    colored?: boolean;
+    /** Make the icon smaller if true *(default: false)* */
+    small?: boolean;
+}>();
+
+/** The color to use for the icon */
+const color = computed(() => {
+    if (colored) {
+        return "var(--octopus-primary-darker)";
+    } else {
+        return "black";
+    }
+});
+
 /** The internal ID for the elements */
 const computedId = computed(() => {
-  return 'popover-' + getCurrentInstance()?.uid;
+    return 'popover-' + getCurrentInstance()?.uid;
+});
+
+/** The size of the icon, according to the props */
+const iconSize = computed(() => {
+    if (small) {
+        return 24;
+    } else {
+        return 30;
+    }
 });
 </script>
 
 <style lang="scss" scoped>
-.reset {
-  font: revert;
+.content {
+    font: revert;
+    font-size: 18px !important;
+    text-align: start;
+}
+
+.help-popover {
+    background-color: var(--octopus-secondary-lighter);
 }
 </style>

package/src/components/misc/ClassicPopover.vue

@@ -12,7 +12,6 @@
       isFixed && isTopLayerPopover ? 'position-fixed':'position-absolute',
       popoverClass]"
     :style="positionInlineStyle"
-    @focusout="clearDataBlur"
     @mouseenter="overPopover = true"
     @mouseleave="
       overPopover = false;
@@ -139,8 +138,8 @@ function removeListeners() {
     targetElement.value.removeEventListener("focusout", clearDataBlur);
   }
 }
-function handleClickEvent(){
-  if (show.value && isClick.value) {
+function handleClickEvent(e: MouseEvent | PointerEvent){
+  if (show.value && isClick.value && e.target !== popoverRef.value && !popoverRef.value?.contains(e.target)) {
     isClick.value = false;
     clearData();
     return -1;
@@ -180,7 +179,7 @@ function setPopoverData(e: MouseEvent | PointerEvent) {
   if (props.disable || !e || !e.target) {
     return;
   }
-  if ("click" === e.type && -1 === handleClickEvent()) {
+  if ("click" === e.type && -1 === handleClickEvent(e)) {
     return;
   }
   show.value = true;
@@ -235,6 +234,7 @@ function setPopoverData(e: MouseEvent | PointerEvent) {
     maxHeight.value = '80dvh';
   }
 }
+
 function clearDataBlur(e: FocusEvent) {
   if (isTabAction.value) {
     isTabAction.value = false;
@@ -245,14 +245,18 @@ function clearDataBlur(e: FocusEvent) {
   if (-1!==result) {
     return;
   }
+
+  const parent = popoverRef?.value as HTMLElement;
   if (!e.relatedTarget) {
+    if (parent !== null && parent.contains(e.target)) {
+      return;
+    }
     return clearClick();
   }
   const myElement = e.relatedTarget as HTMLElement;
   if (popoverId.value === myElement.id) {
     return;
   }
-  const parent =popoverRef?.value as HTMLElement;
   if (null === parent || !parent.contains(myElement)) {
     return clearClick();
   }
@@ -301,9 +305,8 @@ defineExpose({
   clearClick
 });
 </script>
-<style lang="scss">
-
 
+<style lang="scss">
 .octopus-popover {
   background: var(--octopus-background);
   border-radius: var(--octopus-border-radius);

package/src/components/pages/PodcastPage.vue

@@ -27,6 +27,8 @@
           :organisation-id="authOrgaId"
         />
         <CommentSection :podcast="podcast" />
+
+        <!-- Suggestions -->
         <PodcastInlineList
           :emission-id="podcast.emission.emissionId"
           :href="'/main/pub/emission/' + podcast.emission.emissionId"
@@ -39,6 +41,7 @@
             <PodcastInlineList
               class="mt-4"
               title-tag="h3"
+              :organisation-id="[podcast.organisation.id]"
               :podcast-id="podcastId"
               :title="t('Suggested listening')"
             />
@@ -51,6 +54,7 @@
               :href="'/main/pub/category/' + c.id"
               :title="t('More episodes of this category : ', { name: c.name })"
               :button-text="t('All podcast button', { name: c.name })"
+              :organisation-id="[podcast.organisation.id]"
             />
           </ClassicLazy>
         </section>

package/tsconfig.json

@@ -1,47 +1,43 @@
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "types": [
-      "webpack-env", "sockjs-client"
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "esnext",
+        // "strict": true,
+        "jsx": "preserve",
+        "importHelpers": true,
+        "moduleResolution": "node",
+        "experimentalDecorators": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "sourceMap": true,
+        "baseUrl": ".",
+        "types": [
+            "webpack-env", "sockjs-client"
+        ],
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        },
+        "lib": [
+            "esnext",
+            "dom",
+            "dom.iterable",
+            "scripthost"
+        ]
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue",
+        "tests/**/*.ts",
+        "tests/**/*.tsx"
     ],
-    "typeRoots": [
-      "./typings",
-      "./node_modules/@types/"
+    "exclude": [
+        "node_modules"
     ],
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
+    "files": [
+        "src/shims-vue.d.ts"
     ]
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
-  "files": [
-    "src/shims-vue.d.ts"
-  ]
 }

package/typings/index.d.ts

@@ -1 +0,0 @@
-declare module 'sockjs-client/dist/sockjs';