@weni/unnnic-system 3.29.0 → 3.31.0

package/package.json

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

package/src/components/InputDatePicker/InputDatePicker.vue

@@ -42,13 +42,17 @@
           @change="emitSelectDate"
           @submit="changeDate"
         />
+
+        <UnnnicPopoverFooter v-if="hasFooterSlot">
+          <slot name="footer" />
+        </UnnnicPopoverFooter>
       </UnnnicPopoverContent>
     </UnnnicPopover>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, useSlots } from 'vue';
 import moment from 'moment';
 
 import UnnnicInput from '../Input/Input.vue';
@@ -56,6 +60,7 @@ import UnnnicDatePicker from '../DatePicker/DatePicker.vue';
 import {
   Popover as UnnnicPopover,
   PopoverContent as UnnnicPopoverContent,
+  PopoverFooter as UnnnicPopoverFooter,
   PopoverTrigger as UnnnicPopoverTrigger,
 } from '../ui/popover';
 
@@ -63,6 +68,9 @@ defineOptions({
   name: 'UnnnicInputDatePicker',
 });
 
+const slots = useSlots();
+const hasFooterSlot = computed(() => Boolean(slots.footer));
+
 type DateRangeValue = {
   start: string | null;
   end: string | null;

package/src/components/InputDatePicker/__test__/InputDatePicker.spec.js

@@ -3,7 +3,13 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import InputDatePicker from '../InputDatePicker.vue';
 
-const factory = (props = {}) =>
+const inlineSlot = { template: '<div><slot /></div>' };
+const portalStubs = {
+  PopoverPortal: inlineSlot,
+  PopoverContent: inlineSlot,
+};
+
+const factory = (props = {}, { slots = {}, stubs = {} } = {}) =>
   mount(InputDatePicker, {
     props: {
       modelValue: {
@@ -12,7 +18,11 @@ const factory = (props = {}) =>
       },
       ...props,
     },
+    slots,
     attachTo: document.body,
+    global: {
+      stubs,
+    },
   });
 
 describe('InputDatePicker.vue', () => {
@@ -163,4 +173,36 @@ describe('InputDatePicker.vue', () => {
 
     rightWrapper.unmount();
   });
+
+  it('does not render PopoverFooter when the footer slot is empty', async () => {
+    wrapper.vm.isPopoverOpen = true;
+    await wrapper.vm.$nextTick();
+
+    expect(
+      wrapper.findComponent({ name: 'UnnnicPopoverFooter' }).exists(),
+    ).toBe(false);
+  });
+
+  it('renders the footer slot content inside PopoverFooter', async () => {
+    const withFooter = factory(
+      {},
+      {
+        slots: {
+          footer: '<p data-testid="custom-footer">Archive notice</p>',
+        },
+        stubs: portalStubs,
+      },
+    );
+
+    withFooter.vm.isPopoverOpen = true;
+    await withFooter.vm.$nextTick();
+
+    const footer = withFooter.findComponent({ name: 'UnnnicPopoverFooter' });
+    const customFooter = withFooter.find('[data-testid="custom-footer"]');
+
+    expect(footer.exists()).toBe(true);
+    expect(customFooter.text()).toBe('Archive notice');
+
+    withFooter.unmount();
+  });
 });

package/src/components/Table/Table.vue

@@ -1,6 +1,10 @@
 <template>
+  <UiTable v-if="version === '2'">
+    <slot />
+  </UiTable>
+
   <div
-    v-show="true"
+    v-else
     class="unnnic-table"
   >
     <div class="header">
@@ -28,15 +32,30 @@
 </template>
 
 <script>
+import { computed } from 'vue';
+import { Table as UiTable } from '@/components/ui/table';
+
 export default {
   name: 'UnnnicTable',
 
-  components: {},
+  components: {
+    UiTable,
+  },
+
+  provide() {
+    return {
+      unnnicTableVersion: computed(() => this.version),
+    };
+  },
 
   props: {
     items: {
       type: Array,
     },
+    version: {
+      type: String,
+      default: '1',
+    },
   },
 
   data() {

package/src/components/Table/TableRow.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="table-row">
+  <UiTableRow
+    v-if="isVersion2"
+    v-bind="$attrs"
+  >
+    <slot />
+  </UiTableRow>
+
+  <div
+    v-else
+    class="table-row"
+    v-bind="$attrs"
+  >
     <template
       v-for="(header, index) in headers"
       :key="header.id"
@@ -26,17 +37,31 @@
 </template>
 
 <script>
+import { computed, inject, unref } from 'vue';
+import UiTableRow from '@/components/ui/table/TableRow.vue';
+
 export default {
   name: 'UnnnicTableRow',
 
+  components: {
+    UiTableRow,
+  },
+
+  inheritAttrs: false,
+
   props: {
     headers: {
       type: Array,
     },
   },
 
-  data() {
-    return {};
+  setup() {
+    const tableVersion = inject('unnnicTableVersion', '1');
+    const isVersion2 = computed(() => unref(tableVersion) === '2');
+
+    return {
+      isVersion2,
+    };
   },
 };
 </script>

package/src/components/index.ts

@@ -10,6 +10,7 @@ import sidebar from './Sidebar/index.vue';
 import sidebarItem from './Sidebar/SidebarItem.vue';
 import table from './Table/Table.vue';
 import tableRow from './Table/TableRow.vue';
+import { TableBody, TableCell, TableHead, TableHeader } from './ui/table';
 import dropdown from './Dropdown/Dropdown.vue';
 import dropdownItem from './Dropdown/DropdownItem.vue';
 import avatarIcon from './AvatarIcon/AvatarIcon.vue';
@@ -138,6 +139,10 @@ export const components: ComponentsMap = {
   unnnicSidebarItem: sidebarItem,
   unnnicTable: table,
   unnnicTableRow: tableRow,
+  unnnicTableBody: TableBody,
+  unnnicTableCell: TableCell,
+  unnnicTableHead: TableHead,
+  unnnicTableHeader: TableHeader,
   unnnicAvatarIcon: avatarIcon,
   unnnicIcon: icon,
   unnnicIconSvg: icon,
@@ -261,6 +266,10 @@ export const unnnicSidebar = sidebar;
 export const unnnicSidebarItem = sidebarItem;
 export const unnnicTable = table;
 export const unnnicTableRow = tableRow;
+export const unnnicTableBody = TableBody;
+export const unnnicTableCell = TableCell;
+export const unnnicTableHead = TableHead;
+export const unnnicTableHeader = TableHeader;
 export const unnnicDropdown = dropdown as VueComponent;
 export const unnnicDropdownItem = dropdownItem;
 export const unnnicAvatarIcon = avatarIcon;
@@ -383,6 +392,10 @@ export const UnnnicSidebar = sidebar;
 export const UnnnicSidebarItem = sidebarItem;
 export const UnnnicTable = table;
 export const UnnnicTableRow = tableRow;
+export const UnnnicTableBody = TableBody;
+export const UnnnicTableCell = TableCell;
+export const UnnnicTableHead = TableHead;
+export const UnnnicTableHeader = TableHeader;
 export const UnnnicDropdown = dropdown as VueComponent;
 export const UnnnicDropdownItem = dropdownItem;
 export const UnnnicAvatarIcon = avatarIcon;

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('unnnic-table', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-table {
+  border-collapse: collapse;
+  width: 100%;
+  caption-side: bottom;
+
+  @include unnnic-font-body;
+  color: $unnnic-color-fg-base;
+}
+</style>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <tbody :class="cn(props.class)">
+    <slot />
+  </tbody>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <td :class="cn('unnnic-table-cell', props.class)">
+    <slot />
+  </td>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-table-cell {
+  vertical-align: middle;
+
+  padding: $unnnic-space-4 0;
+
+  &:not(:last-child) {
+    padding-right: $unnnic-space-4;
+  }
+}
+</style>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <th :class="cn('unnnic-table-head', props.class)">
+    <slot />
+  </th>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-table-head {
+  @include unnnic-font-caption-1;
+  color: $unnnic-color-fg-base;
+  text-align: left;
+  align-items: center;
+
+  pointer-events: none;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <thead :class="cn('unnnic-table-header', props.class)">
+    <slot />
+  </thead>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-table-header {
+  * {
+    padding-bottom: $unnnic-space-2;
+  }
+}
+</style>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed, useAttrs } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+
+const attrs = useAttrs();
+
+const isClickable = computed(() => Boolean(attrs.onClick));
+</script>
+
+<template>
+  <tr
+    :tabindex="isClickable ? 0 : undefined"
+    :class="
+      cn(
+        'unnnic-table-row',
+        'transition-colors data-[state=selected]:bg-muted',
+        isClickable && 'cursor-pointer',
+        props.class,
+      )
+    "
+    @keydown.enter="isClickable && $emit('click', $event)"
+    @keydown.space.prevent="isClickable && $emit('click', $event)"
+  >
+    <slot />
+  </tr>
+</template>
+
+<style lang="scss" scoped>
+@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 {
+    background-color: $unnnic-color-bg-soft;
+  }
+}
+</style>

package/src/components/ui/table/index.ts

@@ -0,0 +1,6 @@
+export { default as Table } from './Table.vue';
+export { default as TableBody } from './TableBody.vue';
+export { default as TableCell } from './TableCell.vue';
+export { default as TableHead } from './TableHead.vue';
+export { default as TableHeader } from './TableHeader.vue';
+export { default as TableRow } from './TableRow.vue';

package/src/stories/InputDatePicker.stories.js

@@ -1,4 +1,5 @@
 import UnnnicInputDatePicker from '../components/InputDatePicker/InputDatePicker.vue';
+import UnnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
 import moment from 'moment';
 export default {
   title: 'Form/InputDatePicker',
@@ -103,3 +104,52 @@ export const WithDisableShowOverwrittenValue = {
     disableShowOverwrittenValue: true,
   },
 };
+
+export const WithFooter = {
+  args: {
+    size: 'sm',
+    next: true,
+    iconPosition: 'right',
+    fillW: true,
+    maxDate: moment().format('YYYY-MM-DD'),
+    minDate: moment().subtract(89, 'days').format('YYYY-MM-DD'),
+    options: [
+      { name: 'Last 7 days', id: 'last-7-days' },
+      { name: 'Last 14 days', id: 'last-14-days' },
+      { name: 'Last 30 days', id: 'last-30-days' },
+      { name: 'Last 90 days', id: 'last-90-days' },
+      { name: 'Current month', id: 'current-month' },
+      { name: 'Custom', id: 'custom' },
+    ],
+  },
+  render: (args) => ({
+    components: {
+      UnnnicInputDatePicker,
+      UnnnicDisclaimer,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        dates: {
+          start: null,
+          end: null,
+        },
+      };
+    },
+    template: `
+      <div style="max-width: 200px">
+        <pre>v-model: {{ dates }}</pre>
+        <UnnnicInputDatePicker v-bind="args" v-model="dates">
+          <template #footer>
+            <UnnnicDisclaimer
+              type="neutral"
+              description="Conversations older than 90 days are archived and can't be shown. To access them, contact support."
+            />
+          </template>
+        </UnnnicInputDatePicker>
+      </div>
+    `,
+  }),
+};

package/src/stories/Table.stories.js

@@ -2,11 +2,24 @@ import unnnicTable from '../components/Table/Table.vue';
 import unnnicTableRow from '../components/Table/TableRow.vue';
 import unnnicButton from '../components/Button/Button.vue';
 import unnnicCheckbox from '../components/Checkbox/Checkbox.vue';
+import {
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableCell,
+} from '@/components/ui/table';
+import UnnnicTag from '@/components/Tag/Tag.vue';
+import { action } from 'storybook/actions';
 
 export default {
   title: 'example/Table',
   component: unnnicTable,
-  argTypes: {},
+  argTypes: {
+    version: {
+      control: { type: 'select' },
+      options: ['1', '2'],
+    },
+  },
 };
 
 const Template = (args, { argTypes }) => ({
@@ -21,6 +34,7 @@ const Template = (args, { argTypes }) => ({
     <div>
       <unnnic-table
         v-bind="$props"
+        version="1"
         :items="table.items"
         :style="{ maxHeight: '280px', maxWidth: '800px', }"
       >
@@ -142,4 +156,63 @@ const Template = (args, { argTypes }) => ({
 });
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  version: '1',
+};
+
+export const Version2 = {
+  render: () => ({
+    components: {
+      unnnicTable,
+      unnnicTableRow,
+      TableHeader,
+      TableBody,
+      TableHead,
+      TableCell,
+      UnnnicTag,
+    },
+    setup() {
+      return {
+        onRowClick: action('click'),
+      };
+    },
+    template: `
+      <unnnic-table version="2">
+        <TableHeader>
+          <unnnic-table-row>
+            <TableHead>
+              Invoice
+            </TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead>
+              Amount
+            </TableHead>
+          </unnnic-table-row>
+        </TableHeader>
+        <TableBody>
+          <unnnic-table-row>
+            <TableCell>
+              INV001
+            </TableCell>
+            <TableCell><UnnnicTag scheme="green" text="Paid" /></TableCell>
+            <TableCell>Credit Card</TableCell>
+            <TableCell>
+              $250.00
+            </TableCell>
+          </unnnic-table-row>
+          <unnnic-table-row @click="onRowClick">
+            <TableCell>
+              INV002
+            </TableCell>
+            <TableCell><UnnnicTag scheme="red" text="Pending" /></TableCell>
+            <TableCell>Bank Transfer</TableCell>
+            <TableCell>
+              $199.00
+            </TableCell>
+          </unnnic-table-row>
+        </TableBody>
+      </unnnic-table>
+    `,
+  }),
+};