@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/form/ClassicMultiselect.vue

@@ -1,14 +1,14 @@
 <template>
-  <div 
-    :class="{'multiselect-in-modal' : inModal,
-             'multiselect-no-deselect': noDeselect}"
+  <div
+    :class="{
+      'multiselect-in-modal': inModal,
+      'multiselect-no-deselect': noDeselect,
+    }"
     :style="{ width: width }"
   >
-    <label
-      :class="displayLabel? '':'d-none'"
-      :for="id"
-      class="form-label"
-    >{{ label }}</label>
+    <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
+      label
+    }}</label>
     <vSelect
       :id="id"
       v-model="optionSelected"
@@ -20,52 +20,40 @@
       :loading="isLoading"
       :placeholder="placeholder"
       :filter="fakeSearch"
-      :selectable="()=>!maxOptionsSelected"
+      :selectable="() => !maxOptionsSelected"
       @open="onSearch"
       @search="onSearch"
       @option:selected="onOptionSelected"
       @option:deselected="onOptionDeselect"
     >
-      <template
-        v-if="optionCustomTemplating.length"
-        #option="option"
-      >
-        <slot
-          :name="optionCustomTemplating"
-          :option="option"
-        />
+      <template v-if="optionCustomTemplating.length" #option="option">
+        <slot :name="optionCustomTemplating" :option="option" />
       </template>
       <template
         v-if="optionSelectedCustomTemplating.length"
         #selected-option="option"
       >
-        <slot
-          :name="optionSelectedCustomTemplating"
-          :option="option"
-        />
+        <slot :name="optionSelectedCustomTemplating" :option="option" />
       </template>
       <template #no-options="{ searching }">
-        <span v-if="searching">{{ $t('No elements found. Consider changing the search query.') }}</span>
-        <span v-else>{{ $t('List is empty') }}</span>
+        <span v-if="searching">{{
+          $t("No elements found. Consider changing the search query.")
+        }}</span>
+        <span v-else>{{ $t("List is empty") }}</span>
       </template>
       <template #list-footer>
-        <div
-          v-if="remainingElements"
-          class="vs__dropdown-option"
-        >
+        <div v-if="remainingElements" class="vs__dropdown-option">
           {{
-            $t('Count more elements matched your query, please make a more specific search.',{ count: remainingElements })
+            $t(
+              "Count more elements matched your query, please make a more specific search.",
+              { count: remainingElements },
+            )
           }}
         </div>
       </template>
       <template #list-header>
-        <div
-          v-if="maxOptionsSelected"
-          class="vs__dropdown-option"
-        >
-          {{
-            $t('Multiselect max options', {max:maxOptions})
-          }}
+        <div v-if="maxOptionsSelected" class="vs__dropdown-option">
+          {{ $t("Multiselect max options", { max: maxOptions }) }}
         </div>
       </template>
     </vSelect>
@@ -74,130 +62,141 @@
 
 <script lang="ts">
 import vSelect from "vue-select";
