'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.cjs');
var useConfigInject = require('../../config-provider/src/hooks/useConfigInject.cjs');
var props = require('./props.cjs');
var PanelContent = require('./PanelContent.cjs');
var initDefaultProps = require('../../../utils/vue/initDefaultProps.cjs');
var log = require('../../../utils/log.cjs');
var _class = require('../../../utils/dom/class.cjs');

var ACollapsePanel = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ACollapsePanel",
  inheritAttrs: false,
  props: initDefaultProps.initDefaultProps(props.collapsePanelProps(), {
    showArrow: true,
    isActive: false,
    onItemClick() {
    },
    headerClass: "",
    forceRender: false
  }),
  slots: Object,
  // emits: ['itemClick'],
  setup(props, {
    slots,
    emit,
    attrs
  }) {
    log.devWarning(props.disabled === void 0, "Collapse.Panel", '`disabled` is deprecated. Please use `collapsible="disabled"` instead.');
    const {
      prefixCls
    } = useConfigInject.default("collapse", props);
    const handleItemClick = () => {
      emit("itemClick", props.panelKey);
    };
    const handleKeyPress = (e) => {
      if (e.key === "Enter" || e.keyCode === 13 || e.which === 13)
        handleItemClick();
    };
    return () => {
      var _a, _b;
      const {
        header = (_a = slots.header) == null ? void 0 : _a.call(slots),
        headerClass,
        isActive,
        showArrow,
        destroyInactivePanel,
        accordion,
        forceRender,
        openAnimation,
        expandIcon = slots.expandIcon,
        extra = (_b = slots.extra) == null ? void 0 : _b.call(slots),
        collapsible
      } = props;
      const disabled = collapsible === "disabled";
      const prefixClsValue = prefixCls.value;
      const headerCls = _class.classNames(`${prefixClsValue}-header`, {
        [headerClass]: headerClass,
        [`${prefixClsValue}-header-collapsible-only`]: collapsible === "header",
        [`${prefixClsValue}-icon-collapsible-only`]: collapsible === "icon"
      });
      const itemCls = _class.classNames({
        [`${prefixClsValue}-item`]: true,
        [`${prefixClsValue}-item-active`]: isActive,
        [`${prefixClsValue}-item-disabled`]: disabled,
        [`${prefixClsValue}-no-arrow`]: !showArrow,
        [`${attrs.class}`]: !!attrs.class
      });
      let icon = vue.createVNode("i", {
        "class": "arrow"
      }, null);
      if (showArrow && typeof expandIcon === "function")
        icon = expandIcon(props);
      const panelContent = vue.withDirectives(vue.createVNode(PanelContent.default, {
        "prefixCls": prefixClsValue,
        "isActive": isActive,
        "forceRender": forceRender,
        "role": accordion ? "tabpanel" : null
      }, {
        default: slots.default
      }), [[vue.vShow, isActive]]);
      const transitionProps = {
        appear: false,
        css: false,
        ...openAnimation
      };
      return vue.createVNode("div", {
        ...attrs,
        "class": itemCls
      }, [vue.createVNode("div", {
        "class": headerCls,
        "onClick": () => !["header", "icon"].includes(collapsible) && handleItemClick(),
        "role": accordion ? "tab" : "button",
        "tabindex": disabled ? -1 : 0,
        "aria-expanded": isActive,
        "onKeypress": handleKeyPress
      }, [showArrow && icon, vue.createVNode("span", {
        "onClick": () => collapsible === "header" && handleItemClick(),
        "class": `${prefixClsValue}-header-text`
      }, [header]), extra && vue.createVNode("div", {
        "class": `${prefixClsValue}-extra`
      }, [extra])]), vue.createVNode(vue.Transition, transitionProps, {
        default: () => [!destroyInactivePanel || isActive ? panelContent : null]
      })]);
    };
  }
});

exports.default = ACollapsePanel;
//# sourceMappingURL=CollapsePanel.cjs.map
