@polymarbot/nuxt-layer-shadcn-ui 0.1.0

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

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/sheet'
+import type { DrawerProps } from './types'
+
+const props = withDefaults(defineProps<DrawerProps>(), {
+  showClose: true,
+  side: 'right',
+  title: undefined,
+  description: undefined,
+  confirmText: undefined,
+  cancelText: undefined,
+  confirmVariant: 'default',
+  cancelVariant: 'outline',
+  class: undefined,
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'open': []
+  'close': []
+  'closed': []
+  'confirm': []
+  'cancel': []
+}>()
+
+const { t } = useI18n()
+
+const resolvedConfirmText = computed(
+  () => props.confirmText ?? t('common.actions.confirm'),
+)
+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()
+    }
+  },
+})
+
+watch(() => props.visible, visible => {
+  if (visible) emit('open')
+  else emit('close')
+})
+
+function onConfirm () {
+  emit('confirm')
+  emit('update:visible', false)
+}
+
+function onCancel () {
+  emit('cancel')
+  emit('update:visible', false)
+}
+
+const contentClass = computed(() =>
+  cn('flex flex-col gap-0 p-0', props.class),
+)
+</script>
+
+<template>
+  <Sheet v-model:open="sheetOpen">
+    <SheetContent
+      :side="side"
+      :class="contentClass"
+      @pointerDownOutside.prevent
+      @closeAutoFocus="emit('closed')"
+    >
+      <!-- Header -->
+      <SheetHeader
+        v-if="!hideHeader && (!!title || !!description || !!$slots.header)"
+        class="border-b"
+      >
+        <SheetTitle>
+          <slot name="header">
+            {{ title }}
+          </slot>
+        </SheetTitle>
+        <SheetDescription v-if="description">
+          {{ description }}
+        </SheetDescription>
+        <SheetDescription
+          v-else
+          class="sr-only"
+        />
+      </SheetHeader>
+
+      <!-- A11y fallback: SheetTitle/SheetDescription required by reka-ui -->
+      <template v-else>
+        <SheetTitle class="sr-only">
+          {{ title }}
+        </SheetTitle>
+        <SheetDescription class="sr-only" />
+      </template>
+
+      <!-- Content -->
+      <ScrollArea
+        fadeMask
+        class="min-h-0 flex-1"
+      >
+        <div
+          :inert="loading || disabled || undefined"
+          :class="[ loading || disabled ? 'opacity-50' : undefined ]"
+          class="p-4"
+        >
+          <slot />
+        </div>
+      </ScrollArea>
+
+      <!-- Footer -->
+      <SheetFooter
+        v-if="!hideFooter"
+        class="flex-row items-center border-t"
+      >
+        <slot name="footer">
+          <div class="min-w-0 flex-1">
+            <slot name="footerLeft" />
+          </div>
+
+          <div class="flex shrink-0 justify-end gap-4">
+            <Button
+              v-if="showCancel"
+              class="min-w-24"
+              :variant="cancelVariant"
+              :disabled="loading"
+              @click="onCancel"
+            >
+              {{ resolvedCancelText }}
+            </Button>
+            <Button
+              :class="showCancel ? 'min-w-24' : 'min-w-32'"
+              :variant="confirmVariant"
+              :loading="loading"
+              :disabled="disabled || confirmDisabled"
+              @click="onConfirm"
+            >
+              {{ resolvedConfirmText }}
+            </Button>
+          </div>
+        </slot>
+      </SheetFooter>
+
+      <SheetClose
+        v-if="showClose"
+        :disabled="loading"
+        class="
+          absolute top-3 right-3 flex size-8 items-center justify-center
+          rounded-full text-muted-foreground ring-offset-background transition
+          hover:bg-accent/50 hover:text-foreground
+          focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden
+          disabled:pointer-events-none disabled:opacity-50
+        "
+      >
+        <Icon name="x" />
+        <span class="sr-only">
+          {{ t('common.actions.close') }}
+        </span>
+      </SheetClose>
+    </SheetContent>
+  </Sheet>
+</template>
+
+<style>
+/* 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);
+}
+.dark [data-slot='sheet-overlay'] {
+  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]) {
+  display: none;
+}
+</style>

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

@@ -0,0 +1,22 @@
+import type { ButtonVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+
+export type DrawerSide = 'top' | 'right' | 'bottom' | 'left'
+
+export interface DrawerProps {
+  visible?: boolean
+  loading?: boolean
+  disabled?: boolean
+  confirmDisabled?: boolean
+  showCancel?: boolean
+  showClose?: boolean
+  hideHeader?: boolean
+  hideFooter?: boolean
+  side?: DrawerSide
+  title?: string
+  description?: string
+  confirmText?: string
+  cancelText?: string
+  confirmVariant?: ButtonVariants['variant']
+  cancelVariant?: ButtonVariants['variant']
+  class?: ClassValue
+}

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

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { DropdownItem } from './types'
+import Button from '../Button/index.vue'
+import Dropdown from './index.vue'
+
+const meta = {
+  title: 'UI/Dropdown',
+  component: 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 = {
+  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 }
+    },
+    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>
+
+        <!-- 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>
+
+        <!-- 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>
+
+        <!-- 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 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 }
+    },
+    template: `
+      <Dropdown :menus="groupedMenus" trigger="click">
+        <Button variant="outline">Menu with Groups</Button>
+      </Dropdown>
+    `,
+  }),
+}
+
+export const WithCustomSlots: 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 }
+    },
+    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>
+    `,
+  }),
+}

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

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/dropdown-menu'
+import { cva } from 'class-variance-authority'
+import type {
+  DropdownActionItem,
+  DropdownCustomActionItem,
+  DropdownProps,
+} from './types'
+
+const actionColorVariants = cva('', {
+  variants: {
+    color: {
+      default: '',
+      success: `
+        text-success
+        focus:bg-success/10 focus:text-success
+      `,
+      info: `
+        text-info
+        focus:bg-info/10 focus:text-info
+      `,
+      help: `
+        text-help
+        focus:bg-help/10 focus:text-help
+      `,
+      warn: `
+        text-warn
+        focus:bg-warn/10 focus:text-warn
+      `,
+      danger: `
+        text-danger
+        focus:bg-danger/10 focus:text-danger
+      `,
+    },
+  },
+  defaultVariants: { color: 'default' },
+})
+
+const props = withDefaults(defineProps<DropdownProps>(), {
+  menus: () => [],
+  trigger: 'hover',
+  side: undefined,
+  align: undefined,
+  sideOffset: undefined,
+  class: undefined,
+})
+
+defineSlots<{
+  default?: () => unknown
+  popup?: (props: { hide: () => void }) => unknown
+  [key: string]: ((props?: any) => unknown) | undefined
+}>()
+
+const { isMobile } = useDevice()
+
+// Force click trigger on mobile devices for better touch experience
+const effectiveTrigger = computed(() => {
+  return isMobile.value ? 'click' : props.trigger
+})
+
+const isOpen = ref(false)
+let hideTimeout: ReturnType<typeof setTimeout> | null = null
+
+const clearHideTimeout = () => {
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+}
+
+const hide = () => {
+  isOpen.value = false
+}
+
+const handleTriggerEnter = () => {
+  if (effectiveTrigger.value === 'hover') {
+    clearHideTimeout()
+    isOpen.value = true
+  }
+}
+
+const handleTriggerLeave = () => {
+  if (effectiveTrigger.value === 'hover') {
+    hideTimeout = setTimeout(hide, 100)
+  }
+}
+
+const handleMenuEnter = () => {
+  if (effectiveTrigger.value === 'hover') {
+    clearHideTimeout()
+  }
+}
+
+const handleMenuLeave = () => {
+  if (effectiveTrigger.value === 'hover') {
+    hideTimeout = setTimeout(hide, 100)
+  }
+}
+
+const handleItemAction = (
+  item: DropdownActionItem | DropdownCustomActionItem,
+  event?: Event,
+) => {
+  if (item.disabled) {
+    event?.preventDefault()
+    return
+  }
+  item.command?.()
+  hide()
+}
+
+onBeforeUnmount(() => {
+  clearHideTimeout()
+})
+</script>
+
+<template>
+  <DropdownMenu
+    v-model:open="isOpen"
+    :modal="effectiveTrigger !== 'hover'"
+  >
+    <DropdownMenuTrigger
+      asChild
+      @mouseenter="handleTriggerEnter"
+      @mouseleave="handleTriggerLeave"
+    >
+      <slot />
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      :side="side"
+      :align="align"
+      :sideOffset="sideOffset"
+      :class="props.class"
+      @mouseenter="handleMenuEnter"
+      @mouseleave="handleMenuLeave"
+    >
+      <!-- Custom popup content -->
+      <template v-if="$slots.popup">
+        <slot
+          name="popup"
+          :hide="hide"
+        />
+      </template>
+
+      <!-- Default menu dropdown -->
+      <template v-else>
+        <template
+          v-for="(item, index) in menus"
+          :key="index"
+        >
+          <!-- Built-in: separator -->
+          <DropdownMenuSeparator v-if="item.type === 'separator'" />
+          <!-- Built-in: group label -->
+          <DropdownMenuLabel
+            v-else-if="item.type === 'label'"
+            class="text-xs font-normal text-muted-foreground"
+          >
+            {{ item.label }}
+          </DropdownMenuLabel>
+          <!-- Custom label: content via named slot -->
+          <DropdownMenuLabel
+            v-else-if="item.type === 'custom-label'"
+            :class="cn('p-0 font-normal', item.class)"
+          >
+            <slot
+              :name="item.slot"
+              :item="item"
+            />
+          </DropdownMenuLabel>
+          <!-- Custom action: content via named slot -->
+          <DropdownMenuItem
+            v-else-if="item.type === 'custom-action'"
+            :disabled="item.disabled"
+            :class="cn(actionColorVariants({ color: item.color }), item.class)"
+            @click="handleItemAction(item, $event)"
+          >
+            <slot
+              :name="item.slot"
+              :item="item"
+            />
+            <Icon
+              v-if="item.active"
+              name="check"
+              class="ml-auto size-4"
+            />
+          </DropdownMenuItem>
+          <!-- Built-in: action (default) -->
+          <DropdownMenuItem
+            v-else
+            :disabled="item.disabled"
+            :asChild="!!item.href"
+            :class="cn(actionColorVariants({ color: item.color }), item.class)"
+            @click="!item.href && handleItemAction(item, $event)"
+          >
+            <template v-if="item.href">
+              <WebLink
+                unstyled
+                :href="item.href"
+                :target="item.target"
+                class="flex w-full items-center gap-2"
+                @click="handleItemAction(item, $event)"
+              >
+                <Icon
+                  v-if="typeof item.icon === 'string'"
+                  :name="item.icon"
+                />
+                <component
+                  :is="item.icon"
+                  v-else-if="item.icon"
+                  class="size-4"
+                />
+                <span class="flex-1">
+                  {{ item.label }}
+                </span>
+                <Icon
+                  v-if="isUrl(item.href)"
+                  name="external-link"
+                  class="size-3.5 text-muted-foreground"
+                />
+                <Icon
+                  v-if="item.active"
+                  name="check"
+                  class="size-4"
+                />
+              </WebLink>
+            </template>
+            <template v-else>
+              <Icon
+                v-if="typeof item.icon === 'string'"
+                :name="item.icon"
+              />
+              <component
+                :is="item.icon"
+                v-else-if="item.icon"
+                class="size-4"
+              />
+              <span class="flex-1">
+                {{ item.label }}
+              </span>
+              <Icon
+                v-if="item.active"
+                name="check"
+                class="size-4"
+              />
+            </template>
+          </DropdownMenuItem>
+        </template>
+      </template>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

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

@@ -0,0 +1,87 @@
+import type { Component } from 'vue'
+
+export type DropdownItemColor = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
+
+export interface DropdownActionItem {
+  /** Defaults to 'action' when omitted. */
+  type?: 'action'
+  /** Semantic color, matches project-wide color scheme. Defaults to 'default'. */
+  color?: DropdownItemColor
+  label?: string
+  icon?: string | Component
+  command?: () => void
+  disabled?: boolean
+  active?: boolean
+  class?: ClassValue
+  href?: string
+  target?: string
+}
+
+export interface DropdownSeparatorItem {
+  type: 'separator'
+}
+
+export interface DropdownLabelItem {
+  type: 'label'
+  label: string
+}
+
+/**
+ * Custom action item: rendered as DropdownMenuItem, content comes from
+ * a named slot (`slot` field). Arbitrary extra fields are passed through
+ * to the slot as `item` for rendering.
+ */
+export interface DropdownCustomActionItem {
+  type: 'custom-action'
+  /** Semantic color, matches project-wide color scheme. Defaults to 'default'. */
+  color?: DropdownItemColor
+  slot: string
+  command?: () => void
+  disabled?: boolean
+  active?: boolean
+  class?: ClassValue
+  [field: string]: unknown
+}
+
+/**
+ * Custom label item: rendered as DropdownMenuLabel, content comes from
+ * a named slot (`slot` field). Arbitrary extra fields are passed through
+ * to the slot as `item` for rendering.
+ */
+export interface DropdownCustomLabelItem {
+  type: 'custom-label'
+  slot: string
+  class?: ClassValue
+  [field: string]: unknown
+}
+
+/**
+ * Menu item discriminated by `type`.
+ *
+ * - 'action' (default): built-in action rendering.
+ * - 'separator': visual divider.
+ * - 'label': built-in group header.
+ * - 'custom-action' / 'custom-label': rendered via named `slot`, allowing
+ *   arbitrary extra fields that the slot consumer can access via `item`.
+ */
+export type DropdownItem
+  = | DropdownActionItem
+    | DropdownSeparatorItem
+    | DropdownLabelItem
+    | DropdownCustomActionItem
+    | DropdownCustomLabelItem
+
+export interface DropdownProps {
+  /** Menu items to display in the dropdown (not required when using popup slot) */
+  menus?: DropdownItem[]
+  /** Trigger mode for showing the dropdown */
+  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
+}