@weni/unnnic-system 3.2.9-alpha.7 → 3.2.9-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.9-alpha.7",
+  "version": "3.2.9-alpha.9",
   "type": "module",
   "files": [
     "dist",

package/src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap

@@ -1,11 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
-"<div data-v-284427ba="" class="unnnic-alert unnnic-alert-position--top-right"><span data-v-26446d8e="" data-v-284427ba="" class="material-symbols-rounded unnnic-icon-scheme--primary unnnic-icon-size--sm" data-testid="material-icon" translate="no" data-test="unnnic-icon">alert-icon</span>
-  <div data-v-284427ba="" class="unnnic-alert__content">
-    <div data-v-284427ba="" class="unnnic-alert__title">TEST ALERT</div>
-    <div data-v-284427ba="" class="unnnic-alert__text">This is an alert message</div>
-  </div>
-  <div data-v-284427ba="" class="unnnic-alert__close-text unnnic--clickable">CLOSE</div>
-</div>"
+"<transition-stub data-v-c3231c18="" name="toast-slide" appear="true" persisted="false" css="true" icon="alert-icon" position="top-right" closetext="Close">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--informational" role="status" aria-live="polite" data-testid="unnnic-toast">
+    <section data-v-c3231c18="" class="unnnic-toast__content">
+      <header data-v-c3231c18="" class="unnnic-toast__header"><span data-v-26446d8e="" data-v-c3231c18="" class="material-symbols-rounded unnnic-icon-scheme--blue-500 unnnic-icon-size--ant" data-testid="toast-type-icon" translate="no">info</span>
+        <h3 data-v-c3231c18="" class="unnnic-toast__title">Test Alert</h3><span data-v-26446d8e="" data-v-c3231c18="" class="material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic--clickable unnnic-toast__close" data-testid="toast-close-button" translate="no">close</span>
+      </header>
+      <!--v-if-->
+    </section>
+    <!--v-if-->
+  </aside>
+</transition-stub>"
 `;

package/src/components/Alert/__tests__/__snapshots__/Version1dot1.spec.js.snap

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert.vue > matches snapshot 1`] = `
-"<div data-v-fb94f284="" class="alert-container">
+"<div data-v-fb94f284="" class="alert-container" version="1.0" linkhref="https://example.com" linktarget="_blank" linktext="Learn more">
   <div data-v-fb94f284="" class="alert alert--scheme-aux-green">
     <div data-v-fb94f284="" class="alert__progress"></div>
-    <div data-v-fb94f284="" class="alert__text">Test Alert</div><a data-v-fb94f284="" class="alert__link" href="https://example.com" target="_blank">Learn more</a>
+    <div data-v-fb94f284="" class="alert__text">Test Alert</div>
     <div data-v-fb94f284="" class="alert__close">
       <unnnic-icon-stub data-v-fb94f284="" filled="false" next="false" icon="close-1" clickable="false" size="sm" scheme="neutral-white"></unnnic-icon-stub>
     </div>

package/src/components/DataTable/index.vue

@@ -16,7 +16,7 @@
             {
               'unnnic-data-table__header-cell--clickable': header.isSortable,
               'unnnic-data-table__header-cell--sorting':
-                sort.header === header.title && sort.order !== '',
+                sortState.header === header.title && sortState.order !== '',
             },
           ]"
           @click.stop="handleClickHeader(header)"
@@ -31,12 +31,12 @@
           </template>
           <template v-if="header.isSortable">
             <IconArrowsDefault
-              v-if="sort.header !== header.title"
+              v-if="sortState.header !== header.title"
               class="order-default-icon"
               data-testid="arrow-default-icon"
             />
             <Icon
-              v-else-if="sort.order === 'asc'"
+              v-else-if="sortState.order === 'asc'"
               clickable
               size="ant"
               :icon="'switch_left'"
@@ -44,7 +44,7 @@
               data-testid="arrow-asc-icon"
             />
             <Icon
-              v-else-if="sort.order === 'desc'"
+              v-else-if="sortState.order === 'desc'"
               clickable
               size="ant"
               :icon="'switch_left'"
@@ -183,6 +183,12 @@ type DataTableItem = {
   [key: string]: any;
 };
 
+type SortState = {
+  header: string;
+  itemKey: string;
+  order: string;
+};
+
 interface Props {
   headers: DataTableHeader[];
   items: DataTableItem[];
@@ -198,6 +204,7 @@ interface Props {
   pageTotal?: number;
   pageInterval?: number;
   locale?: string;
+  sort?: SortState;
 }
 
 defineOptions({
@@ -225,6 +232,7 @@ const props = withDefaults(defineProps<Props>(), {
   pageTotal: 0,
   pageInterval: 5,
   locale: 'en',
+  sort: undefined,
 });
 
 const defaultTranslations = {
@@ -251,12 +259,16 @@ const headersItemsKeys: ComputedRef<string[]> = computed(() => {
   return props.headers.map((header) => header.itemKey);
 });
 
-const sort = ref({
+const internalSort = ref({
   header: '',
   itemKey: '',
   order: '',
 });
 
+const sortState = computed(() => {
+  return props.sort !== undefined ? props.sort : internalSort.value;
+});
+
 const getHeaderColumnSize = (header: DataTableHeader): string => {
   return typeof header.size === 'number'
     ? `${header.size || 1}fr`
@@ -271,9 +283,12 @@ const gridTemplateColumns: ComputedRef<string> = computed(() => {
   return columnSizes.join(' ');
 });
 
-const handleSort = (header: typeof sort.value, order: string) => {
-  sort.value = { ...header, order };
-  emit('update:sort', sort.value);
+const handleSort = (header: SortState, order: string) => {
+  if (props.sort === undefined) {
+    internalSort.value = { ...header, order };
+  }
+
+  emit('update:sort', { ...header, order });
 };
 
 const handleClickHeader = (header: DataTableHeader) => {
@@ -286,9 +301,9 @@ const handleClickHeader = (header: DataTableHeader) => {
   };
 
   const nextSort =
-    header.title !== sort.value.header
+    header.title !== sortState.value.header
       ? 'asc'
-      : nextSortOrderMapper[sort.value.order];
+      : nextSortOrderMapper[sortState.value.order];
 
   handleSort(
     nextSort === ''

package/src/stories/DataTable.stories.js

@@ -330,3 +330,63 @@ export const Loading = {
     isLoading: true,
   },
 };
+
+export const ControlledSort = {
+  args: { headers, items },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      let sortState = {
+        header: 'ID',
+        itemKey: 'id',
+        order: 'asc',
+      };
+
+      const handleSort = ({ order, header, itemKey }) => {
+        action('update:sort')({ order, header, itemKey });
+        sortState = { header, itemKey, order };
+
+        if (order === 'asc') {
+          args.items = [...args.items].sort((a, b) => {
+            if (itemKey === 'id') return a.id - b.id;
+            return a[itemKey] > b[itemKey] ? 1 : -1;
+          });
+        } else if (order === 'desc') {
+          args.items = [...args.items].sort((a, b) => {
+            if (itemKey === 'id') return b.id - a.id;
+            return a[itemKey] < b[itemKey] ? 1 : -1;
+          });
+        }
+      };
+
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sortState, handleSort, updatePage, itemClick };
+    },
+    template: `
+    <div>
+      <UnnnicDataTable
+        v-bind="args"
+        :headers="args.headers"
+        :items="args.items"
+        :pageTotal="125"
+        :pageInterval="5"
+        v-model:sort="sortState"
+        @update:sort="handleSort"
+        @update:page="updatePage"
+        @itemClick="itemClick"
+      >
+      </UnnnicDataTable>
+    </div>
+    `,
+  }),
+};