@polymarbot/nuxt-layer-shadcn-ui 0.2.2 → 0.3.1

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

@@ -65,14 +65,12 @@ const meta = {
   argTypes: {
     selectionMode: { control: 'select', options: [ undefined, 'single', 'multiple' ]},
     loading: { control: 'boolean' },
-    sortBy: { control: 'text' },
-    sortOrder: { control: 'select', options: [ null, 1, -1 ]},
+    clickable: { control: 'boolean' },
   },
   args: {
     selectionMode: undefined,
     loading: false,
-    sortBy: null,
-    sortOrder: null,
+    clickable: false,
   },
   render: args => ({
     components: { DataTable: DataTable as any },
@@ -88,9 +86,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const SingleSelection: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DataTable: DataTable as any },
     setup () {
@@ -114,6 +115,7 @@ export const SingleSelection: Story = {
 }
 
 export const MultipleSelection: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DataTable: DataTable as any },
     setup () {
@@ -137,6 +139,7 @@ export const MultipleSelection: Story = {
 }
 
 export const Sortable: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DataTable: DataTable as any },
     setup () {
@@ -173,6 +176,7 @@ export const Sortable: Story = {
 }
 
 export const ColumnTypes: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DataTable: DataTable as any },
     setup: () => ({ data: sampleData, typeColumns }),
@@ -185,6 +189,7 @@ export const ColumnTypes: Story = {
 }
 
 export const CustomSlots: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DataTable: DataTable as any },
     setup: () => ({ data: sampleData, slotColumns }),
@@ -213,6 +218,7 @@ export const CustomSlots: Story = {
 }
 
 export const EmptyState: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DataTable: DataTable as any },
     setup: () => ({ basicColumns }),
@@ -225,6 +231,7 @@ export const EmptyState: Story = {
 }
 
 export const FooterSlot: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DataTable: DataTable as any },
     setup: () => ({ data: sampleData, slotColumns }),
@@ -245,6 +252,7 @@ export const FooterSlot: Story = {
 }
 
 export const FrozenColumns: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DataTable: DataTable as any },
     setup () {
@@ -269,6 +277,7 @@ export const FrozenColumns: Story = {
 }
 
 export const Loading: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DataTable: DataTable as any },
     setup: () => ({ data: sampleData, basicColumns }),
