@tekkare/auriga 0.1.3 → 0.1.5

package/dist/runtime/components/argSidebar.vue

@@ -0,0 +1,114 @@
+<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(--base-not-quite-white, #FDFDFF);
+    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;

package/dist/runtime/components/argSimpleLabel.vue

@@ -3,7 +3,16 @@
     <span class="oip_select_label" :class="disabled ? 'disabled' : ''">
       <slot></slot>
     </span>
-    <arg-icon class="oip_select_caret_down" name="CaretDown"></arg-icon>
+    <div v-if="show_amount && amount_value > 0" class="arg-circle-amount">
+      <span>{{ amount_value > 99 ? "99+" : amount_value }}</span>
+    </div>
+    <arg-icon
+      class="oip_select_caret_down"
+      name="CaretDown"
+      size="16"
+      color="var(--cool-grey)"
+      thickness="32"
+    />
   </div>
 </template>
 
@@ -19,7 +28,9 @@ export default defineComponent({
     disabled: {
       type: Boolean,
       default: false
-    }
+    },
+    show_amount: { type: Boolean, default: false },
+    amount_value: { type: Number, default: null }
   }
 });
 </script>
@@ -42,13 +53,15 @@ export default defineComponent({
 
 .oip_select_block {
   cursor: pointer;
-  width: 180px;
-  padding: 12px 20px;
+  width: 228px;
+  padding: 12px;
   display: flex;
+  align-items: center;
+  gap: 4px;
   border: 1.5px solid var(--dividers);
   border-radius: 8px;
-  background: var(--pure-white);
-  max-width: 270px;
+  background: var(--not-quite-white);
+  position: relative;
 }
 
 .oip_select_block:hover,
@@ -77,23 +90,26 @@ export default defineComponent({
 .oip_select_label .prmt_tooltip {
   display: flex;
 }
-.oip_select_label > p,
-.oip_select_label .prmt_tooltip p {
-  width: 95%;
+.oip_select_label > span,
+.oip_select_label .prmt_tooltip span {
+  display: block;
+  width: 98%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin: 0;
 }
 
 .oip_select_label {
-  width: 95%;
+  width: 90%;
   font-weight: 700;
   font-size: 14px;
   line-height: 16px;
   color: var(--independence);
   max-height: 16px;
-  margin: 0px;
+}
+
+.oip_select_block svg {
+  flex-shrink: 0 !important;
 }
 
 .oip_select_label.disabled {
@@ -101,8 +117,6 @@ export default defineComponent({
 }
 
 .oip_select_caret_down {
-  width: 12px;
-  height: 12px;
   float: right;
   margin-left: auto;
 }
@@ -206,6 +220,35 @@ export default defineComponent({
   fill: var(--accent) !important;
   color: var(--pure-white) !important;
 }
+.arg-circle-amount {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 50%;
+  background: #e9f1ff;
+  color: var(--primary);
+  padding: 4px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  flex-shrink: 0;
+  position: absolute;
+  right: 40px;
+}
+.oip_empty_select {
+  font-weight: 600;
+  color: var(--cool-grey);
+}
+.oip_select_display {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
 </style>
 <style scoped>
 .oip_select_complex_selection_loop > svg.add {

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

@@ -3,12 +3,30 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    show_amount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    amount_value: {
+        type: NumberConstructor;
+        default: null;
+    };
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
+    show_amount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    amount_value: {
+        type: NumberConstructor;
+        default: null;
+    };
 }>>, {
     disabled: boolean;
+    show_amount: boolean;
+    amount_value: number;
 }, {}>;
 export default _default;

package/dist/runtime/components/argStyle.vue

@@ -22,7 +22,7 @@ export default defineComponent({
   --lavendar-grey: #cdcede;
   --more: #dedfe9;
   --dividers: #eaeaf5;
-
+  
   /* PRIMARY */
   --primary: #2176ff;
   --primary-hover: #0966fb;
@@ -62,6 +62,7 @@ export default defineComponent({
   --nested-table-bg: #eaeaf5;
   --table-hover: #dddded;
   --base-dividers: #ececf2;
+  --base-not-quite-white: #FDFDFF;
 
   /*SHADOWS*/
   --container-shadow: 0px 0px 40px rgba(94, 92, 154, 0.06);
@@ -632,6 +633,9 @@ button {
 }
 .oip_button_loading {
   position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   left: 0;
   right: 0;
 }
@@ -977,4 +981,13 @@ button {
   gap: 10px;
   flex-wrap: wrap;
 }
+.arg_sub_menu  .arg_sub_menu .arg_sub_menu_button{
+    padding-left: 24px !important;
+}
+.arg_sub_menu .arg_sub_menu  .auriga_menu_item{
+  padding-left: 40px !important;
+}
+.arg_sub_menu .auriga_menu_item{
+  padding-left: 24px !important;
+}
 </style>

package/dist/runtime/components/argSubMenu.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="arg_sub_menu">
+        <button class="arg_sub_menu_button" @click="openMenu = !openMenu">
+            {{label}}
+            <arg-icon name="CaretUp" size="12" color="var(--primary)" thickness="30" v-if="openMenu"/>
+            <arg-icon name="CaretDown" size="12" color="var(--primary)" thickness="30" v-else/>
+        </button>
+        <div v-show="openMenu" class="arg_sub_menu_content">
+            <slot/>
+        </div>
+    </div>
+</template>
+<script>
+import {
+  ref,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+import argStyle from "./argStyle.vue";
+export default defineComponent({
+  name: "argSubMenu",
+  components: { argIcon, argStyle },
+  props: {
+    label: { type: String, required: true },
+    icon: { type: String },
+    defaultCollapseState: { type: Boolean, default: true }
+  },
+  setup(props) {
+    let openMenu = ref(props.defaultCollapseState);
+    return {
+      openMenu
+    };
+  }
+});
+</script>
+<style>
+.arg_sub_menu{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+    width: 100%;
+    cursor: pointer;
+}
+
+.arg_sub_menu_button{
+    width: 100%;
+    outline: none;
+    border: 0px solid transparent;
+    background-color: transparent;
+    padding: 0;
+    display: flex;
+    padding: 3px 8px 6px 8px;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    cursor: pointer;
+}
+.arg_sub_menu_content{
+    width: 100%;
+}
+</style>

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

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

package/dist/runtime/components/argSwitch.vue

@@ -0,0 +1,153 @@
+<template>
+  <div
+    @click="changeValue"
+    class="prmt_parent_switch"
+    @focus="activate_switch = true"
+    @focusout="activate_switch = false"
+    tabindex="0"
+    :class="activate_switch ? 'open' : ''"
+  >
+    <div
+      :class="[
+        'prmt_switch_text',
+        true_is_active ? 'prmt_switch_is_active' : 'prmt_switch_is_inactive',
+      ]"
+    >
+      {{ active_text }}
+    </div>
+    <div
+      :class="[
+        'prmt_switch',
+        true_is_active ? 'prmt_switch_is_active' : 'prmt_switch_is_inactive',
+      ]"
+    >
+      <div
+        :class="[
+          'prmt_switch_round',
+          true_is_active ? 'prmt_switch_is_active' : 'prmt_switch_is_inactive',
+        ]"
+      ></div>
+    </div>
+    <div
+      :class="[
+        'prmt_switch_text',
+        true_is_active ? 'prmt_switch_is_inactive' : 'prmt_switch_is_active',
+      ]"
+    >
+      {{ inactive_text }}
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ref,
+  watch,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argSwitch",
+  props: {
+    active_text: { type: String, required: true },
+    inactive_text: { type: String, required: true },
+    is_active: { type: Boolean, default: true }
+  },
+  emits: ["changeValue", "update:Switch"],
+  setup(props, { emit }) {
+    const true_is_active = ref(true);
+    const activate_switch = ref(false);
+    true_is_active.value = props.is_active;
+    watch(
+      () => props.is_active,
+      (new_is_active) => {
+        true_is_active.value = new_is_active;
+        emit("changeValue", true_is_active.value);
+        emit("update:Switch", true_is_active.value);
+      }
+    );
+    function changeValue() {
+      emit("changeValue", !true_is_active.value);
+      emit("update:Switch", !true_is_active.value);
+      true_is_active.value = !true_is_active.value;
+    }
+    return {
+      changeValue,
+      activate_switch,
+      true_is_active
+    };
+  }
+});
+</script>
+
+<style>
+.prmt_switch_pause {
+  vertical-align: baseline !important;
+  fill: var(--dividers) !important;
+  color: var(--dividers) !important;
+  margin: 0 0 5% 11%;
+  stroke-width: 0px !important;
+}
+.prmt_switch_text {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 16px;
+  transition: all 300ms ease;
+}
+.prmt_switch_text.prmt_switch_is_inactive {
+  color: var(--lavendar-grey);
+}
+.prmt_switch_text.prmt_switch_is_active {
+  color: var(--independence);
+}
+.prmt_switch {
+  transition: all 300ms ease;
+  width: 36px;
+  height: 21px;
+  border-radius: 35.7px;
+  padding: 0 2px;
+}
+
+.prmt_switch.prmt_switch_is_active {
+  border: 1px solid var(--accent);
+  background-color: var(--accent);
+}
+.prmt_switch.prmt_switch_is_inactive {
+  background-color: var(--accent);
+  border: 1px solid var(--accent);
+}
+
+.prmt_switch_round.prmt_switch_is_active {
+  left: 0;
+}
+.prmt_switch_round.prmt_switch_is_inactive {
+  transform: translateX(100%);
+}
+
+.prmt_switch_round {
+  transition: all 300ms ease;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  background-color: var(--pure-white);
+  border: solid 0.5px var(--more);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  box-shadow: var(--button-big-shadow);
+}
+
+.prmt_parent_switch {
+  background-color: var(--pure-white);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  gap: 10px;
+  border: solid 1.5px var(--dividers);
+  border-radius: 8px;
+  padding: 10px 17px;
+}
+.prmt_parent_switch:focus-within {
+  border: 1.5px solid var(--primary) !important;
+  box-shadow: 0px 0px 0px 4px rgba(33, 118, 255, 0.1) !important;
+}
+</style>

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

@@ -0,0 +1,37 @@
+declare const _default: import("vue").DefineComponent<{
+    active_text: {
+        type: StringConstructor;
+        required: true;
+    };
+    inactive_text: {
+        type: StringConstructor;
+        required: true;
+    };
+    is_active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    changeValue: () => void;
+    activate_switch: import("vue").Ref<boolean>;
+    true_is_active: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changeValue" | "update:Switch")[], "changeValue" | "update:Switch", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active_text: {
+        type: StringConstructor;
+        required: true;
+    };
+    inactive_text: {
+        type: StringConstructor;
+        required: true;
+    };
+    is_active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChangeValue?: ((...args: any[]) => any) | undefined;
+    "onUpdate:Switch"?: ((...args: any[]) => any) | undefined;
+}, {
+    is_active: boolean;
+}, {}>;
+export default _default;

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

@@ -156,7 +156,7 @@ declare const _default: import("vue").DefineComponent<{
     showToggle: import("vue").Ref<boolean>;
     showLine: import("vue").Ref<any>;
     openLine: (index: number) => void;
-    getTooltipDir: (index: number) => "left" | "bottom";
+    getTooltipDir: (index: number) => "bottom" | "left";
     getColumnTypes: () => void;
     isNA: (val: string) => boolean;
     sortDatas: (index: number) => void;
@@ -168,8 +168,8 @@ declare const _default: import("vue").DefineComponent<{
     limitB: (pageNumber: number) => boolean;
     toggle: (index: number) => void;
     viewSearchInput: (index: number) => boolean;
-    changeColorAsc: (index: number) => "var(--lavendar-grey)" | "var(--accent)" | "transparent";
-    changeColorDesc: (index: number) => "var(--lavendar-grey)" | "var(--accent)" | "transparent";
+    changeColorAsc: (index: number) => "transparent" | "var(--accent)" | "var(--lavendar-grey)";
+    changeColorDesc: (index: number) => "transparent" | "var(--accent)" | "var(--lavendar-grey)";
     greyBG: (index: number) => boolean | undefined;
     isOdd: (contIndex: number) => boolean;
     fillTable: import("vue").ComputedRef<never[]>;

package/dist/runtime/components/argTooltip.vue

@@ -72,7 +72,7 @@ export default defineComponent({
 }
 
 .prmt_tooltip .prmt_tooltip_text-right {
-  top: -5px;
+  top: -12px;
   left: 110%;
   margin-left: 5px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -30,15 +30,18 @@
     "patch": "nuxt-module-build && npm version patch && npm publish"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.7.3"
+    "@nuxt/kit": "^3.7.3",
+    "apexcharts": "^3.43.0",
+    "vue-apexcharts": "^1.6.2",
+    "vue3-apexcharts": "^1.4.4"
   },
   "devDependencies": {
-    "@types/node": "^18.17.17",
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.1",
     "@nuxt/schema": "^3.7.3",
     "@nuxt/test-utils": "^3.7.3",
+    "@types/node": "^18.17.17",
     "changelogen": "^0.5.5",
     "eslint": "^8.49.0",
     "nuxt": "^3.7.3",