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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.9-alpha.6",
+  "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/components/Select/SelectOption.vue

@@ -5,6 +5,7 @@
       {
         'unnnic-select-option--disabled': props.disabled,
         'unnnic-select-option--active': props.active,
+        'unnnic-select-option--focused': props.focused,
       },
     ]"
   >
@@ -21,11 +22,13 @@ interface SelectOptionProps {
   label: string;
   disabled?: boolean;
   active?: boolean;
+  focused?: boolean;
 }
 
 const props = withDefaults(defineProps<SelectOptionProps>(), {
   disabled: false,
   active: false,
+  focused: false,
 });
 </script>
 
@@ -43,6 +46,11 @@ const props = withDefaults(defineProps<SelectOptionProps>(), {
   padding: $unnnic-space-2 $unnnic-space-4;
   font: $unnnic-font-emphasis;
 
+  &:hover:not(&--active):not(&--disabled),
+  &--focused {
+    background-color: $unnnic-color-bg-soft;
+  }
+
   &--active {
     background-color: $unnnic-color-bg-active;
     color: $unnnic-color-fg-inverted;

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

@@ -237,13 +237,13 @@ describe('UnnnicSelect.vue', () => {
   describe('computed properties', () => {
     test('calculatedMaxHeight returns correct value', () => {
       const maxHeight = wrapper.vm.calculatedMaxHeight;
-      expect(maxHeight).toBe('225px'); // (37 * 5) + 40 = 225
+      expect(maxHeight).toBe('235px');
     });
 
     test('calculatedMaxHeight includes search height when enabled', async () => {
       await wrapper.setProps({ enableSearch: true });
       const maxHeight = wrapper.vm.calculatedMaxHeight;
-      expect(maxHeight).toBe('275px'); // (37 * 5) + 40 + 50 = 275
+      expect(maxHeight).toBe('289px');
     });
 
     test('calculatedMaxHeight returns unset when no options', async () => {

package/src/components/Select/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="unnnic-select">
+  <div
+    class="unnnic-select"
+    @keydown="handleKeyDown"
+  >
     <UnnnicPopover
       v-model="openPopover"
       :popoverBalloonProps="{ maxHeight: calculatedMaxHeight }"
@@ -30,12 +33,14 @@
             @update:modelValue="handleSearch"
           />
           <UnnnicSelectOption
-            v-for="option in filteredOptions"
+            v-for="(option, index) in filteredOptions"
             :key="option[props.itemValue]"
+            :data-option-index="index"
             :label="option[props.itemLabel]"
             :active="
               option[props.itemValue] === selectedItem?.[props.itemValue]
             "
+            :focused="focusedOptionIndex === index"
             :disabled="option.disabled"
             @click="handleSelectOption(option)"
           />
@@ -46,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, nextTick } from 'vue';
 import UnnnicInput from '../Input/Input.vue';
 import UnnnicPopover from '../Popover/index.vue';
 import UnnnicSelectOption from './SelectOption.vue';
@@ -102,13 +107,64 @@ const openPopover = ref(false);
 watch(openPopover, () => {
   if (!openPopover.value) {
     handleSearch('');
+  } else {
+    focusedOptionIndex.value = -1;
+  }
+
+  if (openPopover.value && props.modelValue) {
+    const selectedOptionIndex = props.options.findIndex(
+      (option) =>
+        option[props.itemValue] === selectedItem.value[props.itemValue],
+    );
+    scrollToOption(selectedOptionIndex, 'instant', 'center');
   }
 });
 
+const handleKeyDown = (event) => {
+  const { key } = event;
+  const validKeys = ['ArrowUp', 'ArrowDown', 'Enter'];
+  if (validKeys.includes(key)) {
+    event.preventDefault();
+    if (key === 'ArrowUp') {
+      if (focusedOptionIndex.value === 0) return;
+      focusedOptionIndex.value--;
+      scrollToOption(focusedOptionIndex.value);
+    }
+    if (key === 'ArrowDown') {
+      if (focusedOptionIndex.value === filteredOptions.value.length - 1) return;
+      focusedOptionIndex.value++;
+      scrollToOption(focusedOptionIndex.value);
+    }
+    if (key === 'Enter') {
+      handleSelectOption(filteredOptions.value[focusedOptionIndex.value]);
+    }
+  }
+};
+
+const focusedOptionIndex = ref<number>(-1);
+
+const scrollToOption = (
+  index: number,
+  behavior: 'smooth' | 'instant' = 'smooth',
+  block: 'center' | 'start' | 'end' | 'nearest' = 'center',
+) => {
+  nextTick(() => {
+    const option = document.querySelector(`[data-option-index="${index}"]`);
+    if (option) {
+      option.scrollIntoView({ behavior, block });
+    }
+  });
+};
+
 const calculatedMaxHeight = computed(() => {
   if (!props.options || props.options.length === 0) return 'unset';
-  const fieldsHeight = 37 * props.optionsLines + 40;
-  return `${props.enableSearch ? fieldsHeight + 50 : fieldsHeight}px`;
+  const popoverPadding = 32;
+  const popoverGap = 4;
+  // 37 = 21px (height) + 16px (padding)
+  const fieldsHeight = 37 * props.optionsLines;
+  const size =
+    fieldsHeight + popoverPadding + (popoverGap * props.optionsLines - 2);
+  return `${props.enableSearch ? size + 54 : size}px`;
 });
 
 const selectedItem = computed(() => {

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>
+    `,
+  }),
+};