@@ -279,3 +288,27 @@ export const Loading: Story = {
     `,
   }),
 }
+
+export const RowClick: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup () {
+      const lastClicked = ref<User | null>(null)
+      return { data: sampleData, basicColumns, lastClicked }
+    },
+    template: `
+      <div class="w-full">
+        <DataTable
+          :data="data"
+          :columns="basicColumns"
+          clickable
+          @rowClick="row => lastClicked = row"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">
+          Last clicked: {{ lastClicked?.name ?? 'none' }}
+        </div>
+      </div>
+    `,
+  }),
+}

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

@@ -25,11 +25,13 @@ const props = withDefaults(defineProps<DataTableProps<TData>>(), {
   sortBy: undefined,
   sortOrder: undefined,
   loading: false,
+  clickable: false,
 })
 
 const emit = defineEmits<{
   'update:sortBy': [value: string | null]
   'update:sortOrder': [value: number | null]
+  'rowClick': [row: TData, event: MouseEvent]
 }>()
 
 const selection = defineModel<TData | TData[] | null>('selection', { default: null })
@@ -91,6 +93,11 @@ function toggleRow (row: TData) {
   }
 }
 
+function onRowClick (row: TData, event: MouseEvent) {
+  emit('rowClick', row, event)
+  if (showSelectionColumn.value) toggleRow(row)
+}
+
 // -- Sorting --
 // Sort cycle: null → asc(1) → desc(-1) → null (removable sort)
 
@@ -208,8 +215,8 @@ function buildColumnClass (column: DataTableColumn, headerIndex?: number): strin
     column.align === 'right' && 'text-right',
     // Header-specific
     isHeader && column.sortable && `
-      cursor-pointer select-none
       hover:text-foreground
+      cursor-pointer select-none
     `,
     hasDivider && headerDividerClass,
     // Fixed column last — sticky overrides relative via tailwind-merge
@@ -258,7 +265,7 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
 
 <template>
   <div
-    :class="cn('relative rounded-lg bg-border px-1 text-foreground', !$slots.footer && `
+    :class="cn('rounded-lg bg-border px-1 text-foreground relative', !$slots.footer && `
       pb-1
     `)"
   >
@@ -272,8 +279,8 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
       <div
         v-if="loading"
         class="
-          absolute inset-0 z-20 flex items-center justify-center rounded-lg
-          bg-background/60
+          inset-0 rounded-lg bg-background/60 absolute z-20 flex items-center
+          justify-center
         "
       >
         <Icon
@@ -317,7 +324,7 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
             >
               <div
                 :class="cn(
-                  'flex items-center gap-1',
+                  'gap-1 flex items-center',
                   column.align === 'center' && 'justify-center',
                   column.align === 'right' && 'justify-end',
                 )"
@@ -349,9 +356,9 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
           <TableRow
             v-for="(row, index) in data"
             :key="index"
-            :class="showSelectionColumn && 'cursor-pointer'"
+            :class="(showSelectionColumn || clickable) && 'cursor-pointer'"
             :data-state="isRowSelected(row) ? 'selected' : undefined"
-            @click="showSelectionColumn && toggleRow(row)"
+            @click="onRowClick(row, $event)"
           >
             <!-- Selection cell: stop click to prevent double toggle with row click -->
             <TableCell
@@ -386,7 +393,7 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
                 <span
                   v-if="!formatCellValue(get(row, column.field), column) && column.type !== 'empty'"
                   class="
-                    inline-block h-0.5 w-2.5 rounded-full bg-muted-foreground/50
+                    h-0.5 w-2.5 bg-muted-foreground/50 inline-block rounded-full
                     align-middle
                   "
                 />
@@ -402,7 +409,7 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
           <TableEmpty :colspan="totalColumns">
             <slot name="empty">
               <div
-                class="flex flex-col items-center gap-2 text-muted-foreground"
+                class="gap-2 text-muted-foreground flex flex-col items-center"
               >
                 <Icon
                   name="inbox"

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

@@ -39,4 +39,6 @@ export interface DataTableProps<T = Record<string, any>> {
   sortOrder?: number | null
   /** Show loading overlay */
   loading?: boolean
+  /** Whether rows are clickable (shows pointer cursor and pairs with `@rowClick`) */
+  clickable?: boolean
 }

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

@@ -51,9 +51,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const MonthPicker: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -70,6 +73,7 @@ export const MonthPicker: Story = {
 }
 
 export const YearPicker: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -86,6 +90,7 @@ export const YearPicker: Story = {
 }
 
 export const WithTime: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -102,6 +107,7 @@ export const WithTime: Story = {
 }
 
 export const Preselected: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -118,6 +124,7 @@ export const Preselected: Story = {
 }
 
 export const ValueFormat: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -134,6 +141,7 @@ export const ValueFormat: Story = {
 }
 
 export const Disabled: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DatePicker },
     setup () {
@@ -149,6 +157,7 @@ export const Disabled: Story = {
 }
 
 export const Readonly: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DatePicker },
     setup () {

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

@@ -51,9 +51,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const WithTime: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DateRangePicker },
     setup () {
@@ -70,6 +73,7 @@ export const WithTime: Story = {
 }
 
 export const MaxSpanDays: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DateRangePicker },
     setup () {
@@ -86,6 +90,7 @@ export const MaxSpanDays: Story = {
 }
 
 export const Preselected: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DateRangePicker },
     setup () {
@@ -105,6 +110,7 @@ export const Preselected: Story = {
 }
 
 export const Disabled: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DateRangePicker },
     setup () {
@@ -123,6 +129,7 @@ export const Disabled: Story = {
 }
 
 export const Readonly: Story = {
+  parameters: noControls,
   render: () => ({
     components: { DateRangePicker },
     setup () {

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

@@ -33,9 +33,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const Horizontal: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Divider },
     template: `
@@ -49,6 +52,7 @@ export const Horizontal: Story = {
 }
 
 export const Vertical: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Divider },
     template: `

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

@@ -58,9 +58,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const WithDescription: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Drawer, Button, Input },
     setup () {
@@ -88,6 +91,7 @@ export const WithDescription: Story = {
 }
 
 export const ScrollableContent: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Drawer, Button },
     setup () {
@@ -110,6 +114,7 @@ export const ScrollableContent: Story = {
 }
 
 export const Sides: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Drawer, Button },
     setup () {
@@ -145,6 +150,7 @@ export const Sides: Story = {
 }
 
 export const EventHandling: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Drawer, Button },
     setup () {

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

@@ -83,9 +83,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const HoverTrigger: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Dropdown, Button },
     setup: () => ({ basicMenus }),
@@ -98,6 +101,7 @@ export const HoverTrigger: Story = {
 }
 
 export const ClickTrigger: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Dropdown, Button },
     setup: () => ({ basicMenus }),
@@ -110,6 +114,7 @@ export const ClickTrigger: Story = {
 }
 
 export const WithDisabledItems: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Dropdown, Button },
     setup: () => ({ accountMenus }),
@@ -122,6 +127,7 @@ export const WithDisabledItems: Story = {
 }
 
 export const WithLinks: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Dropdown, Button },
     setup: () => ({ linkMenus }),
@@ -134,6 +140,7 @@ export const WithLinks: Story = {
 }
 
 export const WithGroups: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Dropdown, Button },
     setup: () => ({ groupedMenus }),
@@ -146,6 +153,7 @@ export const WithGroups: Story = {
 }
 
 export const CustomSlots: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Dropdown, Button },
     setup: () => ({ customMenus }),
@@ -170,6 +178,7 @@ export const CustomSlots: Story = {
 }
 
 export const PopupSlot: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Dropdown, Button },
     template: `

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

