@tekkare/auriga 0.1.23 → 0.1.25

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.23"
+  "version": "0.1.25"
 }

package/dist/runtime/components/argComplexSelect.vue

@@ -18,7 +18,9 @@
           ]"
         >
           {{
-            del_table.map((elem) => elem).length > 0 ? getAllSelect : empty_msg
+            del_table.map((elem) => elem).length > 0
+              ? getAllSelect
+              : getEmptyMsg
           }}
         </span>
       </arg-simple-label>
@@ -33,7 +35,13 @@
       <div class="oip_select_complex_header">
         <h1 class="oip_select_complex_header_title">
           {{
-            !!select_placeholder ? `${select_placeholder} select` : "Select "
+            !!select_placeholder
+              ? `${select_placeholder} ${
+                  lang === "fr" ? "sélection" : "select"
+                }`
+              : lang === "fr"
+              ? "Sélection"
+              : "Select"
           }}
         </h1>
       </div>
@@ -61,30 +69,36 @@
           </div>
         </div>
       </div>
-      <p v-if="reachMax" class="warning_text">{{ reach_max_msg }}</p>
+      <p v-if="reachMax" class="warning_text">{{ getMaxSelectMsg }}</p>
       <div class="oip_select_complex_all_selection">
         <div class="oip_select_complex_add_selection">
           <div class="oip_select_complex_all_title">
-            <div class="oip_select_complex_all_tittle_left">Available</div>
+            <div class="oip_select_complex_all_tittle_left">
+              {{ lang === "fr" ? "Disponible" : "Available" }}
+            </div>
             <div
               v-if="show_select_all"
               class="oip_select_complex_all_tittle_right add"
               @click="add_all_element"
             >
-              Select all
+              {{ lang === "fr" ? "Tout sélectionner" : "Select all" }}
             </div>
             <div
               v-if="max_amount !== null"
               class="oip_select_complex_all_tittle_right"
             >
-              Maximum selection: {{ max_amount }} items
+              {{
+                lng === "fr"
+                  ? `Maximum: ${max_amount} éléments`
+                  : `Maximum: ${max_amount} items`
+              }}
             </div>
           </div>
           <div class="oip_search_container">
             <arg-icon size="20" name="MagnifyingGlass"></arg-icon>
             <input
               class="oip_search_name"
-              :placeholder="search_placeholder"
+              :placeholder="getPlaceholderAdd"
               v-model="searchNameAdd"
               @input="changeInput"
             />
@@ -130,25 +144,36 @@
               </div>
             </div>
           </div>
+          <div
+            class="oip_empty_dropdown"
+            v-else-if="filterNameAdd.length === 0"
+          >
+            <p>{{ getEmptyContentMsg }}</p>
+          </div>
           <div v-else class="oip_select_complex_selection_container">
-            <arg-data-loader />
+            <arg-data-loader
+              :text="getLoaderText[0]"
+              :sub-text="getLoaderText[1]"
+            />
           </div>
         </div>
         <div class="oip_select_complex_del_selection">
           <div class="oip_select_complex_all_title">
-            <div class="oip_select_complex_all_tittle_left">Selected</div>
+            <div class="oip_select_complex_all_tittle_left">
+              {{ lang === "fr" ? "Sélectionné" : "Selected" }}
+            </div>
             <div
               class="oip_select_complex_all_tittle_right del"
               @click="del_all_element"
             >
-              Clear all
+              {{ lang === "fr" ? "Tout effacer" : "Clear all" }}
             </div>
           </div>
           <div class="oip_search_container">
             <arg-icon size="20" name="MagnifyingGlass"></arg-icon>
             <input
               class="oip_search_name"
-              :placeholder="search_placeholder"
+              :placeholder="getPlaceholderDel"
               v-model="searchNameDel"
             />
             <arg-icon
@@ -185,7 +210,9 @@
         <arg-btn @click="cancel_function()" btnStyle="secondary"
           >Cancel</arg-btn
         >
-        <arg-btn @click="apply_function()" btnStyle="primary">Apply</arg-btn>
+        <arg-btn @click="apply_function()" btnStyle="primary">{{
+          lang === "fr" ? "Apply" : "Appliquer"
+        }}</arg-btn>
       </div>
     </div>
   </div>
