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

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

@@ -7,6 +7,7 @@ import {
   SheetFooter,
   SheetHeader,
   SheetTitle,
+  SheetTrigger,
 } from '../../shadcn/sheet'
 import type { DrawerProps } from './types'
 
@@ -41,28 +42,32 @@ const resolvedCancelText = computed(
   () => props.cancelText || t('common.actions.cancel'),
 )
 
-const sheetOpen = computed({
-  get: () => props.visible ?? false,
-  set: (value: boolean) => {
-    if (!value && props.visible && !props.loading) {
-      onCancel()
-    }
-  },
+const sheetOpen = ref(props.visible ?? false)
+
+watch(() => props.visible, value => {
+  if (value !== undefined) sheetOpen.value = value
 })
 
-watch(() => props.visible, visible => {
-  if (visible) emit('open')
+watch(sheetOpen, value => {
+  emit('update:visible', value)
+  if (value) emit('open')
   else emit('close')
 })
 
+function onOpenUpdate (value: boolean) {
+  if (!value && props.loading) return
+  if (value) sheetOpen.value = true
+  else onCancel()
+}
+
 function onConfirm () {
   emit('confirm')
-  emit('update:visible', false)
+  sheetOpen.value = false
 }
 
 function onCancel () {
   emit('cancel')
-  emit('update:visible', false)
+  sheetOpen.value = false
 }
 
 function onPointerDownOutside (event: Event) {
@@ -75,7 +80,17 @@ const contentClass = computed(() =>
 </script>
 
 <template>
-  <Sheet v-model:open="sheetOpen">
+  <Sheet
+    :open="sheetOpen"
+    @update:open="onOpenUpdate"
+  >
+    <SheetTrigger
+      v-if="$slots.trigger"
+      asChild
+    >
+      <slot name="trigger" />
+    </SheetTrigger>
+
     <SheetContent
       :side="side"
       :class="contentClass"

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

@@ -3,6 +3,10 @@ import type { DropdownItem } from './types'
 import Button from '../Button/index.vue'
 import Dropdown from './index.vue'
 
+const triggers = [ 'click', 'hover' ] as const
+const sides = [ 'top', 'bottom', 'left', 'right' ] as const
+const aligns = [ 'start', 'center', 'end' ] as const
+
 const basicMenus: DropdownItem[] = [
   { label: 'Edit', icon: 'pencil' },
   { label: 'Duplicate', icon: 'copy' },
@@ -57,9 +61,9 @@ const meta = {
   component: Dropdown,
   argTypes: {
     menus: { control: 'object' },
-    trigger: { control: 'inline-radio', options: [ 'click', 'hover' ]},
-    side: { control: 'select', options: [ 'top', 'bottom', 'left', 'right' ]},
-    align: { control: 'select', options: [ 'start', 'center', 'end' ]},
+    trigger: { control: 'inline-radio', options: triggers },
+    side: { control: 'select', options: sides },
+    align: { control: 'select', options: aligns },
     sideOffset: { control: 'number' },
   },
   args: {
@@ -89,71 +93,63 @@ export const Default: Story = {}
 
 export const HoverTrigger: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Dropdown, Button },
-    setup: () => ({ basicMenus }),
-    template: `
-      <Dropdown :menus="basicMenus" trigger="hover">
-        <Button variant="outline">Hover me</Button>
-      </Dropdown>
-    `,
-  }),
-}
-
-export const ClickTrigger: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Dropdown, Button },
-    setup: () => ({ basicMenus }),
-    template: `
-      <Dropdown :menus="basicMenus" trigger="click">
-        <Button variant="outline">Click me</Button>
-      </Dropdown>
-    `,
-  }),
+  args: {
+    menus: basicMenus,
+    trigger: 'hover',
+  },
 }
 
 export const WithDisabledItems: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Dropdown, Button },
-    setup: () => ({ accountMenus }),
-    template: `
-      <Dropdown :menus="accountMenus" trigger="click">
-        <Button variant="outline">Account</Button>
-      </Dropdown>
-    `,
-  }),
+  args: {
+    menus: accountMenus,
+    trigger: 'click',
+  },
 }
 
 export const WithLinks: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Dropdown, Button },
