@weni/unnnic-system 3.33.1 → 3.34.0

package/package.json

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

package/src/components/Table/Table.vue

@@ -1,5 +1,8 @@
 <template>
-  <UiTable v-if="version === '2'">
+  <UiTable
+    v-if="version === '2'"
+    v-bind="$attrs"
+  >
     <slot />
   </UiTable>
 
@@ -48,6 +51,8 @@ export default {
     };
   },
 
+  inheritAttrs: false,
+
   props: {
     items: {
       type: Array,

package/src/components/ui/table/Table.vue

@@ -20,6 +20,7 @@ const props = defineProps<{
 
 .unnnic-table {
   border-collapse: collapse;
+  table-layout: fixed;
   width: 100%;
   caption-side: bottom;
 

package/src/components/ui/table/TableCell.vue

@@ -2,13 +2,29 @@
 import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class'];
-}>();
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes['class'];
+    ellipsis?: boolean;
+    width?: string;
+  }>(),
+  {
+    ellipsis: false,
+  },
+);
 </script>
 
 <template>
-  <td :class="cn('unnnic-table-cell', props.class)">
+  <td
+    :class="
+      cn(
+        'unnnic-table-cell',
+        { 'unnnic-table-cell--ellipsis': props.ellipsis },
+        props.class,
+      )
+    "
+    :style="{ width: props.width }"
+  >
     <slot />
   </td>
 </template>
@@ -24,5 +40,11 @@ const props = defineProps<{
   &:not(:last-child) {
     padding-right: $unnnic-space-4;
   }
+
+  &--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 </style>

package/src/components/ui/table/TableHead.vue

@@ -2,13 +2,29 @@
 import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
 
-const props = defineProps<{
-  class?: HTMLAttributes['class'];
-}>();
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes['class'];
+    ellipsis?: boolean;
+    width?: string;
+  }>(),
+  {
+    ellipsis: false,
+  },
+);
 </script>
 
 <template>
-  <th :class="cn('unnnic-table-head', props.class)">
+  <th
+    :class="
+      cn(
+        'unnnic-table-head',
+        { 'unnnic-table-head--ellipsis': props.ellipsis },
+        props.class,
+      )
+    "
+    :style="{ width: props.width }"
+  >
     <slot />
   </th>
 </template>
@@ -23,5 +39,11 @@ const props = defineProps<{
   align-items: center;
 
   pointer-events: none;
+
+  &--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 </style>

package/src/components/ui/table/TableRow.vue

@@ -3,6 +3,10 @@ import type { HTMLAttributes } from 'vue';
 import { computed, useAttrs } from 'vue';
 import { cn } from '@/lib/utils';
 
+defineEmits<{
+  (e: 'click', event: KeyboardEvent | MouseEvent): void;
+}>();
+
 const props = defineProps<{
   class?: HTMLAttributes['class'];
 }>();

package/src/stories/Table.stories.js

@@ -180,20 +180,20 @@ export const Version2 = {
       <unnnic-table version="2">
         <TableHeader>
           <unnnic-table-row>
-            <TableHead>
+            <TableHead width="50%">
               Invoice
             </TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Method</TableHead>
-            <TableHead>
+            <TableHead width="20%">Status</TableHead>
+            <TableHead width="15%">Method</TableHead>
+            <TableHead width="15%">
               Amount
             </TableHead>
           </unnnic-table-row>
         </TableHeader>
         <TableBody>
           <unnnic-table-row>
-            <TableCell>
-              INV001
+            <TableCell ellipsis>
+              INV001 — With ellipsis lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </TableCell>
             <TableCell><UnnnicTag scheme="green" text="Paid" /></TableCell>
             <TableCell>Credit Card</TableCell>
@@ -203,7 +203,7 @@ export const Version2 = {
           </unnnic-table-row>
           <unnnic-table-row @click="onRowClick">
             <TableCell>
-              INV002
+              INV002 — Without ellipsis lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </TableCell>
             <TableCell><UnnnicTag scheme="red" text="Pending" /></TableCell>
             <TableCell>Bank Transfer</TableCell>