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

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

@@ -1,8 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import Button from '../Button/index.vue'
 import Input from '../Input/index.vue'
+import type { DrawerSide } from './types'
 import Drawer from './index.vue'
 
+const sides: DrawerSide[] = [ 'top', 'right', 'bottom', 'left' ]
+
 const meta = {
   title: 'UI/Drawer',
   component: Drawer,
@@ -14,110 +17,157 @@ const meta = {
     showClose: { control: 'boolean' },
     hideHeader: { control: 'boolean' },
     hideFooter: { control: 'boolean' },
-    side: {
-      control: 'select',
-      options: [ 'top', 'right', 'bottom', 'left' ],
-    },
+    side: { control: 'select', options: sides },
+    title: { control: 'text' },
+    description: { control: 'text' },
+    confirmText: { control: 'text' },
+    cancelText: { control: 'text' },
   },
   args: {
     loading: false,
     disabled: false,
     confirmDisabled: false,
-    showCancel: false,
+    showCancel: true,
     showClose: true,
     hideHeader: false,
     hideFooter: false,
     side: 'right',
+    title: 'Drawer Title',
+    description: '',
+    confirmText: 'OK',
+    cancelText: 'Cancel',
   },
-} satisfies Meta
+  render: args => ({
+    components: { Drawer, Button, Input },
+    setup () {
+      const visible = ref(false)
+      return { args, visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Drawer</Button>
+        <Drawer v-model:visible="visible" v-bind="args">
+          <p>This is the drawer content.</p>
+          <Input class="mt-4" placeholder="Try interacting with this input" />
+        </Drawer>
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof Drawer>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const WithDescription: Story = {
+  render: () => ({
     components: { Drawer, Button, Input },
     setup () {
-      const controlled = ref(false)
-      const withDescription = ref(false)
+      const visible = ref(false)
+      return { visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Drawer</Button>
+        <Drawer
+          v-model:visible="visible"
+          title="Edit Profile"
+          description="Update your personal information. Changes will be visible to other users immediately."
+          showCancel
+          confirmText="Save"
+        >
+          <div class="space-y-3">
+            <Input placeholder="Name" />
+            <Input placeholder="Email" />
+          </div>
+        </Drawer>
+      </div>
+    `,
+  }),
+}
+
+export const ScrollableContent: Story = {
+  render: () => ({
+    components: { Drawer, Button },
+    setup () {
+      const visible = ref(false)
+      return { visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Drawer</Button>
+        <Drawer v-model:visible="visible" title="Terms of Service" showCancel confirmText="Accept">
+          <div class="space-y-4">
+            <p v-for="i in 20" :key="i">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+            </p>
+          </div>
+        </Drawer>
+      </div>
+    `,
+  }),
+}
+
+export const Sides: Story = {
+  render: () => ({
+    components: { Drawer, Button },
+    setup () {
       const sideTop = ref(false)
       const sideRight = ref(false)
       const sideBottom = ref(false)
       const sideLeft = ref(false)
-      const scrollable = ref(false)
-      return { args, controlled, withDescription, sideTop, sideRight, sideBottom, sideLeft, scrollable }
+      return { sideTop, sideRight, sideBottom, sideLeft }
     },
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Button @click="controlled = true">Open Drawer</Button>
-          <Drawer
-            v-model:visible="controlled"
-            v-bind="args"
-            title="Drawer Title"
-            confirmText="OK"
-            cancelText="Cancel"
-          >
-            <p>This is the drawer content.</p>
-            <Input class="mt-4" placeholder="Try interacting with this input" />
-          </Drawer>
-        </section>
-
-        <!-- With Description -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Description</h3>
-          <Button @click="withDescription = true">Open Drawer</Button>
-          <Drawer
-            v-model:visible="withDescription"
-            title="Edit Profile"
-            description="Update your personal information. Changes will be visible to other users immediately."
-            showCancel
-            confirmText="Save"
-          >
-            <div class="space-y-3">
-              <Input placeholder="Name" />
-              <Input placeholder="Email" />
-            </div>
-          </Drawer>
-        </section>
-
-        <!-- Scrollable Content -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Scrollable Content</h3>
-          <Button @click="scrollable = true">Open Drawer</Button>
-          <Drawer v-model:visible="scrollable" title="Terms of Service" showCancel confirmText="Accept">
-            <div class="space-y-4">
-              <p v-for="i in 20" :key="i">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
-              </p>
-            </div>
-          </Drawer>
-        </section>
+      <div>
+        <div class="flex gap-2">
+          <Button variant="outline" @click="sideTop = true">Top</Button>
+          <Button variant="outline" @click="sideRight = true">Right</Button>
+          <Button variant="outline" @click="sideBottom = true">Bottom</Button>
+          <Button variant="outline" @click="sideLeft = true">Left</Button>
+        </div>
+        <Drawer v-model:visible="sideTop" side="top" title="Top Drawer">
+          <p>Slides in from the top.</p>
+        </Drawer>
+        <Drawer v-model:visible="sideRight" side="right" title="Right Drawer">
+          <p>Slides in from the right.</p>
+        </Drawer>
+        <Drawer v-model:visible="sideBottom" side="bottom" title="Bottom Drawer">
+          <p>Slides in from the bottom.</p>
+        </Drawer>
+        <Drawer v-model:visible="sideLeft" side="left" title="Left Drawer">
+          <p>Slides in from the left.</p>
+        </Drawer>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Side Variants -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Side</h3>
-          <div class="flex gap-2">
-            <Button variant="outline" @click="sideTop = true">Top</Button>
-            <Button variant="outline" @click="sideRight = true">Right</Button>
-            <Button variant="outline" @click="sideBottom = true">Bottom</Button>
-            <Button variant="outline" @click="sideLeft = true">Left</Button>
-          </div>
-          <Drawer v-model:visible="sideTop" side="top" title="Top Drawer">
-            <p>Slides in from the top.</p>
-          </Drawer>
-          <Drawer v-model:visible="sideRight" side="right" title="Right Drawer">
-            <p>Slides in from the right.</p>
-          </Drawer>
-          <Drawer v-model:visible="sideBottom" side="bottom" title="Bottom Drawer">
-            <p>Slides in from the bottom.</p>
-          </Drawer>
-          <Drawer v-model:visible="sideLeft" side="left" title="Left Drawer">
-            <p>Slides in from the left.</p>
-          </Drawer>
-        </section>
+export const EventHandling: Story = {
+  render: () => ({
+    components: { Drawer, Button },
+    setup () {
+      const visible = ref(false)
+      return { visible }
+    },
+    template: `
+      <div>
+        <Button @click="visible = true">Open Drawer</Button>
+        <Drawer
+          v-model:visible="visible"
+          title="Event Demo"
+          description="Open the Actions panel to see emitted events."
+          showCancel
+          confirmText="Confirm"
+          @open="() => {}"
+          @close="() => {}"
+          @closed="() => {}"
+          @confirm="() => {}"
+          @cancel="() => {}"
+        >
+          <p>Click Confirm, Cancel, or the close button to see events fire.</p>
+        </Drawer>
       </div>
     `,
   }),

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

@@ -7,7 +7,7 @@ import {
   SheetFooter,
   SheetHeader,
   SheetTitle,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/sheet'
+} from '../../shadcn/sheet'
 import type { DrawerProps } from './types'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
@@ -175,7 +175,6 @@ const contentClass = computed(() =>
 /* Translucent blur backdrop. SheetOverlay is rendered inside DialogPortal
    (outside component scope), so use a non-scoped style. */
 [data-slot='sheet-overlay'] {
-  z-index: 200;
   background-color: rgba(252, 252, 252, 0.3);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
@@ -184,11 +183,6 @@ const contentClass = computed(() =>
   background-color: rgba(25, 25, 25, 0.3);
 }
 
-/* Raise above layout header (z-100) so the drawer covers it. */
-[data-slot='sheet-content'] {
-  z-index: 200;
-}
-
 /* Hide SheetContent's hardcoded built-in close button (no data-slot);
    we render our own SheetClose above with loading-aware disable. */
 [data-slot='sheet-content'] > button:not([data-slot]) {

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

@@ -1,4 +1,4 @@
-import type { ButtonVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import type { ButtonVariants } from '../../shadcn/button'
 
 export type DrawerSide = 'top' | 'right' | 'bottom' | 'left'
 

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. */