@meethive/components 0.0.6 → 0.0.8

package/es/ProLayout/SiderMenu/SiderMenu.js

@@ -1,4 +1,4 @@
-import { computed, unref, createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from 'vue';
+import { computed, unref, defineComponent, createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from 'vue';
 import { LayoutSider as Sider, Menu, Tooltip } from 'ant-design-vue';
 import BaseMenu, { baseMenuProps } from './BaseMenu.js';
 import { defaultSettingProps, LayoutType } from '../defaultSettings';
@@ -135,140 +135,146 @@ export const defaultRenderCollapsedButton = collapsed => {
     "type": "MenuFoldOutlined"
   }, null);
 };
-const SiderMenu = props => {
-  const {
-    collapsed,
-    siderWidth,
-    breakpoint,
-    collapsedWidth = 48,
-    menuExtraRender = false,
-    menuContentRender = false,
-    collapsedButtonRender = defaultRenderCollapsedButton,
-    linksRender,
-    theme
-  } = props;
-  const prefixCls = computed(() => 'pro-layout');
-  const [wrapSSR, hashId] = useProLayoutStyle(prefixCls);
-  const context = useRouteContext();
-  const getPrefixCls = context.getPrefixCls;
-  const baseClassName = getPrefixCls('sider');
-  const hasSplitMenu = computed(() => {
-    return props.layout === 'mix' && props.splitMenus;
-  });
-  const sSideWidth = computed(() => {
-    return props.collapsed ? props.collapsedWidth : props.siderWidth;
-  });
-  const classNames = computed(() => ({
-    [baseClassName]: true,
-    [`${baseClassName}-fixed`]: context.fixSiderbar,
-    [`${baseClassName}-${theme}`]: true,
-    [`${baseClassName}-layout-${props.layout}`]: props.layout,
-    [hashId.value]: true
-  }));
-  const logCls = computed(() => ({
-    [`${baseClassName}-logo`]: true,
-    [`${baseClassName}-logo-card`]: props.layoutType === LayoutType.CARD
-  }));
-  const handleSelect = $event => {
-    if (props.onSelect) {
-      if (unref(hasSplitMenu)) {
-        props.onSelect([context.selectedKeys[0], ...$event]);
-        return;
+const SiderMenu = defineComponent({
+  name: 'SiderMenu',
+  props: siderMenuProps,
+  setup(props) {
+    const prefixCls = computed(() => 'pro-layout');
+    const [wrapSSR, hashId] = useProLayoutStyle(prefixCls);
+    const context = useRouteContext();
+    const getPrefixCls = context.getPrefixCls;
+    const baseClassName = getPrefixCls('sider');
+    const hasSplitMenu = computed(() => {
+      return props.layout === 'mix' && props.splitMenus;
+    });
+    const sSideWidth = computed(() => {
+      return props.collapsed ? props.collapsedWidth : props.siderWidth;
+    });
+    const classNames = computed(() => ({
+      [baseClassName]: true,
+      [`${baseClassName}-fixed`]: context.fixSiderbar,
+      [`${baseClassName}-${props.theme}`]: true,
+      [`${baseClassName}-layout-${props.layout}`]: props.layout,
+      [hashId.value]: true
+    }));
+    const logCls = computed(() => ({
+      [`${baseClassName}-logo`]: true,
+      [`${baseClassName}-logo-card`]: props.layoutType === LayoutType.CARD
+    }));
+    const handleSelect = $event => {
+      if (props.onSelect) {
+        if (unref(hasSplitMenu)) {
+          props.onSelect([context.selectedKeys[0], ...$event]);
+          return;
+        }
+        props.onSelect($event);
       }
-      props.onSelect($event);
-    }
-  };
-  const headerDom = defaultRenderLogoAndTitle({
-    ...props,
-    baseClassName
-  });
-  const extraDom = menuExtraRender && menuExtraRender(props);
-  if (props.layoutType !== LayoutType.CARD && hasSplitMenu.value && unref(context.flatMenuData).length === 0) {
-    return null;
-  }
-  const defaultMenuDom = _createVNode(BaseMenu, {
-    "prefixCls": getPrefixCls(),
-    "locale": props.locale || context.locale,
-    "theme": theme,
-    "mode": "inline",
-    "menuData": hasSplitMenu.value ? context.flatMenuData : context.menuData,
-    "collapsed": props.collapsed,
-    "openKeys": context.openKeys,
-    "selectedKeys": context.selectedKeys,
-    "menuItemRender": props.menuItemRender,
-    "subMenuItemRender": props.subMenuItemRender,
-    "iconfontUrl": props.iconfontUrl,
-    "onClick": props.onMenuClick,
-    "style": {
-      width: '100%'
-    },
-    "class": `${baseClassName}-menu`,
-    "onUpdate:openKeys": $event => props.onOpenKeys && props.onOpenKeys($event),
-    "onUpdate:selectedKeys": handleSelect
-  }, null);
-  return _createVNode(_Fragment, null, [context.fixSiderbar && _createVNode("div", {
-    "style": {
-      width: `${sSideWidth.value}px`,
-      overflow: 'hidden',
-      flex: `0 0 ${sSideWidth.value}px`,
-      maxWidth: `${sSideWidth.value}px`,
-      minWidth: `${sSideWidth.value}px`,
-      transition: 'background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
-    }
-  }, null), _createVNode(Sider, {
-    "collapsible": true,
-    "trigger": null,
-    "collapsed": collapsed,
-    "breakpoint": breakpoint || undefined,
-    "onCollapse": collapse => {
-      props.onCollapse?.(collapse);
-    },
-    "collapsedWidth": collapsedWidth,
-    "style": {
-      overflow: 'hidden',
-      paddingTop: `${props.headerHeight}px`,
-      zIndex: props.layoutType === LayoutType.PAD ? 200 : 1
-    },
-    "width": siderWidth,
-    "theme": theme,
-    "class": classNames.value
-  }, {
-    default: () => [headerDom && _createVNode("div", {
-      "class": logCls.value,
-      "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
-      "id": "logo",
-      "style": props?.logoStyle
-    }, [headerDom]), extraDom && _createVNode("div", {
-      "class": {
-        [`${baseClassName}-extra`]: true,
-        [`${baseClassName}-extra-no-logo`]: !headerDom
+    };
+    const headerDom = computed(() => defaultRenderLogoAndTitle({
+      ...props,
+      baseClassName
+    }));
+    const extraDom = computed(() => props.menuExtraRender && props.menuExtraRender(props));
+    return () => {
+      const {
+        collapsed,
+        siderWidth,
+        breakpoint,
+        collapsedWidth = 48,
+        menuExtraRender = false,
+        menuContentRender = false,
+        collapsedButtonRender = defaultRenderCollapsedButton,
+        linksRender,
+        theme
+      } = props;
+      if (props.layoutType !== LayoutType.CARD && hasSplitMenu.value && unref(context.flatMenuData).length === 0) {
+        return null;
       }
-    }, [extraDom]), _createVNode("div", {
-      "class": `${baseClassName}-body`,
-      "style": "flex: 1; overflow: hidden auto;"
-    }, [props.layoutType !== LayoutType.CARD ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), _createVNode("div", {
-      "class": `${baseClassName}-links`
-    }, [linksRender ? linksRender() : collapsedButtonRender !== false ? _createVNode(Menu, {
-      "class": `${baseClassName}-link-menu`,
-      "inlineIndent": 16,
-      "theme": theme,
-      "selectedKeys": [],
-      "openKeys": [],
-      "mode": "inline",
-      "onClick": () => {
-        if (props.onCollapse) {
-          props.onCollapse(!props.collapsed);
+      const defaultMenuDom = _createVNode(BaseMenu, {
+        "prefixCls": getPrefixCls(),
+        "locale": props.locale || context.locale,
+        "theme": theme,
+        "mode": "inline",
+        "menuData": hasSplitMenu.value ? context.flatMenuData : context.menuData,
+        "collapsed": props.collapsed,
+        "openKeys": context.openKeys,
+        "selectedKeys": context.selectedKeys,
+        "menuItemRender": props.menuItemRender,
+        "subMenuItemRender": props.subMenuItemRender,
+        "iconfontUrl": props.iconfontUrl,
+        "onClick": props.onMenuClick,
+        "style": {
+          width: '100%'
+        },
+        "class": `${baseClassName}-menu`,
+        "onUpdate:openKeys": $event => props.onOpenKeys && props.onOpenKeys($event),
+        "onUpdate:selectedKeys": handleSelect
+      }, null);
+      return _createVNode(_Fragment, null, [context.fixSiderbar && _createVNode("div", {
+        "style": {
+          width: `${sSideWidth.value}px`,
+          overflow: 'hidden',
+          flex: `0 0 ${sSideWidth.value}px`,
+          maxWidth: `${sSideWidth.value}px`,
+          minWidth: `${sSideWidth.value}px`,
+          transition: 'background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
         }
-      }
-    }, {
-      default: () => [_createVNode(Menu.Item, {
-        "key": "collapsed-button",
-        "class": `${baseClassName}-collapsed-button`,
-        "title": false
+      }, null), _createVNode(Sider, {
+        "collapsible": true,
+        "trigger": null,
+        "collapsed": collapsed,
+        "breakpoint": breakpoint || undefined,
+        "onCollapse": collapse => {
+          props.onCollapse?.(collapse);
+        },
+        "collapsedWidth": collapsedWidth,
+        "style": {
+          overflow: 'hidden',
+          paddingTop: `${props.headerHeight}px`,
+          zIndex: props.layoutType === LayoutType.PAD ? 200 : 1
+        },
+        "width": siderWidth,
+        "theme": theme,
+        "class": classNames.value
       }, {
-        default: () => [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender]
-      })]
-    }) : null])]
-  })]);
-};
+        default: () => [headerDom.value && _createVNode("div", {
+          "class": logCls.value,
+          "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
+          "id": "logo",
+          "style": props?.logoStyle
+        }, [headerDom.value]), extraDom.value && _createVNode("div", {
+          "class": {
+            [`${baseClassName}-extra`]: true,
+            [`${baseClassName}-extra-no-logo`]: !headerDom.value
+          }
+        }, [extraDom.value]), _createVNode("div", {
+          "class": `${baseClassName}-body`,
+          "style": "flex: 1; overflow: hidden auto;"
+        }, [props.layoutType !== LayoutType.CARD ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), _createVNode("div", {
+          "class": `${baseClassName}-links`
+        }, [linksRender ? linksRender() : collapsedButtonRender !== false ? _createVNode(Menu, {
+          "class": `${baseClassName}-link-menu`,
+          "inlineIndent": 16,
+          "theme": theme,
+          "selectedKeys": [],
+          "openKeys": [],
+          "mode": "inline",
+          "onClick": () => {
+            if (props.onCollapse) {
+              props.onCollapse(!props.collapsed);
+            }
+          }
+        }, {
+          default: () => [_createVNode(Menu.Item, {
+            "key": "collapsed-button",
+            "class": `${baseClassName}-collapsed-button`,
+            "title": false
+          }, {
+            default: () => [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender]
+          })]
+        }) : null])]
+      })]);
+    };
+  }
+});
 export default SiderMenu;

package/es/ProLayout/TopHeader/index.js

@@ -1,4 +1,4 @@
-import { computed, ref, createVNode as _createVNode, mergeProps as _mergeProps } from 'vue';
+import { computed, ref, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from 'vue';
 import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
 import { defaultRenderLogoAndTitle, siderMenuProps } from '../SiderMenu/SiderMenu';
 import PropTypes from 'ant-design-vue/es/_util/vue-types';
@@ -75,96 +75,96 @@ const RightContent = ({
     })]) : rightContentRender]
   })])]);
 };
