@polymarbot/nuxt-layer-shadcn-ui 0.1.0

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

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { PageCardProps } from './types'
+
+const props = withDefaults(defineProps<PageCardProps>(), {
+  title: undefined,
+  subtitle: undefined,
+  back: undefined,
+  ready: true,
+  variant: 'paper',
+  class: undefined,
+})
+
+const route = useRoute()
+const router = useRouter()
+const { isMobile } = useDevice()
+
+const hasBack = computed(() => {
+  if (!isMobile.value && route.query.back !== undefined) {
+    return route.query.back !== 'false'
+  }
+  if (!props.back) return false
+  if (isMobile.value && !(typeof props.back === 'object' && props.back.action)) return false
+  return true
+})
+
+function handleBack () {
+  if (typeof props.back === 'object' && props.back.action) {
+    props.back.action()
+  } else {
+    router.back()
+  }
+}
+
+const hasTitle = computed(() => !!props.title)
+</script>
+
+<template>
+  <Card
+    :class="cn('min-h-full', variant === 'paper' && `rounded-none border-none`, props.class)"
+  >
+    <template
+      v-if="!ready || hasTitle || !!$slots.title || !!$slots.subtitle || !!subtitle || hasBack || !!$slots.actions"
+      #header
+    >
+      <!-- Skeleton title -->
+      <Skeleton
+        v-if="!ready"
+        height="1.5rem"
+        width="40%"
+      />
+      <!-- Real title -->
+      <div
+        v-else
+        class="
+          flex items-center gap-2
+          sm:gap-3
+        "
+      >
+        <Button
+          v-if="hasBack"
+          variant="ghost"
+          size="icon"
+          icon="arrow-left"
+          @click="handleBack"
+        />
+        <div class="flex-1">
+          <h3
+            v-if="!!$slots.title || !!title"
+            class="text-lg leading-none font-semibold tracking-tight"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </h3>
+          <div
+            v-if="!!$slots.subtitle || !!subtitle"
+            class="mt-1 text-base text-muted-foreground"
+          >
+            <slot name="subtitle">
+              {{ subtitle }}
+            </slot>
+          </div>
+        </div>
+        <div
+          v-if="!!$slots.actions"
+          class="
+            flex items-center gap-2
+            sm:gap-3
+          "
+        >
+          <slot name="actions" />
+        </div>
+      </div>
+    </template>
+
+    <!-- Skeleton content -->
+    <div
+      v-if="!ready"
+      class="flex flex-col gap-2"
+    >
+      <Skeleton height="1rem" />
+      <Skeleton
+        height="1rem"
+        width="85%"
+      />
+      <Skeleton
+        height="1rem"
+        width="60%"
+      />
+    </div>
+
+    <!-- Real content with loading overlay -->
+    <div
+      v-else
+      class="relative"
+    >
+      <div
+        v-if="loading"
+        class="absolute inset-0 z-50 flex items-center justify-center"
+      >
+        <Loading class="size-8" />
+      </div>
+      <div :class="disabled || loading ? 'pointer-events-none opacity-50' : undefined">
+        <slot />
+      </div>
+    </div>
+
+    <template
+      v-if="ready && !!$slots.footer"
+      #footer
+    >
+      <slot name="footer" />
+    </template>
+  </Card>
+</template>

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

@@ -0,0 +1,16 @@
+export interface PageCardBackConfig {
+  action: () => void
+}
+
+export type PageCardVariant = 'paper' | 'card'
+
+export interface PageCardProps {
+  title?: string
+  subtitle?: string
+  back?: boolean | PageCardBackConfig
+  ready?: boolean
+  loading?: boolean
+  disabled?: boolean
+  variant?: PageCardVariant
+  class?: ClassValue
+}

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

