song-ui-u/es/components/tabs/src/tabs.mjs

vue3 + js的PC前端组件库

import { defineComponent, ref, reactive, watchEffect, provide, createVNode } from 'vue';
import { TAB_KEY } from '../constant.mjs';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import { X } from 'song-ui-pro-icon';
import '../../../hook/use-zindex/index.mjs';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import { XIcon } from '../../icon/index.mjs';
import '../../input/index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../../switch/index.mjs';
import '../../form/index.mjs';
import '../../message/index.mjs';
import '../../mask/src/mask.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import '../../image/index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../../chat/index.mjs';
import '../../progress/index.mjs';
import '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../index.mjs';
import '../../menu/index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../../select/index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../../timeline/index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../../sender/index.mjs';

var tabs = /* @__PURE__ */ 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 = ref(props.modelValue);
    const panes = reactive([]);
    const ns = 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);
    };
    watchEffect(() => {
      activeName.value = props.modelValue;
    });
    provide(TAB_KEY, {
      activeName,
      registerPane,
      handleTabClick,
      props
    });
    return () => createVNode("div", {
      "class": [ns.b(), ns.m("position-body", props.position)]
    }, [createVNode("div", {
      "class": [ns.e("header"), ns.m("position-header", props.position)]
    }, [panes.map((pane, index) => 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 && createVNode(XIcon, {
      "onClick": (e) => handelRem(pane, e)
    }, {
      default: () => [createVNode(X, null, null)]
    })]))]), createVNode("div", {
      "class": [ns.e("content")]
    }, [slots.default?.()])]);
  }
});

export { tabs as default };
//# sourceMappingURL=tabs.mjs.map