@tekkare/auriga 0.1.24 → 0.1.25

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>
@@ -40,113 +40,78 @@
         <input
           v-model="searchName"
           class="oip_search_name"
-          placeholder="Search"
+          :placeholder="getPlaceholder"
           @input="changeInput()"
         />
       </div>
-      <arg-data-loader v-if="loading" />
-      <div v-else>
-        <!-- List -->
-        <div v-if="!nested" class="oip_select_dropdown_selection_container">
-          <div
-            v-if="show_all"
-            class="oip_select_complex_selection_loop"
-            @click="
+      <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-else-if="!nested" class="oip_select_dropdown_selection_container">
+        <div
+          v-if="show_all"
+          class="oip_select_complex_selection_loop"
+          @click="
+            selected_all || getOptions.length === selected_items.length
+              ? del_all()
+              : add_all()
+          "
+        >
+          <arg-icon
+            :class="
+              !selected_all && getOptions.length !== selected_items.length
+                ? 'del'
+                : 'add'
+            "
+            thickness="24"
+            size="16px"
+            :name="
               selected_all || getOptions.length === selected_items.length
-                ? del_all()
-                : add_all()
+                ? 'CheckSquareFill'
+                : 'Square'
             "
+          />
+          <div
+            :class="[
+              'oip_select_complex_selection_loop_name',
+              !selected_all && getOptions.length !== selected_items.length
+                ? 'del'
+                : 'add',
+            ]"
           >
-            <arg-icon
-              :class="
-                !selected_all && getOptions.length !== selected_items.length
-                  ? 'del'
-                  : 'add'
-              "
-              thickness="24"
-              size="16px"
-              :name="
-                selected_all || getOptions.length === selected_items.length
-                  ? 'CheckSquareFill'
-                  : 'Square'
-              "
-            />
-            <div
-              :class="[
-                'oip_select_complex_selection_loop_name',
-                !selected_all && getOptions.length !== selected_items.length
-                  ? 'del'
-                  : 'add',
-              ]"
-            >
-              All
-            </div>
+            {{ lang === "fr" ? "Tous" : "All" }}
           </div>
-          <div :class="show_all ? 'oip_select_multiple_left_margin' : ''">
-            <div v-if="multiple_columns" class="oip_row v-start gap-16">
-              <div v-for="(table, tabIndex) of filterName" :key="tabIndex">
-                <div
-                  v-for="(element, index) of table"
-                  :key="index"
-                  class="oip_select_complex_selection_loop multiple"
-                  :class="
-                    options_disable.includes(index + tabIndex * 7)
-                      ? 'disabled'
-                      : ''
-                  "
-                  @click="
-                    selected_items.includes(element)
-                      ? del_element(element, index + tabIndex * 7)
-                      : add_element(element, index + tabIndex * 7)
-                  "
-                >
-                  <arg-icon
-                    v-if="
-                      tabIndex === 0
-                        ? options_disable.includes(index)
-                        : options_disable.includes(index + tabIndex * 7)
-                    "
-                    name="MinusSquareDisable"
-                    size="16"
-                    color="var(--independence)"
-                    class="disable"
-                  />
-                  <arg-icon
-                    v-else
-                    :class="selected_items.includes(element) ? 'add' : ''"
-                    size="16px"
-                    thickness="24"
-                    :name="
-                      selected_items.includes(element)
-                        ? 'CheckSquareFill'
-                        : 'Square'
-                    "
-                  />
-                  <div
-                    :class="[
-                      'oip_select_complex_selection_loop_name',
-                      selected_items.includes(element) ? 'add' : 'del',
-                    ]"
-                  >
-                    {{ element }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-else>
+        </div>
+        <div :class="show_all ? 'oip_select_multiple_left_margin' : ''">
+          <div v-if="multiple_columns" class="oip_row v-start gap-16">
+            <div v-for="(table, tabIndex) of filterName" :key="tabIndex">
               <div
-                v-for="(element, index) of filterName"
+                v-for="(element, index) of table"
                 :key="index"
                 class="oip_select_complex_selection_loop multiple"
-                :class="options_disable.includes(index) ? 'disabled' : ''"
+                :class="
+                  options_disable.includes(index + tabIndex * 7)
+                    ? 'disabled'
+                    : ''
+                "
                 @click="
                   selected_items.includes(element)
-                    ? del_element(element, index)
-                    : add_element(element, index)
+                    ? del_element(element, index + tabIndex * 7)
+                    : add_element(element, index + tabIndex * 7)
                 "
               >
                 <arg-icon
-                  v-if="options_disable.includes(index)"
+                  v-if="
+                    tabIndex === 0
+                      ? options_disable.includes(index)
+                      : options_disable.includes(index + tabIndex * 7)
+                  "
                   name="MinusSquareDisable"
                   size="16"
                   color="var(--independence)"
@@ -167,7 +132,6 @@
                   :class="[
                     'oip_select_complex_selection_loop_name',
                     selected_items.includes(element) ? 'add' : 'del',
-                    options_disable.includes(index) ? 'disabled' : '',
                   ]"
                 >
                   {{ element }}
