@tekkare/auriga 0.1.16 → 0.1.17

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.16"
+  "version": "0.1.17"
 }

package/dist/runtime/components/argBtn.vue

@@ -1,7 +1,6 @@
 <template>
-  <client-only><arg-style /></client-only>
   <div>
-    <div
+    <span
       v-if="onlyIcon === false"
       :class="
         `oip_${btnStyle}_button oip_btn ` +
@@ -26,8 +25,8 @@
           <div></div>
         </div>
       </span>
-    </div>
-    <div
+    </span>
+    <span
       v-if="becomeSmall === true || onlyIcon === true"
       :class="
         `oip_${btnStyle}_icon_button oip_btn ` +
@@ -48,7 +47,7 @@
         size="20px"
         :class="{ oip_button_is_loading: loading }"
       />
-    </div>
+    </span>
   </div>
 </template>
 

package/dist/runtime/components/argFilterCard.vue

@@ -6,10 +6,10 @@
   >
     <div class="oip_row v-center space-between full-width">
       <div class="oip_row v-center gap-8">
-        <p class="filters_title">Filters</p>
+        <p class="filters_title">{{ lang === "fr" ? "Filtres" : "Filters" }}</p>
         <div class="filters_amount">{{ filters_amount }}</div>
         <p
-          v-if="saveScope && filtersOpen"
+          v-if="haveSaveScope && filtersOpen"
           class="filters_save"
           @click.stop="save()"
         >
@@ -42,13 +42,22 @@ import {
   ref,
   defineComponent
 } from "vue";