@@ -0,0 +1,3 @@
+{
+  "pageReport": "{first}–{last} of {total}"
+}

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

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Pagination from './index.vue'
+
+const meta = {
+  title: 'UI/Pagination',
+  component: Pagination,
+  argTypes: {
+    simple: { control: 'boolean' },
+    size: { control: 'select', options: [ 'default', 'sm' ]},
+    siblingCount: { control: { type: 'number', min: 0 }},
+  },
+  args: {
+    simple: false,
+    size: 'default',
+    siblingCount: 1,
+  },
+} satisfies Meta<typeof Pagination>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Pagination },
+    setup () {
+      const page = ref(1)
+      const pageSize = ref(10)
+
+      return { args, page, pageSize }
+    },
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Pagination
+            v-bind="args"
+            :page="page"
+            :total="85"
+            :pageSize="pageSize"
+            :pageSizeOptions="[10, 20, 50]"
+            @update:page="page = $event"
+            @update:pageSize="v => { pageSize = v; page = 1 }"
+          />
+          <div class="mt-2 text-sm text-muted-foreground">
+            Page: {{ page }}, Size: {{ pageSize }}
+          </div>
+        </section>
+
+        <!-- Size comparison -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Size</h3>
+          <div class="space-y-4">
+            <div>
+              <span class="mb-2 block text-sm font-medium">default</span>
+              <Pagination :page="3" :total="85" :pageSize="10" />
+            </div>
+            <div>
+              <span class="mb-2 block text-sm font-medium">sm</span>
+              <Pagination :page="3" :total="85" :pageSize="10" size="sm" />
+            </div>
+          </div>
+        </section>
+
+        <!-- Simple mode -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Simple Mode</h3>
+          <div class="space-y-4">
+            <div>
+              <span class="mb-2 block text-sm font-medium">default</span>
+              <Pagination :page="3" :total="85" :pageSize="10" simple />
+            </div>
+            <div>
+              <span class="mb-2 block text-sm font-medium">sm</span>
+              <Pagination :page="3" :total="85" :pageSize="10" simple size="sm" />
+            </div>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import type { DropdownItem } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/ui/Dropdown/types'
+import { buttonVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import {
+  Pagination as ShadcnPagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationItem,
+  PaginationLast,
+  PaginationNext,
+  PaginationPrevious,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/pagination'
+import type { PaginationProps } from './types'
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  page: 1,
+  total: 0,
+  pageSize: 10,
+  pageSizeOptions: () => [],
+  simple: false,
+  siblingCount: 1,
+  size: 'default',
+})
+
+const emit = defineEmits<{
+  'update:page': [value: number]
+  'update:pageSize': [value: number]
+}>()
+
+const T = useTranslations('components.ui.Pagination')
+
+const totalPages = computed(() => Math.ceil(props.total / props.pageSize) || 0)
+const hasData = computed(() => props.total > 0)
+
+const iconButtonSize = computed(() => props.size === 'sm' ? 'icon-sm' as const : 'icon' as const)
+const buttonSize = computed(() => props.size === 'sm' ? 'sm' as const : 'default' as const)
+
+const pageReport = computed(() => {
+  if (!hasData.value) return ''
+  const first = (props.page - 1) * props.pageSize + 1
+  const last = Math.min(props.page * props.pageSize, props.total)
+  return T('pageReport', { first, last, total: props.total })
+})
+
+const activePageClass = computed(() => cn(
+  buttonVariants({ variant: 'default', size: iconButtonSize.value }),
+  `
+    hover:text-primary-foreground
+    dark:hover:bg-primary/90
+  `,
+))
+
+const showPageSizeDropdown = computed(() => props.pageSizeOptions.length > 1)
+
+const pageSizeMenuItems = computed<DropdownItem[]>(() =>
+  props.pageSizeOptions.map(size => ({
+    label: String(size),
+    active: size === props.pageSize,
+    command: () => emit('update:pageSize', size),
+  })),
+)
+</script>
+
+<template>
+  <div
+    v-if="hasData"
+    class="flex items-center gap-2"
+  >
+    <!-- Simple mode: ‹ 1/9 › -->
+    <template v-if="simple">
+      <Button
+        variant="ghost"
+        :size="iconButtonSize"
+        :disabled="page <= 1"
+        @click="emit('update:page', 1)"
+      >
+        <Icon name="chevrons-left" />
+      </Button>
+      <Button
+        variant="ghost"
+        :size="iconButtonSize"
+        :disabled="page <= 1"
+        @click="emit('update:page', page - 1)"
+      >
+        <Icon name="chevron-left" />
+      </Button>
+      <span
+        class="min-w-12 text-center text-sm text-muted-foreground tabular-nums"
+      >
+        {{ page }} / {{ totalPages }}
+      </span>
+      <Button
+        variant="ghost"
+        :size="iconButtonSize"
+        :disabled="page >= totalPages"
+        @click="emit('update:page', page + 1)"
+      >
+        <Icon name="chevron-right" />
+      </Button>
+      <Button
+        variant="ghost"
+        :size="iconButtonSize"
+        :disabled="page >= totalPages"
+        @click="emit('update:page', totalPages)"
+      >
+        <Icon name="chevrons-right" />
+      </Button>
+    </template>
+
+    <!-- Full mode -->
+    <template v-else>
+      <span class="text-sm whitespace-nowrap text-muted-foreground">
+        {{ pageReport }}
+      </span>
+      <ShadcnPagination
+        :total="total"
+        :itemsPerPage="pageSize"
+        :page="page"
+        :siblingCount="siblingCount"
+        showEdges
+        class="mx-0 w-auto"
+        @update:page="emit('update:page', $event)"
+      >
+        <PaginationContent v-slot="{ items }">
+          <PaginationFirst :size="iconButtonSize">
+            <Icon name="chevrons-left" />
+          </PaginationFirst>
+          <PaginationPrevious :size="iconButtonSize">
+            <Icon name="chevron-left" />
+          </PaginationPrevious>
+          <template v-for="(item, index) in items">
+            <PaginationItem
+              v-if="item.type === 'page'"
+              :key="index"
+              :value="item.value"
+              :size="iconButtonSize"
+              :class="item.value === page ? activePageClass : ''"
+            >
+              {{ item.value }}
+            </PaginationItem>
+            <PaginationEllipsis
+              v-else
+              :key="`e${index}`"
+            />
+          </template>
+          <PaginationNext :size="iconButtonSize">
+            <Icon name="chevron-right" />
+          </PaginationNext>
+          <PaginationLast :size="iconButtonSize">
+            <Icon name="chevrons-right" />
+          </PaginationLast>
+        </PaginationContent>
+      </ShadcnPagination>
+      <Dropdown
+        v-if="showPageSizeDropdown"
+        :menus="pageSizeMenuItems"
+        trigger="click"
+      >
+        <Button
+          variant="outline"
+          :size="buttonSize"
+        >
+          {{ pageSize }}
+          <Icon
+            name="chevron-down"
+            class="size-3"
+          />
+        </Button>
+      </Dropdown>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+export type PaginationSize = 'default' | 'sm'
+
+export interface PaginationProps {
+  /** Current page number (1-based) */
+  page?: number
+  /** Total number of items */
+  total?: number
+  /** Items per page */
+  pageSize?: number
+  /** Available page size options (shows dropdown when length > 1) */
+  pageSizeOptions?: number[]
+  /** Compact mode: only prev/next + page indicator */
+  simple?: boolean
+  /** Number of sibling pages to show in full mode */
+  siblingCount?: number
+  /** Button size */
+  size?: PaginationSize
+}

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Button from '../Button/index.vue'
+import Input from '../Input/index.vue'
+import Popover from './index.vue'
+
+const meta = {
+  title: 'UI/Popover',
+  component: Popover,
+} satisfies Meta<typeof Popover>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { Popover, Button, Input },
+    setup () {
+      const controlled = ref(false)
+      return { controlled }
+    },
+    template: `
+      <div class="space-y-10">
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Basic</h3>
+          <Popover>
+            <template #trigger>
+              <Button variant="outline">Open Popover</Button>
+            </template>
+            <div class="space-y-2">
+              <h4 class="font-medium">Popover Content</h4>
+              <p class="text-sm text-muted-foreground">This is the popover body with some informational content.</p>
+            </div>
+          </Popover>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Form</h3>
+          <Popover>
+            <template #trigger>
+              <Button variant="outline">Edit Name</Button>
+            </template>
+            <div class="space-y-3">
+              <h4 class="font-medium">Update Name</h4>
+              <Input placeholder="Enter new name" />
+              <Button size="sm" class="w-full">Save</Button>
+            </div>
+          </Popover>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <div class="flex items-center gap-2">
+            <Popover v-model:open="controlled">
+              <template #trigger>
+                <Button variant="outline">Controlled Popover</Button>
+              </template>
+              <p class="text-sm">This popover is controlled externally.</p>
+            </Popover>
+            <Button variant="ghost" size="sm" @click="controlled = !controlled">
+              Toggle ({{ controlled ? 'Open' : 'Closed' }})
+            </Button>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import {
+  Popover as ShadcnPopover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/popover'
+import type { PopoverProps } from './types'
+
+const props = defineProps<PopoverProps>()
+</script>
+
+<template>
+  <ShadcnPopover>
+    <PopoverTrigger asChild>
+      <slot name="trigger" />
+    </PopoverTrigger>
+    <PopoverContent :class="props.class">
+      <slot />
+    </PopoverContent>
+  </ShadcnPopover>
+</template>

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

@@ -0,0 +1,5 @@
+import type { PopoverRootProps } from 'reka-ui'
+
+export interface PopoverProps extends /* @vue-ignore */ PopoverRootProps {
+  class?: ClassValue
+}

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

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Qrcode from './index.vue'
+
+const meta = {
+  title: 'UI/Qrcode',
+  component: Qrcode,
+} satisfies Meta<typeof Qrcode>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { content: 'https://example.com' },
+  render: () => ({
+    components: { Qrcode },
+    setup () {
+      const url = ref('https://example.com')
+      return { url }
+    },
+    template: `
+      <div class="space-y-10">
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Basic QR Code</h3>
+          <div class="size-48">
+            <Qrcode content="https://example.com" />
+          </div>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Dynamic Content</h3>
+          <div class="space-y-3 max-w-sm">
+            <input
+              v-model="url"
+              class="w-full rounded border border-input px-3 py-2 text-sm"
+              placeholder="Enter URL or text"
+            />
+            <div class="size-48">
+              <Qrcode :content="url" />
+            </div>
+          </div>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Different Sizes</h3>
+          <div class="flex items-end gap-6">
+            <div class="size-24">
+              <Qrcode content="https://example.com/small" />
+            </div>
+            <div class="size-48">
+              <Qrcode content="https://example.com/medium" />
+            </div>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import QRCode from 'qrcode'
+import type { QrcodeProps } from './types'
+
+const props = defineProps<QrcodeProps>()
+
+const qrcode = ref<string | null>(null)
+watch(() => props.content, createQrCode, { immediate: true })
+async function createQrCode (content: string): Promise<string | null> {
+  if (!content) {
+    qrcode.value = null
+    return null
+  }
+  return new Promise((resolve, reject) => {
+    QRCode.toDataURL(content, {
+      errorCorrectionLevel: 'Q',
+      type: 'image/jpeg',
+      margin: 0,
+      scale: 8,
+    }, (err: Error | null | undefined, url: string) => {
+      if (err) return reject(err)
+      qrcode.value = url
+      resolve(url)
+    })
+  })
+}
+</script>
+
+<template>
+  <img
+    v-if="qrcode"
+    :src="qrcode"
+    alt="qrcode"
+    class="mx-auto block size-full bg-white object-contain"
+  >
+  <Skeleton
+    v-else
+    class="mx-auto block size-full"
+  />
+</template>

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

@@ -0,0 +1,3 @@
+export interface QrcodeProps {
+  content: string
+}