@tekkare/auriga 0.1.0

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

@@ -0,0 +1,4 @@
+declare const _default: {
+    name: string;
+};
+export default _default;

package/dist/runtime/components/argBtn.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <div
+      v-if="onlyIcon === false"
+      :class="
+        `oip_${btnStyle}_button oip_btn ` +
+        [becomeSmall === true ? 'prmt_button_big' : '']
+      "
+    >
+      <span :class="{ oip_button_is_loading: loading }" class="oip_button_flex">
+        <span v-if="prefixIcon">
+          <arg-icon :name="prefixIcon" size="20" :color="getIconColor" />
+        </span>
+        <slot></slot>
+        <span v-if="suffixIcon">
+          <arg-icon :name="suffixIcon" size="20" :color="getIconColor" />
+        </span>
+      </span>
+      <span class="oip_button_loading" v-if="loading">
+        <div class="oip_button_spinner">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </span>
+    </div>
+
+    <div
+      v-if="becomeSmall === true || onlyIcon === true"
+      :class="
+        `oip_${btnStyle}_icon_button oip_btn ` +
+        [onlyIcon === false ? 'prmt_button_small' : '']
+      "
+    >
+      <span class="oip_button_loading" v-if="loading">
+        <div class="oip_button_spinner">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </span>
+      <arg-icon
+        :name="icon"
+        :color="btnStyle == 'primary' ? 'var(--pure-white)' : ''"
+        size="20px"
+        :class="{ oip_button_is_loading: loading }"
+      />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "argBtn"
+};
+</script>
+<script setup lang="ts">
+import argIcon from "./argIcon.vue";
+import { onMounted, ref, computed, defineProps, defineEmits } from "vue";
+
+const btnProps = defineProps({
+  btnStyle: { type: String, default: "primary" },
+  becomeSmall: { type: Boolean, default: true },
+  icon: { type: String, default: "Spinner" },
+  onlyIcon: { type: Boolean, default: false },
+  prefixIcon: { type: String, default: null },
+  suffixIcon: { type: String, default: null },
+  loading: { type: Boolean, default: false },
+});
+
+const getIconColor = computed(() => {
+  const finalColor = ref("");
+  if (
+    ["primary", "tertiary", "terciary", "dark", "green", "red"].includes(
+      btnProps.btnStyle
+    )
+  ) {
+    finalColor.value = "var(--pure-white)";
+  } else if (btnProps.btnStyle === "secondary") {
+    finalColor.value = "var(--wild-blue-yonder)";
+  } else if (btnProps.btnStyle === "outlined") {
+    finalColor.value = "var(--primary)";
+  } else if (btnProps.btnStyle === "skeleton") {
+    finalColor.value = "var(--independence)";
+  } else if (btnProps.btnStyle === "disable") {
+    finalColor.value = "var(--cool-grey)";
+  } else if (btnProps.btnStyle === "success") {
+    finalColor.value = "var(--system-success)";
+  } else if (btnProps.btnStyle === "warning") {
+    finalColor.value = "var(--system-alert)";
+  }
+  return finalColor.value;
+});
+</script>
+
+<style scoped>
+@media screen and (min-width: 1001px) {
+  .prmt_button_small {
+    display: none !important;
+  }
+}
+@media screen and (max-width: 1000px) {
+  .prmt_button_big {
+    display: none !important;
+  }
+}
+</style>

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

@@ -0,0 +1,4 @@
+declare const _default: {
+    name: string;
+};
+export default _default;

package/dist/runtime/components/argComplexSelect.vue