-    setup: () => ({ linkMenus }),
-    template: `
-      <Dropdown :menus="linkMenus" trigger="click">
-        <Button variant="outline">Resources</Button>
-      </Dropdown>
-    `,
-  }),
+  args: {
+    menus: linkMenus,
+    trigger: 'click',
+  },
 }
 
 export const WithGroups: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Dropdown, Button },
-    setup: () => ({ groupedMenus }),
-    template: `
-      <Dropdown :menus="groupedMenus" trigger="click">
-        <Button variant="outline">Menu with Groups</Button>
-      </Dropdown>
-    `,
-  }),
+  args: {
+    menus: groupedMenus,
+    trigger: 'click',
+  },
 }
 
 export const CustomSlots: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Dropdown :menus="customMenus" trigger="click">
+    <Button variant="outline">Custom Slots</Button>
+    <template #profile="{ item }">
+      <div class="flex flex-col gap-1 px-2 py-1.5">
+        <span class="font-semibold text-sm">{{ item.title }}</span>
+        <span class="text-xs text-muted-foreground">{{ item.email }}</span>
+      </div>
+    </template>
+    <template #logout>
+      <span class="flex items-center gap-2 text-danger font-semibold">
+        <span>🚪</span>
+        <span>Custom Logout</span>
+      </span>
+    </template>
+  </Dropdown>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Dropdown, Button },
     setup: () => ({ customMenus }),
@@ -178,7 +174,29 @@ export const CustomSlots: Story = {
 }
 
 export const PopupSlot: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Dropdown trigger="click">
