@weni/unnnic-system 1.24.21 → 1.24.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.24.21",
+  "version": "1.24.22",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/components/Slider/Slider.vue

@@ -123,10 +123,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();
   },
   watch: {
     sliderVal: {
@@ -146,8 +144,13 @@ export default {
   },
   methods: {
     configureTooltip() {
-      this.sliderWidth = this.$refs.input.clientWidth;
-      this.labelWidth = this.$refs.tooltip.$refs.label.clientWidth;
+      if (this.$refs.input) {
+        this.sliderWidth = this.$refs.input.clientWidth;
+      }
+      const tooltipLabel = this.$refs.tooltip?.$refs.label;
+      if (tooltipLabel) {
+        this.labelWidth = tooltipLabel.clientWidth || 32;
+      }
       this.tooltipOffset = this.getNewTooltipPosition();
     },
     handleResize() {
@@ -162,9 +165,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 = (this.sliderVal - this.minValue) / (this.maxValue - this.minValue);
@@ -175,7 +209,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;