@meistrari/tela-build 1.0.0

package/components/tela/complex-table/complex-table-virtualized.vue

@@ -0,0 +1,326 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, nextTick, defineProps, defineEmits } from 'vue'
+import { useNotification } from '../../../../application/composables/notification'
+import type { Column, Row, ComplexTableType } from './types'
+import { HoverMechanismTypes } from './types'
+import TelaTableHeader from './complex-table-header.vue'
+import TelaTableRow from './complex-table-row.vue'
+import { useTableSelection } from './composables/table-selection'
+import { useTableCommon } from './composables/table-common'
+import { useVirtualScroll } from './composables/virtual-scroll'
+import './styles/table-shared.css'
+
+const props = defineProps<ComplexTableType>()
+
+const emit = defineEmits<{
+    (event: 'select', ids: string[], isAll: boolean): void
+    (event: 'loadMore'): void
+    (event: 'open', id: string): void
+    (event: 'scroll', scrollEvent: Event): void
+}>()
+
+const notification = useNotification()
+const slots = useSlots()
+
+const mainTableEl = ref<HTMLElement>()
+const containerEl = ref<HTMLElement>()
+
+// Use table composables
+const {
+    selectedRows: internalSelectedRows,
+    isAllSelected,
+    selectAll,
+    toggleRow,
+} = useTableSelection({
+    rows: computed(() => props.rows),
+    initialSelectedRows: props.selectedRows,
+})
+
+const selectedRows = computed(() => props.selectedRows ?? internalSelectedRows.value)
+
+const {
+    hoveredRowIndex,
+    hasHorizontalScroll,
+    handleRowSelect,
+    handleSelectAllRows,
+    handleScroll,
+    updateScrollButtonsState,
+    handleRowHover,
+} = useTableCommon({
+    props,
+    emit,
+    mainTableEl,
+    selectedRows,
+    isAllSelected,
+    selectAll,
+    toggleRow,
+})
+
+const hoverMechanism = computed(() => props.hoverMechanism || HoverMechanismTypes.Cell)
+const columnsWithHeaders: ComputedRef<Column[]> = computed(() => props.columns.filter((column: Column) => slots[`header-${column.key}`] !== undefined))
+const shouldHideScrollbar = computed(() => props.hideScrollbar || !hasHorizontalScroll.value)
+
+// Track if we're currently loading more data to prevent duplicate requests
+const isLoadingMore = ref(false)
+
+// Virtual scroll setup
+const virtualScroll = props.useVirtualization !== false
+    ? useVirtualScroll({
+            count: computed(() => props.rows.length),
+            getScrollElement: () => mainTableEl.value || null,
+            estimateSize: props.virtualizedRowHeight ?? 64,
+            overscan: props.virtualizedOverscan ?? 5,
+            initialBatchSize: props.virtualizedInitialBatchSize ?? 30,
+        })
+    : null
+
+const displayRows = computed(() => {
+    if (!virtualScroll) {
+        return props.rows.map((row, index) => ({ row, index }))
+    }
+
+    return virtualScroll.virtualItems.value.map(virtualItem => ({
+        row: props.rows[virtualItem.index] || {} as Row,
+        index: virtualItem.index,
+    }))
+})
+
+const topSpacerHeight = computed(() => {
+    if (!virtualScroll)
+        return 0
+    const startIndex = virtualScroll.range.value.startIndex
+    return startIndex * (props.virtualizedRowHeight ?? 64)
+})
+
+const bottomSpacerHeight = computed(() => {
+    if (!virtualScroll)
+        return 0
+    const endIndex = virtualScroll.range.value.endIndex
+    return (props.rows.length - endIndex - 1) * (props.virtualizedRowHeight ?? 64)
+})
+
+const shouldShowTopSpacer = computed(() => {
+    return virtualScroll && topSpacerHeight.value > 0
+})
+
+const shouldShowBottomSpacer = computed(() => {
+    return virtualScroll && bottomSpacerHeight.value > 0
+})
+
+// Infinite scroll with virtualization support
+let lastLoadMoreTriggeredAt = 0
+watch(() => virtualScroll?.range.value, async (newRange) => {
+    if (!newRange || !virtualScroll || isLoadingMore.value)
+        return
+    // Check if we're near the end and haven't recently triggered a load
+    const now = Date.now()
+    if (newRange.endIndex >= props.rows.length - 10 && now - lastLoadMoreTriggeredAt > 500) {
+        try {
+            isLoadingMore.value = true
+            lastLoadMoreTriggeredAt = now
+            emit('loadMore')
+            // Give time for new data to be added before allowing another load
+            await nextTick()
+            setTimeout(() => {
+                isLoadingMore.value = false
+            }, 300)
+        }
+        catch (error) {
+            notification.error('Load More Failed', (error as Error).message)
+            isLoadingMore.value = false
+        }
+    }
+}, { deep: true })
+
+// Fallback for non-virtualized mode
+if (!virtualScroll) {
+    useInfiniteScroll(mainTableEl, () => {
+        try {
+            emit('loadMore')
+        }
+        catch (error) {
+            notification.error('Load More Failed', (error as Error).message)
+        }
+    }, { distance: 100, direction: 'bottom' })
+}
+
+onMounted(() => {
+    updateScrollButtonsState()
+    window.addEventListener('resize', updateScrollButtonsState)
+    virtualScroll?.init()
+})
+
+onUnmounted(() => {
+    window.removeEventListener('resize', updateScrollButtonsState)
+    virtualScroll?.destroy()
+})
+
+watch(() => props.columns, () => {
+    nextTick(updateScrollButtonsState)
+}, { deep: true })
+
+const hasRowIndex = computed(() => props.allowRowIndex && props.rows.length)
+const hasSelect = computed(() => props.allowSelect && props.rows.length)
+
+watch([hasRowIndex, hasSelect, mainTableEl], () => {
+    if (!mainTableEl.value)
+        return
+
+    const el = mainTableEl.value
+    el.classList.remove('has-index', 'has-select', 'has-index-and-select')
+
+    if (hasRowIndex.value && hasSelect.value) {
+        el.classList.add('has-index-and-select')
+    }
+    else if (hasRowIndex.value) {
+        el.classList.add('has-index')
+    }
+    else if (hasSelect.value) {
+        el.classList.add('has-select')
+    }
+}, { immediate: true })
+</script>
+
+<template>
+    <div
+        ref="containerEl"
+        rounded-12px flex="~"
+        b="0.5px gray-300"
+        overflow-hidden
+        :style="{
+            width: '100%',
+            boxShadow: '0px 2px 5px 0px #677F940D, 0px 3px 16px 0px #677F940A',
+        }"
+    >
+        <div
+            ref="mainTableEl"
+            w-full
+            class="main-table-container overflow-auto"
+            relative
+            :class="{ 'hide-scrollbar': shouldHideScrollbar }"
+            :style="{ maxHeight: `${props.maxHeight || 462.5}px` }"
+            @scroll="handleScroll"
+        >
+            <table z-2 class="relative w-full min-w-full">
+                <TelaTableHeader
+                    :columns="columns"
+                    :rows="rows"
+                    :selected-rows="selectedRows"
+                    :allow-select="allowSelect"
+                    :allow-row-index="allowRowIndex"
+                    :allow-row-action="$slots['row-action'] !== undefined"
+                    :header-class="props.headerClass"
+                    @select-all="handleSelectAllRows"
+                >
+                    <template #leading-header>
+                        <slot name="leading-header" />
+                    </template>
+
+                    <template
+                        v-for="column in columnsWithHeaders"
+                        :key="column.key"
+                        #[`header-${column.key}`]
+                    >
+                        <slot :name="`header-${column.key}`" :column="column" />
+                    </template>
+                </TelaTableHeader>
+
+                <tbody v-if="rows.length">
+                    <tr v-if="shouldShowTopSpacer" :style="{ height: `${topSpacerHeight}px` }">
+                        <td :colspan="columns.length + (allowSelect ? 1 : 0) + (allowRowIndex ? 1 : 0) + 2" />
+                    </tr>
+
+                    <TelaTableRow
+                        v-for="{ row: rowData, index: idx } in displayRows"
+                        :key="rowData.id || idx"
+                        :row="rowData"
+                        :row-index="idx"
+                        :columns="columns"
+                        :allow-select="allowSelect"
+                        :allow-row-index="allowRowIndex"
+                        :allow-row-action="$slots['row-action'] !== undefined"
+                        :is-selected="selectedRows?.includes(rowData.id as string)"
+                        :loading="props.loading"
+                        :disable-row-click="props.disableRowClick?.(rowData)"
+                        :hover-mechanism="hoverMechanism"
+                        :hovered-row-index="hoveredRowIndex"
+                        :row-class="props.rowClass"
+                        :row-index-class="props.rowIndexClass"
+                        :row-title-path="props.rowTitlePath"
+                        :row-index-path="props.rowIndexPath"
+                        :columns-class="props.columnsClass"
+                        :is-first-row="idx === 0"
+                        :is-last-row="idx === rows.length - 1"
+                        :hide-error="props.hideError"
+                        :total-rows="rows.length"
+                        @select="handleRowSelect"
+                        @open="(id: string) => emit('open', id)"
+                        @hover="handleRowHover"
+                    >
+                        <template #leading="slotProps">
+                            <slot name="leading" v-bind="slotProps" />
+                        </template>
+
+                        <template v-for="column in columns" :key="column.key" #[column.key!]="slotProps">
+                            <slot v-if="column.key" :name="column.key" v-bind="slotProps" />
+                        </template>
+
+                        <template v-if="$slots['row-action']" #row-action="slotProps">
+                            <slot name="row-action" v-bind="slotProps" />
+                        </template>
+                    </TelaTableRow>
+
+                    <tr v-if="shouldShowBottomSpacer" :style="{ height: `${bottomSpacerHeight}px` }">
+                        <td :colspan="columns.length + (allowSelect ? 1 : 0) + (allowRowIndex ? 1 : 0) + 2" />
+                    </tr>
+
+                    <tr v-if="$slots.footer && !virtualScroll" b="b-0.5px gray-200">
+                        <td :colspan="columns.length + 2">
+                            <div flex items-center h-64px b="t-0.5px gray-200" :class="props.rowClass">
+                                <slot name="footer" />
+                            </div>
+                        </td>
+                        <td sticky right-0px z-1 colspan="1">
+                            <div
+                                flex="~" bg-white w-86px h-64px items-center justify-center h-full px-12px
+                                b="t-0.5px l-0.5px gray-200"
+                                class="shadow" :class="props.rowClass"
+                            />
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody v-else>
+                    <tr>
+                        <td colspan="100%">
+                            <div h-64px flex items-center justify-center w-full relative>
+                                <div class="empty-state-centered">
+                                    <slot name="empty-state" />
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* Virtualization-specific styles for sticky headers */
+thead th.sticky {
+    position: sticky !important;
+    z-index: 30 !important;
+}
+
+thead th.z-30 {
+    z-index: 30 !important;
+}
+
+thead th[style*="left"] {
+    position: sticky !important;
+}
+
+thead th.bg-white {
+    background-color: white !important;
+}
+</style>

