@weni/unnnic-system 2.18.1 → 2.19.0

package/package.json

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

package/src/components/ChartFunnel/SvgFunnel/__tests__/__snapshots__/ChartFunnelThreeRow.unit.spec.js.snap

@@ -1,5 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ChartFunnelFourRows.vue > matches snapshot 1`] = `"<div class="chart-funnel-base-row unnnic-chart-funnel-three-rows"></div>"`;
-
 exports[`ChartFunnelThreeRows.vue > matches snapshot 1`] = `"<div class="chart-funnel-base-row unnnic-chart-funnel-three-rows"></div>"`;

package/src/components/TableNext/TableNext.vue

@@ -13,10 +13,39 @@
         <th
           v-for="(cell, index) of headers"
           :key="cell.content + index"
-          class="unnnic-table-next__header-cell"
+          :class="{
+            'unnnic-table-next__header-cell': true,
+            'unnnic-table-next__header-cell--clickable': cell.isSortable,
+            'unnnic-table-next__header-cell--sorting':
+              sort.header === cell.content && sort.order !== '',
+          }"
           data-testid="header-cell"
+          @click.stop="handleClickHeader(cell)"
         >
           {{ cell.content }}
+          <template v-if="cell.isSortable">
+            <IconArrowsDefault
+              v-if="sort.header !== cell.content"
+              class="order-default-icon"
+              data-testid="arrow-default-icon"
+            />
+            <Icon
+              v-else-if="sort.order === 'asc'"
+              clickable
+              size="ant"
+              :icon="'switch_left'"
+              style="transform: rotate(-90deg)"
+              data-testid="arrow-asc-icon"
+            />
+            <Icon
+              v-else-if="sort.order === 'desc'"
+              clickable
+              size="ant"
+              :icon="'switch_left'"
+              style="transform: rotate(90deg)"
+              data-testid="arrow-desc-icon"
+            />
+          </template>
         </th>
       </tr>
     </thead>
@@ -117,6 +146,8 @@ import { validateHeaders, validateRows } from './validation';
 import TableBodyCell from './TableBodyCell.vue';
 import TablePagination from './TablePagination.vue';
 import UnnnicI18n from '../../mixins/i18n';
+import Icon from '../Icon.vue';
+import IconArrowsDefault from '../icons/iconArrowsDefault.vue';
 
 export default {
   name: 'UnnnicTableNext',
@@ -124,6 +155,8 @@ export default {
   components: {
     TableBodyCell,
     TablePagination,
+    Icon,
+    IconArrowsDefault,
   },
 
   mixins: [UnnnicI18n],
@@ -191,7 +224,7 @@ export default {
     },
   },
 
-  emits: ['update:pagination', 'row-click'],
+  emits: ['update:pagination', 'row-click', 'sort'],
 
   data() {
     return {
@@ -202,6 +235,7 @@ export default {
           es: 'No hay resultados coincidentes',
         },
       },
+      sort: { header: '', order: '' },
     };
   },
 
@@ -226,6 +260,28 @@ export default {
       return this.hideHeaders || !this.headers.length;
     },
   },
+  methods: {
+    handleClickHeader(header) {
+      if (!header.isSortable) return;
+
+      const nextSortOrderMapper = {
+        asc: 'desc',
+        desc: '',
+        '': 'asc',
+      };
+
+      const nextSort =
+        header.content !== this.sort.header
+          ? 'asc'
+          : nextSortOrderMapper[this.sort.order];
+
+      this.handleSort(nextSort === '' ? '' : header.content, nextSort);
+    },
+    handleSort(key, order) {
+      this.sort = { header: key, order };
+      this.$emit('sort', this.sort);
+    },
+  },
 };
 </script>
 
@@ -260,6 +316,8 @@ $tableBorder: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
 
       font-weight: $unnnic-font-weight-bold;
 
+      display: flex;
+
       &:first-of-type {
         border-radius: $unnnic-border-radius-sm 0 0 0;
       }
@@ -271,6 +329,17 @@ $tableBorder: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
       &:last-of-type {
         border-radius: 0 $unnnic-border-radius-sm 0 0;
       }
+
+      &--sorting {
+        background-color: $unnnic-color-neutral-soft;
+      }
+
+      &--clickable {
+        &:hover {
+          cursor: pointer;
+          background-color: $unnnic-color-neutral-soft;
+        }
+      }
     }
   }
 

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
 import TableNext from '../TableNext.vue';
 import TablePagination from '../TablePagination.vue';
 
@@ -88,6 +88,51 @@ describe('TableNext.vue', () => {
     });
   });
 
+  describe('Header sorting', () => {
+    it('render sort icon', async () => {
+      wrapper = mount(TableNext, {
+        props: {
+          headers: [
+            { content: 'ID', size: 1, isSortable: true },
+            { content: 'Name', size: 'auto' },
+            { content: 'Age', size: 2 },
+          ],
+          rows,
+        },
+      });
+      expect(wrapper.find('[data-testid="arrow-default-icon"]').exists()).toBe(
+        true,
+      );
+    });
+    it('change sorting and emit sort event', async () => {
+      wrapper = mount(TableNext, {
+        props: {
+          headers: [
+            { content: 'ID', size: 1, isSortable: true },
+            { content: 'Name', size: 'auto' },
+            { content: 'Age', size: 2 },
+          ],
+          rows,
+        },
+      });
+      const handlerSortSpy = vi.spyOn(wrapper.vm, 'handleSort');
+
+      const [headerCell, unsortableHeaderCell] = wrapper.findAll(
+        '[data-testid="header-cell"]',
+      );
+
+      await unsortableHeaderCell.trigger('click');
+      expect(handlerSortSpy).not.toHaveBeenCalled();
+
+      await headerCell.trigger('click');
+      expect(handlerSortSpy).toHaveBeenCalledWith('ID', 'asc');
+      await headerCell.trigger('click');
+      expect(handlerSortSpy).toHaveBeenCalledWith('ID', 'desc');
+      await headerCell.trigger('click');
+      expect(handlerSortSpy).toHaveBeenCalledWith('', '');
+    });
+  });
+
   describe('Row rendering and behaviors', () => {
     it('renders rows correctly', () => {
       const bodyRows = wrapper.findAll('[data-testid="body-row"]');

package/src/components/TableNext/__test__/__snapshots__/TableNext.spec.js.snap

@@ -4,8 +4,12 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
 "<table data-v-2143c794="" class="unnnic-table-next">
   <thead data-v-2143c794="" class="unnnic-table-next__header" data-testid="header">
     <tr data-v-2143c794="" class="unnnic-table-next__header-row" data-testid="header-row" style="grid-template-columns: 1fr 2fr;">
-      <th data-v-2143c794="" class="unnnic-table-next__header-cell" data-testid="header-cell">Header 1</th>
-      <th data-v-2143c794="" class="unnnic-table-next__header-cell" data-testid="header-cell">Header 2</th>
+      <th data-v-2143c794="" class="unnnic-table-next__header-cell" data-testid="header-cell">Header 1
+        <!--v-if-->
+      </th>
+      <th data-v-2143c794="" class="unnnic-table-next__header-cell" data-testid="header-cell">Header 2
+        <!--v-if-->
+      </th>
     </tr>
   </thead>
   <tbody data-v-2143c794="" class="unnnic-table-next__body" data-testid="body">

package/src/components/icons/iconArrowsDefault.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.52329 7.62271C6.49402 7.70173 6.47939 7.77475 6.47939 7.84175C6.47939 8.01402 6.53572 8.16813 6.64838 8.30407C6.7609 8.44001 6.92389 8.50798 7.13734 8.50798L12.8628 8.50798C13.0762 8.50798 13.2392 8.44001 13.3517 8.30407C13.4644 8.16813 13.5207 8.01402 13.5207 7.84175C13.5207 7.77475 13.5061 7.70173 13.4768 7.62271C13.4477 7.54355 13.4012 7.46936 13.3374 7.40015L10.5064 4.20619C10.4407 4.13255 10.3648 4.07978 10.2788 4.04787C10.1928 4.01596 10.0999 4 10 4C9.90023 4 9.80731 4.01596 9.72129 4.04787C9.63528 4.07978 9.55941 4.13255 9.49369 4.20619L6.66267 7.40015C6.59888 7.46936 6.55242 7.54355 6.52329 7.62271ZM13.4767 12.3773C13.506 12.2983 13.5206 12.2253 13.5206 12.1583C13.5206 11.986 13.4643 11.8319 13.3516 11.6959C13.2391 11.56 13.0761 11.492 12.8627 11.492H7.13726C6.92381 11.492 6.76082 11.56 6.6483 11.6959C6.53564 11.8319 6.47931 11.986 6.47931 12.1583C6.47931 12.2253 6.49394 12.2983 6.52321 12.3773C6.55235 12.4565 6.5988 12.5306 6.66259 12.5998L9.49362 15.7938C9.55933 15.8674 9.6352 15.9202 9.72122 15.9521C9.80723 15.984 9.90015 16 9.99997 16C10.0998 16 10.1927 15.984 10.2787 15.9521C10.3647 15.9202 10.4406 15.8674 10.5063 15.7938L13.3373 12.5999C13.4011 12.5306 13.4476 12.4565 13.4767 12.3773Z"
+      fill="#D0D3D9"
+    />
+  </svg>
+</template>

package/src/stories/TableNext.stories.js

@@ -51,7 +51,12 @@ export default {
       UnnnicTableNext,
     },
     setup() {
-      return { args };
+      const sort = ({ order }) => {
+        if (order === 'asc') return;
+        if (order === 'desc') args.rows === args.rows.reverse();
+        else args.rows === args.rows.reverse();
+      };
+      return { args, sort };
     },
     data() {
       return {
@@ -61,6 +66,7 @@ export default {
             {
               content: 'ID',
               size: 'auto',
+              isSortable: true,
             },
             {
               content: 'Name',
@@ -88,6 +94,7 @@ export default {
       v-model:pagination="pagination"
       :paginationTotal="125"
       :paginationInterval="5"
+      @sort="sort"
     />
     `,
   }),