@meistrari/tela-build 1.0.0

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

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, nextTick, defineProps, defineEmits, defineAsyncComponent } from 'vue'
+import { useNotification } from '../../../../application/composables/notification'
+import type { Column, 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 './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
+}>()
+
+// Lazy load virtualized version for better performance
+const TelaComplexTableVirtualized = defineAsyncComponent(() => import('./complex-table-virtualized.vue'))
+
+// Auto-enable virtualization for large datasets
+const shouldUseVirtualization = computed(() => {
+    return props.useVirtualization === true
+})
+
+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)
+
+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)
+})
+
+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>
+    <!-- Use virtualized version for large datasets -->
+    <TelaComplexTableVirtualized
+        v-if="shouldUseVirtualization"
+        v-bind="props"
+        @select="(ids: string[], isAll: boolean) => emit('select', ids, isAll)"
+        @load-more="emit('loadMore')"
+        @open="(id: string) => emit('open', id)"
+        @scroll="(e: Event) => emit('scroll', e)"
+    >
+        <template v-for="(_, slot) in $slots" #[slot]="slotProps">
+            <slot :name="slot" v-bind="slotProps" />
+        </template>
+    </TelaComplexTableVirtualized>
+
+    <!-- Non-virtualized version for small datasets -->
+    <div
+        v-else
+        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" relative
+            :class="{ 'hide-scrollbar': shouldHideScrollbar, 'overflow-x-scroll': rows.length > 0 }"
+            :style="{ maxHeight: `${props.maxHeight || 462.5}px` }"
+            @scroll="handleScroll"
+        >
+            <table z-2>
+                <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">
+                    <TelaTableRow
+                        v-for="(rowData, idx) in rows"
+                        :key="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="$slots.footer" 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>

package/components/tela/complex-table/composables/table-common.ts

@@ -0,0 +1,93 @@
+import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
+import type { HoverMechanism, Row } from '../types'
+import { HoverMechanismTypes } from '../types'
+
+export interface UseTableCommonOptions {
+    props: {
+        hoverMechanism?: HoverMechanism
+        disableRowClick?: (row: Row) => boolean
+        selectedRows?: string[]
+        rows: Row[]
+    }
+    emit: {
+        (event: 'select', ids: string[], isAll: boolean): void
+        (event: 'scroll', scrollEvent: Event): void
+    }
+    mainTableEl: Ref<HTMLElement | undefined>
+    selectedRows: Ref<string[]>
+    isAllSelected: Ref<boolean>
+    selectAll: (value: boolean) => string[]
+    toggleRow: (id: string) => string[]
+}
+
+export function useTableCommon(options: UseTableCommonOptions) {
+    const { props, emit, mainTableEl, selectedRows, isAllSelected, selectAll, toggleRow } = options
+
+    const hoveredRowIndex = ref<number | null>(null)
+    const hasHorizontalScroll = ref(false)
+
+    function shouldEnableRowClick(rowData: Row) {
+        return props.hoverMechanism === HoverMechanismTypes.Row && !props.disableRowClick?.(rowData)
+    }
+
+    function handleRowSelect(rowId: string) {
+        if (props.selectedRows) {
+            const newSelection = selectedRows.value.includes(rowId)
+                ? selectedRows.value.filter((id: string) => id !== rowId)
+                : [...selectedRows.value, rowId]
+            emit('select', newSelection, newSelection.length === props.rows.length)
+            return
+        }
+
+        const newSelection = toggleRow(rowId)
+        emit('select', newSelection, isAllSelected.value)
+    }
+
+    function handleSelectAllRows(value: boolean) {
+        if (props.selectedRows) {
+            const newSelection = value ? props.rows.map((row: Row) => row?.id || '').filter(Boolean) : []
+            emit('select', newSelection, value)
+            return
+        }
+
+        const newSelection = selectAll(value)
+        emit('select', newSelection, value)
+    }
+
+    function handleScroll(scrollEvent: Event) {
+        emit('scroll', scrollEvent)
+    }
+
+    function updateScrollButtonsState() {
+        if (!mainTableEl.value)
+            return
+
+        const el = mainTableEl.value
+        const hasHorizontalScrollValue = el.scrollWidth > el.clientWidth
+        hasHorizontalScroll.value = hasHorizontalScrollValue
+        el.classList.toggle('has-scroll', hasHorizontalScrollValue)
+    }
+
+    function handleRowHover(index: number | null) {
+        hoveredRowIndex.value = index
+    }
+
+    // Watch for row changes to maintain selection state
+    watch(() => props.rows, () => {
+        if (isAllSelected.value && !props.selectedRows) {
+            selectAll(true)
+        }
+    }, { deep: true })
+
+    return {
+        hoveredRowIndex,
+        hasHorizontalScroll,
+        shouldEnableRowClick,
+        updateScrollButtonsState,
+        handleRowSelect,
+        handleSelectAllRows,
+        handleScroll,
+        handleRowHover,
+    }
+}

