@polymarbot/nuxt-layer-shadcn-ui 0.5.2 → 0.5.4

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

@@ -10,15 +10,19 @@ const meta = {
   argTypes: {
     type: { control: 'select', options: types },
     icon: { control: 'text' },
+    title: { control: 'text' },
+    description: { control: 'text' },
   },
   args: {
     type: 'default',
     icon: '',
+    title: 'Heads up!',
+    description: 'You can add components to your app using the cli.',
   },
   render: args => ({
     components: { Alert },
     setup: () => ({ args }),
-    template: '<Alert v-bind="args">This is an alert message.</Alert>',
+    template: '<Alert v-bind="args" />',
   }),
 } satisfies Meta<typeof Alert>
 
@@ -37,9 +41,13 @@ export const Types: Story = {
         code: `
 <template>
   <div class="space-y-3">
-    <Alert v-for="t in types" :key="t" :type="t">
-      This is a <strong>{{ t }}</strong> alert message.
-    </Alert>
+    <Alert
+      v-for="t in types"
+      :key="t"
+      :type="t"
+      :title="t"
+      description="This is an alert message."
+    />
   </div>
 </template>
 `.trim(),
@@ -51,14 +59,36 @@ export const Types: Story = {
     setup: () => ({ types }),
     template: `
       <div class="space-y-3">
-        <Alert v-for="t in types" :key="t" :type="t">
-          This is a <strong>{{ t }}</strong> alert message.
-        </Alert>
+        <Alert
+          v-for="t in types"
+          :key="t"
+          :type="t"
+          :title="t"
+          description="This is an alert message."
+        />
       </div>
     `,
   }),
 }
 
