@tekkare/auriga 0.2.150 → 0.2.151

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.150"
+  "version": "0.2.151"
 }

package/dist/runtime/components/argMultipleSelect.vue

@@ -3,6 +3,7 @@
     <!-- Simple select -->
     <div class="oip_select_display">
       <p
+        v-if="!selectorIcon"
         class="oip_filter_label"
         :class="labelInfo ? 'oip_row v-center gap-4' : ''"
       >
@@ -17,6 +18,8 @@
         :amount_value="nested ? getNestedLength : selected_items.length"
         @click="changeDisplay()"
         :class="isDisplay ? 'open' : ''"
+        :selector-icon="selectorIcon"
+        :tooltip-icon="tooltipIcon"
       >
         <p
           :class="[
@@ -292,7 +295,7 @@
                 class="oip_select_complex_selection_loop multiple"
                 @click="
                   nestedIncludes(option, index)
-                    ? del_nested_element(index, option)
+                    ? del_nested_element(index, option, optIndex)
                     : add_nested_element(index, option)
                 "
               >
@@ -365,7 +368,9 @@ export default defineComponent({
     fuzzyThreshold: { type: Number, default: 0.5 },
     filterSearch: { type: Boolean, default: true },
     labelInfo: { type: Boolean, default: false },
-    fuzzyStart: { type: Number, default: 1 }
+    fuzzyStart: { type: Number, default: 1 },
+    selectorIcon: { type: String || null, default: null },
+    tooltipIcon: { type: String || null, default: null }
   },
   emits: [
     "changeElement",
@@ -412,15 +417,21 @@ export default defineComponent({
         element_table_copy.value = new_element_table;
         if (props.preselection_all) {
           add_all();
-        } else if (props.default_select && props.default_select.length > 0 && !props.nested) {
-          if (!props.default_select.every(
-            (a) => element_table_copy.value.includes(a)
-          )) {
-            element_table_copy.value = [
-              ...new Set(element_table_copy.value.concat(props.default_select))
-            ];
+        } else if (props.default_select && props.default_select.length > 0) {
+          if (props.nested) {
+            selected_nested.value = [...new Set(props.default_select)];
+          } else {
+            if (!props.default_select.every(
+              (a) => element_table_copy.value.includes(a)
+            )) {
+              element_table_copy.value = [
+                ...new Set(
+                  element_table_copy.value.concat(props.default_select)
+                )
+              ];
+            }
+            selected_items.value = [...new Set(props.default_select)];
           }
-          selected_items.value = [...new Set(props.default_select)];
         }
       }
     );
@@ -428,7 +439,9 @@ export default defineComponent({
       () => props.default_select,
       (new_selected) => {
         if (new_selected && new_selected.length > 0) {
-          selected_items.value = [...new Set(props.default_select)];
+          if (props.nested) {
+            selected_nested.value = [...new Set(props.default_select)];
+          } else selected_items.value = [...new Set(props.default_select)];
         }
       }
     );
@@ -444,11 +457,13 @@ export default defineComponent({
         `multiple_search_input_${props.multiple_label}`
       );
       searchBar.value?.addEventListener("input", debounce(changeInput, 500));
-      element_table_copy.value = props.element_table;
+      element_table_copy.value = [...new Set(props.element_table)];
       if (props.preselection_all) {
         add_all();
       } else if (props.default_select && props.default_select.length > 0) {
-        selected_items.value = props.default_select;
+        if (props.nested) {
+          selected_nested.value = [...new Set(props.default_select)];
+        } else selected_items.value = props.default_select;
       }
     });
     onUnmounted(() => {
@@ -632,7 +647,9 @@ export default defineComponent({
     const nestedSelectedLength = computed(() => {
       let length = 0;
       for (let i = 0; i < selected_nested.value.length; i++) {
-        length += selected_nested.value[i].elements.length;
+        if (selected_nested.value[i].elements) {
+          length += selected_nested.value[i].elements.length;
+        } else length += 1;
       }
       return length;
     });
@@ -713,7 +730,6 @@ export default defineComponent({
       }
     }
     function add_nested_element(index, elem) {
-      console.log(index, elem);
       if (selected_nested.value.length > 0) {
         if (selected_nested.value.filter((a) => a.cat === index).length > 0) {
           selected_nested.value[selected_nested.value.findIndex(
@@ -745,7 +761,7 @@ export default defineComponent({
         selected_nested.value.map((a) => a)
       );
     }
-    function del_nested_element(index, elem) {
+    function del_nested_element(index, elem, optIndex) {
       selected_all.value = false;
       if (selectedCats.value.includes(index)) {
         selectedCats.value.splice(
@@ -753,15 +769,20 @@ export default defineComponent({
           1
         );
       }
-      selected_nested.value[selected_nested.value.findIndex((a) => a.cat === index)].elements.splice(
-        selected_nested.value[selected_nested.value.findIndex(
-          (a) => a.cat === index
-        )].elements.findIndex((a) => a === elem),
-        1
-      );
       if (selected_nested.value.findIndex(
         (a) => a.cat === index
       ) !== -1) {
+        const currentOption = ref(
+          selected_nested.value.findIndex(
+            (a) => a.cat === index
+          )
+        );
+        const nestedElements = [
+          ...new Set(selected_nested.value[currentOption?.value].elements)
+        ];
+        selected_nested.value[selected_nested.value.findIndex(
+          (a) => a.cat === index
+        )].elements = nestedElements.filter((f) => f !== elem);
         if (selected_nested.value[selected_nested.value.findIndex(
           (a) => a.cat === index
         )].elements.length === 0) {
@@ -772,6 +793,12 @@ export default defineComponent({
             1
           );
         }
+      } else {
+        const currentOption = ref(element_table_copy.value[index]);
+        const nestedElements = [...new Set(currentOption?.value.values)];
+        selected_nested.value[selected_nested.value.findIndex(
+          (a) => a.cat === index
+        )].elements = nestedElements.filter((f) => f !== elem);
       }
       emit(
         "changeElement",
@@ -824,7 +851,6 @@ export default defineComponent({
     function add_all_cat(index) {
       selectedCats.value.push(index);
       if (!element_table_copy.value[index].values) {
-        console.log("hey hey");
         selected_nested.value.push({
           cat: index,
           title: element_table_copy.value[index].title,
@@ -853,9 +879,6 @@ export default defineComponent({
     }
     function del_all_cat(index) {
       selected_all.value = false;
-      if (selectedCats.value.includes(index)) {
-        selectedCats.value.splice(selectedCats.value.indexOf(index), 1);
-      }
       for (let i = 0; i < selected_nested.value.filter((f) => f.cat === index).length; i++) {
         selected_nested.value.splice(
           selected_nested.value.findIndex(
@@ -864,6 +887,9 @@ export default defineComponent({
           1
         );
       }
+      if (selectedCats.value.includes(index)) {
+        selectedCats.value.splice(selectedCats.value.indexOf(index), 1);
+      }
       emit(
         "changeElement",
         selected_nested.value.map((a) => a)

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

@@ -34,10 +34,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     default_select: {
         type: {
-            (arrayLength: number): String[];
-            (...items: String[]): String[];
-            new (arrayLength: number): String[];
-            new (...items: String[]): String[];
+            (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[];
@@ -128,13 +128,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    selectorIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    tooltipIcon: {
+        type: StringConstructor;
+        default: null;
+    };
 }>, {
     getNestedLength: import("vue").ComputedRef<number>;
     del_all: () => void;
     del_all_cat: (index: number) => void;
     add_all_cat: (index: number) => void;
     add_all: () => void;
-    del_nested_element: (index: number, elem: string) => void;
+    del_nested_element: (index: number, elem: string, optIndex: number) => void;
     add_nested_element: (index: number, elem: any) => void;
     del_element: (element: string, index: number) => void;
     add_element: (element: string, index: number) => void;
@@ -200,10 +208,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     default_select: {
         type: {
-            (arrayLength: number): String[];
-            (...items: String[]): String[];
-            new (arrayLength: number): String[];
-            new (...items: String[]): String[];
+            (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[];
@@ -294,6 +302,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    selectorIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    tooltipIcon: {
+        type: StringConstructor;
+        default: null;
+    };
 }>> & Readonly<{
     onOnClose?: ((...args: any[]) => any) | undefined;
     onChangeElement?: ((...args: any[]) => any) | undefined;
@@ -315,12 +331,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     labelInfo: boolean;
     fuzzyStart: number;
     filter_placeholder: string;
-    default_select: String[];
+    default_select: any[];
     nested: boolean;
     show_all: boolean;
     preselection_all: boolean;
     multiple_columns: boolean;
     options_disable: unknown[];
+    selectorIcon: string;
+    tooltipIcon: string;
 }, {}, {
     argIcon: any;
     argSimpleLabel: any;

package/dist/runtime/components/argSimpleLabel.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="oip_select_wrap">
-    <div class="oip_select_block" :class="disabled ? 'disabled' : ''">
+    <div
+      v-if="!selectorIcon"
+      class="oip_select_block"
+      :class="disabled ? 'disabled' : ''"
+    >
       <span class="oip_select_label" :class="disabled ? 'disabled' : ''">
         <slot></slot>
       </span>
@@ -15,18 +19,25 @@
         thickness="32"
       />
     </div>
+    <div v-else class="oip_select_icon">
+      <arg-tooltip v-if="tooltipIcon" :tooltip-text="tooltipIcon" dir="top">
+        <arg-icon :name="selectorIcon" />
+      </arg-tooltip>
+      <arg-icon v-else :name="selectorIcon" color="var(--medium)" size="24" />
+    </div>
   </div>
 </template>
 
 <script>
 import argIcon from "./argIcon.vue";
+import argTooltip from "./argTooltip.vue";
 import {
   onMounted,
   defineComponent
 } from "vue";
 export default defineComponent({
   name: "argSimpleLabel",
-  components: { argIcon },
+  components: { argIcon, argTooltip },
   props: {
     disabled: {
       type: Boolean,
@@ -35,7 +46,9 @@ export default defineComponent({
     empty: { type: Boolean, default: false },
     show_amount: { type: Boolean, default: false },
     amount_value: { type: Number, default: null },
-    sortIcon: { type: Boolean, default: false }
+    sortIcon: { type: Boolean, default: false },
+    selectorIcon: { type: String || null, default: null },
+    tooltipIcon: { type: String || null, default: null }
   },
   setup() {
     onMounted(() => {
@@ -52,7 +65,7 @@ const drawSquircle=(ctx,geom,radii,smooth,lineWidth,color)=>{const defaultFill=c
 </script>
 
 <style>
-.oip_select_dropdown_block{background:var(--demi-fond);border:1.5px solid var(--light);border-radius:12px;box-shadow:var(--overlay-shadow);display:flex;flex-direction:column;margin-top:15px;max-height:500px;min-width:230px;padding:16px;position:absolute;z-index:12}.oip_select_block{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;cursor:pointer;display:flex;gap:4px;-webkit-mask-image:paint(squircle);mask-image:paint(squircle);padding:12px;position:relative;width:196px;--squircle-radius:8px;--squircle-smooth:1}.filter_box:hover,.filter_wrap:hover>.filter_box:not(.open),.oip_select_block:hover,.oip_select_dropdown_block:hover,.prmt_parent_switch:hover{border:1.5px solid var(--primary-primary-20,#d3e4ff)!important}.filter_box.open,.oip_select_dropdown_block.open,.oip_select_wrap.open>.oip_select_block,.prmt_parent_switch.open{border:1.5px solid var(--primary)!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filter_wrap.open,.oip_select_wrap.open,.switch_wrapper.open{filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.oip_select_block.open>svg{color:var(--primary)!important}.oip_select_block.disabled{background:var(--light)!important;cursor:not-allowed}.oip_select_label .prmt_tooltip{display:flex}.oip_select_label .prmt_tooltip span,.oip_select_label>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:98%}.oip_select_label{color:var(--darkest);font-size:14px;font-weight:700;line-height:16px;max-height:16px;width:90%}.oip_select_block svg{flex-shrink:0!important}.oip_select_label.disabled{color:var(--dark)}.oip_select_caret_down{float:right;margin-left:auto}.oip_select_complex_selection_loop_name{font-style:normal;line-height:160%;width:-moz-fit-content;width:fit-content}.oip_select_complex_selection_loop.del>svg{color:var(--system-alert)!important;flex-shrink:0}.oip_select_complex_selection_loop.add>svg{color:var(--primary)!important;flex-shrink:0}.oip_select_complex_selection_loop{align-self:stretch;cursor:pointer;display:flex;flex-grow:1;gap:8px;min-height:24px}.oip_select_complex_selection_container{margin:8px 0;max-height:350px;overflow-y:auto}.oip_select_complex_selection_loop_name{font-size:14px;font-weight:400;line-height:16px}.oip_search_container>svg{color:var(--medium)!important}.oip_search_name:focus-visible{outline:none}.oip_search_name::-moz-placeholder{color:var(--medium);font-size:12px;font-weight:400;line-height:20px}.oip_search_name::placeholder{color:var(--medium);font-size:12px;font-weight:400;line-height:20px}.oip_search_name{border:none;padding-left:8px;width:100%}.oip_search_container{align-items:center;align-self:stretch;background:var(--white);border:1px solid var(--light);border-radius:8px;display:flex;gap:8px;padding:8px 12px}.oip_select_dropdown_title{color:var(--darkest);font-size:14px;font-weight:500;margin-bottom:8px}.oip_select_dropdown_selection_container{display:flex;flex:1 1 auto;flex-direction:column;gap:0;margin-top:16px;min-height:10px;overflow-y:auto}.oip_select_dropdown_selection_container:only-child{margin-top:0}.oip_empty_dropdown{color:var(--dark);font-size:14px;font-style:italic;font-weight:400;line-height:16px;padding-top:16px;text-align:center}.oip_select_complex_selection_loop>svg.add{fill:var(--accent)!important;color:var(--white)!important}.arg-circle-amount{align-items:center;background:#e9f1ff;border-radius:50%;color:var(--primary);display:flex;flex-direction:column;flex-shrink:0;font-size:14px;font-style:normal;font-weight:600;gap:10px;height:20px;justify-content:center;padding:4px;position:absolute;right:34px;width:20px}.oip_empty_select{color:var(--dark);font-size:14px;font-style:italic;font-weight:400;line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oip_select_display{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.close-icon{align-items:center;background:var(--light);border-radius:100%;cursor:pointer;display:flex;justify-content:center;margin-left:auto;padding:4px}.close-icon:hover svg{color:var(--primary)!important}
+.oip_select_icon{align-items:center;border:1px solid transparent;border-radius:8px;cursor:pointer;display:flex;justify-content:center;padding:8px;transition:border .15s ease-in}.oip_select_icon:hover,.oip_select_wrap.open .oip_select_icon{border:1px solid var(--light)!important}.oip_select_wrap.open .oip_select_icon{border:1px solid var(--primary)!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.oip_select_wrap:not(.open) .oip_select_icon:hover svg{color:var(--primary)!important}.oip_select_dropdown_block{background:var(--demi-fond);border:1.5px solid var(--light);border-radius:12px;box-shadow:var(--overlay-shadow);display:flex;flex-direction:column;margin-top:15px;max-height:500px;min-width:230px;padding:16px;position:absolute;z-index:12}.oip_select_block{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;cursor:pointer;display:flex;gap:4px;-webkit-mask-image:paint(squircle);mask-image:paint(squircle);padding:12px;position:relative;width:196px;--squircle-radius:8px;--squircle-smooth:1}.filter_box:hover,.filter_wrap:hover>.filter_box:not(.open),.oip_select_block:hover,.oip_select_dropdown_block:hover,.prmt_parent_switch:hover{border:1.5px solid var(--primary-primary-20,#d3e4ff)!important}.filter_box.open,.oip_select_dropdown_block.open,.oip_select_wrap.open>.oip_select_block,.prmt_parent_switch.open{border:1.5px solid var(--primary)!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filter_wrap.open,.oip_select_wrap.open,.switch_wrapper.open{filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.oip_select_block.open>svg{color:var(--primary)!important}.oip_select_block.disabled{background:var(--light)!important;cursor:not-allowed}.oip_select_label .prmt_tooltip{display:flex}.oip_select_label .prmt_tooltip span,.oip_select_label>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:98%}.oip_select_label{color:var(--darkest);font-size:14px;font-weight:700;line-height:16px;max-height:16px;width:90%}.oip_select_block svg{flex-shrink:0!important}.oip_select_label.disabled{color:var(--dark)}.oip_select_caret_down{float:right;margin-left:auto}.oip_select_complex_selection_loop_name{font-style:normal;line-height:160%;width:-moz-fit-content;width:fit-content}.oip_select_complex_selection_loop.del>svg{color:var(--system-alert)!important;flex-shrink:0}.oip_select_complex_selection_loop.add>svg{color:var(--primary)!important;flex-shrink:0}.oip_select_complex_selection_loop{align-self:stretch;cursor:pointer;display:flex;flex-grow:1;gap:8px;min-height:24px}.oip_select_complex_selection_container{margin:8px 0;max-height:350px;overflow-y:auto}.oip_select_complex_selection_loop_name{font-size:14px;font-weight:400;line-height:16px}.oip_search_container>svg{color:var(--medium)!important}.oip_search_name:focus-visible{outline:none}.oip_search_name::-moz-placeholder{color:var(--medium);font-size:12px;font-weight:400;line-height:20px}.oip_search_name::placeholder{color:var(--medium);font-size:12px;font-weight:400;line-height:20px}.oip_search_name{border:none;padding-left:8px;width:100%}.oip_search_container{align-items:center;align-self:stretch;background:var(--white);border:1px solid var(--light);border-radius:8px;display:flex;gap:8px;padding:8px 12px}.oip_select_dropdown_title{color:var(--darkest);font-size:14px;font-weight:500;margin-bottom:8px}.oip_select_dropdown_selection_container{display:flex;flex:1 1 auto;flex-direction:column;gap:0;margin-top:16px;min-height:10px;overflow-y:auto}.oip_select_dropdown_selection_container:only-child{margin-top:0}.oip_empty_dropdown{color:var(--dark);font-size:14px;font-style:italic;font-weight:400;line-height:16px;padding-top:16px;text-align:center}.oip_select_complex_selection_loop>svg.add{fill:var(--accent)!important;color:var(--white)!important}.arg-circle-amount{align-items:center;background:#e9f1ff;border-radius:50%;color:var(--primary);display:flex;flex-direction:column;flex-shrink:0;font-size:14px;font-style:normal;font-weight:600;gap:10px;height:20px;justify-content:center;padding:4px;position:absolute;right:34px;width:20px}.oip_empty_select{color:var(--dark);font-size:14px;font-style:italic;font-weight:400;line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oip_select_display{align-items:flex-start;display:flex;flex-direction:column;gap:4px}.close-icon{align-items:center;background:var(--light);border-radius:100%;cursor:pointer;display:flex;justify-content:center;margin-left:auto;padding:4px}.close-icon:hover svg{color:var(--primary)!important}
 </style>
 <style scoped>
 .oip_select_complex_selection_loop > svg.add {

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

@@ -19,6 +19,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    selectorIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    tooltipIcon: {
+        type: StringConstructor;
+        default: null;
+    };
 }>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         type: BooleanConstructor;
@@ -40,13 +48,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    selectorIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    tooltipIcon: {
+        type: StringConstructor;
+        default: null;
+    };
 }>> & Readonly<{}>, {
     disabled: boolean;
     show_amount: boolean;
+    selectorIcon: string;
+    tooltipIcon: string;
     empty: boolean;
     amount_value: number;
     sortIcon: boolean;
 }, {}, {
     argIcon: any;
+    argTooltip: any;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/package.json

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