@meistrari/tela-build 1.3.0 → 1.4.0

package/components/tela/badge/badge.vue

@@ -22,7 +22,7 @@ const tag = computed(() => props.to ? NuxtLink : 'div')
         :class="cn(
             'inline-block px-[5px] rounded-[5px] select-none',
             variant === 'outline' && 'border-[0.5px] ring-border-strong',
-            variant === 'filled' && 'bg-lowered',
+            variant === 'filled' && 'bg-background-lowered',
             props.class,
         )"
     >

package/components/tela/button/button.vue

@@ -70,7 +70,6 @@ const variantStyle = computed(() => (({
 const resolvedStyle = computed(() => [
     sizeStyle.value,
     variantStyle.value,
-    '[corner-shape:superellipse(1.3)]',
 ].join(' '))
 
 const tag = computed(() => props.to ? NuxtLink : 'button')

package/components/tela/collapsible/CollapsibleContent.vue

@@ -21,10 +21,10 @@ function handleOpenAutoComplete() {
     <CollapsibleContent
         v-bind="props"
         data-collapsible-content
-        class="overflow-hidden collapsible-content h-full"
+        class="overflow-hidden collapsible-content"
         @animation-start="handleOpenAutoComplete"
     >
-        <div ref="containerEl" class="h-full">
+        <div ref="containerEl">
             <slot />
         </div>
     </CollapsibleContent>

package/components/tela/combobox/combobox-list.vue

@@ -10,8 +10,6 @@ import {
 } from 'reka-ui'
 import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
 
-import { cn } from '@/lib/utils'
-
 const props = withDefaults(
     defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'], hasAnimate?: boolean, disablePortal?: boolean }>(),
     {

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

@@ -2,9 +2,8 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import TelaComplexTableCell from './complex-table-cell.vue'
 
 const meta = {
-    title: 'Components/Tela/ComplexTableCell',
+    title: 'Components/ComplexTable/ComplexTableCell',
     component: TelaComplexTableCell,
-    tags: ['autodocs'],
     parameters: {
         layout: 'centered',
         docs: {

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

@@ -1,18 +1,19 @@
 <script lang="ts" setup>
-import { hasEmptyOrNull } from 'tela-shared/src/helpers/empty-or-null'
+import { hasEmptyOrNull } from '~/utils/empty-or-null'
 import type { Column, Row } from './types'
 import { hasError } from './utils'
-import { useI18n } from 'vue-i18n'
 
 defineOptions({
     name: 'TelaComplexTableCell',
 })
-const props = defineProps<{
+
+const props = withDefaults(defineProps<{
     column: Column
     row: Row
-}>()
-
-const { t } = useI18n()
+    itemsLabel?: string
+}>(), {
+    itemsLabel: 'items',
+})
 
 const content = computed(() => {
     const data = props.row.data ?? {}
@@ -37,7 +38,7 @@ const icon = computed(() => props.row.icons?.find(icon => icon?.key === props.co
                 {{ content }}
             </p>
             <p v-else line-clamp-2 flex items-center gap-4px text-nowrap>
-                <span>{{ content.length }} {{ t('common.items') }} </span>
+                <span>{{ content.length }} {{ itemsLabel }} </span>
                 <TelaIcon name="i-ph-sort-ascending" size="md" mr-2px shrink-0 />
             </p>
         </div>

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

@@ -2,9 +2,8 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import TelaComplexTableHeaderCell from './complex-table-header-cell.vue'
 
 const meta = {
-    title: 'Components/Tela/ComplexTableHeaderCell',
+    title: 'Components/ComplexTable/ComplexTableHeaderCell',
     component: TelaComplexTableHeaderCell,
-    tags: ['autodocs'],
     parameters: {
         layout: 'centered',
         docs: {

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

@@ -15,9 +15,8 @@ const sampleRows = [
 ]
 
 const meta = {
-    title: 'Components/Tela/ComplexTableHeader',
+    title: 'Components/ComplexTable/ComplexTableHeader',
     component: TelaComplexTableHeader,
-    tags: ['autodocs'],
     parameters: {
         layout: 'centered',
         docs: {

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

@@ -1,6 +1,4 @@
 <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'
@@ -17,13 +15,12 @@ const emit = defineEmits<{
     (event: 'loadMore'): void
     (event: 'open', id: string): void
     (event: 'scroll', scrollEvent: Event): void
+    (event: 'error', error: Error): void
 }>()
 
-const notification = useNotification()
 const slots = useSlots()
 
 const mainTableEl = ref<HTMLElement>()
-const containerEl = ref<HTMLElement>()
 
 // Use table composables
 const {
@@ -126,8 +123,8 @@ watch(() => virtualScroll?.range.value, async (newRange) => {
             }, 300)
         }
         catch (error) {
-            notification.error('Load More Failed', (error as Error).message)
             isLoadingMore.value = false
+            emit('error', error instanceof Error ? error : new Error(String(error)))
         }
     }
 }, { deep: true })
@@ -139,7 +136,7 @@ if (!virtualScroll) {
             emit('loadMore')
         }
         catch (error) {
-            notification.error('Load More Failed', (error as Error).message)
+            emit('error', error instanceof Error ? error : new Error(String(error)))
         }
     }, { distance: 100, direction: 'bottom' })
 }
@@ -183,7 +180,6 @@ watch([hasRowIndex, hasSelect, mainTableEl], () => {
 
 <template>
     <div
-        ref="containerEl"
         rounded-12px flex="~"
         b="0.5px gray-300"
         overflow-hidden

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

@@ -0,0 +1,490 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as ComplexTableStories from './complex-table.stories.ts';
+
+<Meta of={ComplexTableStories} />
+
+# TelaComplexTable
+
+A powerful and flexible table component with advanced features including column management, row selection, sorting, status indicators, custom cell rendering, hover interactions, and virtualized rendering for large datasets. Perfect for data-heavy applications requiring sophisticated table functionality.
+
+## Examples
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const columns = [
+  { title: 'Name', key: 'name', isDefault: false },
+  { title: 'Status', key: 'status', isDefault: false },
+  { title: 'Created', key: 'created', isDefault: true },
+]
+
+const rows = [
+  {
+    id: '1',
+    index: 1,
+    status: 'success',
+    name: 'Project Alpha',
+    data: {
+      name: 'Project Alpha',
+      status: 'Active',
+      created: '2024-01-15',
+    },
+  },
+  {
+    id: '2',
+    index: 2,
+    status: 'success',
+    name: 'Project Beta',
+    data: {
+      name: 'Project Beta',
+      status: 'Pending',
+      created: '2024-01-16',
+    },
+  },
+]
+</script>
+
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+    :allow-row-index="true"
+  />
+</template>
+```
+
+### With Row Selection
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const selectedRows = ref<string[]>([])
+const columns = [
+  { title: 'Name', key: 'name' },
+  { title: 'Status', key: 'status' },
+]
+
+const rows = [
+  {
+    id: '1',
+    index: 1,
+    status: 'success',
+    name: 'Item 1',
+    data: { name: 'Item 1', status: 'Active' },
+  },
+  {
+    id: '2',
+    index: 2,
+    status: 'success',
+    name: 'Item 2',
+    data: { name: 'Item 2', status: 'Pending' },
+  },
+]
+</script>
+
+<template>
+  <TelaComplexTable
+    v-model:selected-rows="selectedRows"
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+    :allow-select="true"
+    :allow-row-index="true"
+    @select="(ids, isAll) => console.log('Selected:', ids, isAll)"
+  />
+</template>
+```
+
+### With Custom Headers
+
+```vue
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+  >
+    <template #header-name="{ column }">
+      <div class="flex items-center gap-2 px-4 py-2">
+        <span class="font-medium">{{ column.title }}</span>
+        <button @click="sortByName">Sort</button>
+      </div>
+    </template>
+    
+    <template #leading-header>
+      <div class="flex items-center px-4 h-56px w-full">
+        Custom Leading Header
+      </div>
+    </template>
+  </TelaComplexTable>
+</template>
+```
+
+### With Custom Cell Content
+
+```vue
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+  >
+    <template #name="{ rowData }">
+      <div class="px-4 py-2 text-blue-600 font-semibold">
+        {{ rowData.data.name }}
+      </div>
+    </template>
+    
+    <template #status="{ rowData }">
+      <div class="px-4 py-2">
+        <span :class="getStatusClass(rowData.data.status)">
+          {{ rowData.data.status }}
+        </span>
+      </div>
+    </template>
+  </TelaComplexTable>
+</template>
+```
+
+### With Row Hover
+
+```vue
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+    hover-mechanism="row"
+    @open="(id) => console.log('Opening row:', id)"
+  />
+</template>
+```
+
+### With Loading States
+
+```vue
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+    :loading="true"
+  />
+</template>
+```
+
+### With Error States
+
+```vue
+<script setup>
+const rows = [
+  {
+    id: '1',
+    index: 1,
+    status: 'failed',
+    name: 'Failed Item',
+    errorMessage: 'Something went wrong loading this row',
+    data: {},
+  },
+  {
+    id: '2',
+    index: 2,
+    status: 'success',
+    name: 'Success Item',
+    data: { name: 'Success Item', status: 'Active' },
+  },
+]
+</script>
+
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+  />
+</template>
+```
+
+### With Infinite Scroll
+
+```vue
+<script setup>
+const handleLoadMore = async () => {
+  try {
+    // Load more data
+    await fetchMoreData()
+  }
+  catch (error) {
+    // Handle error - the component will also emit an @error event
+    console.error('Failed to load more items:', error)
+  }
+}
+
+const handleError = (error) => {
+  // Handle errors from loadMore operations
+  console.error('Load more error:', error)
+  // Show user notification, update UI, etc.
+}
+</script>
+
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+    @load-more="handleLoadMore"
+    @error="handleError"
+  >
+    <template #footer>
+      <div class="px-4 text-gray-500">
+        Loading more items...
+      </div>
+    </template>
+  </TelaComplexTable>
+</template>
+```
+
+### With Virtualization
+
+```vue
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+    :use-virtualization="true"
+    :virtualized-row-height="64"
+    :virtualized-overscan="5"
+    :virtualized-initial-batch-size="30"
+  />
+</template>
+```
+
+### With Row Actions
+
+```vue
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+  >
+    <template #row-action="{ row }">
+      <button
+        class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
+        @click="handleAction(row.id)"
+      >
+        Action
+      </button>
+    </template>
+  </TelaComplexTable>
+</template>
+```
+
+### With Custom Styling
+
+```vue
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+    :max-height="300"
+    header-class="bg-gray-50"
+    :row-class="(row) => row.status === 'success' ? 'bg-green-50' : ''"
+    columns-class="text-sm"
+  />
+</template>
+```
+
+### Empty State
+
+```vue
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="[]"
+    row-title-path="data.name"
+    row-index-path="index"
+  >
+    <template #empty-state>
+      <div class="text-gray-500">
+        No data available
+      </div>
+    </template>
+  </TelaComplexTable>
+</template>
+```
+
+### With Leading Content
+
+```vue
+<template>
+  <TelaComplexTable
+    :columns="columns"
+    :rows="rows"
+    row-title-path="data.name"
+    row-index-path="index"
+  >
+    <template #leading="{ rowData, isLoading, rowTitle }">
+      <td>
+        <div class="px-4 py-2">
+          {{ isLoading ? 'Loading...' : rowTitle }}
+        </div>
+      </td>
+    </template>
+  </TelaComplexTable>
+</template>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+interface Column {
+  key?: string
+  title: string
+  isDefault?: boolean
+  icon?: {
+    name: string
+    size?: string
+    style?: string
+  }
+  color?: string
+  style?: string
+  class?: string
+}
+
+interface Row {
+  id?: string
+  index?: number
+  status: string
+  name: string
+  errorMessage?: string
+  data: Record<string, unknown>
+  isLoading?: boolean
+  isNew?: boolean
+  icons?: {
+    key: string
+    type?: string
+    name: string
+    size?: string
+    style?: string
+  }[]
+  color?: string
+  style?: string
+}
+
+type ComplexTableProps = {
+  columns: Column[]
+  rows: Row[]
+  rowTitlePath: string
+  rowIndexPath: string
+  allowSelect?: boolean
+  allowRowIndex?: boolean
+  loading?: boolean
+  maxHeight?: number
+  hoverMechanism?: 'row' | 'cell'
+  disableRowClick?: (row: Row) => boolean
+  selectedRows?: string[]
+  columnsClass?: string
+  rowClass?: string | ((row: Row) => string)
+  rowIndexClass?: string
+  headerClass?: string
+  hideScrollbar?: boolean
+  hideError?: boolean
+  useVirtualization?: boolean
+  virtualizedOverscan?: number
+  virtualizedRowHeight?: number
+  virtualizedInitialBatchSize?: number
+}
+```
+
+## Slots
+
+- `leading` - Custom leading content for each row (receives `rowData`, `isLoading`, `rowTitle`, `rowEmit` as slot props)
+- `leading-header` - Custom leading header content
+- `header-{columnKey}` - Custom header for a specific column (receives `column` as slot prop)
+- `{columnKey}` - Custom cell content for a specific column (receives `rowData`, `isLoading`, `rowTitle`, `rowEmit` as slot props)
+- `row-action` - Custom action button/content for each row (receives `row` as slot prop)
+- `footer` - Footer content displayed at the bottom of the table
+- `empty-state` - Content displayed when there are no rows
+
+## Components
+
+The ComplexTable system consists of these sub-components:
+- `TelaComplexTable` - Main table component
+- `TelaComplexTableVirtualized` - Virtualized version for large datasets
+- `TelaComplexTableHeader` - Table header component
+- `TelaComplexTableRow` - Individual row component
+- `TelaComplexTableCell` - Default cell component
+- `TelaComplexTableHeaderCell` - Header cell component
+
+## Features
+
+- **Column Management**: Flexible column configuration with custom headers and cell rendering
+- **Row Selection**: Single and multi-select with select-all functionality
+- **Row Indexing**: Optional row numbering/indexing
+- **Hover Interactions**: Row-level or cell-level hover mechanisms
+- **Status Indicators**: Built-in support for loading, success, and error states
+- **Custom Rendering**: Slot-based customization for headers, cells, and rows
+- **Virtualization**: Automatic virtualization for large datasets with configurable options
+- **Infinite Scroll**: Built-in infinite scroll support for lazy loading
+- **Error Handling**: Display error messages for failed rows
+- **Empty States**: Customizable empty state when no data is available
+- **Sticky Headers**: Headers remain visible while scrolling
+- **Sticky Columns**: Select and index columns remain visible horizontally
+- **Custom Styling**: Flexible class and style customization
+- **Row Actions**: Optional action column for row-specific actions
+- **Footer Support**: Custom footer content
+- **Keyboard Navigation**: Full keyboard support for accessibility
+- **Responsive**: Adapts to different screen sizes
+
+## Events
+
+- `select` - Emitted when rows are selected/deselected with `(ids: string[], isAll: boolean)`
+- `loadMore` - Emitted when user scrolls near the bottom (for infinite scroll). **Important**: Parent components should handle errors in their `@load-more` handler. If the handler is async and throws an error, it should be caught within the handler itself. The component provides an `@error` event for error communication, but errors from async parent handlers won't be automatically caught.
+- `open` - Emitted when a row is clicked/opened with `(id: string)`
+- `scroll` - Emitted when table is scrolled with `(scrollEvent: Event)`
+- `error` - Emitted when an error occurs during loadMore operations with `(error: Error)`. Consumers should handle this event to display error notifications or update UI state. Note: This event is primarily for errors that occur within the component itself. For errors in async `@load-more` handlers, catch them within the handler and optionally emit them via a custom mechanism or handle them directly.
+
+## Hover Mechanisms
+
+- `row` - Entire row is hoverable and clickable
+- `cell` - Individual cells are hoverable and clickable (default)
+
+## Virtualization
+
+When `useVirtualization` is enabled, the table automatically switches to a virtualized rendering mode that only renders visible rows. This is ideal for large datasets (1000+ rows) to maintain performance.
+
+### Virtualization Props
+
+- `virtualizedRowHeight` - Height of each row in pixels (default: 64)
+- `virtualizedOverscan` - Number of rows to render outside the visible area (default: 5)
+- `virtualizedInitialBatchSize` - Initial number of rows to render (default: 30)
+
+## Accessibility
+
+- Semantic HTML table structure
+- Keyboard navigation support
+- ARIA attributes for screen readers
+- Focus management
+- Proper table headers and relationships
+

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

@@ -4,9 +4,8 @@ import TelaComplexTable from './complex-table.vue'
 import { HoverMechanismTypes } from './types'
 
 const meta = {
-    title: 'Components/Tela/ComplexTable',
+    title: 'Components/ComplexTable/ComplexTable',
     component: TelaComplexTable,
-    tags: ['autodocs'],
     parameters: {
         layout: 'centered',
         docs: {