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

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

@@ -7,6 +7,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '../../shadcn/dialog'
 import type { ModalProps } from './types'
 
@@ -42,28 +43,32 @@ const resolvedCancelText = computed(
   () => props.cancelText || t('common.actions.cancel'),
 )
 
-const dialogOpen = computed({
-  get: () => props.visible ?? false,
-  set: (value: boolean) => {
-    if (!value && props.visible && !props.loading) {
-      onCancel()
-    }
-  },
+const dialogOpen = ref(props.visible ?? false)
+
+watch(() => props.visible, value => {
+  if (value !== undefined) dialogOpen.value = value
 })
 
-watch(() => props.visible, visible => {
-  if (visible) emit('open')
+watch(dialogOpen, value => {
+  emit('update:visible', value)
+  if (value) emit('open')
   else emit('close')
 })
 
+function onOpenUpdate (value: boolean) {
+  if (!value && props.loading) return
+  if (value) dialogOpen.value = true
+  else onCancel()
+}
+
 function onConfirm () {
   emit('confirm')
-  emit('update:visible', false)
+  dialogOpen.value = false
 }
 
 function onCancel () {
   emit('cancel')
-  emit('update:visible', false)
+  dialogOpen.value = false
 }
 
 function onPointerDownOutside (event: Event) {
@@ -80,7 +85,17 @@ const contentClass = computed(() =>
 </script>
 
 <template>
-  <Dialog v-model:open="dialogOpen">
+  <Dialog
+    :open="dialogOpen"
+    @update:open="onOpenUpdate"
+  >
+    <DialogTrigger
+      v-if="$slots.trigger"
+      asChild
+    >
+      <slot name="trigger" />
+    </DialogTrigger>
+
     <DialogContent
       :class="contentClass"
       :showCloseButton="false"

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

@@ -36,10 +36,26 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Types: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <ModalContent type="default" content="This is a default message." />
+  <ModalContent type="success" content="Operation completed successfully." />
+  <ModalContent type="info" content="Your changes have been saved." />
+  <ModalContent type="help" content="Need help? Check the documentation." />
+  <ModalContent type="warn" content="This operation will affect all users." />
+  <ModalContent type="danger" content="Are you sure you want to delete this item? This action cannot be undone." />
+  <ModalContent type="error" content="An error occurred while processing your request." />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { ModalContent },
-    setup: () => ({ types }),
     template: `
       <div class="space-y-4 max-w-md">
         <ModalContent type="default" content="This is a default message." />
@@ -55,7 +71,19 @@ export const Types: Story = {
 }
 
 export const WithCustomIcon: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <ModalContent icon="shield-alert" content="Your session is about to expire." />
+  <ModalContent type="warn" icon="shield-alert" content="Security warning: unusual login detected." />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { ModalContent },
     template: `
@@ -69,12 +97,8 @@ export const WithCustomIcon: Story = {
 
 export const MultilineText: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { ModalContent },
-    template: `
-      <div class="max-w-md">
-        <ModalContent type="warn" content="Warning: This operation will affect all users.\nPlease review the changes before proceeding." />
-      </div>
-    `,
-  }),
+  args: {
+    type: 'warn',
+    content: 'Warning: This operation will affect all users.\nPlease review the changes before proceeding.',
+  },
 }

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

@@ -42,34 +42,34 @@ export const Default: Story = {}
 
 export const NoTitle: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { PageCard },
-    template: `
-      <PageCard class="max-w-2xl">
-        <p>A page card without a title — just content.</p>
-      </PageCard>
-    `,
-  }),
+  args: {
+    title: '',
+  },
 }
 
 export const WithSubtitle: Story = {
   parameters: noControls,
-  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>
-    `,
-  }),
+  args: {
+    title: 'Bot Details',
+    subtitle: 'View and edit your bot configuration.',
+  },
 }
 
 export const WithBackButton: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <PageCard title="Edit Profile" :back="{ action: () => {} }" class="max-w-2xl">
+    <p>A page card with a back button in the header.</p>
+  </PageCard>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { PageCard },
     template: `
@@ -81,7 +81,25 @@ export const WithBackButton: Story = {
 }
 
 export const BackWithSubtitle: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { PageCard },
     template: `
@@ -98,7 +116,24 @@ export const BackWithSubtitle: Story = {
 }
 
 export const WithActions: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { PageCard, Button },
     template: `
@@ -114,7 +149,29 @@ export const WithActions: Story = {
 }
 
 export const ActionsSubtitleBack: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { PageCard, WebLink },
     template: `
@@ -135,7 +192,29 @@ export const ActionsSubtitleBack: Story = {
 }
 
 export const CustomTitleSlot: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { PageCard },
     template: `
@@ -156,7 +235,26 @@ export const CustomTitleSlot: Story = {
 }
 
 export const WithFooter: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { PageCard, Button },
     template: `
@@ -175,47 +273,47 @@ export const WithFooter: Story = {
 
 export const CardVariant: Story = {
   parameters: noControls,
-  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>
-    `,
-  }),
+  args: {
+    title: 'Profile',
+    subtitle: 'Rounded corners and a visible border.',
+    variant: 'card',
+  },
 }
 
 export const Loading: Story = {
   parameters: noControls,
-  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>
-    `,
-  }),
+  args: {
+    title: 'Saving…',
+    loading: true,
+  },
 }
 
 export const NotReady: Story = {
   parameters: noControls,
-  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>
-    `,
-  }),
+  args: {
+    title: '',
+    ready: false,
+  },
 }
 
 export const Disabled: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { PageCard, Button },
     template: `

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import Pagination from './index.vue'
 
 const sizes = [ 'default', 'sm' ] as const
@@ -39,18 +40,27 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Sizes: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Pagination :page="3" :total="85" :pageSize="10" size="default" />
+  <Pagination :page="3" :total="85" :pageSize="10" size="sm" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Pagination },
+    setup: () => ({ sizes }),
     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 class="space-y-3">
+        <div v-for="s in sizes" :key="s" class="flex flex-wrap items-center gap-3">
+          <span class="w-16 text-sm text-muted-foreground">{{ s }}</span>
+          <Pagination :page="3" :total="85" :pageSize="10" :size="s" />
         </div>
       </div>
     `,
