@tekkare/auriga 0.1.181 → 0.1.183

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.181"
+  "version": "0.1.183"
 }

package/dist/runtime/components/argSearchInput.vue

@@ -36,6 +36,9 @@
       :class="suggOpen ? 'sugg_open' : ''"
       @click.stop
     >
+      <div v-if="loadingSuggs">
+        <p class="loading oip_body">{{ loaderText[lang] }}</p>
+      </div>
       <div v-if="filterSuggestions.length > 0" class="sugg_container">
         <p
           v-for="(sugg, index) in filterSuggestions"
@@ -54,7 +57,7 @@
           {{ sugg.text }}
         </p>
       </div>
-      <div v-else class="sugg_container">
+      <div v-else-if="!loadingSuggs" class="sugg_container">
         <p class="not-found oip_body">{{ notFound[lang] }}</p>
       </div>
     </div>
@@ -96,6 +99,10 @@ export default defineComponent({
       validator: (value) => {
         return ["en", "fr", "es"].includes(value);
       }
+    },
+    loadingSuggs: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:Value", "submitSearch"],
@@ -107,14 +114,32 @@ export default defineComponent({
       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 closeOnEnter = ref(false);
     const optionIndex = ref(0);
     function selectOption(isDown) {
       if (isDown) {
-        optionIndex.value = optionIndex.value === filterSuggestions.value.length ? 0 : optionIndex.value + 1;
+        optionIndex.value = optionIndex.value === filterSuggestions.value.length ? filterSuggestions.value.length : optionIndex.value + 1;
       } else {
         optionIndex.value = optionIndex.value === 0 ? filterSuggestions.value.length : optionIndex.value - 1;
       }
+      const suggContainer = document.querySelector(".search_suggestions");
+      const selectedOption = suggContainer?.querySelectorAll("p")[optionIndex.value - 1];
+      if (selectedOption) {
+        const containerHeight = suggContainer?.clientHeight;
+        const containerScrollTop = suggContainer?.scrollTop;
+        const optionTop = selectedOption?.offsetTop;
+        const optionHeight = selectedOption?.offsetHeight * 2;
+        if (optionTop < containerScrollTop) {
+          suggContainer.scrollTop = optionTop;
+        } else if (optionTop + optionHeight > containerHeight + containerScrollTop) {
+          suggContainer.scrollTop = optionTop + optionHeight - containerHeight;
+        }
+      }
     }
     watch(
       () => searchValue.value,
@@ -208,11 +233,12 @@ export default defineComponent({
       selectSugg,
       selectOption,
       optionIndex,
-      notFound
+      notFound,
+      loaderText
     };
   }
 });
 </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}.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{align-items:center;display:flex;gap:8px;padding:8px 12px}.sugg_container p.selected,.sugg_container p:not(.not-found):hover{background:rgba(93,153,250,.2)}.sugg_container p.selected svg,.sugg_container p:not(.not-found):hover svg{color:var(--primary)!important}.sugg_container p:last-of-type{border-radius:0 0 8px 8px}
+.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}.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:""}}
 </style>

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

@@ -37,6 +37,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    loadingSuggs: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     searchValue: import("vue").Ref<string>;
     changeInput: (event: any) => void;
@@ -53,6 +57,11 @@ declare const _default: import("vue").DefineComponent<{
         en: string;
         es: string;
     };
+    loaderText: {
+        fr: string;
+        en: string;
+        es: string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:Value" | "submitSearch")[], "update:Value" | "submitSearch", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     placeHolderValue: {
         type: StringConstructor;
@@ -88,6 +97,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    loadingSuggs: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:Value"?: ((...args: any[]) => any) | undefined;
     onSubmitSearch?: ((...args: any[]) => any) | undefined;
@@ -97,5 +110,6 @@ declare const _default: import("vue").DefineComponent<{
     fuzzyThreshold: number;
     defaultValue: string;
     suggestions: Suggestion[];
+    loadingSuggs: boolean;
 }, {}>;
 export default _default;

package/package.json

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