import { defineComponent, ref, computed, createVNode } from 'vue';
import '../../../../utils/index.mjs';
import { tabNodeProps } from '../props.mjs';
import { classNames } from '../../../../utils/dom/class.mjs';
import { KeyCode } from '../../../../utils/KeyCode.mjs';

var TabNode = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "TabNode",
  props: tabNodeProps(),
  emits: ["click", "resize", "remove", "focus"],
  setup(props, {
    expose,
    attrs
  }) {
    const domRef = ref();
    function onInternalClick(e) {
      var _a;
      if ((_a = props.tab) == null ? void 0 : _a.disabled)
        return;
      props.onClick(e);
    }
    expose({
      domRef
    });
    function onRemoveTab(event) {
      var _a;
      event.preventDefault();
      event.stopPropagation();
      props.editable.onEdit("remove", {
        key: (_a = props.tab) == null ? void 0 : _a.key,
        event
      });
    }
    const removable = computed(() => {
      var _a;
      return props.editable && props.closable !== false && !((_a = props.tab) == null ? void 0 : _a.disabled);
    });
    return () => {
      var _a;
      const {
        prefixCls,
        id,
        active,
        tab: {
          key,
          tab,
          disabled,
          closeIcon
        },
        renderWrapper,
        removeAriaLabel,
        editable,
        onFocus
      } = props;
      const tabPrefix = `${prefixCls}-tab`;
      const node = createVNode("div", {
        "key": key,
        "ref": domRef,
        "class": classNames(tabPrefix, {
          [`${tabPrefix}-with-remove`]: removable.value,
          [`${tabPrefix}-active`]: active,
          [`${tabPrefix}-disabled`]: disabled
        }),
        "style": attrs.style,
        "onClick": onInternalClick
      }, [createVNode("div", {
        "role": "tab",
        "aria-selected": active,
        "id": id && `${id}-tab-${key}`,
        "class": `${tabPrefix}-btn`,
        "aria-controls": id && `${id}-panel-${key}`,
        "aria-disabled": disabled,
        "tabindex": disabled ? null : 0,
        "onClick": (e) => {
          e.stopPropagation();
          onInternalClick(e);
        },
        "onKeydown": (e) => {
          if ([KeyCode.SPACE, KeyCode.ENTER].includes(e.which)) {
            e.preventDefault();
            onInternalClick(e);
          }
        },
        "onFocus": onFocus
      }, [typeof tab === "function" ? tab() : tab]), removable.value && createVNode("button", {
        "type": "button",
        "aria-label": removeAriaLabel || "remove",
        "tabindex": 0,
        "class": `${tabPrefix}-remove`,
        "onClick": (e) => {
          e.stopPropagation();
          onRemoveTab(e);
        }
      }, [(closeIcon == null ? void 0 : closeIcon()) || ((_a = editable.removeIcon) == null ? void 0 : _a.call(editable)) || "\xD7"])]);
      return renderWrapper ? renderWrapper(node) : node;
    };
  }
});

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