@saooti/octopus-sdk 33.2.12 → 33.2.14

package/package.json

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

package/src/assets/form.scss

@@ -11,6 +11,11 @@
 		height: 2rem;
 		padding-right: 40px;
 	}
+	input[type="checkbox"] {
+		accent-color: $octopus-primary-color;
+		cursor: pointer;
+		margin-right: 5px;
+	}
 	.form-input {
 		appearance: none;
 		background: #fff;

package/src/components/display/list/Paginate.vue

@@ -7,9 +7,9 @@
       <label for="rows-per-page-select">{{ $t('Items per page :') }}</label>
       <select
         id="rows-per-page-select"
-        :model-value="rowsPerPage"
+        :value="rowsPerPage"
         class="c-hand p-1 mx-2"
-        @update:modelValue="$emit('update:rowsPerPage',$event)"
+        @input="$emit('update:rowsPerPage',$event.target.value)"
       >
         <option
           v-for="option in optionsRowsPerPage"

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

@@ -38,21 +38,37 @@
       @click="play"
     >
       <div
-        :title="!playingPodcast? $t('Play') : textVisible"
+        v-if="!isLiveToBeRecorded"
         class="icon-container"
-        :class="{
-          'saooti-play text-primary': !playingPodcast,
-          'special-icon-play-button': !classicPodcastPlay,
-          iconName:!classicPodcastPlay || isLiveToBeRecorded,
-          'bloc-paddle':playingPodcast,
-          'error-icon':isLiveToBeRecorded
-        }"
       >
-        <template v-if="playingPodcast">
+        <div
+          v-if="!playingPodcast"
+          :title="$t('Play')"
+          class="saooti-play text-primary"
+        />
+        <div
+          v-if="!classicPodcastPlay"
+          class="special-icon-play-button"
+          :class="iconName"
+        />
+        <div
+          v-if="playingPodcast"
+          class="bloc-paddle"
+        >
           <span class="paddle1" />
           <span class="paddle2" />
           <span class="paddle3" />
-        </template>
+        </div>
+      </div>
+      <div
+        v-else
+        class="icon-container error-icon"
+      >
+        <div
+          :title="textVisible"
+          class="big-icon-error"
+          :class="iconName"
+        />
       </div>
       <div
         v-if="!classicPodcastPlay"
@@ -293,20 +309,6 @@ export default defineComponent({
     cursor: pointer;
     z-index: 3;
   }
-  .special-icon-play-button {
-    width: 30px;
-    height: 30px;
-    background-color: #ffd663;
-    border-radius: 50%;
-    position: absolute;
-    right: 4.5rem;
-    top: 6rem;
-    font-size: 0.9rem;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
   .transparent-background {
     background-color: rgba(255, 255, 255, 0.5);
   }
@@ -344,12 +346,30 @@ export default defineComponent({
       &:hover {
         background: #00000030;
       }
-      &.saooti-play {
+      .saooti-play {
         font-size: 2em;
         position: relative;
         right: -0.2rem;
       }
+      .big-icon-error {
+        font-size: 2em;
+        position: relative;
+      }
     }
   }
+  .special-icon-play-button {
+    width: 30px;
+    height: 30px;
+    background-color: #ffd663;
+    border-radius: 50%;
+    position: absolute;
+    right: 4.5rem;
+    top: 6rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>

package/src/components/form/ClassicCheckbox.vue

@@ -5,12 +5,12 @@
     >
       <input
         :id="idCheckbox"
-        :model-value="textInit"
+        :value="textInit"
         type="checkbox"
         :disabled="isDisabled"
         :title="displayLabel?'':label"
         :data-selenium="selenium"
-        @update:modelValue="$emit('update:textInit',$event)"
+        @input="$emit('update:textInit',!textInit)"
         @click="emitClickAction"
       >
       <span
@@ -53,11 +53,6 @@ export default defineComponent({
 <style lang="scss">
 @import '@scss/_variables.scss';
 .octopus-app{
-  input[type="checkbox"] {
-    accent-color: $octopus-primary-color;
-    cursor: pointer;
-    margin-right: 5px;
-  }
   .octopus-form-switch{
     position: relative;
     display: inline-block;

package/src/components/form/ClassicRadio.vue

@@ -11,12 +11,12 @@
     >
       <input
         :id="idRadio + option.value"
-        :model-value="textInit"
+        :checked="textInit===option.value"
         type="radio"
         :name="idRadio"
         :value="option.value"
         :disabled="isDisabled"
-        @update:modelValue="$emit('update:textInit',$event)"
+        @input="$emit('update:textInit',$event.target.value)"
       >
       <label
         class="c-hand"

package/src/components/form/ClassicSearch.vue

@@ -3,12 +3,12 @@
     <input
       :id="idSearch"
       ref="search"
-      :model-value="textInit"
+      :value="textInit"
       type="text"
       class="search-input w-100 p-2 "
       :placeholder="label"
       :autofocus="autofocus"
-      @update:modelValue="$emit('update:textInit',$event)"
+      @input="$emit('update:textInit',$event.target.value)"
     >
     <label
       :for="idSearch"

package/src/components/form/ClassicSelect.vue

@@ -7,12 +7,12 @@
     >{{ label }}</label>
     <select
       :id="idSelect"
-      :model-value="textInit"
+      :value="textInit"
       :disabled="isDisabled"
       class="c-hand w-100"
       :class="transparent?'transparent':''"
       :style="getFontFamily"
-      @update:modelValue="$emit('update:textInit',$event)"
+      @input="$emit('update:textInit',$event.target.value)"
     >
       <option
         v-for="option in options"

package/src/components/misc/TopBar.vue

@@ -14,8 +14,6 @@
       @click="onDisplayMenu(true)"
     >
       <img
-        width="160"
-        height="50"
         :src="!filterOrga || '' === imgUrl ? logoUrl : proxyImageUrl(imgUrl, '', '50')"
         :alt="!filterOrga || '' === imgUrl ? $t('Logo of main page') : $t('Visual', {name: $store.state.filter?.name})"
         :class="isEducation ? 'educationLogo' : ''"