@tekkare/auriga 0.1.4 → 0.1.6

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

@@ -0,0 +1,119 @@
+declare const _default: import("vue").DefineComponent<{
+    options: {
+        type: ObjectConstructor;
+        required: false;
+        default(): {};
+    };
+    series: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    type: {
+        type: StringConstructor;
+        required: true;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    categories: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    colors: {
+        type: ArrayConstructor;
+        required: false;
+        default: () => string[];
+    };
+    withPercentages: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    compactValues: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    french: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLegend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipOptions: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+}, {
+    percentage: (partialValue: any, totalValue: any) => number;
+    chartKey: import("vue").Ref<number>;
+    chartType: import("vue").ComputedRef<string>;
+    chartOptions: import("vue").ComputedRef<Record<string, any>>;
+}, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: ObjectConstructor;
+        required: false;
+        default(): {};
+    };
+    series: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    type: {
+        type: StringConstructor;
+        required: true;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    categories: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    colors: {
+        type: ArrayConstructor;
+        required: false;
+        default: () => string[];
+    };
+    withPercentages: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    compactValues: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    french: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLegend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tooltipOptions: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+}>>, {
+    options: Record<string, any>;
+    width: string;
+    height: string;
+    colors: unknown[];
+    withPercentages: boolean;
+    compactValues: boolean;
+    french: boolean;
+    hideLegend: boolean;
+    tooltipOptions: Record<string, any>;
+}, {}>;
+export default _default;

package/dist/runtime/components/argCheckbox.vue

