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

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

@@ -3,74 +3,132 @@ import type { DropdownItem } from './types'
 import Button from '../Button/index.vue'
 import Dropdown from './index.vue'
 
+const basicMenus: DropdownItem[] = [
+  { label: 'Edit', icon: 'pencil' },
+  { label: 'Duplicate', icon: 'copy' },
+  { type: 'separator' },
+  { label: 'Delete', icon: 'trash-2', color: 'danger' },
+]
+
+const accountMenus: DropdownItem[] = [
+  { label: 'Profile', icon: 'user' },
+  { label: 'Settings', icon: 'settings' },
+  { label: 'Admin Panel', icon: 'shield', disabled: true },
+  { type: 'separator' },
+  { label: 'Logout', icon: 'log-out' },
+]
+
+const linkMenus: DropdownItem[] = [
+  { label: 'Documentation', icon: 'book-open', href: 'https://example.com/docs', target: '_blank' },
+  { label: 'Support', icon: 'life-buoy', href: 'https://example.com/support', target: '_blank' },
+]
+
+const groupedMenus: DropdownItem[] = [
+  { type: 'label', label: 'Organization' },
+  { label: 'Switch Org', icon: 'arrow-left-right' },
+  { type: 'separator' },
+  { type: 'label', label: 'Account' },
+  { label: 'Profile', icon: 'user' },
+  { label: 'Settings', icon: 'settings' },
+  { type: 'separator' },
+  { label: 'Logout', icon: 'log-out' },
+]
+
+const customMenus: DropdownItem[] = [
+  {
+    type: 'custom-label',
+    slot: 'profile',
+    title: 'Demo User',
+    email: 'demo@example.com',
+  },
+  { type: 'separator' },
+  { label: 'Profile', icon: 'user' },
+  { label: 'Settings', icon: 'settings' },
+  { type: 'separator' },
+  {
+    type: 'custom-action',
+    slot: 'logout',
+    command: () => alert('Logged out'),
+  },
+]
+
 const meta = {
   title: 'UI/Dropdown',
   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' ]},
+    sideOffset: { control: 'number' },
+  },
+  args: {
+    menus: basicMenus,
+    trigger: 'click',
+    side: undefined,
+    align: undefined,
+    sideOffset: undefined,
+  },
+  render: args => ({
+    components: { Dropdown, Button },
+    setup: () => ({ args }),
+    template: `
+      <Dropdown v-bind="args">
+        <Button variant="outline">Open Menu</Button>
+      </Dropdown>
+    `,
+  }),
 } satisfies Meta<typeof Dropdown>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-const basicMenus: DropdownItem[] = [
-  { label: 'Edit', icon: 'pencil' },
-  { label: 'Duplicate', icon: 'copy' },
-  { type: 'separator' },
-  { label: 'Delete', icon: 'trash-2', color: 'danger' },
-]
+export const Default: Story = {}
 
