mt-ui-components-vue3/es/ProLayout/SiderMenu/SiderMenu.js

玛果添实UI组件库(Vue3)

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
import { LayoutSider as Sider, Menu } from '../../components';
import BaseMenu, { baseMenuProps } from './BaseMenu';
import { defaultSettingProps } from '../defaultSettings';
import PropTypes from "ant-design-vue/es/_util/vue-types";
import IconFont from '../../AIcon';
import { useRouteContext } from '../RouteContext';
import { computed, unref } from 'vue';
export var siderMenuProps = _objectSpread(_objectSpread(_objectSpread({}, defaultSettingProps), baseMenuProps), {}, {
  logo: {
    type: [Object, String, Function],
    default: function _default() {
      return undefined;
    }
  },
  logoStyle: {
    type: Object,
    default: function _default() {
      return undefined;
    }
  },
  siderWidth: PropTypes.number.def(208),
  headerHeight: PropTypes.number.def(48),
  collapsedWidth: PropTypes.number.def(48),
  menuHeaderRender: {
    type: [Function, Object, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  menuContentRender: {
    type: [Function, Object, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  menuExtraRender: {
    type: [Function, Object, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  collapsedButtonRender: {
    type: [Function, Object, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  breakpoint: {
    type: [Object, Boolean],
    default: function _default() {
      return false;
    }
  },
  splitMenus: PropTypes.looseBool,
  fixed: PropTypes.looseBool,
  hide: PropTypes.looseBool,
  matchMenuKeys: {
    type: Array,
    default: function _default() {
      return [];
    }
  },
  // events
  onMenuHeaderClick: PropTypes.func,
  onMenuClick: PropTypes.func,
  onCollapse: {
    type: Function
  },
  onOpenKeys: {
    type: Function
  },
  onSelect: {
    type: Function
  }
});
export var defaultRenderLogo = function defaultRenderLogo(logo, logoStyle) {
  if (!logo) {
    return null;
  }
  if (typeof logo === 'string') {
    return _createVNode("img", {
      "src": logo,
      "alt": "logo",
      "style": logoStyle
    }, null);
  }
  if (typeof logo === 'function') {
    // @ts-ignore
    return logo();
  }
  return logo;
};
export var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props) {
  var renderKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'menuHeaderRender';
  var _props$logo = props.logo,
    logo = _props$logo === void 0 ? 'http://demo.jetlinks.cn/static/logo.760eb65c.png' : _props$logo,
    logoStyle = props.logoStyle,
    title = props.title,
    layout = props.layout;
  var renderFunction = props[renderKey || ''];
  if (layout === 'mix' && renderFunction === false) {
    return null;
  }
  var logoDom = defaultRenderLogo(logo, logoStyle);
  var 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 var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(collapsed) {
  return collapsed ? _createVNode(IconFont, {
    "type": 'MenuUnfoldOutlined'
  }, null) : _createVNode(IconFont, {
    "type": 'MenuFoldOutlined'
  }, null);
};
var SiderMenu = function SiderMenu(props) {
  var _ref2;
  var collapsed = props.collapsed,
    siderWidth = props.siderWidth,
    breakpoint = props.breakpoint,
    _props$collapsedWidth = props.collapsedWidth,
    collapsedWidth = _props$collapsedWidth === void 0 ? 48 : _props$collapsedWidth,
    _props$menuExtraRende = props.menuExtraRender,
    menuExtraRender = _props$menuExtraRende === void 0 ? false : _props$menuExtraRende,
    _props$menuContentRen = props.menuContentRender,
    menuContentRender = _props$menuContentRen === void 0 ? false : _props$menuContentRen,
    _props$collapsedButto = props.collapsedButtonRender,
    collapsedButtonRender = _props$collapsedButto === void 0 ? defaultRenderCollapsedButton : _props$collapsedButto,
    theme = props.theme;
  var context = useRouteContext();
  var getPrefixCls = context.getPrefixCls;
  var baseClassName = getPrefixCls('sider');
  var hasSplitMenu = computed(function () {
    return props.layout === 'mix' && props.splitMenus;
  });
  var sSideWidth = computed(function () {
    return props.collapsed ? props.collapsedWidth : props.siderWidth;
  });
  var classNames = computed(function () {
    var _ref;
    return _ref = {}, _defineProperty(_ref, baseClassName, true), _defineProperty(_ref, "".concat(baseClassName, "-fixed"), context.fixSiderbar), _defineProperty(_ref, "".concat(baseClassName, "-").concat(theme), true), _defineProperty(_ref, "".concat(baseClassName, "-layout-").concat(props.layout), props.layout), _ref;
  });
  var handleSelect = function handleSelect($event) {
    if (props.onSelect) {
      if (unref(hasSplitMenu)) {
        props.onSelect([context.selectedKeys[0]].concat(_toConsumableArray($event)));
        return;
      }
      props.onSelect($event);
    }
  };
  var headerDom = defaultRenderLogoAndTitle(props);
  var extraDom = menuExtraRender && menuExtraRender(props);
  if (hasSplitMenu.value && unref(context.flatMenuData).length === 0) {
    return null;
  }
  var 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": "".concat(baseClassName, "-menu"),
    'onUpdate:openKeys': function onUpdateOpenKeys($event) {
      return props.onOpenKeys && props.onOpenKeys($event);
    },
    'onUpdate:selectedKeys': handleSelect
  }, null);
  return _createVNode(_Fragment, null, [context.fixSiderbar && _createVNode("div", {
    "style": {
      width: "".concat(sSideWidth.value, "px"),
      overflow: 'hidden',
      flex: "0 0 ".concat(sSideWidth.value, "px"),
      maxWidth: "".concat(sSideWidth.value, "px"),
      minWidth: "".concat(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": function onCollapse(collapse) {
      var _props$onCollapse;
      (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 ? void 0 : _props$onCollapse.call(props, collapse);
    },
    "collapsedWidth": collapsedWidth,
    "style": {
      overflow: 'hidden',
      paddingTop: "".concat(props.headerHeight, "px")
    },
    "width": siderWidth,
    "theme": theme,
    "class": classNames.value
  }, {
    default: function _default() {
      return [headerDom && _createVNode("div", {
        "class": "".concat(baseClassName, "-logo"),
        "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
        "id": "logo",
        "style": props === null || props === void 0 ? void 0 : props.logoStyle
      }, [headerDom]), extraDom && !props.collapsed && _createVNode("div", {
        "class": (_ref2 = {}, _defineProperty(_ref2, "".concat(baseClassName, "-extra"), true), _defineProperty(_ref2, "".concat(baseClassName, "-extra-no-logo"), !headerDom), _ref2)
      }, [extraDom]), _createVNode("div", {
        "style": "flex: 1; overflow: hidden auto;"
      }, [menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom]), _createVNode("div", {
        "class": "".concat(baseClassName, "-links")
      }, [collapsedButtonRender !== false ? _createVNode(Menu, {
        "class": "".concat(baseClassName, "-link-menu"),
        "inlineIndent": 16,
        "theme": theme,
        "selectedKeys": [],
        "openKeys": [],
        "mode": "inline",
        "onClick": function onClick() {
          if (props.onCollapse) {
            props.onCollapse(!props.collapsed);
          }
        }
      }, {
        default: function _default() {
          return [_createVNode(Menu.Item, {
            "key": 'collapsed-button',
            "class": "".concat(baseClassName, "-collapsed-button"),
            "title": false
          }, {
            default: function _default() {
              return [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender];
            }
          })];
        }
      }) : null])];
    }
  })]);
};
export default SiderMenu;