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

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,27 @@
+{
+  "drag": {
+    "title": "Click or drag file to this area to upload",
+    "titleDirectory": "Click or drag a directory to this area to upload",
+    "titleMultiple": "Click or drag files to this area to upload"
+  },
+  "empty": "No files",
+  "error": {
+    "accept": "{files} is not an accepted file type ({accept}).",
+    "oversize": "{files} exceeds the {size} size limit."
+  },
+  "hint": {
+    "accept": "Accepted: {types}.",
+    "acceptAudio": "audio",
+    "acceptImage": "images",
+    "acceptVideo": "videos",
+    "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"
+}