fix: iconfontUrl

examples/layouts/BasicLayout.vue

@@ -6,6 +6,7 @@
     v-bind="state"
     :loading="loading"
     :breadcrumb="{ routes: breadcrumb }"
+    iconfont-url="//at.alicdn.com/t/font_2804900_26tw52dc2pl.js"
   >
     <template #menuHeaderRender>
       <a>

examples/router.ts

@@ -21,13 +21,13 @@ const routes: RouteRecordRaw[] = [
           {
             path: 'workspace',
             name: 'workspace',
-            meta: { title: 'Workspace' },
+            meta: { title: 'Workspace', icon: 'icon-antdesign' },
             component: () => import('./views/page1.vue'),
           },
           {
             path: 'monitor',
             name: 'monitor',
-            meta: { title: 'Monitor' },
+            meta: { title: 'Monitor', icon: 'icon-icon-test' },
             component: () => import('./views/page2.vue'),
           },
         ],

package.json

 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.1.0-beta.4",
+  "version": "3.1.0-beta.5",
   "license": "MIT",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "style": "./dist/style.css",
   "main": "./dist/pro-layout.umd.js",
@@ -41,7 +40,7 @@
     "ant-design-vue": "^2.2.2",
     "lodash-es": "^4.17.21",
     "omit.js": "^2.0.2",
-    "vue": "^3.1.0",
+    "vue": "^3.2.0",
     "vue-router": "^4.0.10"
   },
   "devDependencies": {
@@ -51,8 +50,7 @@
     "@typescript-eslint/parser": "^4.28.2",
     "@vitejs/plugin-vue": "^1.6.0",
     "@vitejs/plugin-vue-jsx": "^1.1.7",
-    "@vue/compiler-sfc": "^3.1.0",
-    "@vuedx/typescript-plugin-vue": "^0.7.4",
+    "@vue/compiler-sfc": "^3.2.0",
     "eslint": "^7.30.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",

src/BasicLayout.tsx

@@ -87,10 +87,7 @@ const ProLayout = defineComponent({
     'menuClick',
   ],
   setup(props, { emit, slots }) {
-    // const refProps = toRefs(props);
     const isTop = computed(() => props.layout === 'top');
-    // const isSide = computed(() => layout === 'side');
-    // const isMix = computed(() => layout === 'mix');
     const siderWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
 
     // if on event and @event
@@ -159,8 +156,6 @@ const ProLayout = defineComponent({
       itemRender: getPropsSlotfn(slots, props, 'breadcrumbRender'),
     }));
 
-    console.log('props', toRefs(props));
-
     const routeContext = reactive<RouteContextProps>(
       Object.assign(
         {...defaultRouteContext},
@@ -202,6 +197,7 @@ const ProLayout = defineComponent({
       const rightContentRender = getPropsSlot(slots, props, 'rightContentRender');
       const customHeaderRender = getPropsSlot(slots, props, 'headerRender');
       const menuHeaderRender = getPropsSlotfn(slots, props, 'menuHeaderRender');
+      const menuContentRender = getPropsSlotfn(slots, props, 'menuContentRender');
       const menuExtraRender = getPropsSlotfn(slots, props, 'menuExtraRender');
       const menuFooterRender = getPropsSlotfn(slots, props, 'menuFooterRender');
       const footerRender = getPropsSlot(slots, props, 'footerRender');
@@ -228,6 +224,7 @@ const ProLayout = defineComponent({
             rightContentRender,
             collapsedButtonRender,
             headerTitleRender: menuHeaderRender,
+            menuContentRender: menuContentRender,
             headerContentRender,
             headerRender: customHeaderRender,
             theme: (props.navTheme || 'dark').toLocaleLowerCase().includes('dark')
@@ -251,6 +248,7 @@ const ProLayout = defineComponent({
                     {...menuRenders}
                     isMobile={isMobile.value}
                     menuHeaderRender={menuHeaderRender}
+                    menuContentRender={menuContentRender}
                     menuExtraRender={menuExtraRender}
                     menuFooterRender={menuFooterRender}
                     collapsedButtonRender={collapsedButtonRender}

src/SiderMenu/BaseMenu.tsx

@@ -10,7 +10,10 @@ import {
   ExtractPropTypes,
   ConcreteComponent,
   watchEffect,
+  withCtx,
+  getCurrentInstance,
   FunctionalComponent,
+  ComponentInternalInstance,
 } from 'vue';
 import { createFromIconfontCN } from '@ant-design/icons-vue';
 import 'ant-design-vue/es/menu/style';
@@ -137,10 +140,12 @@ const LazyIcon: FunctionalComponent<{
 
 class MenuUtil {
   props: BaseMenuProps;
+  ctx: ComponentInternalInstance | null;
   RouterLink: ConcreteComponent;
 
-  constructor(props: BaseMenuProps) {
+  constructor(props: BaseMenuProps, ctx: ComponentInternalInstance | null) {
     this.props = props;
+    this.ctx = ctx;
 
     this.RouterLink = resolveComponent('router-link') as ConcreteComponent;
   }
@@ -157,7 +162,8 @@ class MenuUtil {
       !item?.meta?.hideChildrenInMenu
     ) {
       if (this.props.subMenuItemRender) {
-        return this.props.subMenuItemRender({
+        const subMenuItemRender = withCtx(this.props.subMenuItemRender, this.ctx);
+        return subMenuItemRender({
           item,
           children: this.getNavMenuItems(item.children),
         }) as VNode;
@@ -187,11 +193,12 @@ class MenuUtil {
       );
     }
 
+    const menuItemRender = this.props.menuItemRender && withCtx(this.props.menuItemRender, this.ctx)
+
     const [title, icon] = this.getMenuItem(item);
 
     return (
-      ((this.props.menuItemRender &&
-        this.props.menuItemRender({ item, title, icon })) as VNode) || (
+      (menuItemRender && menuItemRender({ item, title, icon }) as VNode) || (
         <Menu.Item
           disabled={item.meta?.disabled}
           danger={item.meta?.danger}
@@ -256,8 +263,8 @@ export default defineComponent({
   props: baseMenuProps,
   emits: ['update:openKeys', 'update:selectedKeys', 'click'],
   setup(props, { emit }) {
-    const menuUtil = new MenuUtil(props);
-
+    const ctx = getCurrentInstance()
+    const menuUtil = new MenuUtil(props, ctx);
     // update iconfontUrl
     watchEffect(() => {
       if (props.iconfontUrl) {

src/SiderMenu/SiderMenu.tsx

@@ -210,6 +210,7 @@ const SiderMenu: FC<SiderMenuProps> = (props: SiderMenuProps) => {
       selectedKeys={context.selectedKeys}
       menuItemRender={props.menuItemRender}
       subMenuItemRender={props.subMenuItemRender}
+      iconfontUrl={props.iconfontUrl}
       onClick={props.onMenuClick}
       style={{
         width: '100%',

src/TopNavHeader/index.tsx

@@ -92,6 +92,7 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => {
             theme={props.theme === 'realDark' ? 'dark' : props.theme}
             mode={props.mode}
             collapsed={props.collapsed}
+            iconfontUrl={props.iconfontUrl}
             menuData={menuData}
             menuItemRender={props.menuItemRender}
             subMenuItemRender={props.subMenuItemRender}

tsconfig.esm.json

 {
   "compilerOptions": {
-    "plugins": [
-      {
-        "name": "@vuedx/typescript-plugin-vue"
-      }
-    ],
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",

tsconfig.json

 {
   "compilerOptions": {
-    "plugins": [
-      {
-        "name": "@vuedx/typescript-plugin-vue"
-      }
-    ],
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",