@tekkare/auriga 0.1.9 → 0.1.11

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.9",
+  "version": "0.1.11",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -30,6 +30,7 @@
     "patch": "nuxt-module-build && npm version patch && npm publish"
   },
   "dependencies": {
+    "@esbuild/darwin-x64": "^0.19.8",
     "@nuxt/kit": "^3.7.3",
     "apexcharts": "^3.43.0",
     "vue-apexcharts": "^1.6.2",