@sakoa/ui 0.1.0

package/registry/source/components/ui/table/STableRow.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+/**
+ * STableRow - Table row component with selection and expansion support
+ */
+import { inject, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDataTableContextKey } from './index'
+
+interface Props {
+  /** Unique row key */
+  rowKey?: string | number
+  /** Override hoverable state */
+  hoverable?: boolean
+  /** Custom row class */
+  rowClass?: string
+  /** Striped index (for striped variant) */
+  index?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rowKey: undefined,
+  hoverable: undefined,
+  rowClass: '',
+  index: 0
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+  dblclick: [event: MouseEvent]
+}>()
+
+defineOptions({ inheritAttrs: false })
+
+const context = inject(SDataTableContextKey)
+
+const isHoverable = computed(() => {
+  if (props.hoverable !== undefined) return props.hoverable
+  return context?.hoverable ?? true
+})
+
+const isSelected = computed(() => {
+  if (!props.rowKey || !context) return false
+  return context.isRowSelected(props.rowKey)
+})
+
+const isExpanded = computed(() => {
+  if (!props.rowKey || !context) return false
+  return context.isRowExpanded(props.rowKey)
+})
+
+const rowClasses = computed(() => {
+  return [
+    's-table-row',
+    props.rowClass,
+    {
+      's-table-row-hoverable': isHoverable.value,
+      's-table-row-selected': isSelected.value,
+      's-table-row-expanded': isExpanded.value,
+      's-table-row-even': props.index % 2 === 1 && context?.variant === 'striped'
+    }
+  ]
+})
+
+const handleClick = (event: MouseEvent) => {
+  emit('click', event)
+}
+
+const handleDblClick = (event: MouseEvent) => {
+  emit('dblclick', event)
+}
+</script>
+
+<template>
+  <tr
+    v-bind="$attrs"
+    :class="cn(rowClasses, $attrs.class ?? '')"
+    :data-row-key="rowKey"
+    :aria-selected="context?.selectionMode !== 'none' ? isSelected : undefined"
+    @click="handleClick"
+    @dblclick="handleDblClick"
+  >
+    <slot />
+  </tr>
+</template>
+
+<style scoped>
+.s-table-row {
+  border-bottom: 1px solid var(--s-border);
+}
+
+.s-table-row-hoverable {
+  transition: background-color 0.15s ease;
+}
+
+.s-table-row-hoverable:hover {
+  background-color: var(--s-accent);
+}
+
+.s-table-row-selected {
+  background-color: color-mix(in srgb, var(--s-primary) 15%, transparent) !important;
+}
+
+.s-table-row-even {
+  background-color: var(--s-muted);
+}
+</style>