package/components/tela/complex-table/complex-table.stories.ts

@@ -0,0 +1,358 @@
+/* eslint-disable no-console */
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaComplexTable from './complex-table.vue'
+import { HoverMechanismTypes } from './types'
+
+const meta = {
+    title: 'Components/Tela/ComplexTable',
+    component: TelaComplexTable,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A complex table component with advanced features including column management, sorting, row selection, status indicators, custom cell rendering, and hover interactions. Supports virtualized rendering for large datasets and provides flexible column configuration. Perfect for data-heavy applications requiring sophisticated table functionality.',
+            },
+        },
+    },
+    argTypes: {
+        columns: {
+            control: 'object',
+            description: 'Array of column definitions. Each column should have `title`, `key`, and optionally `isDefault` properties.',
+        },
+        rows: {
+            control: 'object',
+            description: 'Array of row data objects. Each row should have `id`, `index`, `status`, `name`, and `data` (object with column keys) properties.',
+        },
+        hoverMechanism: {
+            control: 'select',
+            options: Object.values(HoverMechanismTypes),
+            description: 'Mechanism for handling row hover interactions.',
+        },
+    },
+} satisfies Meta<typeof TelaComplexTable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const mockColumns = [
+    { title: 'Column 1', key: 'col1', isDefault: false },
+    { title: 'Column 2', key: 'col2', isDefault: false },
+    { title: 'Column 3', key: 'col3', isDefault: true },
+]
+
+const mockRows = [
+    {
+        id: '1',
+        index: 1,
+        status: 'success',
+        name: 'Row 1',
+        data: {
+            'Column 1': 'Data 1-1',
+            'Column 2': 'Data 1-2',
+            'Column 3': 'Data 1-3',
+        },
+    },
+    {
+        id: '2',
+        index: 2,
+        status: 'success',
+        name: 'Row 2',
+        data: {
+            'Column 1': 'Data 2-1',
+            'Column 2': 'Data 2-2',
+            'Column 3': 'Data 2-3',
+        },
+    },
+]
+
+const CustomHeaderCell = {
+    props: ['column', 'sortDirection'],
+    template: `
+        <div class="flex items-center gap-2 px-4 py-2">
+            <span class="font-medium">{{ column.title }}</span>
+            <div class="flex flex-col">
+                <button 
+                    class="w-0 h-0 border-l-4 border-r-4 border-b-4 border-l-transparent border-r-transparent"
+                    :class="sortDirection === 'asc' ? 'border-blue-600' : 'border-gray-300'"
+                    @click="$emit('sort', 'asc')"
+                />
+                <button 
+                    class="w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent mt-1"
+                    :class="sortDirection === 'desc' ? 'border-blue-600' : 'border-gray-300'"
+                    @click="$emit('sort', 'desc')"
+                />
+            </div>
+        </div>
+    `,
+    emits: ['sort'],
+}
+
+export const Default: Story = {
+    args: {
+        columns: mockColumns,
+        rows: mockRows,
+        rowTitlePath: 'data.Column 1',
+        rowIndexPath: 'index',
+        allowSelect: false,
+        allowRowIndex: true,
+        loading: false,
+        maxHeight: 462.5,
+    },
+}
+
+export const WithCustomMaxHeight: Story = {
+    args: {
+        ...Default.args,
+        maxHeight: 300,
+    },
+}
+
+export const WithCustomHeaders: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: args => ({
+        components: { TelaComplexTable, CustomHeaderCell },
+        setup() {
+            return {
+                args,
+                onSort: (column: string, direction: 'asc' | 'desc') => {
+                    console.log(`Sorting ${column} ${direction}`)
+                },
+            }
+        },
+        template: `
+            <TelaComplexTable v-bind="args">
+                <template #header-col1="{ column }">
+                    <CustomHeaderCell 
+                        :column="column"
+                        sort-direction="asc"
+                        @sort="direction => onSort(column.key, direction)"
+                    />
+                </template>
+                <template #leading-header>
+                    <div class="flex items-center px-4 h-56px w-full text-12-semibold">
+                        Leading Header
+                    </div>
+                </template>
+            </TelaComplexTable>
+        `,
+    }),
+}
+
+export const WithRowHover: Story = {
+    args: {
+        ...Default.args,
+        allowSelect: true,
+        allowRowIndex: true,
+        hoverMechanism: HoverMechanismTypes.Row,
+    },
+    render: args => ({
+        components: { TelaComplexTable },
+        setup() {
+            return {
+                args,
+                onHover: (rowData: any) => console.log('Hovering row:', rowData),
+            }
+        },
+        template: `
+            <TelaComplexTable 
+                v-bind="args"
+                @hover="onHover"
+            />
+        `,
+    }),
+}
+
+export const WithCustomCellContent: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: args => ({
+        components: { TelaComplexTable },
+        setup() {
+            return { args }
+        },
+        template: `
+            <TelaComplexTable v-bind="args">
+                <template #col1="{ rowData }">
+                    <div class="px-4 py-2 text-blue-600">
+                        Custom Cell: {{ rowData.data['Column 1'] }}
+                    </div>
+                </template>
+            </TelaComplexTable>
+        `,
+    }),
+}
+
+export const WithLeadingContent: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: args => ({
+        components: { TelaComplexTable },
+        setup() {
+            return { args }
+        },
+        template: `
+            <TelaComplexTable v-bind="args">
+                <template #leading="{ rowData, isLoading, rowTitle }">
+                    <td>
+                        <div class="px-4 py-2">
+                            {{ isLoading ? 'Loading...' : rowTitle }}
+                        </div>
+                    </td>
+                </template>
+            </TelaComplexTable>
+        `,
+    }),
+}
+
+export const LoadingState: Story = {
+    args: {
+        ...Default.args,
+        rows: [
+            {
+                id: '1',
+                index: 1,
+                status: 'loading',
+                name: 'Row 1',
+                data: {},
+            },
+            ...mockRows.slice(1),
+        ],
+    },
+}
+
+export const WithError: Story = {
+    args: {
+        ...Default.args,
+        rows: [
+            {
+                id: '1',
+                index: 1,
+                status: 'failed',
+                name: 'Row 1',
+                errorMessage: 'Something went wrong loading this row',
+                data: {},
+            },
+            ...mockRows.slice(1),
+        ],
+    },
+}
+
+export const WithInfiniteScroll: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: args => ({
+        components: { TelaComplexTable },
+        setup() {
+            return {
+                args,
+                onLoadMore: () => console.log('Loading more items...'),
+            }
+        },
+        template: `
+            <TelaComplexTable 
+                v-bind="args"
+                @load-more="onLoadMore"
+            >
+                <template #footer>
+                    <div class="px-4 text-gray-500">
+                        Loading more items...
+                    </div>
+                </template>
+            </TelaComplexTable>
+        `,
+    }),
+}
+
+export const WithRowOpenAction: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: args => ({
+        components: { TelaComplexTable },
+        setup() {
+            return {
+                args,
+                onOpen: (id: string) => console.log('Opening row:', id),
+            }
+        },
+        template: `
+            <TelaComplexTable 
+                v-bind="args"
+                @open="onOpen"
+            />
+        `,
+    }),
+}
+
+export const WithRowAction: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: args => ({
+        components: { TelaComplexTable },
+        setup() {
+            return { args }
+        },
+        template: `
+            <TelaComplexTable v-bind="args">
+                <template #row-action="{ row }">
+                    <button 
+                        class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
+                        @click="() => console.log('Action on row:', row.id)"
+                    >
+                        Action
+                    </button>
+                </template>
+            </TelaComplexTable>
+        `,
+    }),
+}
+
+export const Empty: Story = {
+    args: {
+        ...Default.args,
+        rows: [],
+    },
+    render: args => ({
+        components: { TelaComplexTable },
+        setup() {
+            return { args }
+        },
+        template: `
+            <TelaComplexTable v-bind="args">
+                <template #empty-state>
+                    <div class="text-gray-500">
+                        No data available
+                    </div>
+                </template>
+            </TelaComplexTable>
+        `,
+    }),
+}
+
+export const WithLastItem: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: args => ({
+        components: { TelaComplexTable },
+        setup() {
+            return { args }
+        },
+        template: `
+            <TelaComplexTable v-bind="args">
+                <template #footer>
+                    <div class="px-4 text-gray-500">
+                        End of list
+                    </div>
+                </template>
+            </TelaComplexTable>
+        `,
+    }),
+}