@tekkare/auriga 0.1.60 → 0.1.62

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.60"
+  "version": "0.1.62"
 }

package/dist/runtime/components/argFilterCard.vue

@@ -45,7 +45,7 @@
         }}</span>
       </div>
     </div>
-    <div class="filters_section">
+    <div id="arg_filters_section" class="filters_section">
       <slot name="Search" />
       <div class="filters_row oip_row v-center gap-16 full-width wrap">
         <slot name="Filters" />
@@ -60,7 +60,6 @@ import {
   ref,
   watch,
   defineComponent,
-  onUnmounted,
   onUpdated
 } from "vue";
 import argIcon from "./argIcon.vue";
@@ -69,7 +68,6 @@ export default defineComponent({
   components: { argIcon },
   props: {
     filters_amount: { type: Number, default: 0 },
-    isOpen: { type: Boolean, default: true },
     haveSaveScope: { type: Boolean, default: false },
     clearMsg: { type: String, default: null },
     saveScopeMsg: { type: String, default: null },
@@ -83,24 +81,42 @@ export default defineComponent({
   },
   emits: ["clearFilters", "saveScope"],
   setup(props, { emit }) {
-    const filtersOpen = ref(true);
-    function closeOnScroll() {
-      if (window.scrollY > 150) {
-        filtersOpen.value = false;
+    const filtersOpen = ref(null);
+    const scrollPosition = ref(0);
+    function openFromScroll() {
+      if (window.scrollY === 0) {
+        filtersOpen.value = true;
+        scrollPosition.value = scrollY;
+      } else {
+        const filters = document.getElementById("arg_filters_section");
+        if (filters) {
+          if (window.scrollY > scrollPosition.value + filters.offsetHeight) {
+            filtersOpen.value = false;
+            scrollPosition.value = window.scrollY;
+            document.removeEventListener("scroll", openFromScroll);
+          }
+        }
       }
     }
     onMounted(() => {
       adjustFilterPosition();
       listenToHeaderChange();
-      filtersOpen.value = props.isOpen;
-      window.addEventListener("scroll", closeOnScroll);
+      openFromScroll();
+      window.addEventListener("scroll", openFromScroll);
     });
     onUpdated(() => {
       adjustFilterPosition();
     });
-    onUnmounted(() => {
-      window.removeEventListener("scroll", closeOnScroll);
-    });
+    watch(
+      () => filtersOpen.value,
+      (new_filters_open) => {
+        if (new_filters_open) {
+          setTimeout(() => {
+            document.addEventListener("scroll", openFromScroll);
+          }, 500);
+        }
+      }
+    );
     function listenToHeaderChange() {
       const fixedHeader = document.getElementById("arg_header");
       const config = { attributes: true, childList: true };
@@ -122,12 +138,6 @@ export default defineComponent({
         }
       });
     }
-    watch(
-      () => props.isOpen,
-      (new_is_open) => {
-        filtersOpen.value = new_is_open;
-      }
-    );
     function clear() {
       emit("clearFilters");
     }
@@ -152,7 +162,7 @@ export default defineComponent({
   gap: 16px;
   border: 1px solid var(--dividers);
   backdrop-filter: blur(12px);
-  transition: all ease 0.7s;
+  transition: all ease 0.4s;
   z-index: 91;
   align-self: stretch;
   position: sticky;
@@ -180,7 +190,7 @@ export default defineComponent({
 }
 
 .filter-icon {
-  transition: transform 0.5s;
+  transition: transform 0.3s;
 }
 
 .icon-rotate {

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

@@ -3,10 +3,6 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     haveSaveScope: {
         type: BooleanConstructor;
         default: boolean;
@@ -25,7 +21,7 @@ declare const _default: import("vue").DefineComponent<{
         validator: (value: string) => boolean;
     };
 }, {
-    filtersOpen: import("vue").Ref<boolean>;
+    filtersOpen: any;
     clear: () => void;
     save: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clearFilters" | "saveScope")[], "clearFilters" | "saveScope", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -33,10 +29,6 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     haveSaveScope: {
         type: BooleanConstructor;
         default: boolean;
@@ -60,7 +52,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     lang: string;
     filters_amount: number;
-    isOpen: boolean;
     haveSaveScope: boolean;
     clearMsg: string;
     saveScopeMsg: string;

package/dist/runtime/components/argSidebar.vue

@@ -116,7 +116,7 @@ export default defineComponent({
 <style scoped>
 .arg_sidebar {
   display: flex;
-  width: 52px;
+  width: 54px;
   padding: 16px 8px;
   flex-direction: column;
   align-items: flex-start;

package/dist/runtime/components/argSubMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="sidebarOpen ? 'arg_sub_menu' : 'arg_sub_small'">
     <button class="arg_sub_menu_button" @click="openMenu = !openMenu">
-      <div class="oip_row v-center gap-4">
+      <div v-if="sidebarOpen" class="oip_row v-center gap-4">
         <arg-icon
           v-if="icon !== null"
           :name="icon"
@@ -11,7 +11,7 @@
           :class="[openMenu ? 'active_icon' : '']"
         />
         <arg-flag v-else-if="flagIso !== null" :iso="flagIso" emoji />
-        <span v-show="sidebarOpen">{{ label }}</span>
+        <span>{{ label }}</span>
       </div>
       <arg-tooltip
         :tooltip-text="label"

package/dist/runtime/components/argTooltip.vue

@@ -38,9 +38,8 @@ export default defineComponent({
 
 .prmt_tooltip_text {
   visibility: hidden;
-  width: fit-content;
-  max-width: 250px;
-  text-align: center;
+  width: max-content;
+  max-width: 120px;
   background-color: var(--independence);
   color: var(--pure-white);
   border-radius: 4px;
@@ -51,7 +50,12 @@ export default defineComponent({
   font-weight: 400;
   font-size: 14px;
   line-height: 160%;
-  white-space: nowrap;
+  white-space: wrap;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-align: left;
 }
 
 .prmt_tooltip .prmt_tooltip_text-top {

package/package.json

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