@polymarbot/nuxt-layer-shadcn-ui 0.1.9 → 0.2.0-w

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

@@ -22,85 +22,195 @@ const meta = {
     disabled: false,
     variant: 'paper',
   },
+  render: args => ({
+    components: { PageCard },
+    setup: () => ({ args }),
+    template: `
+      <PageCard v-bind="args" class="max-w-2xl">
+        <p>Page card content goes here.</p>
+      </PageCard>
+    `,
+  }),
 } satisfies Meta<typeof PageCard>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
-    components: { PageCard, Button, WebLink },
-    setup: () => ({ args }),
+export const Default: Story = {}
+
+export const NoTitle: Story = {
+  render: () => ({
+    components: { PageCard },
     template: `
-      <div class="space-y-10 max-w-2xl">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <PageCard v-bind="args">
-            <p>Page card content goes here.</p>
-          </PageCard>
-        </section>
+      <PageCard class="max-w-2xl">
+        <p>A page card without a title — just content.</p>
+      </PageCard>
+    `,
+  }),
+}
 
-        <!-- With Back Button -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Back Button</h3>
-          <PageCard title="Edit Profile" :back="{ action: () => {} }">
-            <p>A page card with a back button in the header.</p>
-          </PageCard>
-        </section>
+export const WithSubtitle: Story = {
+  render: () => ({
+    components: { PageCard },
+    template: `
+      <PageCard
+        title="Bot Details"
+        subtitle="View and edit your bot configuration."
+        class="max-w-2xl"
+      >
+        <p>Title combined with subtitle.</p>
+      </PageCard>
+    `,
+  }),
+}
 
-        <!-- Back + Subtitle -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Back + Subtitle</h3>
-          <PageCard title="Bot Details" subtitle="View and edit your bot configuration." :back="{ action: () => {} }">
-            <p>Back button combined with title and subtitle.</p>
-          </PageCard>
-        </section>
+export const WithBackButton: Story = {
+  render: () => ({
+    components: { PageCard },
+    template: `
+      <PageCard title="Edit Profile" :back="{ action: () => {} }" class="max-w-2xl">
+        <p>A page card with a back button in the header.</p>
+      </PageCard>
+    `,
+  }),
+}
 
-        <!-- With Actions -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Actions</h3>
-          <PageCard title="API Keys">
-            <template #actions>
-              <Button variant="outline" size="sm">Export</Button>
-              <Button size="sm">Create</Button>
-            </template>
-            <p>Action buttons rendered on the right side of the title.</p>
-          </PageCard>
-        </section>
+export const BackWithSubtitle: Story = {
+  render: () => ({
+    components: { PageCard },
+    template: `
+      <PageCard
+        title="Bot Details"
+        subtitle="View and edit your bot configuration."
+        :back="{ action: () => {} }"
+        class="max-w-2xl"
+      >
+        <p>Back button combined with title and subtitle.</p>
+      </PageCard>
+    `,
+  }),
+}
 
-        <!-- Actions + Subtitle + Back -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Actions + Subtitle + Back</h3>
-          <PageCard
-            title="Developer Settings"
-            subtitle="Manage API keys and webhooks for your organization."
-            :back="{ action: () => {} }"
-          >
-            <template #actions>
-              <WebLink href="#" target="_blank" class="text-sm">Docs</WebLink>
-              <WebLink href="#" target="_blank" class="text-sm">API Reference</WebLink>
-            </template>
-            <p>Back button, title, subtitle, and trailing action slot working together.</p>
-          </PageCard>
-        </section>
+export const WithActions: Story = {
+  render: () => ({
+    components: { PageCard, Button },
+    template: `
+      <PageCard title="API Keys" class="max-w-2xl">
+        <template #actions>
+          <Button variant="outline" size="sm">Export</Button>
+          <Button size="sm">Create</Button>
+        </template>
+        <p>Action buttons rendered on the right side of the title.</p>
+      </PageCard>
+    `,
+  }),
+}
 
