@tekkare/auriga 0.1.4 → 0.1.6

package/dist/runtime/components/argMenuLink.vue

@@ -0,0 +1,39 @@
+<template>
+    <nuxt-link :to="to" class="arg_menu_link">
+        <arg-icon :name="icon" color="var(--primary)" size="20"/>
+        {{label}}
+    </nuxt-link>
+</template>
+<script>
+import {
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+import argStyle from "./argStyle.vue";
+export default defineComponent({
+  name: "argMenuLink",
+  components: { argIcon, argStyle },
+  props: {
+    icon: { type: String, required: true },
+    label: { type: String, required: true },
+    to: { type: String, required: true, default: "/" }
+  }
+});
+</script>
+<style>
+.arg_menu_link{
+    display: flex;
+    height: 32px;
+    padding: 6px;
+    align-items: center;
+    gap: 6px;
+    align-self: stretch;
+    color: var(--primary);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 160%; 
+    text-transform: capitalize;
+    cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    to: {
+        type: StringConstructor;
+        required: true;
+        default: string;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    to: {
+        type: StringConstructor;
+        required: true;
+        default: string;
+    };
+}>>, {
+    to: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/argNavBar.vue

@@ -0,0 +1,320 @@
+<template>
+  <div
+    id="tabs_container"
+    class="rcd_tabs"
+    :class="isOverflow ? 'tabs_overflow' : ''"
+  >
+    <div
+      v-show="isOverflow"
+      class="rcd_scroll_icon scroll_left"
+      @click="scroll_left"
+    >
+      <arg-icon name="CaretLeft" size="12" color="var(--lavender_grey)" />
+    </div>
+    <div id="scroll_tabs" class="rcd_tabs_overlay">
+      <div class="rcd_one_tab_active-selector" id="tabs-selector"></div>
+      <span
+        class="rcd_one_tab_container"
+        v-for="(tab, index) in tabs"
+        :key="index"
+        :id="`rcd_tab_${index + 1}`"
+      >
+        <button
+          class="rcd_one_tab"
+          :class="{
+            active: true_index_menu.toString() === (index + 1).toString(),
+          }"
+          @click="changeMenu(index + 1)"
+        >
+          <p>{{ tab }}</p>
+        </button>
+      </span>
+    </div>
+    <div
+      v-show="isOverflow"
+      class="rcd_scroll_icon scroll_right"
+      @click="scroll_right"
+    >
+      <arg-icon name="CaretRight" size="12" color="var(--lavender_grey)" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  onMounted,
+  ref,
+  computed,
+  watch,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+export default defineComponent({
+  name: "argNavBar",
+  components: { argIcon },
+  props: {
+    tabs: {
+      type: Array,
+      required: true
+    },
+    index_menu: {
+      type: [String, Number],
+      default: 1
+    }
+  },
+  emits: ["updateMenu", "update:Menu"],
+  setup(props, { emit }) {
+    const true_index_menu = ref(props.index_menu);
+    const scrollValue = ref(0);
+    const oldWidth = ref();
+    const isOverflow = ref(false);
+    watch(
+      () => props.index_menu,
+      (new_index_menu) => {
+        true_index_menu.value = new_index_menu;
+        setBarWidth(true_index_menu.value);
+      }
+    );
+    const tabsWidth = computed(() => {
+      const table = [];
+      for (let i = 0; i < props.tabs.length; i++) {
+        const domTab = document?.getElementById(`rcd_tab_${i + 1}`);
+        if (domTab !== null) {
+          table.push(domTab.offsetWidth);
+        }
+      }
+      return table;
+    });
+    const 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 checkOverflow() {
+      const container = document.getElementById("tabs_container");
+      const content = document.getElementById("scroll_tabs");
+      if (content.scrollWidth > container.clientWidth - 48) {
+        isOverflow.value = true;
+      } else
+        isOverflow.value = false;
+    }
+    function changeMenu(value) {
+      if (typeof true_index_menu.value === "string") {
+        emit("updateMenu", value.toString());
+        emit("update:Menu", value.toString());
+      } else {
+        emit("updateMenu", value);
+        emit("update:Menu", value);
+      }
+      true_index_menu.value = value;
+      setBarWidth(true_index_menu.value);
+    }
+    function scroll_left() {
+      const content = document.getElementById("scroll_tabs");
+      if (content !== null) {
+        if (content.scrollLeft - 20 <= 0) {
+          scrollValue.value += content.scrollLeft;
+          content.scrollLeft -= content.scrollLeft;
+        } else {
+          scrollValue.value += 20;
+          content.scrollLeft -= 20;
+        }
+        setBarWidth(true_index_menu.value);
+      }
+    }
+    function scroll_right() {
+      const content = document.getElementById("scroll_tabs");
+      if (content !== null) {
+        const maxWidth = content.scrollWidth - content.clientWidth;
+        if (content.scrollLeft + 20 >= maxWidth) {
+          const widthLeft = maxWidth - content.scrollLeft;
+          content.scrollLeft += widthLeft;
+          scrollValue.value -= widthLeft;
+        } else {
+          content.scrollLeft += 20;
+          scrollValue.value -= 20;
+        }
+      }
+    }
+    function setBarWidth(index) {
+      const selector = document.getElementById("tabs-selector");
+      const width = document.getElementById(`rcd_tab_${index}`)?.offsetWidth;
+      if (selector !== null) {
+        const index_number = Number(true_index_menu.value);
+        const gapWidth = (index_number - 1) * 32;
+        selector.style.width = `${width}px`;
+        selector.style.transform = `translateX(${getTranslationWidth.value + gapWidth}px)`;
+      }
+    }
+    onMounted(() => {
+      window.onresize = () => {
+        checkOverflow();
+        const content = document.getElementById("scroll_tabs");
+        if (window?.innerWidth > oldWidth.value) {
+          if (content?.scrollLeft === 0) {
+            scrollValue.value = 0;
+          }
+        }
+        oldWidth.value = window?.innerWidth;
+      };
+      true_index_menu.value = props.index_menu;
+      setTimeout(() => {
+        const content = document.getElementById("scroll_tabs");
+        if (content !== null) {
+          if (getTranslationWidth.value > content.offsetWidth) {
+            content.scrollLeft += getTranslationWidth.value;
+          }
+          setBarWidth(props.index_menu);
+          checkOverflow();
+        }
+      }, 100);
+    });
+    return {
+      true_index_menu,
+      scrollValue,
+      oldWidth,
+      changeMenu,
+      setBarWidth,
+      isOverflow,
+      checkOverflow,
+      scroll_left,
+      scroll_right
+    };
+  }
+});
+</script>
+
+<!-- Custom navbar -->
+<style scoped>
+.rcd_scroll_icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 12px;
+  height: calc(100% - 8px);
+  position: absolute;
+  top: 0;
+  cursor: pointer;
+  z-index: 2;
+}
+.scroll_left {
+  left: 0;
+  border-right: 1px solid var(--demi-fond);
+  box-shadow: 4px 0px 10px rgba(62, 63, 94, 0.04);
+}
+.scroll_right {
+  right: 0;
+  border-left: 1px solid var(--demi-fond);
+  box-shadow: -4px 0px 10px rgba(62, 63, 94, 0.04);
+}
+
+.tabs_overflow {
+  padding: 0px 40px !important;
+}
+.rcd_tabs {
+  padding: 0px 24px;
+  white-space: nowrap;
+  position: relative;
+  background-color: var(--pure-white);
+  width: auto;
+  border-radius: 8px;
+  margin-bottom: 30px;
+}
+
+.rcd_tabs_overlay {
+  scrollbar-width: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 32px;
+  position: relative;
+  overflow-x: scroll;
+}
+
+.rcd_tabs_overlay::-webkit-scrollbar {
+  display: none !important;
+}
+
+.rcd_one_tab_container {
+  display: inline-block;
+  padding: 16px 0px;
+}
+
+.rcd_one_tab {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  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 !important;
+  white-space: pre-line;
+  overflow-wrap: break-word;
+  vertical-align: middle;
+}
+
+.rcd_one_tab:hover {
+  color: var(--independence);
+  cursor: pointer;
+}
+
+.rcd_one_tab.active {
+  color: var(--independence);
+}
+
+.rcd_one_tab_active-selector {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  z-index: 0;
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  list-style: none;
+  background: var(--accent);
+  overflow-x: hidden;
+}
+
+.rcd_tabs_separator {
+  display: initial;
+  height: 20px;
+  border-left: 1px solid var(--wild-blue-yonder);
+}
+
+.rcd_tabs_left-caret {
+  color: var(--wild-blue-yonder) !important;
+  align-items: center;
+  padding: 4px 12px;
+  position: absolute;
+  width: 36px;
+  height: 20px;
+  left: 0px;
+  top: 18.5px;
+  cursor: pointer;
+}
+.rcd_tabs_right-caret {
+  color: var(--wild-blue-yonder) !important;
+  align-items: center;
+  padding: 4px 12px;
+
+  position: absolute;
+  width: 36px;
+  height: 20px;
+  right: 0px;
+  top: 18.5px;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,35 @@
+declare const _default: import("vue").DefineComponent<{
+    tabs: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    index_menu: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, {
+    true_index_menu: import("vue").Ref<string | number>;
+    scrollValue: import("vue").Ref<number>;
+    oldWidth: import("vue").Ref<any>;
+    changeMenu: (value: number | string) => void;
+    setBarWidth: (index: number | string) => void;
+    isOverflow: import("vue").Ref<boolean>;
+    checkOverflow: () => void;
+    scroll_left: () => void;
+    scroll_right: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("updateMenu" | "update:Menu")[], "updateMenu" | "update:Menu", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tabs: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    index_menu: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & {
+    onUpdateMenu?: ((...args: any[]) => any) | undefined;
+    "onUpdate:Menu"?: ((...args: any[]) => any) | undefined;
+}, {
+    index_menu: string | number;
+}, {}>;
+export default _default;

package/dist/runtime/components/argNote.vue

@@ -0,0 +1,87 @@
+<template>
+  <div :class="`prmt_note_box ${noteColor}_box`">
+    <arg-icon :name="noteIcon" :color="getColorFromProp" />
+    <p>
+      <span :class="`${noteColor}_text`">{{ noteTitle }}:</span> {{ noteText }}
+    </p>
+  </div>
+</template>
+
+<script>
+import argIcon from "./argIcon.vue";
+import {
+  computed,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argNote",
+  components: { argIcon },
+  props: {
+    noteTitle: {
+      type: String,
+      default: "Note"
+    },
+    noteIcon: {
+      type: String,
+      default: "Info"
+    },
+    noteColor: {
+      type: String,
+      default: "blue"
+    },
+    noteText: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const getColorFromProp = computed(() => {
+      if (props.noteColor === "blue") {
+        return "var(--primary)";
+      } else
+        return "var(--warning)";
+    });
+    return {
+      getColorFromProp
+    };
+  }
+});
+</script>
+
+<style scoped>
+.prmt_note_box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 16px;
+  gap: 16px;
+  border-radius: 12px;
+}
+.prmt_note_box svg {
+  flex-shrink: 0;
+}
+
+.prmt_note_box p {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+}
+.prmt_note_box p span {
+  font-weight: 700;
+}
+
+.blue_box {
+  background: rgba(33, 118, 255, 0.1);
+}
+
+.blue_text {
+  color: var(--primary);
+}
+.orange_text {
+  color: var(--warning);
+}
+
+.orange_box {
+  background: rgba(255, 152, 26, 0.1);
+}
+</style>

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

@@ -0,0 +1,42 @@
+declare const _default: import("vue").DefineComponent<{
+    noteTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    noteIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    noteColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    noteText: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    getColorFromProp: import("vue").ComputedRef<"var(--primary)" | "var(--warning)">;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    noteTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    noteIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    noteColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    noteText: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {
+    noteTitle: string;
+    noteIcon: string;
+    noteColor: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/argSidebar.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="arg_sidebar">
+    <div class="arg_sidebar_header">
+      <nuxt-link to="/" class="arg_sidebar_home">
+        <arg-icon name="House" color="var(--primary)" />
+        <span v-if="lang === 'en'"> Home </span>
+        <span v-if="lang === 'fr'"> Accueil </span>
+      </nuxt-link>
+    </div>
+
+    <h1 class="arg_sidebar_title">{{ name }}</h1>
+    <div class="arg_sidebar_body">
+      <div class="arg_sidebar_content">
+        <slot name="menu" />
+      </div>
+      <div class="arg_sidebar_footer">
+        <slot name="footer" />
+      </div>
+    </div>
+
+    <!-- Have a slot here for the submenus -->
+    <!-- What do i do about the bottom menus. I think they are fixed so I just have to make it dynamic -->
+  </div>
+</template>
+<script>
+import {
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+import argStyle from "./argStyle.vue";
+export default defineComponent({
+  name: "argSidebar",
+  components: { argIcon, argStyle },
+  props: {
+    name: { type: String, required: true },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    },
+    homeLink: { type: String, default: "/" }
+  }
+});
+</script>
+<style scoped>
+.arg_sidebar {
+  display: flex;
+  width: 200px;
+  padding: 16px 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  border-right: 1px solid var(--base-dividers, #ececf2);
+  background: var(--background);
+  height: 100vh;
+  position: fixed;
+  z-index: 100;
+  transition: all ease 0.3s;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+}
+.arg_sidebar_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.arg_sidebar_home {
+  display: flex;
+  height: 32px;
+  padding: 6px;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  color: var(--primary);
+}
+.arg_sidebar_title {
+  display: flex;
+  padding: 0px 8px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: normal;
+  margin-bottom: 16px;
+}
+.arg_sidebar_body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  gap: 16px;
+  width: 100%;
+}
+.arg_sidebar_content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+</style>

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

@@ -0,0 +1,33 @@
+declare const _default: import("vue").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    homeLink: {
+        type: StringConstructor;
+        default: string;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => boolean;
+    };
+    homeLink: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    lang: string;
+    homeLink: string;
+}, {}>;
+export default _default;