feat(menu): support passing a function as icon options

vexip-ui · Oct 25, 2022 · 257a150 · 257a150
1 parent e909ea3
commit 257a150
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 8 deletions.
diff --git a/components/menu/menu-item.vue b/components/menu/menu-item.vue
@@ -26,7 +26,8 @@
         >
           <div v-if="props.icon" :class="nh.be('icon')">
             <slot name="icon">
-              <Icon v-bind="props.iconProps" :icon="props.icon"></Icon>
+              <Renderer v-if="typeof props.icon === 'function'" :renderer="props.icon"></Renderer>
+              <Icon v-else v-bind="props.iconProps" :icon="props.icon"></Icon>
             </slot>
           </div>
           <span
@@ -137,7 +138,7 @@ const MenuItem = defineComponent({
   },
   props: {
     label: String,
-    icon: Object,
+    icon: [Object, Function],
     iconProps: Object as PropType<IconMinorProps>,
     disabled: booleanProp,
     transfer: booleanStringProp,
@@ -155,7 +156,10 @@ const MenuItem = defineComponent({
         default: null,
         static: true
       },
-      icon: null,
+      icon: {
+        isFunc: true,
+        default: null
+      },
       iconProps: null,
       disabled: {
         default: false,

diff --git a/components/menu/symbol.ts b/components/menu/symbol.ts
@@ -7,7 +7,7 @@ export type MenuGroupType = 'collapse' | 'dropdown'
 
 export interface MenuOptions {
   label: string,
-  icon?: Record<string, any>,
+  icon?: Record<string, any> | (() => any),
   iconProps?: IconMinorProps,
   name?: string | (() => string),
   disabled?: boolean,

diff --git a/docs/demos/menu/api.en-US.md b/docs/demos/menu/api.en-US.md
@@ -5,7 +5,7 @@ import type { RouteLocationRaw } from 'vue-router'
 
 interface MenuOptions {
   label: string,
-  icon?: Record<string, any>,
+  icon?: Record<string, any> | (() => any),
   iconProps?: IconMinorProps,
   name?: string | (() => string),
   disabled?: boolean,

diff --git a/docs/demos/menu/api.zh-CN.md b/docs/demos/menu/api.zh-CN.md
@@ -5,7 +5,7 @@ import type { RouteLocationRaw } from 'vue-router'
 
 interface MenuOptions {
   label: string,
-  icon?: Record<string, any>,
+  icon?: Record<string, any> | (() => any),
   iconProps?: IconMinorProps,
   name?: string | (() => string),
   disabled?: boolean,

diff --git a/docs/demos/menu/options/demo.en-US.vue b/docs/demos/menu/options/demo.en-US.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script setup lang="ts">
+import { h } from 'vue'
+import { Icon } from 'vexip-ui'
 import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
@@ -42,7 +44,7 @@ const options: MenuOptions[] = [
       {
         label: '4',
         name: () => 'Menu 4',
-        icon: User
+        icon: () => h(Icon, { icon: User })
       },
       {
         label: '5',

diff --git a/docs/demos/menu/options/demo.zh-CN.vue b/docs/demos/menu/options/demo.zh-CN.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script setup lang="ts">
+import { h } from 'vue'
+import { Icon } from 'vexip-ui'
 import { EnvelopesBulk, City, ChartPie, User, Marker } from '@vexip-ui/icons'
 
 import type { MenuOptions } from 'vexip-ui'
@@ -42,7 +44,7 @@ const options: MenuOptions[] = [
       {
         label: '4',
         name: () => '菜单 4',
-        icon: User
+        icon: () => h(Icon, { icon: User })
       },
       {
         label: '5',