@polymarbot/nuxt-layer-shadcn-ui 0.1.0

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

@@ -0,0 +1,312 @@
+<script setup lang="ts" generic="TData extends Record<string, any>">
+import type {
+  AsyncDataTableFetchParams,
+  AsyncDataTableProps,
+} from './types'
+
+interface AsyncDataTablePagination {
+  page: number
+  size: number
+  total: number
+}
+
+const props = withDefaults(defineProps<AsyncDataTableProps<TData>>(), {
+  columns: () => [],
+  fetchMethod: undefined,
+  autoFetch: true,
+  data: () => [],
+  filters: undefined,
+  showTopToolbar: undefined,
+  showBottomToolbar: true,
+  pageSizeOptions: () => [ 10, 20, 50, 100 ],
+  showPagination: true,
+  selectable: false,
+  batchActions: () => [],
+  selection: () => [],
+})
+
+const emit = defineEmits<{
+  'update:filters': [filters: Record<string, any>]
+  'update:selection': [value: TData[]]
+}>()
+
+const T = useTranslations('components.ui.AsyncDataTable')
+const { isMobile } = useDevice()
+
+// -- Selection --
+
+const selectionValue = computed(() => props.selection ?? [])
+
+function onSelectionChange (value: TData | TData[] | null) {
+  emit('update:selection', Array.isArray(value) ? value : value ? [ value ] : [])
+}
+
+// -- Internal state --
+
+const loading = ref(false)
+const internalData = ref<TData[]>([]) as Ref<TData[]>
+const requestVersion = ref(0)
+
+const pagination = ref<AsyncDataTablePagination>({
+  page: Number(props.filters?.page) || 1,
+  size: Number(props.filters?.size) || props.pageSizeOptions[0] || 10,
+  total: 0,
+})
+
+const sortState = ref<{ sortBy: string | null, sortOrder: number | null }>({
+  sortBy: props.filters?.sortBy ? String(props.filters.sortBy) : null,
+  sortOrder: props.filters?.sortOrder ? Number(props.filters.sortOrder) : null,
+})
+
+// -- Computed --
+
+const useFetchMode = computed(() => !!props.fetchMethod)
+const tableData = computed(() => useFetchMode.value ? internalData.value : props.data)
+
+const showSelectionColumn = computed(() => props.selectable || props.batchActions.length > 0)
+const selectedCount = computed(() => props.selection?.length ?? 0)
+const hasBatchActions = computed(() => props.batchActions.length > 0)
+const batchActionsDisabled = computed(() => selectedCount.value === 0)
+
+const hasPaginationData = computed(() => pagination.value.total > 0)
+
+const shouldShowTopToolbar = computed(() => {
+  if (props.showTopToolbar !== undefined) return props.showTopToolbar
+  return pagination.value.size >= 50
+})
+
+const shouldShowBottomToolbar = computed(() => props.showBottomToolbar)
+
+const batchMenuItems = computed<DropdownItem[]>(() =>
+  props.batchActions.map(action => ({
+    label: action.label,
+    icon: action.icon,
+    class: action.class,
+    disabled: action.disabled || batchActionsDisabled.value,
+    command: () => action.action(props.selection ?? []),
+  })),
+)
+
+// -- Data fetching --
+
+async function fetchData (page?: number, forceRefresh = false) {
+  if (!props.fetchMethod) return
+  if (loading.value && !forceRefresh) return
+
+  const currentVersion = ++requestVersion.value
+
+  if (page !== undefined) {
+    pagination.value.page = page
+  }
+
+  loading.value = true
+  try {
+    const result = await props.fetchMethod(buildFetchParams())
+    if (currentVersion !== requestVersion.value) return
+
+    internalData.value = result.items as TData[]
+    pagination.value.total = result.total
+  } catch (error) {
+    if (currentVersion !== requestVersion.value) return
+    console.error('AsyncDataTable fetchData failed:', error)
+  } finally {
+    if (currentVersion === requestVersion.value) {
+      loading.value = false
+    }
+  }
+}
+
+function resetPagination (overrides?: Record<string, any>) {
+  pagination.value.page = 1
+  pagination.value.total = 0
+  emit('update:filters', getFilters(overrides))
+  fetchData(undefined, true)
+}
+
+// -- Internal helpers --
+
+function getFilters (overrides?: Record<string, any>): Record<string, any> {
+  return {
+    ...(props.filters ?? {}),
+    ...overrides,
+    page: pagination.value.page,
+    size: pagination.value.size,
+    sortBy: sortState.value.sortBy,
+    sortOrder: sortState.value.sortOrder,
+  }
+}
+
+function buildFetchParams (): AsyncDataTableFetchParams {
+  const filters = getFilters()
+  const { page, size, ...rest } = filters
+  return {
+    offset: (Number(page) - 1) * Number(size),
+    limit: Number(size),
+    ...rest,
+  }
+}
+
+// -- Event handlers --
+
+function onPageChange (newPage: number) {
+  if (newPage === pagination.value.page) return
+  pagination.value.page = newPage
+  emit('update:filters', getFilters())
+  fetchData()
+}
+
+function onPageSizeChange (newSize: number) {
+  if (newSize === pagination.value.size) return
+  pagination.value.size = newSize
+  pagination.value.page = 1
+  emit('update:filters', getFilters())
+  fetchData(undefined, true)
+}
+
+// Batch sort updates: DataTable emits sortBy and sortOrder separately but synchronously
+let sortUpdatePending = false
+
+function onSortByUpdate (value: string | null) {
+  sortState.value.sortBy = value
+  scheduleAfterSort()
+}
+
+function onSortOrderUpdate (value: number | null) {
+  sortState.value.sortOrder = value
+  scheduleAfterSort()
+}
+
+function scheduleAfterSort () {
+  if (sortUpdatePending) return
+  sortUpdatePending = true
+  nextTick(() => {
+    sortUpdatePending = false
+    pagination.value.page = 1
+    emit('update:filters', getFilters())
+    fetchData(1, true)
+  })
+}
+
+// -- Expose --
+
+defineExpose({
+  fetchData,
+  resetPagination,
+})
+
+// -- Lifecycle --
+
+onMounted(() => {
+  emit('update:filters', getFilters())
+  if (props.autoFetch) {
+    fetchData()
+  }
+})
+</script>
+
+<template>
+  <div>
+    <!-- Top toolbar -->
+    <div
+      v-if="shouldShowTopToolbar && (!!$slots.toolbar || hasBatchActions || (showPagination && hasPaginationData))"
+      class="mb-4 flex flex-wrap items-center justify-between gap-4"
+    >
+      <div class="flex items-center gap-2">
+        <Dropdown
+          v-if="hasBatchActions"
+          :menus="batchMenuItems"
+          trigger="click"
+        >
+          <Button
+            :variant="batchActionsDisabled ? 'outline' : 'default'"
+            :size="isMobile ? 'sm' : 'default'"
+            :disabled="batchActionsDisabled"
+          >
+            {{ T('actions') }} ({{ selectedCount }})
+            <Icon
+              name="chevron-down"
+              class="size-4"
+            />
+          </Button>
+        </Dropdown>
+        <slot name="toolbar" />
+      </div>
+
+      <Pagination
+        v-if="showPagination"
+        :page="pagination.page"
+        :total="pagination.total"
+        :pageSize="pagination.size"
+        :pageSizeOptions="pageSizeOptions"
+        :simple="isMobile"
+        :size="isMobile ? 'sm' : 'default'"
+        @update:page="onPageChange"
+        @update:pageSize="onPageSizeChange"
+      />
+    </div>
+
+    <!-- DataTable -->
+    <DataTable
+      :selection="selectionValue"
+      :data="tableData"
+      :columns="columns"
+      :loading="loading"
+      :selectionMode="showSelectionColumn ? 'multiple' : undefined"
+      :sortBy="sortState.sortBy"
+      :sortOrder="sortState.sortOrder"
+      @update:selection="onSelectionChange"
+      @update:sortBy="onSortByUpdate"
+      @update:sortOrder="onSortOrderUpdate"
+    >
+      <template
+        v-for="name in Object.keys($slots).filter(n => n !== 'toolbar')"
+        :key="name"
+        #[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData ?? {}"
+        />
+      </template>
+    </DataTable>
+
+    <!-- Bottom toolbar -->
+    <div
+      v-if="shouldShowBottomToolbar && (!!$slots.toolbar || hasBatchActions || (showPagination && hasPaginationData))"
+      class="mt-4 flex flex-wrap items-center justify-between gap-4"
+    >
+      <div class="flex items-center gap-2">
+        <Dropdown
+          v-if="hasBatchActions"
+          :menus="batchMenuItems"
+          trigger="click"
+        >
+          <Button
+            :variant="batchActionsDisabled ? 'outline' : 'default'"
+            :size="isMobile ? 'sm' : 'default'"
+            :disabled="batchActionsDisabled"
+          >
+            {{ T('actions') }} ({{ selectedCount }})
+            <Icon
+              name="chevron-down"
+              class="size-4"
+            />
+          </Button>
+        </Dropdown>
+        <slot name="toolbar" />
+      </div>
+
+      <Pagination
+        v-if="showPagination"
+        :page="pagination.page"
+        :total="pagination.total"
+        :pageSize="pagination.size"
+        :pageSizeOptions="pageSizeOptions"
+        :simple="isMobile"
+        :size="isMobile ? 'sm' : 'default'"
+        @update:page="onPageChange"
+        @update:pageSize="onPageSizeChange"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,53 @@
+import type { Component } from 'vue'
+import type { DataTableColumn } from '../DataTable/types'
+
+export interface AsyncDataTableBatchAction<T = Record<string, any>> {
+  /** Button/menu item label */
+  label: string
+  /** Icon name or component */
+  icon?: string | Component
+  /** Custom CSS class */
+  class?: ClassValue
+  /** Whether the action is disabled */
+  disabled?: boolean
+  /** Callback with selected items */
+  action: (selectedItems: T[]) => void
+}
+
+export interface AsyncDataTableFetchParams {
+  offset: number
+  limit: number
+  [key: string]: any
+}
+
+export interface AsyncDataTableFetchResult<T = Record<string, any>> {
+  items: T[]
+  total: number
+}
+
+export interface AsyncDataTableProps<T = Record<string, any>> {
+  /** Column definitions */
+  columns?: DataTableColumn[]
+  /** Async function to fetch data. If not provided, uses static data mode */
+  fetchMethod?: (params: AsyncDataTableFetchParams) => Promise<AsyncDataTableFetchResult<T>>
+  /** Whether to auto fetch data on mount (default: true) */
+  autoFetch?: boolean
+  /** Static data array (used when fetchMethod is not provided) */
+  data?: T[]
+  /** External filter state */
+  filters?: Record<string, any>
+  /** Whether to show top toolbar (undefined = auto when page size >= 50) */
+  showTopToolbar?: boolean
+  /** Whether to show bottom toolbar (default: true) */
+  showBottomToolbar?: boolean
+  /** Available page size options */
+  pageSizeOptions?: number[]
+  /** Whether to show pagination controls (default: true) */
+  showPagination?: boolean
+  /** Whether rows are selectable */
+  selectable?: boolean
+  /** Batch action definitions for selected rows */
+  batchActions?: AsyncDataTableBatchAction<T>[]
+  /** Selected rows (v-model:selection) */
+  selection?: T[]
+}

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Avatar from './index.vue'
+
+type AvatarSize = 'small' | 'normal' | 'large' | 'xlarge'
+type AvatarShape = 'circle' | 'square'
+
+const sizes: AvatarSize[] = [ 'small', 'normal', 'large', 'xlarge' ]
+const shapes: AvatarShape[] = [ 'circle', 'square' ]
+
+const meta = {
+  title: 'UI/Avatar',
+  component: Avatar,
+  argTypes: {
+    size: { control: 'select', options: sizes },
+    shape: { control: 'select', options: shapes },
+    image: { control: 'text' },
+    label: { control: 'text' },
+    fallbackLabel: { control: 'text' },
+  },
+  args: {
+    size: 'normal',
+    shape: 'circle',
+    label: 'AB',
+  },
+} satisfies Meta<typeof Avatar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Avatar },
+    setup: () => ({ args, sizes, shapes }),
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Avatar v-bind="args" />
+        </section>
+
+        <!-- Sizes -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Sizes</h3>
+          <div class="flex items-end gap-4">
+            <div v-for="s in sizes" :key="s" class="flex flex-col items-center gap-2">
+              <Avatar :size="s" label="AB" />
+              <span class="text-xs text-muted-foreground">{{ s }}</span>
+            </div>
+          </div>
+        </section>
+
+        <!-- Shapes -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Shapes</h3>
+          <div class="flex items-center gap-4">
+            <div v-for="sh in shapes" :key="sh" class="flex flex-col items-center gap-2">
+              <Avatar :shape="sh" label="AB" size="large" />
+              <span class="text-xs text-muted-foreground">{{ sh }}</span>
+            </div>
+          </div>
+        </section>
+
+        <!-- With Image -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Image</h3>
+          <div class="flex items-center gap-4">
+            <Avatar image="https://i.pravatar.cc/150?u=1" size="large" />
+            <Avatar image="https://i.pravatar.cc/150?u=2" size="large" shape="square" />
+          </div>
+        </section>
+
+        <!-- Fallback Label -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Fallback Label</h3>
+          <div class="flex items-center gap-4">
+            <Avatar label="John Doe" fallback-label="JD" />
+            <Avatar fallback-label="??" />
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import {
+  Avatar as ShadcnAvatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/avatar'
+import type { AvatarProps } from './types'
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+  image: undefined,
+  label: undefined,
+  fallbackLabel: undefined,
+  size: 'normal',
+  shape: 'circle',
+  class: undefined,
+})
+
+// Map our size names to shadcn avatar variant sizes
+const sizeClasses: Record<string, string> = {
+  small: 'size-8 text-xs',
+  normal: 'size-10 text-sm',
+  large: 'size-12 text-base',
+  xlarge: 'size-16 text-lg',
+}
+
+const effectiveLabel = computed(() => props.fallbackLabel ?? props.label)
+
+const mergedClass = computed(() =>
+  cn(
+    sizeClasses[props.size],
+    props.shape === 'square' && `
+      rounded-md!
+      **:rounded-md!
+    `,
+    props.class,
+  ),
+)
+</script>
+
+<template>
+  <ShadcnAvatar
+    :class="mergedClass"
+  >
+    <AvatarImage
+      v-if="image"
+      :src="image"
+    />
+    <AvatarFallback class="font-medium text-muted-foreground">
+      <slot>{{ effectiveLabel }}</slot>
+    </AvatarFallback>
+  </ShadcnAvatar>
+</template>

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

