@meethive/components 0.0.1

package/lib/ProLayout/SiderMenu/SiderMenu.js

@@ -0,0 +1,274 @@
+import { computed, unref, 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';
+import PropTypes from 'ant-design-vue/es/_util/vue-types';
+import IconFont from '../../Icon';
+import { useRouteContext } from '../RouteContext';
+import useProLayoutStyle from '../style';
+export const siderMenuProps = {
+  ...defaultSettingProps,
+  ...baseMenuProps,
+  logo: {
+    type: [Object, String, Function],
+    default: () => undefined
+  },
+  logoStyle: {
+    type: Object,
+    default: () => undefined
+  },
+  siderWidth: PropTypes.number.def(208),
+  headerHeight: PropTypes.number.def(48),
+  collapsedWidth: PropTypes.number.def(48),
+  menuHeaderRender: {
+    type: [Function, Object, Boolean],
+    default: () => undefined
+  },
+  menuContentRender: {
+    type: [Function, Object, Boolean],
+    default: () => undefined
+  },
+  menuExtraRender: {
+    type: [Function, Object, Boolean],
+    default: () => undefined
+  },
+  collapsedButtonRender: {
+    type: [Function, Object, Boolean],
+    default: () => undefined
+  },
+  linksRender: {
+    type: [Function, Object, Boolean],
+    default: () => undefined
+  },
+  breakpoint: {
+    type: [Object, Boolean],
+    default: () => false
+  },
+  splitMenus: PropTypes.looseBool,
+  fixed: PropTypes.looseBool,
+  hide: PropTypes.looseBool,
+  matchMenuKeys: {
+    type: Array,
+    default: () => []
+  },
+  // events
+  onMenuHeaderClick: PropTypes.func,
+  onMenuClick: PropTypes.func,
+  onCollapse: {
+    type: Function
+  },
+  onOpenKeys: {
+    type: Function
+  },
+  onSelect: {
+    type: Function
+  }
+};
+export const defaultRenderLogo = (logo, logoStyle, application, props) => {
+  if (!logo) {
+    return null;
+  }
+  if (typeof logo === 'function') {
+    // @ts-ignore
+    return logo();
+  }
+  if (typeof logo === 'string') {
+    return application.length ? _createVNode(Tooltip, {
+      "placement": "rightTop",
+      "color": "#fff",
+      "arrowPointAtCenter": true
+    }, {
+      default: () => [_createVNode("img", {
+        "src": logo,
+        "alt": "logo",
+        "style": logoStyle
+      }, null)],
+      title: () => application.map(item => _createVNode("div", {
+        "class": "sider-app-menus"
+      }, [_createVNode("div", {
+        "class": "sider-app-menus-item",
+        "onClick": () => props.onAppMenuClick(item)
+      }, [item.label])]))
+    }) : _createVNode("img", {
+      "src": logo,
+      "alt": "logo",
+      "style": logoStyle
+    }, null);
+  }
+  return logo;
+};
+export const defaultRenderLogoAndTitle = (props, renderKey = 'menuHeaderRender') => {
+  const {
+    logo = 'http://demo.jetlinks.cn/static/logo.760eb65c.png',
+    logoStyle,
+    title,
+    layout,
+    apps,
+    baseClassName
+  } = props;
+  const logoDom = defaultRenderLogo(logo, logoStyle, apps, props);
+  if (props.layoutType === LayoutType.CARD) {
+    return _createVNode("a", null, [_createTextVNode(" "), logoDom]);
+  }
+  const renderFunction = props[renderKey || ''];
+  if (layout === 'mix' && renderFunction === false) {
+    return null;
+  }
+  const titleDom = _createVNode("h1", null, [title]);
+  if (renderKey === 'menuHeaderRender') {
+    return null;
+  }
+  // call menuHeaderRender
+  if (typeof renderFunction === 'function') {
+    // @ts-ignore
+    return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
+  }
+  if (Array.isArray(renderFunction)) {
+    return _createVNode(_Fragment, null, [renderFunction]);
+  }
+  return _createVNode("a", null, [logoDom, props.collapsed ? null : titleDom]);
+};
+export const defaultRenderCollapsedButton = collapsed => {
+  return collapsed ? _createVNode(IconFont, {
+    "type": "MenuUnfoldOutlined"
+  }, null) : _createVNode(IconFont, {
+    "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;
+      }
+      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
+      }
+    }, [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);
+        }
+      }
+    }, {
+      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/SiderMenu/index.js

@@ -0,0 +1,2 @@
+export { default as BaseMenu } from './BaseMenu.js'
+export { default as SiderMenu } from './SiderMenu'

package/lib/ProLayout/SiderMenu/style.js

@@ -0,0 +1,204 @@
+import { Keyframes } from 'ant-design-vue'
+
+export const genSiderMenuStyle = (config) => {
+  const { token } = config
+  const proLayoutSiderMenuCls = `${token.antCls}-pro-sider`
+  const proLayoutHeaderHeight = '48px'
+  const proLayoutTitleHideKeyframes = new Keyframes('pro-layout-title-hide', {
+    '0%': {
+      display: 'none',
+      opacity: 0
+    },
+    '80%': {
+      display: 'none',
+      opacity: 0
+    },
+    '100%': {
+      display: 'unset',
+      opacity: 1
+    }
+  })
+
+  return {
+    [`${proLayoutSiderMenuCls}`]: {
+      position: 'relative',
+      backgroundColor: '#001529',
+      borderRight: 0,
+      // FIXME: 临时修正(可能不会做兼容)
+      zIndex: 20,
+      [`${token.antCls}-menu`]: {
+        background: 'transparent'
+      },
+      [`&${token.antCls}-layout-sider-light`]: {
+        [`${token.antCls}-menu-item a`]: {
+          color: token.colorTextHeading
+        },
+        [`${token.antCls}-menu-item-selected a, ${token.antCls}-menu-item a:hover`]: {
+          color: token.colorPrimary
+        }
+      },
+      [`${proLayoutSiderMenuCls}-logo`]: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '16px 16px',
+        cursor: 'pointer',
+        transition: 'padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)',
+        '> a': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: 32
+        },
+        'img': {
+          display: 'inline-block',
+          height: 32,
+          verticalAlign: 'middle'
+        },
+        'h1': {
+          display: 'inline-block',
+          height: '32px',
+          margin: '0 0 0 12px',
+          color: 'white',
+          fontWeight: 600,
+          fontSize: '18px',
+          lineHeight: '32px',
+          verticalAlign: 'middle',
+          animationName: proLayoutTitleHideKeyframes,
+          animationDuration: '0.3s'
+        }
+      },
+      [`${proLayoutSiderMenuCls}-logo-card`]: {
+        padding: '16px 0',
+        justifyContent: 'center'
+      },
+      [`${proLayoutSiderMenuCls}-extra`]: {
+        marginBottom: '16px',
+        padding: '0 16px',
+        [`${proLayoutSiderMenuCls}-extra-no-logo`]: {
+          marginTop: '16px'
+        }
+      },
+      [`${proLayoutSiderMenuCls}-menu`]: {
+        position: 'relative',
+        zIndex: 10,
+        minHeight: '100%',
+        boxShadow: '2px 0 6px rgba(0, 21, 41, 0.35)'
+      },
+      [`${token.antCls}-layout-sider-children`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        '::-webkit-scrollbar': {
+          width: '6px',
+          height: '6px'
+        },
+        '::webkit-scrollbar-track': {
+          background: 'rgba(255, 255, 255, 0.15)',
+          borderRadius: '3px',
+          boxShadow: 'inset 0 0 5px rgba(37, 37, 37, 0.05)'
+        },
+        /* 滚动条滑块 */
+        '::-webkit-scrollbar-thumb': {
+          background: 'rgba(255, 255, 255, 0.2)',
+          borderRadius: '3px',
+          boxShadow: 'inset 0 0 5px rgba(255, 255, 255, 0.05)'
+        }
+      },
+      [`&${token.antCls}-layout-sider-collapsed`]: {
+        [`${token.antCls}-menu-inline-collapsed`]: {
+          width: '48px'
+        },
+        [`${proLayoutSiderMenuCls}`]: {
+          [`${proLayoutSiderMenuCls}-logo`]: {
+            padding: '16px 24px'
+          }
+        }
+      },
+      [`&${token.antCls}-layout-sider${proLayoutSiderMenuCls}-fixed`]: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        zIndex: 99,
+        height: '100%',
+        overflow: 'auto',
+        overflowX: 'hidden',
+        boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)',
+        [`> ${token.antCls}-menu-root`]: {
+          [`:not${proLayoutSiderMenuCls}-link-menu`]: {
+            height: `calc(100vh - ${proLayoutHeaderHeight})`,
+            overflowY: 'auto'
+          }
+        }
+      },
+      [`${proLayoutSiderMenuCls}-light`]: {
+        backgroundColor: token.colorBgContainer,
+        boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)',
+        [`${token.antCls}-layout-sider-children`]: {
+          '::webkit-scrollbar-track': {
+            background: 'rgba(0, 0, 0, 0.06)',
+            borderRadius: '3px',
+            boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)',
+            /* 滚动条滑块 */
+            '::-webkit-scrollbar-thumb': {
+              background: 'rgba(0, 0, 0, 0.12)',
+              borderRadius: '3px',
+              boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
+            }
+          }
+        },
+        [`${proLayoutSiderMenuCls}-logo`]: {
+          'h1': {
+            color: token.colorPrimary
+          }
+        },
+        [`${token.antCls}-menu-light`]: {
+          borderRightColor: 'transparent'
+        },
+        [`${proLayoutSiderMenuCls}-collapsed-button`]: {
+          borderTop: `${token.lineWidth} solid ${token.colorSplit}`
+        }
+      },
+      [`${proLayoutSiderMenuCls}-icon`]: {
+        width: '14px',
+        verticalAlign: 'baseline'
+      },
+      [`${proLayoutSiderMenuCls}-link`]: {
+        width: '100%',
+        [`ul${token.antCls}-menu-root`]: {
+          height: 'auto'
+        }
+      },
+      [`${proLayoutSiderMenuCls}-collapsed-button`]: {
+        borderTop: `${token.lineWidth} solid rgba(0, 0, 0, 0.25)`,
+        '.anticon': {
+          fontSize: '16px'
+        }
+      },
+      [`.top-nav-menu li${token.antCls}-menu-item`]: {
+        height: '100%',
+        lineHeight: 1
+      },
+      '.drawer .drawer-content': {
+        background: '#001529'
+      }
+    },
+    [`${token.antCls}-pro-menu-item`]: {
+      [`.anticon${token.antCls}-pro-menu-item-title`]: {
+        marginLeft: '10px'
+      }
+    },
+    '.sider-app-menus': {
+      width: '100px',
+      backgroundColor: '#fff',
+      cursor: 'pointer',
+      padding: '6px',
+      transition: 'all .3s',
+      borderRadius: '4px',
+      color: '#333',
+      '&:hover': {
+        backgroundColor: '#efefef'
+      }
+    }
+  }
+}

