@weni/unnnic-system 3.0.3 → 3.0.4-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.0.3",
+  "version": "3.0.4-alpha.1",
   "type": "commonjs",
   "files": [
     "dist",
@@ -99,4 +99,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/components/DataTable/index.vue

@@ -0,0 +1,493 @@
+<template>
+  <table
+    class="unnnic-data-table"
+    :style="props.fixedHeaders ? {} : heightStyles"
+  >
+    <thead
+      v-if="!shouldHideHeaders"
+      class="unnnic-data-table__header"
+    >
+      <tr class="unnnic-data-table__header-row">
+        <th
+          v-for="header in headers"
+          :key="header.itemKey"
+          :class="[
+            'unnnic-data-table__header-cell',
+            {
+              'unnnic-data-table__header-cell--clickable': header.isSortable,
+              'unnnic-data-table__header-cell--sorting':
+                sort.header === header.title && sort.order !== '',
+            },
+          ]"
+          @click.stop="handleClickHeader(header)"
+        >
+          <slot
+            v-if="slots[`header-${header.itemKey}`]"
+            :name="`header-${header.itemKey}`"
+            :header="header"
+          />
+          <template v-else>
+            {{ header.title }}
+          </template>
+          <template v-if="header.isSortable">
+            <IconArrowsDefault
+              v-if="sort.header !== header.title"
+              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>
+    <tbody
+      :class="[
+        'unnnic-data-table__body',
+        { 'unnnic-data-table__body--hide-headers': props.hideHeaders },
+      ]"
+      :style="props.fixedHeaders ? heightStyles : {}"
+    >
+      <tr
+        v-if="isLoading"
+        :class="[
+          'unnnic-data-table__body-row',
+          'unnnic-data-table__body-row--loading',
+        ]"
+      >
+        <img
+          class="unnnic-data-table__body-cell--loading"
+          data-testid="body-row-loading"
+          src="../../assets/icons/weni-loading.svg"
+          height="40"
+        />
+      </tr>
+      <template v-else-if="props.items.length">
+        <tr
+          v-for="(item, index) in props.items"
+          :key="index"
+          :class="[
+            'unnnic-data-table__body-row',
+            { 'unnnic-data-table__body-row--clickable': props.clickable },
+          ]"
+          @click="handleClickRow(item)"
+        >
+          <template
+            v-for="key in headersItemsKeys"
+            :key="key"
+          >
+            <td
+              v-if="slots[`body-${key}`]"
+              :class="[
+                'unnnic-data-table__body-cell',
+                `unnnic-data-table__body-cell--${size}`,
+              ]"
+            >
+              <slot
+                :name="`body-${key}`"
+                :item="item"
+              />
+            </td>
+            <td
+              v-else
+              :class="[
+                'unnnic-data-table__body-cell',
+                `unnnic-data-table__body-cell--${size}`,
+              ]"
+            >
+              {{ item[key] }}
+            </td>
+          </template>
+        </tr>
+      </template>
+      <tr
+        v-else
+        class="unnnic-data-table__body-row"
+      >
+        <td
+          v-if="slots['without-results']"
+          :class="[
+            'unnnic-data-table__body-cell',
+            `unnnic-data-table__body-cell--${size}`,
+          ]"
+        >
+          <slot name="without-results" />
+        </td>
+        <td
+          v-else
+          :class="[
+            'unnnic-data-table__body-cell',
+            `unnnic-data-table__body-cell--${size}`,
+          ]"
+          data-testid="body-cell"
+        >
+          <p
+            class="unnnic-data-table__body-cell-text"
+            data-testid="body-cell-text"
+          >
+            {{ defaultTranslations.without_results[props.locale || 'en'] }}
+          </p>
+        </td>
+      </tr>
+    </tbody>
+    <TablePagination
+      v-if="!props.hidePagination"
+      :modelValue="props.page"
+      :total="props.pageTotal"
+      :interval="props.pageInterval"
+      @update:model-value="$emit('update:page', $event)"
+    />
+  </table>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'UnnnicDataTable',
+};
+</script>
+
+<script setup lang="ts">
+import { computed, ref, useSlots } from 'vue';
+
+import Icon from '../Icon.vue';
+import IconArrowsDefault from '../icons/iconArrowsDefault.vue';
+import TablePagination from '../TableNext/TablePagination.vue';
+
+type DataTableHeader = {
+  title: string;
+  isSortable?: boolean;
+  itemKey: string;
+  align?: 'start' | 'center' | 'end';
+  size?: number | string;
+};
+
+type DataTableItem = {
+  [key: string]: any;
+};
+
+const slots = useSlots();
+
+const emit = defineEmits<{
+  'update:sort': [sort: { header: string; order: string }];
+  itemClick: [item: DataTableItem];
+  'update:page': [page: number];
+}>();
+
+const props = defineProps<{
+  headers: {
+    type: DataTableHeader[];
+    required: true;
+  };
+  items: {
+    type: DataTableItem[];
+    required: true;
+  };
+  isLoading: {
+    type: Boolean;
+    default: false;
+  };
+  size: {
+    type: 'sm' | 'md';
+    default: 'md';
+  };
+  height: {
+    type: String;
+    default: '';
+  };
+  maxHeight: {
+    type: String;
+    default: '';
+  };
+  clickable: {
+    type: Boolean;
+    default: false;
+  };
+  fixedHeaders: {
+    type: Boolean;
+    default: false;
+  };
+  hideHeaders: {
+    type: Boolean;
+    default: false;
+  };
+  hidePagination: {
+    type: Boolean;
+    default: false;
+  };
+  page: {
+    type: Number;
+    default: 1;
+  };
+  pageTotal: {
+    type: Number;
+    default: 0;
+  };
+  pageInterval: {
+    type: Number;
+    default: 5;
+  };
+  locale: {
+    type: string;
+    default: 'en';
+  };
+}>();
+
+const defaultTranslations = {
+  without_results: {
+    'pt-br': 'Nenhum resultado correspondente',
+    en: 'No matching results',
+    es: 'No hay resultados coincidentes',
+  },
+};
+
+const heightStyles = computed(() => {
+  return {
+    height: props.height || 'unset',
+    'max-height': props.maxHeight || 'unset',
+    overflow: props.height || props.maxHeight ? 'auto' : 'unset',
+  };
+});
+
+const shouldHideHeaders = computed(() => {
+  return props.hideHeaders || !props.headers.length;
+});
+
+const headersItemsKeys: string[] = computed(() => {
+  return props.headers.map((header) => header.itemKey);
+});
+
+const sort = ref({
+  header: '',
+  order: '',
+});
+
+const getHeaderColumnSize = (header: DataTableHeader): string => {
+  return typeof header.size === 'number'
+    ? `${header.size || 1}fr`
+    : header.size || '1fr';
+};
+
+const gridTemplateColumns: string = computed(() => {
+  const columnSizes = props.headers.length
+    ? props.headers.map(getHeaderColumnSize)
+    : props.items[0].content.map(() => '1fr');
+
+  return columnSizes.join(' ');
+});
+
+const handleSort = (key: string, order: string) => {
+  sort.value = { header: key, order };
+  emit('update:sort', sort.value);
+};
+
+const handleClickHeader = (header: DataTableHeader) => {
+  if (!header.isSortable) return;
+
+  const nextSortOrderMapper = {
+    asc: 'desc',
+    desc: 'asc',
+    '': 'asc',
+  };
+
+  const nextSort =
+    header.title !== sort.value.header
+      ? 'asc'
+      : nextSortOrderMapper[sort.value.order];
+
+  handleSort(nextSort === '' ? '' : header.title, nextSort);
+};
+
+const handleClickRow = (item: DataTableItem) => {
+  if (!props.clickable) return;
+
+  emit('itemClick', item);
+};
+</script>
+
+<style scoped lang="scss">
+@use '@/assets/scss/unnnic' as *;
+
+$tableBorder: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
+
+.unnnic-data-table {
+  border-spacing: 0;
+
+  overflow: hidden;
+
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+
+  &::-webkit-scrollbar {
+    width: $unnnic-spacing-inline-nano;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $unnnic-color-neutral-cleanest;
+    border-radius: $unnnic-border-radius-pill;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $unnnic-color-neutral-soft;
+    border-radius: $unnnic-border-radius-pill;
+  }
+
+  &__header {
+    &-row {
+      @extend %base-row;
+
+      grid-template-columns: v-bind(gridTemplateColumns);
+    }
+
+    &-cell {
+      @extend %base-cell;
+
+      height: 100%;
+
+      box-sizing: border-box;
+      border: $tableBorder;
+      background-color: $unnnic-color-neutral-light;
+
+      font-weight: $unnnic-font-weight-bold;
+
+      display: flex;
+
+      &:first-of-type {
+        border-radius: $unnnic-border-radius-sm 0 0 0;
+      }
+
+      &:not(:first-of-type) {
+        border-left: none;
+      }
+
+      &: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;
+        }
+      }
+    }
+  }
+
+  &__body {
+    &::-webkit-scrollbar {
+      width: $unnnic-spacing-inline-nano;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $unnnic-color-neutral-cleanest;
+      border-radius: $unnnic-border-radius-pill;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: $unnnic-color-neutral-soft;
+      border-radius: $unnnic-border-radius-pill;
+    }
+
+    &--hide-headers {
+      .unnnic-data-table__body-row:first-of-type {
+        border-radius: $unnnic-border-radius-sm $unnnic-border-radius-sm 0 0;
+        border-top: $tableBorder;
+      }
+    }
+
+    &-row {
+      @extend %base-row;
+
+      overflow: hidden;
+
+      border: $tableBorder;
+      border-collapse: collapse;
+      border-top: none;
+
+      grid-template-columns: v-bind(gridTemplateColumns);
+
+      &--loading {
+        grid-template-columns: 1fr;
+      }
+
+      &--clickable {
+        text-decoration: none;
+
+        &:hover {
+          cursor: pointer;
+          background-color: $unnnic-color-neutral-lightest;
+        }
+      }
+
+      &:last-of-type {
+        border-radius: 0 0 $unnnic-border-radius-sm $unnnic-border-radius-sm;
+      }
+    }
+
+    &-cell {
+      @extend %base-cell;
+
+      &-text {
+        margin: 0;
+
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    td.unnnic-data-table__body-cell--sm {
+      padding: $unnnic-spacing-ant $unnnic-spacing-sm;
+    }
+
+    &-cell--loading {
+      margin: $unnnic-spacing-xl 0;
+      padding: 0;
+
+      width: 100%;
+
+      pointer-events: none;
+    }
+  }
+
+  %base-cell {
+    border-collapse: collapse;
+
+    padding: $unnnic-spacing-sm $unnnic-spacing-sm;
+
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-line-height-small * 5.5;
+    text-align: left;
+    color: $unnnic-color-neutral-dark;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  %base-row {
+    display: grid;
+    align-items: center;
+  }
+}
+</style>

package/src/components/ModalDialog/ModalDialog.vue

@@ -24,10 +24,7 @@
       </section>
 
       <section class="unnnic-modal-dialog__container__body">
-        <header
-          v-if="title"
-          class="unnnic-modal-dialog__container__header"
-        >
+        <header v-if="title" class="unnnic-modal-dialog__container__header">
           <section class="unnnic-modal-dialog__container__title-container">
             <UnnnicIcon
               v-if="icon || type"
@@ -49,6 +46,7 @@
             data-testid="close-icon"
             icon="close"
             clickable
+            scheme="neutral-cloudy"
             @click="close()"
           />
         </header>
@@ -98,12 +96,12 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon.vue';
-import UnnnicButton from '../Button/Button.vue';
-import UnnnicI18n from '../../mixins/i18n';
+import UnnnicIcon from "../Icon.vue";
+import UnnnicButton from "../Button/Button.vue";
+import UnnnicI18n from "../../mixins/i18n";
 
 export default {
-  name: 'UnnnicModalDialog',
+  name: "UnnnicModalDialog",
   components: {
     UnnnicIcon,
     UnnnicButton,
@@ -120,29 +118,29 @@ export default {
     },
     type: {
       type: String,
-      default: '',
+      default: "",
       validate(type) {
-        return ['success', 'warning', 'attention'].includes(type);
+        return ["success", "warning", "attention"].includes(type);
       },
     },
     size: {
       type: String,
-      default: 'md',
+      default: "md",
       validate(size) {
-        return ['sm', 'md', 'lg'].includes(size);
+        return ["sm", "md", "lg"].includes(size);
       },
     },
     title: {
       type: String,
-      default: '',
+      default: "",
     },
     icon: {
       type: String,
-      default: '',
+      default: "",
     },
     iconScheme: {
       type: String,
-      default: '',
+      default: "",
     },
     showCloseIcon: {
       type: Boolean,
@@ -165,26 +163,26 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['primaryButtonClick', 'secondaryButtonClick', 'update:modelValue'],
+  emits: ["primaryButtonClick", "secondaryButtonClick", "update:modelValue"],
 
   data() {
     return {
       defaultTranslations: {
         cancel: {
-          'pt-br': 'Cancelar',
-          en: 'Cancel',
-          es: 'Cancelar',
+          "pt-br": "Cancelar",
+          en: "Cancel",
+          es: "Cancelar",
         },
       },
       iconsMapper: {
-        success: { icon: 'check_circle', scheme: 'aux-green-500' },
-        warning: { icon: 'warning', scheme: 'aux-red-500' },
-        attention: { icon: 'error', scheme: 'aux-yellow-500' },
+        success: { icon: "check_circle", scheme: "aux-green-500" },
+        warning: { icon: "warning", scheme: "aux-red-500" },
+        attention: { icon: "error", scheme: "aux-yellow-500" },
       },
       primaryButtonTypeMapper: {
-        success: 'primary',
-        warning: 'warning',
-        attention: 'attention',
+        success: "primary",
+        warning: "warning",
+        attention: "attention",
       },
     };
   },
@@ -195,17 +193,17 @@ export default {
   },
   methods: {
     close() {
-      this.$emit('update:modelValue', false);
+      this.$emit("update:modelValue", false);
     },
     updateBodyOverflow(isHidden) {
-      document.body.style.overflow = isHidden ? 'hidden' : '';
+      document.body.style.overflow = isHidden ? "hidden" : "";
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
+@use "@/assets/scss/unnnic" as *;
 * {
   margin: 0;
   padding: 0;
@@ -312,7 +310,7 @@ export default {
   &__actions {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-areas: 'secondary-button primary-button';
+    grid-template-areas: "secondary-button primary-button";
     gap: $unnnic-spacing-sm;
     padding: $unnnic-spacing-md;
     flex-shrink: 0;

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

@@ -11,7 +11,7 @@ exports[`ModalDialog.vue > Elements rendering > matches the snapshot 1`] = `
           <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="test-icon" clickable="false" size="md" scheme="neutral-darkest" data-testid="title-icon" class="unnnic-modal-dialog__container__title-icon"></unnnic-icon-stub>
           <h1 data-v-68ebadeb="" class="unnnic-modal-dialog__container__title-text" data-testid="title-text">Test Title</h1>
         </section>
-        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-darkest" data-testid="close-icon"></unnnic-icon-stub>
+        <unnnic-icon-stub data-v-68ebadeb="" filled="false" next="false" icon="close" clickable="true" size="md" scheme="neutral-cloudy" data-testid="close-icon"></unnnic-icon-stub>
       </header>
       <section data-v-68ebadeb="" class="unnnic-modal-dialog__container__content"></section>
       <section data-v-68ebadeb="" data-testid="actions-section" class="unnnic-modal-dialog__container__actions">