@@ -58,20 +68,71 @@ export const Sizes: Story = {
 }
 
 export const Simple: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Pagination :page="3" :total="85" :pageSize="10" simple size="default" />
+  <Pagination :page="3" :total="85" :pageSize="10" simple size="sm" />
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Pagination },
+    setup: () => ({ sizes }),
     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 class="space-y-3">
+        <div v-for="s in sizes" :key="s" class="flex flex-wrap items-center gap-3">
+          <span class="w-16 text-sm text-muted-foreground">{{ s }}</span>
+          <Pagination :page="3" :total="85" :pageSize="10" simple :size="s" />
         </div>
       </div>
     `,
   }),
 }
+
+export const EventHandling: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Pagination
+    v-model:page="page"
+    v-model:pageSize="pageSize"
+    :total="85"
+    :pageSizeOptions="[10, 20, 50]"
+    @update:page="onPageUpdate"
+    @update:pageSize="onPageSizeUpdate"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Pagination, EventLog },
+    setup () {
+      const page = ref(1)
+      const pageSize = ref(10)
+      return { page, pageSize }
+    },
+    template: `
+      <EventLog v-slot="{ record }">
+        <Pagination
+          v-model:page="page"
+          v-model:pageSize="pageSize"
+          :total="85"
+          :pageSizeOptions="[10, 20, 50]"
+          @update:page="(v) => record('update:page', v)"
+          @update:pageSize="(v) => record('update:pageSize', v)"
+        />
+      </EventLog>
+    `,
+  }),
+}

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

@@ -125,7 +125,10 @@ const pageSizeMenuItems = computed<DropdownItem[]>(() =>
         :page="page"
         :siblingCount="siblingCount"
         showEdges
-        class="mx-0 w-auto"
+        class="
+          mx-0 w-auto
+          [&_button]:cursor-pointer
+        "
         @update:page="emit('update:page', $event)"
       >
         <PaginationContent v-slot="{ items }">

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

@@ -6,10 +6,23 @@ import Popover from './index.vue'
 const meta = {
   title: 'UI/Popover',
   component: Popover,
-  render: () => ({
+  argTypes: {
+    trigger: { control: 'inline-radio', options: [ 'click', 'hover' ]},
+    side: { control: 'select', options: [ 'top', 'bottom', 'left', 'right' ]},
+    align: { control: 'select', options: [ 'start', 'center', 'end' ]},
+    sideOffset: { control: 'number' },
+  },
+  args: {
+    trigger: 'click',
+    side: undefined,
+    align: undefined,
+    sideOffset: undefined,
+  },
+  render: args => ({
     components: { Popover, Button },
+    setup: () => ({ args }),
     template: `
-      <Popover>
+      <Popover v-bind="args">
         <template #trigger>
           <Button variant="outline">Open Popover</Button>
         </template>
@@ -29,8 +42,65 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
+export const HoverTrigger: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Popover trigger="hover">
+    <template #trigger>
+      <Button variant="outline">Hover me</Button>
+    </template>
+    <div class="space-y-2">
+      <h4 class="font-medium">Hovering opens it</h4>
+      <p class="text-sm text-muted-foreground">Move the cursor away to close.</p>
+    </div>
+  </Popover>
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Popover, Button },
+    template: `
+      <Popover trigger="hover">
+        <template #trigger>
+          <Button variant="outline">Hover me</Button>
+        </template>
+        <div class="space-y-2">
+          <h4 class="font-medium">Hovering opens it</h4>
+          <p class="text-sm text-muted-foreground">Move the cursor away to close.</p>
+        </div>
+      </Popover>
+    `,
+  }),
+}
+
 export const WithForm: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<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>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Popover, Button, Input },
     template: `