frappe-ui 0.1.177 → 0.1.178

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.177",
+  "version": "0.1.178",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.ts",
   "type": "module",
@@ -32,7 +32,6 @@
   "dependencies": {
     "@floating-ui/vue": "^1.1.6",
     "@headlessui/vue": "^1.7.14",
-    "@iconify-json/lucide": "^1.2.57",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.16",
@@ -68,6 +67,7 @@
     "highlight.js": "^11.11.1",
     "idb-keyval": "^6.2.0",
     "lowlight": "^3.3.0",
+    "lucide-static": "^0.479.0",
     "marked": "^15.0.12",
     "ora": "5.4.1",
     "prettier": "^3.3.2",

package/src/components/Dropdown/Dropdown.story.vue

@@ -5,12 +5,12 @@ import { Button } from '../Button'
 const actions = [
   {
     label: 'Edit',
-    icon: LucideEdit,
+    icon: 'edit',
     onClick: () => console.log('Edit clicked'),
   },
   {
     label: 'Delete',
-    icon: LucideTrash2,
+    icon: 'trash-2',
     onClick: () => console.log('Delete clicked'),
   },
 ]
@@ -21,42 +21,42 @@ const groupedActions = [
     items: [
       {
         label: 'Edit',
-        icon: LucideEdit,
+        icon: 'edit',
         onClick: () => console.log('Edit clicked'),
       },
       {
         label: 'Duplicate',
-        icon: LucideCopy,
+        icon: 'copy',
         onClick: () => console.log('Duplicate clicked'),
       },
       {
         label: 'More Actions',
-        icon: LucideMoreHorizontal,
+        icon: 'more-horizontal',
         submenu: [
           {
             label: 'Archive',
-            icon: LucideArchive,
+            icon: 'archive',
             onClick: () => console.log('Archive clicked'),
           },
           {
             label: 'Export',
-            icon: LucideDownload,
+            icon: 'download',
             submenu: [
               {
                 label: 'Export as PDF',
-                icon: LucideFileText,
+                icon: 'file-text',
                 onClick: () => console.log('Export as PDF clicked'),
               },
               {
                 label: 'Export as CSV',
-                icon: LucideFile,
+                icon: 'file',
                 onClick: () => console.log('Export as CSV clicked'),
               },
             ],
           },
           {
             label: 'Share',
-            icon: LucideShare,
+            icon: 'share',
             onClick: () => console.log('Share clicked'),
           },
         ],
@@ -68,7 +68,7 @@ const groupedActions = [
     items: [
       {
         label: 'Delete',
-        icon: LucideTrash2,
+        icon: 'trash-2',
         onClick: () => console.log('Delete clicked'),
       },
     ],
@@ -78,19 +78,19 @@ const groupedActions = [
 const submenuActions = [
   {
     label: 'New',
-    icon: LucidePlus,
+    icon: 'plus',
     submenu: [
       {
         group: 'Documents',
         items: [
           {
             label: 'New Document',
-            icon: LucideFilePlus,
+            icon: 'file-plus',
             onClick: () => console.log('New Document clicked'),
           },
           {
             label: 'New Template',
-            icon: LucideFileText,
+            icon: 'file-text',
             onClick: () => console.log('New Template clicked'),
           },
         ],
@@ -100,12 +100,12 @@ const submenuActions = [
         items: [
           {
             label: 'New Folder',
-            icon: LucideFolderPlus,
+            icon: 'folder-plus',
             onClick: () => console.log('New Folder clicked'),
           },
           {
             label: 'New Project',
-            icon: LucideBriefcase,
+            icon: 'briefcase',
             onClick: () => console.log('New Project clicked'),
           },
         ],
@@ -114,21 +114,21 @@ const submenuActions = [
   },
   {
     label: 'Edit',
-    icon: LucideEdit,
+    icon: 'edit',
     onClick: () => console.log('Edit clicked'),
   },
   {
     label: 'Share',
-    icon: LucideShare,
+    icon: 'share',
     submenu: [
       {
         label: 'Share with Link',
-        icon: LucideLink,
+        icon: 'link',
         onClick: () => console.log('Share with Link clicked'),
       },
       {
         label: 'Share with Email',
-        icon: LucideMail,
+        icon: 'mail',
         onClick: () => console.log('Share with Email clicked'),
       },
       {
@@ -136,12 +136,12 @@ const submenuActions = [
         items: [
           {
             label: 'Share Settings',
-            icon: LucideSettings,
+            icon: 'settings',
             onClick: () => console.log('Share Settings clicked'),
           },
           {
             label: 'Permission Management',
-            icon: LucideShield,
+            icon: 'shield',
             onClick: () => console.log('Permission Management clicked'),
           },
         ],

package/src/components/Dropdown/types.ts

@@ -1,12 +1,9 @@
-import { FunctionalComponent } from 'vue'
 import { RouterLinkProps } from 'vue-router'
 import { ButtonProps } from '../Button'
 
-export type Icon = string | FunctionalComponent
-
 export type DropdownOption = {
   label: string
-  icon?: Icon
+  icon?: string | null
   component?: any
   onClick?: () => void
   route?: RouterLinkProps['to']

package/src/style.css

@@ -3,7 +3,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-svg[data-lucide] * {
-	stroke-width: 1.5 !important;
-}

package/vite/lucideIcons.js

@@ -1,7 +1,8 @@
+import * as LucideIcons from 'lucide-static'
 import AutoImport from 'unplugin-auto-import/vite'
-import IconsResolver from 'unplugin-icons/resolver'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
+import IconsResolver from 'unplugin-icons/resolver'
 
 export function lucideIcons() {
   const resolverObj = {
@@ -16,11 +17,52 @@ export function lucideIcons() {
     AutoImport(resolverObj),
     Components(resolverObj),
     Icons({
-      iconCustomizer: (collection, icon, props) => {
-        if (collection === 'lucide') {
-          props['data-lucide'] = icon
-        }
+      customCollections: {
+        lucide: getIcons(),
       },
     }),
   ]
 }
+
+function getIcons() {
+  let icons = {}
+  for (const icon in LucideIcons) {
+    if (icon === 'default') {
+      continue
+    }
+    let iconSvg = LucideIcons[icon]
+
+    // set stroke-width to 1.5
+    if (typeof iconSvg === 'string' && iconSvg.includes('stroke-width')) {
+      iconSvg = iconSvg.replace(/stroke-width="2"/g, 'stroke-width="1.5"')
+    }
+    icons[icon] = iconSvg
+
+    let dashKeys = camelToDash(icon)
+    for (let dashKey of dashKeys) {
+      if (dashKey !== icon) {
+        icons[dashKey] = iconSvg
+      }
+    }
+  }
+  return icons
+}
+
+function camelToDash(key) {
+  // barChart2 -> bar-chart-2
+  let withNumber = key.replace(/[A-Z0-9]/g, (m) => '-' + m.toLowerCase())
+  if (withNumber.startsWith('-')) {
+    withNumber = withNumber.substring(1)
+  }
+  // barChart2 -> bar-chart2
+  let withoutNumber = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())
+  if (withoutNumber.startsWith('-')) {
+    withoutNumber = withoutNumber.substring(1)
+  }
+
+  if (withNumber !== withoutNumber) {
+    // both are required because unplugin icon resolver doesn't put a dash before numbers
+    return [withNumber, withoutNumber]
+  }
+  return [withNumber]
+}