@tekkare/auriga 0.1.27 → 0.1.29

package/dist/runtime/components/argLangSelect.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    v-if="langs.length > 0"
+    class="language_container"
+    :class="showLangOptions ? 'active_lang' : ''"
+    @click="showLangOptions = !showLangOptions"
+  >
+    <div class="oip_row v-center gap-8 justify-between">
+      <div class="oip_row v-center gap-4">
+        <arg-flag :iso="selectedItem.iso" height="16" emoji />
+        <p>
+          {{ langs.filter((f) => f.iso === selectedItem.iso)[0].title }}
+        </p>
+      </div>
+      <arg-icon
+        name="CaretDown"
+        size="14"
+        class="lang_choice_icon"
+        :class="showLangOptions ? 'icon-rotate' : ''"
+      />
+    </div>
+    <div v-if="showLangOptions" class="lang_choice_container">
+      <div
+        v-for="(lang, index) in langs.filter((f) => f.iso !== selectedItem.iso)"
+        :key="index"
+        class="oip_row v-center gap-4 lang-choice"
+        @click="selectLang(lang)"
+      >
+        <arg-flag :iso="lang.iso" height="16" emoji />
+        <p>{{ lang.title }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  onMounted,
+  ref,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+import argFlag from "./argFlag.vue";
+export default defineComponent({
+  name: "argLangSelect",
+  components: { argIcon, argFlag },
+  props: {
+    langs: {
+      type: Array,
+      required: true
+    },
+    default_locale: {
+      type: String,
+      default: "fr"
+    }
+  },
+  emits: ["onSelectLang", "update:Lang"],
+  setup(props, { emit }) {
+    const showLangOptions = ref(false);
+    const selectedItem = ref({
+      title: "Fran\xE7ais",
+      iso: "fr",
+      locale: "fr"
+    });
+    onMounted(() => {
+      selectedItem.value = props.langs[props.langs.findIndex((a) => a.locale === props.default_locale)];
+    });
+    function selectLang(item) {
+      selectedItem.value = item;
+      emit("onSelectLang", item);
+      emit("update:Lang", item.locale);
+    }
+    return {
+      selectedItem,
+      showLangOptions,
+      selectLang
+    };
+  }
+});
+</script>
+
+<style scoped>
+.language_container {
+  cursor: pointer;
+  border: 1.5px solid transparent;
+  border-radius: 8px;
+  padding: 11px 8px;
+  position: relative;
+  background: rgba(253, 253, 255, 0.8);
+  border: 1.5px solid transparent;
+  z-index: 99;
+}
+.language_container:hover svg {
+  color: var(--primary) !important;
+}
+
+.lang_choice_container {
+  padding: 20px 12px 10px 8px;
+  left: -1px;
+  position: absolute;
+  background: rgba(253, 253, 255, 0.8);
+  border-top: none !important;
+  border: 1.5px solid transparent;
+  border-radius: 8px;
+  border-top-left-radius: 0px !important;
+  border-top-right-radius: 0px !important;
+  width: calc(100% - 20px);
+}
+.lang_choice_container.set-width {
+  width: 102% !important;
+}
+
+.active_lang .lang_choice_container {
+  border-top: none !important;
+}
+
+.lang_choice_container:hover {
+  color: var(--primary) !important;
+}
+
+.lang_choice_icon {
+  transition: transform 0.3s;
+  flex-shrink: 0;
+}
+
+.icon-rotate {
+  transform: rotate(-180deg);
+}
+
+p {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  white-space: nowrap;
+}
+
+.lang-choice:hover p {
+  color: var(--primary) !important;
+}
+</style>

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

@@ -0,0 +1,55 @@
+declare const _default: import("vue").DefineComponent<{
+    langs: {
+        type: {
+            (arrayLength: number): Object[];
+            (...items: Object[]): Object[];
+            new (arrayLength: number): Object[];
+            new (...items: Object[]): Object[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    default_locale: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    selectedItem: any;
+    showLangOptions: import("vue").Ref<boolean>;
+    selectLang: (item: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onSelectLang" | "update:Lang")[], "onSelectLang" | "update:Lang", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    langs: {
+        type: {
+            (arrayLength: number): Object[];
+            (...items: Object[]): Object[];
+            new (arrayLength: number): Object[];
+            new (...items: Object[]): Object[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    default_locale: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onOnSelectLang?: ((...args: any[]) => any) | undefined;
+    "onUpdate:Lang"?: ((...args: any[]) => any) | undefined;
+}, {
+    default_locale: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/argScopeHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="arg_scope_header">
     <div class="oip_row v-center gap-16">
-      <arg-actions :lang="lang" action-type="cancel" @onCancel="goBack()" />
+      <arg-actions :lang="lang" action-type="cancel" @onAction="goBack()" />
       <h1 class="scope_title">{{ scopeTitle }}</h1>
     </div>
     <div class="oip_row v-center gap-16">
@@ -24,10 +24,6 @@ export default defineComponent({
       type: String,
       default: "My scope"
     },
-    noSelection: {
-      type: Boolean,
-      default: true
-    },
     lang: {
       type: String,
       default: "en",

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

@@ -3,10 +3,6 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    noSelection: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     lang: {
         type: StringConstructor;
         default: string;
@@ -20,10 +16,6 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    noSelection: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     lang: {
         type: StringConstructor;
         default: string;
@@ -32,6 +24,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     lang: string;
     scopeTitle: string;
-    noSelection: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/argScopeLayout.vue

@@ -1,4 +1,5 @@
 <template>
+  <client-only><arg-style /></client-only>
   <div class="arg_main_scope">
     <slot name="header" />
     <div class="arg_scope_layout_body">
@@ -9,40 +10,13 @@
 </template>
 <script>
 import {
-  onMounted,
   defineComponent
 } from "vue";
-import argIcon from "./argIcon.vue";
 import argStyle from "./argStyle.vue";
 import argFooter from "./argFooter.vue";
 export default defineComponent({
   name: "argScopeLayout",
-  components: { argIcon, argStyle, argFooter },
-  props: {
-    sidebarOpen: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup() {
-    onMounted(() => {
-      adjustMarginForBody();
-      window.addEventListener("resize", adjustMarginForBody);
-    });
-    function adjustMarginForBody() {
-      const fixedHeader = document.getElementById("arg_header");
-      const bodyContent = document.getElementById("arg_main_layout_section");
-      const infoBar = document.getElementById("arg_info_section");
-      if (fixedHeader && bodyContent) {
-        const headerHeight = fixedHeader.offsetHeight;
-        bodyContent.style.marginTop = `${headerHeight}px`;
-      }
-      if (fixedHeader && infoBar) {
-        const headerHeight = fixedHeader.offsetHeight;
-        infoBar.style.top = `${headerHeight + 8}px`;
-      }
-    }
-  }
+  components: { argStyle, argFooter }
 });
 </script>
 <style>

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

@@ -1,14 +1,2 @@
-declare const _default: import("vue").DefineComponent<{
-    sidebarOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    sidebarOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
-    sidebarOpen: boolean;
-}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/dist/runtime/components/argScopeManage.vue

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <div class="arg_scope_manage">
+      <div class="arg_scope_manage_modal">
+        <div class="arg_scope_manage_header">
+          <h1>
+            {{ lang === "fr" ? "Gérer mes scopes" : "Manage my scopes" }}
+          </h1>
+          <div class="cursor-pointer" @click="closeManageScope()">
+            <arg-icon name="X" size="16" color="var(--cool-grey)" />
+          </div>
+        </div>
+        <div class="arg_manage_scope_body">
+          <div
+            v-for="(scope, index) in scopes"
+            :key="index"
+            class="oip_card scope_card"
+          >
+            <div class="arg_manage_scope_general">
+              <div class="oip_row v-center space-between full-width">
+                <h2 class="oip_subtitle">{{ scope.title }}</h2>
+                <arg-text-btn
+                  text-style="warning"
+                  @onClick="deleteScope(scope)"
+                  >{{ lang === "fr" ? "Supprimer" : "Delete" }}</arg-text-btn
+                >
+              </div>
+              <p class="oip_body">{{ scope.description }}</p>
+              <p class="oip_filter_label">
+                {{ lang === "fr" ? "Créé le " : "Created the " }}
+                <span
+                  ><arg-date
+                    class="oip_filter_label"
+                    :raw-date="scope.createdAt"
+                  />
+                </span>
+              </p>
+            </div>
+
+            <div class="arg_scope_manage_criteria">
+              <p class="scope_criteria_title">Criteria:</p>
+              <div class="oip_row v-center gap-8 wrap">
+                <arg-tags
+                  v-for="(criteria, critIndex) in showAllProps === index
+                    ? getScopeCriteria(scope)
+                    : getScopeCriteria(scope).slice(0, 6)"
+                  set-style="gray"
+                  :key="critIndex"
+                  >{{ criteria }}</arg-tags
+                >
+                <arg-text-btn
+                  v-if="
+                    getScopeCriteria(scope).length > 6 && showAllProps !== index
+                  "
+                  @onClick="
+                    showAllProps === index
+                      ? (showAllProps = null)
+                      : (showAllProps = index)
+                  "
+                >
+                  +{{ getScopeCriteria(scope).length - 6 }}
+                </arg-text-btn>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="arg_scope_manage_footer">
+          <arg-btn
+            class="footer_btn"
+            :become-small="false"
+            full-width
+            btn-style="secondary-stroke"
+            @onClick="closeManageScope"
+            >{{ lang === "fr" ? "Fermer" : "Close" }}</arg-btn
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, defineComponent } from "vue";
+import argBtn from "./argBtn.vue";
+import argDate from "./argDate.vue";
+import argIcon from "./argIcon.vue";
+import argTextBtn from "./argTextBtn.vue";
+export default defineComponent({
+  name: "argScopeManage",
+  components: { argBtn, argIcon, argTextBtn, argDate },
+  props: {
+    scopes: {
+      type: Array,
+      required: true
+    },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    }
+  },
+  emits: ["onDelete", "onClose"],
+  setup(props, { emit }) {
+    const showAllProps = ref(null);
+    function getScopeCriteria(scope) {
+      const allCriteria = [];
+      const scopeCriteria = JSON.parse(scope.criteria);
+      for (let i = 0; i < scopeCriteria.length; i++) {
+        for (let j = 0; j < scopeCriteria[i].values.length; j++) {
+          allCriteria.push(scopeCriteria[i].values[j]);
+        }
+      }
+      return allCriteria;
+    }
+    function closeManageScope() {
+      emit("onClose");
+    }
+    function deleteScope(scope) {
+      emit("onDelete", scope);
+    }
+    return {
+      getScopeCriteria,
+      closeManageScope,
+      deleteScope,
+      showAllProps
+    };
+  }
+});
+</script>
+
+<style scoped>
+.arg_scope_manage {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99;
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+}
+
+.arg_scope_manage_modal {
+  display: flex;
+  width: calc(100% - 164px);
+  max-width: 640px;
+  max-height: 670px;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--pure-white);
+}
+
+.arg_scope_manage_header {
+  display: flex;
+  padding: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  box-shadow: 0px 6px 8px 0px rgba(30, 41, 59, 0.1) !important;
+  z-index: 1;
+}
+
+.arg_scope_manage_footer {
+  display: flex;
+  padding: 24px;
+  gap: 32px;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  box-shadow: 0px -6px 8px 0px rgba(30, 41, 59, 0.1);
+  z-index: 1;
+}
+
+.scope_card {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+}
+
+.arg_scope_manage_header > h1 {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: normal;
+}
+
+.arg_manage_scope_body {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  background-color: var(--background);
+  z-index: 0;
+  max-height: 510px;
+  overflow-y: scroll;
+}
+
+.full-width {
+  align-self: stretch;
+}
+
+.footer_action .footer_btn {
+  width: calc(100% - 24px);
+  justify-content: center;
+  white-space: wrap;
+  text-align: center;
+}
+
+.cursor-pointer {
+  cursor: pointer !important;
+}
+
+.oip_required_input,
+.oip_required_input:hover {
+  border-color: var(--system-alert) !important;
+}
+
+.oip_error {
+  color: var(--system-alert);
+}
+
+.arg_manage_scope_general,
+.arg_scope_manage_criteria {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+}
+
+.scope_criteria_title {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+</style>

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

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<{
+    scopes: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    getScopeCriteria: (scope: any) => never[];
+    closeManageScope: () => void;
+    deleteScope: (scope: any) => void;
+    showAllProps: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onClose" | "onDelete")[], "onClose" | "onDelete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    scopes: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    onOnClose?: ((...args: any[]) => any) | undefined;
+    onOnDelete?: ((...args: any[]) => any) | undefined;
+}, {
+    lang: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/argScopeModal.vue

@@ -62,7 +62,7 @@
               <arg-tags
                 v-for="(criteria, index) in scopeCriteria"
                 :key="index"
-                set-style="light_grey"
+                set-style="gray"
                 >{{ criteria }}</arg-tags
               >
             </div>
@@ -73,7 +73,8 @@
             <arg-btn
               class="footer_btn"
               :become-small="false"
-              btn-style="skeleton"
+              full-width
+              btn-style="secondary-stroke"
               @onClick="closeSaveScope"
               >{{ lang === "fr" ? "Annuler" : "Cancel" }}</arg-btn
             >
@@ -82,7 +83,8 @@
             <arg-btn
               class="footer_btn"
               :become-small="false"
-              btn-style="primary"
+              btn-style="primary-fill"
+              full-width
               @onClick="saveScope"
               >{{
                 lang === "fr"
@@ -259,7 +261,7 @@ textarea::placeholder {
 }
 
 .footer_action .footer_btn {
-  width: calc(100% - 24px);
+  width: 100%;
   justify-content: center;
   white-space: wrap;
   text-align: center;

package/dist/runtime/components/argSimpleLabel.vue

@@ -19,6 +19,7 @@
 <script>
 import argIcon from "./argIcon.vue";
 import {
+  onMounted,
   defineComponent
 } from "vue";
 export default defineComponent({
@@ -31,6 +32,13 @@ export default defineComponent({
     },
     show_amount: { type: Boolean, default: false },
     amount_value: { type: Number, default: null }
+  },
+  setup() {
+    onMounted(() => {
+      CSS.paintWorklet.addModule(
+        "https://www.unpkg.com/css-houdini-squircle/squircle.min.js"
+      );
+    });
   }
 });
 </script>

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

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: null;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         type: BooleanConstructor;
         default: boolean;