@polymarbot/nuxt-layer-shadcn-ui 0.1.10 → 0.2.0

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

@@ -1,11 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { AvatarShape, AvatarSize } from './types'
 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 sizes = [ 'small', 'normal', 'large', 'xlarge' ] as const satisfies readonly AvatarSize[]
+const shapes = [ 'circle', 'square' ] as const satisfies readonly AvatarShape[]
 
 const meta = {
   title: 'UI/Avatar',
@@ -20,64 +18,71 @@ const meta = {
   args: {
     size: 'normal',
     shape: 'circle',
+    image: '',
     label: 'AB',
+    fallbackLabel: '',
   },
+  render: args => ({
+    components: { Avatar },
+    setup: () => ({ args }),
+    template: '<Avatar v-bind="args" />',
+  }),
 } satisfies Meta<typeof Avatar>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const Sizes: Story = {
+  render: () => ({
     components: { Avatar },
-    setup: () => ({ args, sizes, shapes }),
+    setup: () => ({ sizes }),
     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>
+      <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>
+    `,
+  }),
+}
 
-        <!-- 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>
+export const Shapes: Story = {
+  render: () => ({
+    components: { Avatar },
+    setup: () => ({ shapes }),
+    template: `
+      <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>
+    `,
+  }),
+}
 
-        <!-- 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>
+export const WithImage: Story = {
+  render: () => ({
+    components: { Avatar },
+    template: `
+      <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>
+    `,
+  }),
+}
 
-        <!-- 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>
+export const FallbackLabel: Story = {
+  render: () => ({
+    components: { Avatar },
+    template: `
+      <div class="flex items-center gap-4">
+        <Avatar label="John Doe" fallback-label="JD" />
+        <Avatar fallback-label="??" />
       </div>
     `,
   }),

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

@@ -3,7 +3,7 @@ import {
   Avatar as ShadcnAvatar,
   AvatarFallback,
   AvatarImage,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/avatar'
+} from '../../shadcn/avatar'
 import type { AvatarProps } from './types'
 
 const props = withDefaults(defineProps<AvatarProps>(), {

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

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

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

@@ -1,10 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { BadgeVariant } from './types'
 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 variants = [ 'default', 'secondary', 'outline', 'destructive' ] as const satisfies readonly BadgeVariant[]
 
 const meta = {
   title: 'UI/Badge',
@@ -15,52 +14,53 @@ const meta = {
   args: {
     variant: 'default',
   },
+  render: args => ({
+    components: { Badge },
+    setup: () => ({ args }),
+    template: '<Badge v-bind="args">Badge</Badge>',
+  }),
 } 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>
+export const Default: Story = {}
 
-        <!-- 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>
+export const Variants: Story = {
+  render: () => ({
+    components: { Badge },
+    setup: () => ({ variants }),
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Badge v-for="v in variants" :key="v" :variant="v">{{ v }}</Badge>
+      </div>
+    `,
+  }),
+}
 
-        <!-- 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>
+export const Numeric: Story = {
+  render: () => ({
+    components: { Badge },
+    template: `
+      <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>
+    `,
+  }),
+}
 
-        <!-- 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>
+export const WithIcons: Story = {
+  render: () => ({
+    components: { Badge, Icon },
+    template: `
+      <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>
     `,
   }),

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

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

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

@@ -1,3 +1,5 @@
-import type { BadgeVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/badge'
+import type { BadgeVariants } from '../../shadcn/badge'
+
+export type BadgeVariant = NonNullable<BadgeVariants['variant']>
 
 export interface BadgeProps extends /* @vue-ignore */ BadgeVariants {}

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

@@ -1,52 +1,63 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { BreadcrumbItem } from './types'
 import Breadcrumb from './index.vue'
 
+const home: BreadcrumbItem = { label: 'Home', icon: 'house', href: '/' }
+
+const basicItems: BreadcrumbItem[] = [
+  { label: 'Products', href: '/products' },
+  { label: 'Electronics', href: '/products/electronics' },
+  { label: 'Laptops' },
+]
+
+const withIconItems: BreadcrumbItem[] = [
+  { label: 'Settings', icon: 'settings', href: '/settings' },
+  { label: 'Profile' },
+]
+
 const meta = {
   title: 'UI/Breadcrumb',
   component: Breadcrumb,
+  argTypes: {
+    model: { control: 'object' },
+    home: { control: 'object' },
+  },
+  args: {
+    model: basicItems,
+    home,
+  },
+  render: args => ({
+    components: { Breadcrumb },
+    setup: () => ({ args }),
+    template: '<Breadcrumb v-bind="args" />',
+  }),
 } satisfies Meta<typeof Breadcrumb>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Default: Story = {}
+
+export const WithHome: Story = {
+  render: () => ({
+    components: { Breadcrumb },
+    setup: () => ({ home, basicItems }),
+    template: '<Breadcrumb :home="home" :model="basicItems" />',
+  }),
+}
+
+export const WithIcons: Story = {
+  render: () => ({
+    components: { Breadcrumb },
+    setup: () => ({ home, withIconItems }),
+    template: '<Breadcrumb :home="home" :model="withIconItems" />',
+  }),
+}
+
+export const SingleItem: 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>
-    `,
+    setup: () => ({ home }),
+    template: '<Breadcrumb :home="home" />',
   }),
 }

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

@@ -6,7 +6,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/breadcrumb'
+} from '../../shadcn/breadcrumb'
 import type { BreadcrumbItem as BreadcrumbItemType, BreadcrumbProps } from './types'
 
 const props = defineProps<BreadcrumbProps>()

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

@@ -1,32 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { ButtonSize, ButtonVariant } from './types'
 import Icon from '../Icon/index.vue'
 import Button from './index.vue'
 
-type ButtonVariant
-  = | 'default'
-    | 'destructive'
-    | 'outline'
-    | 'secondary'
-    | 'ghost'
-    | 'link'
-type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'
-
-const variants: ButtonVariant[] = [
+const variants = [
   'default',
   'destructive',
   'outline',
   'secondary',
   'ghost',
   'link',
-]
-const sizes: ButtonSize[] = [
+] as const satisfies readonly ButtonVariant[]
+
+const sizes = [
   'sm',
   'default',
   'lg',
   'icon-sm',
   'icon',
   'icon-lg',
-]
+] as const satisfies readonly ButtonSize[]
 
 const meta = {
   title: 'UI/Button',
@@ -49,96 +42,107 @@ const meta = {
     loading: false,
     disabled: false,
   },
+  render: args => ({
+    components: { Button },
+    setup: () => ({ args }),
+    template: '<Button v-bind="args">Button</Button>',
+  }),
 } satisfies Meta<typeof Button>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: {
-    loading: false,
-  },
+export const Default: Story = {}
 
-  render: args => ({
-    components: { Button, Icon },
-    setup: () => ({ args, variants, sizes }),
+export const Variants: Story = {
+  render: () => ({
+    components: { Button },
+    setup: () => ({ variants }),
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Button v-bind="args">Button</Button>
-        </section>
-
-        <!-- Variants -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Variants</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button v-for="v in variants" :key="v" :variant="v">{{ v }}</Button>
-          </div>
-        </section>
+      <div class="flex flex-wrap items-center gap-3">
+        <Button v-for="v in variants" :key="v" :variant="v">{{ v }}</Button>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Sizes -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Sizes</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button v-for="s in sizes" :key="s" :size="s">
-              <Icon v-if="s.startsWith('icon')" name="plus" />
-              <template v-else>{{ s }}</template>
-            </Button>
-          </div>
-        </section>
+export const Sizes: Story = {
+  render: () => ({
+    components: { Button, Icon },
+    setup: () => ({ sizes }),
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button v-for="s in sizes" :key="s" :size="s">
+          <Icon v-if="s.startsWith('icon')" name="plus" />
+          <template v-else>{{ s }}</template>
+        </Button>
+      </div>
+    `,
+  }),
+}
 