package/lib/ProLayout/TopHeader/index.js

@@ -0,0 +1,170 @@
+import { computed, ref, 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';
+import { defaultSettingProps, LayoutType } from '../defaultSettings';
+import { defaultPrefixCls, useRouteContext } from '../RouteContext';
+import BaseMenu from '../SiderMenu/BaseMenu.js';
+import { clearMenuItem } from '../util';
+import useProLayoutStyle from '../style';
+export const baseHeaderProps = {
+  ...defaultSettingProps,
+  prefixCls: PropTypes.string.def('ant-pro'),
+  collapsed: PropTypes.looseBool,
+  logo: siderMenuProps.logo,
+  logoStyle: siderMenuProps.logoStyle,
+  headerTheme: {
+    type: String,
+    default: 'dark'
+  },
+  menuData: {
+    type: Array,
+    default: () => []
+  },
+  splitMenus: siderMenuProps.splitMenus,
+  menuRender: {
+    type: [Object, Function],
+    default: () => undefined
+  },
+  menuHeaderRender: siderMenuProps.menuHeaderRender,
+  menuItemRender: siderMenuProps.menuItemRender,
+  topHeaderMenuRender: {
+    type: [Function, Object, Boolean],
+    default: () => undefined
+  },
+  subMenuItemRender: siderMenuProps.subMenuItemRender,
+  rightContentRender: {
+    type: [Object, Function],
+    default: () => undefined
+  },
+  collapsedButtonRender: siderMenuProps.collapsedButtonRender,
+  matchMenuKeys: siderMenuProps.matchMenuKeys,
+  // events
+  onMenuHeaderClick: PropTypes.func,
+  onCollapse: siderMenuProps.onCollapse,
+  onOpenKeys: siderMenuProps.onOpenKeys,
+  onSelect: siderMenuProps.onSelect,
+  headerLeftWidth: Number
+};
+export const topNavHeaderProps = {
+  ...siderMenuProps,
+  ...baseHeaderProps
+};
+const RightContent = ({
+  rightContentRender,
+  ...props
+}) => {
+  const rightSize = ref('auto');
+  return _createVNode("div", {
+    "style": {
+      minWidth: rightSize.value
+    }
+  }, [_createVNode("div", {
+    "style": {
+      paddingRight: 8
+    }
+  }, [_createVNode(ResizeObserver, {
+    "onResize": ({
+      width
+    }) => {
+      rightSize.value = width;
+    }
+  }, {
+    default: () => [rightContentRender && typeof rightContentRender === 'function' ? _createVNode("div", null, [rightContentRender({
+      ...props
+    })]) : 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
+      };
+    });
+    MenusData = clearMenuItem(noChildrenMenuData);
+  }
+  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;