@tekkare/auriga 0.1.9 → 0.1.11

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;

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

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <apexchart
+      :options="chartOptions"
+      :series="series"
+      :height="height"
+      :width="width"
+      :key="chartKey"
+    ></apexchart>
+  </div>
+</template>
+<script>
+import {
+  onMounted,
+  ref,
+  watch,
+  defineComponent,
+  defineAsyncComponent
+} from "vue";
+const ApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
+export default defineComponent({
+  name: "argChart",
+  components: { apexchart: ApexCharts },
+  props: {
+    series: {
+      type: Array,
+      required: true
+    },
+    height: {
+      type: String,
+      default: "75"
+    },
+    width: {
+      type: String,
+      default: "200"
+    },
+    color: {
+      type: Array,
+      default: ["#22C55E"]
+    },
+    minValue: {
+      type: Number,
+      default: null
+    }
+  },
+  setup(props) {
+    const chartKey = ref(1);
+    const chartOptions = ref({
+      colors: props.color,
+      chart: {
+        type: "area",
+        toolbar: {
+          show: false
+        },
+        animations: { enabled: false }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        curve: "smooth"
+      },
+      grid: {
+        show: false,
+        xaxis: {
+          lines: {
+            show: false
+          }
+        },
+        yaxis: {
+          lines: {
+            show: false
+          }
+        }
+      },
+      fill: {
+        colors: props.color,
+        type: "gradient",
+        gradient: {
+          shadeIntensity: 1,
+          opacityFrom: 0.5,
+          opacityTo: 0.5,
+          stops: [0, 100]
+        }
+      },
+      stroke: {
+        width: 1
+      },
+      xaxis: {
+        floating: true,
+        axisTicks: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        },
+        labels: {
+          show: false
+        }
+      },
+      yaxis: {
+        min: 0,
+        floating: true,
+        axisTicks: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        },
+        labels: {
+          show: false
+        }
+      },
+      plotOptions: {
+        area: {
+          fillTo: "origin"
+        }
+      }
+    });
+    watch(
+      () => props.series,
+      (new_series) => {
+        chartKey.value += 1;
+      }
+    );
+    onMounted(() => {
+      if (props.minValue !== null) {
+        chartOptions.value.yaxis.min = props.minValue;
+      } else
+        chartOptions.value.yaxis.min = Math.min(...props.series[0].data) - 30;
+    });
+    return {
+      chartOptions,
+      chartKey
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,122 @@
+declare const _default: import("vue").DefineComponent<{
+    series: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: ArrayConstructor;
+        default: string[];
+    };
+    minValue: {
+        type: NumberConstructor;
+        default: null;
+    };
+}, {
+    chartOptions: import("vue").Ref<{
+        colors: unknown[];
+        chart: {
+            type: string;
+            toolbar: {
+                show: boolean;
+            };
+            animations: {
+                enabled: boolean;
+            };
+        };
+        dataLabels: {
+            enabled: boolean;
+        };
+        stroke: {
+            width: number;
+        };
+        grid: {
+            show: boolean;
+            xaxis: {
+                lines: {
+                    show: boolean;
+                };
+            };
+            yaxis: {
+                lines: {
+                    show: boolean;
+                };
+            };
+        };
+        fill: {
+            colors: unknown[];
+            type: string;
+            gradient: {
+                shadeIntensity: number;
+                opacityFrom: number;
+                opacityTo: number;
+                stops: number[];
+            };
+        };
+        xaxis: {
+            floating: boolean;
+            axisTicks: {
+                show: boolean;
+            };
+            axisBorder: {
+                show: boolean;
+            };
+            labels: {
+                show: boolean;
+            };
+        };
+        yaxis: {
+            min: number;
+            floating: boolean;
+            axisTicks: {
+                show: boolean;
+            };
+            axisBorder: {
+                show: boolean;
+            };
+            labels: {
+                show: boolean;
+            };
+        };
+        plotOptions: {
+            area: {
+                fillTo: string;
+            };
+        };
+    }>;
+    chartKey: import("vue").Ref<number>;
+}, 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;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: ArrayConstructor;
+        default: string[];
+    };
+    minValue: {
+        type: NumberConstructor;
+        default: null;
+    };
+}>>, {
+    width: string;
+    height: string;
+    color: unknown[];
+    minValue: number;
+}, {}>;
+export default _default;