@tekkare/auriga 0.1.10 → 0.1.12

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

@@ -88,10 +88,10 @@ declare const _default: import("vue").DefineComponent<{
         FM: string;
         FR: string;
         GA: string;
-        'GB-ENG': string;
-        'GB-NIR': string;
-        'GB-SCT': string;
-        'GB-WLS': string;
+        "GB-ENG": string;
+        "GB-NIR": string;
+        "GB-SCT": string;
+        "GB-WLS": string;
         GB: string;
         GD: string;
         GE: string;

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,30 +1,58 @@
 <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>

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/argNumberInput.vue

@@ -0,0 +1,223 @@
+<template>
+  <div :class="['input_number_section', typing ? 'open' : '']" @click.stop>
+    <p class="oip_filter_label">{{ inputLabel }}</p>
+    <div class="input_number_box">
+      <div
+        class="input_number_action action_left"
+        @click="changeValueClick(-stepValue)"
+      >
+        <arg-icon name="Minus" color="var(--cool-grey)" size="16" />
+      </div>
+      <input
+        type="number"
+        :max="maxValue === -1 ? 0 : maxValue"
+        :value="returnValue"
+        class="number_input_style"
+        @input="changeInput"
+      />
+      <div
+        class="input_number_action action_right"
+        @click="changeValueClick(stepValue)"
+      >
+        <arg-icon name="Plus" color="var(--cool-grey)" size="16" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { toInteger } from "lodash";
+import argIcon from "./argIcon.vue";
+import {
+  onMounted,
+  ref,
+  watch,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argNumberInput",
+  components: { argIcon },
+  props: {
+    inputLabel: {
+      type: String,
+      required: true
+    },
+    defaultValue: {
+      type: Number,
+      default: 1
+    },
+    maxValue: {
+      type: Number,
+      default: -1
+    },
+    hasNegativeValue: {
+      type: Boolean,
+      default: false
+    },
+    stepValue: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ["update:Number", "changeValue"],
+  setup(props, { emit }) {
+    const returnValue = ref(1);
+    const typing = ref(false);
+    onMounted(() => {
+      returnValue.value = props.defaultValue;
+      emit("update:Number", returnValue.value);
+      emit("changeValue", returnValue.value);
+    });
+    watch(
+      () => props.defaultValue,
+      (new_default_value) => {
+        returnValue.value = new_default_value;
+      }
+    );
+    function changeInput(event) {
+      if (event.target !== null) {
+        if (props.maxValue !== -1 && event.target.value > props.maxValue) {
+          event.target.value = props.maxValue;
+        } else if (props.hasNegativeValue === false && event.target.value < 0) {
+          event.target.value = 0;
+        }
+        returnValue.value = toInteger(event.target.value);
+        emit("update:Number", returnValue.value);
+        emit("changeValue", returnValue.value);
+      }
+    }
+    function changeValueClick(value) {
+      if (props.maxValue !== -1 && returnValue.value + value > props.maxValue) {
+        returnValue.value = props.maxValue;
+      } else if (props.hasNegativeValue === false && returnValue.value + value < 0) {
+        returnValue.value = 0;
+      } else
+        returnValue.value += value;
+      emit("update:Number", returnValue.value);
+      emit("changeValue", returnValue.value);
+    }
+    return {
+      returnValue,
+      typing,
+      changeInput,
+      changeValueClick
+    };
+  }
+});
+</script>
+
+<style scoped>
+.input_number_box .input_number_action.action_left:hover,
+.input_number_box .input_number_action.action_right:hover {
+  border: 1.5px solid rgba(33, 118, 255, 0.2) !important;
+}
+
+.input_number_box .input_number_action.action_left:hover svg,
+.input_number_box .input_number_action.action_right:hover svg {
+  color: var(--primary) !important;
+}
+
+.input_number_box:focus-within {
+  border: 1.5px solid var(--primary) !important;
+  box-shadow: 0px 0px 0px 4px rgba(33, 118, 255, 0.1) !important;
+}
+
+.input_number_box:focus-within .input_number_action.action_left {
+  top: 0px !important;
+  left: 0px !important;
+}
+.input_number_box:focus-within .input_number_action.action_right {
+  top: 0px !important;
+  right: 0px !important;
+}
+.input_number_box:focus-within {
+  z-index: 9999 !important;
+}
+
+.input_number_box:focus-within .input_number_action.action_left,
+.input_number_box:focus-within
+  .input_number_box
+  .input_number_action.action_left:hover {
+  border-top: 1.5px transparent !important;
+  border-left: 1.5px transparent !important;
+  border-bottom: 1.5px transparent !important;
+}
+.input_number_box:focus-within .input_number_action.action_right,
+.input_number_box:focus-within
+  .input_number_box
+  .input_number_action.action_right:hover {
+  border-top: 1.5px transparent !important;
+  border-right: 1.5px transparent !important;
+  border-bottom: 1.5px transparent !important;
+}
+
+.input_number_section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 4px;
+}
+
+.input_number_box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 48px;
+  gap: 8px;
+  background: var(--pure-white);
+  border: 1.5px solid var(--dividers);
+  border-radius: 8px;
+  position: relative;
+  z-index: 1;
+}
+
+.input_number_action {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px;
+  gap: 8px;
+  background: var(--pure-white);
+  border: 1.5px solid var(--dividers);
+  border-radius: 8px;
+  z-index: 2;
+  cursor: pointer;
+}
+.action_right {
+  top: -1.5px;
+  right: -1.5px;
+}
+
+.action_left {
+  top: -1.5px;
+  left: -1.5px;
+}
+
+.number_input_style {
+  border: none;
+  text-align: center;
+  max-width: 127.5px;
+  height: 16px;
+  padding: 0px !important;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--independence);
+}
+
+.number_input_style:focus-visible {
+  border: none;
+  outline: none;
+}
+
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>