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

package/app/assets/styles/globals.css

@@ -1,20 +1 @@
-@import 'tailwindcss';
-@import 'tw-animate-css';
-@import './colors.css';
-@import './utilities.css';
-@import './z-index.css';
-
-/* Ensure Tailwind scans the layer's own source files */
-@source '../../..';
-
-/* Dark mode configuration for Tailwind v4 */
-@custom-variant dark (&:where(.dark, .dark *));
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+@import './z-index.css';

package/app/assets/styles/index.stories.ts

@@ -72,7 +72,7 @@ const foregrounds = [
 ]
 
 const meta = {
-  title: 'Foundations/Colors',
+  title: 'Theme/Colors',
   parameters: {
     layout: 'padded',
     docs: {

package/app/assets/styles/tailwind-preset.css

@@ -0,0 +1,15 @@
+@import 'tw-animate-css';
+@import './tailwind-colors.css';
+@import './tailwind-utilities.css';
+
+@source '../../..';
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

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

@@ -52,9 +52,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 Multiple: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Accordion, Surface },
     setup () {
@@ -73,6 +76,7 @@ export const Multiple: Story = {
 }
 
 export const Disabled: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Accordion, Surface },
     setup: () => ({ items }),
@@ -85,6 +89,7 @@ export const Disabled: Story = {
 }
 
 export const CustomSlots: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Accordion, Surface, Icon },
     setup () {

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

@@ -90,6 +90,59 @@ const profile: AdminLayoutSidebarDropdownProfile = {
   subtitle: 'demo@example.com',
 }
 
+const layoutContent = `
+  <template #navbar-left>
+    <Breadcrumb :model="breadcrumb" />
+  </template>
+  <template #navbar-right>
+    <Button variant="ghost" size="icon" icon="search" aria-label="Search" />
+    <Button variant="ghost" size="icon" icon="bell" aria-label="Notifications" />
+    <Avatar label="DU" size="small" />
+  </template>
+
+  <div class="space-y-6 p-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-semibold tracking-tight">Overview</h1>
+        <p class="text-sm text-muted-foreground">Welcome back, here is what is happening today.</p>
+      </div>
+      <Button icon="plus">New Project</Button>
+    </div>
+
+    <div class="grid gap-4 md:grid-cols-3">
+      <Card title="Total Revenue">
+        <div class="text-2xl font-semibold">$45,231.89</div>
+        <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+      </Card>
+      <Card title="Subscriptions">
+        <div class="text-2xl font-semibold">+2,350</div>
+        <p class="text-xs text-muted-foreground">+180.1% from last month</p>
+      </Card>
+      <Card title="Active Users">
+        <div class="text-2xl font-semibold">+12,234</div>
+        <p class="text-xs text-muted-foreground">+19% from last month</p>
+      </Card>
+    </div>
+
+    <Card title="Recent Activity">
+      <ul class="divide-y divide-border text-sm">
+        <li class="flex items-center justify-between py-3">
+          <span>Alice updated the design system</span>
+          <span class="text-xs text-muted-foreground">2 min ago</span>
+        </li>
+        <li class="flex items-center justify-between py-3">
+          <span>Bob deployed v1.4.0 to production</span>
+          <span class="text-xs text-muted-foreground">1 hour ago</span>
+        </li>
+        <li class="flex items-center justify-between py-3">
+          <span>Charlie opened a new issue</span>
+          <span class="text-xs text-muted-foreground">3 hours ago</span>
+        </li>
+      </ul>
+    </Card>
+  </div>
+`
+
 const meta = {
   title: 'UI/AdminLayout',
   component: AdminLayout,
@@ -116,60 +169,7 @@ const meta = {
       ]
       return { args, breadcrumb }
     },
-    template: `
-      <AdminLayout v-bind="args">
-        <template #navbar-left>
-          <Breadcrumb :model="breadcrumb" />
-        </template>
-        <template #navbar-right>
-          <Button variant="ghost" size="icon" icon="search" aria-label="Search" />
-          <Button variant="ghost" size="icon" icon="bell" aria-label="Notifications" />
-          <Avatar label="DU" size="small" />
-        </template>
-
-        <div class="space-y-6 p-6">
-          <div class="flex items-center justify-between">
-            <div>
-              <h1 class="text-2xl font-semibold tracking-tight">Overview</h1>
-              <p class="text-sm text-muted-foreground">Welcome back, here is what is happening today.</p>
-            </div>
-            <Button icon="plus">New Project</Button>
-          </div>
-
-          <div class="grid gap-4 md:grid-cols-3">
-            <Card title="Total Revenue">
-              <div class="text-2xl font-semibold">$45,231.89</div>
-              <p class="text-xs text-muted-foreground">+20.1% from last month</p>
-            </Card>
-            <Card title="Subscriptions">
-              <div class="text-2xl font-semibold">+2,350</div>
-              <p class="text-xs text-muted-foreground">+180.1% from last month</p>
-            </Card>
-            <Card title="Active Users">
-              <div class="text-2xl font-semibold">+12,234</div>
-              <p class="text-xs text-muted-foreground">+19% from last month</p>
-            </Card>
-          </div>
-
-          <Card title="Recent Activity">
-            <ul class="divide-y divide-border text-sm">
-              <li class="flex items-center justify-between py-3">
-                <span>Alice updated the design system</span>
-                <span class="text-xs text-muted-foreground">2 min ago</span>
-              </li>
-              <li class="flex items-center justify-between py-3">
-                <span>Bob deployed v1.4.0 to production</span>
-                <span class="text-xs text-muted-foreground">1 hour ago</span>
-              </li>
-              <li class="flex items-center justify-between py-3">
-                <span>Charlie opened a new issue</span>
-                <span class="text-xs text-muted-foreground">3 hours ago</span>
-              </li>
-            </ul>
-          </Card>
-        </div>
-      </AdminLayout>
-    `,
+    template: `<AdminLayout v-bind="args">${layoutContent}</AdminLayout>`,
   }),
   decorators: [
     () => ({
@@ -189,12 +189,28 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
+const renderAdminLayoutVariant = (variant: 'floating' | 'inset') => () => ({
+  components: { AdminLayout, Avatar, Breadcrumb, Button, Card },
+  setup () {
+    const breadcrumb = [
+      { label: 'Dashboard', href: '#' },
+      { label: 'Overview' },
+    ]
+    return { menus, footerDropdown: { profile, menuItems }, breadcrumb, variant }
+  },
+  template: `<AdminLayout :variant="variant" collapsible="icon" :menus="menus" :footer-dropdown="footerDropdown">${layoutContent}</AdminLayout>`,
+})
+
 export const Default: Story = {}
 
 export const Floating: Story = {
-  args: { variant: 'floating' },
+  parameters: noControls,
+  render: renderAdminLayoutVariant('floating'),
 }
 
 export const Inset: Story = {
-  args: { variant: 'inset' },
+  parameters: noControls,
+  render: renderAdminLayoutVariant('inset'),
 }

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

@@ -25,9 +25,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 Types: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Alert },
     setup: () => ({ types }),
@@ -42,6 +45,7 @@ export const Types: Story = {
 }
 
 export const WithIcons: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Alert },
     template: `

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

@@ -35,9 +35,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 Alert: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button },
     setup () {
@@ -59,6 +62,7 @@ export const Alert: Story = {
 }
 
 export const Destroy: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button },
     setup () {
@@ -80,6 +84,7 @@ export const Destroy: Story = {
 }
 
 export const MultiDialog: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button },
     setup () {
@@ -105,6 +110,7 @@ export const MultiDialog: Story = {
 }
 
 export const WithTypes: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button },
     setup () {

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

@@ -84,6 +84,7 @@ const meta = {
     pageSizeOptions: { control: 'object' },
     showPagination: { control: 'boolean' },
     selectable: { control: 'boolean' },
+    clickable: { control: 'boolean' },
     batchActions: { control: 'object' },
     selection: { control: 'object' },
   },
@@ -98,6 +99,7 @@ const meta = {
     pageSizeOptions: [ 10, 20, 50 ],
     showPagination: true,
     selectable: false,
+    clickable: false,
     batchActions: [],
     selection: [],
   },
@@ -111,11 +113,14 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
 /** Async fetch with pagination, sorting, page size selector */
 export const Default: Story = {}
 
 /** Batch actions with row selection and dual toolbars */
 export const WithBatchActions: Story = {
+  parameters: noControls,
   render: () => ({
     components: { AsyncDataTable },
     setup () {
@@ -139,6 +144,7 @@ export const WithBatchActions: Story = {
 
 /** Custom toolbar slot with action button */
 export const WithCustomToolbar: Story = {
+  parameters: noControls,
   render: () => ({
     components: { AsyncDataTable },
     setup: () => ({ columns, mockFetch }),

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

@@ -21,6 +21,7 @@ const props = withDefaults(defineProps<AsyncDataTableProps<TData>>(), {
   pageSizeOptions: () => [ 10, 20, 50, 100 ],
   showPagination: true,
   selectable: false,
+  clickable: false,
   batchActions: () => [],
   selection: () => [],
 })
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<AsyncDataTableProps<TData>>(), {
 const emit = defineEmits<{
   'update:filters': [filters: Record<string, any>]
   'update:selection': [value: TData[]]
+  'rowClick': [row: TData, event: MouseEvent]
 }>()
 
 const T = useTranslations('components.ui.AsyncDataTable')
@@ -213,9 +215,9 @@ onMounted(() => {
     <!-- Top toolbar -->
     <div
       v-if="shouldShowTopToolbar && (!!$slots.toolbar || hasBatchActions || (showPagination && hasPaginationData))"
-      class="mb-4 flex flex-wrap items-center justify-between gap-4"
+      class="mb-4 gap-4 flex flex-wrap items-center justify-between"
     >
-      <div class="flex items-center gap-2">
+      <div class="gap-2 flex items-center">
         <Dropdown
           v-if="hasBatchActions"
           :menus="batchMenuItems"
@@ -256,11 +258,13 @@ onMounted(() => {
       :columns="columns"
       :loading="loading"
       :selectionMode="showSelectionColumn ? 'multiple' : undefined"
+      :clickable="clickable"
       :sortBy="sortState.sortBy"
       :sortOrder="sortState.sortOrder"
       @update:selection="onSelectionChange"
       @update:sortBy="onSortByUpdate"
       @update:sortOrder="onSortOrderUpdate"
+      @rowClick="(row: TData, event: MouseEvent) => emit('rowClick', row, event)"
     >
       <template
         v-for="name in Object.keys($slots).filter(n => n !== 'toolbar')"
@@ -277,9 +281,9 @@ onMounted(() => {
     <!-- Bottom toolbar -->
     <div
       v-if="shouldShowBottomToolbar && (!!$slots.toolbar || hasBatchActions || (showPagination && hasPaginationData))"
-      class="mt-4 flex flex-wrap items-center justify-between gap-4"
+      class="mt-4 gap-4 flex flex-wrap items-center justify-between"
     >
-      <div class="flex items-center gap-2">
+      <div class="gap-2 flex items-center">
         <Dropdown
           v-if="hasBatchActions"
           :menus="batchMenuItems"

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

@@ -38,6 +38,8 @@ export interface AsyncDataTableProps<T = Record<string, any>> {
   showPagination?: boolean
   /** Whether rows are selectable */
   selectable?: boolean
+  /** Whether rows are clickable (shows pointer cursor and pairs with `@rowClick`) */
+  clickable?: boolean
   /** Batch action definitions for selected rows */
   batchActions?: AsyncDataTableBatchAction<T>[]
   /** Selected rows (v-model:selection) */

package/app/components/ui/Avatar/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 Sizes: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Avatar },
     setup: () => ({ sizes }),
@@ -50,6 +53,7 @@ export const Sizes: Story = {
 }
 
 export const Shapes: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Avatar },
     setup: () => ({ shapes }),
@@ -65,6 +69,7 @@ export const Shapes: Story = {
 }
 
 export const WithImage: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Avatar },
     template: `
@@ -77,6 +82,7 @@ export const WithImage: Story = {
 }
 
 export const FallbackLabel: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Avatar },
     template: `

package/app/components/ui/Badge/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 Variants: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Badge },
     setup: () => ({ variants }),
@@ -39,6 +42,7 @@ export const Variants: Story = {
 }
 
 export const Numeric: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Badge },
     template: `
