hongluan-ui/lib/components/collapse/src/collapse-item.js

Hongluan Component Library for Vue 3

'use strict';

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

var vue = require('vue');
require('../../../hooks/index.js');
var index$2 = require('../../collapse-transition/index.js');
var index$1 = require('../../icon/index.js');
require('../../system-icon/index.js');
var collapseItem = require('./collapse-item2.js');
var useCollapseItem = require('./use-collapse-item.js');
var index = require('../../../hooks/use-namespace/index.js');
var arrowDown = require('../../system-icon/src/arrow-down.js');

const __default__ = vue.defineComponent({
  name: "CollapseItem"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: collapseItem.collapseItemProps,
  setup(__props, { expose }) {
    const props = __props;
    const {
      focusing,
      id,
      isActive,
      handleFocus,
      handleHeaderClick,
      handleEnterClick
    } = useCollapseItem.useCollapseItem(props);
    const { namespace } = index.useNamespace("collapse-item");
    expose({
      isActive
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass({ [vue.unref(namespace)]: true, "is-active": vue.unref(isActive), "is-disabled": _ctx.disabled })
      }, [
        vue.createElementVNode("div", {
          role: "tab",
          "aria-expanded": vue.unref(isActive),
          "aria-controls": `collapse-content-${vue.unref(id)}`,
          "aria-describedby": `collapse-content-${vue.unref(id)}`
        }, [
          vue.createElementVNode("div", {
            id: `collapse-head-${vue.unref(id)}`,
            class: vue.normalizeClass(["item-header", {
              "focusing": vue.unref(focusing) && !_ctx.disabled
            }]),
            role: "button",
            tabindex: _ctx.disabled ? -1 : 0,
            onClick: vue.unref(handleHeaderClick),
            onKeydown: vue.withKeys(vue.withModifiers(vue.unref(handleEnterClick), ["self", "stop", "prevent"]), ["space", "enter"]),
            onFocus: vue.unref(handleFocus),
            onBlur: ($event) => focusing.value = false
          }, [
            vue.renderSlot(_ctx.$slots, "title", {}, () => [
              vue.createElementVNode("div", { class: "item-title" }, vue.toDisplayString(_ctx.title), 1)
            ]),
            vue.createVNode(vue.unref(index$1.HlIcon), { class: "item-arrow" }, {
              default: vue.withCtx(() => [
                vue.createVNode(vue.unref(arrowDown["default"]))
              ]),
              _: 1
            })
          ], 42, ["id", "tabindex", "onClick", "onKeydown", "onFocus", "onBlur"])
        ], 8, ["aria-expanded", "aria-controls", "aria-describedby"]),
        vue.createVNode(vue.unref(index$2.HlCollapseTransition), null, {
          default: vue.withCtx(() => [
            vue.withDirectives(vue.createElementVNode("div", {
              id: `collapse-content-${vue.unref(id)}`,
              class: "item-wrap",
              role: "tabpanel",
              "aria-hidden": !vue.unref(isActive),
              "aria-labelledby": `collapse-head-${vue.unref(id)}`
            }, [
              vue.createElementVNode("div", { class: "item-content" }, [
                vue.renderSlot(_ctx.$slots, "default")
              ])
            ], 8, ["id", "aria-hidden", "aria-labelledby"]), [
              [vue.vShow, vue.unref(isActive)]
            ])
          ]),
          _: 3
        })
      ], 2);
    };
  }
});

exports["default"] = _sfc_main;
//# sourceMappingURL=collapse-item.js.map