winbox-ui-next/lib/tabs/tabs.js

We Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var vue = require("vue");
var vueUtils = require("../_utils/vue-utils.js");
var globalConfig = require("../_utils/global-config.js");
var tabsNav = require("./tabs-nav.js");
var usePickSlots = require("../_hooks/use-pick-slots.js");
var _Tabs = vue.defineComponent({
  name: "Tabs",
  props: {
    activeKey: {
      type: String,
      default: void 0
    },
    defaultActiveKey: {
      type: String,
      default: ""
    },
    tabPosition: {
      type: String,
      default: "top"
    },
    size: {
      type: String,
      default: "default"
    },
    type: {
      type: String,
      default: "line"
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    editable: {
      type: Boolean,
      default: false
    },
    showAddButton: {
      type: Boolean,
      default: false
    },
    destroyOnHide: {
      type: Boolean,
      default: false
    },
    lazyLoad: {
      type: Boolean,
      default: false
    },
    justify: {
      type: Boolean,
      default: false
    },
    animation: {
      type: Boolean,
      default: false
    },
    headerPadding: {
      type: Boolean,
      default: true
    }
  },
  emits: [
    "update:activeKey",
    "change",
    "tabClick",
    "add",
    "delete"
  ],
  setup(props, {
    emit,
    slots
  }) {
    const prefixCls = globalConfig.getPrefixCls("tabs");
    const mergedPosition = vue.computed(() => props.direction === "vertical" ? "left" : props.tabPosition);
    const mergedDirection = vue.computed(() => ["left", "right"].includes(mergedPosition.value) ? "vertical" : "horizontal");
    const defaultSlot = usePickSlots(slots, "default");
    const children = vue.computed(() => {
      var _a, _b;
      return vueUtils.getChildrenComponents((_b = (_a = defaultSlot.value) == null ? void 0 : _a.call(defaultSlot)) != null ? _b : [], "TabPane");
    });
    const tabs = vue.computed(() => children.value.map((vn) => {
      var _a, _b;
      return {
        title: vueUtils.getValueFromSlotsOrProps("title", vn.props, vn.children),
        key: String(vn.key),
        disabled: vueUtils.getBooleanProp((_a = vn.props) == null ? void 0 : _a.disabled),
        closable: ((_b = vn.props) == null ? void 0 : _b.closable) !== false
      };
    }));
    const tabKeys = vue.computed(() => tabs.value.map((item) => item.key));
    const _activeTab = vue.ref(props.defaultActiveKey);
    const computedActiveTab = vue.computed(() => {
      var _a;
      const activeKey = (_a = props.activeKey) != null ? _a : _activeTab.value;
      if (tabKeys.value.includes(activeKey)) {
        return activeKey;
      }
      return tabKeys.value[0];
    });
    const activeIndex = vue.computed(() => tabKeys.value.indexOf(computedActiveTab.value));
    const loadedTabs = new Set([computedActiveTab.value]);
    const handleClick = (key, e) => {
      if (key !== computedActiveTab.value) {
        _activeTab.value = key;
        loadedTabs.add(key);
        emit("update:activeKey", key);
        emit("change", key);
      }
      emit("tabClick", key, e);
    };
    const getIsRender = (isActive, key) => {
      if (isActive) {
        return true;
      }
      if (props.lazyLoad) {
        return loadedTabs.has(key);
      }
      return !props.destroyOnHide;
    };
    const handleAdd = () => {
      emit("add");
    };
    const renderContent = () => {
      const list = children.value.map((vn, index) => {
        const key = String(vn.key);
        const isActive = index === activeIndex.value;
        return vue.createVNode("div", {
          "key": key,
          "class": [`${prefixCls}-content-item`, {
            [`${prefixCls}-content-item-active`]: isActive
          }]
        }, [getIsRender(isActive, key) && vn]);
      });
      return vue.createVNode("div", {
        "class": `${prefixCls}-content`
      }, [vue.createVNode("div", {
        "class": [`${prefixCls}-content-list`, {
          [`${prefixCls}-content-animation`]: props.animation
        }],
        "style": {
          marginLeft: `-${activeIndex.value * 100}%`
        }
      }, [list])]);
    };
    const cls = vue.computed(() => [prefixCls, `${prefixCls}-${mergedDirection.value}`, `${prefixCls}-${mergedPosition.value}`, `${prefixCls}-type-${props.type}`, `${prefixCls}-size-${props.size}`, {
      [`${prefixCls}-justify`]: props.justify
    }]);
    return () => vue.createVNode("div", {
      "class": cls.value
    }, [mergedPosition.value === "bottom" && renderContent(), vue.createVNode(tabsNav, {
      "tabs": tabs.value,
      "tabKeys": tabKeys.value,
      "activeTab": computedActiveTab.value,
      "activeIndex": activeIndex.value,
      "direction": mergedDirection.value,
      "tabPosition": mergedPosition.value,
      "editable": props.editable,
      "animation": props.animation,
      "showAddButton": props.showAddButton,
      "headerPadding": props.headerPadding,
      "size": props.size,
      "type": props.type,
      "onClick": handleClick,
      "onAdd": handleAdd,
      "onDelete": (key) => emit("delete", key)
    }, {
      extra: slots.extra
    }), mergedPosition.value !== "bottom" && renderContent()]);
  }
});
module.exports = _Tabs;