@@ -39,9 +39,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const Required: Story = {
+  parameters: noControls,
   render: () => ({
     components: { FormItem, Input },
     setup () {
@@ -59,6 +62,7 @@ export const Required: Story = {
 }
 
 export const WithError: Story = {
+  parameters: noControls,
   render: () => ({
     components: { FormItem, Input },
     template: `
@@ -72,6 +76,7 @@ export const WithError: Story = {
 }
 
 export const WithDescription: Story = {
+  parameters: noControls,
   render: () => ({
     components: { FormItem, Input },
     template: `
@@ -85,6 +90,7 @@ export const WithDescription: Story = {
 }
 
 export const Horizontal: Story = {
+  parameters: noControls,
   render: () => ({
     components: { FormItem, Input },
     template: `
@@ -98,6 +104,7 @@ export const Horizontal: Story = {
 }
 
 export const Responsive: Story = {
+  parameters: noControls,
   render: () => ({
     components: { FormItem, Input },
     template: `

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

@@ -24,9 +24,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const Positions: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Help },
     template: `
@@ -53,6 +56,7 @@ export const Positions: Story = {
 }
 
 export const InlineWithLabel: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Help },
     template: `

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

@@ -29,9 +29,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const CommonIcons: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Icon },
     setup: () => ({ commonIcons }),
@@ -51,6 +54,7 @@ export const CommonIcons: Story = {
 }
 
 export const Sizes: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Icon },
     template: `

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

@@ -31,9 +31,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const Controlled: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Input },
     setup () {
@@ -50,6 +53,7 @@ export const Controlled: Story = {
 }
 
 export const WithPrefix: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Input, Icon },
     setup () {
@@ -70,6 +74,7 @@ export const WithPrefix: Story = {
 }
 
 export const WithSuffix: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Input, Icon },
     setup () {
@@ -90,6 +95,7 @@ export const WithSuffix: Story = {
 }
 
 export const Password: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Input },
     setup () {
@@ -106,6 +112,7 @@ export const Password: Story = {
 }
 
 export const Disabled: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Input },
     template: '<Input disabled placeholder="Disabled input" class="max-w-sm" />',
@@ -113,6 +120,7 @@ export const Disabled: Story = {
 }
 
 export const Readonly: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Input },
     template: '<Input readonly modelValue="Read-only value" class="max-w-sm" />',
@@ -120,6 +128,7 @@ export const Readonly: Story = {
 }
 
 export const Invalid: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Input },
     template: '<Input invalid modelValue="Invalid value" class="max-w-sm" />',

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

@@ -32,9 +32,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const UsdSymbol: Story = {
+  parameters: noControls,
   render: () => ({
     components: { InputCurrency },
     setup () {
@@ -51,6 +54,7 @@ export const UsdSymbol: Story = {
 }
 
 export const EurCodeDisplay: Story = {
+  parameters: noControls,
   render: () => ({
     components: { InputCurrency },
     setup () {
@@ -67,6 +71,7 @@ export const EurCodeDisplay: Story = {
 }
 
 export const CadSymbol: Story = {
+  parameters: noControls,
   render: () => ({
     components: { InputCurrency },
     setup () {
@@ -83,6 +88,7 @@ export const CadSymbol: Story = {
 }
 
 export const CadNarrowSymbol: Story = {
+  parameters: noControls,
   render: () => ({
     components: { InputCurrency },
     setup () {
@@ -99,6 +105,7 @@ export const CadNarrowSymbol: Story = {
 }
 
 export const JpyNameDisplay: Story = {
+  parameters: noControls,
   render: () => ({
     components: { InputCurrency },
     setup () {

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

@@ -40,9 +40,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const WithMinMax: Story = {
+  parameters: noControls,
   render: () => ({
     components: { InputNumber },
     setup () {
@@ -59,6 +62,7 @@ export const WithMinMax: Story = {
 }
 
 export const CustomStep: Story = {
+  parameters: noControls,
   render: () => ({
     components: { InputNumber },
     setup () {
@@ -75,6 +79,7 @@ export const CustomStep: Story = {
 }
 
 export const WithoutButtons: Story = {
+  parameters: noControls,
   render: () => ({
     components: { InputNumber },
     setup () {
@@ -90,6 +95,7 @@ export const WithoutButtons: Story = {
 }
 
 export const Disabled: Story = {
+  parameters: noControls,
   render: () => ({
     components: { InputNumber },
     setup () {
@@ -105,6 +111,7 @@ export const Disabled: Story = {
 }
 
 export const Invalid: Story = {
+  parameters: noControls,
   render: () => ({
     components: { InputNumber },
     setup () {

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

@@ -20,9 +20,12 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 export const Default: Story = {}
 
 export const CustomSize: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Loading },
     template: `