package/registry/source/components/ui/table/STableSkeleton.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+/**
+ * STableSkeleton - Skeleton loading state for tables
+ * 
+ * Features:
+ * - Configurable row count
+ * - Column-aware skeleton widths
+ * - Shimmer animation
+ * - Respects prefers-reduced-motion
+ */
+import { inject, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDataTableContextKey } from './index'
+
+interface Props {
+  /** Number of skeleton rows to show */
+  rows?: number
+  /** Number of columns (auto-detected from context if available) */
+  columns?: number
+  /** Show selection column */
+  showSelection?: boolean
+  /** Show actions column */
+  showActions?: boolean
+  /** Custom class for skeleton rows */
+  skeletonClass?: string
+  /** Animation style */
+  animation?: 'shimmer' | 'pulse' | 'none'
+  /** Progressive loading - stagger row appearance */
+  progressive?: boolean
+  /** Delay between progressive rows (ms) */
+  progressiveDelay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rows: 5,
+  columns: undefined,
+  showSelection: false,
+  showActions: false,
+  skeletonClass: '',
+  animation: 'shimmer',
+  progressive: false,
+  progressiveDelay: 100
+})
+
+defineOptions({ inheritAttrs: false })
+
+const context = inject(SDataTableContextKey)
+
+const columnCount = computed(() => {
+  if (props.columns !== undefined) return props.columns
+  if (context) return context.visibleColumns.value.length
+  return 4
+})
+
+const hasSelection = computed(() => {
+  if (props.showSelection) return true
+  return context?.selectionMode !== 'none'
+})
+
+// Generate random widths for more realistic skeleton
+const generateWidths = (count: number): string[] => {
+  return Array.from({ length: count }, () => `${40 + Math.random() * 50}%`)
+}
+
+const rowWidths = computed(() => {
+  return Array.from({ length: props.rows }, () => generateWidths(columnCount.value))
+})
+
+// Animation class
+const animationClass = computed(() => {
+  const classes: Record<string, string> = {
+    shimmer: 's-skeleton-shimmer',
+    pulse: 's-skeleton-pulse',
+    none: ''
+  }
+  return classes[props.animation]
+})
+</script>
+
+<template>
+  <tbody v-bind="$attrs" :class="cn('s-table-skeleton-body', $attrs.class ?? '')">
+    <tr
+      v-for="(widths, rowIndex) in rowWidths"
+      :key="`skeleton-row-${rowIndex}`"
+      class="s-table-row s-table-row-skeleton"
+      :class="skeletonClass"
+      :style="progressive ? { animationDelay: `${rowIndex * progressiveDelay}ms` } : {}"
+    >
+      <!-- Selection skeleton -->
+      <td v-if="hasSelection" class="s-table-td s-table-td-skeleton-select">
+        <div :class="['s-skeleton s-skeleton-checkbox', animationClass]" />
+      </td>
+      
+      <!-- Data cells -->
+      <td
+        v-for="(width, colIndex) in widths"
+        :key="`skeleton-cell-${rowIndex}-${colIndex}`"
+        class="s-table-td"
+      >
+        <div 
+          :class="['s-skeleton', animationClass]" 
+          :style="{ width }"
+        />
+      </td>
+      
+      <!-- Actions skeleton -->
+      <td v-if="showActions" class="s-table-td s-table-td-skeleton-actions">
+        <div class="flex gap-2">
+          <div :class="['s-skeleton s-skeleton-action', animationClass]" />
+          <div :class="['s-skeleton s-skeleton-action', animationClass]" />
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<style scoped>
+.s-table-row-skeleton {
+  pointer-events: none;
+}
+
+.s-table-td {
+  padding: 0.75rem 1rem;
+}
+
+/* Base skeleton */
+.s-skeleton {
+  height: 1rem;
+  border-radius: 0.25rem;
+  background-color: var(--s-accent);
+}
+
+.s-skeleton-checkbox {
+  width: 1rem;
+  height: 1rem;
+}
+
+.s-skeleton-action {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.375rem;
+}
+
+/* Shimmer animation */
+.s-skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--s-accent) 25%,
+    var(--s-muted) 50%,
+    var(--s-accent) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s infinite;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Pulse animation */
+.s-skeleton-pulse {
+  animation: skeleton-pulse 2s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Progressive loading animation */
+@keyframes skeleton-row-appear {
+  0% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.s-table-row-skeleton {
+  animation: skeleton-row-appear 0.3s ease-out forwards;
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .s-skeleton-shimmer,
+  .s-skeleton-pulse {
+    animation: none;
+    background: var(--s-accent);
+  }
+  
+  .s-table-row-skeleton {
+    animation: none;
+    opacity: 1;
+  }
+}
+</style>

package/registry/source/components/ui/table/index.ts

@@ -0,0 +1,126 @@
+import type { InjectionKey, Ref, ComputedRef } from 'vue'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/** Table design variants */
+export type TableVariant = 'default' | 'compact' | 'bordered' | 'striped' | 'minimal'
+
+/** Table size presets */
+export type TableSize = 'sm' | 'md' | 'lg'
+
+/** Sort direction */
+export type SortDirection = 'asc' | 'desc' | null
+
+/** Column alignment */
+export type ColumnAlign = 'left' | 'center' | 'right'
+
+/** Selection mode */
+export type SelectionMode = 'none' | 'single' | 'multiple'
+
+/** Column definition */
+export interface TableColumn<T = unknown> {
+  /** Unique key for the column */
+  key: string
+  /** Display label for header */
+  label?: string
+  /** Data accessor - can be a key of T or a function */
+  accessor?: keyof T | ((row: T, index: number) => unknown)
+  /** Column width (CSS value) */
+  width?: string
+  /** Minimum width */
+  minWidth?: string
+  /** Maximum width */
+  maxWidth?: string
+  /** Text alignment */
+  align?: ColumnAlign
+  /** Whether column is sortable */
+  sortable?: boolean
+  /** Custom sort function */
+  sortFn?: (a: T, b: T, direction: SortDirection) => number
+  /** Whether column is visible */
+  visible?: boolean
+  /** Sticky column position */
+  sticky?: 'left' | 'right'
+  /** Custom header class */
+  headerClass?: string
+  /** Custom cell class */
+  cellClass?: string
+  /** Render priority for responsive hiding */
+  priority?: number
+}
+
+/** Sort state */
+export interface SortState {
+  column: string | null
+  direction: SortDirection
+}
+
+/** Pagination state */
+export interface PaginationState {
+  page: number
+  pageSize: number
+  total: number
+}
+
+/** Row data with meta */
+export interface TableRowData<T = unknown> {
+  data: T
+  index: number
+  originalIndex: number
+  selected: boolean
+  expanded: boolean
+}
+
+/** Context provided to table children */
+export interface SDataTableContext<T = unknown> {
+  // Config
+  variant: TableVariant
+  size: TableSize
+  selectionMode: SelectionMode
+  loading: Ref<boolean>
+  hoverable: boolean
+  stickyHeader: boolean
+  animateRows: boolean
+  
+  // State
+  columns: Ref<TableColumn<T>[]>
+  visibleColumns: ComputedRef<TableColumn<T>[]>
+  sortState: Ref<SortState>
+  selectedKeys: Ref<Set<string | number>>
+  expandedKeys: Ref<Set<string | number>>
+  
+  // Methods
+  getRowKey: (row: T, index: number) => string | number
+  toggleSort: (column: string) => void
+  toggleRowSelection: (key: string | number) => void
+  toggleAllSelection: () => void
+  toggleRowExpansion: (key: string | number) => void
+  isRowSelected: (key: string | number) => boolean
+  isRowExpanded: (key: string | number) => boolean
+  isAllSelected: ComputedRef<boolean>
+  isSomeSelected: ComputedRef<boolean>
+  
+  // Column management
+  showColumn: (key: string) => void
+  hideColumn: (key: string) => void
+  toggleColumn: (key: string) => void
+}
+
+// Injection key
+export const SDataTableContextKey: InjectionKey<SDataTableContext> = Symbol('SDataTableContext')
+
+// ============================================================================
+// Re-exports
+// ============================================================================
+
+export { default as SDataTable } from './SDataTable.vue'
+export { default as STableHeader } from './STableHeader.vue'
+export { default as STableBody } from './STableBody.vue'
+export { default as STableRow } from './STableRow.vue'
+export { default as STableCell } from './STableCell.vue'
+export { default as STableColumn } from './STableColumn.vue'
+export { default as STableSkeleton } from './STableSkeleton.vue'
+export { default as STableEmpty } from './STableEmpty.vue'
+export { useDataTable } from './useDataTable'