@@ -175,119 +139,156 @@
               </div>
             </div>
           </div>
-        </div>
-        <div v-else class="oip_select_dropdown_selection_container">
-          <div
-            v-if="show_all"
-            class="oip_select_complex_selection_loop"
-            @click="
-              selected_all || getOptions.length === nestedSelectedLength
-                ? del_all()
-                : add_all()
-            "
-          >
-            <arg-icon
-              :class="
-                !selected_all && getOptions.length !== nestedSelectedLength
-                  ? 'del'
-                  : selected_all || getOptions.length === nestedSelectedLength
-                  ? 'add'
-                  : 'more'
-              "
-              thickness="24"
-              size="16px"
-              :name="
-                selected_all || getOptions.length === nestedSelectedLength
-                  ? 'CheckSquareFill'
-                  : 'Square'
-              "
-            />
+          <div v-else>
             <div
-              :class="[
-                'oip_select_complex_selection_loop_name',
-                !selected_all && getOptions.length !== nestedSelectedLength
-                  ? 'del'
-                  : selected_all || getOptions.length === nestedSelectedLength
-                  ? 'add'
-                  : 'more',
-              ]"
+              v-for="(element, index) of filterName"
+              :key="index"
+              class="oip_select_complex_selection_loop multiple"
+              :class="options_disable.includes(index) ? 'disabled' : ''"
+              @click="
+                selected_items.includes(element)
+                  ? del_element(element, index)
+                  : add_element(element, index)
+              "
             >
-              All
+              <arg-icon
+                v-if="options_disable.includes(index)"
+                name="MinusSquareDisable"
+                size="16"
+                color="var(--independence)"
+                class="disable"
+              />
+              <arg-icon
+                v-else
+                :class="selected_items.includes(element) ? 'add' : ''"
+                size="16px"
+                thickness="24"
+                :name="
+                  selected_items.includes(element)
+                    ? 'CheckSquareFill'
+                    : 'Square'
+                "
+              />
+              <div
+                :class="[
+                  'oip_select_complex_selection_loop_name',
+                  selected_items.includes(element) ? 'add' : 'del',
+                  options_disable.includes(index) ? 'disabled' : '',
+                ]"
+              >
+                {{ element }}
+              </div>
             </div>
           </div>
+        </div>
+      </div>
+      <div v-else class="oip_select_dropdown_selection_container">
+        <div
+          v-if="show_all"
+          class="oip_select_complex_selection_loop"
+          @click="
+            selected_all || getOptions.length === nestedSelectedLength
+              ? del_all()
+              : add_all()
+          "
+        >
+          <arg-icon
+            :class="
+              !selected_all && getOptions.length !== nestedSelectedLength
+                ? 'del'
+                : selected_all || getOptions.length === nestedSelectedLength
+                ? 'add'
+                : 'more'
+            "
+            thickness="24"
+            size="16px"
+            :name="
+              selected_all || getOptions.length === nestedSelectedLength
+                ? 'CheckSquareFill'
+                : 'Square'
+            "
+          />
           <div
             :class="[
-              show_all
-                ? 'oip_select_multiple_left_margin cate_left_margin'
-                : '',
-              multiple_columns ? 'cate_row' : 'cate_col',
+              'oip_select_complex_selection_loop_name',
+              !selected_all && getOptions.length !== nestedSelectedLength
+                ? 'del'
+                : selected_all || getOptions.length === nestedSelectedLength
+                ? 'add'
+                : 'more',
             ]"
           >
