@tekkare/auriga 0.1.10 → 0.1.11

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: -1px;
+  right: -1px;
+}
+
+.action_left {
+  top: -1px;
+  left: -1px;
+}
+
+.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>

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

@@ -0,0 +1,57 @@
+declare const _default: import("vue").DefineComponent<{
+    inputLabel: {
+        type: StringConstructor;
+        required: true;
+    };
+    defaultValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    hasNegativeValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stepValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    returnValue: import("vue").Ref<number>;
+    typing: import("vue").Ref<boolean>;
+    changeInput: (event: any) => void;
+    changeValueClick: (value: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changeValue" | "update:Number")[], "changeValue" | "update:Number", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    inputLabel: {
+        type: StringConstructor;
+        required: true;
+    };
+    defaultValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    hasNegativeValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stepValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    onChangeValue?: ((...args: any[]) => any) | undefined;
+    "onUpdate:Number"?: ((...args: any[]) => any) | undefined;
+}, {
+    maxValue: number;
+    defaultValue: number;
+    hasNegativeValue: boolean;
+    stepValue: number;
+}, {}>;
+export default _default;

package/dist/runtime/components/argSimpleChart.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <h1 class="prmt_simple_chart_title"><slot name="title" /></h1>
+    <div class="prmt_simple_chart__bar_group">
+      <div
+        class="prmt_simple_chart__bar"
+        v-for="(val, index) in series"
+        :key="index"
+        :style="{
+          width: (100 * val) / seriesTotal + '%',
+          background: colors[index],
+        }"
+      ></div>
+    </div>
+    <div class="prmt_simple_chart__categories_group">
+      <div
+        class="prmt_simple_chart__category oip_row space-between v-center"
+        v-for="(category, index) in categories"
+        :key="index"
+      >
+        <div class="oip_row gap-4 v-center">
+          <div
+            class="prmt_simple_chart__category_color"
+            :style="{ background: colors[index] }"
+          ></div>
+          <h2 class="prmt_simple_chart__category_name">{{ category }}</h2>
+        </div>
+        <div class="oip_row gap-4 v-center">
+          <h2 class="prmt_simple_chart__category_value">
+            {{
+              new Intl.NumberFormat("fr-FR")
+                .format(series[index])
+                .replace(",", ".")
+            }}
+          </h2>
+          <h3 class="prmt_simple_chart__category_percentage">
+            ({{ ((100 * series[index]) / seriesTotal).toFixed(1) }}%)
+          </h3>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  computed,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argSimpleChart",
+  props: {
+    series: {
+      type: Array,
+      required: true
+    },
+    categories: {
+      type: Array,
+      required: true
+    },
+    colors: {
+      type: Array,
+      default: () => ["#a17def", "#fda929", "#3ad9d8", "#f55a8d"]
+    }
+  },
+  setup(props) {
+    const seriesTotal = computed(() => {
+      return props.series.reduce((a, b) => a + b, 0);
+    });
+    return {
+      seriesTotal
+    };
+  }
+});
+</script>
+<style scoped>
+.prmt_simple_chart_title {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--cool-grey);
+  margin-bottom: 4px;
+}
+.prmt_simple_chart__bar_group {
+  display: flex;
+  gap: 4px;
+}
+.prmt_simple_chart__bar {
+  height: 10px;
+  border-radius: 20px;
+}
+.prmt_simple_chart__categories_group {
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
+  margin-top: 13px;
+}
+.prmt_simple_chart__category_name {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--independence);
+}
+.prmt_simple_chart__category_value {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  text-align: right;
+  color: var(--independence);
+}
+.prmt_simple_chart__category_percentage {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--independence);
+}
+.prmt_simple_chart__category_color {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+</style>

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

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<{
+    series: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    categories: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    colors: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+}, {
+    seriesTotal: import("vue").ComputedRef<unknown>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    series: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    categories: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    colors: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+}>>, {
+    colors: unknown[];
+}, {}>;
+export default _default;

package/dist/runtime/components/argSimpleInput.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <input
+      class="oip_simple_input"
+      :placeholder="placeholderValue"
+      :type="inputType"
+      :value="inputValue"
+      @input="changeInput"
+      @keydown.enter="submitInput"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  onMounted,
+  ref,
+  watch,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argSimpleInput",
+  props: {
+    placeholderValue: {
+      type: String,
+      default: "Enter a value"
+    },
+    inputType: {
+      type: String,
+      default: "text"
+    },
+    defaultValue: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  emits: ["update:Value", "changeValue", "submitInput"],
+  setup(props, { emit }) {
+    const inputValue = ref("");
+    onMounted(() => {
+      inputValue.value = props.defaultValue;
+    });
+    watch(
+      () => props.defaultValue,
+      (new_default_value) => {
+        inputValue.value = new_default_value;
+      }
+    );
+    function changeInput(event) {
+      inputValue.value = event.target.value;
+      emit("update:Value", inputValue.value);
+      emit("changeValue", inputValue.value);
+    }
+    function submitInput() {
+      emit("submitInput");
+    }
+    return {
+      inputValue,
+      changeInput,
+      submitInput
+    };
+  }
+});
+</script>
+
+<style scoped>
+.oip_simple_input {
+  border-radius: 8px;
+  border: 1.5px solid var(--dividers);
+  padding: 12px;
+  margin: 5px 0px;
+}
+.oip_simple_input::placeholder {
+  color: var(--wild-blue-yonder);
+}
+.oip_simple_input,
+.oip_simple_input:focus-visible {
+  outline: none !important;
+}
+.oip_simple_input input:hover {
+  border: 1.5px solid rgba(33, 118, 255, 0.2) !important;
+}
+.oip_simple_input input:focus-within {
+  border: 1.5px solid var(--primary) !important;
+  box-shadow: 0 0 0 4px rgba(33, 118, 255, 0.1) !important;
+}
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>

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

@@ -0,0 +1,40 @@
+declare const _default: import("vue").DefineComponent<{
+    placeholderValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputType: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}, {
+    inputValue: import("vue").Ref<string | number>;
+    changeInput: (event: any) => void;
+    submitInput: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:Value" | "changeValue" | "submitInput")[], "update:Value" | "changeValue" | "submitInput", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    placeholderValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputType: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>> & {
+    "onUpdate:Value"?: ((...args: any[]) => any) | undefined;
+    onChangeValue?: ((...args: any[]) => any) | undefined;
+    onSubmitInput?: ((...args: any[]) => any) | undefined;
+}, {
+    defaultValue: string | number;
+    placeholderValue: string;
+    inputType: string;
+}, {}>;
+export default _default;