@tekkare/auriga 0.1.4 → 0.1.6

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

@@ -65,6 +65,30 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    show_amount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    max_amount: {
+        type: NumberConstructor;
+        default: null;
+    };
+    reach_max_msg: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    empty_msg: {
+        type: StringConstructor;
+        default: string;
+    };
+    complex_label: {
+        type: StringConstructor;
+        required: true;
+    };
 }, {
     add_table: import("vue").Ref<string[]>;
     del_table: import("vue").Ref<string[]>;
@@ -93,6 +117,8 @@ declare const _default: import("vue").DefineComponent<{
     smart_selection_select_item: (selected: any) => void;
     cancel_function: () => void;
     change_save_table: () => void;
+    getAllSelect: import("vue").ComputedRef<string>;
+    reachMax: import("vue").Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changeElement" | "changeAddInputValue" | "update:Selection")[], "changeElement" | "changeAddInputValue" | "update:Selection", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     element_table: {
         type: {
@@ -160,11 +186,36 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    show_amount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    max_amount: {
+        type: NumberConstructor;
+        default: null;
+    };
+    reach_max_msg: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    empty_msg: {
+        type: StringConstructor;
+        default: string;
+    };
+    complex_label: {
+        type: StringConstructor;
+        required: true;
+    };
 }>> & {
     onChangeElement?: ((...args: any[]) => any) | undefined;
     onChangeAddInputValue?: ((...args: any[]) => any) | undefined;
     "onUpdate:Selection"?: ((...args: any[]) => any) | undefined;
 }, {
+    loading: boolean;
     search_placeholder: string;
     need_apply: boolean;
     return_value: boolean;
@@ -172,5 +223,9 @@ declare const _default: import("vue").DefineComponent<{
     already_selected: string[];
     show_select_all: boolean;
     max_result: number;
+    show_amount: boolean;
+    max_amount: number;
+    reach_max_msg: string;
+    empty_msg: string;
 }, {}>;
 export default _default;

package/dist/runtime/components/argDropdownSelect.vue

@@ -1,29 +1,26 @@
 <template>
   <div>
     <!-- Simple select -->
-    <arg-simple-label
-      :disabled="disabled"
-      @click.stop="changeDisplay()"
-      :class="isDisplay ? 'open' : ''"
-    >
-      <span
-        v-if="
-          selected_item === null ||
-          selected_item.length === 0 ||
-          change_title === false
-        "
-      >
-        <slot></slot>
-      </span>
-      <arg-tooltip
-        v-else
-        class="full_width"
-        :disable="!isEllipsisActive"
-        :tooltipText="selected_item"
+    <div class="oip_select_display">
+      <p class="oip_filter_label">{{ dropdown_label }}</p>
+      <arg-simple-label
+        :disabled="disabled"
+        @click.stop="changeDisplay()"
+        :class="isDisplay ? 'open' : ''"
       >
-        <p :id="`label_${selected_item}`">{{ selected_item }}</p>
-      </arg-tooltip>
-    </arg-simple-label>
+        <arg-tooltip
+          class="full_width"
+          :disable="!isEllipsisActive"
+          :tooltipText="selected_item ? selected_item : ''"
+        >
+          <span
+            :class="selected_item ? '' : 'oip_empty_select'"
+            :id="`label_${selected_item}`"
+            >{{ selected_item === null ? empty_msg : selected_item }}</span
+          >
+        </arg-tooltip>
+      </arg-simple-label>
+    </div>
     <!-- Dropdown select -->
     <div
       :style="isDisplay === false ? 'display : none' : ''"
@@ -37,6 +34,7 @@
         <input
           class="oip_search_name"
           v-model="searchName"
+          @input="changeInput()"
           :placeholder="filter_placeholder"
         />
       </div>
@@ -109,6 +107,8 @@
 
 <script>
 import argIcon from "./argIcon.vue";
+import argTooltip from "./argTooltip.vue";
+import argSimpleLabel from "./argSimpleLabel.vue";
 import {
   onMounted,
   ref,
@@ -119,7 +119,7 @@ import {
 } from "vue";
 export default defineComponent({
   name: "argDropdownSelect",
-  components: { argIcon },
+  components: { argIcon, argTooltip, argSimpleLabel },
   props: {
     element_table: { type: Array, required: true },
     search: { type: Boolean, default: true },
@@ -128,22 +128,23 @@ export default defineComponent({
       required: false,
       default: "Search options..."
     },
-    change_title: { type: Boolean, default: true },
     close_on_click: { type: Boolean, default: true },
     default_select: { type: Number, required: false, default: null },
     watch_default_change: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
     return_value: { type: Boolean, default: false },
-    values_disabled: { type: Array, default: () => [] }
+    values_disabled: { type: Array, default: () => [] },
+    empty_msg: { type: String, default: "No selection" },
+    dropdown_label: { type: String, required: true }
   },
-  emits: ["changeElement", "update:Selection"],
+  emits: ["changeElement", "update:Selection", "changeInputValue"],
   setup(props, { emit }) {
     const isDisplay = ref(false);
     const searchName = ref("");
     const labelElement = ref();
     const isEllipsisActive = ref(false);
     const table_values = ref(props.element_table);
-    const selected_item = ref(props.element_table[props.default_select]);
+    const selected_item = props.default_select ? ref(props.element_table[props.default_select]) : ref(null);
     const selected_number = ref(props.default_select);
     watch(
       () => props.element_table,
@@ -179,6 +180,11 @@ export default defineComponent({
         }
       }
     );
+    function changeInput() {
+      setTimeout(() => {
+        emit("changeInputValue", searchName.value);
+      }, 500);
+    }
     function checkActiveEllipsis() {
       if (labelElement.value !== null) {
         if (labelElement.value.offsetWidth < labelElement.value.scrollWidth) {
@@ -232,7 +238,7 @@ export default defineComponent({
       }
     }
     onMounted(() => {
-      if (props.default_select !== null) {
+      if (props.default_select !== null && selected_item.value !== null) {
         add_element(selected_item.value, selected_number.value);
       }
       labelElement.value = document?.getElementById(
@@ -261,7 +267,8 @@ export default defineComponent({
       add_element,
       closeDropdown,
       filterName,
-      changeDisplay
+      changeDisplay,
+      changeInput
     };
   }
 });

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

@@ -25,10 +25,6 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: string;
     };
-    change_title: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     close_on_click: {
         type: BooleanConstructor;
         default: boolean;
@@ -54,20 +50,29 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
+    empty_msg: {
+        type: StringConstructor;
+        default: string;
+    };
+    dropdown_label: {
+        type: StringConstructor;
+        required: true;
+    };
 }, {
     isDisplay: import("vue").Ref<boolean>;
     searchName: import("vue").Ref<string>;
     labelElement: import("vue").Ref<any>;
     isEllipsisActive: import("vue").Ref<boolean>;
     table_values: import("vue").Ref<string[]>;
-    selected_item: import("vue").Ref<string>;
+    selected_item: import("vue").Ref<string> | import("vue").Ref<null>;
     selected_number: import("vue").Ref<number>;
     checkActiveEllipsis: () => void;
     add_element: (element: string, index: number) => void;
     closeDropdown: () => void;
     filterName: () => string[];
     changeDisplay: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changeElement" | "update:Selection")[], "changeElement" | "update:Selection", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    changeInput: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changeElement" | "update:Selection" | "changeInputValue")[], "changeElement" | "update:Selection" | "changeInputValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     element_table: {
         type: {
             (arrayLength: number): string[];
@@ -94,10 +99,6 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: string;
     };
-    change_title: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     close_on_click: {
         type: BooleanConstructor;
         default: boolean;
@@ -123,15 +124,24 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => never[];
     };
+    empty_msg: {
+        type: StringConstructor;
+        default: string;
+    };
+    dropdown_label: {
+        type: StringConstructor;
+        required: true;
+    };
 }>> & {
     onChangeElement?: ((...args: any[]) => any) | undefined;
     "onUpdate:Selection"?: ((...args: any[]) => any) | undefined;
+    onChangeInputValue?: ((...args: any[]) => any) | undefined;
 }, {
     return_value: boolean;
     disabled: boolean;
+    empty_msg: string;
     search: boolean;
     filter_placeholder: string;
-    change_title: boolean;
     close_on_click: boolean;
     default_select: number;
     watch_default_change: boolean;

package/dist/runtime/components/argFilterCard.vue

@@ -0,0 +1,130 @@
+<template>
+  <div
+    class="oip_filter_card"
+    :class="filtersOpen ? 'filter_card' : 'filter_card_collapse'"
+    @click="filtersOpen = !filtersOpen"
+  >
+    <div class="oip_row v-center space-between full-width">
+      <div class="oip_row v-center gap-8">
+        <p class="filters_title">Filters</p>
+        <div class="filters_amount">{{ filters_amount }}</div>
+        <p class="filters_clear" @click.stop="clear()">Clear all</p>
+      </div>
+      <div class="oip_row v-center gap-8">
+        <arg-icon
+          name="CaretDown"
+          size="20"
+          :class="['filter-icon', filtersOpen ? 'icon-rotate' : '']"
+        />
+        <span class="filters_collapse">{{
+          filtersOpen ? "Hide" : "Show"
+        }}</span>
+      </div>
+    </div>
+    <div class="filters_section" @click.stop>
+      <div class="filters_row oip_row v-center gap-16 wrap">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ref,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argFilterCard",
+  props: {
+    filters_amount: { type: Number, default: 0 }
+  },
+  emits: ["clearFilters"],
+  setup(props, { emit }) {
+    const filtersOpen = ref(false);
+    function clear() {
+      emit("clearFilters");
+    }
+    return {
+      filtersOpen,
+      clear
+    };
+  }
+});
+</script>
+
+<style scoped>
+.oip_filter_card {
+  display: flex;
+  max-width: 1008px;
+  padding: 16px 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 8px;
+  gap: 16px;
+  border: 1px solid var(--dividers);
+  backdrop-filter: blur(12px);
+  transition: all ease 0.7s;
+  cursor: pointer;
+}
+
+.filter_card {
+  max-height: 5000px;
+  overflow: visible;
+  background: var(--pure-white);
+}
+
+.filter_card_collapse {
+  max-height: 26px;
+  overflow: hidden;
+  background: rgba(245, 245, 249, 0.8);
+}
+
+.full-width {
+  width: 100%;
+}
+
+.filter-icon {
+  transition: transform 0.5s;
+}
+
+.icon-rotate {
+  transform: rotate(180deg);
+}
+
+.filters_title {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: normal;
+}
+
+.filters_amount {
+  display: flex;
+  padding: 2px 8px;
+
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 16px;
+  border: 1px solid var(--base-dividers, #ececf2);
+}
+
+.filters_clear {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  text-decoration-line: underline;
+  color: var(--system-alert, #ef4444);
+  cursor: pointer;
+}
+
+.filters_collapse {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+}
+</style>

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

@@ -0,0 +1,19 @@
+declare const _default: import("vue").DefineComponent<{
+    filters_amount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    filtersOpen: import("vue").Ref<boolean>;
+    clear: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "clearFilters"[], "clearFilters", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    filters_amount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    onClearFilters?: ((...args: any[]) => any) | undefined;
+}, {
+    filters_amount: number;
+}, {}>;
+export default _default;