@weni/unnnic-system 3.34.2 → 3.35.0

package/package.json

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

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

@@ -1,17 +1,38 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes, VNode } from 'vue';
+import { Comment, Fragment, Text, computed, useSlots } from 'vue';
 import { cn } from '@/lib/utils';
 
 const props = withDefaults(
   defineProps<{
+    align?: 'center' | 'left' | 'right';
     class?: HTMLAttributes['class'];
     ellipsis?: boolean;
     width?: string;
   }>(),
   {
-    ellipsis: false,
+    align: 'left',
+    ellipsis: true,
   },
 );
+
+const slots = useSlots();
+
+const isTextOnlySlot = (vnodes: VNode[] | undefined): boolean => {
+  if (!vnodes?.length) return true;
+
+  return vnodes.every((vnode) => {
+    if (vnode.type === Comment) return true;
+    if (vnode.type === Text) return true;
+    if (vnode.type === Fragment) {
+      return isTextOnlySlot(vnode.children as VNode[]);
+    }
+
+    return false;
+  });
+};
+
+const hasComponentContent = computed(() => !isTextOnlySlot(slots.default?.()));
 </script>
 
 <template>
@@ -19,32 +40,77 @@ const props = withDefaults(
     :class="
       cn(
         'unnnic-table-cell',
-        { 'unnnic-table-cell--ellipsis': props.ellipsis },
+        `unnnic-table-cell--align-${props.align}`,
+        {
+          'unnnic-table-cell--ellipsis': props.ellipsis,
+          'unnnic-table-cell--has-component': hasComponentContent,
+        },
         props.class,
       )
     "
     :style="{ width: props.width }"
   >
-    <slot />
+    <div class="unnnic-table-cell__inner">
+      <slot />
+    </div>
   </td>
 </template>
 
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
+$row-min-height: 61px;
+
 .unnnic-table-cell {
+  @include unnnic-font-body;
+  color: $unnnic-color-fg-emphasized;
   vertical-align: middle;
+  padding: 0;
+
+  &__inner {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+    min-height: $row-min-height;
+    padding: $unnnic-space-3 $unnnic-space-4;
+  }
+
+  &--has-component &__inner {
+    padding-block: $unnnic-space-2;
+  }
+
+  &--align-left {
+    text-align: left;
+
+    .unnnic-table-cell__inner {
+      justify-content: flex-start;
+    }
+  }
+
+  &--align-center {
+    text-align: center;
+
+    .unnnic-table-cell__inner {
+      justify-content: center;
+    }
+  }
 
-  padding: $unnnic-space-4 0;
+  &--align-right {
+    text-align: right;
 
-  &:not(:last-child) {
-    padding-right: $unnnic-space-4;
+    .unnnic-table-cell__inner {
+      justify-content: flex-end;
+    }
   }
 
-  &--ellipsis {
+  &--ellipsis:not(&--has-component) &__inner {
+    display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    align-content: center;
   }
 }
 </style>

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

@@ -4,11 +4,13 @@ import { cn } from '@/lib/utils';
 
 const props = withDefaults(
   defineProps<{
+    align?: 'center' | 'left' | 'right';
     class?: HTMLAttributes['class'];
     ellipsis?: boolean;
     width?: string;
   }>(),
   {
+    align: 'left',
     ellipsis: false,
   },
 );
@@ -19,6 +21,7 @@ const props = withDefaults(
     :class="
       cn(
         'unnnic-table-head',
+        `unnnic-table-head--align-${props.align}`,
         { 'unnnic-table-head--ellipsis': props.ellipsis },
         props.class,
       )
@@ -35,10 +38,19 @@ const props = withDefaults(
 .unnnic-table-head {
   @include unnnic-font-caption-1;
   color: $unnnic-color-fg-base;
-  text-align: left;
-  align-items: center;
+  vertical-align: middle;
 
-  pointer-events: none;
+  &--align-left {
+    text-align: left;
+  }
+
+  &--align-center {
+    text-align: center;
+  }
+
+  &--align-right {
+    text-align: right;
+  }
 
   &--ellipsis {
     overflow: hidden;

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

@@ -18,7 +18,11 @@ const props = defineProps<{
 
 .unnnic-table-header {
   * {
-    padding-bottom: $unnnic-space-2;
+    padding: $unnnic-space-3 $unnnic-space-4;
+  }
+
+  &:hover {
+    background-color: $unnnic-color-bg-soft;
   }
 }
 </style>

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { computed, useAttrs } from 'vue';
+import { computed, getCurrentInstance } from 'vue';
 import { cn } from '@/lib/utils';
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'click', event: KeyboardEvent | MouseEvent): void;
 }>();
 
@@ -11,9 +11,13 @@ const props = defineProps<{
   class?: HTMLAttributes['class'];
 }>();
 
-const attrs = useAttrs();
+const instance = getCurrentInstance();
+const isClickable = computed(() => Boolean(instance?.vnode.props?.onClick));
 
-const isClickable = computed(() => Boolean(attrs.onClick));
+function handleClick(event: KeyboardEvent | MouseEvent) {
+  if (!isClickable.value) return;
+  emit('click', event);
+}
 </script>
 
 <template>
@@ -27,8 +31,9 @@ const isClickable = computed(() => Boolean(attrs.onClick));
         props.class,
       )
     "
-    @keydown.enter="isClickable && $emit('click', $event)"
-    @keydown.space.prevent="isClickable && $emit('click', $event)"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+    @keydown.space.prevent="handleClick"
   >
     <slot />
   </tr>
@@ -38,14 +43,6 @@ const isClickable = computed(() => Boolean(attrs.onClick));
 @use '@/assets/scss/unnnic' as *;
 
 .unnnic-table-row {
-  & > :first-child {
-    padding-left: $unnnic-space-3;
-  }
-
-  & > :last-child {
-    padding-right: $unnnic-space-3;
-  }
-
   border-bottom: 1px solid $unnnic-color-border-base;
 
   &:hover {