9628e830dc1d493a4063bf16dc893a78705929d26648ff7866d340553f71d0ff18b20e30c1b343bbd984349c303f5b545e675c90c294f17b43d353c80ccba6 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var constants = require('./constants.js');
  6. var tabBar = require('./tab-bar.js');
  7. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  8. var strings = require('../../../utils/strings.js');
  9. var error = require('../../../utils/error.js');
  10. var index = require('../../../hooks/use-namespace/index.js');
  11. var types = require('../../../utils/types.js');
  12. const COMPONENT_NAME = "ElTabBar";
  13. const __default__ = vue.defineComponent({
  14. name: COMPONENT_NAME
  15. });
  16. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  17. ...__default__,
  18. props: tabBar.tabBarProps,
  19. setup(__props, { expose }) {
  20. const props = __props;
  21. const rootTabs = vue.inject(constants.tabsRootContextKey);
  22. if (!rootTabs)
  23. error.throwError(COMPONENT_NAME, "<el-tabs><el-tab-bar /></el-tabs>");
  24. const ns = index.useNamespace("tabs");
  25. const barRef = vue.ref();
  26. const barStyle = vue.ref();
  27. const getBarStyle = () => {
  28. let offset = 0;
  29. let tabSize = 0;
  30. const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
  31. const sizeDir = sizeName === "width" ? "x" : "y";
  32. const position = sizeDir === "x" ? "left" : "top";
  33. props.tabs.every((tab) => {
  34. if (types.isUndefined(tab.paneName))
  35. return false;
  36. const $el = props.tabRefs[tab.paneName];
  37. if (!$el)
  38. return false;
  39. if (!tab.active) {
  40. return true;
  41. }
  42. offset = $el[`offset${strings.capitalize(position)}`];
  43. tabSize = $el[`client${strings.capitalize(sizeName)}`];
  44. const tabStyles = window.getComputedStyle($el);
  45. if (sizeName === "width") {
  46. tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
  47. offset += Number.parseFloat(tabStyles.paddingLeft);
  48. }
  49. return false;
  50. });
  51. return {
  52. [sizeName]: `${tabSize}px`,
  53. transform: `translate${strings.capitalize(sizeDir)}(${offset}px)`
  54. };
  55. };
  56. const update = () => barStyle.value = getBarStyle();
  57. const tabObservers = [];
  58. const observerTabs = () => {
  59. tabObservers.forEach((observer) => observer.stop());
  60. tabObservers.length = 0;
  61. Object.values(props.tabRefs).forEach((tab) => {
  62. tabObservers.push(core.useResizeObserver(tab, update));
  63. });
  64. };
  65. vue.watch(() => props.tabs, async () => {
  66. await vue.nextTick();
  67. update();
  68. observerTabs();
  69. }, { immediate: true });
  70. const barObserver = core.useResizeObserver(barRef, () => update());
  71. vue.onBeforeUnmount(() => {
  72. tabObservers.forEach((observer) => observer.stop());
  73. tabObservers.length = 0;
  74. barObserver.stop();
  75. });
  76. expose({
  77. ref: barRef,
  78. update
  79. });
  80. return (_ctx, _cache) => {
  81. return vue.openBlock(), vue.createElementBlock("div", {
  82. ref_key: "barRef",
  83. ref: barRef,
  84. class: vue.normalizeClass([vue.unref(ns).e("active-bar"), vue.unref(ns).is(vue.unref(rootTabs).props.tabPosition)]),
  85. style: vue.normalizeStyle(barStyle.value)
  86. }, null, 6);
  87. };
  88. }
  89. });
  90. var TabBar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "tab-bar.vue"]]);
  91. exports["default"] = TabBar;
  92. //# sourceMappingURL=tab-bar2.js.map