+    <Button variant="outline">Custom Popup</Button>
+    <template #popup="{ hide }">
+      <div class="flex flex-col gap-2 p-3 min-w-[220px]">
+        <div class="text-sm font-semibold">Custom content</div>
+        <p class="text-sm text-muted-foreground">
+          Use the <code>popup</code> slot to render arbitrary content inside the menu.
+        </p>
+        <Button size="sm" @click="hide">Close</Button>
+      </div>
+    </template>
+  </Dropdown>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Dropdown, Button },
     template: `

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

@@ -47,12 +47,11 @@ const actionColorVariants = cva('', {
   defaultVariants: { color: 'default' },
 })
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<DropdownProps>(), {
   menus: () => [],
   trigger: 'hover',
-  side: undefined,
-  align: undefined,
-  sideOffset: undefined,
   class: undefined,
 })
 
@@ -138,9 +137,7 @@ onBeforeUnmount(() => {
       <slot />
     </DropdownMenuTrigger>
     <DropdownMenuContent
-      :side="side"
-      :align="align"
-      :sideOffset="sideOffset"
+      v-bind="$attrs"
       :class="props.class"
       @mouseenter="handleMenuEnter"
       @mouseleave="handleMenuLeave"
@@ -192,7 +189,7 @@ onBeforeUnmount(() => {
             <Icon
               v-if="item.active"
               name="check"
-              class="ml-auto size-4"
+              class="size-4 ml-auto"
             />
           </DropdownMenuItem>
           <!-- Built-in: action (default) -->
@@ -208,7 +205,7 @@ onBeforeUnmount(() => {
                 unstyled
                 :href="item.href"
                 :target="item.target"
-                class="flex w-full items-center gap-2"
+                class="gap-2 flex w-full items-center"
                 @click="handleItemAction(item, $event)"
               >
                 <Icon

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

@@ -1,3 +1,4 @@
+import type { DropdownMenuContentProps } from 'reka-ui'
 import type { Component } from 'vue'
 
 export type DropdownItemColor = 'default' | 'primary' | 'success' | 'info' | 'help' | 'warn' | 'danger'
@@ -71,17 +72,11 @@ export type DropdownItem
     | DropdownCustomActionItem
     | DropdownCustomLabelItem
 
-export interface DropdownProps {
+export interface DropdownProps extends /* @vue-ignore */ DropdownMenuContentProps {
   /** Menu items to display in the dropdown (not required when using popup slot) */
   menus?: DropdownItem[]
-  /** Trigger mode for showing the dropdown */
+  /** Trigger mode for showing the dropdown. Defaults to 'hover'. */
   trigger?: 'click' | 'hover'
-  /** Preferred side of the trigger to render against. */
-  side?: 'top' | 'bottom' | 'left' | 'right'
-  /** Alignment against the trigger. */
-  align?: 'start' | 'center' | 'end'
-  /** Distance in pixels from the trigger. */
-  sideOffset?: number
   /** Extra class for the dropdown content container. */
   class?: ClassValue
 }

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

@@ -45,66 +45,54 @@ export const Default: Story = {}
 
 export const Required: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { FormItem, Input },
-    setup () {
-      const email = ref('')
-      return { email }
-    },
-    template: `
-      <div class="max-w-md">
-        <FormItem label="Email" required>
-          <Input v-model="email" placeholder="Enter your email" />
-        </FormItem>
-      </div>
-    `,
-  }),
+  args: {
+    label: 'Email',
+    required: true,
+  },
 }
 
 export const WithError: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { FormItem, Input },
-    template: `
-      <div class="max-w-md">
-        <FormItem label="Username" required error="Username is already taken">
-          <Input model-value="admin" />
-        </FormItem>
-      </div>
-    `,
-  }),
+  args: {
+    label: 'Username',
+    required: true,
+    error: 'Username is already taken',
+  },
 }
 
 export const WithDescription: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { FormItem, Input },
-    template: `
-      <div class="max-w-md">
-        <FormItem label="Password" description="Must be at least 8 characters long">
-          <Input type="password" placeholder="Enter password" />
-        </FormItem>
-      </div>
-    `,
-  }),
+  args: {
+    label: 'Password',
+    description: 'Must be at least 8 characters long',
+  },
 }
 
 export const Horizontal: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { FormItem, Input },
-    template: `
-      <div class="max-w-md">
-        <FormItem label="Display Name" orientation="horizontal">
-          <Input placeholder="Enter display name" />
-        </FormItem>
-      </div>
-    `,
-  }),
+  args: {
+    label: 'Display Name',
+    orientation: 'horizontal',
+  },
 }
 
 export const Responsive: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="@container/field-group resize-x overflow-auto rounded border border-dashed border-border bg-card p-4" style="min-width: 200px;">
+    <FormItem label="Address" orientation="responsive" description="Your mailing address">
+      <Input placeholder="Enter address" />
+    </FormItem>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { FormItem, Input },
     template: `

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