@@ -0,0 +1,153 @@
+<template>
+  <div
+    class="filter_box"
+    @focus="selectOption = true"
+    @focusout="selectOption = false"
+    tabindex="0"
+    :class="selectOption ? 'open' : ''"
+  >
+    <div @click="selectFilter()">
+      <arg-icon
+        :name="iconFilter"
+        :class="[
+          'flex',
+          returnValue ? 'filter_icon_check' : 'filter_icon_select',
+          disable ? 'disable' : 'filter_icon_select',
+        ]"
+        size="24"
+        :color="iconColor"
+      />
+    </div>
+    <p>{{ filterTitle }}</p>
+    <arg-tooltip
+      v-if="infoIcon"
+      :tooltip-text="tooltipText"
+      class="filter_tooltip flex"
+    >
+      <arg-icon name="Info" color="var(--cool-grey)" size="16" />
+    </arg-tooltip>
+  </div>
+</template>
+
+<script>
+import argIcon from "./argIcon.vue";
+import {
+  ref,
+  computed,
+  watch,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argCheckbox",
+  components: { argIcon },
+  props: {
+    filterTitle: {
+      type: String,
+      required: true
+    },
+    tooltipText: {
+      type: String,
+      default: ""
+    },
+    infoIcon: {
+      type: Boolean,
+      default: false
+    },
+    defaultSelect: {
+      type: Boolean,
+      default: false
+    },
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["handleClick", "update:Click"],
+  setup(props, { emit }) {
+    const returnValue = ref(false);
+    const selectOption = ref(false);
+    returnValue.value = props.defaultSelect;
+    watch(
+      () => props.defaultSelect,
+      (new_default_select) => {
+        returnValue.value = new_default_select;
+      }
+    );
+    const iconFilter = computed(() => {
+      if (props.disable) {
+        return "MinusSquareDisable";
+      } else {
+        if (returnValue.value === true) {
+          return "CheckSquareFill";
+        } else
+          return "Square";
+      }
+    });
+    const iconColor = computed(() => {
+      if (props.disable) {
+        return "var(--independence)";
+      } else {
+        if (returnValue.value === true) {
+          return "var(--accent)";
+        } else
+          return "var(--wild-blue-yonder)";
+      }
+    });
+    function selectFilter() {
+      if (!props.disable) {
+        returnValue.value = !returnValue.value;
+        emit("handleClick", returnValue);
+        emit("update:Click", returnValue);
+      }
+    }
+    return {
+      iconFilter,
+      iconColor,
+      selectFilter,
+      selectOption,
+      returnValue
+    };
+  }
+});
+</script>
+<style scoped>
+.filter_box {
+  background: var(--pure-white);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px 12px;
+  gap: 8px;
+  border: 1px solid var(--dividers);
+  border-radius: 8px;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 16px;
+  height: 40px;
+  width: 228px;
+}
+.filter_tooltip {
+  margin-left: auto !important;
+}
+.filter_icon_select,
+.filter_icon_check {
+  cursor: pointer;
+}
+.filter_icon_select:hover {
+  color: var(--primary) !important;
+}
+.filter_icon_check:hover {
+  color: var(--primary-hover2) !important;
+}
+.disable {
+  cursor: initial;
+}
+
+.disable:hover {
+  color: var(--independence) !important;
+}
+
+.flex {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,58 @@
+declare const _default: import("vue").DefineComponent<{
+    filterTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    tooltipText: {
+        type: StringConstructor;
+        default: string;
+    };
+    infoIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defaultSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    iconFilter: import("vue").ComputedRef<"MinusSquareDisable" | "CheckSquareFill" | "Square">;
+    iconColor: import("vue").ComputedRef<"var(--wild-blue-yonder)" | "var(--independence)" | "var(--accent)">;
+    selectFilter: () => void;
+    selectOption: import("vue").Ref<boolean>;
+    returnValue: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("handleClick" | "update:Click")[], "handleClick" | "update:Click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    filterTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    tooltipText: {
+        type: StringConstructor;
+        default: string;
+    };
+    infoIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defaultSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onHandleClick?: ((...args: any[]) => any) | undefined;
+    "onUpdate:Click"?: ((...args: any[]) => any) | undefined;
+}, {
+    disable: boolean;
+    tooltipText: string;
+    infoIcon: boolean;
+    defaultSelect: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/components/argComplexSelect.vue

@@ -1,14 +1,28 @@
 <template>
   <div>
     <!-- Simple select -->
-    <arg-simple-label
-      :disabled="disabled"
-      id="simple-select-complex"
-      @click.stop="changeDisplay()"
-      :class="isDisplay ? 'open' : ''"
-    >
-      <slot></slot>
-    </arg-simple-label>
+    <div class="oip_select_display">
+      <p class="oip_filter_label">{{ complex_label }}</p>
+      <arg-simple-label
+        :disabled="disabled"
+        :show_amount="show_amount"
+        :amount_value="del_table.length"
+        id="simple-select-complex"
+        @click="changeDisplay()"
+        :class="isDisplay ? 'open' : ''"
+      >
+        <span
+          :class="[
+            show_amount === true ? 'oip_crop big' : 'oip_crop small',
+            del_table.map((elem) => elem).length > 0 ? '' : 'oip_empty_select',
+          ]"
+        >
+          {{
+            del_table.map((elem) => elem).length > 0 ? getAllSelect : empty_msg
+          }}
+        </span>
+      </arg-simple-label>
+    </div>
     <!-- Complex select -->
     <div
       :style="isDisplay === false ? 'display : none' : ''"
@@ -44,6 +58,7 @@
           </div>
         </div>
       </div>
+      <p v-if="reachMax" class="warning_text">{{ reach_max_msg }}</p>
       <div class="oip_select_complex_all_selection">
         <div class="oip_select_complex_add_selection">
           <div class="oip_select_complex_all_title">
@@ -55,6 +70,12 @@
             >
               Select all
             </div>
+            <div
+              v-if="max_amount !== null"
+              class="oip_select_complex_all_tittle_right"
+            >
+              Maximum selection: {{ max_amount }} items
+            </div>
           </div>
           <div class="oip_search_container">
             <arg-icon size="20" name="MagnifyingGlass"></arg-icon>
