@saooti/octopus-sdk 36.0.6 → 36.0.8

package/package.json

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

package/src/assets/octopus-library.scss

@@ -15,6 +15,5 @@ $breadcrumb-border-radius:          2rem !default;
 @import './general.scss';
 @import './live.scss';
 @import './form.scss';
-@import './multiselect.scss';
 @import './transition.scss';
 @import './share.scss';

package/src/assets/share.scss

@@ -252,11 +252,5 @@
         }
       }
     }
-    select {
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      padding-right: 40px;
-    }
   }
 }

package/src/components/display/categories/CategoryChooser.vue

@@ -12,6 +12,7 @@
     :min-search-length="1"
     :width="width"
     :is-disabled="isDisabled"
+    :no-deselect="noDeselect"
     @onSearch="onSearchCategory"
     @selected="onCategorySelected"
   />
@@ -37,6 +38,7 @@ export default defineComponent({
     categorySelected: { default: undefined, type: Number },
     categorySelectedArray: { default: undefined, type: Array as ()=>Array<number> },
     inModal:{default: false, type: Boolean},
+    noDeselect: {default: true, type: Boolean},
   },
   emits: ['update:categorySelected','update:categorySelectedArray','selected'],
   data() {

package/src/components/display/categories/CategoryFilter.vue

@@ -52,7 +52,6 @@
             :rubriquage-id="filter.rubriquageId"
             :rubrique-selected="filter.rubriqueId"
             :all-rubriques="getRubriques(filter.rubriquageId)"
-            :no-deselect="true"
             width="auto"
             @selected="onRubriqueSelected(index,$event)"
           />

package/src/components/display/filter/MonetizableFilter.vue

@@ -1,19 +1,22 @@
 <template>
   <div class="d-flex align-items-center">
     <div>{{ $t('Advertising') + ' :' }}</div>
-    <label class="position-relative">
-      <select
-        ref="select"
-        v-model="monetization"
-        class="ms-2 mb-0 c-hand"
-        @change="onChange"
-      >
-        <option value="UNDEFINED">{{ allString }}</option>
-        <option value="YES">{{ $t('Authorized advertising') }}</option>
-        <option value="NO">{{ $t('Prohibited advertising') }}</option>
-      </select>
-      <div class="saooti-down octopus-arrow-down-absolute" />
-    </label>
+    <select
+      ref="select"
+      v-model="monetization"
+      class="ms-2 mb-0 c-hand"
+      @change="onChange"
+    >
+      <option value="UNDEFINED">
+        {{ allString }}
+      </option>
+      <option value="YES">
+        {{ $t('Authorized advertising') }}
+      </option>
+      <option value="NO">
+        {{ $t('Prohibited advertising') }}
+      </option>
+    </select>
   </div>
 </template>
 

package/src/components/display/filter/RubriqueChoice.vue

@@ -1,21 +1,18 @@
 <template>
   <div class="d-flex align-items-center">
-    <label class="position-relative">
-      <select
-        v-model="rubriquageId"
-        class="ms-2 mb-0 c-hand"
-        @change="onRubriquageSelected"
+    <select
+      v-model="rubriquageId"
+      class="ms-2 mb-0 c-hand"
+      @change="onRubriquageSelected"
+    >
+      <option
+        v-for="rubriquage in rubriquageDisplay"
+        :key="rubriquage.rubriquageId"
+        :value="rubriquage.rubriquageId"
       >
-        <option
-          v-for="rubriquage in rubriquageDisplay"
-          :key="rubriquage.rubriquageId"
-          :value="rubriquage.rubriquageId"
-        >{{ rubriquage.title }}</option>
-      </select>
-      <div
-        class="saooti-down octopus-arrow-down-absolute"
-      />
-    </label>
+        {{ rubriquage.title }}
+      </option>
+    </select>
     <template v-if="rubriquageId">
       <div class="ms-3 flex-shrink-0">
         {{ $t('By rubric') }}
@@ -30,7 +27,6 @@
         :defaultanswer="$t('No rubric filter')"
         :reset="reset"
         :without-rubrique="true"
-        :no-deselect="true"
         @selected="onRubriqueSelected"
       />
     </template>

package/src/components/display/organisation/OrganisationChooser.vue

@@ -9,7 +9,9 @@
     :width="width"
     :in-modal="inModal"
     :option-chosen="organisationChosen"
-    :option-custom-templating="isImage"
+    option-custom-templating="optionTemplating"
+    option-selected-custom-templating="optionTemplating"
+    :no-deselect="noDeselect"
     @onSearch="onSearchOrganisation"
     @selected="$emit('selected', $event)"
   >
@@ -58,6 +60,7 @@ export default defineComponent({
     width: { default: '100%', type: String },
     isImage: { default: true, type: Boolean },
     inModal:{default: false, type: Boolean},
+    noDeselect: {default: true, type: Boolean},
   },
   emits: ['selected'],
   data() {
@@ -95,7 +98,7 @@ export default defineComponent({
     },
   },
 
-  async created() {
+  created() {
     this.organisationChosen = this.getDefaultOrganisation;
   },
   methods: {

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

@@ -39,7 +39,7 @@ export default defineComponent({
     rubriquageId: { default: undefined, type: Number },
     withoutRubrique: { default: false, type: Boolean },
     isDisabled: { default: false, type: Boolean },
-    noDeselect: {default: false, type: Boolean},
+    noDeselect: {default: true, type: Boolean},
     inModal:{default: false, type: Boolean},
   },
   emits: ['update:rubriqueSelected', 'update:rubriqueSelectedArray', 'selected'],

package/src/components/form/ClassicMultiselect.vue

@@ -1,14 +1,14 @@
 <template>
   <div 
-    class="default-multiselect-width"
     :class="{'multiselect-in-modal' : inModal,
              'multiselect-no-deselect': noDeselect}"
     :style="{ width: width }"
   >
     <label
+      :class="displayLabel? '':'d-none'"
       :for="id"
-      :title="label"
-    />
+      class="form-label"
+    >{{ label }}</label>
     <vSelect
       :id="id"
       v-model="optionSelected"
@@ -19,25 +19,27 @@
       :disabled="isDisabled"
       :loading="isLoading"
       :placeholder="placeholder"
+      :selectable="()=>!maxOptionsSelected"
       @open="onSearch"
       @search="onSearch"
       @option:selected="onOptionSelected"
+      @option:deselected="onOptionDeselect"
     >
       <template
-        v-if="optionCustomTemplating"
+        v-if="optionCustomTemplating.length"
         #option="option"
       >
         <slot
-          name="optionTemplating"
+          :name="optionCustomTemplating"
           :option="option"
         />
       </template>
       <template
-        v-if="optionCustomTemplating"
+        v-if="optionSelectedCustomTemplating.length"
         #selected-option="option"
       >
         <slot
-          name="optionTemplating"
+          :name="optionSelectedCustomTemplating"
           :option="option"
         />
       </template>
@@ -55,6 +57,16 @@
           }}
         </li>
       </template>
+      <template #list-header>
+        <li
+          v-if="maxOptionsSelected"
+          class="vs__dropdown-option"
+        >
+          {{
+            $t('Multiselect max options', {max:maxOptions})
+          }}
+        </li>
+      </template>
     </vSelect>
   </div>
 </template>
@@ -77,8 +89,12 @@ import vSelect from "vue-select";
       maxElement: { default: 50, type: Number },
       minSearchLength: { default: 3, type: Number },
       optionChosen: { default: undefined, type: Object as ()=>unknown},
-      noDeselect:{default: false, type: Boolean},
-      optionCustomTemplating:{default: false, type: Boolean},
+      noDeselect:{default: true, type: Boolean},
+      optionCustomTemplating:{default: "", type: String},
+      optionSelectedCustomTemplating:{default: "", type: String},
+      displayLabel:{default: false, type: Boolean},
+      maxOptions: { default: null, type: Number },
+      allowEmpty: { default: true, type: Boolean },
     },
 
     emits: ['onSearch','selected'],
@@ -89,8 +105,17 @@ import vSelect from "vue-select";
         options: [] as Array<unknown>,
         remainingElements: 0 as number,
         isLoading: false as boolean,
+        nbOptionsSelected: 0 as number,
       };
     },
+    computed:{
+      maxOptionsSelected(): boolean{
+        if(this.maxOptions !== null && this.multiple){
+          return (this.optionSelected as Array<unknown>).length >= this.maxOptions;
+        }
+        return false;
+      }
+    },
 
     watch: {
       optionChosen: {
@@ -99,6 +124,13 @@ import vSelect from "vue-select";
         handler(){
           this.optionSelected = this.optionChosen;
         }
+      },
+      optionSelected: {
+        deep: true,
+        handler(){
+          if(this.noDeselect || null!==this.optionSelected){ return; }
+          this.$emit('selected', undefined);
+        }
       }
     },
     
@@ -115,29 +147,34 @@ import vSelect from "vue-select";
       },
       onOptionSelected(optionSelected: unknown):void{
         this.$emit('selected', optionSelected);
+      },
+      onOptionDeselect(event: unknown):void{
+        if(!this.multiple){ return; }
+        if(!this.allowEmpty && 1>=(this.optionSelected as Array<unknown>).length){
+          (this.optionSelected as Array<unknown>).push(event);
+          return;
+        }
+        this.$emit('selected', this.optionSelected);
       }
     }
   }
 </script>
 <style lang="scss">
 @import "vue-select/dist/vue-select.css";