-        <!-- Card Variant -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Card Variant</h3>
-          <PageCard title="Profile" subtitle="Rounded corners and a visible border." variant="card">
-            <p>Use variant="card" for widget-style panels; default "paper" is edge-to-edge.</p>
-          </PageCard>
-        </section>
+export const ActionsSubtitleBack: Story = {
+  render: () => ({
+    components: { PageCard, WebLink },
+    template: `
+      <PageCard
+        title="Developer Settings"
+        subtitle="Manage API keys and webhooks for your organization."
+        :back="{ action: () => {} }"
+        class="max-w-2xl"
+      >
+        <template #actions>
+          <WebLink href="#" target="_blank" class="text-sm">Docs</WebLink>
+          <WebLink href="#" target="_blank" class="text-sm">API Reference</WebLink>
+        </template>
+        <p>Back button, title, subtitle, and trailing action slot working together.</p>
+      </PageCard>
+    `,
+  }),
+}
+
+export const CustomTitleSlot: Story = {
+  render: () => ({
+    components: { PageCard },
+    template: `
+      <PageCard class="max-w-2xl">
+        <template #title>
+          <span class="flex items-center gap-2">
+            <span class="inline-block size-2 rounded-full bg-success" />
+            <span>Active Workspace</span>
+          </span>
+        </template>
+        <template #subtitle>
+          <span class="text-success">All systems operational</span>
+        </template>
+        <p>Title and subtitle rendered via slots.</p>
+      </PageCard>
+    `,
+  }),
+}
+
+export const WithFooter: Story = {
+  render: () => ({
+    components: { PageCard, Button },
+    template: `
+      <PageCard title="Profile" class="max-w-2xl">
+        <p>Edit your profile information and save the changes.</p>
+        <template #footer>
+          <div class="flex w-full justify-end gap-2">
+            <Button variant="outline">Cancel</Button>
+            <Button>Save</Button>
+          </div>
+        </template>
+      </PageCard>
+    `,
+  }),
+}
+
+export const CardVariant: Story = {
+  render: () => ({
+    components: { PageCard },
+    template: `
+      <PageCard
+        title="Profile"
+        subtitle="Rounded corners and a visible border."
+        variant="card"
+        class="max-w-2xl"
+      >
+        <p>Use variant="card" for widget-style panels; default "paper" is edge-to-edge.</p>
+      </PageCard>
+    `,
+  }),
+}
+
+export const Loading: Story = {
+  render: () => ({
+    components: { PageCard },
+    template: `
+      <PageCard title="Saving…" loading class="max-w-2xl">
+        <p>Content is covered by a centered loading overlay while <code>loading</code> is true.</p>
+      </PageCard>
+    `,
+  }),
+}
 
-        <!-- No Title -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">No Title</h3>
-          <PageCard>
-            <p>A page card without a title — just content.</p>
-          </PageCard>
-        </section>
-      </div>
+export const NotReady: Story = {
+  render: () => ({
+    components: { PageCard },
+    template: `
+      <PageCard :ready="false" class="max-w-2xl">
+        <p>This content would be replaced by skeleton placeholders while data is loading.</p>
+      </PageCard>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { PageCard, Button },
+    template: `
+      <PageCard title="Read-only" disabled class="max-w-2xl">
+        <div class="flex flex-col gap-3">
+          <p>When <code>disabled</code> is true, content becomes non-interactive and dimmed.</p>
+          <Button>Disabled action</Button>
+        </div>
+      </PageCard>
     `,
   }),
 }

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

@@ -1,81 +1,98 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import Pagination from './index.vue'
 
+const sizes = [ 'default', 'sm' ] as const
+
 const meta = {
   title: 'UI/Pagination',
   component: Pagination,
   argTypes: {
+    page: { control: { type: 'number', min: 1 }},
+    total: { control: { type: 'number', min: 0 }},
+    pageSize: { control: { type: 'number', min: 1 }},
+    pageSizeOptions: { control: 'object' },
     simple: { control: 'boolean' },
-    size: { control: 'select', options: [ 'default', 'sm' ]},
     siblingCount: { control: { type: 'number', min: 0 }},
+    size: { control: 'select', options: sizes },
   },
   args: {
+    page: 1,
+    total: 85,
+    pageSize: 10,
+    pageSizeOptions: [ 10, 20, 50 ],
     simple: false,
-    size: 'default',
     siblingCount: 1,
+    size: 'default',
   },
+  render: args => ({
+    components: { Pagination },
+    setup: () => ({ args }),
+    template: '<Pagination v-bind="args" />',
+  }),
 } satisfies Meta<typeof Pagination>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const Controlled: Story = {
+  render: () => ({
     components: { Pagination },
     setup () {
       const page = ref(1)
       const pageSize = ref(10)
-
-      return { args, page, pageSize }
+      return { page, pageSize }
     },
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Pagination
-            v-bind="args"
-            :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>
-        </section>
+      <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>
+    `,
+  }),
+}
 