@@ -0,0 +1,8 @@
+export interface AvatarProps {
+  image?: string
+  label?: string
+  fallbackLabel?: string
+  size?: 'small' | 'normal' | 'large' | 'xlarge'
+  shape?: 'circle' | 'square'
+  class?: ClassValue
+}

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Icon from '../Icon/index.vue'
+import Badge from './index.vue'
+
+type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive'
+
+const variants: BadgeVariant[] = [ 'default', 'secondary', 'outline', 'destructive' ]
+
+const meta = {
+  title: 'UI/Badge',
+  component: Badge,
+  argTypes: {
+    variant: { control: 'select', options: variants },
+  },
+  args: {
+    variant: 'default',
+  },
+} satisfies Meta<typeof Badge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Badge, Icon },
+    setup: () => ({ args, variants }),
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Badge v-bind="args">Badge</Badge>
+        </section>
+
+        <!-- Variants -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Variants</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Badge v-for="v in variants" :key="v" :variant="v">{{ v }}</Badge>
+          </div>
+        </section>
+
+        <!-- Numeric -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Numeric</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Badge>1</Badge>
+            <Badge variant="secondary">42</Badge>
+            <Badge variant="destructive">99+</Badge>
+            <Badge variant="outline">0</Badge>
+          </div>
+        </section>
+
+        <!-- With Icons -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Icons</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Badge><Icon name="check" /> Approved</Badge>
+            <Badge variant="secondary"><Icon name="clock" /> Pending</Badge>
+            <Badge variant="destructive"><Icon name="x" /> Rejected</Badge>
+            <Badge variant="outline"><Icon name="star" /> Featured</Badge>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Badge as ShadcnBadge } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/badge'
+import type { BadgeProps } from './types'
+
+defineProps<BadgeProps>()
+</script>
+
+<template>
+  <ShadcnBadge>
+    <slot />
+  </ShadcnBadge>
+</template>

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

@@ -0,0 +1,3 @@
+import type { BadgeVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/badge'
+
+export interface BadgeProps extends /* @vue-ignore */ BadgeVariants {}

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Breadcrumb from './index.vue'
+
+const meta = {
+  title: 'UI/Breadcrumb',
+  component: Breadcrumb,
+} satisfies Meta<typeof Breadcrumb>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { Breadcrumb },
+    setup () {
+      const home = { label: 'Home', icon: 'house', href: '/' }
+      const basicItems = [
+        { label: 'Products', href: '/products' },
+        { label: 'Electronics', href: '/products/electronics' },
+        { label: 'Laptops' },
+      ]
+      const withIcons = [
+        { label: 'Settings', icon: 'settings', href: '/settings' },
+        { label: 'Profile' },
+      ]
+      return { home, basicItems, withIcons }
+    },
+    template: `
+      <div class="space-y-10">
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Basic</h3>
+          <Breadcrumb :model="basicItems" />
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Home</h3>
+          <Breadcrumb :home="home" :model="basicItems" />
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Icons</h3>
+          <Breadcrumb :home="home" :model="withIcons" />
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Single Item</h3>
+          <Breadcrumb :home="home" />
+        </section>
+      </div>
+    `,
+  }),
+}