package/components/tela/complex-table/composables/table-selection.ts

@@ -0,0 +1,87 @@
+import type { Ref, ComputedRef } from 'vue'
+import { ref, computed } from 'vue'
+
+export interface UseTableSelectionOptions {
+    rows: Ref<Array<{ id?: string }>> | Array<{ id?: string }>
+    initialSelectedRows?: string[]
+}
+
+export function useTableSelection(options: UseTableSelectionOptions) {
+    const rows = ref(options.rows)
+    const selectedRows = ref<string[]>(options.initialSelectedRows || [])
+
+    const selectableRows = computed(() => {
+        const rowsArray = Array.isArray(rows.value) ? rows.value : rows.value
+        return rowsArray.filter(row => row.id)
+    })
+
+    const isAllSelected = computed(() => {
+        if (selectableRows.value.length === 0)
+            return false
+        return selectedRows.value.length === selectableRows.value.length
+    })
+
+    const isSomeSelected = computed(() => {
+        return selectedRows.value.length > 0 && selectedRows.value.length < selectableRows.value.length
+    })
+
+    function selectAll(value: boolean) {
+        if (value) {
+            selectedRows.value = selectableRows.value.map(row => row.id!).filter(Boolean)
+        }
+        else {
+            selectedRows.value = []
+        }
+        return selectedRows.value
+    }
+
+    function toggleRow(id: string) {
+        const index = selectedRows.value.indexOf(id)
+        if (index > -1) {
+            selectedRows.value.splice(index, 1)
+        }
+        else {
+            selectedRows.value.push(id)
+        }
+        return selectedRows.value
+    }
+
+    function selectRow(id: string) {
+        if (!selectedRows.value.includes(id)) {
+            selectedRows.value.push(id)
+        }
+    }
+
+    function deselectRow(id: string) {
+        const index = selectedRows.value.indexOf(id)
+        if (index > -1) {
+            selectedRows.value.splice(index, 1)
+        }
+    }
+
+    function setSelectedRows(ids: string[]) {
+        selectedRows.value = ids
+    }
+
+    function clearSelection() {
+        selectedRows.value = []
+    }
+
+    function isRowSelected(id: string): boolean {
+        return selectedRows.value.includes(id)
+    }
+
+    return {
+        selectedRows,
+        isAllSelected,
+        isSomeSelected,
+        selectAll,
+        toggleRow,
+        selectRow,
+        deselectRow,
+        setSelectedRows,
+        clearSelection,
+        isRowSelected,
+        selectableRows: selectableRows as ComputedRef<Array<{ id?: string }>>,
+    }
+}

package/components/tela/complex-table/composables/virtual-scroll.ts

