@weni/unnnic-system 3.9.1 → 3.9.2

package/package.json

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

package/src/components/DataTable/index.vue

@@ -56,6 +56,7 @@
       </tr>
     </thead>
     <tbody
+      ref="tbodyRef"
       :class="[
         'unnnic-data-table__body',
         { 'unnnic-data-table__body--hide-headers': props.hideHeaders },
@@ -120,6 +121,27 @@
             </td>
           </template>
         </tr>
+        <tr
+          v-if="props.infiniteScroll && props.isLoadingMore"
+          :class="[
+            'unnnic-data-table__body-row',
+            'unnnic-data-table__body-row--loading-more',
+          ]"
+        >
+          <td
+            :class="[
+              'unnnic-data-table__body-cell',
+              `unnnic-data-table__body-cell--${size}`,
+            ]"
+          >
+            <img
+              class="unnnic-data-table__body-cell--loading"
+              data-testid="body-row-loading-more"
+              src="../../assets/icons/weni-loading.svg"
+              height="40"
+            />
+          </td>
+        </tr>
       </template>
       <tr
         v-else
@@ -166,6 +188,7 @@
 
 <script setup lang="ts">
 import { computed, ComputedRef, ref, useSlots } from 'vue';
+import { useInfiniteScroll } from '@vueuse/core';
 
 import Icon from '../Icon.vue';
 import IconArrowsDefault from '../icons/iconArrowsDefault.vue';