-        <!-- Size comparison -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Size</h3>
-          <div class="space-y-4">
-            <div>
-              <span class="mb-2 block text-sm font-medium">default</span>
-              <Pagination :page="3" :total="85" :pageSize="10" />
-            </div>
-            <div>
-              <span class="mb-2 block text-sm font-medium">sm</span>
-              <Pagination :page="3" :total="85" :pageSize="10" size="sm" />
-            </div>
-          </div>
-        </section>
+export const Sizes: Story = {
+  render: () => ({
+    components: { Pagination },
+    template: `
+      <div class="space-y-4">
+        <div>
+          <span class="mb-2 block text-sm font-medium">default</span>
+          <Pagination :page="3" :total="85" :pageSize="10" />
+        </div>
+        <div>
+          <span class="mb-2 block text-sm font-medium">sm</span>
+          <Pagination :page="3" :total="85" :pageSize="10" size="sm" />
+        </div>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Simple mode -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Simple Mode</h3>
-          <div class="space-y-4">
-            <div>
-              <span class="mb-2 block text-sm font-medium">default</span>
-              <Pagination :page="3" :total="85" :pageSize="10" simple />
-            </div>
-            <div>
-              <span class="mb-2 block text-sm font-medium">sm</span>
-              <Pagination :page="3" :total="85" :pageSize="10" simple size="sm" />
-            </div>
-          </div>
-        </section>
+export const Simple: Story = {
+  render: () => ({
+    components: { Pagination },
+    template: `
+      <div class="space-y-4">
+        <div>
+          <span class="mb-2 block text-sm font-medium">default</span>
+          <Pagination :page="3" :total="85" :pageSize="10" simple />
+        </div>
+        <div>
+          <span class="mb-2 block text-sm font-medium">sm</span>
+          <Pagination :page="3" :total="85" :pageSize="10" simple size="sm" />
+        </div>
       </div>
     `,
   }),

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DropdownItem } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/ui/Dropdown/types'
-import { buttonVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import { buttonVariants } from '../../shadcn/button'
 import {
   Pagination as ShadcnPagination,
   PaginationContent,
@@ -10,7 +10,7 @@ import {
   PaginationLast,
   PaginationNext,
   PaginationPrevious,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/pagination'
+} from '../../shadcn/pagination'
 import type { PaginationProps } from './types'
 
 const props = withDefaults(defineProps<PaginationProps>(), {

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

@@ -6,61 +6,63 @@ import Popover from './index.vue'
 const meta = {
   title: 'UI/Popover',
   component: Popover,
+  render: () => ({
+    components: { Popover, Button },
+    template: `
+      <Popover>
+        <template #trigger>
+          <Button variant="outline">Open Popover</Button>
+        </template>
+        <div class="space-y-2">
+          <h4 class="font-medium">Popover Content</h4>
+          <p class="text-sm text-muted-foreground">This is the popover body with some informational content.</p>
+        </div>
+      </Popover>
+    `,
+  }),
 } satisfies Meta<typeof Popover>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const WithForm: Story = {
   render: () => ({
     components: { Popover, Button, Input },
+    template: `
+      <Popover>
+        <template #trigger>
+          <Button variant="outline">Edit Name</Button>
+        </template>
+        <div class="space-y-3">
+          <h4 class="font-medium">Update Name</h4>
+          <Input placeholder="Enter new name" />
+          <Button size="sm" class="w-full">Save</Button>
+        </div>
+      </Popover>
+    `,
+  }),
+}
+
+export const Controlled: Story = {
+  render: () => ({
+    components: { Popover, Button },
     setup () {
-      const controlled = ref(false)
-      return { controlled }
+      const open = ref(false)
+      return { open }
     },
     template: `
-      <div class="space-y-10">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Basic</h3>
-          <Popover>
-            <template #trigger>
-              <Button variant="outline">Open Popover</Button>
-            </template>
-            <div class="space-y-2">
-              <h4 class="font-medium">Popover Content</h4>
-              <p class="text-sm text-muted-foreground">This is the popover body with some informational content.</p>
-            </div>
-          </Popover>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Form</h3>
-          <Popover>
-            <template #trigger>
-              <Button variant="outline">Edit Name</Button>
-            </template>
-            <div class="space-y-3">
-              <h4 class="font-medium">Update Name</h4>
-              <Input placeholder="Enter new name" />
-              <Button size="sm" class="w-full">Save</Button>
-            </div>
-          </Popover>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <div class="flex items-center gap-2">
-            <Popover v-model:open="controlled">
-              <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="controlled = !controlled">
-              Toggle ({{ controlled ? 'Open' : 'Closed' }})
-            </Button>
-          </div>
-        </section>
+      <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/Popover/index.vue

@@ -3,7 +3,7 @@ import {
   Popover as ShadcnPopover,
   PopoverContent,
   PopoverTrigger,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/popover'
+} from '../../shadcn/popover'
 import type { PopoverProps } from './types'
 
 const props = defineProps<PopoverProps>()

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

@@ -4,13 +4,29 @@ import Qrcode from './index.vue'
 const meta = {
   title: 'UI/Qrcode',
   component: Qrcode,
+  argTypes: {
+    content: { control: 'text' },
+  },
+  args: {
+    content: 'https://example.com',
+  },
+  render: args => ({
+    components: { Qrcode },
+    setup: () => ({ args }),
+    template: `
+      <div class="size-48">
+        <Qrcode v-bind="args" />
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof Qrcode>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: { content: 'https://example.com' },
+export const Default: Story = {}
+
+export const DynamicContent: Story = {
   render: () => ({
     components: { Qrcode },
     setup () {
@@ -18,39 +34,31 @@ export const Default: Story = {
       return { url }
     },
     template: `
-      <div class="space-y-10">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Basic QR Code</h3>
-          <div class="size-48">
-            <Qrcode content="https://example.com" />
-          </div>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Dynamic Content</h3>
-          <div class="space-y-3 max-w-sm">
-            <input
-              v-model="url"
-              class="w-full rounded border border-input px-3 py-2 text-sm"
-              placeholder="Enter URL or text"
-            />
-            <div class="size-48">
-              <Qrcode :content="url" />
-            </div>
-          </div>
-        </section>
+      <div class="space-y-3 max-w-sm">
+        <input
+          v-model="url"
+          class="w-full rounded border border-input px-3 py-2 text-sm"
+          placeholder="Enter URL or text"
+        />
+        <div class="size-48">
+          <Qrcode :content="url" />
+        </div>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Different Sizes</h3>
-          <div class="flex items-end gap-6">
-            <div class="size-24">
-              <Qrcode content="https://example.com/small" />
-            </div>
-            <div class="size-48">
-              <Qrcode content="https://example.com/medium" />
-            </div>
-          </div>
-        </section>
+export const Sizes: Story = {
+  render: () => ({
+    components: { Qrcode },
+    template: `
+      <div class="flex items-end gap-6">
+        <div class="size-24">
+          <Qrcode content="https://example.com/small" />
+        </div>
+        <div class="size-48">
+          <Qrcode content="https://example.com/medium" />
+        </div>
       </div>
     `,
   }),