+import argIcon from "./argIcon.vue";
 export default defineComponent({
   name: "argFilterCard",
+  components: { argIcon },
   props: {
     filters_amount: { type: Number, default: 0 },
-    saveScope: { type: Boolean, default: true },
+    haveSaveScope: { type: Boolean, default: false },
     clearMsg: { type: String, default: "Clear all" },
-    saveScopeMsg: { type: String, default: "Save scope" }
+    saveScopeMsg: { type: String, default: "Save scope" },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    }
   },
   emits: ["clearFilters", "saveScope"],
   setup(props, { emit }) {

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

@@ -3,7 +3,7 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    saveScope: {
+    haveSaveScope: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -15,6 +15,11 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }, {
     filtersOpen: import("vue").Ref<boolean>;
     clear: () => void;
@@ -24,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    saveScope: {
+    haveSaveScope: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -36,12 +41,18 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & {
     onClearFilters?: ((...args: any[]) => any) | undefined;
     onSaveScope?: ((...args: any[]) => any) | undefined;
 }, {
-    saveScope: boolean;
+    lang: string;
     filters_amount: number;
+    haveSaveScope: boolean;
     clearMsg: string;
     saveScopeMsg: string;
 }, {}>;

package/dist/runtime/components/argInfoBar.vue

@@ -39,7 +39,7 @@ export default defineComponent({
     },
     sourceAmount: {
       type: Number,
-      default: 0
+      required: true
     }
   },
   emits: ["openInfo"],

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

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     sourceAmount: {
         type: NumberConstructor;
-        default: number;
+        required: true;
     };
 }, {
     infoOpen: import("vue").Ref<boolean>;
@@ -24,12 +24,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     sourceAmount: {
         type: NumberConstructor;
-        default: number;
+        required: true;
     };
 }>> & {
     onOpenInfo?: ((...args: any[]) => any) | undefined;
 }, {
     infoArray: unknown[];
-    sourceAmount: number;
 }, {}>;
 export default _default;

package/dist/runtime/components/argInfoSection.vue

@@ -81,7 +81,7 @@ export default defineComponent({
     },
     sourceAmount: {
       type: Number,
-      default: 0
+      required: true
     }
   },
   emits: ["update:Open", "update:Menu"],

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

@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     sourceAmount: {
         type: NumberConstructor;
-        default: number;
+        required: true;
     };
 }, {
     infoOpen: import("vue").Ref<boolean>;
@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     sourceAmount: {
         type: NumberConstructor;
-        default: number;
+        required: true;
     };
 }>> & {
     "onUpdate:Menu"?: ((...args: any[]) => any) | undefined;
@@ -49,7 +49,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     openInfo: boolean;
     infoArray: unknown[];
-    sourceAmount: number;
     activeMenu: string;
 }, {}>;
 export default _default;

package/dist/runtime/components/argMenuItem.vue

@@ -14,14 +14,14 @@
 </template>
 <script>
 import argIcon from "./argIcon.vue";
-import argStyle from "./argStyle.vue";
 import argFlag from "./argFlag.vue";
+import argTooltip from "./argTooltip.vue";
 import {
   defineComponent
 } from "vue";
 export default defineComponent({
   name: "argMenuItem",
-  components: { argIcon, argStyle, argFlag },
+  components: { argIcon, argFlag, argTooltip },
   props: {
     to: { type: String, required: true },
     //Require eiter an icon or a country flag

package/dist/runtime/components/argMenuLink.vue

@@ -35,9 +35,10 @@ import {
   defineComponent
 } from "vue";
 import argIcon from "./argIcon.vue";
+import argTooltip from "./argTooltip.vue";
 export default defineComponent({
   name: "argMenuLink",
-  components: { argIcon },
+  components: { argIcon, argTooltip },
   props: {
     icon: { type: String, required: true },
     label: { type: String, required: true },

package/dist/runtime/components/argMultipleSelect.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <arg-style />
     <!-- Simple select -->
     <div class="oip_select_display">
       <p class="oip_filter_label">{{ multiple_label }}</p>
@@ -69,7 +68,7 @@
                 ? 'CheckSquareFill'
                 : 'Square'
             "
-          ></arg-icon>
+          />
           <div
             :class="[
               'oip_select_complex_selection_loop_name',
@@ -85,9 +84,9 @@
           <div v-if="multiple_columns" class="oip_row v-start gap-16">
             <div v-for="(table, tabIndex) of filterName" :key="tabIndex">
               <div
-                class="oip_select_complex_selection_loop multiple"
                 v-for="(element, index) of table"
                 :key="index"
+                class="oip_select_complex_selection_loop multiple"
                 :class="
                   options_disable.includes(index + tabIndex * 7)
                     ? 'disabled'
@@ -120,7 +119,7 @@
                       ? 'CheckSquareFill'
                       : 'Square'
                   "
-                ></arg-icon>
+                />
                 <div
                   :class="[
                     'oip_select_complex_selection_loop_name',
@@ -134,9 +133,9 @@
           </div>
           <div v-else>
             <div
-              class="oip_select_complex_selection_loop multiple"
               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)
@@ -161,7 +160,7 @@
                     ? 'CheckSquareFill'
                     : 'Square'
                 "
-              ></arg-icon>
+              />
               <div
                 :class="[
                   'oip_select_complex_selection_loop_name',
@@ -200,7 +199,7 @@
                 ? 'CheckSquareFill'
                 : 'Square'
             "
-          ></arg-icon>
+          />
           <div
             :class="[
               'oip_select_complex_selection_loop_name',
@@ -242,7 +241,7 @@
                 :name="
                   selectedCats.includes(index) ? 'CheckSquareFill' : 'Square'
                 "
-              ></arg-icon>
+              />
               <div
                 :class="[
                   'oip_select_complex_selection_loop_name',
@@ -258,9 +257,9 @@
             </div>
             <div class="left_margin">
               <div
-                class="oip_select_complex_selection_loop multiple"
                 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)
@@ -274,7 +273,7 @@
                   :name="
                     nestedIncludes(option, index) ? 'CheckSquareFill' : 'Square'
                   "
-                ></arg-icon>
+                />
                 <div
                   :class="[
                     'oip_select_complex_selection_loop_name',
@@ -311,7 +310,7 @@ export default defineComponent({
     search: { type: Boolean, default: true },
     filter_placeholder: { type: String, required: false },
     show_all: { type: Boolean, default: false },
-    default_select: { type: Array, required: false },
+    default_select: { type: Array, required: false, default: () => [] },
     preselection_all: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     multiple_columns: { type: Boolean, default: false },
@@ -325,7 +324,7 @@ export default defineComponent({
     const selected_items = ref([]);
     const selected_nested = ref([]);
     const isDisplay = ref(false);
-    const searchName = ref(null);
+    const searchName = ref("");
     const selected_all = ref(false);
     const selectedCats = ref([]);
     const valueFrom = ref([]);
@@ -343,6 +342,16 @@ export default defineComponent({
         }
       }
     );
+    watch(
+      () => props.default_select,
+      (new_selected) => {
+        if (new_selected && new_selected.length > 0) {
+          selected_items.value = new_selected.map(
+            (index) => element_table_copy.value[index]
+          );
+        }
+      }
+    );
     onBeforeMount(() => {
       element_table_copy.value = props.element_table;
       if (props.preselection_all) {
@@ -352,8 +361,6 @@ export default defineComponent({
           (index) => element_table_copy.value[index]
         );
       }
-      emit("changeElement", selected_items.value);
-      emit("update:Selection", selected_items.value);
     });
     const getAllSelect = computed(() => {
       const fullSelect = props.nested ? selected_nested.value : selected_items.value;
@@ -403,7 +410,7 @@ export default defineComponent({
           return props.element_table;
       } else {
         let selectTable = [];
-        let finalTable = [];
+        const finalTable = [];
         if (searchName.value !== null) {
           selectTable = [
             ...new Set(
@@ -429,7 +436,7 @@ export default defineComponent({
       }
     });
     const filterNested = computed(() => {
-      if (searchName.value !== null || searchName.value && searchName.value.length === 0) {
+      if (searchName.value !== null || searchName.value && searchName.value !== "") {
         return element_table_copy.value.filter(
           (element) => element.values.includes(
             searchName.value || searchName.value.toLowerCase()
@@ -439,7 +446,7 @@ export default defineComponent({
         return props.element_table;
     });
     const optionsWithoutDisabled = computed(() => {
-      let optionsArray = [Number];
+      const optionsArray = [Number];
       for (let i = 0; i < element_table_copy.value.length; i++) {
         if (!props.options_disable.includes(i)) {
           optionsArray.push(element_table_copy.value[i]);
@@ -509,16 +516,28 @@ export default defineComponent({
     function add_element(element, index) {
       if (!props.options_disable.includes(index)) {
         selected_items.value.push(element);
-        emit("changeElement", selected_items.value);
-        emit("update:Selection", selected_items.value);
+        emit(
+          "changeElement",
+          selected_items.value.map((a) => a)
+        );
+        emit(
+          "update:Selection",
+          selected_items.value.map((a) => a)
+        );
       }
     }
     function del_element(element, index) {
       selected_all.value = false;
       if (!props.options_disable.includes(index)) {
         selected_items.value.splice(selected_items.value.indexOf(element), 1);
-        emit("changeElement", selected_items.value);
-        emit("update:Selection", selected_items.value);
+        emit(
+          "changeElement",
+          selected_items.value.map((a) => a)
+        );
+        emit(
+          "update:Selection",
+          selected_items.value.map((a) => a)
+        );
       }
     }
     function add_nested_element(index, elem) {
@@ -539,8 +558,14 @@ export default defineComponent({
           title: element_table_copy.value[index].title,
           elements: [elem]
         });
-      emit("changeElement", selected_nested.value);
-      emit("update:Selection", selected_nested.value);
+      emit(
+        "changeElement",
+        selected_nested.value.map((a) => a)
+      );
+      emit(
+        "update:Selection",
+        selected_nested.value.map((a) => a)
+      );
     }
     function del_nested_elements(index, elem) {
       selected_all.value = false;
@@ -570,8 +595,14 @@ export default defineComponent({
           );
         }
       }
-      emit("changeElement", selected_nested.value);
-      emit("update:Selection", selected_nested.value);
+      emit(
+        "changeElement",
+        selected_nested.value.map((a) => a)
+      );
+      emit(
+        "update:Selection",
+        selected_nested.value.map((a) => a)
+      );
     }
     function add_all() {
       selected_all.value = true;
@@ -600,11 +631,11 @@ export default defineComponent({
       }
       emit(
         "changeElement",
-        props.nested ? selected_nested.value : selected_items.value
+        props.nested ? selected_nested.value.map((a) => a) : selected_items.value.map((a) => a)
       );
       emit(
         "update:Selection",
-        props.nested ? selected_nested.value : selected_items.value
+        props.nested ? selected_nested.value.map((a) => a) : selected_items.value.map((a) => a)
       );
     }
     function add_all_cat(index) {
@@ -612,15 +643,21 @@ export default defineComponent({
       if (selected_nested.value.filter((f) => f.cat === index).length === 0) {
         selected_nested.value.push({
           cat: index,
-          title: element_table.value[index].title,
+          title: element_table_copy.value[index].title,
           elements: element_table_copy.value[index].values
         });
       } else
         selected_nested.value[selected_nested.value.findIndex(
           (f) => f.cat === index
         )].elements = element_table_copy.value[index].values;
-      emit("changeElement", selected_nested.value);
-      emit("update:Selection", selected_nested.value);
+      emit(
+        "changeElement",
+        selected_nested.value.map((a) => a)
+      );
+      emit(
+        "update:Selection",
+        selected_nested.value.map((a) => a)
+      );
     }
     function del_all_cat(index) {
       selected_all.value = false;
@@ -635,16 +672,28 @@ export default defineComponent({
           1
         );
       }
-      emit("changeElement", selected_nested.value);
-      emit("update:Selection", selected_nested.value);
+      emit(
+        "changeElement",
+        selected_nested.value.map((a) => a)
+      );
+      emit(
+        "update:Selection",
+        selected_nested.value.map((a) => a)
+      );
     }
     function del_all() {
       selected_all.value = false;
       selected_items.value = [];
       selected_nested.value = [];
       selectedCats.value = [];
-      emit("changeElement", selected_items.value);
-      emit("update:Selection", selected_items.value);
+      emit(
+        "changeElement",
+        selected_items.value.map((a) => a)
+      );
+      emit(
+        "update:Selection",
+        selected_items.value.map((a) => a)
+      );
     }
     onUnmounted(() => {
       document.removeEventListener("click", close);

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

@@ -1,6 +1,19 @@
 declare const _default: import("vue").DefineComponent<{
     element_table: {
-        type: ArrayConstructor;
+        type: {
+            (arrayLength: number): any[];
+            (...items: any[]): any[];
+            new (arrayLength: number): any[];
+            new (...items: any[]): any[];
+            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;
+        };
         required: true;
     };
     nested: {
@@ -20,8 +33,22 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     default_select: {
-        type: ArrayConstructor;
+        type: {
+            (arrayLength: number): any[];
+            (...items: any[]): any[];
+            new (arrayLength: number): any[];
+            new (...items: any[]): any[];
+            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;
+        };
         required: false;
+        default: () => never[];
     };
     preselection_all: {
         type: BooleanConstructor;
@@ -57,7 +84,7 @@ declare const _default: import("vue").DefineComponent<{
     add_all_cat: (index: number) => void;
     add_all: () => void;
     del_nested_elements: (index: number, elem: string) => void;
-    add_nested_element: (index: number, elem: string) => void;
+    add_nested_element: (index: number, elem: any) => void;
     del_element: (element: string, index: number) => void;
     add_element: (element: string, index: number) => void;
     close: () => void;
@@ -68,20 +95,33 @@ declare const _default: import("vue").DefineComponent<{
     changeInput: () => void;
     nestedSelectedLength: import("vue").ComputedRef<number>;
     optionsWithoutDisabled: import("vue").ComputedRef<NumberConstructor[]>;
-    filterNested: import("vue").ComputedRef<unknown[]>;
-    filterName: import("vue").ComputedRef<unknown[]>;
-    getOptions: import("vue").ComputedRef<NumberConstructor[]>;
+    filterNested: import("vue").ComputedRef<any[]>;
+    filterName: import("vue").ComputedRef<any[]>;
+    getOptions: import("vue").ComputedRef<any[]>;
     getAllSelect: import("vue").ComputedRef<string>;
     isDisplay: import("vue").Ref<boolean>;
-    searchName: import("vue").Ref<null>;
-    selected_items: import("vue").Ref<never[]>;
-    selected_nested: import("vue").Ref<never[]>;
+    searchName: import("vue").Ref<string>;
+    selected_items: import("vue").Ref<any[]>;
+    selected_nested: import("vue").Ref<any[]>;
     selected_all: import("vue").Ref<boolean>;
-    selectedCats: import("vue").Ref<never[]>;
+    selectedCats: import("vue").Ref<number[]>;
     valueFrom: import("vue").Ref<never[]>;
 }, 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: ArrayConstructor;
+        type: {
+            (arrayLength: number): any[];
+            (...items: any[]): any[];
+            new (arrayLength: number): any[];
+            new (...items: any[]): any[];
+            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;
+        };
         required: true;
     };
     nested: {
@@ -101,8 +141,22 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     default_select: {
-        type: ArrayConstructor;
+        type: {
+            (arrayLength: number): any[];
+            (...items: any[]): any[];
+            new (arrayLength: number): any[];
+            new (...items: any[]): any[];
+            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;
+        };
         required: false;
+        default: () => never[];
     };
     preselection_all: {
         type: BooleanConstructor;
@@ -141,6 +195,7 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     show_amount: boolean;
     search: boolean;
+    default_select: any[];
     nested: boolean;
     show_all: boolean;
     preselection_all: boolean;

package/dist/runtime/components/argScopeModal.vue

@@ -0,0 +1,303 @@
+<template>
+  <div>
+    <div :class="'arg_scope_save arg_scope_save_open'">
+      <div class="arg_save_modal">
+        <div class="arg_save_header">
+          <h1>
+            {{ lang === "fr" ? "Enregistrer mon scope" : "Save my scope" }}
+          </h1>
+          <div class="cursor-pointer" @click="closeSaveScope()">
+            <arg-icon name="X" size="16" color="var(--cool-grey)" />
+          </div>
+        </div>
+        <div class="arg_save_body">
+          <div class="oip_filter_display scope_name_input">
+            <p class="oip_filter_label">
+              {{ lang === "fr" ? "Nom scope" : "Scope name" }}*
+            </p>
+            <input
+              v-model="scopeName"
+              class="oip_simple_input"
+              :class="saveFail ? 'oip_required_input' : ''"
+              :placeholder="
+                lang === 'fr'
+                  ? 'Nom de votre scope e.g Benchmark 2023'
+                  : 'Name of your scope e.g. Benchmark 2023'
+              "
+              type="text"
+              :required="true"
+            />
+            <p v-if="saveFail" class="oip_body oip_error">
+              {{
+                lang === "fr"
+                  ? "Un nom est requis pour enregistrer votre scope!"
+                  : "Name is required to save your scope!"
+              }}
+            </p>
+          </div>
+          <div class="oip_filter_display full_width">
+            <p class="oip_filter_label">
+              {{
+                lang === "fr"
+                  ? "Décrivez votre scope (optionnel)"
+                  : "Describe your scope (optional)"
+              }}
+            </p>
+            <textarea
+              name="ScopeDescr"
+              cols="40"
+              rows="5"
+              :placeholder="
+                lang === 'fr'
+                  ? 'Votre description ici'
+                  : 'Your description here'
+              "
+            />
+          </div>
+          <div class="oip_filter_display full_width">
+            <p class="oip_filter_label">
+              {{ lang === "fr" ? "Critères" : "Criteria" }}
+            </p>
+            <div class="scope_criteria">
+              <arg-tags
+                v-for="(criteria, index) in scopeCriteria"
+                :key="index"
+                set-style="light_grey"
+                >{{ criteria }}</arg-tags
+              >
+            </div>
+          </div>
+        </div>
+        <div class="arg_save_footer">
+          <div class="footer_action">
+            <arg-btn
+              class="footer_btn"
+              :become-small="false"
+              btn-style="skeleton"
+              @onClick="closeSaveScope"
+              >{{ lang === "fr" ? "Annuler" : "Cancel" }}</arg-btn
+            >
+          </div>
+          <div class="footer_action">
+            <arg-btn
+              class="footer_btn"
+              :become-small="false"
+              btn-style="primary"
+              @onClick="saveScope"
+              >{{
+                lang === "fr"
+                  ? "Enregistrer le scope et continuer"
+                  : "Save scope and continue"
+              }}</arg-btn
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, defineComponent, watch } from "vue";
+export default defineComponent({
+  name: "argScopeModal",
+  props: {
+    scopeCriteria: {
+      type: Array,
+      required: true
+    },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    }
+  },
+  emits: ["onClose", "onSave"],
+  setup(props, { emit }) {
+    const scopeName = ref("");
+    const scopeDescr = ref("");
+    const nameFilled = ref(false);
+    const saveFail = ref(false);
+    watch(
+      () => scopeName.value,
+      (new_scope_name) => {
+        if (new_scope_name.length > 0) {
+          saveFail.value = false;
+          nameFilled.value = true;
+        }
+      }
+    );
+    function closeSaveScope() {
+      emit("onClose");
+    }
+    function saveScope() {
+      if (nameFilled.value === true) {
+        saveFail.value = false;
+        emit("onSave", { name: scopeName.value, descr: scopeDescr.value });
+        closeSaveScope();
+      } else {
+        saveFail.value = true;
+      }
+    }
+    return {
+      closeSaveScope,
+      saveScope,
+      scopeName,
+      scopeDescr,
+      nameFilled,
+      saveFail
+    };
+  }
+});
+</script>
+
+<style scoped>
+.arg_scope_save {
+  background-color: transparent;
+  transition: all ease 0.5s;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  height: 0px;
+  width: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.arg_scope_save_open {
+  z-index: 99;
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+}
+
+.arg_save_modal {
+  display: flex;
+  width: calc(100% - 164px);
+  max-width: 640px;
+  max-height: 850px;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+  border-radius: var(--m, 8px);
+  background: var(--pure-white);
+}
+
+.arg_save_header {
+  display: flex;
+  padding: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.arg_save_footer {
+  display: flex;
+  padding: 24px;
+  gap: 32px;
+  align-items: center;
+  align-self: stretch;
+  border-top: 1px solid #e5e7eb;
+}
+
+.footer_action {
+  width: 50%;
+  flex: 1 1 0;
+}
+
+.arg_save_header > h1 {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: normal;
+}
+
+.arg_save_body {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+}
+
+textarea,
+.scope_criteria {
+  border-radius: 8px;
+  border: 1.5px solid var(--dividers);
+  padding: 12px;
+  margin: 5px 0px;
+  outline: none !important;
+  width: calc(100% - 25.5px);
+  font-family: "Figtree", sans-serif !important;
+  height: 110px;
+}
+
+.scope_criteria {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+textarea::placeholder {
+  font-family: "Figtree", sans-serif !important;
+  color: var(--wild-blue-yonder);
+}
+
+.scope_name_input {
+  width: 300px;
+  max-width: 100%;
+}
+
+.full_width {
+  width: 100%;
+}
+
+.footer_action .footer_btn {
+  width: calc(100% - 24px);
+  justify-content: center;
+  white-space: wrap;
+  text-align: center;
+}
+
+.cursor-pointer {
+  cursor: pointer !important;
+}
+
+.oip_simple_input {
+  border-radius: 8px;
+  border: 1.5px solid var(--dividers);
+  padding: 12px;
+  margin: 5px 0px;
+  width: calc(100% - 24px);
+}
+.oip_simple_input::placeholder {
+  color: var(--wild-blue-yonder);
+}
+.oip_simple_input,
+.oip_simple_input:focus-visible {
+  outline: none !important;
+}
+.oip_simple_input:hover,
+textarea:hover {
+  border: 1.5px solid rgba(33, 118, 255, 0.2) !important;
+}
+.oip_simple_input:focus-within,
+textarea:focus-within {
+  border: 1.5px solid var(--primary) !important;
+  box-shadow: 0 0 0 4px rgba(33, 118, 255, 0.1) !important;
+}
+.oip_required_input,
+.oip_required_input:hover {
+  border-color: var(--system-alert) !important;
+}
+
+.oip_error {
+  color: var(--system-alert);
+}
+</style>

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

@@ -0,0 +1,34 @@
+declare const _default: import("vue").DefineComponent<{
+    scopeCriteria: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    closeSaveScope: () => void;
+    saveScope: () => void;
+    scopeName: import("vue").Ref<string>;
+    scopeDescr: import("vue").Ref<string>;
+    nameFilled: import("vue").Ref<boolean>;
+    saveFail: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onClose" | "onSave")[], "onClose" | "onSave", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    scopeCriteria: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    onOnClose?: ((...args: any[]) => any) | undefined;
+    onOnSave?: ((...args: any[]) => any) | undefined;
+}, {
+    lang: string;
+}, {}>;
+export default _default;

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

@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
     lang: {
         type: StringConstructor;
         default: string;
-        validator: (value: unknown) => boolean;
+        validator: (value: string) => boolean;
     };
     homeLink: {
         type: StringConstructor;
@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
     lang: {
         type: StringConstructor;
         default: string;
-        validator: (value: unknown) => boolean;
+        validator: (value: string) => boolean;
     };
     homeLink: {
         type: StringConstructor;

package/dist/runtime/components/argSimpleInput.vue

@@ -82,10 +82,10 @@ export default defineComponent({
 .oip_simple_input:focus-visible {
   outline: none !important;
 }
-.oip_simple_input input:hover {
+.oip_simple_input:hover {
   border: 1.5px solid rgba(33, 118, 255, 0.2) !important;
 }
-.oip_simple_input input:focus-within {
+.oip_simple_input:focus-within {
   border: 1.5px solid var(--primary) !important;
   box-shadow: 0 0 0 4px rgba(33, 118, 255, 0.1) !important;
 }

package/dist/runtime/components/argStyle.vue

@@ -297,6 +297,8 @@ button {
   max-height: 16px;
   white-space: nowrap;
   display: flex;
+  justify-content: center;
+  text-align: center;
   align-items: center;
   gap: 10px;
   position: relative;
@@ -1031,4 +1033,11 @@ button {
   gap: 24px;
   height: 100%;
 }
+
+.oip_select_display {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
 </style>

package/dist/runtime/components/argSubMenu.vue

@@ -32,10 +32,10 @@ import {
   defineComponent
 } from "vue";
 import argIcon from "./argIcon.vue";
-import argStyle from "./argStyle.vue";
+import argTooltip from "./argTooltip.vue";
 export default defineComponent({
   name: "argSubMenu",
-  components: { argIcon, argStyle },
+  components: { argIcon, argTooltip },
   props: {
     label: { type: String, required: true },
     icon: { type: String },
@@ -43,7 +43,7 @@ export default defineComponent({
     sidebarOpen: { type: Boolean, default: true }
   },
   setup(props) {
-    let openMenu = ref(props.defaultCollapseState);
+    const openMenu = ref(props.defaultCollapseState);
     return {
       openMenu
     };

package/package.json

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