@polymarbot/nuxt-layer-shadcn-ui 0.9.6 → 0.10.0

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

@@ -1,8 +1,9 @@
+import type { Component } from 'vue'
 import type { DropdownItem } from '../Dropdown/types'
 
 export interface AdminLayoutSidebarMenuItem {
   label: string
-  icon?: string
+  icon?: string | Component
   href?: string
   command?: () => void
   group?: string
@@ -14,7 +15,7 @@ export interface AdminLayoutSidebarMenuItem {
 export interface AdminLayoutSidebarDropdownProfile {
   title?: string
   subtitle?: string
-  icon?: string
+  icon?: string | Component
   image?: string
 }
 

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

@@ -54,13 +54,9 @@ const hasDescription = computed(() => Boolean(slots.default || props.description
   <ShadcnAlert :class="mergedClass">
     <slot name="icon">
       <Icon
-        v-if="typeof icon === 'string' && icon"
+        v-if="icon"
         :name="icon"
       />
-      <component
-        :is="icon"
-        v-else-if="icon"
-      />
       <Icon
         v-else-if="defaultIconName"
         :name="defaultIconName"

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

@@ -1,6 +1,8 @@
+import type { Component } from 'vue'
+
 export interface BreadcrumbItem {
   label?: string
-  icon?: string
+  icon?: string | Component
   href?: string
   target?: string
 }

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

@@ -1,4 +1,5 @@
 import type { ButtonVariants } from '../../shadcn/button'
+import type { Component } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 export type ButtonVariant = ButtonVariants['variant']
@@ -10,7 +11,7 @@ export interface ButtonProps {
   loading?: boolean
   disabled?: boolean
   rounded?: boolean
-  icon?: string
+  icon?: string | Component
   iconPosition?: 'start' | 'end'
   href?: string
   to?: RouteLocationRaw

package/app/components/ui/Dropdown/ItemIcon.vue

@@ -3,7 +3,6 @@ import { cva } from 'class-variance-authority'
 import type { DropdownActionItem } from './types'
 
 const props = defineProps<{
-  /** Icon name (lucide kebab-case) or a Vue component. */
   icon: DropdownActionItem['icon']
   /** Override icon color independently of the surrounding item color. */
   iconColor?: DropdownActionItem['iconColor']
@@ -29,13 +28,8 @@ const colorClass = computed(() => iconColorVariants({ color: props.iconColor }))
 
 <template>
   <Icon
-    v-if="typeof icon === 'string'"
+    v-if="icon"
     :name="icon"
     :class="colorClass"
   />
-  <component
-    :is="icon"
-    v-else-if="icon"
-    :class="cn('size-4', colorClass)"
-  />
 </template>

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { Coffee } from 'lucide-vue-next'
 import Icon from './index.vue'
 
 const commonIcons = [
@@ -75,6 +76,30 @@ export const CommonIcons: Story = {
   }),
 }
 
+export const FromComponent: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<script setup lang="ts">
+import { Coffee } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Icon :name="Coffee" class="size-6" />
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Icon },
+    setup: () => ({ Coffee }),
+    template: '<Icon :name="Coffee" class="size-6" />',
+  }),
+}
+
 export const Sizes: Story = {
   parameters: {
     ...noControls,

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

@@ -14,6 +14,7 @@ function toPascalCase (str: string): string {
 }
 
 const iconComponent = computed<Component | undefined>(() => {
+  if (typeof props.name !== 'string') return props.name
   const pascalName = toPascalCase(props.name)
   return (icons as Record<string, Component>)[pascalName]
 })

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

@@ -1,5 +1,7 @@
+import type { Component } from 'vue'
+
 export interface IconProps {
-  /** Icon name in kebab-case (e.g. "mail", "arrow-left", "circle-question-mark") */
-  name: string
+  /** Lucide icon name in kebab-case (e.g. "arrow-left") or a Vue component. */
+  name: string | Component
   class?: ClassValue
 }

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

@@ -1,9 +1,9 @@
-import type { VNode } from 'vue'
+import type { Component, VNode } from 'vue'
 
 export type ModalContentType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger' | 'error'
 
 export interface ModalContentProps {
   type?: ModalContentType
-  icon?: string
+  icon?: string | Component
   content?: string | VNode | HTMLElement
 }

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

@@ -34,7 +34,7 @@ function getTriggerClass (item: TabsItem) {
   const showsOnlyIcon = !!item.icon && (props.iconOnly || !item.title)
   return cn(
     props.rounded && 'rounded-full',
-    showsOnlyIcon && 'aspect-square flex-none px-0',
+    showsOnlyIcon && 'px-0 aspect-square flex-none',
     props.triggerClass,
   )
 }
@@ -62,13 +62,9 @@ function getTriggerClass (item: TabsItem) {
           :active="activeValue === item.value"
         >
           <Icon
-            v-if="item.icon && typeof item.icon === 'string'"
+            v-if="item.icon"
             :name="item.icon"
           />
-          <component
-            :is="item.icon"
-            v-else-if="item.icon"
-          />
           <span v-if="item.title && !iconOnly">
             {{ item.title }}
           </span>

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

@@ -0,0 +1,21 @@
+{
+  "drag": {
+    "title": "Click or drag file to this area to upload",
+    "titleMultiple": "Click or drag files to this area to upload"
+  },
+  "empty": "No files",
+  "error": {
+    "oversize": "{files} exceeds the {size} size limit."
+  },
+  "hint": {
+    "max": "Up to {max} files can be selected.",
+    "maxSize": "Max size per file: {size}.",
+    "multiple": "Multiple files can be selected.",
+    "single": "Only a single file can be selected."
+  },
+  "preview": "Preview",
+  "remove": "Remove",
+  "upload": "Upload",
+  "uploadDirectory": "Upload Directory",
+  "uploading": "Uploading"
+}

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

@@ -0,0 +1,381 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import EventLog from '#storybook/EventLog.vue'
+import type { UploadFile, UploadVariant } from './types'
+import Upload from './index.vue'
+
+const variants: UploadVariant[] = [ 'button', 'box', 'drag' ]
+
+const sampleImage = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop'
+const sampleImage2 = 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop'
+
+const sampleImages: UploadFile[] = [
+  { uid: 's-img-1', name: 'avatar.png', url: sampleImage, status: 'done' },
+  { uid: 's-img-2', name: 'cover.png', url: sampleImage2, status: 'done' },
+]
+
+const meta = {
+  title: 'UI/Upload',
+  component: Upload,
+  argTypes: {
+    variant: { control: 'select', options: variants },
+    accept: { control: 'text' },
+    disabled: { control: 'boolean' },
+    readonly: { control: 'boolean' },
+    invalid: { control: 'boolean' },
+    multiple: { control: 'boolean' },
+    maxCount: { control: 'number' },
+    maxSize: { control: 'number' },
+    directory: { control: 'boolean' },
+    text: { control: 'text' },
+    icon: { control: 'text' },
+  },
+  args: {
+    variant: 'button',
+    accept: '',
+    disabled: false,
+    readonly: false,
+    invalid: false,
+    multiple: false,
+    maxCount: undefined,
+    maxSize: undefined,
+    directory: false,
+    text: '',
+    icon: '',
+  },
+  // fileList carries `raw: File` after a user picks a file, which is not
+  // structured-cloneable — Storybook's `updateArgs` drops such values, so
+  // binding fileList through args makes uploads appear to do nothing. Use a
+  // local ref instead, optionally seeded from `args.fileList`.
+  render: args => ({
+    components: { Upload },
+    setup () {
+      const initial = Array.isArray(args.fileList) ? args.fileList as UploadFile[] : []
+      const fileList = ref<UploadFile[]>([ ...initial ])
+      return { args, fileList }
+    },
+    template: `
+      <div class="max-w-2xl">
+        <Upload v-bind="args" v-model:fileList="fileList" />
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof Upload>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const noControls = { controls: { disable: true }} satisfies Story['parameters']
+
+export const Default: Story = {}
+
+// --- Variant showcase ---
+
+export const VariantButton: Story = {
+  parameters: noControls,
+  args: { variant: 'button' },
+}
+
+export const VariantBox: Story = {
+  parameters: noControls,
+  args: {
+    variant: 'box',
+    accept: 'image/*',
+    multiple: true,
+    maxCount: 5,
+    fileList: sampleImages,
+  },
+}
+
+export const VariantDrag: Story = {
+  parameters: noControls,
+  args: { variant: 'drag' },
+}
+
+export const AcceptImagesOnly: Story = {
+  parameters: noControls,
+  args: {
+    variant: 'drag',
+    accept: 'image/*',
+    multiple: true,
+  },
+}
+
+// --- Selection behavior (all three variants side by side) ---
+
+export const Multiple: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Upload },
+    setup: () => ({ variants }),
+    template: `
+      <div class="max-w-2xl space-y-6">
+        <Upload v-for="v in variants" :key="v" :variant="v" multiple />
+      </div>
+    `,
+  }),
+}
+
+export const MaxCount: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Upload },
+    setup: () => ({ variants }),
+    template: `
+      <div class="max-w-2xl space-y-6">
+        <Upload v-for="v in variants" :key="v" :variant="v" multiple :maxCount="3" />
+      </div>
+    `,
+  }),
+}
+
+export const MaxSize: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Upload },
+    setup () {
+      const errorMessage = ref('')
+      const onError = (e: unknown) => {
+        errorMessage.value = e instanceof Error ? e.message : String(e)
+      }
+      return { variants, errorMessage, onError }
+    },
+    template: `
+      <div class="max-w-2xl space-y-6">
+        <Upload
+          v-for="v in variants"
+          :key="v"
+          :variant="v"
+          multiple
+          :maxSize="50 * 1024"
+          @error="onError"
+        />
+        <p v-if="errorMessage" class="text-sm text-danger">
+          {{ errorMessage }}
+        </p>
+      </div>
+    `,
+  }),
+}
+
+export const Directory: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Upload },
+    setup: () => ({ variants }),
+    template: `
+      <div class="max-w-2xl space-y-6">
+        <Upload v-for="v in variants" :key="v" :variant="v" directory :maxCount="5" />
+      </div>
+    `,
+  }),
+}
+
+// --- States ---
+
+export const Disabled: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Upload },
+    setup () {
+      const fileList = ref<UploadFile[]>([ ...sampleImages ])
+      return { variants, fileList }
+    },
+    template: `
+      <div class="max-w-2xl space-y-6">
+        <Upload
+          v-for="v in variants"
+          :key="v"
+          :variant="v"
+          disabled
+          multiple
+          :fileList="fileList"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const Readonly: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Upload },
+    setup () {
+      const fileList = ref<UploadFile[]>([ ...sampleImages ])
+      return { variants, fileList }
+    },
+    template: `
+      <div class="max-w-2xl space-y-6">
+        <Upload
+          v-for="v in variants"
+          :key="v"
+          :variant="v"
+          readonly
+          multiple
+          :fileList="fileList"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const ReadonlyEmpty: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Upload },
+    setup: () => ({ variants }),
+    template: `
+      <div class="max-w-2xl space-y-6">
+        <Upload v-for="v in variants" :key="v" :variant="v" readonly />
+      </div>
+    `,
+  }),
+}
+
+export const Invalid: Story = {
+  parameters: noControls,
+  args: {
+    variant: 'drag',
+    invalid: true,
+    multiple: true,
+    fileList: [
+      { uid: 'i-1', name: 'gitmoji (1).md', status: 'done' },
+      { uid: 'i-2', name: 'cd973fbf55b88a9ebaec4f01821c552a.png', status: 'done' },
+    ],
+  },
+}
+
+// --- Custom behaviors ---
+
+export const BeforeUpload: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Upload
+    v-model:fileList="fileList"
+    variant="drag"
+    multiple
+    :beforeUpload="beforeUpload"
+  />
+</template>
+
+<script setup lang="ts">
+const fileList = ref<UploadFile[]>([])
+
+function beforeUpload (file: File) {
+  // Reject files larger than 1MB
+  if (file.size > 1024 * 1024) {
+    alert(\`\${file.name} is too large (>1MB)\`)
+    return false
+  }
+  // Optionally return a Promise<File | Blob> to replace the file
+  return true
+}
+</script>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Upload },
+    setup () {
+      const fileList = ref<UploadFile[]>([])
+      function beforeUpload (file: File) {
+        if (file.size > 1024 * 1024) {
+          alert(`${file.name} is too large (>1MB)`)
+          return false
+        }
+        return true
+      }
+      return { fileList, beforeUpload }
+    },
+    template: `
+      <div class="max-w-2xl">
+        <Upload
+          v-model:fileList="fileList"
+          variant="drag"
+          multiple
+          :beforeUpload="beforeUpload"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const CustomUpload: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <Upload
+    v-model:fileList="fileList"
+    variant="box"
+    accept="image/*"
+    multiple
+    :maxCount="5"
+    :upload="upload"
+  />
+</template>
+
+<script setup lang="ts">
+const fileList = ref<UploadFile[]>([])
+
+async function upload (files: (File | Blob)[]) {
+  // Simulate network latency
+  await new Promise(resolve => setTimeout(resolve, 1500))
+  // throw new Error('Upload failed') would mark items as error
+}
+</script>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { Upload },
+    setup () {
+      const fileList = ref<UploadFile[]>([])
+      async function upload () {
+        await new Promise<void>(resolve => setTimeout(resolve, 1500))
+      }
+      return { fileList, upload }
+    },
+    template: `
+      <div class="max-w-2xl">
+        <Upload
+          v-model:fileList="fileList"
+          variant="box"
+          accept="image/*"
+          multiple
+          :maxCount="5"
+          :upload="upload"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const EventHandling: Story = {
+  parameters: noControls,
+  render: () => ({
+    components: { Upload, EventLog },
+    setup: () => ({ fileList: ref<UploadFile[]>([]) }),
+    template: `
+      <EventLog v-slot="{ record }">
+        <Upload
+          v-model:fileList="fileList"
+          variant="drag"
+          multiple
+          @update:fileList="(v) => record('update:fileList', v.map(f => f.name))"
+          @change="(v) => record('change', v.map(f => f.name))"
+          @remove="(f) => record('remove', f.name)"
+          @preview="(f) => record('preview', f.name)"
+          @error="(e) => record('error', String(e))"
+        />
+      </EventLog>
+    `,
+  }),
+}