mt-ui-components-vue3/lib/ProLayout/Basic/Header.js

玛果添实UI组件库(Vue3)

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.headerViewProps = exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _TopHeader = require("../TopHeader");
var _vueTypes = _interopRequireDefault(require("ant-design-vue/lib/_util/vue-types"));
var _RouteContext = require("../RouteContext");
var _antDesignVue = require("ant-design-vue");
var headerViewProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _TopHeader.baseHeaderProps), {}, {
  headerRender: {
    type: [Object, Function, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  headerTitleRender: {
    type: [Object, Function, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  headerContentRender: {
    type: [Object, Function, Boolean],
    default: function _default() {
      return undefined;
    }
  },
  hasSiderMenu: _vueTypes.default.looseBool,
  siderWidth: _vueTypes.default.number.def(208)
});
exports.headerViewProps = headerViewProps;
var _default2 = (0, _vue.defineComponent)({
  name: 'HeaderView',
  inheritAttrs: false,
  props: headerViewProps,
  setup: function setup(props) {
    var _toRefs = (0, _vue.toRefs)(props),
      prefixCls = _toRefs.prefixCls,
      fixedHeader = _toRefs.fixedHeader,
      hasSiderMenu = _toRefs.hasSiderMenu,
      headerHeight = _toRefs.headerHeight,
      layout = _toRefs.layout,
      theme = _toRefs.theme,
      onCollapse = _toRefs.onCollapse;
    var context = (0, _RouteContext.useRouteContext)();
    var needFixedHeader = (0, _vue.computed)(function () {
      return fixedHeader.value || context.fixedHeader;
    });
    var isMix = (0, _vue.computed)(function () {
      return layout.value === 'mix';
    });
    var isTop = (0, _vue.computed)(function () {
      return layout.value === 'top';
    });
    var needSettingWidth = (0, _vue.computed)(function () {
      return needFixedHeader.value && hasSiderMenu.value && !isTop.value;
    });
    var className = (0, _vue.computed)(function () {
      var _ref;
      return _ref = {}, (0, _defineProperty2.default)(_ref, "".concat(prefixCls.value, "-fixed-header"), needFixedHeader.value), (0, _defineProperty2.default)(_ref, "".concat(prefixCls.value, "-top-menu"), isTop.value), _ref;
    });
    var renderContent = function renderContent() {
      var defaultDom = (0, _vue.createVNode)(_TopHeader.TopNavHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
        "theme": theme.value,
        "mode": "horizontal"
      }, props), {}, {
        "onCollapse": onCollapse.value,
        "menuData": context.menuData
      }), null);
      if (props.headerRender) {
        return props.headerRender(props, defaultDom);
      }
      return defaultDom;
    };
    var right = (0, _vue.computed)(function () {
      return needFixedHeader.value ? 0 : undefined;
    });
    return function () {
      return (0, _vue.createVNode)(_vue.Fragment, null, [needFixedHeader.value && (0, _vue.createVNode)(_antDesignVue.Layout.Header, {
        "style": {
          height: "".concat(headerHeight.value, "px"),
          lineHeight: "".concat(headerHeight.value, "px"),
          background: 'transparent'
        }
      }, null), (0, _vue.createVNode)(_antDesignVue.Layout.Header, {
        "style": {
          padding: 0,
          height: "".concat(headerHeight.value, "px"),
          lineHeight: "".concat(headerHeight.value, "px"),
          width: '100%',
          zIndex: 100,
          right: right.value
        },
        "class": className.value
      }, {
        default: function _default() {
          return [renderContent()];
        }
      })]);
    };
  }
});
exports.default = _default2;