@weni/unnnic-system 3.34.1 → 3.35.0

package/package.json

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

package/src/components/DatePicker/DatePicker.vue

@@ -879,7 +879,10 @@ function getStartAndEndDateByPeriod(period: string) {
   const daysMatch = period.match(/^last-(\d+)-days$/);
   const monthsMatch = period.match(/^last-(\d+)-months$/);
 
-  if (daysMatch) {
+  if (period === 'today') {
+    periodStartDate = dateToString(todayClone);
+    periodEndDate = dateToString(todayClone);
+  } else if (daysMatch) {
     const howMuch = Number(daysMatch[1]);
 
     periodEndDate = dateToString(todayClone);

package/src/components/DatePicker/__tests__/DatePicker.spec.js

@@ -95,6 +95,28 @@ describe('DatePicker.vue', () => {
     expect(updateEquivalent[0][0]).toBe('Last 7 days');
   });
 
+  it('submits with today period and emits equivalent option name', async () => {
+    wrapper = factory({
+      options: [
+        { name: 'Today', id: 'today' },
+        { name: 'Custom', id: 'custom' },
+      ],
+    });
+
+    await wrapper.vm.autoSelect('today');
+    await wrapper.find('[data-testid="date-picker-submit"]').trigger('click');
+
+    const submit = wrapper.emitted('submit');
+    const updateEquivalent = wrapper.emitted('update:equivalentOption');
+
+    expect(submit).toBeTruthy();
+    expect(submit[0][0]).toHaveProperty('startDate');
+    expect(submit[0][0]).toHaveProperty('endDate');
+    expect(submit[0][0].startDate).toBe(submit[0][0].endDate);
+
+    expect(updateEquivalent[0][0]).toBe('Today');
+  });
+
   it('submits with custom selection and clears equivalent option', async () => {
     wrapper.vm.optionSelected = 'custom';
     await wrapper.find('[data-testid="date-picker-submit"]').trigger('click');

package/src/components/DatePicker/translations.ts

@@ -28,6 +28,7 @@ const englishMonths = [
 const englishDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 
 const englishPeriods: PeriodOption[] = [
+  { name: 'Today', id: 'today' },
   { name: 'Last 7 days', id: 'last-7-days' },
   { name: 'Last 14 days', id: 'last-14-days' },
   { name: 'Last 30 days', id: 'last-30-days' },
@@ -96,6 +97,10 @@ buttons.en = buttons['en-us'];
 
 export const periods: Record<string, PeriodOption[]> = {
   'pt-br': [
+    {
+      name: 'Hoje',
+      id: 'today',
+    },
     {
       name: 'Últimos 7 dias',
       id: 'last-7-days',
@@ -128,6 +133,10 @@ export const periods: Record<string, PeriodOption[]> = {
   en: englishPeriods,
   'en-us': englishPeriods,
   es: [
+    {
+      name: 'Hoy',
+      id: 'today',
+    },
     {
       name: 'Últimos 7 días',
       id: 'last-7-days',

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 {