@tekkare/auriga 0.1.0

package/dist/runtime/components/argFileBtn.vue

@@ -0,0 +1,136 @@
+<template>
+  <button class="prmt_file_button">
+    <client-only><arg-style /></client-only>
+    <arg-icon :name="fileIcon.icon" :color="fileIcon.color" size="24" />
+    <div class="prmt_file_name_group">
+      <arg-tooltip :tooltipText="fileName">
+        <h1 class="prmt_file_name">
+          {{ fileName }}
+        </h1>
+      </arg-tooltip>
+      <h2 class="prmt_file_size">{{ fileSize }}</h2>
+    </div>
+    <!-- Add event triggers sinon -->
+    <a class="prmt_file_link" v-if="preview" @click="onPreview()">Preview</a>
+    <a class="prmt_file_link" v-if="download" @click="onDownload()">Download</a>
+  </button>
+</template>
+<script>
+export default {
+  name: "argFileBtn"
+};
+</script>
+<script setup lang="ts">
+import argIcon from "./argIcon.vue";
+import { onMounted, ref, computed, defineProps, defineEmits } from "vue";
+const props = defineProps({
+  fileType: {
+    type: String,
+    required: false,
+  },
+  fileName: {
+    type: String,
+    required: true,
+  },
+  fileSize: {
+    type: String,
+    required: false,
+  },
+  download: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  preview: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+});
+
+const emit = defineEmits(["onPreview", "onDownload"]);
+
+var fileIcon = computed(() => {
+  var iconName = { icon: "File", color: "#3E3F5E" };
+  if (props.fileType) {
+    var ft = props.fileType.toUpperCase();
+    if (ft === "PDF") {
+      iconName = { icon: "FilePdf", color: "#D93221" };
+    } else if (ft === "CSV") {
+      iconName = { icon: "FileCsv", color: "#387A47" };
+    } else if (ft === "XLS" || ft === "XLSX") {
+      iconName = { icon: "FileXls", color: "#387A47" };
+    } else if (ft === "PNG") {
+      iconName = { icon: "FilePng", color: "#3E3F5E" };
+    } else if (ft === "JPG" || ft === "JPEG") {
+      iconName = { icon: "FileJpg", color: "#3E3F5E" };
+    } else if (ft === "MP4" || ft === "AVI" || ft === "MOV") {
+      iconName = { icon: "FileVideo", color: "#3E3F5E" };
+    }
+  }
+  return iconName;
+});
+
+function onPreview() {
+  emit("onPreview");
+}
+function onDownload() {
+  emit("onDownload");
+}
+</script>
+<style scoped>
+.prmt_file_button {
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  padding: 8px 16px;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+  border-radius: 10px;
+  border: 1.5px solid var(--base-dividers, #ececf2);
+  background: var(--demi-fond, #f9f9fa);
+  max-width: 600px;
+  width: 100%;
+}
+.prmt_file_name_group {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+.prmt_file_name {
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  color: var(--independence, #3e3f5e);
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prmt_file_size {
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: var(--cool-grey, #8487ac);
+}
+.prmt_file_button div:empty,
+.prmt_file_button h2:empty {
+  display: none;
+}
+.prmt_file_link {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  text-decoration-line: underline;
+  color: var(--primary, #2176ff);
+  text-align: center;
+}
+</style>

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

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

package/dist/runtime/components/argHeaderTabs.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="header_tabs_section">
+    <div class="header_tabs">
+      <div class="header_tabs_overlay">
+        <div class="header_one_tab_active-selector" id="header_nav_bar"></div>
+        <span
+          class="header_one_tab_container"
+          v-for="(tab, index) in removeNullProps(tabs)"
+          :key="index"
+          :id="`headerTab${index + 1}`"
+        >
+          <button
+            class="header_one_tab"
+            :class="{
+              active: true_index_menu.toString() === (index + 1).toString(),
+            }"
+            @click="changeMenu(index + 1)"
+          >
+            <p class="header_one_tab_title">{{ tab }}</p>
+          </button>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "argHeaderTabs"
+};
+</script>
+
+<script setup lang="ts">
+import {
+  onMounted,
+  ref,
+  computed,
+  defineProps,
+  defineEmits,
+  watch,
+  defineComponent,
+} from "vue";
+import _ from "lodash";
+const props = defineProps({
+  tabs: {
+    type: Array,
+    required: true,
+  },
+  index_menu: {
+    type: [String, Number],
+    default: 1,
+  },
+});
+
+const emit = defineEmits(["updateMenu", "update:Value"]);
+
+var true_index_menu = ref(props.index_menu);
+var scrollValue = ref(0);
+var oldWidth = ref();
+
+watch(
+  () => props.index_menu,
+  (new_index_menu: number | string) => {
+    true_index_menu.value = new_index_menu;
+  }
+);
+
+function removeNullProps(object) {
+  return _.reject(object, (value) => value === null);
+}
+
+var tabsWidth = computed(() => {
+  const table = [];
+  for (let i = 0; i < props.tabs.length; i++) {
+    let domTab = document?.getElementById(`headerTab${i + 1}`);
+    if (domTab !== null) {
+      table.push(domTab.offsetWidth);
+    }
+  }
+  return table;
+});
+
+var getTranslationWidth = computed(() => {
+  let translateWidth = 0;
+  if (true_index_menu.value === 1) {
+    return 0;
+  } else {
+    let i = 0;
+    while (i + 1 < true_index_menu.value) {
+      translateWidth += tabsWidth.value[i];
+      i += 1;
+    }
+    return translateWidth;
+  }
+});
+
+function changeMenu(value: number | string) {
+  if (typeof true_index_menu.value === "string") {
+    emit("updateMenu", value.toString());
+    emit("update:Value", value.toString());
+  } else {
+    emit("updateMenu", value);
+    emit("update:Value", value);
+  }
+  true_index_menu.value = value;
+  setBarWidth();
+}
+
+function setBarWidth() {
+  const selector = document?.getElementById("header_nav_bar");
+  const element = document?.getElementById(`headerTab${true_index_menu.value}`);
+  if (element !== null && selector !== null) {
+    const width = element.offsetWidth;
+    selector.style.width = `${width}px`;
+    selector.style.transform = `translateX(${
+      getTranslationWidth.value +
+      scrollValue.value +
+      24 * (true_index_menu.value - 1)
+    }px)`;
+  }
+}
+
+onMounted(() => {
+  oldWidth.value = window?.innerWidth;
+  setTimeout(() => {
+    changeMenu(props.index_menu);
+  });
+  window.onresize = () => {
+    const content = document?.querySelector(".header_tabs_overlay");
+    if (content !== null) {
+      if (window.innerWidth > oldWidth.value) {
+        if (content.scrollLeft === 0) {
+          scrollValue.value = 0;
+        }
+      }
+      oldWidth.value = window.innerWidth;
+    }
+    setBarWidth();
+  };
+});
+</script>
+
+<!-- Custom navbar -->
+<style scoped>
+.header_tabs {
+  white-space: nowrap;
+  position: relative;
+  background-color: transparent;
+  width: auto;
+  border-radius: 12px;
+}
+
+.header_tabs_section {
+  overflow-x: hidden;
+}
+
+.header_tabs_overlay {
+  overflow: hidden;
+}
+
+.header_one_tab_container {
+  display: inline-block;
+  margin-right: 24px;
+}
+
+.header_one_tab {
+  overflow: hidden;
+  display: inline-block;
+  border: none;
+  background-color: transparent;
+  color: var(--wild-blue-yonder);
+  list-style: none;
+  font-style: normal;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  padding: 0px 0px 8px 0px;
+  white-space: pre-line;
+  overflow-wrap: break-word;
+  vertical-align: middle;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.header_one_tab:hover {
+  color: var(--primary) !important;
+  cursor: pointer;
+}
+
+.header_one_tab.active {
+  color: var(--independence);
+}
+
+.header_one_tab_active-selector {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  z-index: 0;
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  list-style: none;
+  border-bottom: 3px solid var(--primary);
+  min-width: 5px;
+}
+.header_one_tab_bis {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.header_one_tab_icon.active {
+  color: var(--primary);
+}
+</style>

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

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