@tekkare/auriga 0.1.8 → 0.1.10

package/dist/runtime/components/argScopeLayout.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="arg_main_scope">
+    <slot name="header" />
+    <div class="arg_scope_layout_body">
+      <slot name="body" />
+    </div>
+    <argFooter />
+  </div>
+</template>
+<script>
+import {
+  onMounted,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+import argStyle from "./argStyle.vue";
+import argFooter from "./argFooter.vue";
+export default defineComponent({
+  name: "argMainLayout",
+  components: { argIcon, argStyle, argFooter },
+  props: {
+    sidebarOpen: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup() {
+    onMounted(() => {
+      adjustMarginForBody();
+      window.addEventListener("resize", adjustMarginForBody);
+    });
+    function adjustMarginForBody() {
+      const fixedHeader = document.getElementById("arg_header");
+      const bodyContent = document.getElementById("arg_main_layout_section");
+      const infoBar = document.getElementById("arg_info_section");
+      if (fixedHeader && bodyContent) {
+        const headerHeight = fixedHeader.offsetHeight;
+        bodyContent.style.marginTop = `${headerHeight}px`;
+      }
+      if (fixedHeader && infoBar) {
+        const headerHeight = fixedHeader.offsetHeight;
+        infoBar.style.top = `${headerHeight + 8}px`;
+      }
+    }
+  }
+});
+</script>
+<style>
+.arg_main_scope {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.arg_scope_layout_body {
+  min-height: calc(100vh - 77px);
+  padding: 8px;
+  max-width: 1088px;
+  min-width: 50%;
+  margin-top: 32px;
+}
+</style>

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

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    sidebarOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    sidebarOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    sidebarOpen: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/components/argSidebar.vue

@@ -1,14 +1,47 @@
+<!-- eslint-disable vue/max-attributes-per-line -->
 <template>
-  <div class="arg_sidebar">
-    <div class="arg_sidebar_header">
+  <div :class="sidebarOpen ? 'arg_sidebar_open' : ''" class="arg_sidebar">
+    <div
+      :class="
+        sidebarOpen ? 'arg_sidebar_header_full' : 'arg_sidebar_header_small'
+      "
+    >
       <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>
+        <arg-tooltip
+          :tooltip-text="lang === 'en' ? 'Home' : 'Accueil'"
+          :disable="sidebarOpen"
+          dir="right"
+          :class="[
+            'tooltip_display',
+            sidebarOpen ? '' : 'link_menu_tooltip_icon',
+          ]"
+        >
+          <arg-icon name="House" color="var(--primary)" />
+        </arg-tooltip>
+        <span v-if="lang === 'en' && sidebarOpen"> Home </span>
+        <span v-if="lang === 'fr' && sidebarOpen"> Accueil </span>
       </nuxt-link>
+      <div class="sidebar_toggle" @click="toggleSidebar()">
+        <arg-tooltip
+          :tooltip-text="
+            lang === 'en' ? 'Open sidebar' : 'Ouvrir le menu latéral'
+          "
+          :disable="sidebarOpen"
+          dir="right"
+          :class="[
+            'tooltip_display',
+            sidebarOpen ? '' : 'link_menu_tooltip_icon',
+          ]"
+        >
+          <arg-icon name="Sidebar" color="var(--primary)" />
+        </arg-tooltip>
+      </div>
     </div>
 
-    <h1 class="arg_sidebar_title">{{ name }}</h1>
+    <h1 v-show="sidebarOpen" class="arg_sidebar_title">
+      <span v-if="appIso"><arg-flag :iso="appIso" emoji /></span>
+      <span>{{ name }}</span>
+    </h1>
     <div class="arg_sidebar_body">
       <div class="arg_sidebar_content">
         <slot name="menu" />
@@ -24,15 +57,20 @@
 </template>
 <script>
 import {
+  onMounted,
+  ref,
   defineComponent
 } from "vue";
 import argIcon from "./argIcon.vue";
-import argStyle from "./argStyle.vue";
 export default defineComponent({
   name: "argSidebar",
-  components: { argIcon, argStyle },
+  components: { argIcon },
   props: {
     name: { type: String, required: true },
+    appIso: {
+      type: String,
+      default: null
+    },
     lang: {
       type: String,
       default: "en",
@@ -41,13 +79,38 @@ export default defineComponent({
       }
     },
     homeLink: { type: String, default: "/" }
+  },
+  emits: ["onSidebarChange", "update:Sidebar"],
+  setup(props, { emit }) {
+    onMounted(() => {
+      window?.addEventListener("resize", handleResize);
+      handleResize();
+    });
+    const sidebarOpen = ref(true);
+    function handleResize() {
+      if (window.innerWidth >= 1e3) {
+        sidebarOpen.value = true;
+      } else
+        sidebarOpen.value = false;
+      emit("onSidebarChange", sidebarOpen.value);
+      emit("update:Sidebar", sidebarOpen.value);
+    }
+    function toggleSidebar() {
+      emit("onSidebarChange", !sidebarOpen.value);
+      emit("update:Sidebar", !sidebarOpen.value);
+      sidebarOpen.value = !sidebarOpen.value;
+    }
+    return {
+      sidebarOpen,
+      toggleSidebar
+    };
   }
 });
 </script>
 <style scoped>
 .arg_sidebar {
   display: flex;
-  width: 200px;
+  width: 52px;
   padding: 16px 8px;
   flex-direction: column;
   align-items: flex-start;
@@ -62,12 +125,22 @@ export default defineComponent({
   top: 0;
   box-sizing: border-box;
 }
-.arg_sidebar_header {
+
+.arg_sidebar_open {
+  width: 200px;
+}
+.arg_sidebar_header_full {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   align-self: stretch;
 }
+.arg_sidebar_header_small {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--xxs, 4px);
+}
 .arg_sidebar_home {
   display: flex;
   height: 32px;
@@ -82,10 +155,9 @@ export default defineComponent({
 }
 .arg_sidebar_title {
   display: flex;
+  flex-direction: row;
   padding: 0px 8px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
   align-self: stretch;
   font-size: 20px;
@@ -107,4 +179,15 @@ export default defineComponent({
   flex-direction: column;
   gap: 8px;
 }
+
+.sidebar_toggle {
+  cursor: pointer;
+}
+
+.link_menu_tooltip_icon {
+  flex: 1 1 100%;
+}
+.tooltip_display {
+  display: flex !important;
+}
 </style>

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

@@ -3,6 +3,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    appIso: {
+        type: StringConstructor;
+        default: null;
+    };
     lang: {
         type: StringConstructor;
         default: string;
@@ -12,11 +16,18 @@ declare const _default: import("vue").DefineComponent<{
         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<{
+}, {
+    sidebarOpen: import("vue").Ref<boolean>;
+    toggleSidebar: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onSidebarChange" | "update:Sidebar")[], "onSidebarChange" | "update:Sidebar", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;
         required: true;
     };
+    appIso: {
+        type: StringConstructor;
+        default: null;
+    };
     lang: {
         type: StringConstructor;
         default: string;
@@ -26,8 +37,12 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}>>, {
+}>> & {
+    onOnSidebarChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:Sidebar"?: ((...args: any[]) => any) | undefined;
+}, {
     lang: string;
+    appIso: string;
     homeLink: string;
 }, {}>;
 export default _default;

package/dist/runtime/components/argSimpleLabel.vue

@@ -53,7 +53,7 @@ export default defineComponent({
 
 .oip_select_block {
   cursor: pointer;
-  width: 228px;
+  width: 222px;
   padding: 12px;
   display: flex;
   align-items: center;

package/dist/runtime/components/argStyle.vue

@@ -108,7 +108,16 @@ button {
 }
 .oip_container {
   margin: 0 auto;
-  max-width: 1440px;
+  padding: 0px 64px 0px 8px;
+  max-width: 1080px;
+}
+
+.arg_page_display {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  width: 100%;
 }
 
 /*** TEXT ***/
@@ -256,6 +265,9 @@ button {
 .oip_row.gap-4 {
   gap: 4px;
 }
+.oip_row.gap-6 {
+  gap: 4px;
+}
 .oip_row.gap-8 {
   gap: 8px;
 }
@@ -268,6 +280,12 @@ button {
 .oip_row.gap-16 {
   gap: 16px;
 }
+.oip_row.gap-24 {
+  gap: 16px;
+}
+.oip_row.gap-32 {
+  gap: 16px;
+}
 
 /** BUTTONS **/
 
@@ -680,21 +698,21 @@ button {
 /*** TAGS ***/
 
 .oip_tag {
-  padding: 4px 12px !important;
-  background: var(--independence) !important;
-  color: var(--pure-white) !important;
-  font-style: normal !important;
-  font-weight: bold;
-  font-size: 12px !important;
-  line-height: 14px !important;
-  border-radius: 20px !important;
-  border: 1px solid var(--independence) !important;
-  height: 20px !important;
-  width: fit-content !important;
-  font-family: "Figtree", sans-serif !important;
+  padding: 4px 8px;
+  background: var(--independence);
+  color: var(--pure-white);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  border-radius: 4px;
+  width: fit-content;
+  font-family: "Figtree", sans-serif;
+  display: inline-flex;
+  padding: 4px 8px;
   align-items: center;
-  display: flex;
   gap: 8px;
+  height: 16px;
 }
 .oip_tag > svg {
   cursor: pointer;
@@ -704,48 +722,80 @@ button {
 .oip_tag.is_disabled {
   background-color: var(--pure-white) !important;
   color: var(--lavendar-grey) !important;
-  border: 1px solid var(--lavendar-grey) !important;
 }
 .oip_tag.is_red {
-  background: var(--red) !important;
-  border: 1px solid var(--red) !important;
+  background: rgba(244, 63, 94, 0.1) !important;
+  color: #9f1239;
+}
+.oip_tag.is_pink {
+  background: rgba(236, 72, 153, 0.1) !important;
+  color: #9d174d;
+}
+.oip_tag.is_lilac {
+  background: rgba(217, 70, 239, 0.1) !important;
+  color: #86198f;
+}
+.oip_tag.is_purple {
+  background: rgba(168, 85, 247, 0.1) !important;
+  color: #6b21a8;
+}
+.oip_tag.is_indigo {
+  background: rgba(139, 92, 246, 0.1) !important;
+  color: #5b21b6;
+}
+.oip_tag.is_blue {
+  background: rgba(99, 102, 241, 0.1) !important;
+  color: #3730a3;
+}
+.oip_tag.is_sapphire {
+  background: rgba(14, 165, 233, 0.1) !important;
+  color: #075985;
+}
+.oip_tag.is_turquoise {
+  background: rgba(6, 182, 212, 0.1) !important;
+  color: #155e75;
+}
+.oip_tag.is_teal {
+  background: rgba(20, 184, 166, 0.1) !important;
+  color: #115e59;
+}
+.oip_tag.is_emerald {
+  background: rgba(16, 185, 129, 0.1) !important;
+  color: #065f46;
 }
+.oip_tag.is_green {
+  background: rgba(34, 197, 94, 0.1) !important;
+  color: #166534;
+}
+.oip_tag.is_olive {
+  background: rgba(132, 204, 22, 0.1) !important;
+  color: #3f6212;
+}
+.oip_tag.is_yellow {
+  background: rgba(234, 179, 8, 0.1) !important;
+  color: #854d0e;
+}
+.oip_tag.is_beige {
+  background: rgba(245, 158, 11, 0.1) !important;
+  color: #92400e;
+}
+.oip_tag.is_coral {
+  background: rgba(249, 115, 22, 0.1) !important;
+  color: #9a3412;
+}
+
 .oip_tag.is_orange {
   background: var(--orange) !important;
   border: 1px solid var(--orange) !important;
 }
-.oip_tag.is_yellow {
-  background: var(--yellow) !important;
-  border: 1px solid var(--yellow) !important;
-}
 .oip_tag.is_lime {
   background: var(--lime) !important;
   border: 1px solid var(--lime) !important;
 }
-.oip_tag.is_green {
-  background: var(--green) !important;
-  border: 1px solid var(--green) !important;
-}
 .oip_tag.is_cyan {
   background: var(--cyan) !important;
   border: 1px solid var(--cyan) !important;
 }
-.oip_tag.is_blue {
-  background: var(--blue) !important;
-  border: 1px solid var(--blue) !important;
-}
-.oip_tag.is_navy {
-  background: var(--navy) !important;
-  border: 1px solid var(--navy) !important;
-}
-.oip_tag.is_purple {
-  background: var(--purple) !important;
-  border: 1px solid var(--purple) !important;
-}
-.oip_tag.is_pink {
-  background: var(--pink) !important;
-  border: 1px solid var(--pink) !important;
-}
 .oip_tag.is_primary {
   background: var(--primary) !important;
   border: 1px solid var(--primary) !important;
@@ -768,12 +818,6 @@ button {
 }
 .oip_tag.is_light_grey {
   background: var(--background) !important;
-  border-radius: 10px !important;
-  border: 1px solid var(--background) !important;
-  padding: 4px 12px !important;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  line-height: 16px !important;
   color: var(--independence) !important;
 }
 .oip_tag.is_light_grey svg {
@@ -782,32 +826,14 @@ button {
 }
 .oip_tag.is_light_red {
   background: rgba(251, 70, 84, 0.1) !important;
-  border-radius: 10px !important;
-  border: 1px solid transparent !important;
-  padding: 4px 12px !important;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  line-height: 16px !important;
   color: var(--alert) !important;
 }
 .oip_tag.is_light_green {
   background: rgba(50, 209, 117, 0.1) !important;
-  border-radius: 10px !important;
-  border: 1px solid transparent !important;
-  padding: 4px 12px !important;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  line-height: 16px !important;
   color: var(--success) !important;
 }
 .oip_tag.is_light_primary {
   background: #e9f1ff !important;
-  border-radius: 10px !important;
-  border: 1px solid transparent !important;
-  padding: 4px 12px !important;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  line-height: 16px !important;
   color: var(--primary) !important;
 }
 .oip_tag .oip_tag__close {
@@ -829,13 +855,20 @@ button {
 }
 
 .oip_table_card {
-  padding: 32px 0px;
+  padding: 32px 0px 0px 0px;
   border-radius: 12px;
   background: var(--pure-white);
   box-shadow: var(--container-shadow);
   margin: 8px 0;
 }
 
+.oip_half_card {
+  flex: 1 1 50%;
+}
+.oip_third_card {
+  flex: 1 1 33%;
+}
+
 .oip_table_card .oip_card__header {
   padding: 0px 24px;
 }
@@ -882,7 +915,7 @@ button {
 }
 .oip_card .oip_card__header .oip_card__header_buttons {
   display: flex;
-  column-gap: 8px;
+  column-li: 8px;
 }
 @media screen and (max-width: 1000px) {
   .oip_card .oip_card__header .oip_card__header_buttons .oip_download_button,

package/dist/runtime/components/argSubMenu.vue

@@ -1,14 +1,30 @@
 <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 :class="sidebarOpen ? 'arg_sub_menu' : 'arg_sub_small'">
+    <button class="arg_sub_menu_button" @click="openMenu = !openMenu">
+      <span v-show="sidebarOpen">{{ label }}</span>
+      <arg-tooltip
+        :tooltip-text="label"
+        :disable="sidebarOpen"
+        dir="right"
+        :class="['tooltip_display', sidebarOpen ? '' : 'submenu_tooltip_icon']"
+      >
+        <arg-icon
+          name="CaretDown"
+          size="12"
+          color="var(--cool-grey)"
+          thickness="30"
+          :class="[
+            'action_icon',
+            sidebarOpen ? '' : 'icon_sb',
+            openMenu ? 'active_icon' : '',
+          ]"
+        />
+      </arg-tooltip>
+    </button>
+    <div v-show="openMenu" class="arg_sub_menu_content">
+      <slot />
     </div>
+  </div>
 </template>
 <script>
 import {
@@ -23,7 +39,8 @@ export default defineComponent({
   props: {
     label: { type: String, required: true },
     icon: { type: String },
-    defaultCollapseState: { type: Boolean, default: true }
+    defaultCollapseState: { type: Boolean, default: true },
+    sidebarOpen: { type: Boolean, default: true }
   },
   setup(props) {
     let openMenu = ref(props.defaultCollapseState);
@@ -34,34 +51,59 @@ export default defineComponent({
 });
 </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_small {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--s, 8px);
+}
+.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_button {
+  width: 100%;
+  outline: none;
+  border: 0px solid transparent;
+  background-color: transparent;
+  padding: 0;
+  display: flex;
+  padding: 3px 8px 6px 8px;
+  align-items: center;
+  justify-content: space-between;
+  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%;
 }
-.arg_sub_menu_content{
-    width: 100%;
+
+.icon_sb,
+.submenu_tooltip_icon {
+  flex: 1 1 100%;
+}
+
+.tooltip_display {
+  display: flex !important;
+}
+
+.action_icon {
+  transition: all ease 0.3s;
+}
+
+.active_icon {
+  transform: rotate(180deg);
+  color: var(--primary) !important;
 }
-</style>
+</style>