@weni/unnnic-system 2.0.24 → 2.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.0.24",
+  "version": "2.0.25",
   "type": "commonjs",
   "files": [
     "dist",
@@ -74,4 +74,4 @@
     "vite": "4.3.5",
     "vue-eslint-parser": "^9.4.2"
   }
-}
+}

package/src/components/Modal/Modal.vue

@@ -28,7 +28,7 @@
               />
             </div>
             <div
-              v-if="$slots.icon"
+              v-if="hasIcon"
               class="unnnic-modal-container-background-body__icon-slot"
             >
               <slot name="icon"></slot>
@@ -126,7 +126,10 @@ export default {
       return !(this.alertMessage === null || this.alertMessage.length === 0);
     },
     hasButton() {
-      return !!this.$slots.options;
+      return !!this.$slots.options?.().length;
+    },
+    hasIcon() {
+      return !!this.$slots.icon?.().length;
     },
   },
   mounted() {

package/src/components/Slider/Slider.vue

@@ -161,11 +161,8 @@ export default {
     window.removeEventListener('resize', this.handleResize);
   },
   mounted() {
-    const fallbackLabelWidth = 32 + this.sliderVal.toString().length * 4.5;
-    this.sliderWidth = this.$refs.input.clientWidth;
-    this.labelWidth =
-      this.$refs.tooltip.$refs.label.clientWidth || fallbackLabelWidth;
-    this.tooltipOffset = this.getNewTooltipPosition();
+    this.checkInputWidth();
+    this.checkTooltipLabelWidth();
   },
   methods: {
     configureTooltip() {
@@ -185,9 +182,40 @@ export default {
 
       this.handleValueChange();
     },
+    checkInputWidth() {
+      const intervalId = setInterval(() => {
+        const inputElement = this.$refs.input;
+        if (inputElement) {
+          const { offsetWidth } = inputElement;
+          if (offsetWidth > 0) {
+            this.sliderWidth = offsetWidth;
+            this.configureTooltip();
+            clearInterval(intervalId);
+          }
+        }
+      }, 100);
+    },
+    checkTooltipLabelWidth() {
+      const intervalId = setInterval(() => {
+        const tooltipLabel = this.$refs.tooltip?.$refs.label;
+        if (!tooltipLabel) {
+          return;
+        }
+
+        const { clientWidth } = tooltipLabel;
+        if (clientWidth > 0) {
+          this.labelWidth = clientWidth;
+          this.configureTooltip();
+          clearInterval(intervalId);
+        }
+      }, 100);
+    },
     getNewTooltipPosition() {
-      const haldThumbWidth = 12 / 2;
-      const halfLabelWidth = (this.labelWidth === 0 ? 32 : this.labelWidth) / 2;
+      if (this.sliderWidth === 0 || this.labelWidth === 0) {
+        return 0;
+      }
+      const halfThumbWidth = 12 / 2;
+      const halfLabelWidth = this.labelWidth / 2 || 16;
       const centerPosition = this.sliderWidth / 2;
 
       let percentOfRange =
@@ -199,7 +227,7 @@ export default {
       const valuePXPosition = percentOfRange * this.sliderWidth;
       const distFromCenter = valuePXPosition - centerPosition;
       const percentDistFromCenter = distFromCenter / centerPosition;
-      const offset = percentDistFromCenter * haldThumbWidth;
+      const offset = percentDistFromCenter * halfThumbWidth;
 
       const finalLabelPosition = valuePXPosition - halfLabelWidth - offset;
       return finalLabelPosition;