song-ui-u/lib/components/tabs/src/tabs.cjs

vue3 + js的PC前端组件库

'use strict';

var vue = require('vue');
var constant = require('../constant.cjs');
var index$1 = require('../../../hook/use-namespace/index.cjs');
var icons = require('song-ui-pro-icon');
require('../../../hook/use-zindex/index.cjs');
require('../../button/index.cjs');
require('../../buttonGroup/index.cjs');
var index = require('../../icon/index.cjs');
require('../../input/index.cjs');
require('../../textarea/index.cjs');
require('../../row/index.cjs');
require('../../col/index.cjs');
require('../../container/index.cjs');
require('../../checkbox/index.cjs');
require('../../switch/index.cjs');
require('../../form/index.cjs');
require('../../message/index.cjs');
require('../../mask/src/mask.cjs');
require('../../modal/index.cjs');
require('../../messageBox/index.cjs');
require('../../drawer/index.cjs');
require('../../badge/index.cjs');
require('../../space/index.cjs');
require('../../image/index.cjs');
require('../../radio/index.cjs');
require('../../divider/index.cjs');
require('../../chat/index.cjs');
require('../../progress/index.cjs');
require('../../upload/index.cjs');
require('../../vTree/index.cjs');
require('../../table/index.cjs');
require('../index.cjs');
require('../../menu/index.cjs');
require('../../steps/index.cjs');
require('../../header/index.cjs');
require('../../breadcrumble/index.cjs');
require('../../datePicker/index.cjs');
require('../../tooltip/index.cjs');
require('../../popover/index.cjs');
require('../../timePicker/index.cjs');
require('../../select/index.cjs');
require('../../collapse/index.cjs');
require('../../card/index.cjs');
require('../../timeline/index.cjs');
require('../../tag/index.cjs');
require('../../result/index.cjs');
require('../../sender/index.cjs');

var tabs = /* @__PURE__ */ vue.defineComponent({
  name: "x-tabs",
  props: {
    modelValue: {
      type: String,
      required: true
    },
    position: {
      type: String,
      default: "top"
    },
    type: {
      type: String,
      default: ""
    },
    editable: {
      type: Boolean,
      default: false
    }
  },
  emits: ["update:modelValue", "tab-click", "tab-remove"],
  setup(props, {
    emit,
    slots
  }) {
    const activeName = vue.ref(props.modelValue);
    const panes = vue.reactive([]);
    const ns = index$1.useNamespace("tabs");
    const registerPane = (pane) => {
      panes.push(pane);
    };
    const handleTabClick = (name) => {
      activeName.value = name;
      emit("update:modelValue", name);
      emit("tab-click", name);
    };
    const handelRem = (pane, e) => {
      e.stopPropagation();
      if (panes.length === 1) return;
      const currentIndex = panes.indexOf(pane);
      panes.splice(currentIndex, 1);
      if (currentIndex === panes.length) {
        emit("update:modelValue", panes[currentIndex - 1].name);
      } else if (currentIndex === 0) {
        emit("update:modelValue", panes[0].name);
      } else {
        emit("update:modelValue", panes[currentIndex].name);
      }
      emit("tab-remove", pane);
    };
    vue.watchEffect(() => {
      activeName.value = props.modelValue;
    });
    vue.provide(constant.TAB_KEY, {
      activeName,
      registerPane,
      handleTabClick,
      props
    });
    return () => vue.createVNode("div", {
      "class": [ns.b(), ns.m("position-body", props.position)]
    }, [vue.createVNode("div", {
      "class": [ns.e("header"), ns.m("position-header", props.position)]
    }, [panes.map((pane, index$1) => vue.createVNode("div", {
      "class": [ns.is("active", activeName.value == pane.name), ns.m("type", props.type)],
      "onClick": () => handleTabClick(pane.name)
    }, [pane.label, props.editable && activeName.value === pane.name && vue.createVNode(index.XIcon, {
      "onClick": (e) => handelRem(pane, e)
    }, {
      default: () => [vue.createVNode(icons.X, null, null)]
    })]))]), vue.createVNode("div", {
      "class": [ns.e("content")]
    }, [slots.default?.()])]);
  }
});

module.exports = tabs;
//# sourceMappingURL=tabs.cjs.map