@saooti/octopus-sdk 41.0.14-SNAPSHOT → 41.0.15

package/src/components/display/rubriques/RubriqueList.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="d-inline-flex w-100 mb-3 px-3 hide-phone">
     <div ref="rubriqueListContainer" class="rubrique-list-container">
+
+      <!-- Liste déroulante pour sélectionner le rubriquage -->
       <select
         v-model="rubriquage"
         :title="t('By topic')"
@@ -15,6 +17,8 @@
           {{ myRubriquage.title }}
         </option>
       </select>
+
+      <!-- Boutons de sélection de la rubrique -->
       <button
         v-for="rubrique in rubriqueDisplay"
         :id="'rubrique' + rubrique.rubriqueId"
@@ -25,6 +29,8 @@
         {{ rubrique.name }}
       </button>
     </div>
+
+    <!-- Bouton pour afficher les rubriques cachées -->
     <button
       v-show="hidenRubriques.length"
       id="rubriques-dropdown"
@@ -33,6 +39,8 @@
     >
       <PlusIcon />
     </button>
+
+    <!-- Popup de sélection des rubriques cachées -->
     <ClassicPopover
       ref="popoverRubrique"
       target="rubriques-dropdown"
@@ -43,6 +51,7 @@
         v-if="hidenRubriques.length"
         class="rubrique-chooser-minwidth"
         :all-rubriques="hidenRubriques"
+        :placeholder="rubriqueChooserText"
         @selected="addFilterFromPopover($event)"
       />
     </ClassicPopover>
@@ -107,6 +116,15 @@ const rubriquageDisplay = computed(() => {
   });
 });
 
