@tekkare/auriga 0.1.9 → 0.1.11

package/dist/runtime/components/argHeader.vue

@@ -5,12 +5,14 @@
     id="arg_header"
   >
     <div class="arg_header_title_group">
-      <nuxt-link :to="backTo" v-if="backTo" class="arg_header_back_button">
-        <arg-icon name="CaretLeft" size="20px" />
-      </nuxt-link>
-      <button @click="goBack()" v-else class="arg_header_back_button">
-        <arg-icon name="CaretLeft" size="20px" />
-      </button>
+      <div v-if="haveReturn">
+        <nuxt-link :to="backTo" v-if="backTo" class="arg_header_back_button">
+          <arg-icon name="CaretLeft" size="20px" />
+        </nuxt-link>
+        <button @click="goBack()" v-else class="arg_header_back_button">
+          <arg-icon name="CaretLeft" size="20px" />
+        </button>
+      </div>
       <h1 class="arg_header_title">
         {{ title }}
       </h1>
@@ -38,6 +40,7 @@ export default defineComponent({
   props: {
     title: { type: String, required: true },
     backTo: { type: String, required: false },
+    haveReturn: { type: Boolean, default: false },
     tabs: { type: Array, required: false },
     index_menu: { type: [String, Number], default: 1 },
     sidebarOpen: { type: Boolean, default: false }
@@ -75,7 +78,12 @@ export default defineComponent({
   background: transparent;
   width: 100%;
   box-sizing: border-box;
-  margin-left: -8px;
+}
+.arg_header_with_sidebar {
+  left: 200px;
+}
+.arg_header_no_sidebar {
+  left: 52px;
 }
 .arg_header_title_group {
   display: flex;

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

@@ -7,6 +7,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: false;
     };
+    haveReturn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     tabs: {
         type: ArrayConstructor;
         required: false;
@@ -31,6 +35,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: false;
     };
+    haveReturn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     tabs: {
         type: ArrayConstructor;
         required: false;
@@ -48,6 +56,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:Menu"?: ((...args: any[]) => any) | undefined;
 }, {
     index_menu: string | number;
+    haveReturn: boolean;
     sidebarOpen: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/argHybridChart.vue

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    <client-only>
+      <table class="oip_hybrid_chart">
+        <thead class="oip_hybrid_chart__header">
+          <tr>
+            <th
+              class="oip_hybrid_chart__header_elem"
+              v-for="(header, index) in heads"
+              :key="index"
+            >
+              {{ header }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="oip_hybrid_chart__body">
+          <tr v-for="(row, tableIndex) in tableBody" :key="tableIndex">
+            <td
+              v-for="(val, index) in row.values"
+              :key="index"
+              class="oip_hybrid_chart__td"
+            >
+              <div class="oip_hybrid_chart__bar_group" v-if="index === 0">
+                <div
+                  class="oip_hybrid_chart__bar"
+                  :style="{
+                    background: barColor + '1a',
+                    width: `${getPercentage(row.values[1].percentage)}%`,
+                  }"
+                ></div>
+                <arg-tooltip
+                  :id="`tooltip-${val}`"
+                  :disable="isEllipsisActive(val)"
+                  :tooltipText="val"
+                  :dir="tableIndex === tableBody.length - 1 ? 'bottom' : 'top'"
+                  class="oip_hybrid_chart__bar_content"
+                >
+                  <div :id="`text-value-${val}`" class="truncated">
+                    {{ val }}
+                  </div>
+                </arg-tooltip>
+              </div>
+              <div class="oip_hybrid_chart__td_content" v-if="index === 1">
+                <p>
+                  {{
+                    new Intl.NumberFormat("fr-FR")
+                      .format(val.value)
+                      .replace(",", ".")
+                  }}
+                  <span class="oip_hybrid_chart__bar_percentage"
+                    >({{ val.percentage }} %)</span
+                  >
+                </p>
+              </div>
+              <div class="oip_hybrid_chart__td_content" v-if="index > 1">
+                {{ val }}
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </client-only>
+    <div class="oip_hybrid_chart__footer" v-if="limiter">
+      <arg-btn
+        btnStyle="skeleton"
+        prefixIcon="CornersOut"
+        @onClick="changeShowState(true)"
+        v-if="!showAll"
+        >Show all</arg-btn
+      >
+      <arg-btn
+        btnStyle="skeleton"
+        prefixIcon="CornersIn"
+        @onClick="changeShowState(false)"
+        v-if="showAll"
+        >Show less</arg-btn
+      >
+    </div>
+  </div>
+</template>
+<script>
+import argBtn from "./argBtn";
+import argTooltip from "./argTooltip";
+import {
+  onMounted,
+  ref,
+  computed,
+  watch,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argHybridChart",
+  components: { argBtn, argTooltip },
+  props: {
+    heads: {
+      type: Array,
+      required: true
+    },
+    contents: {
+      type: Array,
+      required: true
+    },
+    barColor: {
+      type: String,
+      default: "#4475FB"
+    },
+    limiter: {
+      type: Number,
+      required: false
+    }
+  },
+  emits: ["showState"],
+  setup(props, { emit }) {
+    const showAll = ref(false);
+    const maxValue = ref(0);
+    const tableBody = computed(() => {
+      let contentValues = [];
+      if (props.limiter) {
+        if (!showAll.value) {
+          contentValues = props.contents.slice(0, props.limiter);
+        } else {
+          contentValues = props.contents;
+        }
+      } else {
+        contentValues = props.contents;
+      }
+      return contentValues;
+    });
+    onMounted(() => {
+      getMaxValue();
+    });
+    watch(
+      () => props.contents,
+      (new_contents) => {
+        maxValue.value = 0;
+        getMaxValue();
+      }
+    );
+    function isEllipsisActive(value) {
+      let textValue = document?.getElementById(`text-value-${value}`);
+      let tooltip = document?.getElementById(`tooltip-${value}`);
+      if (textValue !== void 0 && textValue !== null && tooltip !== null) {
+        tooltip.style.maxWidth = "12000px";
+        textValue.style.overflow = "initial";
+        const noEllipsisWidth = textValue.offsetWidth;
+        tooltip.style.maxWidth = "100%";
+        textValue.style.overflow = "hidden";
+        const ellipsisWidth = textValue.offsetWidth;
+        if (ellipsisWidth < noEllipsisWidth) {
+          return false;
+        } else {
+          return true;
+        }
+      }
+    }
+    function getMaxValue() {
+      for (let i = 0; i < props.contents.length; i++) {
+        if (parseFloat(props.contents[i].values[1].percentage) > maxValue.value) {
+          parseFloat(maxValue.value = props.contents[i].values[1].percentage);
+        }
+      }
+    }
+    function changeShowState(val) {
+      showAll.value = val;
+      emit("showState", val);
+    }
+    function getPercentage(value) {
+      if (maxValue.value === 100) {
+        return value;
+      } else {
+        if (value === maxValue.value) {
+          return 100;
+        } else {
+          return value * 100 / maxValue.value;
+        }
+      }
+    }
+    return {
+      maxValue,
+      showAll,
+      getMaxValue,
+      changeShowState,
+      getPercentage,
+      tableBody,
+      isEllipsisActive
+    };
+  }
+});
+</script>
+<style scoped>
+.oip_hybrid_chart {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  table-layout: auto;
+}
+.oip_hybrid_chart__header th {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--cool-grey);
+}
+.oip_hybrid_chart__header_elem:first-child {
+  text-align: left;
+  padding-left: 0;
+}
+.oip_hybrid_chart__header_elem:last-child {
+  padding-right: 0;
+}
+.oip_hybrid_chart__header_elem {
+  padding: 5px 10px;
+  white-space: nowrap;
+  text-align: right;
+}
+.oip_hybrid_chart__body tr {
+  padding: 4px 0;
+  height: 40px;
+}
+.oip_hybrid_chart__td:first-child {
+  width: 100%;
+  padding-left: 0;
+}
+.oip_hybrid_chart__td:last-child .oip_hybrid_chart__td_content {
+  padding-right: 0;
+}
+.oip_hybrid_chart__td {
+  vertical-align: top !important;
+}
+.oip_hybrid_chart__td_content {
+  padding: 5px 10px;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 160%;
+  color: var(--independence);
+  white-space: nowrap;
+  text-align: right;
+}
+
+.oip_hybrid_chart__bar_group {
+  position: relative;
+  width: 100%;
+}
+.oip_hybrid_chart__bar {
+  position: absolute;
+  z-index: 0;
+  height: 32px;
+}
+.oip_hybrid_chart__bar_content {
+  position: absolute;
+  z-index: 1;
+  padding: 8px 10px;
+  white-space: nowrap;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  max-width: 100%;
+}
+
+.oip_hybrid_chart__bar_percentage {
+  margin-left: 4px;
+  font-weight: 400;
+}
+.oip_hybrid_chart__footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+}
+
+.truncated {
+  display: block;
+  white-space: nowrap; /* forces text to single line */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

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

@@ -0,0 +1,48 @@
+declare const _default: import("vue").DefineComponent<{
+    heads: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    contents: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    barColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    limiter: {
+        type: NumberConstructor;
+        required: false;
+    };
+}, {
+    maxValue: import("vue").Ref<number>;
+    showAll: import("vue").Ref<boolean>;
+    getMaxValue: () => void;
+    changeShowState: (val: boolean) => void;
+    getPercentage: (value: number) => number;
+    tableBody: import("vue").ComputedRef<never[]>;
+    isEllipsisActive: (value: string) => boolean | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "showState"[], "showState", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    heads: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    contents: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    barColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    limiter: {
+        type: NumberConstructor;
+        required: false;
+    };
+}>> & {
+    onShowState?: ((...args: any[]) => any) | undefined;
+}, {
+    barColor: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/argMainLayout.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="sidebarOpen ? 'arg_main_with_sidebar' : 'arg_main_no_sidebar'">
     <slot name="sidebar" />
+    <slot name="tuto" />
     <div class="arg_main_layout_body">
       <div class="arg_info" id="arg_info_section">
         <slot name="infoBar" />

package/dist/runtime/components/argMenuLink.vue

@@ -1,48 +1,77 @@
 <template>
-  <nuxt-link :to="to" class="arg_menu_link">
-    <arg-tooltip
-      :tooltip-text="label"
-      :disable="sidebarOpen"
-      dir="right"
-      :class="['tooltip_display', sidebarOpen ? '' : 'link_menu_tooltip_icon']"
-    >
-      <arg-icon :name="icon" color="var(--cool-grey)" size="20" />
-    </arg-tooltip>
-    <span v-show="sidebarOpen">{{ label }}</span>
-  </nuxt-link>
+  <div>
+    <nuxt-link v-if="!isAction" :to="to" class="arg_menu_link">
+      <arg-tooltip
+        :tooltip-text="label"
+        :disable="sidebarOpen"
+        dir="right"
+        :class="[
+          'tooltip_display',
+          sidebarOpen ? '' : 'link_menu_tooltip_icon',
+        ]"
+      >
+        <arg-icon :name="icon" color="var(--cool-grey)" size="20" />
+      </arg-tooltip>
+      <span v-show="sidebarOpen">{{ label }}</span>
+    </nuxt-link>
+    <div v-else class="arg_menu_link" @click="sendAction()">
+      <arg-tooltip
+        :tooltip-text="label"
+        :disable="sidebarOpen"
+        dir="right"
+        :class="[
+          'tooltip_display',
+          sidebarOpen ? '' : 'link_menu_tooltip_icon',
+        ]"
+      >
+        <arg-icon :name="icon" color="var(--cool-grey)" size="20" />
+      </arg-tooltip>
+      <span v-show="sidebarOpen">{{ label }}</span>
+    </div>
+  </div>
 </template>
 <script>
 import {
   defineComponent
 } from "vue";
 import argIcon from "./argIcon.vue";
-import argStyle from "./argStyle.vue";
 export default defineComponent({
   name: "argMenuLink",
-  components: { argIcon, argStyle },
+  components: { argIcon },
   props: {
     icon: { type: String, required: true },
     label: { type: String, required: true },
-    to: { type: String, required: true, default: "/" },
-    sidebarOpen: { type: Boolean, default: true }
+    to: { type: String, default: "/" },
+    sidebarOpen: { type: Boolean, default: true },
+    isAction: { type: Boolean, default: false }
+  },
+  emits: ["onClick"],
+  setup(props, { emit }) {
+    function sendAction() {
+      emit("onClick");
+    }
+    return {
+      sendAction
+    };
   }
 });
 </script>
 <style>
 .arg_menu_link {
   display: flex;
-  height: 32px;
   padding: 6px;
   align-items: center;
   gap: 6px;
   align-self: stretch;
-  color: var(--cool-grey);
+  color: var(--independence);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 160%;
   text-transform: capitalize;
   cursor: pointer;
+  border-radius: 4px;
+  margin: 8px 0px;
 }
 
 .arg_menu_link:hover svg {

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

@@ -9,14 +9,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     to: {
         type: StringConstructor;
-        required: true;
         default: string;
     };
     sidebarOpen: {
         type: BooleanConstructor;
         default: boolean;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isAction: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    sendAction: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "onClick"[], "onClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {
         type: StringConstructor;
         required: true;
@@ -27,15 +32,21 @@ declare const _default: import("vue").DefineComponent<{
     };
     to: {
         type: StringConstructor;
-        required: true;
         default: string;
     };
     sidebarOpen: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+    isAction: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onOnClick?: ((...args: any[]) => any) | undefined;
+}, {
     sidebarOpen: boolean;
     to: string;
+    isAction: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/argMultipleChoice.vue

@@ -42,7 +42,7 @@ export default defineComponent({
     },
     return_value: {
       type: Boolean,
-      default: false
+      default: true
     }
   },
   emits: ["changeElement", "update:Selection"],

package/dist/runtime/components/argMultipleSelect.vue

@@ -2,22 +2,33 @@
   <div>
     <arg-style />
     <!-- Simple select -->
-    <arg-simple-label
-      :disabled="disabled"
-      :show_amount="show_amount"
-      :amount_value="selected_items.length"
-      @click="changeDisplay()"
-      :class="isDisplay ? 'open' : ''"
-    >
-      <p :class="show_amount === true ? 'oip_crop big' : 'oip_crop small'">
-        {{
-          (nested && selected_nested.length > 0) ||
-          (!nested && selected_items.length > 0)
-            ? getAllSelect
-            : emptyMsg
-        }}
-      </p>
-    </arg-simple-label>
+    <div class="oip_select_display">
+      <p class="oip_filter_label">{{ multiple_label }}</p>
+      <arg-simple-label
+        :disabled="disabled"
+        :show_amount="show_amount"
+        :amount_value="selected_items.length"
+        @click="changeDisplay()"
+        :class="isDisplay ? 'open' : ''"
+      >
+        <p
+          :class="[
+            show_amount === true ? 'oip_crop big' : 'oip_crop small',
+            (nested && selected_nested.length > 0) ||
+            (!nested && selected_items.length > 0)
+              ? ''
+              : 'oip_empty_select',
+          ]"
+        >
+          {{
+            (nested && selected_nested.length > 0) ||
+            (!nested && selected_items.length > 0)
+              ? getAllSelect
+              : emptyMsg
+          }}
+        </p>
+      </arg-simple-label>
+    </div>
 
     <div
       :style="isDisplay === false ? 'display : none' : ''"
@@ -306,7 +317,8 @@ export default defineComponent({
     multiple_columns: { type: Boolean, default: false },
     options_disable: { type: Array, default: () => [] },
     show_amount: { type: Boolean, default: true },
-    emptyMsg: { type: String, default: "No selection" }
+    emptyMsg: { type: String, default: "No selection" },
+    multiple_label: { type: String, required: true }
   },
   emits: ["changeElement", "update:Selection", "changeInputValue", "onClose"],
   setup(props, { emit }) {

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

@@ -47,6 +47,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    multiple_label: {
+        type: StringConstructor;
+        required: true;
+    };
 }, {
     del_all: () => void;
     del_all_cat: (index: number) => void;
@@ -124,6 +128,10 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    multiple_label: {
+        type: StringConstructor;
+        required: true;
+    };
 }>> & {
     onOnClose?: ((...args: any[]) => any) | undefined;
     onChangeElement?: ((...args: any[]) => any) | undefined;