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

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/app/components/ui/Input/index.stories.ts

@@ -35,23 +35,6 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const Controlled: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Input },
-    setup () {
-      const value = ref('')
-      return { value }
-    },
-    template: `
-      <div class="max-w-sm space-y-2">
-        <Input v-model="value" placeholder="Enter your name..." />
-        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
-}
-
 export const WithPrefix: Story = {
   parameters: noControls,
   render: () => ({

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

@@ -76,6 +76,7 @@ function clearInput () {
       align="inline-end"
     >
       <InputGroupButton
+        type="button"
         size="icon-xs"
         @click="clearInput"
       >

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

@@ -38,33 +38,6 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const Controlled: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Pagination },
-    setup () {
-      const page = ref(1)
-      const pageSize = ref(10)
-      return { page, pageSize }
-    },
-    template: `
-      <div>
-        <Pagination
-          :page="page"
-          :total="85"
-          :pageSize="pageSize"
-          :pageSizeOptions="[10, 20, 50]"
-          @update:page="page = $event"
-          @update:pageSize="v => { pageSize = v; page = 1 }"
-        />
-        <div class="mt-2 text-sm text-muted-foreground">
-          Page: {{ page }}, Size: {{ pageSize }}
-        </div>
-      </div>
-    `,
-  }),
-}
-
 export const Sizes: Story = {
   parameters: noControls,
   render: () => ({

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

@@ -47,27 +47,3 @@ export const WithForm: Story = {
     `,
   }),
 }
-
-export const Controlled: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Popover, Button },
-    setup () {
-      const open = ref(false)
-      return { open }
-    },
-    template: `
-      <div class="flex items-center gap-2">
-        <Popover v-model:open="open">
-          <template #trigger>
-            <Button variant="outline">Controlled Popover</Button>
-          </template>
-          <p class="text-sm">This popover is controlled externally.</p>
-        </Popover>
-        <Button variant="ghost" size="sm" @click="open = !open">
-          Toggle ({{ open ? 'Open' : 'Closed' }})
-        </Button>
-      </div>
-    `,
-  }),
-}

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

@@ -43,23 +43,6 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const Controlled: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { RadioGroup },
-    setup () {
-      const selected = ref('option1')
-      return { options, selected }
-    },
-    template: `
-      <div class="space-y-2">
-        <RadioGroup v-model="selected" :items="options" />
-        <div class="text-sm text-muted-foreground">Selected: {{ selected }}</div>
-      </div>
-    `,
-  }),
-}
-
 export const Horizontal: Story = {
   parameters: noControls,
   render: () => ({

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

@@ -156,16 +156,16 @@ function handleClear (event: MouseEvent) {
         :data-disabled="disabled || undefined"
         :data-state="open ? 'open' : 'closed'"
         class="
+          data-[state=open]:border-ring data-[state=open]:ring-ring/50
           cursor-pointer
-          data-[state=open]:border-ring data-[state=open]:ring-[3px]
-          data-[state=open]:ring-ring/50
+          data-[state=open]:ring-[3px]
         "
       >
         <span
           class="
-            line-clamp-1 flex flex-1 items-center gap-2 px-3 py-1 text-base
-            whitespace-nowrap
+            gap-2 px-3 py-1 text-base
             md:text-sm
+            line-clamp-1 flex flex-1 items-center whitespace-nowrap
           "
         >
           <template v-if="multiple && selectedOptions.length > 0">
@@ -196,6 +196,7 @@ function handleClear (event: MouseEvent) {
           align="inline-end"
         >
           <InputGroupButton
+            type="button"
             size="icon-xs"
             @click="handleClear"
           >
@@ -210,7 +211,7 @@ function handleClear (event: MouseEvent) {
         </InputGroupAddon>
       </InputGroup>
     </PopoverTrigger>
-    <PopoverContent class="w-(--reka-popover-trigger-width) p-0">
+    <PopoverContent class="p-0 w-(--reka-popover-trigger-width)">
       <Command
         :modelValue="commandModelValue"
         :filterFunction="commandFilterFunction"
@@ -250,7 +251,7 @@ function handleClear (event: MouseEvent) {
                 <Icon
                   name="check"
                   :class="cn(
-                    'ml-auto size-4 shrink-0',
+                    'size-4 ml-auto shrink-0',
                     isSelected(option.value) ? 'opacity-100' : 'opacity-0',
                   )"
                 />

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

@@ -61,23 +61,6 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const Controlled: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Tabs },
-    setup () {
-      const value = ref<string>('account')
-      return { items, value }
-    },
-    template: `
-      <div class="max-w-md space-y-3">
-        <Tabs v-model="value" :items="items" />
-        <div class="text-sm text-muted-foreground">Active: {{ value }}</div>
-      </div>
-    `,
-  }),
-}
-
 export const IconOnly: Story = {
   parameters: noControls,
   render: () => ({

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

@@ -40,23 +40,6 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const Controlled: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Textarea },
-    setup () {
-      const value = ref('')
-      return { value }
-    },
-    template: `
-      <div class="max-w-sm space-y-2">
-        <Textarea v-model="value" placeholder="Type your message here..." />
-        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
-}
-
 export const WithRows: Story = {
   parameters: noControls,
   render: () => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "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": "aba25283d8cf93bf3223b3b59da5ff8016615f98"
 }