@@ -75,7 +96,7 @@
             ></arg-icon>
           </div>
           <!-- List -->
-          <div class="oip_select_complex_selection_container">
+          <div v-if="!loading" class="oip_select_complex_selection_container">
             <div
               class="oip_select_complex_selection_loop add"
               v-for="(element, index) of filterNameAdd"
@@ -86,13 +107,29 @@
             >
               <arg-icon
                 size="16"
-                :name="hoverAdd === index ? 'PlusCircleFill' : 'PlusCircle'"
+                :class="
+                  max_amount !== null && del_table.length >= max_amount
+                    ? 'disable'
+                    : ''
+                "
+                :name="
+                  hoverAdd === index ||
+                  (max_amount !== null &&
+                    del_table.length >= max_amount &&
+                    !del_table.includes(element) &&
+                    !del_table.includes(index))
+                    ? 'PlusCircleFill'
+                    : 'PlusCircle'
+                "
               ></arg-icon>
               <div class="oip_select_complex_selection_loop_name">
                 {{ element }}
               </div>
             </div>
           </div>
+          <div v-else class="oip_select_complex_selection_container">
+            <arg-data-loader />
+          </div>
         </div>
         <div class="oip_select_complex_del_selection">
           <div class="oip_select_complex_all_title">
@@ -154,7 +191,9 @@
 import argSimpleLabel from "./argSimpleLabel.vue";
 import argBtn from "./argBtn.vue";
 import argIcon from "./argIcon.vue";
