@weni/unnnic-system 2.0.23 → 2.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.0.23",
+  "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;

package/src/components/TableNext/TableNext.vue

@@ -36,7 +36,7 @@
             :target="row.link.target || '_blank'"
           >
             <TableBodyCell
-              v-for="(cell, index) of row.content"
+              v-for="cell of row.content"
               :key="cell + index"
               class="unnnic-table-next__body-cell"
               :cell="cell"
@@ -44,7 +44,7 @@
           </a>
           <template v-else>
             <TableBodyCell
-              v-for="(cell, index) of row.content"
+              v-for="cell of row.content"
               :key="cell + index"
               class="unnnic-table-next__body-cell"
               :cell="cell"
@@ -66,7 +66,7 @@
     <TablePagination
       :modelValue="pagination"
       :total="treatedPaginationTotal"
-      :interval="rows.length"
+      :interval="paginationInterval"
       @update:model-value="$emit('update:pagination', $event)"
     />
   </table>
@@ -129,12 +129,18 @@ export default {
       type: Number,
       default: 1,
     },
+    paginationInterval: {
+      type: Number,
+      default: 1,
+    },
     isLoading: {
       type: Boolean,
       default: false,
     },
   },
 
+  emits: ['update:pagination'],
+
   data() {
     return {
       defaultTranslations: {

package/src/stories/TableNext.stories.js

@@ -44,6 +44,7 @@ export default {
       :rows="args.rows || table.rows"
       v-model:pagination="pagination"
       :paginationTotal="125"
+      :paginationInterval="5"
     />
     `,
   }),