@tekkare/auriga 0.2.43 → 0.2.44

package/dist/runtime/components/argScopeCriteriaIndicator.vue

@@ -1,31 +1,20 @@
 <template>
   <div class="criteria_section">
     <p class="arg_scope_label">
-      {{
-        lang === "en"
-          ? "Scope applied:"
-          : lang === "es"
-          ? "Scope aplicado:"
-          : "Scope appliqué:"
-      }}
+      {{ langData?.apply }}
     </p>
     <p class="arg_scope">
-      {{
-        selected !== null
-          ? selected
-          : lang === "en"
-          ? "Custom"
-          : lang === "es"
-          ? "Personalizado"
-          : "Sur mesure"
-      }}
+      {{ selected !== null ? selected : langData?.custom }}
     </p>
   </div>
 </template>
 
 <script>
 import {
-  defineComponent
+  ref,
+  watch,
+  defineComponent,
+  onBeforeMount
 } from "vue";
 export default defineComponent({
   name: "argScopeCriteriaIndicator",
@@ -38,9 +27,33 @@ export default defineComponent({
       type: String,
       default: "en",
       validator: (value) => {
-        return ["en", "fr", "es"].includes(value);
+        return ["en", "fr", "es", "jp"].includes(value);
       }
     }
+  },
+  setup(props) {
+    const langData = ref(null);
+    async function setLang() {
+      const jsonFiles = import.meta.glob("./locales/*.json");
+      for (const path in jsonFiles) {
+        if (path.split("/")[2].includes(props.lang)) {
+          const json = await jsonFiles[path]();
+          langData.value = json.scopeIndic;
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      setLang();
+    });
+    watch(
+      () => props.lang,
+      () => {
+        setLang();
+      }
+    );
+    return {
+      langData
+    };
   }
 });
 </script>

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

@@ -8,7 +8,9 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    langData: import("vue").Ref<any>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     selected: {
         type: StringConstructor;
         default: null;

package/dist/runtime/components/argScopeHeader.vue

@@ -3,15 +3,7 @@
     <div class="oip_row v-center gap-16">
       <arg-actions :lang="lang" action-type="cancel" @onAction="goBack()" />
       <h1 class="scope_title">
-        {{
-          scopeTitle !== null
-            ? scopeTitle
-            : lang === "en"
-            ? "My scope"
-            : lang === "es"
-            ? "Mi scope"
-            : "Mon scope"
-        }}
+        {{ scopeTitle !== null ? scopeTitle : langData }}
       </h1>
     </div>
     <div class="oip_row v-center gap-16">
@@ -22,7 +14,10 @@
 
 <script>
 import {
-  defineComponent
+  ref,
+  watch,
+  defineComponent,
+  onBeforeMount
 } from "vue";
 import { useRouter } from "vue-router";
 import argActions from "./argActions.vue";
@@ -38,7 +33,7 @@ export default defineComponent({
       type: String,
       default: "en",
       validator: (value) => {
-        return ["en", "fr", "es"].includes(value);
+        return ["en", "fr", "es", "jp"].includes(value);
       }
     },
     cancelLink: {
@@ -49,6 +44,25 @@ export default defineComponent({
   },
   setup(props) {
     const router = useRouter();
+    const langData = ref(null);
+    async function setLang() {
+      const jsonFiles = import.meta.glob("./locales/*.json");
+      for (const path in jsonFiles) {
+        if (path.split("/")[2].includes(props.lang)) {
+          const json = await jsonFiles[path]();
+          langData.value = json.myScope;
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      setLang();
+    });
+    watch(
+      () => props.lang,
+      () => {
+        setLang();
+      }
+    );
     function goBack() {
       if (props.cancelLink !== null) {
         router.push(props.cancelLink);
@@ -57,7 +71,8 @@ export default defineComponent({
     }
     return {
       router,
-      goBack
+      goBack,
+      langData
     };
   }
 });

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

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     router: import("vue-router").Router;
     goBack: () => void;
+    langData: import("vue").Ref<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     scopeTitle: {
         type: StringConstructor;

package/dist/runtime/components/argScopeManage.vue

@@ -4,13 +4,7 @@
       <div class="arg_scope_manage_modal">
         <div class="arg_scope_manage_header">
           <h1>
-            {{
-              lang === "fr"
-                ? "Gérer mes scopes"
-                : lang === "es"
-                ? "Gestionar mis scopes"
-                : "Manage my scopes"
-            }}
+            {{ langData?.title }}
           </h1>
           <div class="cursor-pointer" @click="closeManageScope()">
             <arg-icon name="X" size="16" color="var(--dark)" />
@@ -30,43 +24,25 @@
                   <arg-text-btn
                     text-style="warning"
                     @onClick="deleteScope(scope)"
-                    >{{
-                      lang === "fr"
-                        ? "Supprimer"
-                        : lang === "es"
-                        ? "Borrar"
-                        : "Delete"
-                    }}</arg-text-btn
+                    >{{ langData?.del }}</arg-text-btn
                   >
                 </div>
                 <p class="oip_body">{{ scope.description }}</p>
                 <p class="oip_filter_label">
-                  {{
-                    lang === "fr"
-                      ? "Créé le "
-                      : lang === "es"
-                      ? "Creado el"
-                      : "Created the "
-                  }}
+                  <span v-if="lang !== 'jp'">{{ langData?.created }} </span>
                   <span
                     ><arg-date
                       class="oip_filter_label"
                       :raw-date="scope.createdAt"
+                      :lang="lang"
                     />
                   </span>
+                  <span v-if="lang === 'jp'">{{ langData?.created }} </span>
                 </p>
               </div>
 
               <div class="arg_scope_manage_criteria">
-                <p class="scope_criteria_title">
-                  {{
-                    lang === "es"
-                      ? "Criterio"
-                      : lang === "fr"
-                      ? "Critères"
-                      : "Criteria"
-                  }}:
-                </p>
+                <p class="scope_criteria_title">{{ langData?.criteria }}:</p>
                 <div class="oip_row v-center gap-8 wrap">
                   <arg-tags
                     v-for="(criteria, critIndex) in showAllProps === index
@@ -101,9 +77,7 @@
             full-width
             btn-style="secondary-stroke"
             @onClick="closeManageScope"
-            >{{
-              lang === "fr" ? "Fermer" : lang === "es" ? "Cerrar" : "Close"
-            }}</arg-btn
+            >{{ langData?.close }}</arg-btn
           >
         </div>
       </div>
@@ -112,7 +86,7 @@
 </template>
 
 <script>
-import { ref, defineComponent } from "vue";
+import { ref, defineComponent, watch, onBeforeMount } from "vue";
 import argBtn from "./argBtn.vue";
 import argDate from "./argDate.vue";
 import argIcon from "./argIcon.vue";
@@ -142,6 +116,25 @@ export default defineComponent({
   emits: ["onDelete", "onClose"],
   setup(props, { emit }) {
     const showAllProps = ref(null);
+    const langData = ref(null);
+    async function setLang() {
+      const jsonFiles = import.meta.glob("./locales/*.json");
+      for (const path in jsonFiles) {
+        if (path.split("/")[2].includes(props.lang)) {
+          const json = await jsonFiles[path]();
+          langData.value = json.scopeManage;
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      setLang();
+    });
+    watch(
+      () => props.lang,
+      () => {
+        setLang();
+      }
+    );
     function getScopeCriteria(scope) {
       const allCriteria = [];
       const scopeCriteria = JSON.parse(scope.criteria);
@@ -162,7 +155,8 @@ export default defineComponent({
       getScopeCriteria,
       closeManageScope,
       deleteScope,
-      showAllProps
+      showAllProps,
+      langData
     };
   }
 });

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

@@ -17,6 +17,7 @@ declare const _default: import("vue").DefineComponent<{
     closeManageScope: () => void;
     deleteScope: (scope: any) => void;
     showAllProps: import("vue").Ref<any>;
+    langData: import("vue").Ref<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onClose" | "onDelete")[], "onClose" | "onDelete", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     scopes: {
         type: ArrayConstructor;

package/dist/runtime/components/argScopeModal.vue

@@ -4,13 +4,7 @@
       <div class="arg_save_modal">
         <div class="arg_save_header">
           <h1>
-            {{
-              lang === "fr"
-                ? "Enregistrer mon scope"
-                : lang === "es"
-                ? "Salvar mi scope"
-                : "Save my scope"
-            }}
+            {{ langData?.title }}
           </h1>
           <div class="cursor-pointer" @click="closeSaveScope()">
             <arg-icon name="X" size="16" color="var(--dark)" />
@@ -18,72 +12,34 @@
         </div>
         <div class="arg_save_body">
           <div class="oip_filter_display scope_name_input">
-            <p class="oip_filter_label">
-              {{
-                lang === "fr"
-                  ? "Nom scope"
-                  : lang === "es"
-                  ? "Scope nombre"
-                  : "Scope name"
-              }}*
-            </p>
+            <p class="oip_filter_label">{{ langData?.name }}*</p>
             <input
               v-model="scopeName"
               class="oip_simple_input"
               :class="saveFail ? 'oip_required_input' : ''"
-              :placeholder="
-                lang === 'fr'
-                  ? 'Nom de votre scope e.g Benchmark 2023'
-                  : lang === 'es'
-                  ? 'Nombre del scope e.g Benchmark 2023'
-                  : 'Name of your scope e.g. Benchmark 2023'
-              "
+              :placeholder="langData?.namePlaceholder"
               type="text"
               :required="true"
             />
             <p v-if="saveFail" class="oip_body oip_error">
-              {{
-                lang === "fr"
-                  ? "Un nom est requis pour enregistrer votre scope!"
-                  : lang === "es"
-                  ? "Nombre es necesario para salvar el scope!"
-                  : "Name is required to save your scope!"
-              }}
+              {{ langData?.nameError }}
             </p>
           </div>
           <div class="oip_filter_display full_width">
             <p class="oip_filter_label">
-              {{
-                lang === "fr"
-                  ? "Décrivez votre scope (optionnel)"
-                  : lang === "es"
-                  ? "Describe su scope (opcional)"
-                  : "Describe your scope (optional)"
-              }}
+              {{ langData?.descr }}
             </p>
             <textarea
               v-model="scopeDescr"
               name="ScopeDescr"
               cols="40"
               rows="5"
-              :placeholder="
-                lang === 'fr'
-                  ? 'Votre description ici'
-                  : lang === 'es'
-                  ? 'Su descripción aquí'
-                  : 'Your description here'
-              "
+              :placeholder="langData?.descrPlaceholder"
             />
           </div>
           <div class="oip_filter_display full_width">
             <p class="oip_filter_label">
-              {{
-                lang === "fr"
-                  ? "Critères"
-                  : lang === "es"
-                  ? "Criterio"
-                  : "Criteria"
-              }}
+              {{ langData?.crit }}
             </p>
             <div class="scope_criteria">
               <arg-tags
@@ -103,9 +59,7 @@
               full-width
               btn-style="secondary-stroke"
               @onClick="closeSaveScope"
-              >{{
-                lang === "fr" ? "Annuler" : lang === "es" ? "Anular" : "Cancel"
-              }}</arg-btn
+              >{{ langData?.cancel }}</arg-btn
             >
           </div>
           <div class="footer_action">
@@ -115,13 +69,7 @@
               btn-style="primary-fill"
               full-width
               @onClick="saveScope"
-              >{{
-                lang === "fr"
-                  ? "Enregistrer le scope et continuer"
-                  : lang === "es"
-                  ? "Salvar scope y continuar"
-                  : "Save scope and continue"
-              }}</arg-btn
+              >{{ langData?.save }}</arg-btn
             >
           </div>
         </div>
@@ -137,7 +85,8 @@ import {
   onMounted,
   watch,
   computed,
-  onUnmounted
+  onUnmounted,
+  onBeforeMount
 } from "vue";
 import argIcon from "./argIcon.vue";
 import argBtn from "./argBtn.vue";
@@ -154,12 +103,31 @@ export default defineComponent({
       type: String,
       default: "en",
       validator: (value) => {
-        return ["en", "fr", "es"].includes(value);
+        return ["en", "fr", "es", "jp"].includes(value);
       }
     }
   },
   emits: ["onClose", "onSave"],
   setup(props, { emit }) {
+    const langData = ref(null);
+    async function setLang() {
+      const jsonFiles = import.meta.glob("./locales/*.json");
+      for (const path in jsonFiles) {
+        if (path.split("/")[2].includes(props.lang)) {
+          const json = await jsonFiles[path]();
+          langData.value = json.scopeCreate;
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      setLang();
+    });
+    watch(
+      () => props.lang,
+      () => {
+        setLang();
+      }
+    );
     onMounted(() => {
       const body = document.querySelector("html");
       if (body) {
@@ -217,7 +185,8 @@ export default defineComponent({
       scopeDescr,
       nameFilled,
       saveFail,
-      getAllCriteria
+      getAllCriteria,
+      langData
     };
   }
 });

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

@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<{
     nameFilled: import("vue").Ref<boolean>;
     saveFail: import("vue").Ref<boolean>;
     getAllCriteria: import("vue").ComputedRef<never[]>;
+    langData: import("vue").Ref<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onClose" | "onSave")[], "onClose" | "onSave", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     scopeCriteria: {
         type: ArrayConstructor;

package/dist/runtime/components/argSearchInput.vue

@@ -6,6 +6,12 @@
       @click.stop="openSugg"
     >
       <div class="search-section">
+        <!-- <div v-if="loadingSuggs" class="search_loader">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div> -->
         <arg-icon
           name="MagnifyingGlass"
           color="var(--medium)"
@@ -39,7 +45,7 @@
       @click.stop
     >
       <div v-if="loadingSuggs">
-        <p class="loading oip_body">{{ loaderText[lang] }}</p>
+        <p class="loading oip_body">{{ loaderText }}</p>
       </div>
       <div v-if="filterSuggestions.length > 0" class="sugg_container">
         <p
@@ -61,7 +67,7 @@
         </p>
       </div>
       <div v-else-if="!loadingSuggs" class="sugg_container">
-        <p class="not-found oip_body">{{ notFound[lang] }}</p>
+        <p class="not-found oip_body">{{ notFound }}</p>
       </div>
     </div>
   </div>
@@ -75,7 +81,8 @@ import {
   computed,
   watch,
   defineComponent,
-  onUnmounted
+  onUnmounted,
+  onBeforeMount
 } from "vue";
 export default defineComponent({
   name: "argSearchInput",
@@ -118,16 +125,31 @@ export default defineComponent({
     const searchValue = ref("");
     const suggOpen = ref(false);
     const searchBar = ref();
-    const notFound = {
-      fr: "Aucune suggestion n'a \xE9t\xE9 trouv\xE9e",
-      en: "No suggestions were found",
-      es: "No se encontraron sugerencias"
-    };
-    const loaderText = {
-      fr: "Plus de suggestions en chargement",
-      en: "Loading more suggestions",
-      es: "cargando m\xE1s sugerencias"
-    };
+    const langData = ref(null);
+    async function setLang() {
+      const jsonFiles = import.meta.glob("./locales/*.json");
+      for (const path in jsonFiles) {
+        if (path.split("/")[2].includes(props.lang)) {
+          const json = await jsonFiles[path]();
+          langData.value = json.search;
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      setLang();
+    });
+    watch(
+      () => props.lang,
+      () => {
+        setLang();
+      }
+    );
+    const notFound = computed(() => {
+      return langData.value?.empty;
+    });
+    const loaderText = computed(() => {
+      return langData.value?.loading;
+    });
     const closeOnEnter = ref(false);
     const optionIndex = ref(1);
     function selectOption(isDown) {
@@ -271,5 +293,5 @@ export default defineComponent({
 });
 </script>
 <style scoped>
-.filters_input_search{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;display:flex;flex-direction:row;gap:12px;justify-content:space-between;min-height:40px;padding:0 12px;width:calc(100% - 24px)}.filters_input_search.no_bottom{border:1.5px solid var(--primary)!important;border-bottom:none!important;border-radius:8px 8px 0 0;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.search-section{align-items:center;display:flex;flex-direction:row;gap:12px;width:100%}.filters_input_search:not(.no_bottom):hover{border:1.5px solid rgba(33,118,255,.2)}.filters_input_search.no_bottom:hover{border-bottom:none!important}.filters_input_search:focus-within{border:1.5px solid var(--primary)!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search.no_bottom:focus-within{border-bottom:none!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search:focus-within .search-icon,.filters_input_search:hover .search-icon{color:var(--primary)!important}.filters_input_style{width:100%}.filters_input_style,.filters_input_style:focus-visible{border:none;outline:none}.filters_input_style::-moz-placeholder{color:var(--medium)}.filters_input_style::placeholder{color:var(--medium)}.close-icon{align-items:center;background:var(--light);border-radius:100%;cursor:pointer;display:flex;justify-content:center;padding:5px}.close-icon:hover svg{color:var(--primary)!important}.relative{position:relative;width:100%}.search_suggestions{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fff;border:1.5px solid var(--light);border-radius:0 0 8px 8px;left:0;max-height:200px;overflow-y:scroll;position:absolute;width:100%;z-index:99}.search_suggestions::-webkit-scrollbar{height:5px;width:5px}.search_suggestions::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.search_suggestions::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.sugg_open{border-top:1.5px solid var(--primary)!important;border:1.5px solid var(--primary)!important;border-top-color:var(--light)!important;box-shadow:2px 2px 3px rgba(33,118,255,.1),-2px 2px 3px rgba(33,118,255,.1)}.sugg_container{cursor:pointer;display:flex;flex-direction:column}.sugg_container p:not(.loading){align-items:center;display:flex;gap:8px;padding:8px 12px}.sugg_container p.selected,.sugg_container p:not(.not-found,.loading):hover{background:rgba(93,153,250,.2)}.sugg_container p.selected svg,.sugg_container p:not(.not-found,.loading):hover svg{color:var(--primary)!important}.sugg_container p:last-of-type{border-radius:0 0 8px 8px}.loading{color:var(--medium);font-style:italic;padding:8px 12px}.loading:after{animation:dots 1.3s step-end infinite;content:"";display:inline-block}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}
+.filters_input_search{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;display:flex;flex-direction:row;gap:12px;justify-content:space-between;min-height:40px;padding:0 12px;width:calc(100% - 24px)}.filters_input_search.no_bottom{border:1.5px solid var(--primary)!important;border-bottom:none!important;border-radius:8px 8px 0 0;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.search-section{align-items:center;display:flex;flex-direction:row;gap:12px;width:100%}.filters_input_search:not(.no_bottom):hover{border:1.5px solid rgba(33,118,255,.2)}.filters_input_search.no_bottom:hover{border-bottom:none!important}.filters_input_search:focus-within{border:1.5px solid var(--primary)!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search.no_bottom:focus-within{border-bottom:none!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search:focus-within .search-icon,.filters_input_search:hover .search-icon{color:var(--primary)!important}.filters_input_style{width:100%}.filters_input_style,.filters_input_style:focus-visible{border:none;outline:none}.filters_input_style::-moz-placeholder{color:var(--medium)}.filters_input_style::placeholder{color:var(--medium)}.close-icon{align-items:center;background:var(--light);border-radius:100%;cursor:pointer;display:flex;justify-content:center;padding:5px}.close-icon:hover svg{color:var(--primary)!important}.relative{position:relative;width:100%}.search_suggestions{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fff;border:1.5px solid var(--light);border-radius:0 0 8px 8px;left:0;max-height:200px;overflow-y:scroll;position:absolute;width:100%;z-index:99}.search_suggestions::-webkit-scrollbar{height:5px;width:5px}.search_suggestions::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.search_suggestions::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.sugg_open{border-top:1.5px solid var(--primary)!important;border:1.5px solid var(--primary)!important;border-top-color:var(--light)!important;box-shadow:2px 2px 3px rgba(33,118,255,.1),-2px 2px 3px rgba(33,118,255,.1)}.sugg_container{cursor:pointer;display:flex;flex-direction:column}.sugg_container p:not(.loading){align-items:center;display:flex;gap:8px;padding:8px 12px}.sugg_container p.selected,.sugg_container p:not(.not-found,.loading):hover{background:rgba(93,153,250,.2)}.sugg_container p.selected svg,.sugg_container p:not(.not-found,.loading):hover svg{color:var(--primary)!important}.sugg_container p:last-of-type{border-radius:0 0 8px 8px}.loading{color:var(--medium);font-style:italic;padding:8px 12px}.loading:after{animation:dots 1.3s step-end infinite;content:"";display:inline-block}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}.search_loader{display:inline-block;flex-shrink:0!important;height:20px;position:relative;width:20px}.search_loader div{animation:oip-spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;border:2px solid var(--primary);border-color:var(--primary) transparent transparent transparent;border-radius:50%;box-sizing:border-box;display:block;height:20px;position:absolute;width:20px}.search_loader div:first-child{animation-delay:-.45s}.search_loader div:nth-child(2){animation-delay:-.3s}.search_loader div:nth-child(3){animation-delay:-.15s}@keyframes oip-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
 </style>

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

@@ -60,16 +60,8 @@ declare const _default: import("vue").DefineComponent<{
     selectSugg: (sugg: Suggestion) => void;
     selectOption: (isDown: boolean) => void;
     optionIndex: import("vue").Ref<number>;
-    notFound: {
-        fr: string;
-        en: string;
-        es: string;
-    };
-    loaderText: {
-        fr: string;
-        en: string;
-        es: string;
-    };
+    notFound: import("vue").ComputedRef<any>;
+    loaderText: import("vue").ComputedRef<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:Value" | "submitSearch" | "selectSuggestion")[], "update:Value" | "submitSearch" | "selectSuggestion", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     placeHolderValue: {
         type: StringConstructor;

package/dist/runtime/components/argSidebar.vue

@@ -20,9 +20,7 @@
         class="arg_sidebar_home"
       >
         <arg-tooltip
-          :tooltip-text="
-            lang === 'en' ? 'Home' : lang === 'es' ? 'Inicio' : 'Accueil'
-          "
+          :tooltip-text="langData?.home"
           :disable="sidebarOpen"
           dir="right"
           :class="[
@@ -32,19 +30,11 @@
         >
           <arg-icon name="House" color="var(--primary)" />
         </arg-tooltip>
-        <span v-if="lang === 'en' && sidebarOpen"> Home </span>
-        <span v-else-if="lang === 'fr' && sidebarOpen"> Accueil </span>
-        <span v-else-if="lang === 'es' && sidebarOpen"> Inicio </span>
+        <span v-if="sidebarOpen"> {{ langData?.home }} </span>
       </nuxt-link>
       <div class="sidebar_toggle" @click="toggleSidebar()">
         <arg-tooltip
-          :tooltip-text="
-            lang === 'en'
-              ? 'Open sidebar'
-              : lang === 'es'
-              ? 'Abrir la barra lateral'
-              : 'Ouvrir le menu latéral'
-          "
+          :tooltip-text="langData?.open"
           :disable="sidebarOpen"
           dir="right"
           :class="[
@@ -80,7 +70,9 @@
 <script>
 import {
   onMounted,
+  onBeforeMount,
   ref,
+  watch,
   defineComponent
 } from "vue";
 import argIcon from "./argIcon.vue";
@@ -111,6 +103,25 @@ export default defineComponent({
       handleResize();
     });
     const sidebarOpen = ref(true);
+    const langData = ref(null);
+    async function setLang() {
+      const jsonFiles = import.meta.glob("./locales/*.json");
+      for (const path in jsonFiles) {
+        if (path.split("/")[2].includes(props.lang)) {
+          const json = await jsonFiles[path]();
+          langData.value = json.sidebar;
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      setLang();
+    });
+    watch(
+      () => props.lang,
+      () => {
+        setLang();
+      }
+    );
     function handleResize() {
       if (window.innerWidth >= 1e3) {
         sidebarOpen.value = true;
@@ -126,7 +137,8 @@ export default defineComponent({
     }
     return {
       sidebarOpen,
-      toggleSidebar
+      toggleSidebar,
+      langData
     };
   }
 });

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

@@ -19,6 +19,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     sidebarOpen: import("vue").Ref<boolean>;
     toggleSidebar: () => void;
+    langData: import("vue").Ref<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onSidebarChange" | "update:Sidebar")[], "onSidebarChange" | "update:Sidebar", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     name: {
         type: StringConstructor;