@polymarbot/nuxt-layer-shadcn-ui 0.9.4 → 0.9.6

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

@@ -1,10 +1,11 @@
-// 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)
+// Wraps a scoped table-cell slot and centralizes "is this cell empty?".
+// Routing:
+//   - `slotFn` provided and returns non-empty VNodes → render those
+//   - `slotFn` provided and returns empty             → render `#empty`
+//   - no `slotFn`, `empty` is true                    → render `#empty`
+//   - no `slotFn`, `empty` is false                   → render `#default`
 //
-// Empty detection catches `v-if` / `{{ value }}` returning nothing — but a
+// Empty VNode detection catches `v-if` / `{{ value }}` returning nothing — a
 // rendered element with no content (e.g. `<div/>`) still counts as non-empty.
 
 import { Comment, Fragment, Text, type FunctionalComponent, type VNode } from 'vue'
@@ -26,15 +27,17 @@ function isEmptyVNodes (vnodes: VNode[] | undefined): boolean {
 const CellSlot: FunctionalComponent<{
   slotFn?: (scope: Record<string, unknown>) => VNode[]
   scope: Record<string, unknown>
+  /** When no `slotFn` is provided, signals that the underlying value is empty. */
+  empty?: boolean
 }> = (props, { slots }) => {
   if (props.slotFn) {
     const vnodes = props.slotFn(props.scope)
     if (!isEmptyVNodes(vnodes)) return vnodes
     return slots.empty?.()
   }
-  return slots.default?.()
+  return props.empty ? slots.empty?.() : slots.default?.()
 }
-CellSlot.props = [ 'slotFn', 'scope' ]
+CellSlot.props = [ 'slotFn', 'scope', 'empty' ]
 CellSlot.inheritAttrs = false
 
 export default CellSlot

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

@@ -10,15 +10,16 @@ interface User {
   role: string
   status: string
   amount: number
+  views: number
   createdAt: string
 }
 
 const sampleData: User[] = [
-  { id: 1, name: 'Alice', email: 'alice@example.com', role: 'Admin', status: 'active', amount: 1234.56, createdAt: '2024-01-15T10:30:00Z' },
-  { id: 2, name: 'Bob', email: 'bob@example.com', role: 'User', status: 'active', amount: 789.0, createdAt: '2024-02-20T14:15:00Z' },
-  { id: 3, name: 'Charlie', email: 'charlie@example.com', role: 'Editor', status: 'inactive', amount: 2345.67, createdAt: '2024-03-10T09:00:00Z' },
-  { id: 4, name: 'Diana', email: 'diana@example.com', role: 'Admin', status: 'active', amount: 456.78, createdAt: '2024-04-05T16:45:00Z' },
-  { id: 5, name: 'Eve', email: 'eve@example.com', role: 'User', status: 'inactive', amount: 3456.89, createdAt: '2024-05-12T11:20:00Z' },
+  { id: 1, name: 'Alice', email: 'alice@example.com', role: 'Admin', status: 'active', amount: 1234.56, views: 12345, createdAt: '2024-01-15T10:30:00Z' },
+  { id: 2, name: 'Bob', email: 'bob@example.com', role: 'User', status: 'active', amount: 789.0, views: 678, createdAt: '2024-02-20T14:15:00Z' },
+  { id: 3, name: 'Charlie', email: 'charlie@example.com', role: 'Editor', status: 'inactive', amount: 2345.67, views: 1234567, createdAt: '2024-03-10T09:00:00Z' },
+  { id: 4, name: 'Diana', email: 'diana@example.com', role: 'Admin', status: 'active', amount: 456.78, views: 42, createdAt: '2024-04-05T16:45:00Z' },
+  { id: 5, name: 'Eve', email: 'eve@example.com', role: 'User', status: 'inactive', amount: 3456.89, views: 98765, createdAt: '2024-05-12T11:20:00Z' },
 ]
 
 const longData: User[] = Array.from({ length: 30 }, (_, i) => ({
@@ -28,6 +29,7 @@ const longData: User[] = Array.from({ length: 30 }, (_, i) => ({
   role: [ 'Admin', 'Editor', 'User' ][i % 3]!,
   status: i % 4 === 0 ? 'inactive' : 'active',
   amount: Math.round(Math.random() * 10000) / 100,
+  views: Math.round(Math.random() * 1_000_000),
   createdAt: new Date(2024, 0, 1 + i).toISOString(),
 }))
 
@@ -48,9 +50,9 @@ const sortableColumns: DataTableColumn[] = [
 
 const typeColumns: DataTableColumn[] = [
   { field: 'name', title: 'Name', width: '120px' },
+  { field: 'views', title: 'Views', width: '120px', type: 'number', align: 'right' },
   { field: 'amount', title: 'Amount', width: '120px', type: 'currency' },
   { field: 'createdAt', title: 'Date', width: '140px', type: 'date' },
-  { field: 'status', title: 'Empty', width: '100px', type: 'empty' },
 ]
 
 const slotColumns: DataTableColumn[] = [
@@ -547,13 +549,13 @@ export const CellSlotEmptyFallback: Story = {
       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: '' },
+        { name: 'Empty value with slot', 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' },
+        { field: 'action', title: 'Action', width: '120px' },
       ]
       return { data, columns }
     },

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

@@ -141,14 +141,14 @@ function formatCellValue (value: unknown, column: DataTableColumn): string {
     case 'unixDate':
       return formatDateTime((value as number) * 1000).split(' ').join('\n')
 
+    case 'number':
+      return formatNumber(value as number | string)
+
     case 'currency':
       return formatCurrency(value as number | string, column.currency, {
         currencyDisplay: column.currencyDisplay,
       })
 
-    case 'empty':
-      return ''
-
     default:
       return String(value)
   }
@@ -421,20 +421,12 @@ defineExpose({
               <CellSlot
                 :slotFn="$slots[column.field]"
                 :scope="{ column, row, value: get(row, column.field), index }"
+                :empty="!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>
+                  {{ formatCellValue(get(row, column.field), column) }}
                 </template>
-                <template
-                  v-if="column.type !== 'empty'"
-                  #empty
-                >
+                <template #empty>
                   <span :class="emptyCellClass" />
                 </template>
               </CellSlot>
@@ -443,7 +435,7 @@ defineExpose({
         </template>
 
         <TableRow
-          v-else-if="!loading"
+          v-else
           data-virtual-row
           class="hover:bg-transparent"
         >

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

@@ -1,4 +1,4 @@
-export type DataTableColumnType = 'text' | 'date' | 'unixDate' | 'currency' | 'empty'
+export type DataTableColumnType = 'text' | 'number' | 'date' | 'unixDate' | 'currency'
 export type DataTableColumnFixed = 'left' | 'right'
 export type DataTableColumnAlign = 'left' | 'center' | 'right'
 export type DataTableSelectionMode = 'single' | 'multiple'

package/app/utils/index.ts

@@ -3,4 +3,4 @@
 // Also serves as the shadcn CLI `utils` alias (see components.json).
 export { cn } from '@polymarbot/uitls-shared/vue/utils'
 export { safeHtml } from '@polymarbot/uitls-shared/utils-browser'
-export { isUrl, formatCurrency } from '@polymarbot/uitls-shared/utils'
+export { isUrl, formatCurrency, formatNumber } from '@polymarbot/uitls-shared/utils'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@polymarbot/nuxt-layer-basic": "^0.1",
-    "@polymarbot/uitls-shared": "^0.6.1",
+    "@polymarbot/uitls-shared": "^0.6",
     "@tanstack/vue-table": "^8.21.3",
     "@types/lodash-es": "^4.17.12",
     "@types/qrcode": "^1.5.6",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "9d816af97015b542dcfd6aae1ea8056f286a9891"
+  "gitHead": "908af6ffb1f55a62f62ee6bc17ca26b3f644ac32"
 }