-export const TopNavHeader = props => {
-  const headerRef = ref();
-  const {
-    prefixCls: propPrefixCls,
-    onMenuHeaderClick,
-    onOpenKeys,
-    onSelect,
-    contentWidth,
-    rightContentRender,
-    topHeaderMenuRender,
-    layout,
-    menuData,
-    mode
-  } = props;
-  const context = useRouteContext();
-  const prefixCls = `${propPrefixCls || defaultPrefixCls}-top-nav-header`;
-  const stylePrefixCls = computed(() => 'pro-layout');
-  const [wrapSSR, hashId] = useProLayoutStyle(stylePrefixCls);
-  const headerDom = defaultRenderLogoAndTitle({
-    ...props,
-    collapsed: false
-  },
-  // REMARK:: Any time render header title
-  // layout === 'mix' ? 'headerTitleRender' : undefined,
-  // layout !== 'side' ? 'headerTitleRender' : undefined,
-  'headerTitleRender');
-
-  // 
-  let MenusData = props.layout === 'side' ? [] : menuData;
-  if (props.layout === 'mix' && props.splitMenus) {
-    const noChildrenMenuData = (menuData || []).map(item => {
-      return {
-        ...item,
-        children: undefined,
-        component: undefined
-      };
+export const TopNavHeader = defineComponent({
+  name: 'TopNavHeader',
+  props: topNavHeaderProps,
+  setup(props) {
+    const headerRef = ref();
+    const context = useRouteContext();
+    const stylePrefixCls = computed(() => 'pro-layout');
+    const [wrapSSR, hashId] = useProLayoutStyle(stylePrefixCls);
+    const prefixCls = computed(() => `${props.prefixCls || defaultPrefixCls}-top-nav-header`);
+    const MenusData = computed(() => {
+      let data = props.layout === 'side' ? [] : props.menuData;
+      if (props.layout === 'mix' && props.splitMenus) {
+        const noChildrenMenuData = (props.menuData || []).map(item => {
+          return {
+            ...item,
+            children: undefined,
+            component: undefined
+          };
+        });
+        data = clearMenuItem(noChildrenMenuData);
+      }
+      return data;
+    });
+    const _mode = computed(() => {
+      return props.layout === 'mix' && props.splitMenus ? 'horizontal' : props.mode;
+    });
+    const className = computed(() => ({
+      [prefixCls.value]: true,
+      [hashId.value]: true,
+      'light': props.theme === 'light',
+      'dark': props.theme === 'dark'
+    }));
+    const paddingLeft = computed(() => {
+      return context.layoutType === LayoutType.PAD && props.collapsed ? context.headerLeftWidth + 'px' : 0;
     });
-    MenusData = clearMenuItem(noChildrenMenuData);
+    return () => {
+      const headerDom = defaultRenderLogoAndTitle({
+        ...props,
+        collapsed: false
+      }, 'headerTitleRender');
+      const {
+        prefixCls: propPrefixCls,
+        onMenuHeaderClick,
+        onOpenKeys,
+        onSelect,
+        contentWidth,
+        rightContentRender,
+        topHeaderMenuRender
+      } = props;
+      return _createVNode("div", {
+        "class": className.value,
+        "style": {
+          paddingLeft: paddingLeft.value
+        }
+      }, [_createVNode("div", {
+        "ref": headerRef,
+        "class": `${prefixCls.value}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`
+      }, [headerDom && _createVNode("div", {
+        "class": `${prefixCls.value}-main-left`,
+        "onClick": onMenuHeaderClick
+      }, [_createVNode("div", {
+        "class": `${prefixCls.value}-logo`,
+        "key": "logo",
+        "id": "logo"
+      }, [headerDom])]), _createVNode("div", {
+        "style": {
+          flex: 1
+        },
+        "class": `${prefixCls.value}-menu`
+      }, [topHeaderMenuRender ? topHeaderMenuRender() : _createVNode(BaseMenu, {
+        "prefixCls": propPrefixCls,
+        "locale": props.locale || context.locale,
+        "theme": props.theme,
+        "mode": _mode.value,
+        "collapsed": props.collapsed,
+        "iconfontUrl": props.iconfontUrl,
+        "menuData": MenusData.value,
+        "menuItemRender": props.menuItemRender,
+        "subMenuItemRender": props.subMenuItemRender,
+        "openKeys": context.openKeys,
+        "selectedKeys": context.selectedKeys,
+        "class": {
+          'top-nav-menu': props.mode === 'horizontal'
+        },
+        "onUpdate:openKeys": $event => onOpenKeys && onOpenKeys($event),
+        "onUpdate:selectedKeys": $event => onSelect && onSelect($event)
+      }, null)]), rightContentRender && _createVNode(RightContent, _mergeProps({
+        "rightContentRender": rightContentRender
+      }, props), null)])]);
+    };
   }
-  const _mode = computed(() => {
-    return props.layout === 'mix' && props.splitMenus ? 'horizontal' : mode;
-  });
-  const className = computed(() => ({
-    [prefixCls]: true,
-    [hashId.value]: true,
-    'light': props.theme === 'light',
-    'dark': props.theme === 'dark'
-  }));
-  const paddingLeft = computed(() => {
-    return context.layoutType === LayoutType.PAD && props.collapsed ? context.headerLeftWidth + 'px' : 0;
-  });
-  return _createVNode("div", {
-    "class": className.value,
-    "style": {
-      paddingLeft: paddingLeft.value
-    }
-  }, [_createVNode("div", {
-    "ref": headerRef,
-    "class": `${prefixCls}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`
-  }, [headerDom && _createVNode("div", {
-    "class": `${prefixCls}-main-left`,
-    "onClick": onMenuHeaderClick
-  }, [_createVNode("div", {
-    "class": `${prefixCls}-logo`,
-    "key": "logo",
-    "id": "logo"
-  }, [headerDom])]), _createVNode("div", {
-    "style": {
-      flex: 1
-    },
-    "class": `${prefixCls}-menu`
-  }, [topHeaderMenuRender ? topHeaderMenuRender() : _createVNode(BaseMenu, {
-    "prefixCls": propPrefixCls,
-    "locale": props.locale || context.locale,
-    "theme": props.theme,
-    "mode": _mode.value,
-    "collapsed": props.collapsed,
-    "iconfontUrl": props.iconfontUrl,
-    "menuData": MenusData,
-    "menuItemRender": props.menuItemRender,
-    "subMenuItemRender": props.subMenuItemRender,
-    "openKeys": context.openKeys,
-    "selectedKeys": context.selectedKeys,
-    "class": {
-      'top-nav-menu': props.mode === 'horizontal'
-    },
-    "onUpdate:openKeys": $event => onOpenKeys && onOpenKeys($event),
-    "onUpdate:selectedKeys": $event => onSelect && onSelect($event)
-  }, null)]), rightContentRender && _createVNode(RightContent, _mergeProps({
-    "rightContentRender": rightContentRender
-  }, props), null)])]);
-};
+});
 export default TopNavHeader;

package/lib/ProLayout/SiderMenu/SiderMenu.js

@@ -1,4 +1,4 @@
-import { computed, unref, createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from 'vue';
+import { computed, unref, defineComponent, createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from 'vue';
 import { LayoutSider as Sider, Menu, Tooltip } from 'ant-design-vue';
 import BaseMenu, { baseMenuProps } from './BaseMenu.js';
 import { defaultSettingProps, LayoutType } from '../defaultSettings';
@@ -135,140 +135,146 @@ export const defaultRenderCollapsedButton = collapsed => {
     "type": "MenuFoldOutlined"
   }, null);
 };
-const SiderMenu = props => {
-  const {
-    collapsed,
-    siderWidth,
-    breakpoint,
-    collapsedWidth = 48,
-    menuExtraRender = false,
-    menuContentRender = false,
-    collapsedButtonRender = defaultRenderCollapsedButton,
-    linksRender,
-    theme
-  } = props;
-  const prefixCls = computed(() => 'pro-layout');
-  const [wrapSSR, hashId] = useProLayoutStyle(prefixCls);
-  const context = useRouteContext();
-  const getPrefixCls = context.getPrefixCls;
-  const baseClassName = getPrefixCls('sider');
-  const hasSplitMenu = computed(() => {
-    return props.layout === 'mix' && props.splitMenus;
-  });
-  const sSideWidth = computed(() => {
-    return props.collapsed ? props.collapsedWidth : props.siderWidth;
-  });
-  const classNames = computed(() => ({
-    [baseClassName]: true,
-    [`${baseClassName}-fixed`]: context.fixSiderbar,
-    [`${baseClassName}-${theme}`]: true,
-    [`${baseClassName}-layout-${props.layout}`]: props.layout,
-    [hashId.value]: true
-  }));
-  const logCls = computed(() => ({
-    [`${baseClassName}-logo`]: true,
-    [`${baseClassName}-logo-card`]: props.layoutType === LayoutType.CARD
-  }));
-  const handleSelect = $event => {
-    if (props.onSelect) {
-      if (unref(hasSplitMenu)) {
-        props.onSelect([context.selectedKeys[0], ...$event]);
-        return;
+const SiderMenu = defineComponent({
+  name: 'SiderMenu',
+  props: siderMenuProps,
+  setup(props) {
+    const prefixCls = computed(() => 'pro-layout');
+    const [wrapSSR, hashId] = useProLayoutStyle(prefixCls);
+    const context = useRouteContext();
+    const getPrefixCls = context.getPrefixCls;
+    const baseClassName = getPrefixCls('sider');
+    const hasSplitMenu = computed(() => {
+      return props.layout === 'mix' && props.splitMenus;
+    });
+    const sSideWidth = computed(() => {
+      return props.collapsed ? props.collapsedWidth : props.siderWidth;
+    });
+    const classNames = computed(() => ({
+      [baseClassName]: true,
+      [`${baseClassName}-fixed`]: context.fixSiderbar,
+      [`${baseClassName}-${props.theme}`]: true,
+      [`${baseClassName}-layout-${props.layout}`]: props.layout,
+      [hashId.value]: true
+    }));
+    const logCls = computed(() => ({
+      [`${baseClassName}-logo`]: true,
+      [`${baseClassName}-logo-card`]: props.layoutType === LayoutType.CARD
+    }));
+    const handleSelect = $event => {
+      if (props.onSelect) {
+        if (unref(hasSplitMenu)) {
+          props.onSelect([context.selectedKeys[0], ...$event]);
+          return;
+        }
+        props.onSelect($event);
       }
-      props.onSelect($event);
-    }
-  };
-  const headerDom = defaultRenderLogoAndTitle({
-    ...props,
-    baseClassName
-  });
-  const extraDom = menuExtraRender && menuExtraRender(props);
-  if (props.layoutType !== LayoutType.CARD && hasSplitMenu.value && unref(context.flatMenuData).length === 0) {
-    return null;
-  }
-  const defaultMenuDom = _createVNode(BaseMenu, {
-    "prefixCls": getPrefixCls(),
-    "locale": props.locale || context.locale,
-    "theme": theme,
-    "mode": "inline",
-    "menuData": hasSplitMenu.value ? context.flatMenuData : context.menuData,
-    "collapsed": props.collapsed,
-    "openKeys": context.openKeys,
-    "selectedKeys": context.selectedKeys,
-    "menuItemRender": props.menuItemRender,
-    "subMenuItemRender": props.subMenuItemRender,
-    "iconfontUrl": props.iconfontUrl,
-    "onClick": props.onMenuClick,
-    "style": {
-      width: '100%'
-    },
-    "class": `${baseClassName}-menu`,
-    "onUpdate:openKeys": $event => props.onOpenKeys && props.onOpenKeys($event),
-    "onUpdate:selectedKeys": handleSelect
-  }, null);
-  return _createVNode(_Fragment, null, [context.fixSiderbar && _createVNode("div", {
-    "style": {
-      width: `${sSideWidth.value}px`,
-      overflow: 'hidden',
-      flex: `0 0 ${sSideWidth.value}px`,
-      maxWidth: `${sSideWidth.value}px`,
-      minWidth: `${sSideWidth.value}px`,
-      transition: 'background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
-    }
-  }, null), _createVNode(Sider, {
-    "collapsible": true,
-    "trigger": null,
-    "collapsed": collapsed,
-    "breakpoint": breakpoint || undefined,
-    "onCollapse": collapse => {
-      props.onCollapse?.(collapse);
-    },
-    "collapsedWidth": collapsedWidth,
-    "style": {
-      overflow: 'hidden',
-      paddingTop: `${props.headerHeight}px`,
-      zIndex: props.layoutType === LayoutType.PAD ? 200 : 1
-    },
-    "width": siderWidth,
-    "theme": theme,
-    "class": classNames.value
-  }, {
-    default: () => [headerDom && _createVNode("div", {
-      "class": logCls.value,
-      "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
-      "id": "logo",
-      "style": props?.logoStyle
-    }, [headerDom]), extraDom && _createVNode("div", {
-      "class": {
-        [`${baseClassName}-extra`]: true,
-        [`${baseClassName}-extra-no-logo`]: !headerDom
+    };
+    const headerDom = computed(() => defaultRenderLogoAndTitle({
+      ...props,
+      baseClassName
+    }));
+    const extraDom = computed(() => props.menuExtraRender && props.menuExtraRender(props));
+    return () => {
+      const {
+        collapsed,
+        siderWidth,
+        breakpoint,
+        collapsedWidth = 48,
+        menuExtraRender = false,
+        menuContentRender = false,
+        collapsedButtonRender = defaultRenderCollapsedButton,
+        linksRender,
+        theme
+      } = props;
+      if (props.layoutType !== LayoutType.CARD && hasSplitMenu.value && unref(context.flatMenuData).length === 0) {
+        return null;
       }
-    }, [extraDom]), _createVNode("div", {
-      "class": `${baseClassName}-body`,
-      "style": "flex: 1; overflow: hidden auto;"
-    }, [props.layoutType !== LayoutType.CARD ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), _createVNode("div", {
-      "class": `${baseClassName}-links`
-    }, [linksRender ? linksRender() : collapsedButtonRender !== false ? _createVNode(Menu, {
-      "class": `${baseClassName}-link-menu`,
-      "inlineIndent": 16,
-      "theme": theme,
-      "selectedKeys": [],
-      "openKeys": [],
-      "mode": "inline",
-      "onClick": () => {
-        if (props.onCollapse) {
-          props.onCollapse(!props.collapsed);
+      const defaultMenuDom = _createVNode(BaseMenu, {
+        "prefixCls": getPrefixCls(),
+        "locale": props.locale || context.locale,
+        "theme": theme,
+        "mode": "inline",
+        "menuData": hasSplitMenu.value ? context.flatMenuData : context.menuData,
+        "collapsed": props.collapsed,
+        "openKeys": context.openKeys,
+        "selectedKeys": context.selectedKeys,
+        "menuItemRender": props.menuItemRender,
+        "subMenuItemRender": props.subMenuItemRender,
+        "iconfontUrl": props.iconfontUrl,
+        "onClick": props.onMenuClick,
+        "style": {
+          width: '100%'
+        },
+        "class": `${baseClassName}-menu`,
+        "onUpdate:openKeys": $event => props.onOpenKeys && props.onOpenKeys($event),
+        "onUpdate:selectedKeys": handleSelect
+      }, null);
+      return _createVNode(_Fragment, null, [context.fixSiderbar && _createVNode("div", {
+        "style": {
+          width: `${sSideWidth.value}px`,
+          overflow: 'hidden',
+          flex: `0 0 ${sSideWidth.value}px`,
+          maxWidth: `${sSideWidth.value}px`,
+          minWidth: `${sSideWidth.value}px`,
+          transition: 'background-color 0.3s, min-width 0.3s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)'
         }
-      }
-    }, {
-      default: () => [_createVNode(Menu.Item, {
-        "key": "collapsed-button",
-        "class": `${baseClassName}-collapsed-button`,
-        "title": false
+      }, null), _createVNode(Sider, {
+        "collapsible": true,
+        "trigger": null,
+        "collapsed": collapsed,
+        "breakpoint": breakpoint || undefined,
+        "onCollapse": collapse => {
+          props.onCollapse?.(collapse);
+        },
+        "collapsedWidth": collapsedWidth,
+        "style": {
+          overflow: 'hidden',
+          paddingTop: `${props.headerHeight}px`,
+          zIndex: props.layoutType === LayoutType.PAD ? 200 : 1
+        },
+        "width": siderWidth,
+        "theme": theme,
+        "class": classNames.value
       }, {
-        default: () => [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender]
-      })]
-    }) : null])]
-  })]);
-};
+        default: () => [headerDom.value && _createVNode("div", {
+          "class": logCls.value,
+          "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
+          "id": "logo",
+          "style": props?.logoStyle
+        }, [headerDom.value]), extraDom.value && _createVNode("div", {
+          "class": {
+            [`${baseClassName}-extra`]: true,
+            [`${baseClassName}-extra-no-logo`]: !headerDom.value
+          }
+        }, [extraDom.value]), _createVNode("div", {
+          "class": `${baseClassName}-body`,
+          "style": "flex: 1; overflow: hidden auto;"
+        }, [props.layoutType !== LayoutType.CARD ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), _createVNode("div", {
+          "class": `${baseClassName}-links`
+        }, [linksRender ? linksRender() : collapsedButtonRender !== false ? _createVNode(Menu, {
+          "class": `${baseClassName}-link-menu`,
+          "inlineIndent": 16,
+          "theme": theme,
+          "selectedKeys": [],
+          "openKeys": [],
+          "mode": "inline",
+          "onClick": () => {
+            if (props.onCollapse) {
+              props.onCollapse(!props.collapsed);
+            }
+          }
+        }, {
+          default: () => [_createVNode(Menu.Item, {
+            "key": "collapsed-button",
+            "class": `${baseClassName}-collapsed-button`,
+            "title": false
+          }, {
+            default: () => [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender]
+          })]
+        }) : null])]
+      })]);
+    };
+  }
+});
 export default SiderMenu;

package/lib/ProLayout/TopHeader/index.js

@@ -1,4 +1,4 @@
-import { computed, ref, createVNode as _createVNode, mergeProps as _mergeProps } from 'vue';
+import { computed, ref, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from 'vue';
 import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
 import { defaultRenderLogoAndTitle, siderMenuProps } from '../SiderMenu/SiderMenu';
 import PropTypes from 'ant-design-vue/es/_util/vue-types';
@@ -75,96 +75,96 @@ const RightContent = ({
     })]) : rightContentRender]
   })])]);
 };