@@ -53,6 +57,7 @@ export const Numeric: Story = {
 }
 
 export const WithIcons: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Badge, Icon },
     template: `

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

@@ -36,9 +36,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 WithHome: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Breadcrumb },
     setup: () => ({ home, basicItems }),
@@ -47,6 +50,7 @@ export const WithHome: Story = {
 }
 
 export const WithIcons: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Breadcrumb },
     setup: () => ({ home, withIconItems }),
@@ -55,6 +59,7 @@ export const WithIcons: Story = {
 }
 
 export const SingleItem: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Breadcrumb },
     setup: () => ({ home }),

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

@@ -52,9 +52,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 Variants: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button },
     setup: () => ({ variants }),
@@ -67,6 +70,7 @@ export const Variants: Story = {
 }
 
 export const Sizes: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button, Icon },
     setup: () => ({ sizes }),
@@ -82,6 +86,7 @@ export const Sizes: Story = {
 }
 
 export const WithIcons: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button },
     template: `
@@ -96,6 +101,7 @@ export const WithIcons: Story = {
 }
 
 export const Loading: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button },
     template: `
@@ -110,6 +116,7 @@ export const Loading: Story = {
 }
 
 export const Disabled: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button },
     setup: () => ({ variants }),
@@ -122,6 +129,7 @@ export const Disabled: Story = {
 }
 
 export const Rounded: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button },
     template: `