+export const TitleOnly: Story = {
+  parameters: noControls,
+  args: {
+    type: 'info',
+    title: 'A short title without description.',
+    description: '',
+  },
+}
+
+export const DescriptionOnly: Story = {
+  parameters: noControls,
+  args: {
+    type: 'info',
+    title: '',
+    description: 'A standalone description without a title.',
+  },
+}
+
 export const WithIcons: Story = {
   parameters: {
     ...noControls,
@@ -67,9 +97,9 @@ export const WithIcons: Story = {
         code: `
 <template>
   <div class="space-y-3">
-    <Alert type="info" icon="bell">Alert with a custom bell icon.</Alert>
-    <Alert type="success" icon="sparkles">Alert with a custom sparkles icon.</Alert>
-    <Alert type="warn" icon="flag">Alert with a custom flag icon.</Alert>
+    <Alert type="info" icon="bell" title="Custom bell icon" description="Override the default icon for this type." />
+    <Alert type="success" icon="sparkles" title="Custom sparkles icon" description="Pass any lucide icon name." />
+    <Alert type="warn" icon="flag" title="Custom flag icon" description="Works for every type." />
   </div>
 </template>
 `.trim(),
@@ -80,10 +110,68 @@ export const WithIcons: Story = {
     components: { Alert },
     template: `
       <div class="space-y-3">
-        <Alert type="info" icon="bell">Alert with a custom bell icon.</Alert>
-        <Alert type="success" icon="sparkles">Alert with a custom sparkles icon.</Alert>
-        <Alert type="warn" icon="flag">Alert with a custom flag icon.</Alert>
+        <Alert type="info" icon="bell" title="Custom bell icon" description="Override the default icon for this type." />
+        <Alert type="success" icon="sparkles" title="Custom sparkles icon" description="Pass any lucide icon name." />
+        <Alert type="warn" icon="flag" title="Custom flag icon" description="Works for every type." />
       </div>
     `,
   }),
 }
+
+export const HiddenIcon: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Alert type="success" :icon="null" title="Icon hidden" description="Pass icon=\\"null\\" to suppress the type's default icon." />
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Alert },
+    template: `
+      <Alert type="success" :icon="null" title="Icon hidden" description="Pass icon=&quot;null&quot; to suppress the type's default icon." />
+    `,
+  }),
+}
+
+export const CustomSlots: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Alert type="info">
+    <template #icon>
+      <Icon name="rocket" />
+    </template>
+    <template #title>
+      <span class="underline">Custom title slot</span>
+    </template>
+    Description rendered via the default slot. You can put <strong>rich content</strong> here.
+  </Alert>
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Alert },
+    template: `
+      <Alert type="info">
+        <template #icon>
+          <Icon name="rocket" />
+        </template>
+        <template #title>
+          <span class="underline">Custom title slot</span>
+        </template>
+        Description rendered via the default slot. You can put <strong>rich content</strong> here.
+      </Alert>
+    `,
+  }),
+}

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Alert as ShadcnAlert } from '../../shadcn/alert'
+import { Alert as ShadcnAlert, AlertDescription, AlertTitle } from '../../shadcn/alert'
 import type { AlertProps, AlertType } from './types'
 
 const typeIconNameMap: Partial<Record<AlertType, string>> = {
@@ -22,9 +22,17 @@ const typeClasses: Record<AlertType, string> = {
 const props = withDefaults(defineProps<AlertProps>(), {
   type: 'default',
   icon: undefined,
+  title: undefined,
+  description: undefined,
   class: undefined,
 })
 
+const slots = defineSlots<{
+  default?: () => any
+  title?: () => any
+  icon?: () => any
+}>()
+
 const defaultIconName = computed(() => {
   // null explicitly hides the icon; any truthy value is an explicit icon.
   if (props.icon || props.icon === null) return undefined
@@ -37,25 +45,39 @@ const mergedClass = computed(() =>
     props.class,
   ),
 )
+
+const hasTitle = computed(() => Boolean(slots.title || props.title))
+const hasDescription = computed(() => Boolean(slots.default || props.description))
 </script>
 
 <template>
   <ShadcnAlert :class="mergedClass">
-    <Icon
-      v-if="typeof icon === 'string' && icon"
-      :name="icon"
-    />
-    <component
-      :is="icon"
-      v-else-if="icon"
-      class="size-4"
-    />
-    <Icon
-      v-else-if="defaultIconName"
-      :name="defaultIconName"
-    />
-    <div class="col-start-2">
-      <slot />
-    </div>
+    <slot name="icon">
+      <Icon
+        v-if="typeof icon === 'string' && icon"
+        :name="icon"
+      />
+      <component
+        :is="icon"
+        v-else-if="icon"
+      />
+      <Icon
+        v-else-if="defaultIconName"
+        :name="defaultIconName"
+      />
+    </slot>
+    <AlertTitle v-if="hasTitle">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </AlertTitle>
+    <AlertDescription
+      v-if="hasDescription"
+      class="text-current/80"
+    >
+      <slot>
+        {{ description }}
+      </slot>
+    </AlertDescription>
   </ShadcnAlert>
 </template>

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

@@ -6,5 +6,9 @@ export interface AlertProps {
   type?: AlertType
   /** Pass `null` to explicitly hide the icon; leave undefined to use the type's default. */
   icon?: string | Component | null
+  /** Bold heading line. Slot `#title` takes precedence. */
+  title?: string
+  /** Description text. Default slot takes precedence. */
+  description?: string
   class?: ClassValue
 }

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

@@ -6,7 +6,7 @@ defineProps<BadgeProps>()
 </script>
 
 <template>
-  <ShadcnBadge>
+  <ShadcnBadge :variant="variant">
     <slot />
   </ShadcnBadge>
 </template>

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

@@ -1,5 +1,7 @@
 import type { BadgeVariants } from '../../shadcn/badge'
 
-export type BadgeVariant = NonNullable<BadgeVariants['variant']>
+export type BadgeVariant = BadgeVariants['variant']
 
-export interface BadgeProps extends /* @vue-ignore */ BadgeVariants {}
+export interface BadgeProps {
+  variant?: BadgeVariant
+}

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

@@ -1,13 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { SurfaceColor } from '../Surface/types'
 import type { ButtonSize, ButtonVariant } from './types'
 import Icon from '../Icon/index.vue'
+import Surface from '../Surface/index.vue'
 import Button from './index.vue'
 
 const variants = [
   'default',
+  'secondary',
   'destructive',
   'outline',
-  'secondary',
   'ghost',
   'link',
 ] as const satisfies readonly ButtonVariant[]
@@ -21,6 +23,16 @@ const sizes = [
   'icon-lg',
 ] as const satisfies readonly ButtonSize[]
 
+const surfaceColors = [
+  'default',
+  'primary',
+  'success',
+  'info',
+  'help',
+  'warn',
+  'danger',
+] as const satisfies readonly SurfaceColor[]
+
 const meta = {
   title: 'UI/Button',
   component: Button,
@@ -70,9 +82,9 @@ export const Variants: Story = {
         code: `
 <template>
   <Button variant="default">default</Button>
+  <Button variant="secondary">secondary</Button>
   <Button variant="destructive">destructive</Button>
   <Button variant="outline">outline</Button>
-  <Button variant="secondary">secondary</Button>
   <Button variant="ghost">ghost</Button>
   <Button variant="link">link</Button>
 </template>
@@ -265,3 +277,43 @@ export const LinkButtons: Story = {
     `,
   }),
 }
+
+export const InheritedHoverColor: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <!-- outline / ghost / link inherit the parent's currentColor -->
+  <Surface variant="soft" color="success">
+    <Button variant="outline">Outline</Button>
+    <Button variant="ghost">Ghost</Button>
+    <Button variant="link">Link</Button>
+  </Surface>
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Button, Surface },
+    setup: () => ({ surfaceColors }),
+    template: `
+      <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
+        <Surface
+          v-for="c in surfaceColors"
+          :key="c"
+          variant="soft"
+          :color="c"
+          class="p-3 flex items-center gap-2"
+        >
+          <span class="mr-auto text-sm font-medium capitalize">{{ c }}</span>
+          <Button variant="outline" size="sm">Outline</Button>
+          <Button variant="ghost" size="sm">Ghost</Button>
+          <Button variant="link" size="sm">Link</Button>
+        </Surface>
+      </div>
+    `,
+  }),
+}

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

