@polymarbot/nuxt-layer-shadcn-ui 0.1.0

package/app/components/shadcn/tooltip/TooltipProvider.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui"
+import { TooltipProvider } from "reka-ui"
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/app/components/shadcn/tooltip/TooltipTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui"
+import { TooltipTrigger } from "reka-ui"
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>

package/app/components/shadcn/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"

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

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Icon from '../Icon/index.vue'
+import Surface from '../Surface/index.vue'
+import type { AccordionItem } from './types'
+import Accordion from './index.vue'
+
+const items: AccordionItem[] = [
+  {
+    value: 'shipping',
+    title: 'Shipping & delivery',
+    content:
+      'Orders are processed within 1-2 business days. Standard shipping takes 3-5 business days within the continental US.',
+  },
+  {
+    value: 'returns',
+    title: 'Returns policy',
+    content:
+      'We accept returns within 30 days of purchase. Items must be unworn with original tags attached.',
+  },
+  {
+    value: 'support',
+    title: 'Customer support',
+    content:
+      'Our support team is available Monday through Friday, 9am-6pm EST. Reach out via chat or email for assistance.',
+  },
+]
+
+const meta = {
+  title: 'UI/Accordion',
+  component: Accordion as any,
+  argTypes: {
+    type: { control: 'select', options: [ 'single', 'multiple' ]},
+    collapsible: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    type: 'single',
+    collapsible: true,
+    disabled: false,
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Accordion, Surface, Icon },
+    setup () {
+      const singleValue = ref<string>('shipping')
+      const multipleValue = ref<string[]>([ 'shipping', 'returns' ])
+      const slotValue = ref<string>('shipping')
+      return { args, items, singleValue, multipleValue, slotValue }
+    },
+    template: `
+      <div class="max-w-md space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Surface variant="bordered" class="px-4">
+            <Accordion
+              v-model="singleValue"
+              v-bind="args"
+              :items="items"
+            />
+          </Surface>
+          <div class="mt-3 text-sm text-muted-foreground">Open: {{ singleValue || '(none)' }}</div>
+        </section>
+
+        <!-- Multiple -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Multiple</h3>
+          <Surface variant="bordered" class="px-4">
+            <Accordion
+              v-model="multipleValue"
+              type="multiple"
+              :items="items"
+            />
+          </Surface>
+          <div class="mt-3 text-sm text-muted-foreground">Open: {{ multipleValue.join(', ') || '(none)' }}</div>
+        </section>
+
+        <!-- Custom Slots -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Custom Slots</h3>
+          <Surface variant="bordered" class="px-4">
+            <Accordion
+              v-model="slotValue"
+              :items="items"
+            >
+              <template #title="{ item, open }">
+                <span class="flex items-center gap-2">
+                  <span class="inline-flex size-5 items-center justify-center rounded-full bg-primary/15 text-primary">
+                    <Icon :name="open ? 'minus' : 'plus'" class="size-3" />
+                  </span>
+                  {{ item.title }}
+                </span>
+              </template>
+              <template #content="{ item }">
+                <p class="text-muted-foreground">{{ item.content }}</p>
+              </template>
+            </Accordion>
+          </Surface>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import {
+  Accordion as ShadcnAccordion,
+  AccordionContent,
+  AccordionItem as ShadcnAccordionItem,
+  AccordionTrigger,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/accordion'
+import type { AccordionRootProps } from 'reka-ui'
+import type { AccordionItem, AccordionProps } from './types'
+
+const props = withDefaults(defineProps<AccordionProps>(), {
+  items: () => [],
+  type: 'single',
+  modelValue: undefined,
+  defaultValue: undefined,
+  collapsible: true,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | string[] | undefined]
+}>()
+
+defineSlots<{
+  title?: (props: { item: AccordionItem, open: boolean }) => unknown
+  content?: (props: { item: AccordionItem, open: boolean }) => unknown
+}>()
+
+const rootProps = computed<AccordionRootProps>(() => {
+  if (props.type === 'multiple') {
+    return {
+      type: 'multiple',
+      modelValue: props.modelValue as string[] | undefined,
+      defaultValue: props.defaultValue as string[] | undefined,
+      disabled: props.disabled,
+    }
+  }
+  return {
+    type: 'single',
+    modelValue: props.modelValue as string | undefined,
+    defaultValue: props.defaultValue as string | undefined,
+    collapsible: props.collapsible,
+    disabled: props.disabled,
+  }
+})
+</script>
+
+<template>
+  <ShadcnAccordion
+    v-bind="rootProps"
+    @update:modelValue="value => emit('update:modelValue', value)"
+  >
+    <ShadcnAccordionItem
+      v-for="item in items"
+      :key="item.value"
+      v-slot="{ open }"
+      :value="item.value"
+      :disabled="item.disabled"
+    >
+      <AccordionTrigger>
+        <slot
+          name="title"
+          :item="item"
+          :open="open"
+        >
+          {{ item.title }}
+        </slot>
+      </AccordionTrigger>
+      <AccordionContent>
+        <slot
+          name="content"
+          :item="item"
+          :open="open"
+        >
+          {{ item.content }}
+        </slot>
+      </AccordionContent>
+    </ShadcnAccordionItem>
+  </ShadcnAccordion>
+</template>

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

@@ -0,0 +1,27 @@
+export interface AccordionItem {
+  value: string
+  title?: string
+  content?: string
+  disabled?: boolean
+}
+
+export type AccordionBaseProps = {
+  items?: AccordionItem[]
+  disabled?: boolean
+}
+
+export type AccordionSingleProps = AccordionBaseProps & {
+  type?: 'single'
+  modelValue?: string
+  defaultValue?: string
+  /** Only applies to single type: whether the open item can be toggled closed. */
+  collapsible?: boolean
+}
+
+export type AccordionMultipleProps = AccordionBaseProps & {
+  type?: 'multiple'
+  modelValue?: string[]
+  defaultValue?: string[]
+}
+
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Alert from './index.vue'
+
+type AlertType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
+
+const types: AlertType[] = [ 'default', 'success', 'info', 'help', 'warn', 'danger' ]
+
+const meta = {
+  title: 'UI/Alert',
+  component: Alert,
+  argTypes: {
+    type: { control: 'select', options: types },
+    icon: { control: 'text' },
+  },
+  args: {
+    type: 'default',
+  },
+} satisfies Meta<typeof Alert>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Alert },
+    setup: () => ({ args, types }),
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Alert v-bind="args">This is a controlled alert message.</Alert>
+        </section>
+
+        <!-- All Types -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">All Types</h3>
+          <div class="space-y-3">
+            <Alert v-for="t in types" :key="t" :type="t">
+              This is a <strong>{{ t }}</strong> alert message.
+            </Alert>
+          </div>
+        </section>
+
+        <!-- Custom Icon -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Custom Icon</h3>
+          <Alert type="info" icon="bell">Alert with a custom bell icon.</Alert>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Alert as ShadcnAlert } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/alert'
+import type { AlertProps, AlertType } from './types'
+
+const typeIconNameMap: Record<AlertType, string> = {
+  default: 'info',
+  success: 'circle-check',
+  info: 'info',
+  help: 'circle-question-mark',
+  warn: 'triangle-alert',
+  danger: 'circle-x',
+}
+
+const typeClasses: Record<AlertType, string> = {
+  default: 'border-border! bg-secondary text-secondary-foreground [&>svg]:text-secondary-foreground',
+  success: 'border-success/50! bg-success/10 text-success [&>svg]:text-success',
+  info: 'border-info/50! bg-info/10 text-info [&>svg]:text-info',
+  help: 'border-help/50! bg-help/10 text-help [&>svg]:text-help',
+  warn: 'border-warn/50! bg-warn/10 text-warn [&>svg]:text-warn',
+  danger: 'border-danger/50! bg-danger/10 text-danger [&>svg]:text-danger',
+}
+
+const props = withDefaults(defineProps<AlertProps>(), {
+  type: 'default',
+  icon: undefined,
+  class: undefined,
+})
+
+const defaultIconName = computed(() => {
+  if (props.icon) return undefined
+  return typeIconNameMap[props.type]
+})
+
+const mergedClass = computed(() =>
+  cn(
+    typeClasses[props.type],
+    props.class,
+  ),
+)
+</script>
+
+<template>
+  <ShadcnAlert :class="mergedClass">
+    <Icon
+      v-if="typeof icon === 'string'"
+      :name="icon"
+    />
+    <component
+      :is="icon"
+      v-else-if="icon"
+      class="size-4"
+    />
+    <Icon
+      v-else-if="defaultIconName"
+      :name="defaultIconName"
+    />
+    <div>
+      <slot />
+    </div>
+  </ShadcnAlert>
+</template>

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

@@ -0,0 +1,9 @@
+import type { Component } from 'vue'
+
+export type AlertType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
+
+export interface AlertProps {
+  type?: AlertType
+  icon?: string | Component
+  class?: ClassValue
+}

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

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { useDialog } from '../../../composables/useDialog'
+import Button from '../Button/index.vue'
+import AlertDialog from './index.vue'
+
+const meta = {
+  title: 'UI/AlertDialog',
+  component: AlertDialog,
+  decorators: [
+    () => ({
+      components: { AlertDialog },
+      template: '<div><story /><AlertDialog /></div>',
+    }),
+  ],
+} satisfies Meta<typeof AlertDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { Button },
+    setup () {
+      const { confirm, alert, destroy } = useDialog()
+      const result = ref('')
+
+      async function handleConfirm () {
+        const ok = await confirm({ title: 'Confirm', message: 'Do you want to proceed?' })
+        result.value = `confirm → ${ok}`
+      }
+      async function handleAlert () {
+        await alert({ title: 'Error', type: 'error', message: 'Something went wrong.' })
+        result.value = 'alert → closed'
+      }
+      async function handleDestroy () {
+        const ok = await destroy({ title: 'Delete Item', message: 'This action cannot be undone.' })
+        result.value = `destroy → ${ok}`
+      }
+      async function handleMulti () {
+        result.value = 'waiting...'
+        const r1 = confirm({ title: 'Dialog 1', message: 'First confirm dialog' })
+        const r2 = alert({ title: 'Dialog 2', message: 'Second alert dialog' })
+        const r3 = destroy({ title: 'Dialog 3', message: 'Third destroy dialog' })
+        const [ v1, , v3 ] = await Promise.all([ r1, r2, r3 ])
+        result.value = `multi → confirm: ${v1}, alert: done, destroy: ${v3}`
+      }
+      async function handleWithType () {
+        const ok = await confirm({ title: 'Warning', type: 'warn', message: 'This operation may affect your data. Do you want to continue?' })
+        result.value = `typed confirm → ${ok}`
+      }
+      async function handleAlertInfo () {
+        await alert({ title: 'Information', type: 'info', message: 'Your changes have been saved successfully.' })
+        result.value = 'typed alert → closed'
+      }
+      async function handleDestroyDanger () {
+        const ok = await destroy({ title: 'Delete Account', message: 'All data will be permanently removed. This action cannot be undone.' })
+        result.value = `typed destroy → ${ok}`
+      }
+      async function handleSuccess () {
+        await alert({ title: 'Success', type: 'success', message: 'Payment completed successfully.' })
+        result.value = 'success alert → closed'
+      }
+
+      return { handleConfirm, handleAlert, handleDestroy, handleMulti, handleWithType, handleAlertInfo, handleDestroyDanger, handleSuccess, result }
+    },
+    template: `
+      <div class="space-y-10">
+        <!-- Confirm -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Confirm</h3>
+          <Button @click="handleConfirm">Confirm</Button>
+        </section>
+
+        <!-- Alert -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Alert</h3>
+          <Button variant="outline" @click="handleAlert">Alert</Button>
+        </section>
+
+        <!-- Destroy -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Destroy</h3>
+          <Button variant="destructive" @click="handleDestroy">Destroy</Button>
+        </section>
+
+        <!-- Multi Dialog -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Multi Dialog</h3>
+          <Button variant="secondary" @click="handleMulti">Multi Dialog</Button>
+        </section>
+
+        <!-- With Type (ModalContent) -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Type (ModalContent)</h3>
+          <div class="flex gap-2">
+            <Button variant="outline" @click="handleWithType">Warn Confirm</Button>
+            <Button variant="outline" @click="handleAlertInfo">Info Alert</Button>
+            <Button variant="outline" @click="handleSuccess">Success Alert</Button>
+            <Button variant="destructive" @click="handleDestroyDanger">Danger Destroy</Button>
+          </div>
+        </section>
+
+        <!-- Result -->
+        <div v-if="result" class="rounded-md bg-muted p-4 text-sm">Result: {{ result }}</div>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const { current, isOpen, close, onClosed } = useDialogState()
+
+const isAlert = computed(() => current.value?.options.rejectLabel === '')
+const isDestructive = computed(() => {
+  const type = current.value?.options.type
+  return type === 'danger' || type === 'error'
+})
+</script>
+
+<template>
+  <Modal
+    :visible="isOpen"
+    :title="current?.options.title"
+    :type="current?.options.type"
+    :content="current?.options.message"
+    :showCancel="!isAlert"
+    :cancelText="current?.options.rejectLabel || undefined"
+    :confirmText="current?.options.acceptLabel || undefined"
+    :confirmVariant="isDestructive ? 'destructive' : 'default'"
+    @confirm="close(true)"
+    @cancel="close(false)"
+    @closed="onClosed"
+  />
+</template>

package/app/components/ui/AsyncDataTable/en.json

@@ -0,0 +1,3 @@
+{
+  "actions": "Actions"
+}

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

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { AsyncDataTableBatchAction, AsyncDataTableFetchParams, AsyncDataTableFetchResult } from './types'
+import type { DataTableColumn } from '../DataTable/types'
+import AsyncDataTableRaw from './index.vue'
+
+// Cast generic component for Storybook compatibility
+const AsyncDataTable = AsyncDataTableRaw as any
+
+interface User {
+  id: number
+  name: string
+  email: string
+  role: string
+  status: string
+  amount: number
+  createdAt: string
+}
+
+// Generate 85 mock users for pagination demo
+const allUsers: User[] = Array.from({ length: 85 }, (_, i) => ({
+  id: i + 1,
+  name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  role: [ 'Admin', 'Editor', 'User' ][i % 3]!,
+  status: i % 4 === 0 ? 'inactive' : 'active',
+  amount: Math.round(Math.random() * 10000) / 100,
+  createdAt: new Date(2024, 0, 1 + i).toISOString(),
+}))
+
+const columns: DataTableColumn[] = [
+  { field: 'name', title: 'Name', width: '120px', sortable: true },
+  { field: 'email', title: 'Email', minWidth: '200px' },
+  { field: 'role', title: 'Role', width: '100px', sortable: true },
+  { field: 'status', title: 'Status', width: '100px' },
+  { field: 'amount', title: 'Amount', width: '120px', type: 'currency', sortable: true },
+  { field: 'createdAt', title: 'Created', width: '140px', type: 'date' },
+]
+
+/** Simulated async fetch with sorting support */
+function mockFetch (params: AsyncDataTableFetchParams): Promise<AsyncDataTableFetchResult<User>> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const data = [ ...allUsers ]
+
+      if (params.sortBy) {
+        const order = params.sortOrder ?? 1
+        data.sort((a, b) => {
+          const av = a[params.sortBy as keyof User]
+          const bv = b[params.sortBy as keyof User]
+          if (av! < bv!) return -1 * order
+          if (av! > bv!) return 1 * order
+          return 0
+        })
+      }
+
+      const items = data.slice(params.offset, params.offset + params.limit)
+      resolve({ items, total: data.length })
+    }, 500)
+  })
+}
+
+const meta = {
+  title: 'UI/AsyncDataTable',
+  component: AsyncDataTable,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Async fetch with pagination, sorting, page size selector */
+export const Default: Story = {
+  render: () => ({
+    components: { AsyncDataTable },
+    setup: () => ({ columns, mockFetch }),
+    template: `
+      <AsyncDataTable
+        :columns="columns"
+        :fetchMethod="mockFetch"
+        :pageSizeOptions="[10, 20, 50]"
+      />
+    `,
+  }),
+}
+
+/** Batch actions with row selection and dual toolbars */
+export const BatchActions: Story = {
+  render: () => ({
+    components: { AsyncDataTable },
+    setup () {
+      const selection = ref<User[]>([])
+
+      const batchActions: AsyncDataTableBatchAction<User>[] = [
+        {
+          label: 'Delete',
+          icon: 'trash-2',
+          action: items => console.debug(`Delete ${items.length} items`),
+        },
+        {
+          label: 'Export',
+          icon: 'download',
+          action: items => console.debug(`Export ${items.length} items`),
+        },
+      ]
+
+      return { columns, mockFetch, selection, batchActions }
+    },
+    template: `
+      <AsyncDataTable
+        :columns="columns"
+        :fetchMethod="mockFetch"
+        :batchActions="batchActions"
+        v-model:selection="selection"
+        showTopToolbar
+      />
+      <div class="mt-2 text-sm text-muted-foreground">
+        Selected: {{ selection.length > 0 ? selection.map(r => r.name).join(', ') : 'none' }}
+      </div>
+    `,
+  }),
+}
+
+/** Custom toolbar slot with action button */
+export const CustomToolbar: Story = {
+  render: () => ({
+    components: { AsyncDataTable },
+    setup: () => ({ columns, mockFetch }),
+    template: `
+      <AsyncDataTable
+        :columns="columns"
+        :fetchMethod="mockFetch"
+        showTopToolbar
+      >
+        <template #toolbar>
+          <button class="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground">
+            + Add User
+          </button>
+        </template>
+      </AsyncDataTable>
+    `,
+  }),
+}