-export const Default: Story = {
+export const HoverTrigger: Story = {
   render: () => ({
     components: { Dropdown, Button },
-    setup () {
-      const menus: DropdownItem[] = [
-        { label: 'Profile', icon: 'user' },
-        { label: 'Settings', icon: 'settings' },
-        { label: 'Admin Panel', icon: 'shield', disabled: true },
-        { type: 'separator' },
-        { label: 'Logout', icon: 'log-out' },
-      ]
-
-      const linkMenus: DropdownItem[] = [
-        { label: 'Documentation', icon: 'book-open', href: 'https://example.com/docs', target: '_blank' },
-        { label: 'Support', icon: 'life-buoy', href: 'https://example.com/support', target: '_blank' },
-      ]
-
-      return { basicMenus, menus, linkMenus }
-    },
+    setup: () => ({ basicMenus }),
     template: `
-      <div class="space-y-10">
-        <!-- Hover Trigger -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Hover Trigger</h3>
-          <Dropdown :menus="basicMenus" trigger="hover">
-            <Button variant="outline">Hover me</Button>
-          </Dropdown>
-        </section>
+      <Dropdown :menus="basicMenus" trigger="hover">
+        <Button variant="outline">Hover me</Button>
+      </Dropdown>
+    `,
+  }),
+}
 
-        <!-- Click Trigger -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Click Trigger</h3>
-          <Dropdown :menus="basicMenus" trigger="click">
-            <Button variant="outline">Click me</Button>
-          </Dropdown>
-        </section>
+export const ClickTrigger: Story = {
+  render: () => ({
+    components: { Dropdown, Button },
+    setup: () => ({ basicMenus }),
+    template: `
+      <Dropdown :menus="basicMenus" trigger="click">
+        <Button variant="outline">Click me</Button>
+      </Dropdown>
+    `,
+  }),
+}
 
-        <!-- With Disabled Items -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Disabled Items</h3>
-          <Dropdown :menus="menus" trigger="click">
-            <Button variant="outline">Account</Button>
-          </Dropdown>
-        </section>
+export const WithDisabledItems: Story = {
+  render: () => ({
+    components: { Dropdown, Button },
+    setup: () => ({ accountMenus }),
+    template: `
+      <Dropdown :menus="accountMenus" trigger="click">
+        <Button variant="outline">Account</Button>
+      </Dropdown>
+    `,
+  }),
+}
 
-        <!-- With Links -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Links</h3>
-          <Dropdown :menus="linkMenus" trigger="click">
-            <Button variant="outline">Resources</Button>
-          </Dropdown>
-        </section>
-      </div>
+export const WithLinks: Story = {
+  render: () => ({
+    components: { Dropdown, Button },
+    setup: () => ({ linkMenus }),
+    template: `
+      <Dropdown :menus="linkMenus" trigger="click">
+        <Button variant="outline">Resources</Button>
+      </Dropdown>
     `,
   }),
 }
@@ -78,20 +136,7 @@ export const Default: Story = {
 export const WithGroups: Story = {
   render: () => ({
     components: { Dropdown, Button },
-    setup () {
-      const groupedMenus: DropdownItem[] = [
-        { type: 'label', label: 'Organization' },
-        { label: 'Switch Org', icon: 'arrow-left-right' },
-        { type: 'separator' },
-        { type: 'label', label: 'Account' },
-        { label: 'Profile', icon: 'user' },
-        { label: 'Settings', icon: 'settings' },
-        { type: 'separator' },
-        { label: 'Logout', icon: 'log-out' },
-      ]
-
-      return { groupedMenus }
-    },
+    setup: () => ({ groupedMenus }),
     template: `
       <Dropdown :menus="groupedMenus" trigger="click">
         <Button variant="outline">Menu with Groups</Button>
@@ -100,30 +145,10 @@ export const WithGroups: Story = {
   }),
 }
 
-export const WithCustomSlots: Story = {
+export const CustomSlots: Story = {
   render: () => ({
     components: { Dropdown, Button },
-    setup () {
-      const customMenus: DropdownItem[] = [
-        {
-          type: 'custom-label',
-          slot: 'profile',
-          title: 'Demo User',
-          email: 'demo@example.com',
-        },
-        { type: 'separator' },
-        { label: 'Profile', icon: 'user' },
-        { label: 'Settings', icon: 'settings' },
-        { type: 'separator' },
-        {
-          type: 'custom-action',
-          slot: 'logout',
-          command: () => alert('Logged out'),
-        },
-      ]
-
-      return { customMenus }
-    },
+    setup: () => ({ customMenus }),
     template: `
       <Dropdown :menus="customMenus" trigger="click">
         <Button variant="outline">Custom Slots</Button>
@@ -143,3 +168,23 @@ export const WithCustomSlots: Story = {
     `,
   }),
 }
+
+export const PopupSlot: Story = {
+  render: () => ({
+    components: { Dropdown, Button },
+    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>
+    `,
+  }),
+}

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

@@ -6,7 +6,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/dropdown-menu'
+} from '../../shadcn/dropdown-menu'
 import { cva } from 'class-variance-authority'
 import type {
   DropdownActionItem,
@@ -18,6 +18,10 @@ const actionColorVariants = cva('', {
   variants: {
     color: {
       default: '',
+      primary: `
+        text-primary
+        focus:bg-primary/10 focus:text-primary
+      `,
       success: `
         text-success
         focus:bg-success/10 focus:text-success

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

@@ -1,6 +1,6 @@
 import type { Component } from 'vue'
 
-export type DropdownItemColor = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
+export type DropdownItemColor = 'default' | 'primary' | 'success' | 'info' | 'help' | 'warn' | 'danger'
 
 export interface DropdownActionItem {
   /** Defaults to 'action' when omitted. */

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

@@ -2,68 +2,112 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import Input from '../Input/index.vue'
 import FormItem from './index.vue'
 
+const orientations = [ 'vertical', 'horizontal', 'responsive' ] as const
+
 const meta = {
   title: 'UI/FormItem',
   component: FormItem,
+  argTypes: {
+    label: { control: 'text' },
+    error: { control: 'text' },
+    description: { control: 'text' },
+    required: { control: 'boolean' },
+    orientation: { control: 'select', options: orientations },
+    class: { control: 'text' },
+  },
+  args: {
+    label: 'Name',
+    error: '',
+    description: '',
+    required: false,
+    orientation: 'vertical',
+    class: '',
+  },
+  render: args => ({
+    components: { FormItem, Input },
+    setup: () => ({ args }),
+    template: `
+      <div class="max-w-md">
+        <FormItem v-bind="args">
+          <Input placeholder="Enter value" />
+        </FormItem>
+      </div>
+    `,
+  }),
 } satisfies Meta<typeof FormItem>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const Required: Story = {
   render: () => ({
     components: { FormItem, Input },
     setup () {
-      const name = ref('')
       const email = ref('')
-      return { name, email }
+      return { email }
     },
     template: `
-      <div class="space-y-10 max-w-md">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Basic</h3>
-          <FormItem label="Name">
-            <Input v-model="name" placeholder="Enter your name" />
-          </FormItem>
-        </section>
+      <div class="max-w-md">
+        <FormItem label="Email" required>
+          <Input v-model="email" placeholder="Enter your email" />
+        </FormItem>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Required</h3>
-          <FormItem label="Email" required>
-            <Input v-model="email" placeholder="Enter your email" />
-          </FormItem>
-        </section>
+export const WithError: Story = {
+  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>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Error</h3>
-          <FormItem label="Username" required error="Username is already taken">
-            <Input model-value="admin" />
-          </FormItem>
-        </section>
+export const WithDescription: Story = {
+  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>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Description</h3>
-          <FormItem label="Password" description="Must be at least 8 characters long">
-            <Input type="password" placeholder="Enter password" />
-          </FormItem>
-        </section>
+export const Horizontal: Story = {
+  render: () => ({
+    components: { FormItem, Input },
+    template: `
+      <div class="max-w-md">
+        <FormItem label="Display Name" orientation="horizontal">
+          <Input placeholder="Enter display name" />
+        </FormItem>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Horizontal Orientation</h3>
-          <FormItem label="Display Name" orientation="horizontal">
-            <Input placeholder="Enter display name" />
+export const Responsive: Story = {
+  render: () => ({
+    components: { FormItem, Input },
+    template: `
+      <div class="max-w-md">
+        <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>
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Responsive Orientation</h3>
-          <p class="mb-2 text-sm text-muted-foreground">Drag the right edge to resize ↔</p>
-          <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>
-        </section>
+        </div>
+        <p class="mt-2 text-sm text-muted-foreground">Drag the right edge to resize horizontally.</p>
       </div>
     `,
   }),

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

@@ -5,7 +5,7 @@ import {
   FieldDescription,
   FieldError,
   FieldLabel,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/field'
+} from '../../shadcn/field'
 import type { FormItemProps } from './types'
 
 const props = defineProps<FormItemProps>()

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

@@ -1,53 +1,64 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import Help from './index.vue'
 
+const positions = [ 'top', 'bottom', 'left', 'right' ] as const
+
 const meta = {
   title: 'UI/Help',
   component: Help,
+  argTypes: {
+    text: { control: 'text' },
+    position: { control: 'select', options: positions },
+  },
+  args: {
+    text: 'This is a helpful tooltip',
+    position: 'top',
+  },
+  render: args => ({
+    components: { Help },
+    setup: () => ({ args }),
+    template: '<Help v-bind="args" />',
+  }),
 } satisfies Meta<typeof Help>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const Positions: Story = {
   render: () => ({
     components: { Help },
     template: `
-      <div class="space-y-10">
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Basic</h3>
-          <Help text="This is a helpful tooltip" />
-        </section>
-
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Positions</h3>
-          <div class="flex items-center gap-8 py-10 justify-center">
-            <div class="flex flex-col items-center gap-2">
-              <Help text="Top tooltip" position="top" />
-              <span class="text-sm text-muted-foreground">Top</span>
-            </div>
-            <div class="flex flex-col items-center gap-2">
-              <Help text="Bottom tooltip" position="bottom" />
-              <span class="text-sm text-muted-foreground">Bottom</span>
-            </div>
-            <div class="flex flex-col items-center gap-2">
-              <Help text="Left tooltip" position="left" />
-              <span class="text-sm text-muted-foreground">Left</span>
-            </div>
-            <div class="flex flex-col items-center gap-2">
-              <Help text="Right tooltip" position="right" />
-              <span class="text-sm text-muted-foreground">Right</span>
-            </div>
-          </div>
-        </section>
+      <div class="flex items-center gap-8 py-10 justify-center">
+        <div class="flex flex-col items-center gap-2">
+          <Help text="Top tooltip" position="top" />
+          <span class="text-sm text-muted-foreground">Top</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <Help text="Bottom tooltip" position="bottom" />
+          <span class="text-sm text-muted-foreground">Bottom</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <Help text="Left tooltip" position="left" />
+          <span class="text-sm text-muted-foreground">Left</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <Help text="Right tooltip" position="right" />
+          <span class="text-sm text-muted-foreground">Right</span>
+        </div>
+      </div>
+    `,
+  }),
+}
 
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Inline with Label</h3>
-          <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>
-        </section>
+export const InlineWithLabel: Story = {
+  render: () => ({
+    components: { Help },
+    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>
     `,
   }),