@tekkare/auriga 0.1.10 → 0.1.11

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;

package/dist/runtime/components/argStyle.vue

@@ -1023,4 +1023,12 @@ button {
 .arg_sub_menu .auriga_menu_item {
   padding-left: 24px !important;
 }
+
+.arg_tuto_content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  height: 100%;
+}
 </style>

package/dist/runtime/components/argTags.vue

@@ -1,8 +1,10 @@
 <template>
-  <client-only><arg-style /></client-only>
-  <div :class="`oip_tag is_${setStyle} have_close_${haveClose}`">
-    <slot></slot>
-    <arg-icon v-if="haveClose" name="X" size="14" @click="close()"></arg-icon>
+  <div>
+    <client-only><arg-style /></client-only>
+    <div :class="`oip_tag is_${setStyle} have_close_${haveClose}`">
+      <slot></slot>
+      <arg-icon v-if="haveClose" name="X" size="14" @click="close()"></arg-icon>
+    </div>
   </div>
 </template>
 

package/dist/runtime/components/argTrendIndicator.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div
+      v-if="isUp === false"
+      class="stats_trend_down"
+      :class="isGreenAndRed === false ? 'stats_none_green_down' : ''"
+    >
+      <arg-icon
+        name="ArrowDownRight"
+        size="16px"
+        :color="isGreenAndRed === false ? 'var(--purple)' : 'var(--alert)'"
+      />
+    </div>
+
+    <div
+      v-else-if="isUp === true"
+      class="stats_trend_up"
+      :class="isGreenAndRed === false ? 'stats_none_green_up' : ''"
+    >
+      <arg-icon
+        name="ArrowUpRight"
+        size="16px"
+        :color="isGreenAndRed === false ? 'var(--primary)' : 'var(--success)'"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+export default defineComponent({
+  name: "argTrendIndicator",
+  components: { argIcon },
+  props: {
+    isUp: { type: Boolean, default: true },
+    isGreenAndRed: { type: Boolean, default: false }
+  }
+});
+</script>
+
+<style>
+.stats_trend_down {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  width: 24px;
+  height: 24px;
+  background: rgba(251, 70, 84, 0.1);
+  margin-right: 5px;
+}
+
+.stats_trend_up {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  width: 24px;
+  height: 24px;
+  background: rgba(50, 209, 117, 0.1);
+  margin-right: 5px;
+}
+
+.stats_none_green_down {
+  background: rgba(161, 125, 239, 0.1);
+}
+
+.stats_none_green_up {
+  background: rgba(40, 70, 237, 0.1);
+}
+
+.trend_up_color {
+  color: var(--success);
+}
+
+.trend_down_color {
+  color: var(--alert);
+}
+</style>

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

@@ -0,0 +1,23 @@
+declare const _default: import("vue").DefineComponent<{
+    isUp: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isGreenAndRed: {
+        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<{
+    isUp: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isGreenAndRed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    isUp: boolean;
+    isGreenAndRed: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/components/argTutoModal.vue

@@ -0,0 +1,185 @@
+<template>
+  <div
+    :class="['arg_tuto_modal_container', openTuto ? 'arg_tuto_modal_open' : '']"
+  >
+    <div v-show="openTuto" class="arg_tuto_modal">
+      <div class="arg_tuto_header">
+        <arg-actions action-type="close" customize @onClose="closeTuto">
+          <template #custom>
+            <div class="oip_row v-center gap-6">
+              <arg-icon name="X" size="20" />
+              <p>Close</p>
+            </div>
+          </template>
+        </arg-actions>
+
+        <h1>{{ title }}</h1>
+        <div class="oip_row v-center gap-8 pagination">
+          <arg-icon
+            name="CaretLeft"
+            size="20"
+            :color="currentPage - 1 > 0 ? '' : 'var(--cool-grey)'"
+            @click="prevPage()"
+          />
+          <p>{{ `${currentPage} / ${pageAmount}` }}</p>
+          <arg-icon name="CaretRight" size="20" @click="nextPage()" />
+        </div>
+      </div>
+      <div class="arg_tuto_body">
+        <div
+          v-for="index in pageAmount"
+          :key="index"
+          :class="index !== currentPage ? 'hide' : 'full'"
+        >
+          <slot :name="`page${index}`" />
+        </div>
+      </div>
+      <div class="arg_tuto_footer">
+        <div class="oip_row v-center gap-8 pagination">
+          <arg-icon
+            name="CaretLeft"
+            size="20"
+            :color="currentPage - 1 > 0 ? '' : 'var(--cool-grey)'"
+            @click="prevPage()"
+          />
+          <p>{{ `${currentPage} / ${pageAmount}` }}</p>
+          <arg-icon name="CaretRight" size="20" @click="nextPage()" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ref,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+import argActions from "./argActions.vue";
+export default defineComponent({
+  name: "argTutoModal",
+  components: { argIcon, argActions },
+  props: {
+    pageAmount: {
+      type: Number,
+      required: true
+    },
+    openTuto: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      required: true,
+      default: "My Scope"
+    }
+  },
+  emits: ["onNextPage", "onClose"],
+  setup(props, { emit }) {
+    const currentPage = ref(1);
+    function closeTuto() {
+      emit("onClose");
+    }
+    function prevPage() {
+      if (currentPage.value > 1) {
+        currentPage.value -= 1;
+      }
+    }
+    function nextPage() {
+      if (currentPage.value < props.pageAmount) {
+        currentPage.value += 1;
+      }
+    }
+    return {
+      closeTuto,
+      currentPage,
+      prevPage,
+      nextPage
+    };
+  }
+});
+</script>
+
+<style scoped>
+.arg_tuto_modal_container {
+  background-color: transparent;
+  transition: all ease 0.5s;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  padding: 53px 82px;
+  z-index: 0;
+}
+
+.arg_tuto_modal_open {
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.arg_tuto_modal {
+  display: flex;
+  width: calc(100% - 164px);
+  height: calc(100% - 106px);
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+  border-radius: var(--m, 16px);
+  background: var(--base-white, #fff);
+}
+
+.arg_tuto_header {
+  display: flex;
+  padding: var(--m, 16px);
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-bottom: 1px solid var(--base-dividers, #ececf2);
+  background: var(--base-background, #f5f5f9);
+  backdrop-filter: blur(12px);
+  border-top-left-radius: var(--m, 16px);
+  border-top-right-radius: var(--m, 16px);
+}
+
+.arg_tuto_header > h1 {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 160%;
+}
+
+.pagination > svg {
+  cursor: pointer;
+}
+
+.arg_tuto_body {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.arg_tuto_footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: var(--s, 8px);
+  flex-shrink: 0;
+  align-self: stretch;
+  height: 64px;
+}
+.hide {
+  display: none;
+}
+.full {
+  width: 60%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,41 @@
+declare const _default: import("vue").DefineComponent<{
+    pageAmount: {
+        type: NumberConstructor;
+        required: true;
+    };
+    openTuto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+        default: string;
+    };
+}, {
+    closeTuto: () => void;
+    currentPage: import("vue").Ref<number>;
+    prevPage: () => void;
+    nextPage: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onClose" | "onNextPage")[], "onClose" | "onNextPage", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    pageAmount: {
+        type: NumberConstructor;
+        required: true;
+    };
+    openTuto: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+        default: string;
+    };
+}>> & {
+    onOnClose?: ((...args: any[]) => any) | undefined;
+    onOnNextPage?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    openTuto: boolean;
+}, {}>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",