-            <div v-for="(element, index) of filterNested" :key="index">
+            {{ lang === "fr" ? "Tous" : "All" }}
+          </div>
+        </div>
+        <div
+          :class="[
+            show_all ? 'oip_select_multiple_left_margin cate_left_margin' : '',
+            multiple_columns ? 'cate_row' : 'cate_col',
+          ]"
+        >
+          <div v-for="(element, index) of filterNested" :key="index">
+            <div
+              class="oip_select_complex_selection_loop"
+              @click="
+                selectedCats.includes(index)
+                  ? del_all_cat(index)
+                  : add_all_cat(index)
+              "
+            >
+              <arg-icon
+                :class="
+                  !selectedCats.includes(index)
+                    ? 'del'
+                    : selectedCats.includes(index)
+                    ? 'add'
+                    : 'more'
+                "
+                thickness="24"
+                size="16px"
+                :name="
+                  selectedCats.includes(index) ? 'CheckSquareFill' : 'Square'
+                "
+              />
+              <div
+                :class="[
+                  'oip_select_complex_selection_loop_name',
+                  !selectedCats.includes(index)
+                    ? 'del'
+                    : selectedCats.includes(index)
+                    ? 'add'
+                    : 'more',
+                ]"
+              >
+                {{ element.title }}
+              </div>
+            </div>
+            <div class="left_margin">
               <div
-                class="oip_select_complex_selection_loop"
+                v-for="(option, optIndex) of element.values"
+                :key="optIndex"
+                class="oip_select_complex_selection_loop multiple"
                 @click="
-                  selectedCats.includes(index)
-                    ? del_all_cat(index)
-                    : add_all_cat(index)
+                  nestedIncludes(option, index)
+                    ? del_nested_element(index, option)
+                    : add_nested_element(index, option)
                 "
               >
                 <arg-icon
-                  :class="
-                    !selectedCats.includes(index)
-                      ? 'del'
-                      : selectedCats.includes(index)
-                      ? 'add'
-                      : 'more'
-                  "
-                  thickness="24"
+                  :class="nestedIncludes(option, index) ? 'add' : ''"
                   size="16px"
+                  thickness="24"
                   :name="
-                    selectedCats.includes(index) ? 'CheckSquareFill' : 'Square'
+                    nestedIncludes(option, index) ? 'CheckSquareFill' : 'Square'
                   "
                 />
                 <div
                   :class="[
                     'oip_select_complex_selection_loop_name',
-                    !selectedCats.includes(index)
-                      ? 'del'
-                      : selectedCats.includes(index)
-                      ? 'add'
-                      : 'more',
+                    nestedIncludes(option, index) ? 'add' : 'del',
                   ]"
                 >
-                  {{ element.title }}
-                </div>
-              </div>
-              <div class="left_margin">
-                <div
-                  v-for="(option, optIndex) of element.values"
-                  :key="optIndex"
-                  class="oip_select_complex_selection_loop multiple"
-                  @click="
-                    nestedIncludes(option, index)
-                      ? del_nested_element(index, option)
-                      : add_nested_element(index, option)
-                  "
-                >
-                  <arg-icon
-                    :class="nestedIncludes(option, index) ? 'add' : ''"
-                    size="16px"
-                    thickness="24"
-                    :name="
-                      nestedIncludes(option, index)
-                        ? 'CheckSquareFill'
-                        : 'Square'
-                    "
-                  />
-                  <div
-                    :class="[
-                      'oip_select_complex_selection_loop_name',
-                      nestedIncludes(option, index) ? 'add' : 'del',
-                    ]"
-                  >
-                    {{ option }}
-                  </div>
+                  {{ option }}
                 </div>
               </div>
             </div>
@@ -316,7 +317,7 @@ export default defineComponent({
     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 },
@@ -324,9 +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" },
+    empty_msg: { type: String, default: null },
     multiple_label: { type: String, required: true },
-    loading: { type: Boolean, default: false }
+    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 }) {
@@ -365,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 = ``;
@@ -726,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,9 +70,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    emptyMsg: {
+    empty_msg: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     multiple_label: {
         type: StringConstructor;
@@ -82,6 +82,32 @@ declare const _default: import("vue").DefineComponent<{
         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;
@@ -110,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: {
@@ -138,7 +168,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     filter_placeholder: {
         type: StringConstructor;
-        required: false;
+        default: null;
     };
     show_all: {
         type: BooleanConstructor;
@@ -182,9 +212,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    emptyMsg: {
+    empty_msg: {
         type: StringConstructor;
-        default: string;
+        default: null;
     };
     multiple_label: {
         type: StringConstructor;
@@ -194,22 +224,52 @@ declare const _default: import("vue").DefineComponent<{
         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

@@ -212,6 +212,20 @@ export default defineComponent({
   min-height: 10px;
 }
 
+.oip_select_dropdown_selection_container:only-child {
+  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;