-  export default {
-    components: {
-      vSelect,
-    },
-    props: {
-      id:{default: '', type: String},
-      label:{default: '', type: String},
-      placeholder:{default: '', type: String},
-      optionLabel:{default: '', type: String},
-      inModal:{default: false, type: Boolean},
-      multiple:{default: false, type: Boolean},
-      isDisabled:{default: false, type: Boolean},
-      width: { default: '100%', type: String },
-      maxElement: { default: 50, type: Number },
-      minSearchLength: { default: 3, type: Number },
-      optionChosen: { default: undefined, type: Object as ()=>unknown},
-      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 },
-    },
+export default {
+  components: {
+    vSelect,
+  },
+  props: {
+    id: { default: "", type: String },
+    label: { default: "", type: String },
+    placeholder: { default: "", type: String },
+    optionLabel: { default: "", type: String },
+    inModal: { default: false, type: Boolean },
+    multiple: { default: false, type: Boolean },
+    isDisabled: { default: false, type: Boolean },
+    width: { default: "100%", type: String },
+    maxElement: { default: 50, type: Number },
+    minSearchLength: { default: 3, type: Number },
+    optionChosen: { default: undefined, type: Object as () => unknown },
+    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'],
+  emits: ["onSearch", "selected"],
 
-    data() {
-      return {
-        optionSelected: undefined as unknown|undefined,
-        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;
+  data() {
+    return {
+      optionSelected: undefined as unknown | undefined,
+      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: {
-        deep: true,
-        immediate:true,
-        handler(){
-          this.optionSelected = this.optionChosen;
-        }
+  watch: {
+    optionChosen: {
+      deep: true,
+      immediate: true,
+      handler() {
+        this.optionSelected = this.optionChosen;
       },
-      optionSelected: {
-        deep: true,
-        handler(){
-          if(this.noDeselect || null!==this.optionSelected){ return; }
-          this.$emit('selected', undefined);
-        }
-      }
     },
-    
-    methods:{
-      fakeSearch():Array<unknown>{
-        return this.options;
-      },
-      onSearch(search: string): void{
-        if(search && search.length < this.minSearchLength){return;}
-        this.isLoading = true;
-        this.$emit('onSearch', search);
-      },
-      afterSearch(optionsFetched: Array<unknown>, count: number):void{
-        this.options = optionsFetched;
-        this.remainingElements = Math.max(0, count - this.maxElement);
-        this.isLoading = false;
-      },
-      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);
+    optionSelected: {
+      deep: true,
+      handler() {
+        if (this.noDeselect || null !== this.optionSelected) {
           return;
         }
-        this.$emit('selected', this.optionSelected);
+        this.$emit("selected", undefined);
+      },
+    },
+  },
+
+  methods: {
+    fakeSearch(): Array<unknown> {
+      return this.options;
+    },
+    onSearch(search: string): void {
+      if (search && search.length < this.minSearchLength) {
+        return;
       }
-    }
-  }
+      this.isLoading = true;
+      this.$emit("onSearch", search);
+    },
+    afterSearch(optionsFetched: Array<unknown>, count: number): void {
+      this.options = optionsFetched;
+      this.remainingElements = Math.max(0, count - this.maxElement);
+      this.isLoading = false;
+    },
+    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";
-:root{
-  --vs-dropdown-z-index:1060;
+:root {
+  --vs-dropdown-z-index: 1060;
   --vs-border-radius: 0.2rem;
   --vs-dropdown-option--active-bg: #ddd;
   --vs-dropdown-option--active-color: black;
-  --vs-font-size:0.8rem;
+  --vs-font-size: 0.8rem;
   --vs-border-width: 2px;
   --vs-border-color: #dee2e6;
 }
-.octopus-app{
-  .vs__dropdown-option{
+.octopus-app {
+  .vs__dropdown-option {
     white-space: initial;
   }
-  .vs--searchable .vs__dropdown-toggle{
+  .vs--searchable .vs__dropdown-toggle {
     cursor: pointer;
   }
-  .vs__search:focus{
+  .vs__search:focus {
     min-width: 150px;
   }
-  .multiselect-no-deselect .vs__clear{
+  .multiselect-no-deselect .vs__clear {
     display: none;
   }
-  .multiselect-transparent{
+  .multiselect-transparent {
     --vs-border-color: transparent;
   }
-  .multiselect-white{
+  .multiselect-white {
     --vs-selected-color: white;
     --vs-selected-bg: transparent;
     --vs-dropdown-bg: black;
-    --vs-controls-color:white;
-    .vs__actions path{
+    --vs-controls-color: white;
+    .vs__actions path {
       fill: white;
     }
   }
 }
-</style>
+</style>

package/src/components/form/ClassicRadio.vue

@@ -1,27 +1,21 @@
 <template>
-  <div
-    class="d-flex"
-    :class="isColumn? 'flex-column':''"
-  >
+  <div class="d-flex" :class="isColumn ? 'flex-column' : ''">
     <div
       v-for="option in options"
       :key="option.title"
       class="octopus-form-item"
-      :class="isColumn? 'd-flex align-items-center':'me-2'"
+      :class="isColumn ? 'd-flex align-items-center' : 'me-2'"
     >
       <input
         :id="idRadio + option.value"
-        :checked="textInit===option.value"
+        :checked="textInit === option.value"
         type="radio"
         :name="idRadio"
         :value="option.value"
         :disabled="isDisabled"
-        @input="$emit('update:textInit',$event.target.value)"
-      >
-      <label
-        class="c-hand"
-        :for="idRadio + option.value"
-      >{{
+        @input="$emit('update:textInit', $event.target.value)"
+      />
+      <label class="c-hand" :for="idRadio + option.value">{{
         option.title
       }}</label>
     </div>
@@ -29,17 +23,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'ClassicRadio',
+  name: "ClassicRadio",
 
   props: {
-    idRadio: { default: '', type: String },
+    idRadio: { default: "", type: String },
     isDisabled: { default: false, type: Boolean },
-    options: { default: ()=>[], type: Array as () => Array<{title: string, value: string|undefined}> },
+    options: {
+      default: () => [],
+      type: Array as () => Array<{ title: string; value: string | undefined }>,
+    },
     textInit: { default: undefined, type: String },
-    isColumn: {default:true, type:Boolean}
+    isColumn: { default: true, type: Boolean },
   },
-  emits: ['update:textInit'],
+  emits: ["update:textInit"],
 });
 </script>

package/src/components/form/ClassicSearch.vue

@@ -5,45 +5,39 @@
       ref="search"
       :value="textInit"
       type="text"
-      class="search-input w-100 p-2 "
+      class="search-input w-100 p-2"
       :placeholder="label"
       :autofocus="autofocus"
-      @input="$emit('update:textInit',$event.target.value)"
-    >
-    <label
-      :for="idSearch"
-      :title="label"
-    />
-    <div
-      v-if="!textInit"
-      class="saooti-search search-icon-container"
+      @input="$emit('update:textInit', $event.target.value)"
     />
+    <label :for="idSearch" :title="label" />
+    <div v-if="!textInit" class="saooti-search search-icon-container" />
     <div
       v-else
       class="saooti-remove search-icon-container c-hand"
-      @click="$emit('update:textInit','')"
+      @click="$emit('update:textInit', '')"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'ClassicSearch',
- props: {
-    idSearch: { default: '', type: String },
-    label: { default: '', type: String },
-    textInit: { default: '', type: String },
+  name: "ClassicSearch",
+  props: {
+    idSearch: { default: "", type: String },
+    label: { default: "", type: String },
+    textInit: { default: "", type: String },
     autofocus: { default: false, type: Boolean },
   },
 
-  emits: ['update:textInit'],
+  emits: ["update:textInit"],
 });
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-  .champs-searchPage{
+@import "@scss/_variables.scss";
+.octopus-app {
+  .champs-searchPage {
     input {
       border: 2px solid #dee2e6;
       border-radius: $octopus-borderradius;
@@ -63,6 +57,6 @@ export default defineComponent({
       align-items: center;
       margin: 1rem;
     }
-  } 
+  }
 }
-</style>
+</style>

package/src/components/form/ClassicSelect.vue

@@ -3,22 +3,23 @@
     <label
       :for="idSelect"
       class="form-label mt-2"
-      :class="displayLabel?'':'d-none'"
-    >{{ label }}</label>
+      :class="displayLabel ? '' : 'd-none'"
+      >{{ label }}</label
+    >
     <select
       :id="idSelect"
       :value="textInit"
       :disabled="isDisabled"
       class="c-hand w-100"
-      :class="transparent?'transparent':''"
+      :class="transparent ? 'transparent' : ''"
       :style="getFontFamily"
-      @change="$emit('update:textInit',$event.target.value)"
+      @change="$emit('update:textInit', $event.target.value)"
     >
       <option
         v-for="option in options"
         :key="option.title"
         :value="option.value"
-        :style="option.fontFamily ? 'font-family:'+option.fontFamily:''"
+        :style="option.fontFamily ? 'font-family:' + option.fontFamily : ''"
       >
         {{ option.title }}
       </option>
@@ -26,40 +27,47 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'ClassicSelect',
+  name: "ClassicSelect",
   props: {
-    idSelect: { default: '', type: String },
-    label: { default: '', type: String },
-    displayLabel:{default: true, type: Boolean},
-    transparent:{ default: false, type: Boolean },
+    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}> },
-    textInit: { default: undefined, type: [ String, Number ] },
+    options: {
+      default: () => [],
+      type: Array as () => Array<{
+        title: string;
+        value: number | string | undefined;
+        fontFamily?: string;
+      }>,
+    },
+    textInit: { default: undefined, type: [String, Number] },
   },
-  emits: ['update:textInit'],
-  computed:{
-    getFontFamily(): string{
+  emits: ["update:textInit"],
+  computed: {
+    getFontFamily(): string {
       const item = this.options.find((x) => {
         return this.textInit === x.value;
       });
-      if(item && item.fontFamily){
-        return 'font-family:'+item.fontFamily;
+      if (item && item.fontFamily) {
+        return "font-family:" + item.fontFamily;
       }
       return "";
-    }
+    },
   },
 });
 </script>
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   select.transparent {
-		background: transparent !important;
-		outline-color: transparent !important;
-		padding:0;
-		border: 0;
-		height: unset;
-	}
+    background: transparent !important;
+    outline-color: transparent !important;
+    padding: 0;
+    border: 0;
+    height: unset;
+  }
 }
-</style>
+</style>