@@ -4,9 +4,31 @@ import WebLink from '@polymarbot/nuxt-layer-shadcn-ui/app/components/ui/WebLink/
 import type { ButtonProps } from './types'
 
 const props = defineProps<ButtonProps>()
-const mergedClass = computed(() => cn('cursor-pointer', props.rounded && `
-  rounded-full
-`, props.class))
+
+const variantClasses: Partial<Record<NonNullable<ButtonVariant>, string>> = {
+  outline: `
+    bg-transparent
+    dark:bg-transparent
+    border-current/20
+    dark:border-current/20
+    hover:bg-current/10
+    dark:hover:bg-current/10
+    hover:text-current
+  `,
+  ghost: `
+    hover:bg-current/10
+    dark:hover:bg-current/10
+    hover:text-current
+  `,
+  link: 'text-current',
+}
+
+const mergedClass = computed(() => cn(
+  'cursor-pointer',
+  props.variant && variantClasses[props.variant],
+  props.rounded && 'rounded-full',
+  props.class,
+))
 
 const isLink = computed(() => !!props.href || !!props.to)
 const hasIcon = computed(() => !!$slots.icon || !!props.icon)
@@ -19,6 +41,8 @@ const $slots = defineSlots<{
 
 <template>
   <ShadcnButton
+    :variant="variant"
+    :size="size"
     :class="mergedClass"
     :asChild="isLink"
     :type="isLink ? undefined : 'button'"

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

@@ -1,10 +1,12 @@
 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 type ButtonVariant = ButtonVariants['variant']
+export type ButtonSize = ButtonVariants['size']
 
-export interface ButtonProps extends /* @vue-ignore */ ButtonVariants {
+export interface ButtonProps {
+  variant?: ButtonVariant
+  size?: ButtonSize
   loading?: boolean
   disabled?: boolean
   rounded?: boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "1cee179e4b0678c75dd8293d0274ec2afb8d9143"
+  "gitHead": "fc48f5b21d76aa2ff0badd6ac6d9ccc5be906f26"
 }