fix: type

examples/footer-toolbar.tsx

@@ -15,7 +15,7 @@ const DemoComponent = {
       state.toolbarProps = { ...state.toolbarProps, ...tProps };
     };
 
-    const { state: routeContext, provider: RouteContextProvider } = createRouteContext({
+    const [ routeContext, RouteContextProvider ] = createRouteContext({
       hasFooterToolbar: false,
       setHasFooterToolbar: v => {
         state.hasFooterToolbar = v;
@@ -91,9 +91,9 @@ const DemoComponent = {
           <RouteContextProvider>
             {routeContext.hasFooterToolbar && (
               <FooterToolbar {...state.toolbarProps}>
-                <button key="button" type="button">
+                <Button type="primary">
                   right
-                </button>
+                </Button>
               </FooterToolbar>
             )}
           </RouteContextProvider>

examples/index.tsx

 import { createApp, defineComponent, reactive } from 'vue';
 import 'ant-design-vue/dist/antd.less';
 import { Button, message } from 'ant-design-vue';
-import { default as ProLayout } from '../src/BasicLayout';
+import { default as ProLayout } from '../src/';
 import { menus } from './menus';
 import { useMenuState } from '../src/SiderMenu/BaseMenu';
 import * as Icon from '@ant-design/icons-vue';
@@ -10,14 +10,14 @@ import { createRouteContext } from '../src/RouteContext';
 const BasicLayout = defineComponent({
   name: 'BasicLayout',
   inheritAttrs: false,
-  setup(_, { slots, attrs }) {
+  setup(_, { attrs }) {
     const [menuState] = useMenuState({
       collapsed: false,
       openKeys: [],
       selectedKeys: ['/welcome'],
     });
 
-    const { state: routeContext, Provider: RouteContextProvider } = createRouteContext({
+    const [ routeContext, RouteContextProvider ] = createRouteContext({
       isMobile: false,
       menuData: [],
       sideWidth: 208,
@@ -35,6 +35,7 @@ const BasicLayout = defineComponent({
           title={'Pro Layout'}
           layout={'side'}
           theme={'dark'}
+          i18n={(key: string) => key}
           isMobile={false}
           menuData={menus}
           matchMenuKeys={[]}
@@ -83,4 +84,4 @@ Object.keys(Icon)
     app.component(Icon[k].displayName, Icon[k]);
   });
 
-app.use(BasicLayout).mount('#__vue-content>div');
+app.use(ProLayout).mount('#__vue-content>div');

examples/page-container.tsx

@@ -10,7 +10,7 @@ import './index.less';
 const App = defineComponent({
   name: 'App',
   setup: function() {
-    const { state: routeContext, Provider: RouteContextProvider } = createRouteContext({
+    const [ routeContext, RouteContextProvider ] = createRouteContext({
       hasSideMenu: true,
       collapsed: true,
       isMobile: false,

examples/route-context.tsx

 import { createApp, defineComponent, ref, reactive, toRaw, onMounted } from 'vue';
-import { Card, Space, Button, Tag } from 'ant-design-vue';
+import { Card, Space, Button } from 'ant-design-vue';
 import { createRouteContext, useRouteContext } from '../src/RouteContext';
 
 import 'ant-design-vue/dist/antd.less';
@@ -10,10 +10,7 @@ const DemoComponent = {
       name: 'value',
     });
 
-    const {
-      state: routeContext,
-      Provider: RouteContextProvider
-    } = createRouteContext({
+    const [ routeContext, RouteContextProvider ] = createRouteContext({
       hasSideMenu: true,
       collapsed: true,
       isMobile: false,

src/BasicLayout.tsx

 import './BasicLayoutTest.less';
 import './BasicLayout.less';
 
-import { App, FunctionalComponent, CSSProperties } from 'vue';
+import { App, FunctionalComponent, Plugin, CSSProperties } from 'vue';
 
 import { Layout } from 'ant-design-vue';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
@@ -16,23 +16,21 @@ const defaultI18nRender = (key: string) => key;
 export interface BasicLayoutProps {
   pure?: boolean;
   /**
- *@name logo url
-  */
+   *@name logo url
+   */
   logo?: string | RenderVNodeType | WithFalse<string | RenderVNodeType>;
 
   loading?: boolean;
 
-  i18n: ProProviderData['i18n'];
+  i18n?: ProProviderData['i18n'];
 
   onCollapse?: (collapsed: boolean) => void;
 
   footerRender?: WithFalse<
-    (props: any/* FooterProps */, defaultDom: RenderVNodeType) => RenderVNodeType
+    (props: any /* FooterProps */, defaultDom: RenderVNodeType) => RenderVNodeType
   >;
 
-  headerRender?: WithFalse<
-    (props: any/* HeaderProps */) => RenderVNodeType
-  >;
+  headerRender?: WithFalse<(props: any /* HeaderProps */) => RenderVNodeType>;
   /**
    * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
    */
@@ -45,7 +43,8 @@ export interface BasicLayoutProps {
   disableContentMargin?: boolean;
 }
 
-export type ProLayoutProps = BasicLayoutProps & SiderMenuWrapperProps /* & HeaderProps & FooterProps */;
+export type ProLayoutProps = BasicLayoutProps &
+  SiderMenuWrapperProps /* & HeaderProps & FooterProps */;
 
 const ProLayout: FunctionalComponent<ProLayoutProps> = (props, { emit, slots }) => {
   const handleClick = () => {
@@ -115,8 +114,12 @@ const ProLayout: FunctionalComponent<ProLayoutProps> = (props, { emit, slots })
   );
 };
 
-ProLayout.install = function(app: App) {
+ProLayout.displayName = 'ProLayout';
+ProLayout.emits = ['update:collapsed', 'update:openKeys', 'update:selectedKeys'];
+
+// @ts-ignore
+ProLayout.install = function (app: App) {
   app.component('pro-layout', ProLayout);
-};
+}
 
-export default ProLayout;
+export default ProLayout as typeof ProLayout & Plugin;

src/FooterToolbar/index.tsx

 import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, VNodeChild } from 'vue';
 import { useProProvider } from '../ProProvider';
 import { RouteContextProps, useRouteContext } from '../RouteContext';
+import { getComponent } from '../utils';
 import './index.less';
 
 export interface FooterToolbarProps {
@@ -27,15 +28,11 @@ const FooterToolbarProps = {
 const FooterToolbar = defineComponent({
   name: 'FooterToolbar',
   props: FooterToolbarProps,
-  setup(props, { slots }) {
+  setup(props, ctx) {
+    const { slots } = ctx;
     const { getPrefixCls } = useProProvider();
     const baseClassName = props.prefixCls || getPrefixCls('footer-bar');
-    // const container = typeof props.getContainer === 'function' ? props.getContainer()
 
-    // const baseClassName = computed(() => {
-    //   const prefixCls = props.prefixCls || getPrefixCls();
-    //   return `${prefixCls}-footer-bar`;
-    // });
     const routeContext = useRouteContext();
     const width = computed(() => {
       const { hasSideMenu, isMobile, sideWidth } = routeContext;

src/PageContainer/index.tsx

@@ -125,7 +125,17 @@ const defaultPageHeaderRender = (
   props: PageContainerProps,
   value: RouteContextProps & { prefixedClassName: string },
 ): VNodeChild | JSX.Element => {
-  const { title, tabList, tabActiveKey, content, pageHeaderRender, header, extraContent, prefixCls, ...restProps } = props;
+  const {
+    title,
+    tabList,
+    tabActiveKey,
+    content,
+    pageHeaderRender,
+    header,
+    extraContent,
+    prefixCls,
+    ...restProps
+  } = props;
   console.log('restProps', restProps);
   console.log('routeContext.value', value);
   if (pageHeaderRender) {

src/SiderMenu/BaseMenu.tsx

@@ -42,7 +42,7 @@ interface MenuStated {
   openKeys: string[];
 }
 
-export type MenuStateWatched = [state: MenuStated, watchRef: WatchStopHandle]
+export type MenuStateWatched = [MenuStated, WatchStopHandle];
 
 export function useMenuState({
   collapsed = false,
@@ -68,7 +68,7 @@ export function useMenuState({
     },
   );
 
-  return [state, watchRef]
+  return [state, watchRef];
 }
 
 export function useRootSubmenuKeys(menus: RouteProps[]): ComputedRef<string[]> {

src/SiderMenu/SiderMenu.tsx

 import './index.less';
-import { FunctionalComponent, computed, ref, VNodeChild } from 'vue';
+import { FunctionalComponent, computed, ref } from 'vue';
 
 // import 'ant-design-vue/es/layout/style';
 // import Layout from 'ant-design-vue/es/layout';
@@ -22,11 +22,7 @@ export interface SiderMenuProps
   siderWidth?: number;
   collapsedWidth?: number;
   menuHeaderRender?: WithFalse<
-    (
-      logo: RenderVNodeType,
-      title: RenderVNodeType,
-      props?: SiderMenuProps,
-    ) => RenderVNodeType
+    (logo: RenderVNodeType, title: RenderVNodeType, props?: SiderMenuProps) => RenderVNodeType
   >;
   menuFooterRender?: WithFalse<(props?: SiderMenuProps) => RenderVNodeType>;
   menuContentRender?: WithFalse<
@@ -120,27 +116,28 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
   // call menuHeaderRender
   const headerDom = defaultRenderLogoAndTitle(props);
   const extraDom = menuExtraRender && menuExtraRender(props);
-  const defaultMenuDom = (<BaseMenu
-    menus={menuData}
-    theme={props.theme === 'realDark' ? 'dark' : props.theme}
-    mode="inline"
-    collapsed={props.collapsed}
-    openKeys={props.openKeys}
-    selectedKeys={props.selectedKeys}
-    style={{
-      width: '100%',
-    }}
-    class={`${baseClassName}-menu`}
-    {...{
-      'onUpdate:openKeys': $event => {
-        onOpenChange($event);
-      },
-      'onUpdate:selectedKeys': $event => {
-        onSelect($event);
-      },
-    }}
-  />);
-
+  const defaultMenuDom = (
+    <BaseMenu
+      menus={menuData}
+      theme={props.theme === 'realDark' ? 'dark' : props.theme}
+      mode="inline"
+      collapsed={props.collapsed}
+      openKeys={props.openKeys}
+      selectedKeys={props.selectedKeys}
+      style={{
+        width: '100%',
+      }}
+      class={`${baseClassName}-menu`}
+      {...{
+        'onUpdate:openKeys': $event => {
+          onOpenChange($event);
+        },
+        'onUpdate:selectedKeys': $event => {
+          onSelect($event);
+        },
+      }}
+    />
+  );
 
   return (
     <>
@@ -170,7 +167,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
           </div>
         )}
         <div style="flex: 1; overflow: hidden auto;">
-          {menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom}
+          {(menuContentRender && menuContentRender(props, defaultMenuDom)) || defaultMenuDom}
         </div>
         <div class={`${baseClassName}-links`}>
           <Menu
@@ -180,16 +177,16 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
             selectedKeys={[]}
             openKeys={[]}
             mode="inline"
+            onClick={() => {
+              if (onCollapse) {
+                onCollapse(!props.collapsed);
+              }
+            }}
           >
             <Menu.Item
               key={'collapsed-button'}
               class={`${baseClassName}-collapsed-button`}
-              title={false}
-              onClick={() => {
-                if (onCollapse) {
-                  onCollapse(!props.collapsed);
-                }
-              }}
+              title={null}
             >
               {collapsedButtonRender && collapsedButtonRender(collapsed)}
             </Menu.Item>

src/SiderMenu/index.tsx

@@ -5,7 +5,7 @@ import Drawer from 'ant-design-vue/es/drawer';
 
 import SiderMenu, { SiderMenuProps, PrivateSiderMenuProps } from './SiderMenu';
 
-export type SiderMenuWrapperProps = SiderMenuProps & PrivateSiderMenuProps;
+export type SiderMenuWrapperProps = SiderMenuProps & Partial<PrivateSiderMenuProps>;
 
 const SiderMenuWrapper: FunctionalComponent<SiderMenuWrapperProps> = props => {
   return props.isMobile ? (

src/hooks/context/index.ts

@@ -9,21 +9,22 @@ import {
   UnwrapRef,
   VNode,
   DefineComponent,
+  toRaw,
 } from 'vue';
 
 export type ContextType<T> = any;
 
-export interface CreateContext<T> {
-  Provider: DefineComponent<{}, () => VNode | VNode[] | undefined, any>;
-  state: UnwrapRef<T> | T;
-}
+export type CreateContext<T> = [
+  UnwrapRef<T> | T,
+  DefineComponent<{}, () => VNode | VNode[] | undefined, any>,
+];
 
 export const createContext = <T>(
   context: ContextType<T>,
   contextInjectKey: InjectionKey<ContextType<T>> = Symbol(),
 ): CreateContext<T> => {
   const state = reactive<ContextType<T>>({
-    ...context,
+    ...toRaw(context),
   });
 
   const ContextProvider = defineComponent({
@@ -35,10 +36,7 @@ export const createContext = <T>(
     },
   });
 
-  return {
-    state,
-    Provider: ContextProvider,
-  };
+  return [state, ContextProvider];
 };
 
 export const useContext = <T>(
@@ -56,7 +54,7 @@ export const useContext = <T>(
 //   someData?: string[];
 // }
 //
-// const { state, provider } = createContext<MyContextProps>({
+// const [ state, ContextProvider ] = createContext<MyContextProps>({
 //   param1: 'abc',
 //   param2: false,
 //   someData: ['a', 'b', 'c', 'd']

src/index.ts

-import { WrapContent } from './WrapContent';
-
+import { App, Plugin } from 'vue';
 export { createContext, useContext, ContextType, CreateContext } from './hooks/context';
 export { default as FooterToolbar } from './FooterToolbar';
 export { default as GlobalFooter } from './GlobalFooter';

src/utils/index.ts

 import { nextTick, h } from 'vue';
 import { AbstractNode, IconDefinition } from '@ant-design/icons-svg/lib/types';
 import { generate as generateColor } from '@ant-design/colors';
-import insertCss from '../insert-css';
+import { default as insertCss } from '../insert-css';
+export { getComponent } from 'ant-design-vue/es/_util/props-util';
 
 export { default as isUrl } from './isUrl';
 export { default as isImg } from './isImg';