mt-ui-components-vue3/lib/Tabs/tabs.me.js

玛果添实UI组件库(Vue3)

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _antDesignVue = require("ant-design-vue");
var _tabsTypes = require("./tabsTypes");
var _core = require("@vueuse/core");
var _useConfigInject2 = _interopRequireDefault(require("ant-design-vue/es/config-provider/hooks/useConfigInject"));
var _index = _interopRequireDefault(require("./style/index.style"));
var _classNames2 = _interopRequireDefault(require("ant-design-vue/es/_util/classNames"));
var jTabsProps = function jTabsProps() {
  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _tabsTypes.tabsProps), {}, {
    style: {
      type: Object,
      default: undefined
    }
  });
};
var JTabs = (0, _vue.defineComponent)({
  name: 'Tabs',
  props: jTabsProps(),
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
      slots = _ref.slots,
      expose = _ref.expose;
    var renderArr = Object.keys(slots).filter(function (item) {
      return !['centerExtra'].includes(item);
    });
    var jetTabs = (0, _vue.ref)();
    var content = (0, _vue.ref)();
    var centerExtraWidth = (0, _vue.ref)();
    var _useElementSize = (0, _core.useElementSize)(jetTabs),
      width = _useElementSize.width;
    (0, _vue.watch)(width, function () {
      if (jetTabs.value) {
        centerExtraWidth.value = jetTabs.value.querySelector('.ant-tabs-nav-wrap').clientWidth - jetTabs.value.querySelector('.ant-tabs-nav-list').clientWidth - 10 + 'px';
        content.value = jetTabs.value.querySelector('.ant-tabs-nav-wrap');
      }
    }, {
      immediate: true
    });
    var _useConfigInject = (0, _useConfigInject2.default)('j-tabs', props),
      prefixCls = _useConfigInject.prefixCls;
    var _useStyle = (0, _index.default)(prefixCls),
      _useStyle2 = (0, _slicedToArray2.default)(_useStyle, 2),
      wrapSSR = _useStyle2[0],
      hashId = _useStyle2[1];
    var prefixClsValue = prefixCls.value;
    var rootCls = (0, _classNames2.default)(prefixClsValue, (0, _defineProperty2.default)({}, hashId.value, true));
    console.log('renderArr-----', renderArr);
    return function () {
      return wrapSSR((0, _vue.createVNode)("div", {
        "ref": jetTabs,
        "class": rootCls
      }, [(0, _vue.createVNode)(_antDesignVue.Tabs, props, {
        default: function _default(scope) {
          return slots.default && slots.default({
            scope: scope
          });
        }
      }), content.value && (0, _vue.createVNode)((0, _vue.resolveComponent)("teleport"), {
        "to": content.value
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)("div", {
            "class": "center-extra-content",
            "style": "width: ".concat(centerExtraWidth.value)
          }, [slots.centerExtra && slots.centerExtra()])];
        }
      })]));
    };
  }
});
var _default2 = JTabs;
exports.default = _default2;