@@ -137,6 +145,7 @@ export const Rounded: Story = {
 }
 
 export const LinkButtons: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Button },
     template: `

package/app/components/ui/ButtonGroup/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 WithIcons: Story = {
+  parameters: noControls,
   render: () => ({
     components: { ButtonGroup, Button, Icon },
     template: `
@@ -46,6 +49,7 @@ export const WithIcons: Story = {
 }
 
 export const InputWithButton: Story = {
+  parameters: noControls,
   render: () => ({
     components: { ButtonGroup, Button, Input, Icon },
     setup () {
@@ -62,6 +66,7 @@ export const InputWithButton: Story = {
 }
 
 export const ButtonWithInputWithButton: Story = {
+  parameters: noControls,
   render: () => ({
     components: { ButtonGroup, Button, Input, Icon },
     template: `
@@ -75,6 +80,7 @@ export const ButtonWithInputWithButton: Story = {
 }
 
 export const MixedVariants: Story = {
+  parameters: noControls,
   render: () => ({
     components: { ButtonGroup, Button },
     template: `

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

@@ -25,9 +25,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 WithTitle: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Card },
     template: `
@@ -39,6 +42,7 @@ export const WithTitle: Story = {
 }
 
 export const CustomHeader: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Card, Button },
     template: `
@@ -56,6 +60,7 @@ export const CustomHeader: Story = {
 }
 
 export const WithFooter: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Card, Button },
     template: `

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

@@ -35,9 +35,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 Checked: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Checkbox },
     setup () {
@@ -57,6 +60,7 @@ export const Checked: Story = {
 }
 
 export const Indeterminate: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Checkbox },
     template: `
@@ -69,6 +73,7 @@ export const Indeterminate: Story = {
 }
 
 export const Disabled: Story = {
+  parameters: noControls,
   render: () => ({
     components: { Checkbox },
     template: `

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

@@ -37,9 +37,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 IconOnly: Story = {
+  parameters: noControls,
   render: () => ({
     components: { CopyButton },
     template: `
@@ -53,6 +56,7 @@ export const IconOnly: Story = {
 }
 
 export const WithLabel: Story = {
+  parameters: noControls,
   render: () => ({
     components: { CopyButton },
     template: `
@@ -65,6 +69,7 @@ export const WithLabel: Story = {
 }
 
 export const Variants: Story = {
+  parameters: noControls,
   render: () => ({
     components: { CopyButton },
     setup: () => ({ variants }),
@@ -84,6 +89,7 @@ export const Variants: Story = {
 }
 
 export const Sizes: Story = {
+  parameters: noControls,
   render: () => ({
     components: { CopyButton },
     template: `
@@ -97,6 +103,7 @@ export const Sizes: Story = {
 }
 
 export const CustomTooltipText: Story = {
+  parameters: noControls,
   render: () => ({
     components: { CopyButton },
     template: `