-export const TopNavHeader = props => {
-  const headerRef = ref();
-  const {
-    prefixCls: propPrefixCls,
-    onMenuHeaderClick,
-    onOpenKeys,
-    onSelect,
-    contentWidth,
-    rightContentRender,
-    topHeaderMenuRender,
-    layout,
-    menuData,
-    mode
-  } = props;
-  const context = useRouteContext();
-  const prefixCls = `${propPrefixCls || defaultPrefixCls}-top-nav-header`;
-  const stylePrefixCls = computed(() => 'pro-layout');
-  const [wrapSSR, hashId] = useProLayoutStyle(stylePrefixCls);
-  const headerDom = defaultRenderLogoAndTitle({
-    ...props,
-    collapsed: false
-  },
-  // REMARK:: Any time render header title
-  // layout === 'mix' ? 'headerTitleRender' : undefined,
-  // layout !== 'side' ? 'headerTitleRender' : undefined,
-  'headerTitleRender');
-
-  // 
-  let MenusData = props.layout === 'side' ? [] : menuData;
-  if (props.layout === 'mix' && props.splitMenus) {
-    const noChildrenMenuData = (menuData || []).map(item => {
-      return {
-        ...item,
-        children: undefined,
-        component: undefined
-      };
+export const TopNavHeader = defineComponent({
+  name: 'TopNavHeader',
+  props: topNavHeaderProps,
+  setup(props) {
+    const headerRef = ref();
+    const context = useRouteContext();
+    const stylePrefixCls = computed(() => 'pro-layout');
+    const [wrapSSR, hashId] = useProLayoutStyle(stylePrefixCls);
+    const prefixCls = computed(() => `${props.prefixCls || defaultPrefixCls}-top-nav-header`);
+    const MenusData = computed(() => {
+      let data = props.layout === 'side' ? [] : props.menuData;
+      if (props.layout === 'mix' && props.splitMenus) {
+        const noChildrenMenuData = (props.menuData || []).map(item => {
+          return {
+            ...item,
+            children: undefined,
+            component: undefined
+          };
+        });
+        data = clearMenuItem(noChildrenMenuData);
+      }
+      return data;
+    });
+    const _mode = computed(() => {
+      return props.layout === 'mix' && props.splitMenus ? 'horizontal' : props.mode;
+    });
+    const className = computed(() => ({
+      [prefixCls.value]: true,
+      [hashId.value]: true,
+      'light': props.theme === 'light',
+      'dark': props.theme === 'dark'
+    }));
+    const paddingLeft = computed(() => {
+      return context.layoutType === LayoutType.PAD && props.collapsed ? context.headerLeftWidth + 'px' : 0;
     });
-    MenusData = clearMenuItem(noChildrenMenuData);
+    return () => {
+      const headerDom = defaultRenderLogoAndTitle({
+        ...props,
+        collapsed: false
+      }, 'headerTitleRender');
+      const {
+        prefixCls: propPrefixCls,
+        onMenuHeaderClick,
+        onOpenKeys,
+        onSelect,
+        contentWidth,
+        rightContentRender,
+        topHeaderMenuRender
+      } = props;
+      return _createVNode("div", {
+        "class": className.value,
+        "style": {
+          paddingLeft: paddingLeft.value
+        }
+      }, [_createVNode("div", {
+        "ref": headerRef,
+        "class": `${prefixCls.value}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`
+      }, [headerDom && _createVNode("div", {
+        "class": `${prefixCls.value}-main-left`,
+        "onClick": onMenuHeaderClick
+      }, [_createVNode("div", {
+        "class": `${prefixCls.value}-logo`,
+        "key": "logo",
+        "id": "logo"
+      }, [headerDom])]), _createVNode("div", {
+        "style": {
+          flex: 1
+        },
+        "class": `${prefixCls.value}-menu`
+      }, [topHeaderMenuRender ? topHeaderMenuRender() : _createVNode(BaseMenu, {
+        "prefixCls": propPrefixCls,
+        "locale": props.locale || context.locale,
+        "theme": props.theme,
+        "mode": _mode.value,
+        "collapsed": props.collapsed,
+        "iconfontUrl": props.iconfontUrl,
+        "menuData": MenusData.value,
+        "menuItemRender": props.menuItemRender,
+        "subMenuItemRender": props.subMenuItemRender,
+        "openKeys": context.openKeys,
+        "selectedKeys": context.selectedKeys,
+        "class": {
+          'top-nav-menu': props.mode === 'horizontal'
+        },
+        "onUpdate:openKeys": $event => onOpenKeys && onOpenKeys($event),
+        "onUpdate:selectedKeys": $event => onSelect && onSelect($event)
+      }, null)]), rightContentRender && _createVNode(RightContent, _mergeProps({
+        "rightContentRender": rightContentRender
+      }, props), null)])]);
+    };
   }
-  const _mode = computed(() => {
-    return props.layout === 'mix' && props.splitMenus ? 'horizontal' : mode;
-  });
-  const className = computed(() => ({
-    [prefixCls]: true,
-    [hashId.value]: true,
-    'light': props.theme === 'light',
-    'dark': props.theme === 'dark'
-  }));
-  const paddingLeft = computed(() => {
-    return context.layoutType === LayoutType.PAD && props.collapsed ? context.headerLeftWidth + 'px' : 0;
-  });
-  return _createVNode("div", {
-    "class": className.value,
-    "style": {
-      paddingLeft: paddingLeft.value
-    }
-  }, [_createVNode("div", {
-    "ref": headerRef,
-    "class": `${prefixCls}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`
-  }, [headerDom && _createVNode("div", {
-    "class": `${prefixCls}-main-left`,
-    "onClick": onMenuHeaderClick
-  }, [_createVNode("div", {
-    "class": `${prefixCls}-logo`,
-    "key": "logo",
-    "id": "logo"
-  }, [headerDom])]), _createVNode("div", {
-    "style": {
-      flex: 1
-    },
-    "class": `${prefixCls}-menu`
-  }, [topHeaderMenuRender ? topHeaderMenuRender() : _createVNode(BaseMenu, {
-    "prefixCls": propPrefixCls,
-    "locale": props.locale || context.locale,
-    "theme": props.theme,
-    "mode": _mode.value,
-    "collapsed": props.collapsed,
-    "iconfontUrl": props.iconfontUrl,
-    "menuData": MenusData,
-    "menuItemRender": props.menuItemRender,
-    "subMenuItemRender": props.subMenuItemRender,
-    "openKeys": context.openKeys,
-    "selectedKeys": context.selectedKeys,
-    "class": {
-      'top-nav-menu': props.mode === 'horizontal'
-    },
-    "onUpdate:openKeys": $event => onOpenKeys && onOpenKeys($event),
-    "onUpdate:selectedKeys": $event => onSelect && onSelect($event)
-  }, null)]), rightContentRender && _createVNode(RightContent, _mergeProps({
-    "rightContentRender": rightContentRender
-  }, props), null)])]);
-};
+});
 export default TopNavHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meethive/components",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -12,10 +12,10 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "vue": "^3.2.0",
+    "vue": "^3.3.4",
     "vue-router": "^4.0.0",
-    "ant-design-vue": "^4.0.0",
-    "@ant-design/icons-vue": "^7.0.0",
+    "ant-design-vue": "^4.2.6",
+    "@ant-design/icons-vue": "^7.0.1",
     "lodash-es": "^4.17.0",
     "dayjs": "^1.11.0"
   },