@weni/unnnic-system 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/TableNext/TableNext.vue

@@ -1,7 +1,10 @@
 <template>
   <table class="unnnic-table-next">
     <thead class="unnnic-table-next__header">
-      <tr class="unnnic-table-next__header-row">
+      <tr
+        class="unnnic-table-next__header-row"
+        :style="{ gridTemplateColumns }"
+      >
         <th
           v-for="(cell, index) of headers"
           :key="cell.content + index"
@@ -28,10 +31,14 @@
           v-for="(row, index) of rows"
           :key="row.content + index"
           class="unnnic-table-next__body-row"
+          :style="{
+            gridTemplateColumns: row.link ? 'auto' : gridTemplateColumns,
+          }"
         >
           <a
             v-if="row.link"
             class="unnnic-table-next__body-row--redirect"
+            :style="{ gridTemplateColumns }"
             :href="row.link.url"
             :target="row.link.target || '_blank'"
           >
@@ -92,6 +99,7 @@ export default {
     /**
      * @typedef {Array} HeaderItem
      * @property {string} content - The content of the header cell.
+     * @property {number} size - The size of the header cell in fractions.
      * @property {boolean|undefined} isSortable - Indicates if the cell is enabled for sorting.
      */
 
@@ -157,6 +165,9 @@ export default {
     treatedPaginationTotal() {
       return this.rows.length === 0 ? 0 : this.paginationTotal;
     },
+    gridTemplateColumns() {
+      return this.headers.map((header) => `${header.size || 1}fr`).join(' ');
+    },
   },
 };
 </script>
@@ -173,6 +184,9 @@ $tableBorder: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
 
   width: 100%;
 
+  display: flex;
+  flex-direction: column;
+
   &__header {
     &-row {
       @extend %base-row;
@@ -268,7 +282,6 @@ $tableBorder: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
 
   %base-row {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     align-items: center;
   }
 }

package/src/components/TableNext/validation.js

@@ -1,11 +1,19 @@
-const validateHeader = (cell) => {
-  const isContentString = typeof cell.content !== 'string';
+const validateHeader = (header) => {
+  const isContentString = typeof header.content !== 'string';
   if (isContentString) {
     throw new Error('Each item in "headers" must have "content" as a string.');
   }
 
+  const isSizePositiveNumber =
+    'size' in header && (typeof header.size !== 'number' || header.size < 0);
+  if (isSizePositiveNumber) {
+    throw new Error(
+      'Each item in "headers" that contains "size" must assign it as positive number',
+    );
+  }
+
   const isSortableBoolean =
-    'isSortable' in cell && typeof cell.isSortable !== 'boolean';
+    'isSortable' in header && typeof header.isSortable !== 'boolean';
   if (isSortableBoolean) {
     throw new Error(
       'Each item in "headers" that contains “isSortable” must assign it as boolean',

package/src/stories/TableNext.stories.js

@@ -19,6 +19,7 @@ export default {
           headers: [
             {
               content: 'ID',
+              size: 0.3,
             },
             {
               content: 'Name',