-        <!-- With Icons -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">With Icons</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button icon="mail">Login with Email</Button>
-            <Button icon="chevron-right" iconPosition="end" variant="secondary">Next</Button>
-            <Button icon="trash-2" variant="destructive">Delete</Button>
-            <Button icon="plus" size="icon" variant="outline" />
-          </div>
-        </section>
+export const WithIcons: Story = {
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button icon="mail">Login with Email</Button>
+        <Button icon="chevron-right" iconPosition="end" variant="secondary">Next</Button>
+        <Button icon="trash-2" variant="destructive">Delete</Button>
+        <Button icon="plus" size="icon" variant="outline" />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Loading -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Loading</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button loading icon="mail">Login with Email</Button>
-            <Button loading icon="chevron-right" iconPosition="end" variant="secondary">Next</Button>
-            <Button loading icon="trash-2" variant="destructive">Delete</Button>
-            <Button loading icon="plus" size="icon" variant="outline" />
-          </div>
-        </section>
+export const Loading: Story = {
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button loading icon="mail">Login with Email</Button>
+        <Button loading icon="chevron-right" iconPosition="end" variant="secondary">Next</Button>
+        <Button loading icon="trash-2" variant="destructive">Delete</Button>
+        <Button loading icon="plus" size="icon" variant="outline" />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Disabled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Disabled</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button v-for="v in variants" :key="v" :variant="v" disabled>{{ v }}</Button>
-          </div>
-        </section>
+export const Disabled: Story = {
+  render: () => ({
+    components: { Button },
+    setup: () => ({ variants }),
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button v-for="v in variants" :key="v" :variant="v" disabled>{{ v }}</Button>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Rounded -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Rounded</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button rounded>Rounded</Button>
-            <Button rounded variant="outline">Outline</Button>
-            <Button rounded variant="secondary">Secondary</Button>
-            <Button rounded size="icon" variant="outline" icon="plus" />
-            <Button rounded size="icon" variant="secondary" icon="sun" />
-          </div>
-        </section>
+export const Rounded: Story = {
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button rounded>Rounded</Button>
+        <Button rounded variant="outline">Outline</Button>
+        <Button rounded variant="secondary">Secondary</Button>
+        <Button rounded size="icon" variant="outline" icon="plus" />
+        <Button rounded size="icon" variant="secondary" icon="sun" />
+      </div>
+    `,
+  }),
+}
 
-        <!-- Link Buttons -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Link Buttons</h3>
-          <div class="flex flex-wrap items-center gap-3">
-            <Button href="/dialog" variant="outline">Internal Link</Button>
-            <Button href="https://example.com" icon="chevron-right" iconPosition="end">External Link</Button>
-          </div>
-        </section>
+export const LinkButtons: Story = {
+  render: () => ({
+    components: { Button },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Button href="/dialog" variant="outline">Internal Link</Button>
+        <Button href="https://example.com" icon="external-link" iconPosition="end">External Link</Button>
       </div>
     `,
   }),

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button as ShadcnButton } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import { Button as ShadcnButton } from '../../shadcn/button'
 import WebLink from '@polymarbot/nuxt-layer-shadcn-ui/app/components/ui/WebLink/index.vue'
 import type { ButtonProps } from './types'
 

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

@@ -1,6 +1,9 @@
-import type { ButtonVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import type { ButtonVariants } from '../../shadcn/button'
 import type { RouteLocationRaw } from 'vue-router'
 
+export type ButtonVariant = NonNullable<ButtonVariants['variant']>
+export type ButtonSize = NonNullable<ButtonVariants['size']>
+
 export interface ButtonProps extends /* @vue-ignore */ ButtonVariants {
   loading?: boolean
   disabled?: boolean