mt-ui-components-vue3/lib/ProLayout/TopHeader/index.js

玛果添实UI组件库(Vue3)

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.topNavHeaderProps = exports.baseHeaderProps = exports.TopNavHeader = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _vcResizeObserver = _interopRequireDefault(require("ant-design-vue/lib/vc-resize-observer"));
var _SiderMenu = require("../SiderMenu/SiderMenu");
var _vueTypes = _interopRequireDefault(require("ant-design-vue/lib/_util/vue-types"));
var _defaultSettings = require("../defaultSettings");
var _RouteContext = require("../RouteContext");
var _BaseMenu = _interopRequireDefault(require("../SiderMenu/BaseMenu"));
var _util = require("../util");
var _excluded = ["rightContentRender"];
var baseHeaderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), {}, {
  prefixCls: _vueTypes.default.string.def('ant-pro'),
  collapsed: _vueTypes.default.looseBool,
  logo: _SiderMenu.siderMenuProps.logo,
  logoStyle: _SiderMenu.siderMenuProps.logoStyle,
  headerTheme: {
    type: String,
    default: 'dark'
  },
  menuData: {
    type: Array,
    default: function _default() {
      return [];
    }
  },
  splitMenus: _SiderMenu.siderMenuProps.splitMenus,
  menuRender: {
    type: [Object, Function],
    default: function _default() {
      return undefined;
    }
  },
  menuHeaderRender: _SiderMenu.siderMenuProps.menuHeaderRender,
  menuItemRender: _SiderMenu.siderMenuProps.menuItemRender,
  subMenuItemRender: _SiderMenu.siderMenuProps.subMenuItemRender,
  rightContentRender: {
    type: [Object, Function],
    default: function _default() {
      return undefined;
    }
  },
  collapsedButtonRender: _SiderMenu.siderMenuProps.collapsedButtonRender,
  matchMenuKeys: _SiderMenu.siderMenuProps.matchMenuKeys,
  // events
  onMenuHeaderClick: _vueTypes.default.func,
  onCollapse: _SiderMenu.siderMenuProps.onCollapse,
  onOpenKeys: _SiderMenu.siderMenuProps.onOpenKeys,
  onSelect: _SiderMenu.siderMenuProps.onSelect
});
exports.baseHeaderProps = baseHeaderProps;
var topNavHeaderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _SiderMenu.siderMenuProps), baseHeaderProps);
exports.topNavHeaderProps = topNavHeaderProps;
var RightContent = function RightContent(_ref) {
  var rightContentRender = _ref.rightContentRender,
    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var rightSize = (0, _vue.ref)('auto');
  return (0, _vue.createVNode)("div", {
    "style": {
      minWidth: rightSize.value
    }
  }, [(0, _vue.createVNode)("div", {
    "style": {
      paddingRight: 8
    }
  }, [(0, _vue.createVNode)(_vcResizeObserver.default, {
    "onResize": function onResize(_ref2) {
      var width = _ref2.width;
      rightSize.value = width;
    }
  }, {
    default: function _default() {
      return [rightContentRender && typeof rightContentRender === 'function' ? (0, _vue.createVNode)("div", null, [rightContentRender((0, _objectSpread2.default)({}, props))]) : rightContentRender];
    }
  })])]);
};
var TopNavHeader = function TopNavHeader(props) {
  var headerRef = (0, _vue.ref)();
  var propPrefixCls = props.prefixCls,
    onMenuHeaderClick = props.onMenuHeaderClick,
    onOpenKeys = props.onOpenKeys,
    onSelect = props.onSelect,
    contentWidth = props.contentWidth,
    rightContentRender = props.rightContentRender,
    layout = props.layout,
    menuData = props.menuData,
    mode = props.mode;
  var context = (0, _RouteContext.useRouteContext)();
  var prefixCls = "".concat(propPrefixCls || _RouteContext.defaultPrefixCls, "-top-nav-header");
  var headerDom = (0, _SiderMenu.defaultRenderLogoAndTitle)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
    collapsed: false
  }),
  // REMARK:: Any time render header title
  // layout === 'mix' ? 'headerTitleRender' : undefined,
  // layout !== 'side' ? 'headerTitleRender' : undefined,
  'headerTitleRender');
  //
  var MenusData = props.layout === 'side' ? [] : menuData;
  if (props.layout === 'mix' && props.splitMenus) {
    var noChildrenMenuData = (menuData || []).map(function (item) {
      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
        children: undefined,
        component: undefined
      });
    });
    MenusData = (0, _util.clearMenuItem)(noChildrenMenuData);
  }
  var _mode = (0, _vue.computed)(function () {
    return props.layout === 'mix' && props.splitMenus ? 'horizontal' : mode;
  });
  var className = (0, _vue.computed)(function () {
    var _ref3;
    return _ref3 = {}, (0, _defineProperty2.default)(_ref3, prefixCls, true), (0, _defineProperty2.default)(_ref3, "light", props.theme === 'light'), (0, _defineProperty2.default)(_ref3, "dark", props.theme === 'dark'), _ref3;
  });
  return (0, _vue.createVNode)("div", {
    "class": className.value
  }, [(0, _vue.createVNode)("div", {
    "ref": headerRef,
    "class": "".concat(prefixCls, "-main ").concat(contentWidth === 'Fixed' ? 'wide' : '')
  }, [headerDom && (0, _vue.createVNode)("div", {
    "class": "".concat(prefixCls, "-main-left"),
    "onClick": onMenuHeaderClick
  }, [(0, _vue.createVNode)("div", {
    "class": "".concat(prefixCls, "-logo"),
    "key": "logo",
    "id": "logo"
  }, [headerDom])]), (0, _vue.createVNode)("div", {
    "style": {
      flex: 1
    },
    "class": "".concat(prefixCls, "-menu")
  }, [(0, _vue.createVNode)(_BaseMenu.default, {
    "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': function onUpdateOpenKeys($event) {
      return onOpenKeys && onOpenKeys($event);
    },
    'onUpdate:selectedKeys': function onUpdateSelectedKeys($event) {
      return onSelect && onSelect($event);
    }
  }, null)]), rightContentRender && (0, _vue.createVNode)(RightContent, (0, _objectSpread2.default)({
    "rightContentRender": rightContentRender
  }, props), null)])]);
};
exports.TopNavHeader = TopNavHeader;