-.octopus-app{
+:root{
+  --vs-dropdown-z-index:1060;
   --vs-border-radius: 0.2rem;
   --vs-dropdown-option--active-bg: #ddd;
   --vs-dropdown-option--active-color: black;
-  .default-multiselect-width {
-    width: 100%;
-    font-size: 1rem;
-  }
+  --vs-font-size:0.8rem;
+}
+.octopus-app{
   .vs__dropdown-option{
     white-space: initial;
   }
   .vs__search:focus{
     min-width: 150px;
   }
-  .multiselect-in-modal .vs__dropdown-menu{
-    z-index: 9999;
-  }
   .multiselect-no-deselect .vs__clear{
     display: none;
   }

package/src/locale/de.ts

@@ -316,4 +316,5 @@ export default{
   "Newsletter":"Newsletter",
   "QR Code":"QR-Code",
   "Rss feed": "RSS-Feed",
+  "Multiselect max options":"Maximal {max} gleichzeitige Optionen. Bitte entfernen Sie zuerst eine Option, um eine neue auswählen zu können",
 }

package/src/locale/en.ts

@@ -323,4 +323,5 @@ export default{
   "Newsletter":"Newsletter",
   "QR Code":"QR Code",
   "Rss feed": "Rss feed",
+  "Multiselect max options":"Maximum of {max} concurrent options. Please first remove an option to be able to select a new one",
 };

package/src/locale/es.ts

@@ -316,4 +316,5 @@ export default{
   "Newsletter":"Newsletter",
   "QR Code":"Código QR",
   "Rss feed": "RSS Feed",
+  "Multiselect max options":"Máximo de {max} opciones simultáneas. Primero elimine una opción para poder seleccionar una nueva",
 }

package/src/locale/fr.ts

@@ -323,4 +323,5 @@ export default{
   "Newsletter":"Newsletter",
   "QR Code":"QR Code",
   "Rss feed": "Flux RSS",
+  "Multiselect max options":"Maximum de {max} options simultanées. Veuillez dans un premier temps retirer une option pour pouvoir en sélectionner une nouvelle",
 };

package/src/locale/it.ts

@@ -313,4 +313,5 @@ export default{
     "Newsletter":"Newsletter",
     "QR Code":"QR Code",
     "Rss feed": "RSS Feed",
+    "Multiselect max options":"Massimo di {max} opzioni simultanee. Per prima cosa rimuovi un'opzione per poterne selezionare una nuova",
   };

package/src/locale/sl.ts

@@ -316,4 +316,5 @@ export default{
   "Newsletter":"Newsletter",
   "QR Code":"koda QR",
   "Rss feed": "Rss vir",
+  "Multiselect max options":"Največ {max} sočasnih možnosti. Najprej odstranite možnost, da boste lahko izbrali novo",
 }