@tekkare/auriga 0.1.0

package/dist/runtime/components/argDataLoader.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="oip_data_loader_container">
+    <div class="oip_data_loader">
+      <div class="oip_data_loader_text_group">
+        <h1 class="oip_data_loader_title">Doing data science</h1>
+        <h2 class="oip_data_loader_subtitle">Thanks for waiting</h2>
+      </div>
+      <div class="oip_data_loader_background_container">
+        <arg-icon
+          name="Percent"
+          color="#2176FF"
+          size="31"
+          class="oip_data_loader_icon_1"
+        />
+        <arg-icon
+          name="MagicWand"
+          color="#2176FF"
+          size="31"
+          class="oip_data_loader_icon_2"
+        />
+        <arg-icon
+          name="TestTube"
+          color="#2176FF"
+          size="31"
+          class="oip_data_loader_icon_3"
+        />
+        <div class="oip_data_loader_outer_circle">
+          <div class="oip_data_loader_inner_circle"></div>
+        </div>
+        <arg-icon
+          name="Flask"
+          color="#2176FF"
+          size="31"
+          class="oip_data_loader_icon_4"
+        />
+        <arg-icon
+          name="Lightning"
+          color="#2176FF"
+          size="31"
+          class="oip_data_loader_icon_5"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "argDataLoader"
+};
+</script>
+
+<style scoped>
+.oip_data_loader_container {
+  display: flex;
+  justify-content: center;
+  padding: 100px 20px;
+}
+.oip_data_loader {
+  position: relative;
+}
+.oip_data_loader_text_group {
+  position: relative;
+  z-index: 2;
+  margin-bottom: -5px;
+}
+.oip_data_loader_title {
+  font-family: "Figtree", sans-serif !important;
+  color: #2176ff;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 23px;
+  text-align: center;
+}
+.oip_data_loader_subtitle {
+  font-family: "Figtree", sans-serif !important;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 170%;
+  text-align: center;
+  color: #2176ff;
+}
+.oip_data_loader_background_container {
+  position: static;
+  z-index: 1;
+}
+.oip_data_loader_outer_circle {
+  background: #eaeaf5;
+  border-radius: 50%;
+  position: absolute;
+  animation: outer-circle-scale 10s ease infinite both;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: 1;
+  height: 42px;
+  width: 42px;
+}
+.oip_data_loader_inner_circle {
+  background: #f5f5f9;
+  width: 41.33px;
+  height: 41.33px;
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  z-index: 1;
+  animation: inner-circle-scale 10s ease infinite both;
+}
+@keyframes outer-circle-scale {
+  0% {
+    transform: scale(1);
+    opacity: 0;
+  }
+  7.7% {
+    transform: scale(2.6);
+    opacity: 1;
+  }
+  30.7% {
+    transform: scale(3.6);
+    opacity: 1;
+  }
+  53.7% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  76.7% {
+    transform: scale(3.9);
+    opacity: 1;
+  }
+  84.4% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+@keyframes inner-circle-scale {
+  0% {
+    opacity: 1;
+  }
+  7.7% {
+    opacity: 0;
+  }
+  30.7% {
+    opacity: 0;
+  }
+  53.7% {
+    opacity: 0;
+  }
+  76.7% {
+    opacity: 0;
+  }
+  84.4% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.oip_data_loader_icon_1,
+.oip_data_loader_icon_2,
+.oip_data_loader_icon_3,
+.oip_data_loader_icon_4,
+.oip_data_loader_icon_5 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+}
+.oip_data_loader_icon_1 {
+  animation: icon1-scale 10s ease infinite both;
+}
+.oip_data_loader_icon_2 {
+  animation: icon2-scale 10s ease infinite both;
+}
+.oip_data_loader_icon_3 {
+  animation: icon3-scale 10s ease infinite both;
+}
+.oip_data_loader_icon_4 {
+  animation: icon4-scale 10s ease infinite both;
+}
+.oip_data_loader_icon_5 {
+  animation: icon5-scale 10s ease infinite both;
+}
+@keyframes icon1-scale {
+  0% {
+    opacity: 0;
+  }
+  7.7% {
+    transform: translate(-74px, -57px);
+    opacity: 1;
+  }
+  30.7% {
+    transform: translate(-74px, -59px) rotate(15deg);
+    opacity: 1;
+  }
+  53.7% {
+    transform: translate(-74px, -59px);
+    opacity: 1;
+  }
+  76.7% {
+    transform: translate(-74px, -59px) rotate(15deg);
+    opacity: 1;
+  }
+  84.4% {
+    transform: translate(-74px, -59px);
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes icon2-scale {
+  0% {
+    opacity: 0;
+  }
+  7.7% {
+    transform: translate(40px, -89px);
+    opacity: 1;
+  }
+  30.7% {
+    transform: translate(40px, -89px) rotate(-15deg);
+    opacity: 1;
+  }
+  53.7% {
+    transform: translate(40px, -89px);
+    opacity: 1;
+  }
+  76.7% {
+    transform: translate(40px, -89px) rotate(-15deg);
+    opacity: 1;
+  }
+  84.4% {
+    transform: translate(40px, -89px);
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes icon3-scale {
+  0% {
+    opacity: 0;
+  }
+  7.7% {
+    transform: translate(112px, -35px);
+    opacity: 1;
+  }
+  30.7% {
+    transform: translate(112px, -35px) rotate(15deg);
+    opacity: 1;
+  }
+  53.7% {
+    transform: translate(112px, -35px);
+    opacity: 1;
+  }
+  76.7% {
+    transform: translate(112px, -35px) rotate(15deg);
+    opacity: 1;
+  }
+  84.4% {
+    transform: translate(112px, -35px);
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes icon4-scale {
+  0% {
+    opacity: 0;
+  }
+  7.7% {
+    transform: translate(-57px, 69px);
+    opacity: 1;
+  }
+  30.7% {
+    transform: translate(-57px, 69px) rotate(-15deg);
+    opacity: 1;
+  }
+  53.7% {
+    transform: translate(-57px, 69px);
+    opacity: 1;
+  }
+  76.7% {
+    transform: translate(-57px, 69px) rotate(-15deg);
+    opacity: 1;
+  }
+  84.4% {
+    transform: translate(-57px, 69px);
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes icon5-scale {
+  0% {
+    opacity: 0;
+  }
+  7.7% {
+    transform: translate(48px, 87px);
+    opacity: 1;
+  }
+  30.7% {
+    transform: translate(48px, 87px) rotate(-15deg);
+    opacity: 1;
+  }
+  53.7% {
+    transform: translate(48px, 87px);
+    opacity: 1;
+  }
+  76.7% {
+    transform: translate(48px, 87px) rotate(-15deg);
+    opacity: 1;
+  }
+  84.4% {
+    transform: translate(48px, 87px);
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>

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

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

package/dist/runtime/components/argDropdownSelect.vue

@@ -0,0 +1,321 @@
+<template>
+  <div>
+    <!-- Simple select -->
+    <arg-simple-label
+      :disabled="disabled"
+      @click="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"
+      >
+        <p :id="`label_${selected_item}`">{{ selected_item }}</p>
+      </arg-tooltip>
+    </arg-simple-label>
+    <!-- Dropdown select -->
+    <div
+      :style="isDisplay === false ? 'display : none' : ''"
+      class="oip_select_dropdown_block"
+      @click.stop
+    >
+      <!--<div v-if="filter_placeholder" class="oip_select_dropdown_title">{{ filter_placeholder }}</div>-->
+      <!-- Input search -->
+      <div v-if="search === true" class="oip_search_container">
+        <arg-icon size="20" name="MagnifyingGlass"></arg-icon>
+        <input
+          class="oip_search_name"
+          v-model="searchName"
+          :placeholder="filter_placeholder"
+        />
+      </div>
+      <!-- List -->
+      <div class="oip_select_dropdown_selection_container">
+        <div
+          class="oip_select_complex_selection_loop"
+          v-for="(element, index) of filterName()"
+          :key="index"
+          :class="values_disabled.includes(index) ? 'disabled_option' : ''"
+          @click="add_element(element, index)"
+        >
+          <arg-icon
+            v-if="values_disabled.includes(index)"
+            name="MinusCircleDisable"
+            size="16"
+            color="var(--independence)"
+            class="disable"
+          />
+          <arg-icon
+            v-else
+            :class="
+              (
+                return_value
+                  ? selected_item === element
+                  : selected_number === index
+              )
+                ? 'add'
+                : ''
+            "
+            :color="
+              (
+                return_value
+                  ? selected_item === element
+                  : selected_number === index
+              )
+                ? 'var(--primary)'
+                : 'var(--lavendar-grey)'
+            "
+            size="16"
+            :name="
+              (
+                return_value
+                  ? selected_item === element
+                  : selected_number === index
+              )
+                ? 'CircleSelectFill'
+                : 'Circle'
+            "
+          />
+          <div
+            :class="[
+              'oip_select_complex_selection_loop_name',
+              (
+                return_value
+                  ? selected_item === element
+                  : selected_number === index
+              )
+                ? 'add'
+                : 'del',
+            ]"
+          >
+            {{ element }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "argDropdownSelect"
+};
+</script>
+
+<script setup lang="ts">
+import argIcon from "./argIcon.vue";
+import {
+  onMounted,
+  onUpdated,
+  onUnmounted,
+  ref,
+  computed,
+  defineProps,
+  defineEmits,
+  watch,
+} from "vue";
+const props = defineProps({
+  element_table: { type: Array<string>, required: true },
+  search: { type: Boolean, default: true },
+  filter_placeholder: {
+    type: String,
+    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: () => [] },
+});
+
+var isDisplay = ref(false);
+var searchName = ref("");
+var labelElement: HTMLElement | null;
+var isEllipsisActive = ref(false);
+
+var table_values = ref(props.element_table);
+var selected_item = ref(props.element_table[props.default_select]);
+var selected_number = ref(props.default_select);
+
+const emit = defineEmits(["changeElement", "update:Value"]);
+
+watch(
+  () => props.element_table,
+  (new_element_table: string[]) => {
+    if (props.watch_default_change) {
+      selected_item.value = new_element_table[props.default_select];
+      selected_number.value = props.default_select;
+      emit(
+        "changeElement",
+        props.return_value ? selected_item.value : selected_number.value
+      );
+      emit(
+        "update:Value",
+        props.return_value ? selected_item.value : selected_number.value
+      );
+    }
+  }
+);
+
+watch(
+  () => props.default_select,
+  (new_default_select: number) => {
+    if (!props.values_disabled.includes(new_default_select)) {
+      selected_item.value = props.element_table[new_default_select];
+      selected_number.value = new_default_select;
+      emit(
+        "changeElement",
+        props.return_value ? selected_item.value : selected_number.value
+      );
+      emit(
+        "update:Value",
+        props.return_value ? selected_item.value : selected_number.value
+      );
+    }
+  }
+);
+
+function checkActiveEllipsis() {
+  if (labelElement !== null) {
+    if (labelElement.offsetWidth < labelElement.scrollWidth) {
+      isEllipsisActive.value = true;
+    } else isEllipsisActive.value = false;
+  } else isEllipsisActive.value = false;
+}
+
+function add_element(element: string, index: number) {
+  if (!props.values_disabled.includes(index)) {
+    selected_item.value = element;
+    selected_number.value = index;
+    if (props.close_on_click === true) {
+      close();
+    }
+    emit(
+      "changeElement",
+      props.return_value ? selected_item.value : selected_number.value
+    );
+    emit(
+      "update:Value",
+      props.return_value ? selected_item.value : selected_number.value
+    );
+  }
+}
+
+function close() {
+  if (isDisplay) {
+    isDisplay.value = false;
+    document?.removeEventListener("click", close);
+  }
+}
+
+function filterName() {
+  if (searchName.value !== null) {
+    return props.element_table.filter((element) =>
+      element.toLowerCase().includes(searchName.value.toLowerCase())
+    );
+  }
+  return props.element_table;
+}
+
+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);
+    }
+  }
+}
+
+onMounted(() => {
+  if (props.default_select !== null) {
+    add_element(selected_item.value, selected_number.value);
+  }
+  labelElement = document?.getElementById(`label_${selected_item.value}`);
+  checkActiveEllipsis();
+});
+onUpdated(() => {
+  labelElement = document?.getElementById(`label_${selected_item.value}`);
+  checkActiveEllipsis();
+});
+onUnmounted(() => {
+  document?.removeEventListener("click", close);
+});
+</script>
+
+<style scoped>
+/* .oip_select_complex_selection_loop > svg.add {
+  fill: var(--accent) !important;
+  color: var(--pure-white) !important;
+  width: 19px;
+  height: 19px;
+  margin: -2px;
+} */
+
+.disabled_option {
+  cursor: initial !important;
+}
+
+.disabled_option .oip_select_complex_selection_loop_name {
+  color: var(--lavendar-grey);
+}
+
+.oip_select_complex_selection_loop.disabled_option:hover svg {
+  color: var(--lavendar-grey) !important;
+}
+
+.oip_select_complex_selection_loop > svg.add {
+  color: var(--primary) !important;
+}
+.oip_select_complex_selection_loop > svg.disable,
+.oip_select_complex_selection_loop.disabled_option:hover svg {
+  color: var(--independence) !important;
+}
+.oip_select_complex_selection_loop:hover > svg.add {
+  color: var(--primary-hover2) !important;
+}
+
+.oip_select_complex_selection_loop:hover svg {
+  color: var(--primary) !important;
+}
+.oip_select_complex_selection_loop .add {
+  font-weight: 700 !important;
+}
+.oip_select_complex_selection_loop:hover {
+  background: rgba(33, 118, 255, 0.05) !important;
+  border-radius: 4px !important;
+}
+.oip_select_complex_selection_loop {
+  padding: 2px 4px;
+}
+.oip_select_complex_selection_loop.disabled_option:hover {
+  background: transparent !important;
+}
+.oip_select_complex_selection_loop {
+  margin: 4px 0px !important;
+}
+svg.add {
+  flex-shrink: 0;
+}
+
+.full_width {
+  width: 100%;
+}
+</style>

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

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