@@ -208,7 +235,8 @@ export default defineComponent({
   components: { argSimpleLabel, argBtn, argIcon, argDataLoader },
   props: {
     element_table: { type: Array, required: true },
-    search_placeholder: { type: String, default: "Search" },
+    search_placeholder_add: { type: String, default: null },
+    search_placeholder_del: { type: String, default: null },
     need_apply: { type: Boolean, default: false },
     select_placeholder: { type: String, required: false },
     smart_selection_table: {
@@ -228,11 +256,20 @@ export default defineComponent({
     max_amount: { type: Number, default: null },
     reach_max_msg: {
       type: String,
-      default: "You've reached the maximum amount of items you can select"
+      default: null
     },
     loading: { type: Boolean, default: false },
-    empty_msg: { type: String, default: "No selection" },
-    complex_label: { type: String, required: true }
+    empty_msg: { type: String, default: null },
+    complex_label: { type: String, required: true },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    },
+    loader_text: { type: Array, default: null },
+    empty_content_msg: { type: String, default: null }
   },
   emits: ["changeElement", "changeAddInputValue", "update:Selection"],
   setup(props, { emit }) {
@@ -307,6 +344,42 @@ export default defineComponent({
         );
       }
     );
+    const getEmptyMsg = computed(() => {
+      if (props.empty_msg === null) {
+        return props.lang === "fr" ? "Aucune S\xE9lection" : "No Selection";
+      } else
+        return props.empty_msg;
+    });
+    const getLoaderText = computed(() => {
+      if (props.loader_text === null) {
+        return props.lang === "fr" ? ["Chargement...", "Veuillez patienter"] : ["Loading...", "Please wait"];
+      } else
+        return props.loader_text;
+    });
+    const getPlaceholderAdd = computed(() => {
+      if (props.search_placeholder_add === null) {
+        return props.lang === "fr" ? "Rechercher une option..." : "Search options...";
+      } else
+        return props.search_placeholder_add;
+    });
+    const getPlaceholderDel = computed(() => {
+      if (props.search_placeholder_del === null) {
+        return props.lang === "fr" ? "Rechercher parmis les options selection\xE9es..." : "Search selected options...";
+      } else
+        return props.search_placeholder_del;
+    });
+    const getMaxSelectMsg = computed(() => {
+      if (props.reach_max_msg === null) {
+        return props.lang === "fr" ? "Vous avez atteint le maximum d'\xE9l\xE9ments que vous pouvez s\xE9lectionner'" : "You've reached the maximum amount of items you can select";
+      } else
+        return props.reach_max_msg;
+    });
+    const getEmptyContentMsg = computed(() => {
+      if (props.empty_content_msg === null) {
+        return props.lang === "fr" ? "Aucun contenu n'a \xE9t\xE9 trouv\xE9" : "No content was found";
+      } else
+        return props.empty_content_msg;
+    });
     const getAllSelect = computed(() => {
       const fullSelect = del_table.value.map((elem) => elem);
       let filterFill = ``;
@@ -350,7 +423,7 @@ export default defineComponent({
         if (isDisplay.value === true) {
           setTimeout(() => {
             document?.addEventListener("click", close);
-          }, 200);
+          }, 100);
         }
         const elem = document?.getElementById("select_complex");
         const simpleElem = document?.getElementById("simple_select_complex");
@@ -363,10 +436,8 @@ export default defineComponent({
       }
     }
     function close() {
-      if (isDisplay.value === true) {
-        isDisplay.value = false;
-        document?.removeEventListener("click", close);
-      }
+      isDisplay.value = false;
+      document?.removeEventListener("click", close);
     }
     function add_element(element) {
       smart_selection_selected.value = void 0;
@@ -502,7 +573,13 @@ export default defineComponent({
       cancel_function,
       change_save_table,
       getAllSelect,
-      reachMax
+      reachMax,
+      getEmptyMsg,
+      getLoaderText,
+      getPlaceholderAdd,
+      getPlaceholderDel,
+      getMaxSelectMsg,
+      getEmptyContentMsg
     };
   }
 });

package/dist/runtime/components/argComplexSelect.vue.d.ts

@@ -16,9 +16,13 @@ declare const _default: import("vue").DefineComponent<{
         };
         required: true;
     };
-    search_placeholder: {
+    search_placeholder_add: {
         type: StringConstructor;
-        default: string;
+        default: null;
+    };
+    search_placeholder_del: {
+        type: StringConstructor;
+        default: null;
     };
     need_apply: {
         type: BooleanConstructor;
@@ -76,7 +80,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     reach_max_msg: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     loading: {
         type: BooleanConstructor;
@@ -84,12 +88,38 @@ declare const _default: import("vue").DefineComponent<{
     };
     empty_msg: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     complex_label: {
         type: StringConstructor;
         required: true;
     };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    loader_text: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: null;
+    };
+    empty_content_msg: {
+        type: StringConstructor;
+        default: null;
+    };
 }, {
     add_table: import("vue").Ref<string[]>;
     del_table: import("vue").Ref<string[]>;
@@ -120,6 +150,12 @@ declare const _default: import("vue").DefineComponent<{
     change_save_table: () => void;
     getAllSelect: import("vue").ComputedRef<string>;
     reachMax: import("vue").Ref<boolean>;
+    getEmptyMsg: import("vue").ComputedRef<string>;
+    getLoaderText: import("vue").ComputedRef<string[]>;
+    getPlaceholderAdd: import("vue").ComputedRef<string>;
+    getPlaceholderDel: import("vue").ComputedRef<string>;
+    getMaxSelectMsg: import("vue").ComputedRef<string>;
+    getEmptyContentMsg: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changeElement" | "changeAddInputValue" | "update:Selection")[], "changeElement" | "changeAddInputValue" | "update:Selection", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     element_table: {
         type: {
@@ -138,9 +174,13 @@ declare const _default: import("vue").DefineComponent<{
         };
         required: true;
     };
-    search_placeholder: {
+    search_placeholder_add: {
         type: StringConstructor;
-        default: string;
+        default: null;
+    };
+    search_placeholder_del: {
+        type: StringConstructor;
+        default: null;
     };
     need_apply: {
         type: BooleanConstructor;
@@ -198,7 +238,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     reach_max_msg: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     loading: {
         type: BooleanConstructor;
@@ -206,19 +246,47 @@ declare const _default: import("vue").DefineComponent<{
     };
     empty_msg: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     complex_label: {
         type: StringConstructor;
         required: true;
     };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    loader_text: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: null;
+    };
+    empty_content_msg: {
+        type: StringConstructor;
+        default: null;
+    };
 }>> & {
     onChangeElement?: ((...args: any[]) => any) | undefined;
     onChangeAddInputValue?: ((...args: any[]) => any) | undefined;
     "onUpdate:Selection"?: ((...args: any[]) => any) | undefined;
 }, {
+    lang: string;
     loading: boolean;
-    search_placeholder: string;
+    search_placeholder_add: string;
+    search_placeholder_del: string;
     need_apply: boolean;
     smart_selection_table: unknown[];
     return_value: boolean;
@@ -230,5 +298,7 @@ declare const _default: import("vue").DefineComponent<{
     max_amount: number;
     reach_max_msg: string;
     empty_msg: string;
+    loader_text: string[];
+    empty_content_msg: string;
 }, {}>;
 export default _default;

package/dist/runtime/components/argDate.vue

@@ -15,7 +15,10 @@ export default defineComponent({
     },
     lang: {
       type: String,
-      default: "en"
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
     },
     compact: {
       type: Boolean,

package/dist/runtime/components/argDate.vue.d.ts

@@ -6,6 +6,7 @@ declare const _default: import("vue").DefineComponent<{
     lang: {
         type: StringConstructor;
         default: string;
+        validator: (value: string) => boolean;
     };
     compact: {
         type: BooleanConstructor;
@@ -22,6 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     lang: {
         type: StringConstructor;
         default: string;
+        validator: (value: string) => boolean;
     };
     compact: {
         type: BooleanConstructor;

package/dist/runtime/components/argDropdownSelect.vue

@@ -32,7 +32,7 @@
             :id="`label_${selected_item}`"
             >{{
               selected_item === null || selected_item === undefined
-                ? empty_msg
+                ? getEmptyMsg
                 : selected_item
             }}</span
           >
@@ -53,15 +53,23 @@
           class="oip_search_name"
           v-model="searchName"
           @input="changeInput()"
-          :placeholder="filter_placeholder"
+          :placeholder="getPlaceholder"
         />
       </div>
       <!-- List -->
-      <div class="oip_select_dropdown_selection_container">
+      <arg-data-loader
+        v-if="loading"
+        :text="getLoaderText[0]"
+        :sub-text="getLoaderText[1]"
+      />
+      <div class="oip_empty_dropdown" v-else-if="filterName.length === 0">
+        <p>{{ getEmptyContentMsg }}</p>
+      </div>
+      <div v-else class="oip_select_dropdown_selection_container">
         <div
-          class="oip_select_complex_selection_loop"
           v-for="(element, index) of filterName()"
           :key="index"
+          class="oip_select_complex_selection_loop"
           :class="values_disabled.includes(index) ? 'disabled_option' : ''"
           @click="add_element(element, index)"
         >
@@ -127,9 +135,11 @@
 import argIcon from "./argIcon.vue";
 import argTooltip from "./argTooltip.vue";
 import argSimpleLabel from "./argSimpleLabel.vue";
+import argDataLoader from "./argDataLoader.vue";
 import {
   onMounted,
   ref,
+  computed,
   watch,
   defineComponent,
   onUnmounted,
@@ -137,14 +147,13 @@ import {
 } from "vue";
 export default defineComponent({
   name: "argDropdownSelect",
-  components: { argIcon, argTooltip, argSimpleLabel },
+  components: { argIcon, argTooltip, argSimpleLabel, argDataLoader },
   props: {
     element_table: { type: Array, required: true },
     search: { type: Boolean, default: true },
     filter_placeholder: {
       type: String,
-      required: false,
-      default: "Search options..."
+      default: null
     },
     close_on_click: { type: Boolean, default: true },
     default_select: { type: Number, required: false, default: null },
@@ -152,8 +161,18 @@ export default defineComponent({
     disabled: { type: Boolean, default: false },
     return_value: { type: Boolean, default: false },
     values_disabled: { type: Array, default: () => [] },
-    empty_msg: { type: String, default: "No selection" },
-    dropdown_label: { type: String, required: true }
+    empty_msg: { type: String, default: null },
+    dropdown_label: { type: String, required: true },
+    loading: { type: Boolean, default: false },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    },
+    loader_text: { type: Array, default: null },
+    empty_content_msg: { type: String, default: null }
   },
   emits: ["changeElement", "update:Selection", "changeInputValue"],
   setup(props, { emit }) {
@@ -161,9 +180,14 @@ export default defineComponent({
     const searchName = ref("");
     const labelElement = ref();
     const isEllipsisActive = ref(false);
-    const table_values = ref(props.element_table);
-    const selected_item = props.default_select ? ref(props.element_table[props.default_select]) : ref(null);
-    const selected_number = props.default_select ? ref(props.default_select) : ref(null);
+    const table_values = ref([]);
+    const selected_item = ref(null);
+    const selected_number = ref(null);
+    onMounted(() => {
+      table_values.value = props.element_table;
+      selected_item.value = props.default_select ? props.element_table[props.default_select] : null;
+      selected_number.value = props.default_select ? props.default_select : null;
+    });
     watch(
       () => props.element_table,
       (new_element_table) => {
@@ -182,6 +206,30 @@ export default defineComponent({
         }
       }
     );
+    const getEmptyMsg = computed(() => {
+      if (props.empty_msg === null) {
+        return props.lang === "fr" ? "Aucune S\xE9lection" : "No Selection";
+      } else
+        return props.empty_msg;
+    });
+    const getLoaderText = computed(() => {
+      if (props.loader_text === null) {
+        return props.lang === "fr" ? ["Chargement...", "Veuillez patienter"] : ["Loading...", "Please wait"];
+      } else
+        return props.loader_text;
+    });
+    const getPlaceholder = computed(() => {
+      if (props.filter_placeholder === null) {
+        return props.lang === "fr" ? "Rechercher une option..." : "Search options...";
+      } else
+        return props.filter_placeholder;
+    });
+    const getEmptyContentMsg = computed(() => {
+      if (props.empty_content_msg === null) {
+        return props.lang === "fr" ? "Aucun contenu n'a \xE9t\xE9 trouv\xE9" : "No content was found";
+      } else
+        return props.empty_content_msg;
+    });
     function changeInput() {
       setTimeout(() => {
         emit("changeInputValue", searchName.value);
@@ -214,10 +262,8 @@ export default defineComponent({
       }
     }
     function closeDropdown() {
-      if (isDisplay.value === true) {
-        isDisplay.value = false;
-        document?.removeEventListener("click", closeDropdown);
-      }
+      isDisplay.value = false;
+      document?.removeEventListener("click", closeDropdown);
     }
     function filterName() {
       if (searchName.value !== null) {
@@ -270,7 +316,11 @@ export default defineComponent({
       closeDropdown,
       filterName,
       changeDisplay,
-      changeInput
+      changeInput,
+      getEmptyMsg,
+      getLoaderText,
+      getPlaceholder,
+      getEmptyContentMsg
     };
   }
 });

package/dist/runtime/components/argDropdownSelect.vue.d.ts

@@ -22,8 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     filter_placeholder: {
         type: StringConstructor;
-        required: false;
-        default: string;
+        default: null;
     };
     close_on_click: {
         type: BooleanConstructor;
@@ -52,12 +51,42 @@ declare const _default: import("vue").DefineComponent<{
     };
     empty_msg: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     dropdown_label: {
         type: StringConstructor;
         required: true;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    loader_text: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: null;
+    };
+    empty_content_msg: {
+        type: StringConstructor;
+        default: null;
+    };
 }, {
     isDisplay: import("vue").Ref<boolean>;
     searchName: import("vue").Ref<string>;
@@ -72,6 +101,10 @@ declare const _default: import("vue").DefineComponent<{
     filterName: () => string[];
     changeDisplay: () => void;
     changeInput: () => void;
+    getEmptyMsg: import("vue").ComputedRef<string>;
+    getLoaderText: import("vue").ComputedRef<string[]>;
+    getPlaceholder: import("vue").ComputedRef<string>;
+    getEmptyContentMsg: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changeElement" | "update:Selection" | "changeInputValue")[], "changeElement" | "update:Selection" | "changeInputValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     element_table: {
         type: {
@@ -96,8 +129,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     filter_placeholder: {
         type: StringConstructor;
-        required: false;
-        default: string;
+        default: null;
     };
     close_on_click: {
         type: BooleanConstructor;
@@ -126,20 +158,54 @@ declare const _default: import("vue").DefineComponent<{
     };
     empty_msg: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     dropdown_label: {
         type: StringConstructor;
         required: true;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    loader_text: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: null;
+    };
+    empty_content_msg: {
+        type: StringConstructor;
+        default: null;
+    };
 }>> & {
     onChangeElement?: ((...args: any[]) => any) | undefined;
     "onUpdate:Selection"?: ((...args: any[]) => any) | undefined;
     onChangeInputValue?: ((...args: any[]) => any) | undefined;
 }, {
+    lang: string;
+    loading: boolean;
     return_value: boolean;
     disabled: boolean;
     empty_msg: string;
+    loader_text: string[];
+    empty_content_msg: string;
     search: boolean;
     filter_placeholder: string;
     close_on_click: boolean;

package/dist/runtime/components/argMainLayout.vue

@@ -9,8 +9,8 @@
       <div class="arg_main_layout_section" id="arg_main_layout_section">
         <slot name="body" />
       </div>
-      <argFooter />
     </div>
+    <argFooter />
   </div>
 </template>
 <script>

package/dist/runtime/components/argMultipleSelect.vue

@@ -23,7 +23,7 @@
             (nested && selected_nested.length > 0) ||
             (!nested && selected_items.length > 0)
               ? getAllSelect
-              : emptyMsg
+              : getEmptyMsg
           }}
         </p>
       </arg-simple-label>
@@ -36,16 +36,24 @@
     >
       <!--<div v-if="filter_placeholder" class="oip_select_multiple_title">{{ filter_placeholder }}</div>-->
       <div v-if="search === true" class="oip_search_container">
-        <arg-icon size="20" name="MagnifyingGlass"></arg-icon>
+        <arg-icon size="20" name="MagnifyingGlass" />
         <input
-          class="oip_search_name"
           v-model="searchName"
+          class="oip_search_name"
+          :placeholder="getPlaceholder"
           @input="changeInput()"
-          placeholder="Search"
         />
       </div>
+      <arg-data-loader
+        v-if="loading"
+        :text="getLoaderText[0]"
+        :sub-text="getLoaderText[1]"
+      />
+      <div class="oip_empty_dropdown" v-else-if="filterName.length === 0">
+        <p>{{ getEmptyContentMsg }}</p>
+      </div>
       <!-- List -->
-      <div v-if="!nested" class="oip_select_dropdown_selection_container">
+      <div v-else-if="!nested" class="oip_select_dropdown_selection_container">
         <div
           v-if="show_all"
           class="oip_select_complex_selection_loop"
@@ -77,7 +85,7 @@
                 : 'add',
             ]"
           >
-            All
+            {{ lang === "fr" ? "Tous" : "All" }}
           </div>
         </div>
         <div :class="show_all ? 'oip_select_multiple_left_margin' : ''">
@@ -210,7 +218,7 @@
                 : 'more',
             ]"
           >
-            All
+            {{ lang === "fr" ? "Tous" : "All" }}
           </div>
         </div>
         <div
@@ -293,6 +301,7 @@
 <script>
 import argIcon from "./argIcon.vue";
 import argSimpleLabel from "./argSimpleLabel.vue";
+import argDataLoader from "./argDataLoader.vue";
 import {
   onMounted,
   ref,
@@ -303,12 +312,12 @@ import {
 } from "vue";
 export default defineComponent({
   name: "argMultipleSelect",
-  components: { argIcon, argSimpleLabel },
+  components: { argIcon, argSimpleLabel, argDataLoader },
   props: {
     element_table: { type: Array, required: true },
     nested: { type: Boolean, default: false },
     search: { type: Boolean, default: true },
-    filter_placeholder: { type: String, required: false },
+    filter_placeholder: { type: String, default: null },
     show_all: { type: Boolean, default: false },
     default_select: { type: Array, required: false, default: () => [] },
     preselection_all: { type: Boolean, default: false },
@@ -316,8 +325,18 @@ export default defineComponent({
     multiple_columns: { type: Boolean, default: false },
     options_disable: { type: Array, default: () => [] },
     show_amount: { type: Boolean, default: true },
-    emptyMsg: { type: String, default: "No selection" },
-    multiple_label: { type: String, required: true }
+    empty_msg: { type: String, default: null },
+    multiple_label: { type: String, required: true },
+    loading: { type: Boolean, default: false },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    },
+    loader_text: { type: Array, default: null },
+    empty_content_msg: { type: String, default: null }
   },
   emits: ["changeElement", "update:Selection", "changeInputValue", "onClose"],
   setup(props, { emit }) {
@@ -356,6 +375,30 @@ export default defineComponent({
         selected_items.value = props.default_select;
       }
     });
+    const getEmptyMsg = computed(() => {
+      if (props.empty_msg === null) {
+        return props.lang === "fr" ? "Aucune S\xE9lection" : "No Selection";
+      } else
+        return props.empty_msg;
+    });
+    const getLoaderText = computed(() => {
+      if (props.loader_text === null) {
+        return props.lang === "fr" ? ["Chargement...", "Veuillez patienter"] : ["Loading...", "Please wait"];
+      } else
+        return props.loader_text;
+    });
+    const getPlaceholder = computed(() => {
+      if (props.filter_placeholder === null) {
+        return props.lang === "fr" ? "Rechercher une option..." : "Search options...";
+      } else
+        return props.filter_placeholder;
+    });
+    const getEmptyContentMsg = computed(() => {
+      if (props.empty_content_msg === null) {
+        return props.lang === "fr" ? "Aucun contenu n'a \xE9t\xE9 trouv\xE9" : "No content was found";
+      } else
+        return props.empty_content_msg;
+    });
     const getAllSelect = computed(() => {
       const fullSelect = props.nested ? selected_nested.value : selected_items.value;
       let filterFill = ``;
@@ -501,11 +544,9 @@ export default defineComponent({
       }
     }
     function close() {
-      if (isDisplay.value) {
-        emit("onClose");
-        isDisplay.value = false;
-        document.removeEventListener("click", close);
-      }
+      emit("onClose");
+      isDisplay.value = false;
+      document.removeEventListener("click", close);
     }
     function add_element(element, index) {
       if (!props.options_disable.includes(index)) {
@@ -719,7 +760,11 @@ export default defineComponent({
       selected_nested,
       selected_all,
       selectedCats,
-      valueFrom
+      valueFrom,
+      getEmptyMsg,
+      getLoaderText,
+      getPlaceholder,
+      getEmptyContentMsg
     };
   }
 });

package/dist/runtime/components/argMultipleSelect.vue.d.ts

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     filter_placeholder: {
         type: StringConstructor;
-        required: false;
+        default: null;
     };
     show_all: {
         type: BooleanConstructor;
@@ -70,14 +70,44 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    emptyMsg: {
+    empty_msg: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     multiple_label: {
         type: StringConstructor;
         required: true;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    loader_text: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: null;
+    };
+    empty_content_msg: {
+        type: StringConstructor;
+        default: null;
+    };
 }, {
     del_all: () => void;
     del_all_cat: (index: number) => void;
@@ -106,6 +136,10 @@ declare const _default: import("vue").DefineComponent<{
     selected_all: import("vue").Ref<boolean>;
     selectedCats: import("vue").Ref<number[]>;
     valueFrom: import("vue").Ref<never[]>;
+    getEmptyMsg: import("vue").ComputedRef<string>;
+    getLoaderText: import("vue").ComputedRef<string[]>;
+    getPlaceholder: import("vue").ComputedRef<string>;
+    getEmptyContentMsg: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onClose" | "changeElement" | "update:Selection" | "changeInputValue")[], "onClose" | "changeElement" | "update:Selection" | "changeInputValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     element_table: {
         type: {
@@ -134,7 +168,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     filter_placeholder: {
         type: StringConstructor;
-        required: false;
+        default: null;
     };
     show_all: {
         type: BooleanConstructor;
@@ -178,29 +212,64 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    emptyMsg: {
+    empty_msg: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     multiple_label: {
         type: StringConstructor;
         required: true;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    loader_text: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: null;
+    };
+    empty_content_msg: {
+        type: StringConstructor;
+        default: null;
+    };
 }>> & {
     onOnClose?: ((...args: any[]) => any) | undefined;
     onChangeElement?: ((...args: any[]) => any) | undefined;
     "onUpdate:Selection"?: ((...args: any[]) => any) | undefined;
     onChangeInputValue?: ((...args: any[]) => any) | undefined;
 }, {
+    lang: string;
+    loading: boolean;
     disabled: boolean;
     show_amount: boolean;
+    empty_msg: string;
+    loader_text: string[];
+    empty_content_msg: string;
     search: boolean;
+    filter_placeholder: string;
     default_select: any[];
     nested: boolean;
     show_all: boolean;
     preselection_all: boolean;
     multiple_columns: boolean;
     options_disable: unknown[];
-    emptyMsg: string;
 }, {}>;
 export default _default;

package/dist/runtime/components/argSimpleLabel.vue

@@ -216,6 +216,16 @@ export default defineComponent({
   margin-top: 0px;
 }
 
+.oip_empty_dropdown {
+  padding-top: 16px;
+  text-align: center;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  font-style: italic;
+  color: var(--cool-grey);
+}
+
 .oip_select_complex_selection_loop > svg.add {
   fill: var(--accent) !important;
   color: var(--pure-white) !important;

package/dist/runtime/components/argStyle.vue

@@ -714,7 +714,6 @@ button {
   padding: 4px 8px;
   align-items: center;
   gap: 8px;
-  height: 16px;
 }
 .oip_tag > svg {
   cursor: pointer;
@@ -725,31 +724,31 @@ button {
   background-color: var(--pure-white) !important;
   color: var(--lavendar-grey) !important;
 }
-.oip_tag.is_red {
+.oip_tag.is_rose {
   background: rgba(244, 63, 94, 0.1) !important;
   color: #9f1239;
 }
-.oip_tag.is_pink {
+/*.oip_tag.is_pink {
   background: rgba(236, 72, 153, 0.1) !important;
   color: #9d174d;
-}
-.oip_tag.is_lilac {
+}*/
+.oip_tag.is_fushia {
   background: rgba(217, 70, 239, 0.1) !important;
   color: #86198f;
 }
-.oip_tag.is_purple {
+/*.oip_tag.is_purple {
   background: rgba(168, 85, 247, 0.1) !important;
   color: #6b21a8;
 }
 .oip_tag.is_indigo {
   background: rgba(139, 92, 246, 0.1) !important;
   color: #5b21b6;
-}
+}*/
 .oip_tag.is_blue {
-  background: rgba(99, 102, 241, 0.1) !important;
-  color: #3730a3;
+  background: rgba(59, 130, 246, 0.1) !important;
+  color: #1e40af;
 }
-.oip_tag.is_sapphire {
+/*.oip_tag.is_sapphire {
   background: rgba(14, 165, 233, 0.1) !important;
   color: #075985;
 }
@@ -760,69 +759,37 @@ button {
 .oip_tag.is_teal {
   background: rgba(20, 184, 166, 0.1) !important;
   color: #115e59;
-}
+}*/
 .oip_tag.is_emerald {
   background: rgba(16, 185, 129, 0.1) !important;
   color: #065f46;
 }
-.oip_tag.is_green {
+/*.oip_tag.is_green {
   background: rgba(34, 197, 94, 0.1) !important;
   color: #166534;
-}
-.oip_tag.is_olive {
+}*/
+.oip_tag.is_lime {
   background: rgba(132, 204, 22, 0.1) !important;
   color: #3f6212;
 }
-.oip_tag.is_yellow {
+/*.oip_tag.is_yellow {
   background: rgba(234, 179, 8, 0.1) !important;
   color: #854d0e;
-}
-.oip_tag.is_beige {
+}*/
+.oip_tag.is_amber {
   background: rgba(245, 158, 11, 0.1) !important;
   color: #92400e;
 }
-.oip_tag.is_coral {
+/*.oip_tag.is_coral {
   background: rgba(249, 115, 22, 0.1) !important;
   color: #9a3412;
-}
+}*/
 
-.oip_tag.is_orange {
-  background: var(--orange) !important;
-  border: 1px solid var(--orange) !important;
-}
-.oip_tag.is_lime {
-  background: var(--lime) !important;
-  border: 1px solid var(--lime) !important;
-}
-.oip_tag.is_cyan {
-  background: var(--cyan) !important;
-  border: 1px solid var(--cyan) !important;
-}
-.oip_tag.is_primary {
-  background: var(--primary) !important;
-  border: 1px solid var(--primary) !important;
-}
-.oip_tag.is_accent {
-  background: var(--accent) !important;
-  border: 1px solid var(--accent) !important;
-}
-.oip_tag.is_alert {
-  background: var(--alert) !important;
-  border: 1px solid var(--alert) !important;
-}
-.oip_tag.is_warning {
-  background: var(--warning) !important;
-  border: 1px solid var(--warning) !important;
-}
-.oip_tag.is_success {
-  background: var(--success) !important;
-  border: 1px solid var(--success) !important;
-}
-.oip_tag.is_light_grey {
+.oip_tag.is_gray {
   background: var(--background) !important;
   color: var(--independence) !important;
 }
-.oip_tag.is_light_grey svg {
+.oip_tag.is_gray svg {
   stroke: var(--cool-grey);
   color: var(--cool-grey);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",