@sakoa/ui 0.1.0

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+/**
+ * STableBody - Table body wrapper with animation support
+ */
+import { inject, computed } from 'vue'
+import { SDataTableContextKey } from './index'
+
+interface Props {
+  /** Enable row animations */
+  animate?: boolean
+  /** Custom class for tbody */
+  bodyClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  animate: undefined,
+  bodyClass: ''
+})
+
+defineOptions({ inheritAttrs: false })
+
+const context = inject(SDataTableContextKey)
+
+const shouldAnimate = computed(() => {
+  if (props.animate !== undefined) return props.animate
+  return context?.animateRows ?? true
+})
+
+const prefersReducedMotion = typeof window !== 'undefined' 
+  ? window.matchMedia('(prefers-reduced-motion: reduce)').matches 
+  : false
+</script>
+
+<template>
+  <TransitionGroup
+    v-if="shouldAnimate && !prefersReducedMotion"
+    v-bind="$attrs"
+    name="s-table-row"
+    tag="tbody"
+    :class="['s-table-body', bodyClass]"
+  >
+    <slot />
+  </TransitionGroup>
+  
+  <tbody v-else v-bind="$attrs" :class="['s-table-body', bodyClass]">
+    <slot />
+  </tbody>
+</template>
+
+<style scoped>
+/* Row Animation */
+.s-table-row-enter-active,
+.s-table-row-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.s-table-row-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.s-table-row-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.s-table-row-move {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>

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

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+/**
+ * STableCell - Table cell component
+ */
+import { inject, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDataTableContextKey, type ColumnAlign } from './index'
+
+interface Props {
+  /** Cell alignment */
+  align?: ColumnAlign
+  /** Custom cell class */
+  cellClass?: string
+  /** Column key (for accessing column config) */
+  columnKey?: string
+  /** Whether this is a header cell */
+  header?: boolean
+  /** Colspan */
+  colspan?: number
+  /** Rowspan */
+  rowspan?: number
+  /** Cell width */
+  width?: string
+  /** Min width */
+  minWidth?: string
+  /** Max width */
+  maxWidth?: string
+  /** Sticky position */
+  sticky?: 'left' | 'right'
+  /** Truncate overflow text */
+  truncate?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  align: 'left',
+  cellClass: '',
+  columnKey: undefined,
+  header: false,
+  colspan: undefined,
+  rowspan: undefined,
+  width: undefined,
+  minWidth: undefined,
+  maxWidth: undefined,
+  sticky: undefined,
+  truncate: false
+})
+
+defineOptions({ inheritAttrs: false })
+
+const context = inject(SDataTableContextKey)
+
+// Get size from context
+const sizeClass = computed(() => {
+  const sizes = {
+    sm: 's-table-cell-sm',
+    md: 's-table-cell-md',
+    lg: 's-table-cell-lg'
+  }
+  return context ? sizes[context.size] : sizes.md
+})
+
+const cellClasses = computed(() => {
+  return [
+    props.header ? 's-table-th' : 's-table-td',
+    sizeClass.value,
+    props.cellClass,
+    {
+      'text-left': props.align === 'left',
+      'text-center': props.align === 'center',
+      'text-right': props.align === 'right',
+      'sticky left-0 bg-background z-5': props.sticky === 'left',
+      'sticky right-0 bg-background z-5': props.sticky === 'right',
+      'truncate': props.truncate
+    }
+  ]
+})
+
+const cellStyles = computed(() => {
+  const styles: Record<string, string> = {}
+  if (props.width) styles.width = props.width
+  if (props.minWidth) styles.minWidth = props.minWidth
+  if (props.maxWidth) styles.maxWidth = props.maxWidth
+  return styles
+})
+</script>
+
+<template>
+  <th
+    v-if="header"
+    v-bind="$attrs"
+    :class="cn(cellClasses, $attrs.class ?? '')"
+    :style="cellStyles"
+    :colspan="colspan"
+    :rowspan="rowspan"
+    scope="col"
+  >
+    <slot />
+  </th>
+  <td
+    v-else
+    v-bind="$attrs"
+    :class="cn(cellClasses, $attrs.class ?? '')"
+    :style="cellStyles"
+    :colspan="colspan"
+    :rowspan="rowspan"
+  >
+    <slot />
+  </td>
+</template>
+
+<style scoped>
+.s-table-th,
+.s-table-td {
+  color: var(--s-foreground);
+}
+
+.s-table-th {
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--s-muted-foreground);
+  white-space: nowrap;
+}
+
+/* Size variants */
+.s-table-cell-sm {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.s-table-cell-md {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+}
+
+.s-table-cell-lg {
+  padding: 1rem 1.25rem;
+  font-size: 0.9375rem;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

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

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+/**
+ * STableColumn - Declarative column definition component
+ * 
+ * Use this component to define columns declaratively:
+ * <SDataTable :data="data">
+ *   <STableColumn key="name" label="Name" sortable />
+ *   <STableColumn key="email" label="Email" />
+ * </SDataTable>
+ */
+import { inject, onMounted, onUnmounted, watch } from 'vue'
+import { SDataTableContextKey, type TableColumn, type ColumnAlign, type SortDirection } from './index'
+
+interface Props {
+  /** Unique column key (required) */
+  columnKey: string
+  /** Display label for header */
+  label?: string
+  /** Data accessor key */
+  accessor?: string
+  /** Column width */
+  width?: string
+  /** Minimum width */
+  minWidth?: string
+  /** Maximum width */
+  maxWidth?: string
+  /** Text alignment */
+  align?: ColumnAlign
+  /** Whether column is sortable */
+  sortable?: boolean
+  /** Whether column is visible */
+  visible?: boolean
+  /** Sticky position */
+  sticky?: 'left' | 'right'
+  /** Custom header class */
+  headerClass?: string
+  /** Custom cell class */
+  cellClass?: string
+  /** Render priority for responsive hiding */
+  priority?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  accessor: undefined,
+  width: undefined,
+  minWidth: undefined,
+  maxWidth: undefined,
+  align: 'left',
+  sortable: false,
+  visible: true,
+  sticky: undefined,
+  headerClass: '',
+  cellClass: '',
+  priority: 0
+})
+
+defineSlots<{
+  /** Header cell content */
+  header?: (props: { column: TableColumn; sortState: { column: string | null; direction: SortDirection } }) => unknown
+  /** Cell content */
+  default?: (props: { row: unknown; value: unknown; index: number }) => unknown
+}>()
+
+defineOptions({ inheritAttrs: false })
+
+const context = inject(SDataTableContextKey)
+
+// Build column definition
+const buildColumn = (): TableColumn => ({
+  key: props.columnKey,
+  label: props.label,
+  accessor: props.accessor as keyof unknown | undefined,
+  width: props.width,
+  minWidth: props.minWidth,
+  maxWidth: props.maxWidth,
+  align: props.align,
+  sortable: props.sortable,
+  visible: props.visible,
+  sticky: props.sticky,
+  headerClass: props.headerClass,
+  cellClass: props.cellClass,
+  priority: props.priority
+})
+
+// Register column with parent
+onMounted(() => {
+  if (context) {
+    const existingIdx = context.columns.value.findIndex(c => c.key === props.columnKey)
+    if (existingIdx === -1) {
+      context.columns.value.push(buildColumn())
+    }
+  }
+})
+
+// Watch for prop changes
+watch(() => props, () => {
+  if (context) {
+    const idx = context.columns.value.findIndex(c => c.key === props.columnKey)
+    if (idx !== -1) {
+      context.columns.value[idx] = buildColumn()
+    }
+  }
+}, { deep: true })
+
+// Unregister on unmount
+onUnmounted(() => {
+  if (context) {
+    const idx = context.columns.value.findIndex(c => c.key === props.columnKey)
+    if (idx !== -1) {
+      context.columns.value.splice(idx, 1)
+    }
+  }
+})
+</script>
+
+<template>
+  <!-- This is a renderless component - slots are used by SDataTable -->
+  <slot />
+</template>

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

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+/**
+ * STableEmpty - Empty state component for tables
+ * 
+ * Features:
+ * - Customizable icon and message
+ * - Action button slot
+ * - Multiple visual variants
+ */
+import { computed } from 'vue'
+import { cn } from '../../../lib/utils'
+
+interface Props {
+  /** Icon class (MDI icons) */
+  icon?: string
+  /** Primary message */
+  title?: string
+  /** Secondary description */
+  description?: string
+  /** Visual variant */
+  variant?: 'default' | 'minimal' | 'illustrated'
+  /** Icon size */
+  iconSize?: 'sm' | 'md' | 'lg' | 'xl'
+  /** Column span (for td colspan) */
+  colspan?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: 'mdi-table-off',
+  title: 'No data available',
+  description: '',
+  variant: 'default',
+  iconSize: 'lg',
+  colspan: 1
+})
+
+defineOptions({ inheritAttrs: false })
+
+defineSlots<{
+  /** Custom icon */
+  icon?: () => unknown
+  /** Custom title */
+  title?: () => unknown
+  /** Custom description */
+  description?: () => unknown
+  /** Action button(s) */
+  action?: () => unknown
+}>()
+
+const iconSizeClasses = computed(() => {
+  const sizes = {
+    sm: 'text-2xl',
+    md: 'text-3xl',
+    lg: 'text-4xl',
+    xl: 'text-5xl'
+  }
+  return sizes[props.iconSize]
+})
+
+const containerClasses = computed(() => {
+  const base = 's-table-empty flex flex-col items-center justify-center py-12'
+  
+  const variants = {
+    default: 'text-muted-foreground',
+    minimal: 'text-muted-foreground py-8',
+    illustrated: 'text-muted-foreground py-16'
+  }
+  
+  return `${base} ${variants[props.variant]}`
+})
+</script>
+
+<template>
+  <tr v-bind="$attrs" :class="cn('s-table-empty-row', $attrs.class ?? '')">
+    <td :colspan="colspan" class="s-table-td p-0">
+      <div :class="containerClasses">
+        <!-- Icon -->
+        <slot name="icon">
+          <div 
+            class="s-table-empty-icon mb-4 opacity-40"
+            :class="iconSizeClasses"
+          >
+            <span :class="['mdi', icon]" />
+          </div>
+        </slot>
+        
+        <!-- Title -->
+        <slot name="title">
+          <h3 
+            v-if="title" 
+            class="s-table-empty-title text-base font-medium mb-1"
+          >
+            {{ title }}
+          </h3>
+        </slot>
+        
+        <!-- Description -->
+        <slot name="description">
+          <p 
+            v-if="description" 
+            class="s-table-empty-description text-sm opacity-70 max-w-xs text-center"
+          >
+            {{ description }}
+          </p>
+        </slot>
+        
+        <!-- Action slot -->
+        <div v-if="$slots.action" class="s-table-empty-action mt-4">
+          <slot name="action" />
+        </div>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<style scoped>
+.s-table-empty-row {
+  background: transparent;
+}
+
+.s-table-empty-row:hover {
+  background: transparent !important;
+}
+
+/* Illustrated variant decoration */
+.s-table-empty-icon {
+  transition: transform 0.3s ease;
+}
+
+.s-table-empty:hover .s-table-empty-icon {
+  transform: scale(1.05);
+}
+
+/* Subtle animation */
+@keyframes empty-state-appear {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.s-table-empty {
+  animation: empty-state-appear 0.4s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .s-table-empty {
+    animation: none;
+  }
+  
+  .s-table-empty:hover .s-table-empty-icon {
+    transform: none;
+  }
+}
+</style>

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

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+/**
+ * STableHeader - Standalone header component for custom table layouts
+ */
+import { inject, computed } from 'vue'
+import { cn } from '../../../lib/utils'
+import { SDataTableContextKey } from './index'
+
+interface Props {
+  /** Custom class for thead */
+  headerClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  headerClass: ''
+})
+
+defineOptions({ inheritAttrs: false })
+
+const context = inject(SDataTableContextKey)
+
+const headerClasses = computed(() => {
+  return [
+    's-table-head',
+    props.headerClass,
+    {
+      'sticky z-10': context?.stickyHeader,
+      'bg-muted': true
+    }
+  ]
+})
+</script>
+
+<template>
+  <thead v-bind="$attrs" :class="cn(headerClasses, $attrs.class ?? '')">
+    <slot>
+      <tr v-if="context">
+        <th
+          v-for="column in context.visibleColumns.value"
+          :key="column.key"
+          class="s-table-th"
+          :class="[
+            column.headerClass,
+            {
+              's-table-th-sortable cursor-pointer select-none': column.sortable,
+              's-table-th-sorted': context.sortState.value.column === column.key,
+              'text-left': column.align === 'left' || !column.align,
+              'text-center': column.align === 'center',
+              'text-right': column.align === 'right'
+            }
+          ]"
+          :style="{
+            width: column.width,
+            minWidth: column.minWidth,
+            maxWidth: column.maxWidth
+          }"
+          scope="col"
+          :aria-sort="
+            context.sortState.value.column === column.key 
+              ? (context.sortState.value.direction === 'asc' ? 'ascending' : 'descending')
+              : undefined
+          "
+          @click="column.sortable ? context.toggleSort(column.key) : undefined"
+          @keydown.enter="column.sortable ? context.toggleSort(column.key) : undefined"
+          @keydown.space.prevent="column.sortable ? context.toggleSort(column.key) : undefined"
+          :tabindex="column.sortable ? 0 : undefined"
+        >
+          <slot :name="`header-${column.key}`" :column="column">
+            <div 
+              class="flex items-center gap-2" 
+              :class="{ 
+                'justify-center': column.align === 'center', 
+                'justify-end': column.align === 'right' 
+              }"
+            >
+              <span>{{ column.label || column.key }}</span>
+              
+              <!-- Sort indicator -->
+              <span 
+                v-if="column.sortable"
+                class="s-table-sort-icon inline-flex flex-col text-xs leading-none opacity-40 transition-opacity"
+                :class="{ 'opacity-100': context.sortState.value.column === column.key }"
+              >
+                <span 
+                  class="mdi mdi-chevron-up transition-transform -mb-1.5"
+                  :class="{ 
+                    'text-primary': context.sortState.value.column === column.key && context.sortState.value.direction === 'asc'
+                  }"
+                />
+                <span 
+                  class="mdi mdi-chevron-down transition-transform"
+                  :class="{ 
+                    'text-primary': context.sortState.value.column === column.key && context.sortState.value.direction === 'desc'
+                  }"
+                />
+              </span>
+            </div>
+          </slot>
+        </th>
+      </tr>
+    </slot>
+  </thead>
+</template>
+
+<style scoped>
+.s-table-head {
+  background-color: var(--s-muted);
+}
+
+.s-table-th {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--s-muted-foreground);
+  white-space: nowrap;
+}
+
+.s-table-th-sortable {
+  transition: background-color 0.15s ease;
+}
+
+.s-table-th-sortable:hover {
+  background-color: var(--s-accent);
+}
+
+.s-table-th-sortable:focus-visible {
+  outline: 2px solid var(--s-primary);
+  outline-offset: -2px;
+}
+</style>