+import argDataLoader from "./argDataLoader.vue";
 import {
+  onBeforeMount,
   ref,
   computed,
   watch,
@@ -162,7 +201,7 @@ import {
 } from "vue";
 export default defineComponent({
   name: "argComplexSelect",
-  components: { argSimpleLabel, argBtn, argIcon },
+  components: { argSimpleLabel, argBtn, argIcon, argDataLoader },
   props: {
     element_table: { type: Array, required: true },
     search_placeholder: { type: String, default: "Search" },
@@ -176,7 +215,16 @@ export default defineComponent({
       default: () => []
     },
     show_select_all: { type: Boolean, default: false },
-    max_result: { type: Number, default: 500 }
+    max_result: { type: Number, default: 500 },
+    show_amount: { type: Boolean, default: true },
+    max_amount: { type: Number, default: null },
+    reach_max_msg: {
+      type: String,
+      default: "You've reached the maximum amount of items you can select"
+    },
+    loading: { type: Boolean, default: false },
+    empty_msg: { type: String, default: "No selection" },
+    complex_label: { type: String, required: true }
   },
   emits: ["changeElement", "changeAddInputValue", "update:Selection"],
   setup(props, { emit }) {
@@ -190,25 +238,28 @@ export default defineComponent({
     const uid = ref(0);
     const hoverAdd = ref(null);
     const hoverRemove = ref(null);
-    del_table.value = Object.assign([], [...new Set(props.already_selected)]);
-    add_table.value = Object.assign(
-      [],
-      [...new Set(props.element_table)].filter(
-        (item) => !del_table.value.includes(item)
-      )
-    );
-    save_table.value.add = Object.assign(
-      [],
-      [...new Set(props.element_table)].filter(
-        (item) => !del_table.value.includes(item)
-      )
-    );
-    uid.value = Math.floor(Math.random() * (100 - 1) + 1);
-    if (props.already_selected.length > 0) {
-      if (!props.need_apply) {
-        apply_function();
+    const reachMax = ref(false);
+    onBeforeMount(() => {
+      del_table.value = Object.assign([], [...new Set(props.already_selected)]);
+      add_table.value = Object.assign(
+        [],
+        [...new Set(props.element_table)].filter(
+          (item) => !del_table.value.includes(item)
+        )
+      );
+      save_table.value.add = Object.assign(
+        [],
+        [...new Set(props.element_table)].filter(
+          (item) => !del_table.value.includes(item)
+        )
+      );
+      uid.value = Math.floor(Math.random() * (100 - 1) + 1);
+      if (props.already_selected.length > 0) {
+        if (!props.need_apply) {
+          apply_function();
+        }
       }
-    }
+    });
     watch(
       () => props.element_table,
       (new_element_table) => {
@@ -254,6 +305,18 @@ export default defineComponent({
         }
       }
     );
+    const getAllSelect = computed(() => {
+      const fullSelect = del_table.value.map((elem) => elem);
+      let filterFill = ``;
+      for (let i = 0; i < fullSelect.length; i++) {
+        if (i === 0) {
+          filterFill = fullSelect[i];
+        } else {
+          filterFill = `${filterFill}, ${fullSelect[i]}`;
+        }
+      }
+      return filterFill;
+    });
     const filterNameAdd = computed(() => {
       if (searchNameAdd.value !== null) {
         return add_table.value.filter(
@@ -271,7 +334,9 @@ export default defineComponent({
         return del_table.value;
     });
     function changeInput() {
-      emit("changeAddInputValue", searchNameAdd);
+      setTimeout(() => {
+        emit("changeAddInputValue", searchNameAdd);
+      }, 500);
     }
     function isInViewport(el) {
       const rect = el.getBoundingClientRect();
@@ -303,19 +368,25 @@ export default defineComponent({
     }
     function add_element(element) {
       smart_selection_selected.value = void 0;
-      del_table.value.push(element);
-      add_table.value.splice(add_table.value.indexOf(element), 1);
-      if (!props.need_apply) {
-        apply_function();
-      }
+      if (props.max_amount === null || props.max_amount !== null && del_table.value.length < props.max_amount) {
+        del_table.value.push(element);
+        add_table.value.splice(add_table.value.indexOf(element), 1);
+        if (!props.need_apply) {
+          apply_function();
+        }
+      } else
+        reachMax.value = true;
     }
     function del_element(element) {
       smart_selection_selected.value = void 0;
       add_table.value.push(element);
-      del_table.value.splice(del_table.value.indexOf(element, 1));
+      del_table.value.splice(del_table.value.indexOf(element), 1);
       if (!props.need_apply) {
         apply_function();
       }
+      if (reachMax.value === true && del_table.value.length < props.max_amount) {
+        reachMax.value = false;
+      }
     }
     function add_all_element() {
       smart_selection_selected.value = void 0;
@@ -424,7 +495,9 @@ export default defineComponent({
       apply_function,
       smart_selection_select_item,
       cancel_function,
-      change_save_table
+      change_save_table,
+      getAllSelect,
+      reachMax
     };
   }
 });
@@ -443,6 +516,13 @@ export default defineComponent({
   border-right: 1px solid var(--dividers);
 }
 
+.oip_select_complex_all_tittle_right {
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 22px;
+  vertical-align: bottom;
+}
+
 .oip_select_complex_all_tittle_right.add {
   font-weight: 500;
   font-size: 12px;
@@ -451,6 +531,9 @@ export default defineComponent({
   color: var(--primary);
   cursor: pointer;
 }
+.oip_select_complex_selection_loop.add svg.disable {
+  color: var(--cool-grey) !important;
+}
 
 .oip_select_complex_all_tittle_right.del {
   font-weight: 500;
@@ -544,14 +627,32 @@ export default defineComponent({
 .oip_tag.is_disable {
   cursor: pointer !important;
 }
+</style>
 
+<style scoped>
 .oip_select_complex_selection_loop > svg.add {
   width: 19px;
   height: 19px;
   margin: -2px;
 }
 
-h1 {
-  margin: 0px !important;
+.warning_text {
+  color: var(--system-alert);
+  margin-bottom: 12px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  padding: 0px 16px;
+}
+.oip_crop {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.oip_crop.big {
+  width: 85% !important;
+}
+.oip_crop.small {
+  width: 98% !important;
 }
 </style>