"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const aria = require("../../../constants/aria.js");
const event = require("../../../constants/event.js");
const event$1 = require("../../../utils/dom/event.js");
const types = require("../../../utils/types.js");
const runtime = require("../../../utils/vue/props/runtime.js");
const index = require("../../../hooks/use-namespace/index.js");
const index$1 = require("../../../hooks/use-ordered-children/index.js");
const index$2 = require("../../icon/index.js");
const constants = require("./constants.js");
const tabNav = require("./tab-nav.js");
const index$3 = require("../../../../../@element-plus/icons-vue/dist/index.js");
const vue = require("vue");
const shared_esmBundler = require("../../../../../@vue/shared/dist/shared.esm-bundler.js");
const omit = require("../../../../../lodash-es/omit.js");
const tabsProps = runtime.buildProps({
  type: {
    type: String,
    values: [
      "card",
      "border-card",
      ""
    ],
    default: ""
  },
  closable: Boolean,
  addable: Boolean,
  modelValue: { type: [String, Number] },
  defaultValue: { type: [String, Number] },
  editable: Boolean,
  tabPosition: {
    type: String,
    values: [
      "top",
      "right",
      "bottom",
      "left"
    ],
    default: "top"
  },
  beforeLeave: {
    type: runtime.definePropType(Function),
    default: () => true
  },
  stretch: Boolean,
  tabindex: {
    type: [String, Number],
    default: 0
  }
});
const isPaneName = (value) => shared_esmBundler.isString(value) || types.isNumber(value);
const tabsEmits = {
  [event.UPDATE_MODEL_EVENT]: (name) => isPaneName(name),
  tabClick: (pane, ev) => ev instanceof Event,
  tabChange: (name) => isPaneName(name),
  edit: (paneName, action) => ["remove", "add"].includes(action),
  tabRemove: (name) => isPaneName(name),
  tabAdd: () => true
};
const Tabs = /* @__PURE__ */ vue.defineComponent({
  name: "ElTabs",
  props: tabsProps,
  emits: tabsEmits,
  setup(props, { emit, slots, expose }) {
    const ns = index.useNamespace("tabs");
    const isVertical = vue.computed(() => ["left", "right"].includes(props.tabPosition));
    const { children: panes, addChild: registerPane, removeChild: unregisterPane, ChildrenSorter: PanesSorter } = index$1.useOrderedChildren(vue.getCurrentInstance(), "ElTabPane");
    const nav$ = vue.ref();
    const currentName = vue.ref((types.isUndefined(props.modelValue) ? props.defaultValue : props.modelValue) ?? "0");
    const setCurrentName = async (value, trigger = false) => {
      var _a, _b, _c, _d;
      if (currentName.value === value || types.isUndefined(value)) return;
      try {
        let canLeave;
        if (props.beforeLeave) {
          const result = props.beforeLeave(value, currentName.value);
          canLeave = result instanceof Promise ? await result : result;
        } else canLeave = true;
        if (canLeave !== false) {
          const isFocusInsidePane = (_a = panes.value.find((item) => item.paneName === currentName.value)) == null ? void 0 : _a.isFocusInsidePane();
          currentName.value = value;
          if (trigger) {
            emit(event.UPDATE_MODEL_EVENT, value);
            emit("tabChange", value);
          }
          (_c = (_b = nav$.value) == null ? void 0 : _b.removeFocus) == null ? void 0 : _c.call(_b);
          if (isFocusInsidePane) (_d = nav$.value) == null ? void 0 : _d.focusActiveTab();
        }
      } catch {
      }
    };
    const handleTabClick = (tab, tabName, event2) => {
      if (tab.props.disabled) return;
      emit("tabClick", tab, event2);
      setCurrentName(tabName, true);
    };
    const handleTabRemove = (pane, ev) => {
      if (pane.props.disabled || types.isUndefined(pane.props.name)) return;
      ev.stopPropagation();
      emit("edit", pane.props.name, "remove");
      emit("tabRemove", pane.props.name);
    };
    const handleTabAdd = () => {
      emit("edit", void 0, "add");
      emit("tabAdd");
    };
    const handleKeydown = (event2) => {
      const code = event$1.getEventCode(event2);
      if ([aria.EVENT_CODE.enter, aria.EVENT_CODE.numpadEnter].includes(code)) handleTabAdd();
    };
    const swapChildren = (vnode) => {
      const actualFirstChild = vnode.el.firstChild;
      const firstChild = ["bottom", "right"].includes(props.tabPosition) ? vnode.children[0].el : vnode.children[1].el;
      if (actualFirstChild !== firstChild) actualFirstChild.before(firstChild);
    };
    vue.watch(() => props.modelValue, (modelValue) => setCurrentName(modelValue));
    vue.watch(currentName, async () => {
      var _a;
      await vue.nextTick();
      (_a = nav$.value) == null ? void 0 : _a.scrollToActiveTab();
    });
    vue.provide(constants.tabsRootContextKey, {
      props,
      currentName,
      registerPane,
      unregisterPane,
      nav$
    });
    expose({
      currentName,
      get tabNavRef() {
        return omit.default(nav$.value, ["scheduleRender"]);
      }
    });
    return () => {
      const addSlot = slots["add-icon"];
      const newButton = props.editable || props.addable ? vue.createVNode("div", {
        "class": [ns.e("new-tab"), isVertical.value && ns.e("new-tab-vertical")],
        "tabindex": props.tabindex,
        "onClick": handleTabAdd,
        "onKeydown": handleKeydown
      }, [addSlot ? vue.renderSlot(slots, "add-icon") : vue.createVNode(index$2.ElIcon, { "class": ns.is("icon-plus") }, { default: () => [vue.createVNode(index$3.Plus, null, null)] })]) : null;
      const tabNav$1 = () => vue.createVNode(tabNav.default, {
        "ref": nav$,
        "currentName": currentName.value,
        "editable": props.editable,
        "type": props.type,
        "panes": panes.value,
        "stretch": props.stretch,
        "onTabClick": handleTabClick,
        "onTabRemove": handleTabRemove
      }, null);
      const header = vue.createVNode("div", { "class": [
        ns.e("header"),
        isVertical.value && ns.e("header-vertical"),
        ns.is(props.tabPosition)
      ] }, [vue.createVNode(PanesSorter, null, {
        default: tabNav$1,
        $stable: true
      }), newButton]);
      const panels = vue.createVNode("div", { "class": ns.e("content") }, [vue.renderSlot(slots, "default")]);
      return vue.createVNode("div", {
        "class": [
          ns.b(),
          ns.m(props.tabPosition),
          {
            [ns.m("card")]: props.type === "card",
            [ns.m("border-card")]: props.type === "border-card"
          }
        ],
        "onVnodeMounted": swapChildren,
        "onVnodeUpdated": swapChildren
      }, [panels, header]);
    };
  }
});
exports.default = Tabs;
exports.tabsEmits = tabsEmits;
exports.tabsProps = tabsProps;