@@ -0,0 +1,558 @@
+<template>
+  <div>
+    <!-- Simple select -->
+    <arg-simple-label
+      :disabled="disabled"
+      id="simple-select-complex"
+      @click="changeDisplay()"
+      :class="isDisplay ? 'open' : ''"
+    >
+      <slot></slot>
+    </arg-simple-label>
+    <!-- Complex select -->
+    <div
+      :style="isDisplay === false ? 'display : none' : ''"
+      id="select-complex"
+      class="oip_select_complex_block"
+      @click.stop
+    >
+      <div class="oip_select_complex_header">
+        <h1 class="oip_select_complex_header_title">
+          {{
+            !!select_placeholder ? `${select_placeholder} select` : "Select "
+          }}
+        </h1>
+      </div>
+      <div v-if="!!smart_selection_table" class="oip_select_complex_smart">
+        <h2 class="oip_select_complex_smart_title">Smart Selection</h2>
+        <div class="oip_select_complex_smart_selection">
+          <!-- Tags -->
+          <!-- List here -->
+          <div
+            v-for="(item, index) of smart_selection_table"
+            :key="index"
+            :class="[
+              'oip_tag',
+              !!smart_selection_selected &&
+              smart_selection_selected.name === item.name
+                ? 'is_primary'
+                : 'is_disabled',
+            ]"
+            @click="smart_selection_select_item(item)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div class="oip_select_complex_all_selection">
+        <div class="oip_select_complex_add_selection">
+          <div class="oip_select_complex_all_title">
+            <div class="oip_select_complex_all_tittle_left">Available</div>
+            <div
+              v-if="show_select_all"
+              class="oip_select_complex_all_tittle_right add"
+              @click="add_all_element"
+            >
+              Select all
+            </div>
+          </div>
+          <div class="oip_search_container">
+            <arg-icon size="20" name="MagnifyingGlass"></arg-icon>
+            <input
+              class="oip_search_name"
+              :placeholder="search_placeholder"
+              v-model="searchNameAdd"
+              @input="changeInput"
+            />
+            <arg-icon
+              v-if="searchNameAdd && searchNameAdd.length > 0"
+              size="20"
+              name="XCircle"
+              @click="
+                searchNameAdd = '';
+                changeInput();
+              "
+            ></arg-icon>
+          </div>
+          <!-- List -->
+          <div class="oip_select_complex_selection_container">
+            <div
+              class="oip_select_complex_selection_loop add"
+              v-for="(element, index) of filterNameAdd"
+              :key="index"
+              @mouseover="hoverAdd = index"
+              @mouseleave="hoverAdd = null"
+              @click="add_element(element)"
+            >
+              <arg-icon
+                size="16"
+                :name="hoverAdd === index ? 'PlusCircleFill' : 'PlusCircle'"
+              ></arg-icon>
+              <div class="oip_select_complex_selection_loop_name">
+                {{ element }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="oip_select_complex_del_selection">
+          <div class="oip_select_complex_all_title">
+            <div class="oip_select_complex_all_tittle_left">Selected</div>
+            <div
+              class="oip_select_complex_all_tittle_right del"
+              @click="del_all_element"
+            >
+              Clear all
+            </div>
+          </div>
+          <div class="oip_search_container">
+            <arg-icon size="20" name="MagnifyingGlass"></arg-icon>
+            <input
+              class="oip_search_name"
+              :placeholder="search_placeholder"
+              v-model="searchNameDel"
+            />
+            <arg-icon
+              v-if="searchNameDel && searchNameDel.length > 0"
+              size="20"
+              name="XCircle"
+              @click="searchNameDel = ''"
+            ></arg-icon>
+          </div>
+          <!-- List -->
+          <div class="oip_select_complex_selection_container">
+            <div
+              class="oip_select_complex_selection_loop del"
+              v-for="(element, index) of filterNameDel"
+              :key="index"
+              @mouseover="hoverRemove = index"
+              @mouseleave="hoverRemove = null"
+              @click="del_element(element)"
+            >
+              <arg-icon
+                size="16"
+                :name="
+                  hoverRemove === index ? 'MinusCircleFill' : 'MinusCircle'
+                "
+              ></arg-icon>
+              <div class="oip_select_complex_selection_loop_name">
+                {{ element }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="need_apply" class="oip_select_complex_footer">
+        <arg-btn @click="cancel_function()" btnStyle="secondary"
+          >Cancel</arg-btn
+        >
+        <arg-btn @click="apply_function()" btnStyle="primary">Apply</arg-btn>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "argComplexSelect"
+};
+</script>
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits, watch } from "vue";
+import argIcon from "./argIcon.vue";
+import argSimpleLabel from "./argSimpleLabel.vue";
+import argBtn from "./argBtn.vue";
+
+const props = defineProps({
+  element_table: { type: Array<string>, required: true },
+  search_placeholder: { type: String, default: "Search" },
+  need_apply: { type: Boolean, default: false },
+  select_placeholder: { type: String, required: false },
+  smart_selection_table: { type: Array, required: false },
+  return_value: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  already_selected: {
+    type: Array<string>,
+    default: () => [],
+  },
+  show_select_all: { type: Boolean, default: false },
+  max_result: { type: Number, default: 500 },
+});
+
+const add_table = ref([""]);
+const del_table = ref([""]);
+const isDisplay = ref(false);
+const save_table = ref({ add: [""], del: [""] });
+const smart_selection_selected = ref();
+const searchNameAdd = ref("");
+const searchNameDel = ref("");
+const uid = ref(0);
+const hoverAdd = ref(null);
+const hoverRemove = ref(null);
+
+const emit = defineEmits([
+  "changeElement",
+  "changeAddInputValue",
+  "update:Value",
+]);
+
+del_table.value = Object.assign([], [...new Set(props.already_selected)]);
+add_table.value = Object.assign(
+  [],
+  [...new Set(props.element_table)].filter(
+    (item: string) => !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: string[]) => {
+    del_table.value = Object.assign([], [...new Set(props.already_selected)]);
+    add_table.value = Object.assign(
+      [],
+      [...new Set(new_element_table)].filter(
+        (item: string) => !del_table.value.includes(item)
+      )
+    );
+    save_table.value.add = Object.assign(
+      [],
+      [...new Set(new_element_table)].filter(
+        (item) => !del_table.value.includes(item)
+      )
+    );
+    if (!props.need_apply) {
+      apply_function();
+    }
+  }
+);
+
+watch(
+  () => props.already_selected,
+  (new_selected: string[]) => {
+    del_table.value = Object.assign([], [...new Set(new_selected)]);
+    add_table.value = Object.assign(
+      [],
+      [...new Set(props.element_table)].filter(
+        (item: string) => !del_table.value.includes(item)
+      )
+    );
+    save_table.value.add = Object.assign(
+      [],
+      [...new Set(props.element_table)].filter(
+        (item) => !del_table.value.includes(item)
+      )
+    );
+    if (!props.need_apply) {
+      apply_function();
+    }
+  }
+);
+
+const filterNameAdd = computed(() => {
+  if (searchNameAdd.value !== null) {
+    return add_table.value
+      .filter((element) =>
+        element.toLowerCase().includes(searchNameAdd.value.toLowerCase())
+      )
+      .slice(0, props.max_result);
+  } else return add_table.value.slice(0, props.max_result);
+});
+const filterNameDel = computed(() => {
+  if (searchNameDel.value !== null) {
+    return del_table.value.filter((element) =>
+      element.toLowerCase().includes(searchNameAdd.value.toLowerCase())
+    );
+  } else return del_table.value;
+});
+
+function changeInput() {
+  emit("changeAddInputValue", searchNameAdd);
+}
+
+function isInViewport(el: HTMLElement) {
+  const rect = el.getBoundingClientRect();
+  return (
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
+function changeDisplay() {
+  if (props.disabled === false) {
+    if (isDisplay.value === true) {
+      isDisplay.value = !isDisplay.value;
+    } else {
+      isDisplay.value = !isDisplay.value;
+      setTimeout(() => {
+        document?.addEventListener("click", close);
+      }, 100);
+    }
+    const elem = document?.getElementById("select_complex");
+    const simpleElem = document?.getElementById("simple_select_complex");
+    if (elem !== null && simpleElem !== null) {
+      elem.style.display = "";
+      elem.style.left = "";
+      const bounding = elem.getBoundingClientRect();
+      elem.style.left = !isInViewport(elem)
+        ? `${
+            simpleElem.getBoundingClientRect().right +
+            window.scrollX -
+            bounding.width
+          }px`
+        : "";
+    }
+  }
+}
+function close() {
+  if (isDisplay.value === true) {
+    isDisplay.value = false;
+    document.removeEventListener("click", close);
+  }
+}
+
+function add_element(element: string) {
+  smart_selection_selected.value = undefined;
+  del_table.value.push(element);
+  add_table.value.splice(add_table.value.indexOf(element), 1);
+  if (!props.need_apply) {
+    apply_function();
+  }
+}
+
+function del_element(element: string) {
+  smart_selection_selected.value = undefined;
+  add_table.value.push(element);
+  del_table.value.splice(del_table.value.indexOf(element, 1));
+  if (!props.need_apply) {
+    apply_function();
+  }
+}
+
+function add_all_element() {
+  smart_selection_selected.value = undefined;
+  del_table.value = Object.assign([], [...new Set(props.element_table)]);
+  add_table.value = [];
+  if (!props.need_apply) {
+    apply_function();
+  }
+}
+
+function del_all_element() {
+  smart_selection_selected.value = undefined;
+  add_table.value = Object.assign([], [...new Set(props.element_table)]);
+  del_table.value = [];
+  if (!props.need_apply) {
+    apply_function();
+  }
+}
+
+function apply_function() {
+  change_save_table();
+  if (!props.return_value) {
+    emit(
+      "changeElement",
+      del_table.value.map((elem) => props.element_table.indexOf(elem))
+    );
+    emit(
+      "update:Value",
+      del_table.value.map((elem) => props.element_table.indexOf(elem))
+    );
+  } else {
+    emit(
+      "changeElement",
+      del_table.value.map((elem) => elem)
+    );
+    emit(
+      "update:Value",
+      del_table.value.map((elem) => elem)
+    );
+  }
+  if (props.need_apply) {
+    close();
+  }
+}
+
+function smart_selection_select_item(selected: any) {
+  if (props.smart_selection_table !== selected) {
+    del_all_element();
+    selected.item.forEach((index: string | number) => {
+      if (typeof index == "string") {
+        if (
+          typeof props.element_table[props.element_table.indexOf(index)] !==
+          "undefined"
+        ) {
+          del_table.value.push(
+            props.element_table[props.element_table.indexOf(index)]
+          );
+          add_table.value.splice(
+            add_table.value.indexOf(
+              props.element_table[props.element_table.indexOf(index)]
+            ),
+            1
+          );
+        }
+      } else if (typeof index === "number") {
+        if (typeof props.element_table[index] !== "undefined") {
+          del_table.value.push(props.element_table[index]);
+          add_table.value.splice(
+            add_table.value.indexOf(props.element_table[index]),
+            1
+          );
+        }
+      }
+    });
+    smart_selection_selected.value = selected;
+  }
+  if (!props.need_apply) {
+    apply_function();
+  }
+}
+
+function cancel_function() {
+  add_table.value = save_table.value.add;
+  del_table.value = save_table.value.del;
+  close();
+}
+
+function change_save_table() {
+  save_table.value = { add: [], del: [] };
+  save_table.value.add = add_table.value;
+  save_table.value.del = del_table.value;
+}
+</script>
+
+<style scoped>
+.oip_select_complex_del_selection {
+  padding: 16px;
+  flex: 1;
+}
+
+.oip_select_complex_add_selection {
+  padding: 16px;
+  width: auto;
+  flex: 1;
+  border-right: 1px solid var(--dividers);
+}
+
+.oip_select_complex_all_tittle_right.add {
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 22px;
+  vertical-align: bottom;
+  color: var(--primary);
+  cursor: pointer;
+}
+
+.oip_select_complex_all_tittle_right.del {
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 22px;
+  vertical-align: bottom;
+  color: var(--alert);
+  cursor: pointer;
+}
+
+.oip_select_complex_all_title {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.oip_select_complex_all_tittle_left {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--independence);
+  padding-right: 12px;
+  border-right: 1px solid var(--more);
+}
+
+.oip_select_complex_all_selection {
+  display: flex;
+}
+
+.oip_select_complex_footer {
+  border-top: 1px solid var(--more);
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+  padding: 28px 36px;
+  background-color: var(--pure-white);
+  border-radius: 0 0 12px 12px;
+}
+
+.oip_select_complex_smart_title {
+  margin-bottom: 12px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.oip_select_complex_smart_selection {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.oip_select_complex_smart_selection > .oip_tag {
+  cursor: pointer;
+}
+
+.oip_select_complex_smart {
+  padding: 16px;
+  margin-bottom: 0px;
+}
+
+.oip_select_complex_block {
+  z-index: 12;
+  margin-top: 15px;
+  position: absolute;
+  width: 780px;
+  border: 1px solid var(--more);
+  background: var(--demi-fond);
+  border-radius: 12px;
+  box-shadow: var(--overlay-shadow);
+}
+
+.oip_select_complex_header {
+  border-bottom: 1px solid var(--more);
+  background-color: var(--pure-white);
+  padding: 16px;
+  border-radius: 12px 12px 0 0;
+}
+
+.oip_select_complex_header_title {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
+}
+
+.oip_select_complex_selection_loop > svg.add {
+  fill: var(--accent) !important;
+  color: var(--pure-white) !important;
+}
+
+.oip_tag.is_disable {
+  cursor: pointer !important;
+}
+
+.oip_select_complex_selection_loop > svg.add {
+  width: 19px;
+  height: 19px;
+  margin: -2px;
+}
+
+h1 {
+  margin: 0px !important;
+}
+</style>

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

@@ -0,0 +1,4 @@
+declare const _default: {
+    name: string;
+};
+export default _default;