@@ -9,10 +9,12 @@ const meta = {
   argTypes: {
     text: { control: 'text' },
     position: { control: 'select', options: positions },
+    class: { control: 'text' },
   },
   args: {
     text: 'This is a helpful tooltip',
     position: 'top',
+    class: '',
   },
   render: args => ({
     components: { Help },
@@ -29,7 +31,23 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const Positions: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex items-center gap-8 py-10 justify-center">
+    <Help text="Top tooltip" position="top" />
+    <Help text="Bottom tooltip" position="bottom" />
+    <Help text="Left tooltip" position="left" />
+    <Help text="Right tooltip" position="right" />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Help },
     template: `
@@ -56,7 +74,21 @@ export const Positions: Story = {
 }
 
 export const InlineWithLabel: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex items-center gap-1">
+    <span class="text-sm font-medium">API Key</span>
+    <Help text="Your unique API key for authentication" />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Help },
     template: `

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

@@ -15,9 +15,11 @@ const meta = {
   component: Icon,
   argTypes: {
     name: { control: 'text' },
+    class: { control: 'text' },
   },
   args: {
     name: 'house',
+    class: '',
   },
   render: args => ({
     components: { Icon },
@@ -34,7 +36,27 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 export const Default: Story = {}
 
 export const CommonIcons: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="grid grid-cols-8 gap-4">
+    <div
+      v-for="name in commonIcons"
+      :key="name"
+      class="flex flex-col items-center gap-2 rounded-md border p-3"
+    >
+      <Icon :name="name" class="size-5" />
+      <span class="text-xs text-muted-foreground">{{ name }}</span>
+    </div>
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Icon },
     setup: () => ({ commonIcons }),
@@ -54,7 +76,24 @@ export const CommonIcons: Story = {
 }
 
 export const Sizes: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <div class="flex items-end gap-4">
+    <Icon name="star" class="size-3" />
+    <Icon name="star" class="size-4" />
+    <Icon name="star" class="size-5" />
+    <Icon name="star" class="size-6" />
+    <Icon name="star" class="size-8" />
+  </div>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Icon },
     template: `

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
 import Icon from '../Icon/index.vue'
 import Input from './index.vue'
 
@@ -11,6 +12,7 @@ const meta = {
     disabled: { control: 'boolean' },
     readonly: { control: 'boolean' },
     invalid: { control: 'boolean' },
+    class: { control: 'text' },
   },
   args: {
     modelValue: '',
@@ -18,12 +20,13 @@ const meta = {
     disabled: false,
     readonly: false,
     invalid: false,
+    class: 'max-w-sm',
   },
   render: args => ({
     components: { Input },
     setup: () => ({ args }),
     template: `
-      <Input v-bind="args" placeholder="Type something..." class="max-w-sm" />
+      <Input v-bind="args" placeholder="Type something..." />
     `,
   }),
 } satisfies Meta<typeof Input>
@@ -35,25 +38,23 @@ const noControls = { controls: { disable: true }} satisfies Story['parameters']
 
 export const Default: Story = {}
 
-export const Controlled: Story = {
-  parameters: noControls,
-  render: () => ({
-    components: { Input },
-    setup () {
-      const value = ref('')
-      return { value }
-    },
-    template: `
-      <div class="max-w-sm space-y-2">
-        <Input v-model="value" placeholder="Enter your name..." />
-        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
-}
-
 export const WithPrefix: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Input v-model="value" placeholder="Search...">
+    <template #prefix>
+      <Icon name="search" />
+    </template>
+  </Input>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Input, Icon },
     setup () {
@@ -74,7 +75,22 @@ export const WithPrefix: Story = {
 }
 
 export const WithSuffix: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Input v-model="value" placeholder="Email">
+    <template #suffix>
+      <Icon name="mail" />
+    </template>
+  </Input>
+</template>
+`.trim(),
+      },
+    },
+  },
   render: () => ({
     components: { Input, Icon },
     setup () {
@@ -95,7 +111,14 @@ export const WithSuffix: Story = {
 }
 
 export const Password: Story = {
-  parameters: noControls,
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: '<Input v-model="value" type="password" placeholder="Password" />',
+      },
+    },
+  },
   render: () => ({
     components: { Input },
     setup () {
@@ -113,24 +136,43 @@ export const Password: Story = {
 
 export const Disabled: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Input },
-    template: '<Input disabled placeholder="Disabled input" class="max-w-sm" />',
-  }),
+  args: {
+    disabled: true,
+    modelValue: 'Disabled input',
+  },
 }
 
 export const Readonly: Story = {
   parameters: noControls,
-  render: () => ({
-    components: { Input },
-    template: '<Input readonly modelValue="Read-only value" class="max-w-sm" />',
-  }),
+  args: {
+    readonly: true,
+    modelValue: 'Read-only value',
+  },
 }
 
 export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    invalid: true,
+    modelValue: 'Invalid value',
+  },
+}
+
+export const EventHandling: Story = {
   parameters: noControls,
   render: () => ({
-    components: { Input },
-    template: '<Input invalid modelValue="Invalid value" class="max-w-sm" />',
+    components: { Input, EventLog },
+    setup: () => ({ value: ref('') }),
+    template: `
+      <EventLog v-slot="{ record }">
+        <Input
+          v-model="value"
+          class="max-w-sm"
+          placeholder="Type and blur to see events"
+          @update:modelValue="(v) => record('update:modelValue', v)"
+          @change="(v) => record('change', v)"
+        />
+      </EventLog>
+    `,
   }),
 }