fix: IconFont url

.eslintignore

@@ -3,3 +3,4 @@ node_modules/
 **/style/
 *.html
 src/icons
+vite.config.ts
\ No newline at end of file

examples/layouts/BasicLayout.vue

@@ -156,11 +156,11 @@ export default defineComponent({
 
     const state = reactive({
       menuData,
-      splitMenus: false,
+      splitMenus: true,
       // title: 'ProLayout',
       // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
       navTheme: 'dark',
-      layout: 'top',
+      layout: 'mix',
       fixSiderbar: true,
     });
     const breadcrumb = computed(() =>

package.json

@@ -31,9 +31,10 @@
     "serve": "vite preview",
     "build:types": "tsc -b --force tsconfig.esm.json"
   },
+  "types": "./dist",
   "peerDependencies": {
     "ant-design-vue": ">=2.2.0",
-    "vue": ">=3.1.0",
+    "vue": ">=3.2.0",
     "vue-router": "^4.0.3"
   },
   "dependencies": {
@@ -43,14 +44,13 @@
     "vue": "^3.1.0",
     "vue-router": "^4.0.10"
   },
-  "types": "./dist",
   "devDependencies": {
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^16.0.1",
     "@typescript-eslint/eslint-plugin": "^4.28.2",
     "@typescript-eslint/parser": "^4.28.2",
-    "@vitejs/plugin-vue": "^1.2.4",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
+    "@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",
     "eslint": "^7.30.0",

src/BasicLayout.tsx

-import { computed, reactive, unref, provide, defineComponent, toRefs } from 'vue';
+import { computed, reactive, unref, defineComponent, toRefs } from 'vue';
 import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
 
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
-import omit from 'omit.js';
 import { withInstall } from 'ant-design-vue/es/_util/type';
 import useMediaQuery from './hooks/useMediaQuery';
 
@@ -13,12 +12,12 @@ import SiderMenuWrapper, { siderMenuProps } from './SiderMenu';
 import { WrapContent } from './WrapContent';
 import globalHeaderProps from './GlobalHeader/headerProps';
 import { HeaderView as Header, headerViewProps } from './Header';
-import { getPropsSlot, getPropsSlotfn, PropTypes } from './utils';
+import { getPropsSlot, getPropsSlotfn, PropTypes, pick } from './utils';
 import type { BreadcrumbProps } from './RouteContext';
 import type { CustomRender, FormatMessage, WithFalse } from './typings';
 
-import './BasicLayout.less';
 import PageLoading from './PageLoading';
+import './BasicLayout.less';
 
 export const basicLayoutProps = {
   ...defaultSettingProps,
@@ -141,10 +140,6 @@ const ProLayout = defineComponent({
       genLayoutStyle.minHeight = 0;
     }
 
-    // const [collapsed, onCollapse] = useMergedState<boolean>(defaultCollapsed || false, {
-    //   value: props.collapsed,
-    //   onChange: propsOnCollapse,
-    // });
     const headerRender = (
       p: BasicLayoutProps & {
         hasSiderMenu: boolean;
@@ -158,19 +153,41 @@ const ProLayout = defineComponent({
       }
       return <Header {...p} matchMenuKeys={matchMenuKeys || []} />;
     };
-    const breadcrumb = computed(() => ({
+
+    const breadcrumb = computed<BreadcrumbProps>(() => ({
       ...props.breadcrumb,
       itemRender: getPropsSlotfn(slots, props, 'breadcrumbRender'),
     }));
 
-    const routeContext = reactive<RouteContextProps>({
-      ...defaultRouteContext,
-      ...(omit(toRefs(props), ['onCollapse', 'onOpenKeys', 'onSelect', 'onMenuClick']) as any),
-      breadcrumb: breadcrumb,
-    });
+    console.log('props', toRefs(props));
+
+    const routeContext = reactive<RouteContextProps>(
+      Object.assign(
+        {...defaultRouteContext},
+        pick(toRefs(props), [
+          'locale',
+          'menuData',
+          'openKeys',
+          'selectedKeys',
+          'contentWidth',
+          'disableMobile',
+          'fixSiderbar',
+          'fixedHeader',
+          // 'hasSideMenu',
+          // 'hasHeader',
+          // 'hasFooter',
+          // 'hasFooterToolbar',
+          // 'setHasFooterToolbar',
+          ]) as any,
+        {
+          isMobile,
+          breadcrumb,
+        }
+      )
+    );
     provideRouteContext(routeContext);
-    return () => {
 
+    return () => {
       const {
         pure,
         onCollapse: propsOnCollapse,

src/PageContainer/index.tsx

@@ -208,10 +208,11 @@ const defaultPageHeaderRender = (
   if (!title && title !== false) {
     pageHeaderTitle = value.title;
   }
+  const unrefBreadcrumb = unref(value.breadcrumb || {})
   const breadcrumb = restProps.breadcrumb || {
-    ...(value.breadcrumb || {}),
-    routes: unref(value.breadcrumb?.routes),
-    itemRender: unref(value.breadcrumb?.itemRender),
+    ...(unrefBreadcrumb),
+    routes: unrefBreadcrumb.routes,
+    itemRender: unrefBreadcrumb.itemRender,
   };
   // inject value
   return (

src/RouteContext.tsx

-import { InjectionKey, provide, reactive, Ref } from 'vue';
+import { InjectionKey, provide, reactive, Ref, VNodeChild, ComputedRef } from 'vue';
 import { createContext, useContext } from './hooks/context';
-import { MenuDataItem, FormatMessage, WithFalse, CustomRender } from './typings';
+import { MenuDataItem, FormatMessage, WithFalse } from './typings';
 import { PureSettings } from './defaultSettings';
 
 export interface Route {
@@ -13,13 +13,13 @@ export interface BreadcrumbProps {
   prefixCls?: string;
   routes?: Route[];
   params?: any;
-  separator?: CustomRender;
+  separator?: VNodeChild;
   itemRender?: (opts: {
     route: Route;
     params: any;
     routes: Array<Route>;
     paths: Array<string>;
-  }) => CustomRender;
+  }) => VNodeChild;
 }
 
 export type BreadcrumbListReturn = Pick<
@@ -30,16 +30,14 @@ export type BreadcrumbListReturn = Pick<
 export interface MenuState {
   selectedKeys: string[];
   openKeys: string[];
-  setSelectedKeys?: (key: string[]) => void;
-  setOpenKeys?: (key: string[]) => void;
 }
 
 export interface RouteContextProps extends Partial<PureSettings>, MenuState {
+  menuData: MenuDataItem[];
+
   getPrefixCls?: (suffixCls?: string, customizePrefixCls?: string) => string;
   locale?: WithFalse<FormatMessage>;
-
-  breadcrumb?: BreadcrumbListReturn;
-  menuData: MenuDataItem[];
+  breadcrumb?: BreadcrumbListReturn | ComputedRef<BreadcrumbListReturn>;
   isMobile?: boolean;
   prefixCls?: string;
   collapsed?: boolean;

src/SiderMenu/BaseMenu.tsx

@@ -9,6 +9,8 @@ import {
   isVNode,
   ExtractPropTypes,
   ConcreteComponent,
+  watchEffect,
+  FunctionalComponent,
 } from 'vue';
 import { createFromIconfontCN } from '@ant-design/icons-vue';
 import 'ant-design-vue/es/menu/style';
@@ -97,15 +99,15 @@ export const baseMenuProps = {
 
 export type BaseMenuProps = ExtractPropTypes<typeof baseMenuProps>;
 
-const IconFont = createFromIconfontCN({
+let IconFont = createFromIconfontCN({
   scriptUrl: defaultSettings.iconfontUrl,
 });
 
-const LazyIcon = (props: {
+const LazyIcon: FunctionalComponent<{
   icon: VNodeChild | string;
   iconPrefixes?: string;
   prefixCls?: string;
-}) => {
+}> = (props) => {
   const { icon, iconPrefixes = 'icon-', prefixCls = 'ant-pro' } = props;
   if (!icon) {
     return null;
@@ -125,13 +127,13 @@ const LazyIcon = (props: {
   return (typeof LazyIcon === 'function' && <DynamicIcon />) || null;
 };
 
-LazyIcon.props = {
-  icon: {
-    type: [String, Function, Object] as PropType<string | Function | VNode | JSX.Element>,
-  },
-  iconPrefixes: String,
-  prefixCls: String,
-};
+// LazyIcon.props = {
+//   icon: {
+//     type: [String, Function, Object] as PropType<string | Function | VNode | JSX.Element>,
+//   },
+//   iconPrefixes: String,
+//   prefixCls: String,
+// };
 
 class MenuUtil {
   props: BaseMenuProps;
@@ -235,6 +237,20 @@ class MenuUtil {
   };
 }
 
+export type MenuOnSelect = {
+  key: string | number;
+  keyPath: string[] | number[];
+  item: VNodeChild | any;
+  domEvent: MouseEvent;
+  selectedKeys: string[];
+}
+
+export type MenuOnClick={
+  item: VNodeChild;
+  key: string | number;
+  keyPath: string | string[] | number | number[];
+}
+
 export default defineComponent({
   name: 'BaseMenu',
   props: baseMenuProps,
@@ -242,42 +258,43 @@ export default defineComponent({
   setup(props, { emit }) {
     const menuUtil = new MenuUtil(props);
 
+    // update iconfontUrl
+    watchEffect(() => {
+      if (props.iconfontUrl) {
+        IconFont = createFromIconfontCN({
+          scriptUrl: props.iconfontUrl,
+        })
+      }
+    })
+
     const handleOpenChange = (openKeys: string[]): void => {
       emit('update:openKeys', openKeys);
     };
-    const handleSelect = (params: {
-      key: string | number;
-      keyPath: string[] | number[];
-      item: VNodeChild | any;
-      domEvent: MouseEvent;
-      selectedKeys: string[];
-    }): void => {
-      emit('update:selectedKeys', params.selectedKeys);
+    const handleSelect = (args: MenuOnSelect): void => {
+      emit('update:selectedKeys', args.selectedKeys);
     };
-    const handleClick = (args: {
-      item: VNodeChild;
-      key: string | number;
-      keyPath: string | string[] | number | number[];
-    }) => {
+    const handleClick = (args: MenuOnClick) => {
       emit('click', args);
     };
-    return () => (
-      <Menu
-        key="Menu"
-        // inlineCollapsed={(isInline.value && props.collapsed) || undefined}
-        inlineIndent={16}
-        mode={props.mode}
-        theme={props.theme as 'dark' | 'light'}
-        openKeys={props.openKeys === false ? [] : props.openKeys}
-        selectedKeys={props.selectedKeys || []}
-        // @ts-ignore
-        onOpenChange={handleOpenChange}
-        onSelect={handleSelect}
-        onClick={handleClick}
-        {...props.menuProps}
-      >
-        {menuUtil.getNavMenuItems(props.menuData)}
-      </Menu>
-    );
+
+
+    return () => {
+      return (
+        <Menu
+          key="Menu"
+          inlineIndent={16}
+          mode={props.mode}
+          theme={props.theme as 'dark' | 'light'}
+          openKeys={props.openKeys === false ? [] : props.openKeys}
+          selectedKeys={props.selectedKeys || []}
+          onOpenChange={handleOpenChange}
+          onSelect={handleSelect}
+          onClick={handleClick}
+          {...props.menuProps}
+        >
+          {menuUtil.getNavMenuItems(props.menuData)}
+        </Menu>
+      )
+    };
   },
 });

src/SiderMenu/SiderMenu.tsx

@@ -11,7 +11,6 @@ import Layout from 'ant-design-vue/es/layout';
 import 'ant-design-vue/es/menu/style';
 import Menu from 'ant-design-vue/es/menu';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
-import { warn } from '@/utils/base';
 import BaseMenu, { baseMenuProps } from './BaseMenu';
 import { WithFalse, CustomRender } from '../typings';
 import { SiderProps } from './typings';

src/defaultSettings.ts

 import type { PropType, ExtractPropTypes } from 'vue';
 import type { MenuTheme, ContentWidth } from './typings';
 
-export interface RenderSetting {
-  headerRender?: false;
-  footerRender?: false;
-  menuRender?: false;
-  menuHeaderRender?: false;
-}
 export interface RenderSetting {
   headerRender?: false;
   footerRender?: false;

src/utils/index.ts

@@ -82,3 +82,12 @@ export type StringKeyOf<T> = Extract<keyof T, string>;
 export type EventHandlers<E> = {
   [K in StringKeyOf<E>]?: E[K] extends Function ? E[K] : (payload: E[K]) => void;
 };
+
+/**
+ * Creates an object composed of the picked object properties.
+ * @param obj The source object
+ * @param paths The property paths to pick
+ */
+export function pick<T, K extends keyof T>(obj: T, paths: K[]): Pick<T, K> {
+  return { ...paths.reduce((mem, key) => ({ ...mem, [key]: obj[key] }), {}) } as Pick<T, K>;
+}

vite.config.ts

@@ -9,11 +9,11 @@ import vueLess from './scripts/vite/less';
 export default defineConfig({
   plugins: [
     vue(),
-    vueJsx(),
+    vueJsx({
+      mergeProps: false,
+      enableObjectSlots: false,
+    }),
     vueLess(),
-    /*     dts({
-      tsConfigFilePath: resolve(__dirname, './tsconfig.json'),
-    }), */
   ],
   resolve: {
     alias: {