+// Retourne le texte à afficher dans le RubriqueChooser
+const rubriqueChooserText = computed(() => {
+  if (!rubriquage.value) {
+    return '';
+  }
+  let topic = rubriquage.value.title;
+  return t('Enter name of topic', { topic });
+});
+
 
 //Watch
 watch(()=>filterStore.filterRubrique, () => {

package/src/components/display/sharing/PlayerParameters.vue

@@ -36,12 +36,6 @@
         </div>
       </div>
       <ChooseEpisodesNumber v-else :episodes-number="episodesNumber" @update-number="emit('update:episodesNumber', $event)"/>
-      <ClassicCheckbox
-        :text-init="proceedReading"
-        id-checkbox="proceed-reading-checkbox"
-        :label="t('Proceed reading')"
-        @update:text-init="emit('update:proceedReading', $event)"
-      />
     </template>
     <ClassicCheckbox
       v-if="displayIsVisible"
@@ -104,7 +98,6 @@ const props = defineProps({
   displayArticleParam: { default: false, type: Boolean },
   displayIsVisible: { default: false, type: Boolean },
   displayInsertCode: { default: false, type: Boolean },
-  proceedReading: { default: true, type: Boolean },
   displayArticle: { default: true, type: Boolean },
   displayTranscript: { default: true, type: Boolean },
   displayWave: { default: true, type: Boolean },
@@ -118,7 +111,6 @@ const props = defineProps({
 //Emits
 const emit = defineEmits([
   "episodeChoiceDisplay",
-  "update:proceedReading",
   "update:isVisible",
   "update:episodesNumber",
   "update:displayArticle",

package/src/components/display/sharing/SharePlayer.vue

@@ -44,7 +44,6 @@
             v-model:display-article="displayArticle"
             v-model:display-transcript="displayTranscript"
             v-model:display-wave="displayWave"
-            v-model:proceed-reading="proceedReading"
             v-model:is-visible="isVisible"
             v-model:player-auto-play="playerAutoPlay"
             v-model:episodes-number="episodesNumber"
@@ -125,7 +124,6 @@ const iFrameModel = ref("default");
 const isShareModal = ref(false);
 const color = ref("#40a372");
 const theme = ref("#000000");
-const proceedReading = ref(true);
 const episodeChoiceDisplay = ref("number");
 const episodesNumber = ref(3);
 const isVisible = ref(false);
@@ -341,9 +339,6 @@ function addUrlParameters(url: Array<string>) {
   url.push(
     `&color=${color.value.substring(1)}&theme=${theme.value.substring(1)}`,
   );
-  if (!proceedReading.value) {
-    url.push("&proceed=false");
-  }
   if (!displayArticle.value && displayArticleParam.value) {
     url.push("&article=false");
   }

package/src/components/display/sharing/SubscribeButtons.vue

@@ -78,7 +78,7 @@ import RssIcon from "vue-material-design-icons/Rss.vue";
 import { useApiStore } from "../../../stores/ApiStore";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
 import { Emission } from "@/stores/class/general/emission";
-import { computed, Ref, ref, useTemplateRef, watch } from "vue";
+import { computed, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
 import { useI18n } from "vue-i18n";
 type Link = {
   name: string;
@@ -204,7 +204,9 @@ const rssUrl = computed(() => {
 
 
 //Watch
-watch(()=>props.windowWidth, () =>resizeWindow(), {immediate: true});
+watch(()=>props.windowWidth, () =>resizeWindow());
+
+onMounted(()=>resizeWindow());
 
 
 //Methods

package/src/components/form/ClassicCheckbox.vue

@@ -2,7 +2,7 @@
   <div class="d-flex flex-nowrap align-items-center octopus-form-item">
     <div :class="isSwitch ? 'octopus-form-switch me-2' : ''">
       <input
-        :id="idCheckbox"
+        :id="computedIdCheckbox"
         :checked="textInit"
         type="checkbox"
         :disabled="isDisabled"
@@ -11,31 +11,40 @@
         :tabindex="isSwitch ? '-1' : '0'"
         @input="emit('update:textInit', !textInit)"
         @click="emitClickAction"
-      />
+      >
       <button
         v-if="isSwitch"
         class="slider btn-transparent"
         :title="label"
+        :disabled="isDisabled"
         @click="clickSlider"
         @keydown.space.prevent="clickSlider"
       />
     </div>
     <label
       class="c-hand"
-      :class="[classLabel, displayLabel ? '' : 'd-none']"
-      :for="idCheckbox"
-      >{{ label }}</label
+      :class="[classLabel, displayLabel ? '' : 'd-none', isDisabled ? 'disabled' : '']"
+      @click="clickSlider"
     >
+      {{ label }}
+    </label>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue';
+
 //Props 
 const props = defineProps({
+  /** The ID for the checkbox input */
   idCheckbox: { default: "", type: String },
+  /** The label to display with the checkbox */
   label: { default: "", type: String },
+  /** Disables input */
   isDisabled: { default: false, type: Boolean },
+  /** The value of the checkbox */
   textInit: { default: false, type: Boolean },
+  /** If true, displays a switch instead of a checkbox */
   isSwitch: { default: false, type: Boolean },
   displayLabel: { default: true, type: Boolean },
   classLabel: { default: "", type: String },
@@ -45,6 +54,11 @@ const props = defineProps({
 //Emits
 const emit = defineEmits(["update:textInit", "clickAction"]);
 
+// Computed
+const computedIdCheckbox = computed(() => {
+  return props.idCheckbox || 'checkbox-' + getCurrentInstance()?.uid;
+});
+
 //Methods
 function emitClickAction(): void {
   emit("clickAction");
@@ -59,6 +73,12 @@ function clickSlider() {
 
 <style lang="scss">
 .octopus-app {
+
+  label.disabled {
+    color: var(--octopus-text-disabled);
+    cursor: default;
+  }
+
   .octopus-form-switch {
     position: relative;
     display: inline-block;
@@ -92,6 +112,11 @@ function clickSlider() {
       border-radius: 50%;
     }
 
+    .slider:disabled::before {
+      background-color: var(--octopus-text-disabled);
+      opacity: 0.6;
+    }
+
     input:checked + .slider {
       background-color: var(--octopus-primary);
     }

package/src/components/form/ClassicInputText.vue

@@ -4,17 +4,24 @@
     :class="{ 'form-margin': displayLabel }"
   >
     <div class="d-flex align-items-center">
-      <slot name="complementLabel"/>
+      <slot name="complementLabel" />
       <component
         :is="isWysiwyg? 'div': 'label'"
         :class="[classLabel, displayLabel ? '' : 'd-none']"
-        :for="isWysiwyg ? '': inputId"
-        >{{ label }}
-        <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
+        :for="isWysiwyg ? '': computedInputId"
+      >
+        {{ label }}
+        <AsteriskIcon
+          v-if="displayRequired"
+          :size="10"
+          class="ms-1 mb-2"
+          :title="t('Mandatory input')"
+        />
       </component>
+      <slot name="afterTitle" />
       <template v-if="popover">
         <button
-          :id="'popover' + inputId"
+          :id="'popover' + computedInputId"
           :title="t('Help')"
           class="btn-transparent"
         >
@@ -22,7 +29,7 @@
         </button>
 
         <ClassicPopover
-          :target="'popover' + inputId"
+          :target="'popover' + computedInputId"
           popover-class="popover-z-index"
           :relative-class="popoverRelativeClass"
         >
@@ -31,11 +38,13 @@
           <!-- eslint-enable -->
         </ClassicPopover>
       </template>
+      <slot name="afterHelp" />
     </div>
+    <slot name="betweenTitleInput" />
     <input
       v-if="!isWysiwyg && !isTextarea"
       v-show="showField"
-      :id="inputId"
+      :id="computedInputId"
       ref="focusElement"
       v-model="textValue"
       :type="typeInput"
@@ -52,11 +61,11 @@
       :disabled="isDisable"
       :required="!canBeNull"
       :autocomplete="autocompleteType"
-    />
+    >
     <textarea
       v-else-if="isTextarea"
       v-show="showField"
-      :id="inputId"
+      :id="computedInputId"
       ref="focusElement"
       v-model="textValue"
       :data-selenium="dataSelenium"
@@ -86,10 +95,16 @@
         :is-top-position="true"
         @emoji-selected="addEmojiSelected"
       />
-      <div v-if="isWysiwyg" class="h6">
+      <div
+        v-if="isWysiwyg"
+        class="h6"
+      >
         {{ t("Characters number calculated over HTML code") }}
       </div>
-      <div v-else-if="'' !== indicText" class="text-indic">
+      <div
+        v-else-if="'' !== indicText"
+        class="text-indic"
+      >
         {{ indicText }}
       </div>
       <div
@@ -110,10 +125,11 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
-import { computed, defineAsyncComponent, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
+import { computed, defineAsyncComponent, onMounted, Ref, ref, useTemplateRef, watch, getCurrentInstance } from "vue";
 import { useI18n } from "vue-i18n";
 const ClassicPopover = defineAsyncComponent(
   () => import("../misc/ClassicPopover.vue"),
@@ -129,6 +145,7 @@ const ClassicEmojiPicker = defineAsyncComponent(
 const props = defineProps({
   inputId: { default: "", type: String },
   label: { default: "", type: String },
+  /** The input's value */
   textInit: { default: undefined, type: String },
   maxLength: { default: 0, type: Number },
   errorText: { default: "", type: String },
@@ -138,6 +155,7 @@ const props = defineProps({
   canBeNull: { default: false, type: Boolean },
   inputMaxLengthField: { default: undefined, type: Number },
   errorVariable: { default: true, type: Boolean },
+  /** Disable the text input */
   isDisable: { default: false, type: Boolean },
   indicText: { default: "", type: String },
   dataSelenium: { default: "", type: String },
@@ -168,6 +186,7 @@ const focusElementRef = useTemplateRef('focusElement');
 const { t } = useI18n();
 
 //Computed
+const computedInputId = computed(() => props.inputId || 'input-' + getCurrentInstance()?.uid);
 const isError = computed(() => !valueTrimValid.value || !valueLengthValid.value || !valueRegexValid.value);
 const countValue = computed(() => {
   if (textValue.value) {
@@ -236,6 +255,7 @@ function addEmojiSelected(emoji: string) {
   textValue.value = (textValue.value ?? "") + emoji;
 }
 </script>
+
 <style lang="scss">
 .octopus-app .classic-input-text {
   .text-indic {

package/src/components/form/ClassicMultiselect.vue

@@ -7,11 +7,31 @@
     }"
     :style="{ width: width, height: height }"
   >
-    <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')"/>
-  </label>
+    <div class="d-flex align-items-center">
+      <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')"/>
+      </label>
+      <template v-if="popover">
+        <button
+          :id="'popover' + id"
+          :title="t('Help')"
+          class="btn-transparent"
+        >
+          <HelpCircleIcon :size="30" />
+        </button>
+        <ClassicPopover
+          :target="'popover' + id"
+          popover-class="popover-z-index"
+          :relative-class="popoverRelativeClass"
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="popover" />
+          <!-- eslint-enable -->
+        </ClassicPopover>
+      </template>
+    </div>
     <vSelect
       v-model="optionSelected"
       :input-id="id"
@@ -77,12 +97,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, Ref, watch } from "vue";
+import { computed, defineAsyncComponent, ref, Ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
 import vSelect from "vue-select";
-
+import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
+const ClassicPopover = defineAsyncComponent(
+  () => import("../misc/ClassicPopover.vue"),
+);
 
 //Props 
 const props = defineProps({
@@ -106,6 +129,8 @@ const props = defineProps({
   allowEmpty: { default: true, type: Boolean },
   textDanger :{ default: undefined, type: String },
   displayRequired: { default: false, type: Boolean },
+  popover: { default: undefined, type: String },
+  popoverRelativeClass: { default: undefined, type: String },
 })
 
 //Emits
@@ -214,6 +239,9 @@ defineExpose({
     height: 100%;
   }
 
+  .vs__search, .vs__search:focus{
+    border: var(--vs-selected-border-width) solid transparent;
+  }
   .vs__search:focus {
     min-width: 150px;
   }

package/src/components/misc/ClassicAccordion.vue

@@ -20,11 +20,11 @@
           class="img-accordion"
           :src="imageUrl"
           aria-hidden="true"
-        alt=""
-          
+          alt=""
         />
-        <span class="flex-grow-1">{{ title }}</span>
-        <ChevronDownIcon :class="{ 'arrow-transform': isOpen }" />
+        <span>{{ title }}</span>
+        <slot name="afterTitle"/>
+        <ChevronDownIcon class="ms-auto" :class="{ 'arrow-transform': isOpen }" />
       </button>
       <div v-show="isOpen" class="body p-2">
         <slot />

package/src/components/misc/ClassicHelpButton.vue

@@ -0,0 +1,44 @@
+<!--
+  A simple component to display a help button that shows its message when
+  hovered.
+
+  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"
+    >
+      <div class="reset">
+        <slot />
+      </div>
+    </ClassicPopover>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue';
+
+import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
+import ClassicPopover from './ClassicPopover.vue';
+
+/** The internal ID for the elements */
+const computedId = computed(() => {
+  return 'popover-' + getCurrentInstance()?.uid;
+});
+</script>
+
+<style lang="scss" scoped>
+.reset {
+  font: revert;
+}
+</style>

package/src/components/misc/ClassicLazy.vue

@@ -4,9 +4,10 @@
     <slot v-else name="preview" />
   </div>
 </template>
+
 <script setup lang="ts">
 import { useIntersectionObserver } from "@vueuse/core";
-import { ref, nextTick, watch } from "vue";
+import { ref, nextTick, watch, onMounted } from "vue";
 
 //Props
 const props = defineProps({
@@ -37,8 +38,8 @@ const { pause, resume } = useIntersectionObserver(
     if (isIntersecting) {
       // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the unrendering timer
       clearTimeout(unrenderTimer);
-      // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast
 
+      // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast
       renderTimer = setTimeout(
         () => {
           shouldRender.value = true;
@@ -46,6 +47,7 @@ const { pause, resume } = useIntersectionObserver(
         },
         props.unrender ? 200 : 0,
       );
+
       if (!props.unrender) {
         pause();
       }
@@ -64,18 +66,27 @@ const { pause, resume } = useIntersectionObserver(
 );
 
 //Logic
-setTimeout(() => {
-  waitBeforeInit.value = false;
-}, props.initRenderDelay);
-if (props.renderOnIdle) {
-  onIdle(() => {
-    shouldRender.value = true;
-    emit("isRender", true);
-    if (!props.unrender) {
-      pause();
-    }
-  });
-}
+onMounted(() => {
+  if (props.initRenderDelay <= 0) {
+    // If there's no render delay, do not delay initialization
+    waitBeforeInit.value = false;
+  } else {
+    // Otherwise delay initialization
+    setTimeout(() => {
+      waitBeforeInit.value = false;
+    }, props.initRenderDelay);
+  }
+
+  if (props.renderOnIdle) {
+    onIdle(() => {
+      shouldRender.value = true;
+      emit("isRender", true);
+      if (!props.unrender) {
+        pause();
+      }
+    });
+  }
+});
 
 //Watch
 watch(

package/src/components/misc/ClassicNav.vue

@@ -1,3 +1,6 @@
+<!--
+  Component to make a tab-based navigation
+-->
 <template>
   <ul class="octopus-nav" :class="light ? 'light' : ''">
     <li

package/src/components/misc/ClassicSpinner.vue

@@ -16,7 +16,7 @@ defineProps({
   --size-spinner: 3rem;
   --size-spinner-section: calc(var(--size-spinner) / 20);
   --half-size-spinner: calc(var(--size-spinner) / 2);
-
+  
   color: #000000;
   display: inline-block;
   position: relative;

package/src/components/misc/FooterSection.vue

@@ -5,11 +5,17 @@
     role="contentinfo"
     class="d-flex align-items-center justify-content-between border-top mt-auto"
   >
-    <div v-if="!state.generalParameters.podcastmaker" class="d-flex flex-column px-1">
+    <div
+      v-if="!state.generalParameters.podcastmaker"
+      class="d-flex flex-column px-1"
+    >
       <div class="text-dark my-1 special-select-align-magic-trick">
         &copy; Saooti 2025
       </div>
-      <FooterGarSection v-if="authStore.isGarRole" :auth-orga-id="authStore.authOrgaId" />
+      <FooterGarSection
+        v-if="authStore.isGarRole"
+        :auth-orga-id="authStore.authOrgaId"
+      />
       <nav :aria-label="t('Site menu')">
         <ul class="p-0 m-0">
           <li 
@@ -43,13 +49,11 @@
         class="my-1"
       />
       <OrganisationChooserLight
-        v-if="!state.generalParameters.podcastmaker && organisationId && authenticated"
+        v-if="!state.generalParameters.podcastmaker && authenticated"
         page="footer"
         width="auto"
         class="my-1"
         :defaultanswer="t('No organisation filter')"
-        :value="organisationId"
-        :reset="reset"
         @selected="onOrganisationSelected"
       />
     </div>
@@ -83,7 +87,7 @@ import { useFilterStore } from "../../stores/FilterStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { useAuthStore } from "../../stores/AuthStore";
 import { Category } from "@/stores/class/general/category";
-import { computed, defineAsyncComponent, Ref, ref, watch } from "vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
 import { Organisation } from "@/stores/class/general/organisation";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
@@ -98,8 +102,6 @@ const { t, locale } = useI18n();
 
 //Data 
 const language = ref(locale);
-const reset = ref(false);
-const organisationId: Ref<string | undefined> = ref(undefined);
 
 //Composables
 const generalStore = useGeneralStore();
@@ -127,15 +129,6 @@ const routerLinkSecondArray = computed(() => {
 
 //Watch
 watch(language, () => changeLanguage());
-watch(()=>filterStore.filterOrgaId, () => {
-  if (filterStore.filterOrgaId) {
-    organisationId.value = filterStore.filterOrgaId;
-  } else {
-    reset.value = !reset.value;
-  }
-}, {immediate: true});
-
-
 
 //Methods
 function changeLanguage(): void {
@@ -164,15 +157,19 @@ function changeLanguage(): void {
     }
   });
 }
+
+/**
+ * Select another organisation
+ * @param organisation The new organisation to focus on, or undefined to remove focus
+ */
 async function onOrganisationSelected( organisation: Organisation | undefined): Promise<void> {
   if (organisation?.id) {
     router.push({
-      query: { ...route.query, ...{ productor: organisation.id, o:undefined } },
+      query: { ...route.query, ...{ productor: organisation.id, o:undefined, viewall: "false" } },
     });
   }else{
-    organisationId.value = undefined;
     router.push({
-      query: { ...route.query, ...{ productor: undefined } },
+      query: { ...route.query, ...{ productor: undefined, viewall: "true" } },
     });
   }
 }