@@ -205,6 +228,10 @@ interface Props {
   pageInterval?: number;
   locale?: string;
   sort?: SortState;
+  infiniteScroll?: boolean;
+  infiniteScrollDistance?: number;
+  infiniteScrollDisabled?: boolean;
+  isLoadingMore?: boolean;
 }
 
 defineOptions({
@@ -217,6 +244,7 @@ const emit = defineEmits<{
   'update:sort': [sort: { header: string; itemKey: string; order: string }];
   itemClick: [item: DataTableItem];
   'update:page': [page: number];
+  loadMore: [];
 }>();
 
 const props = withDefaults(defineProps<Props>(), {
@@ -233,6 +261,10 @@ const props = withDefaults(defineProps<Props>(), {
   pageInterval: 5,
   locale: 'en',
   sort: undefined,
+  infiniteScroll: false,
+  infiniteScrollDistance: 100,
+  infiniteScrollDisabled: false,
+  isLoadingMore: false,
 });
 
 const defaultTranslations = {
@@ -318,6 +350,21 @@ const handleClickRow = (item: DataTableItem) => {
 
   emit('itemClick', item);
 };
+
+const tbodyRef = ref<HTMLElement | null>(null);
+
+const handleLoadMore = () => {
+  if (props.infiniteScrollDisabled || props.isLoading || props.isLoadingMore) {
+    return;
+  }
+  emit('loadMore');
+};
+
+if (props.infiniteScroll) {
+  useInfiniteScroll(tbodyRef, handleLoadMore, {
+    distance: props.infiniteScrollDistance,
+  });
+}
 </script>
 
 <style scoped lang="scss">
@@ -428,6 +475,7 @@ $tableBorder: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
       grid-template-columns: v-bind(gridTemplateColumns);
 
       &--loading,
+      &--loading-more,
       &--without-results {
         grid-template-columns: 1fr;
       }

package/src/stories/DataTable.stories.js

@@ -1,6 +1,31 @@
 import UnnnicDataTable from '../components/DataTable/index.vue';
 import { action } from '@storybook/addon-actions';
 
+const SAMPLE_NAMES = [
+  'Eduardo',
+  'Marcus',
+  'Paulo',
+  'Cristian',
+  'Aldemylla',
+  'João',
+  'Maria',
+  'Ana',
+  'Pedro',
+  'Lucas',
+];
+
+const SAMPLE_COUNTRIES = ['Brazil', 'USA', 'Canada', 'Argentina', 'Chile'];
+
+const generateItems = (count, startId) => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: String(startId + i),
+    name: SAMPLE_NAMES[Math.floor(Math.random() * SAMPLE_NAMES.length)],
+    age: Math.floor(Math.random() * 30) + 20,
+    country:
+      SAMPLE_COUNTRIES[Math.floor(Math.random() * SAMPLE_COUNTRIES.length)],
+  }));
+};
+
 export default {
   title: 'Data Display/DataTable',
   component: UnnnicDataTable,
@@ -70,6 +95,26 @@ export default {
       control: { type: 'select' },
       options: ['en', 'pt-br', 'es'],
     },
+    infiniteScroll: {
+      description:
+        'Enables infinite scroll functionality. When enabled, the table will emit a loadMore event when the user scrolls near the bottom.',
+      control: 'boolean',
+    },
+    infiniteScrollDistance: {
+      description:
+        'Distance in pixels from the bottom of the table to trigger the loadMore event.',
+      control: 'number',
+    },
+    infiniteScrollDisabled: {
+      description:
+        'Disables the infinite scroll functionality. Useful when all data has been loaded.',
+      control: 'boolean',
+    },
+    isLoadingMore: {
+      description:
+        'Indicates whether more data is being loaded for infinite scroll. Shows a loading indicator at the bottom of the table.',
+      control: 'boolean',
+    },
   },
   render: (args) => ({
     components: {
@@ -390,3 +435,150 @@ export const ControlledSort = {
     `,
   }),
 };
+
+export const InfiniteScroll = {
+  args: { headers },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    data() {
+      return {
+        args,
+        currentId: 11,
+        displayedItems: generateItems(10, 1),
+        isLoadingMore: false,
+      };
+    },
+    methods: {
+      loadMore() {
+        action('loadMore')();
+        this.isLoadingMore = true;
+
+        setTimeout(() => {
+          const newItems = generateItems(5, this.currentId);
+          this.displayedItems = [...this.displayedItems, ...newItems];
+          this.currentId += 5;
+          this.isLoadingMore = false;
+        }, 1000);
+      },
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="displayedItems"
+      :infiniteScroll="true"
+      :infiniteScrollDistance="100"
+      :isLoadingMore="isLoadingMore"
+      :hidePagination="true"
+      height="400px"
+      @loadMore="loadMore"
+    >
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+export const InfiniteScrollWithFixedHeaders = {
+  args: { headers },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    data() {
+      return {
+        args,
+        currentId: 11,
+        displayedItems: generateItems(10, 1),
+        isLoadingMore: false,
+        hasMore: true,
+      };
+    },
+    methods: {
+      loadMore() {
+        if (!this.hasMore) return;
+
+        action('loadMore')();
+        this.isLoadingMore = true;
+
+        setTimeout(() => {
+          const newItems = generateItems(5, this.currentId);
+          this.displayedItems = [...this.displayedItems, ...newItems];
+          this.currentId += 5;
+
+          if (this.displayedItems.length >= 50) {
+            this.hasMore = false;
+          }
+
+          this.isLoadingMore = false;
+        }, 1000);
+      },
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="displayedItems"
+      :infiniteScroll="true"
+      :infiniteScrollDistance="50"
+      :infiniteScrollDisabled="!hasMore"
+      :isLoadingMore="isLoadingMore"
+      :hidePagination="true"
+      :fixedHeaders="true"
+      height="400px"
+      @loadMore="loadMore"
+    >
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+export const InfiniteScrollClickable = {
+  args: { headers },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    data() {
+      return {
+        args,
+        currentId: 11,
+        displayedItems: generateItems(10, 1),
+        isLoadingMore: false,
+      };
+    },
+    methods: {
+      loadMore() {
+        action('loadMore')();
+        this.isLoadingMore = true;
+
+        setTimeout(() => {
+          const newItems = generateItems(5, this.currentId);
+          this.displayedItems = [...this.displayedItems, ...newItems];
+          this.currentId += 5;
+          this.isLoadingMore = false;
+        }, 1000);
+      },
+      itemClick(item) {
+        action('itemClick')(item);
+      },
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="displayedItems"
+      :infiniteScroll="true"
+      :infiniteScrollDistance="100"
+      :isLoadingMore="isLoadingMore"
+      :hidePagination="true"
+      :clickable="true"
+      height="400px"
+      @loadMore="loadMore"
+      @itemClick="itemClick"
+    >
+    </UnnnicDataTable>
+    `,
+  }),
+};