@tekkare/auriga 0.1.10 → 0.1.12

package/dist/runtime/components/argTable.vue

@@ -6,7 +6,7 @@
       :value="searchKey"
       :placeHolderValue="getPlaceHolder"
       class="table_input"
-      @submitSearch="searchSubmit = true"
+      @submitSearch="sendSearch"
     />
     <div :class="fullTableScroll ? 'full scroll_table' : 'full'">
       <div
@@ -107,7 +107,13 @@
                     :name="columnTypeNonProps[valIndex]"
                     v-bind:value="value"
                   ></slot>
-                  <p v-else>{{ value }}</p>
+                  <p v-else>
+                    {{
+                      typeof value === "number"
+                        ? Intl.NumberFormat("us-US").format(value)
+                        : value
+                    }}
+                  </p>
                 </td>
               </tr>
               <tr
@@ -117,7 +123,10 @@
                 :class="greyBG(contIndex) ? 'grey_bg' : 'white_bg'"
               >
                 <td class="more_section" :colspan="heads.length.toString()">
-                  <slot name="showMore" v-bind:value="contIndex" />
+                  <slot
+                    name="showMore"
+                    v-bind:value="[contIndex, finalTable[contIndex][0]]"
+                  />
                 </td>
               </tr>
             </template>
@@ -128,7 +137,11 @@
         </div>
         <div v-else-if="loadingData" class="empty_table">
           <arg-tekkare-loader v-if="loaderType === 'tekkare'" />
-          <arg-data-loader v-else />
+          <arg-data-loader
+            v-else
+            :text="loaderValues[0]"
+            :sub-text="loaderValues[1]"
+          />
         </div>
         <div
           v-if="
@@ -198,6 +211,9 @@ import argIcon from "./argIcon.vue";
 import argNoData from "./argNoData.vue";
 import argDataLoader from "./argDataLoader.vue";
 import argTekkareLoader from "./argTekkareLoader.vue";
+import argSearchInput from "./argSearchInput.vue";
+import argTooltip from "./argTooltip.vue";
+import argBtn from "./argBtn.vue";
 import {
   ref,
   computed,
@@ -206,7 +222,15 @@ import {
 } from "vue";
 export default defineComponent({
   name: "argTable",
-  components: { argIcon, argNoData, argDataLoader, argTekkareLoader },
+  components: {
+    argIcon,
+    argNoData,
+    argDataLoader,
+    argTekkareLoader,
+    argSearchInput,
+    argTooltip,
+    argBtn
+  },
   props: {
     heads: {
       type: Array,
@@ -219,7 +243,7 @@ export default defineComponent({
       default: () => [{ values: Array }]
     },
     // data values
-    pageSize: { type: Number, default: 3 },
+    pageSize: { type: Number, default: 10 },
     // number of rows to be displayed in table
     sort: { type: Boolean, default: true },
     // allow for table sorting
@@ -261,6 +285,10 @@ export default defineComponent({
         "Change or empty your search."
       ]
     },
+    loaderValues: {
+      type: Array,
+      default: () => ["Doing data science", "Thanks for waiting"]
+    },
     loadingData: {
       type: Boolean,
       default: false
@@ -278,7 +306,8 @@ export default defineComponent({
       default: "300"
     }
   },
-  setup(props) {
+  emits: ["changeInputValue"],
+  setup(props, { emit }) {
     const dataValues = ref();
     const sortCol = ref();
     const sortDir = ref();
@@ -310,6 +339,9 @@ export default defineComponent({
     );
     watch(searchKey, (newSearchKey) => {
       setPage(1);
+      if (!props.searchFullWord || props.searchFullWord && newSearchKey.length === 0) {
+        emit("changeInputValue", newSearchKey);
+      }
       if (newSearchKey.length === 0) {
         searchSubmit.value = false;
       }
@@ -407,6 +439,10 @@ export default defineComponent({
       }
       searchIndex.value = index;
     }
+    function sendSearch() {
+      searchSubmit.value = true;
+      emit("changeInputValue", searchKey.value);
+    }
     function viewSearchInput(index) {
       if (searchIndex.value === index && showSearch) {
         return true;
@@ -618,7 +654,8 @@ export default defineComponent({
       resultCount,
       totalPages,
       getPlaceHolder,
-      getHeight
+      getHeight,
+      sendSearch
     };
   }
 });

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

@@ -132,6 +132,10 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => string[];
     };
+    loaderValues: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
     loadingData: {
         type: BooleanConstructor;
         default: boolean;
@@ -186,7 +190,8 @@ declare const _default: import("vue").DefineComponent<{
     totalPages: import("vue").ComputedRef<number>;
     getPlaceHolder: import("vue").ComputedRef<string>;
     getHeight: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    sendSearch: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "changeInputValue"[], "changeInputValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     heads: {
         type: {
             (arrayLength: number): string[];
@@ -320,6 +325,10 @@ declare const _default: import("vue").DefineComponent<{
         type: ArrayConstructor;
         default: () => string[];
     };
+    loaderValues: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
     loadingData: {
         type: BooleanConstructor;
         default: boolean;
@@ -336,7 +345,9 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
-}>>, {
+}>> & {
+    onChangeInputValue?: ((...args: any[]) => any) | undefined;
+}, {
     sort: boolean;
     search: boolean;
     contents: Object[];
@@ -349,6 +360,7 @@ declare const _default: import("vue").DefineComponent<{
     toggleDisplay: boolean;
     pagesPosition: string;
     noDataValues: unknown[];
+    loaderValues: unknown[];
     loadingData: boolean;
     loaderType: string;
     fullTableScroll: boolean;

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,186 @@
+<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;
+  left: 0;
+  bottom: 0;
+  height: 0px;
+  width: 0px;
+  padding: 53px 82px;
+  z-index: -5;
+}
+
+.arg_tuto_modal_open {
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: calc(100% - 106px);
+}
+
+.arg_tuto_modal {
+  display: flex;
+  width: calc(100% - 164px);
+  height: 100%;
+  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.12",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -32,6 +32,7 @@
   "dependencies": {
     "@esbuild/darwin-x64": "^0.19.8",
     "@nuxt/kit": "^3.7.3",
+    "@pinia/nuxt": "^0.5.1",
     "apexcharts": "^3.43.0",
     "vue-apexcharts": "^1.6.2",
     "vue3-apexcharts": "^1.4.4"