@polymarbot/nuxt-layer-shadcn-ui 0.3.8 → 0.3.9

package/app/components/ui/DataTable/CellSlot.ts

@@ -0,0 +1,40 @@
+// Wraps a scoped table-cell slot. Branches by `slotFn` state:
+//   - missing → render `#default` (no custom slot; show normal value)
+//   - returns non-empty VNodes → render those
+//   - returns empty (only Comment / empty Text / empty Fragment) → render
+//     `#empty` (slot is authoritative — don't fall back to the value)
+//
+// Empty detection catches `v-if` / `{{ value }}` returning nothing — but a
+// rendered element with no content (e.g. `<div/>`) still counts as non-empty.
+
+import { Comment, Fragment, Text, type FunctionalComponent, type VNode } from 'vue'
+
+function isEmptyVNodes (vnodes: VNode[] | undefined): boolean {
+  if (!vnodes?.length) return true
+  return vnodes.every(vnode => {
+    if (vnode.type === Comment) return true
+    if (vnode.type === Text) {
+      return typeof vnode.children === 'string'
+        ? vnode.children.trim() === ''
+        : !vnode.children
+    }
+    if (vnode.type === Fragment) return isEmptyVNodes(vnode.children as VNode[])
+    return false
+  })
+}
+
+const CellSlot: FunctionalComponent<{
+  slotFn?: (scope: Record<string, unknown>) => VNode[]
+  scope: Record<string, unknown>
+}> = (props, { slots }) => {
+  if (props.slotFn) {
+    const vnodes = props.slotFn(props.scope)
+    if (!isEmptyVNodes(vnodes)) return vnodes
+    return slots.empty?.()
+  }
+  return slots.default?.()
+}
+CellSlot.props = [ 'slotFn', 'scope' ]
+CellSlot.inheritAttrs = false
+
+export default CellSlot

package/app/components/ui/DataTable/index.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import Tag from '../Tag/index.vue'
 import type { DataTableColumn } from './types'
 import DataTable from './index.vue'
 
@@ -191,22 +192,15 @@ export const ColumnTypes: Story = {
 export const CustomSlots: Story = {
   parameters: noControls,
   render: () => ({
-    components: { DataTable: DataTable as any },
+    components: { DataTable: DataTable as any, Tag },
     setup: () => ({ data: sampleData, slotColumns }),
     template: `
       <div class="w-full">
         <DataTable :data="data" :columns="slotColumns">
           <template #status="{ value }">
-            <span
-              :class="[
-                'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-                value === 'active'
-                  ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                  : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200',
-              ]"
-            >
+            <Tag :color="value === 'active' ? 'success' : 'default'">
               {{ value }}
-            </span>
+            </Tag>
           </template>
           <template #amount="{ value }">
             <span class="font-mono font-medium">\${{ Number(value).toFixed(2) }}</span>
@@ -217,6 +211,46 @@ export const CustomSlots: Story = {
   }),
 }
 
+export const SlotEmptyFallback: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { DataTable: DataTable as any, Tag },
+    setup () {
+      const data = [
+        { name: 'Empty value (no slot)', email: '', status: 'active', action: 'Edit' },
+        { name: 'Empty slot output', email: 'demo@example.com', status: 'pending', action: 'Edit' },
+        { name: 'Column type=\'empty\'', email: 'demo@example.com', status: 'active', action: '' },
+      ]
+      const columns: DataTableColumn[] = [
+        { field: 'name', title: 'Demo case', minWidth: '200px' },
+        { field: 'email', title: 'Email', minWidth: '200px' },
+        { field: 'status', title: 'Status', width: '120px' },
+        { field: 'action', title: 'Action', width: '120px', type: 'empty' },
+      ]
+      return { data, columns }
+    },
+    template: `
+      <div class="w-full">
+        <DataTable :data="data" :columns="columns">
+          <template #status="{ value }">
+            <Tag
+              v-if="value === 'active' || value === 'inactive'"
+              :color="value === 'active' ? 'success' : 'default'"
+            >
+              {{ value }}
+            </Tag>
+          </template>
+          <template #action="{ value }">
+            <button v-if="value" class="text-sm text-primary underline">
+              {{ value }}
+            </button>
+          </template>
+        </DataTable>
+      </div>
+    `,
+  }),
+}
+
 export const EmptyState: Story = {
   parameters: noControls,
   render: () => ({
@@ -233,7 +267,7 @@ export const EmptyState: Story = {
 export const FooterSlot: Story = {
   parameters: noControls,
   render: () => ({
-    components: { DataTable: DataTable as any },
+    components: { DataTable: DataTable as any, Tag },
     setup: () => ({ data: sampleData, slotColumns }),
     template: `
       <div class="w-full">

package/app/components/ui/DataTable/index.vue

@@ -11,6 +11,7 @@ import {
   TableHeader,
   TableRow,
 } from '../../shadcn/table'
+import CellSlot from './CellSlot'
 import type {
   DataTableColumn,
   DataTableProps,
@@ -255,6 +256,7 @@ function buildColumnStyle (column: DataTableColumn): Record<string, string> {
 const headerCellClass = 'h-auto bg-border px-4 py-3 text-xs font-normal text-foreground'
 const headerDividerClass = 'relative after:absolute after:top-1/2 after:right-0 after:h-4 after:w-px after:-translate-y-1/2 after:bg-muted-foreground/25'
 const stickyLeftClass = 'sticky left-0 z-10'
+const emptyCellClass = 'h-0.5 w-2.5 bg-muted-foreground/50 inline-block rounded-full align-middle'
 
 const selectionColumnClass = '[&:has([role=checkbox])]:pr-4'
 const selectionColumnStyle = { width: '1%' }
@@ -383,24 +385,26 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
               :style="buildColumnStyle(column)"
               :data-shadow="buildFrozenShadow(column)"
             >
-              <slot
-                :name="column.field"
-                :column="column"
-                :row="row"
-                :value="get(row, column.field)"
-                :index="index"
+              <CellSlot
+                :slotFn="$slots[column.field]"
+                :scope="{ column, row, value: get(row, column.field), index }"
               >
-                <span
-                  v-if="!formatCellValue(get(row, column.field), column) && column.type !== 'empty'"
-                  class="
-                    h-0.5 w-2.5 bg-muted-foreground/50 inline-block rounded-full
-                    align-middle
-                  "
-                />
-                <template v-else>
-                  {{ formatCellValue(get(row, column.field), column) }}
+                <template #default>
+                  <span
+                    v-if="!formatCellValue(get(row, column.field), column) && column.type !== 'empty'"
+                    :class="emptyCellClass"
+                  />
+                  <template v-else>
+                    {{ formatCellValue(get(row, column.field), column) }}
+                  </template>
+                </template>
+                <template
+                  v-if="column.type !== 'empty'"
+                  #empty
+                >
+                  <span :class="emptyCellClass" />
                 </template>
-              </slot>
+              </CellSlot>
             </TableCell>
           </TableRow>
         </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "3377868984c2e309b5be71fa54f5f6f354b4ffa6"
+  "gitHead": "96386de30028e3a1fdeaa66d31149a6153909daa"
 }