@@ -0,0 +1,252 @@
+import type { Ref } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
+
+export interface VirtualItem {
+    index: number
+    start: number
+    end: number
+    size: number
+    key: string | number
+}
+
+export interface UseVirtualScrollOptions {
+    count: number | Ref<number>
+    getScrollElement: () => HTMLElement | null
+    estimateSize?: number | ((index: number) => number)
+    overscan?: number
+    horizontal?: boolean
+    paddingStart?: number
+    paddingEnd?: number
+    initialBatchSize?: number
+}
+
+export interface VirtualRange {
+    startIndex: number
+    endIndex: number
+    startOffset: number
+    endOffset: number
+}
+
+export function useVirtualScroll(options: UseVirtualScrollOptions) {
+    const count = ref(options.count)
+    const scrollElement = ref<HTMLElement | null>(null)
+    const scrollTop = ref(0)
+    const scrollLeft = ref(0)
+    const clientHeight = ref(0)
+    const clientWidth = ref(0)
+    const itemSizeCache = new Map<number, number>()
+
+    const estimateSize = options.estimateSize ?? 64
+    const overscan = options.overscan ?? 5
+    const horizontal = options.horizontal ?? false
+    const paddingStart = options.paddingStart ?? 0
+    const paddingEnd = options.paddingEnd ?? 0
+    const initialBatchSize = options.initialBatchSize ?? 30
+
+    const scrollOffset = computed(() => horizontal ? scrollLeft.value : scrollTop.value)
+    const viewportSize = computed(() => horizontal ? clientWidth.value : clientHeight.value)
+
+    function getItemSize(index: number): number {
+        if (itemSizeCache.has(index)) {
+            return itemSizeCache.get(index)!
+        }
+        const size = typeof estimateSize === 'function' ? estimateSize(index) : estimateSize
+        itemSizeCache.set(index, size)
+        return size
+    }
+
+    function getItemOffset(index: number): number {
+        let offset = paddingStart
+        for (let i = 0; i < index; i++) {
+            offset += getItemSize(i)
+        }
+        return offset
+    }
+
+    const getTotalSize = computed(() => {
+        let totalSize = paddingStart + paddingEnd
+        const itemCount = typeof count.value === 'number' ? count.value : count.value
+        for (let i = 0; i < itemCount; i++) {
+            totalSize += getItemSize(i)
+        }
+        return totalSize
+    })
+
+    const range = computed((): VirtualRange => {
+        const itemCount = typeof count.value === 'number' ? count.value : count.value
+        if (itemCount === 0) {
+            return {
+                startIndex: 0,
+                endIndex: 0,
+                startOffset: 0,
+                endOffset: 0,
+            }
+        }
+
+        // If viewport size is not yet calculated, render initial batch
+        if (viewportSize.value === 0) {
+            const endIndex = Math.min(initialBatchSize - 1, itemCount - 1)
+            return {
+                startIndex: 0,
+                endIndex,
+                startOffset: 0,
+                endOffset: getItemOffset(endIndex + 1),
+            }
+        }
+
+        let startIndex = 0
+        let accumulatedSize = paddingStart
+
+        // Find start index
+        for (let i = 0; i < itemCount; i++) {
+            const itemSize = getItemSize(i)
+            if (accumulatedSize + itemSize >= scrollOffset.value) {
+                startIndex = Math.max(0, i - overscan)
+                break
+            }
+            accumulatedSize += itemSize
+        }
+
+        // Find end index
+        let endIndex = startIndex
+        accumulatedSize = getItemOffset(startIndex)
+
+        for (let i = startIndex; i < itemCount; i++) {
+            if (accumulatedSize > scrollOffset.value + viewportSize.value) {
+                endIndex = i
+                break
+            }
+            accumulatedSize += getItemSize(i)
+            endIndex = i
+        }
+
+        // Apply overscan only once at the end
+        endIndex = Math.min(itemCount - 1, endIndex + overscan)
+
+        return {
+            startIndex,
+            endIndex,
+            startOffset: getItemOffset(startIndex),
+            endOffset: getItemOffset(Math.min(itemCount, endIndex + 1)),
+        }
+    })
+
+    const virtualItems = computed((): VirtualItem[] => {
+        const { startIndex, endIndex } = range.value
+        const items: VirtualItem[] = []
+
+        for (let i = startIndex; i <= endIndex; i++) {
+            const start = getItemOffset(i)
+            const size = getItemSize(i)
+            items.push({
+                index: i,
+                start,
+                end: start + size,
+                size,
+                key: i,
+            })
+        }
+
+        return items
+    })
+
+    function measureElement(index: number, element: HTMLElement) {
+        const size = horizontal
+            ? element.getBoundingClientRect().width
+            : element.getBoundingClientRect().height
+
+        const cachedSize = itemSizeCache.get(index)
+        if (cachedSize !== size) {
+            itemSizeCache.set(index, size)
+        }
+    }
+
+    function handleScroll() {
+        const el = options.getScrollElement()
+        if (!el)
+            return
+
+        scrollTop.value = el.scrollTop
+        scrollLeft.value = el.scrollLeft
+        clientHeight.value = el.clientHeight
+        clientWidth.value = el.clientWidth
+    }
+
+    function scrollToIndex(index: number, align: 'start' | 'center' | 'end' = 'start') {
+        const el = options.getScrollElement()
+        if (!el)
+            return
+
+        const offset = getItemOffset(index)
+        const size = getItemSize(index)
+
+        let scrollPosition = offset
+
+        if (align === 'center') {
+            scrollPosition = offset - (viewportSize.value - size) / 2
+        }
+        else if (align === 'end') {
+            scrollPosition = offset - viewportSize.value + size
+        }
+
+        if (horizontal) {
+            el.scrollLeft = scrollPosition
+        }
+        else {
+            el.scrollTop = scrollPosition
+        }
+    }
+
+    function scrollToOffset(offset: number) {
+        const el = options.getScrollElement()
+        if (!el)
+            return
+
+        if (horizontal) {
+            el.scrollLeft = offset
+        }
+        else {
+            el.scrollTop = offset
+        }
+    }
+
+    // Initialize and setup listeners
+    function init() {
+        scrollElement.value = options.getScrollElement()
+        if (!scrollElement.value)
+            return
+
+        handleScroll()
+        scrollElement.value.addEventListener('scroll', handleScroll, { passive: true })
+    }
+
+    function destroy() {
+        if (scrollElement.value) {
+            scrollElement.value.removeEventListener('scroll', handleScroll)
+        }
+    }
+
+    // Watch for count changes
+    watch(() => options.count, (newCount) => {
+        count.value = newCount
+        itemSizeCache.clear()
+    })
+
+    // Auto-init on mount
+    nextTick(() => {
+        init()
+    })
+
+    return {
+        virtualItems,
+        totalSize: getTotalSize,
+        range,
+        scrollToIndex,
+        scrollToOffset,
+        measureElement,
+        init,
+        destroy,
+        getVirtualItems: () => virtualItems.value,
+        getTotalSize: () => getTotalSize.value,
+    }
+}