@tekkare/auriga 0.2.183 → 0.2.184

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.183"
+  "version": "0.2.184"
 }

package/dist/runtime/components/argSliderTabs.vue

@@ -38,12 +38,13 @@
           </label>
         </div>
         <div
+          v-show="sliderVisible"
           class="toggle_option_slider"
           :style="{
             background: 'white',
             left: silderInfos.left,
             width: silderInfos.width,
-            height: silderInfos.height,
+            height: silderInfos.height
           }"
         />
       </div>
@@ -52,7 +53,14 @@
 </template>
 
 <script>
-import { defineComponent, ref, computed } from "vue";
+import {
+  defineComponent,
+  ref,
+  computed,
+  onMounted,
+  nextTick,
+  watch
+} from "vue";
 import ArgIcon from "./argIcon.vue";
 export default defineComponent({
   name: "ArgSliderTabs",
@@ -80,6 +88,7 @@ export default defineComponent({
   setup(props) {
     const el = ref();
     const buttonContents = ref(null);
+    const sliderVisible = ref(false);
     const silderInfos = computed(() => {
       return getSliderInfos(props.activeTab);
     });
@@ -87,22 +96,63 @@ export default defineComponent({
       props.switchTab(value);
     };
     const getSliderInfos = (index) => {
-      if (el.value && buttonContents.value) {
+      if (el.value && buttonContents.value && buttonContents.value.length > 0) {
         let left = 0;
         for (let i = 0; i < index; i++) {
-          left += buttonContents.value[i].clientWidth + 18;
+          if (buttonContents.value[i]) {
+            left += buttonContents.value[i].clientWidth + 18;
+          }
         }
-        const width = `${buttonContents.value[index].clientWidth + 16}px`;
+        const activeButton = buttonContents.value[index];
+        if (!activeButton) {
+          return { width: "0", left: "0", height: "0" };
+        }
+        const width = `${activeButton.clientWidth + 16}px`;
+        const height = `${el.value.clientHeight - 6}px`;
         return {
           width,
           left: `${left}px`,
-          height: `${el.value.clientHeight - 6}px`
+          height
         };
       } else {
         return { width: "0", left: "0", height: "0" };
       }
     };
-    return { updateButton, el, buttonContents, silderInfos };
+    const recalculateSlider = async () => {
+      await nextTick();
+      setTimeout(() => {
+        if (el.value && buttonContents.value && buttonContents.value.length > 0) {
+          const newInfos = getSliderInfos(props.activeTab);
+          if (newInfos.width !== "0") {
+            sliderVisible.value = true;
+          }
+        }
+      }, 100);
+    };
+    watch(
+      () => props.activeTab,
+      () => {
+        recalculateSlider();
+      }
+    );
+    watch(
+      () => props.tabs,
+      () => {
+        sliderVisible.value = false;
+        recalculateSlider();
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      recalculateSlider();
+    });
+    return {
+      updateButton,
+      el,
+      buttonContents,
+      silderInfos,
+      sliderVisible
+    };
   }
 });
 </script>

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

@@ -33,6 +33,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         left: string;
         height: string;
     }>;
+    sliderVisible: import("vue").Ref<boolean, boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tabs: {
         type: () => Tabs;

package/package.json

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