@meistrari/tela-build 1.0.0

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { Column } from './types'
+
+defineOptions({
+    name: 'TelaComplexTableHeaderCell',
+})
+const props = defineProps<{
+    column?: Column
+    type?: 'default' | 'checkbox'
+    rows?: any[]
+    selectedRows?: any[]
+    tabSize?: 'sm' | 'md' | string
+}>()
+
+const emit = defineEmits(['selectAll'])
+
+function selectAll() {
+    emit('selectAll')
+}
+
+const size = computed(() => ({
+    md: 24,
+    sm: 12,
+})[props.tabSize ?? 'sm'] ?? props.tabSize)
+</script>
+
+<template>
+    <div
+        v-if="type === 'default' && column"
+        w-full
+        min-w-52px pr-12px text-start h-full flex items-center
+        bg-white whitespace-nowrap
+        body-12-medium gap-4px
+        :class="column.isDefault && 'text-gray-400 italic'"
+        border-b-0.5px border-gray-200
+        :style="{
+            color: column.color || '#71757B',
+            paddingLeft: `${size}px`,
+        }"
+    >
+        <TelaIcon v-if="column.icon" :name="column.icon.name" :size="column.icon.size" :style="column.icon.style" />
+        {{ column.title }}
+    </div>
+
+    <div v-else-if="type === 'checkbox' && rows" flex="~" justify-center h-full items-center bg-white z-2>
+        <TelaCheckbox :model-value="selectedRows?.length === rows.length" @update:model-value="selectAll" />
+    </div>
+</template>

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

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaComplexTableHeader from './complex-table-header.vue'
+import type { Column } from './types'
+
+const sampleColumns: Column[] = [
+    { key: 'name', title: 'Name' },
+    { key: 'email', title: 'Email' },
+    { key: 'role', title: 'Role' },
+]
+
+const sampleRows = [
+    { id: '1', status: 'active', name: 'Row 1', data: { name: 'John Doe', email: 'john@example.com', role: 'Admin' } },
+    { id: '2', status: 'active', name: 'Row 2', data: { name: 'Jane Smith', email: 'jane@example.com', role: 'User' } },
+    { id: '3', status: 'active', name: 'Row 3', data: { name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' } },
+]
+
+const meta = {
+    title: 'Components/Tela/ComplexTableHeader',
+    component: TelaComplexTableHeader,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A table header component for ComplexTable that displays column headers, selection controls, row actions, and index indicators. Supports customizable header rendering and table configuration options.',
+            },
+        },
+    },
+    argTypes: {
+        columns: {
+            control: 'object',
+            description: 'Array of column definitions to display in the header.',
+        },
+        rows: {
+            control: 'object',
+            description: 'Array of row data for header calculations.',
+        },
+        allowSelect: {
+            control: 'boolean',
+            description: 'Enable row selection checkbox in the header.',
+        },
+        allowRowIndex: {
+            control: 'boolean',
+            description: 'Show row index column in the header.',
+        },
+        allowRowAction: {
+            control: 'boolean',
+            description: 'Show row action column in the header.',
+        },
+    },
+    args: {
+        columns: sampleColumns,
+        rows: sampleRows,
+        allowSelect: true,
+        allowRowIndex: true,
+        allowRowAction: true,
+    },
+} satisfies Meta<typeof TelaComplexTableHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        rows: sampleRows,
+    },
+}
+
+export const WithoutRows: Story = {
+    args: {
+        rows: [],
+    },
+}
+
+export const WithoutRowAction: Story = {
+    args: {
+        allowRowAction: false,
+    },
+}
+
+export const CustomColumns: Story = {
+    args: {
+        columns: [
+            { key: 'id', title: 'ID' },
+            { key: 'status', title: 'Status' },
+            { key: 'date', title: 'Date' },
+        ],
+    },
+}

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { Column, Row } from './types'
+import TelaTableHeaderCell from './complex-table-header-cell.vue'
+
+defineOptions({
+    name: 'TelaComplexTableHeader',
+})
+
+defineProps<{
+    columns: Column[]
+    rows?: Row[]
+    selectedRows?: string[]
+    allowSelect?: boolean
+    allowRowIndex?: boolean
+    allowRowAction?: boolean
+    headerClass?: string
+}>()
+
+const emit = defineEmits(['selectAll'])
+</script>
+
+<template>
+    <thead>
+        <tr
+            body-12-medium text="gray-800" h-56px px-12px py-10px
+            bg-white :class="headerClass"
+        >
+            <th v-if="allowSelect && rows?.length" class="sticky left-0 top-0 bg-white h-56px z-12 w-32px p-0px" :class="headerClass">
+                <div flex="~" justify-center h-56px items-center bg-white z-2 border-b-0.5px border-gray-200 :class="headerClass">
+                    <TelaCheckbox v-if="rows.length" :model-value="selectedRows?.length === rows.length" @update:model-value="emit('selectAll', $event)" />
+                </div>
+            </th>
+            <th v-if="allowRowIndex" class="sticky top-0 h-56px bg-white z-12 p-0px" :style="{ left: (allowSelect && rows?.length) ? '32px' : '0', width: '48px', minWidth: '48px', maxWidth: '48px' }" :class="headerClass">
+                <TelaTableHeaderCell type="default" :column="{ title: 'ID' }" />
+            </th>
+            <slot name="leading-header" />
+            <th
+                v-for="column in columns"
+                :key="column.key"
+                z-11
+                sticky top-0px h-56px
+                p-0px
+                :class="headerClass"
+            >
+                <slot v-if="column.key && $slots[`header-${column.key}`] !== undefined" :name="`header-${column.key}`" :column="column" />
+                <TelaTableHeaderCell v-else :column="column" type="default" />
+            </th>
+            <th v-for="(_, idx) in (rows?.length ? 0 : 3)" :key="idx" sticky top-0px p-0px />
+            <th sticky top-0px z-10 w-full p-0px>
+                <div h-56px bg-white border-b-0.5px border-gray-200 rounded-tr-8px :class="headerClass" />
+            </th>
+            <th v-if="allowRowAction && rows?.length" sticky right-0px top-0px h-56px rounded-tr-8px p-0px :class="headerClass">
+                <div
+                    w-full h-56px rounded-tr-8px class="shadow"
+                    bg-white b="b-0.5px l-0.5px gray-200"
+                />
+            </th>
+        </tr>
+    </thead>
+</template>
+
+<style scoped>
+th {
+    padding: 0!important;
+}
+
+.sticky {
+    position: sticky !important;
+}
+</style>

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

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import type { Column, Row, HoverMechanism } from './types'
+import { HoverMechanismTypes } from './types'
+import TelaTableCell from './complex-table-cell.vue'
+import { isLoading, hasContent, hasError, getRowTitle, readRowPath } from './utils'
+
+const props = defineProps<{
+    row: Row
+    rowIndex: number
+    columns: Column[]
+    allowSelect?: boolean
+    allowRowIndex?: boolean
+    allowRowAction?: boolean
+    isSelected?: boolean
+    loading?: boolean
+    disableRowClick?: boolean
+    hoverMechanism?: HoverMechanism
+    hoveredRowIndex?: number | null
+    rowClass?: string | ((row: Row) => string)
+    rowIndexClass?: string
+    rowTitlePath?: string
+    rowIndexPath?: string
+    columnsClass?: string
+    isFirstRow?: boolean
+    isLastRow?: boolean
+    totalRows?: number
+    hideError?: boolean
+}>()
+
+const emit = defineEmits<{
+    select: [id: string]
+    open: [id: string]
+    hover: [index: number | null]
+}>()
+
+const slots = useSlots()
+
+const computedRowClass = computed(() => {
+    const classes = []
+
+    // Base classes
+    classes.push('bg-white')
+
+    // Border classes
+    if (props.isFirstRow && props.totalRows && props.totalRows > 1) {
+        classes.push('b-b-0.5px b-t-0px b-gray-200!')
+    }
+    if (props.rowIndex % 2 !== 0 && props.rowIndex > 0) {
+        classes.push('b-y-0.5px b-gray-200!')
+    }
+    if (props.isLastRow) {
+        classes.push('b-b-0px!')
+    }
+
+    // Hover classes
+    if (props.hoverMechanism === HoverMechanismTypes.Row) {
+        classes.push('cursor-pointer')
+        if (props.hoveredRowIndex === props.rowIndex) {
+            classes.push('bg-gray-50!')
+        }
+    }
+
+    // Custom row class
+    if (typeof props.rowClass === 'function') {
+        classes.push(props.rowClass(props.row))
+    }
+    else if (props.rowClass) {
+        classes.push(props.rowClass)
+    }
+
+    return classes
+})
+
+function handleRowClick() {
+    if (shouldEnableRowClick() && props.row.id) {
+        emit('open', props.row.id)
+    }
+}
+
+function shouldEnableRowClick() {
+    return props.hoverMechanism === HoverMechanismTypes.Row && !props.disableRowClick
+}
+
+function handleCheckboxChange() {
+    if (props.row.id) {
+        emit('select', props.row.id)
+    }
+}
+</script>
+
+<template>
+    <tr
+        h-64px
+        :class="computedRowClass"
+        @mouseenter="emit('hover', rowIndex)"
+        @mouseleave="emit('hover', null)"
+        @click.stop="handleRowClick"
+    >
+        <td v-if="allowSelect" class="sticky left-0 bg-white z-9" @click.stop>
+            <div
+                flex="~" h-px items-center justify-center w-32px relative z-0
+            >
+                <TelaCheckbox
+                    :model-value="isSelected || false"
+                    @update:model-value="handleCheckboxChange"
+                />
+            </div>
+        </td>
+
+        <td v-if="allowRowIndex" class="sticky bg-white z-10" :style="{ left: allowSelect ? '32px' : '0', width: '48px', minWidth: '48px', maxWidth: '48px' }">
+            <div
+                h-64px flex="~" items-center pl-12px body-12-medium text-gray-600
+                :class="rowClass"
+                :style="{ width: '48px', minWidth: '48px', maxWidth: '48px' }"
+            >
+                <div v-if="!row.id" flex="~ col" w-full h-64px justify-center :class="rowClass">
+                    <TelaSkeleton h-16px rounded="2px" w="18px" bg="#E9ECEF" />
+                </div>
+                <span v-else>
+                    {{ readRowPath(row, rowIndexPath || '') }}
+                </span>
+            </div>
+        </td>
+
+        <slot
+            name="leading"
+            :row-data="row"
+            :is-loading="isLoading(row, loading || false)"
+            :row-title="getRowTitle(row, rowTitlePath || '')"
+            :row-emit="emit"
+        />
+
+        <td v-if="hasError(row)" :colspan="columns.length">
+            <div v-if="!hideError" flex="~ row" items-center py-12px pl-12px h-64px b="gray-200" :class="rowClass">
+                <span z-1 body-14-medium class="text-[#BE2741]">
+                    {{ $t('common.error') }}
+                </span>
+                <span v-if="row.errorMessage" line-clamp-2 body-14-medium class="text-[#BE2741]">
+                    : {{ row.errorMessage }}
+                </span>
+            </div>
+        </td>
+
+        <td
+            v-for="(column, columnIdx) in columns"
+            v-else
+            :key="columnIdx"
+        >
+            <div v-if="isLoading(row, loading || false)" flex="~ col" gap-4px pl-12px h-64px justify-center :class="rowClass">
+                <TelaSkeleton w="70%" h-8px />
+            </div>
+            <template v-else>
+                <slot
+                    v-if="column.key && slots[column.key]"
+                    :name="column.key"
+                    :row-data="row"
+                    :is-loading="isLoading(row, loading || false)"
+                    :row-title="getRowTitle(row, rowTitlePath || '')"
+                    :row-emit="emit"
+                />
+                <div v-else flex items-center h-64px :class="[columnsClass, rowClass]">
+                    <button
+                        flex items-center z-8 h-full w-full rounded-8px
+                        :class="[
+                            hoverMechanism === HoverMechanismTypes.Cell
+                                && 'box-border focus:outline-none',
+                            hoverMechanism === HoverMechanismTypes.Cell
+                                && !isLoading(row, loading || false)
+                                && hasContent(row, column)
+                                && 'cursor-pointer b-x-2px b-y-2px b-transparent hover:b-gray-800',
+                        ]"
+                        @click="!isLoading(row, loading || false) && hasContent(row, column) && emit('open', row.id as string)"
+                    >
+                        <TelaTableCell :column="column" :row="row" />
+                    </button>
+                </div>
+            </template>
+        </td>
+
+        <td z-0>
+            <div z-0 h-64px :class="rowClass" />
+        </td>
+
+        <td v-if="slots['row-action']" sticky h-64px right-0px z-10 colspan="1" :class="rowClass">
+            <div
+                flex="~" bg-white w-90px h-64px items-center justify-center h-full px-12px
+                b="l-0.5px gray-200"
+                class="shadow"
+                :class="[
+                    totalRows === 1 && 'b-b-0px!',
+                    isLastRow && 'b-b-0.5px! b-gray-200',
+                    rowClass,
+                ]"
+            >
+                <slot name="row-action" :row="row" />
+            </div>
+        </td>
+    </tr>
+</template>