37fd383c19f8f383bcac32345a17de8bf5a6f3387728ff63f0c8286815855d189e15e2ec3735c3a0ed660eae30684ea18dd41cb639a0b1eed3e88e51a7830e 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, withKeys, withModifiers, renderSlot, createTextVNode, toDisplayString, createVNode, withCtx, createBlock, resolveDynamicComponent, withDirectives, vShow } from 'vue';
  2. import { ElCollapseTransition } from '../../collapse-transition/index.mjs';
  3. import { ElIcon } from '../../icon/index.mjs';
  4. import { collapseItemProps } from './collapse-item.mjs';
  5. import { useCollapseItem, useCollapseItemDOM } from './use-collapse-item.mjs';
  6. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  7. const __default__ = defineComponent({
  8. name: "ElCollapseItem"
  9. });
  10. const _sfc_main = /* @__PURE__ */ defineComponent({
  11. ...__default__,
  12. props: collapseItemProps,
  13. setup(__props, { expose }) {
  14. const props = __props;
  15. const {
  16. focusing,
  17. id,
  18. isActive,
  19. handleFocus,
  20. handleHeaderClick,
  21. handleEnterClick
  22. } = useCollapseItem(props);
  23. const {
  24. arrowKls,
  25. headKls,
  26. rootKls,
  27. itemTitleKls,
  28. itemWrapperKls,
  29. itemContentKls,
  30. scopedContentId,
  31. scopedHeadId
  32. } = useCollapseItemDOM(props, { focusing, isActive, id });
  33. expose({
  34. isActive
  35. });
  36. return (_ctx, _cache) => {
  37. return openBlock(), createElementBlock("div", {
  38. class: normalizeClass(unref(rootKls))
  39. }, [
  40. createElementVNode("div", {
  41. id: unref(scopedHeadId),
  42. class: normalizeClass(unref(headKls)),
  43. "aria-expanded": unref(isActive),
  44. "aria-controls": unref(scopedContentId),
  45. "aria-describedby": unref(scopedContentId),
  46. tabindex: _ctx.disabled ? -1 : 0,
  47. role: "button",
  48. onClick: unref(handleHeaderClick),
  49. onKeydown: withKeys(withModifiers(unref(handleEnterClick), ["stop"]), ["space", "enter"]),
  50. onFocus: unref(handleFocus),
  51. onBlur: ($event) => focusing.value = false
  52. }, [
  53. createElementVNode("span", {
  54. class: normalizeClass(unref(itemTitleKls))
  55. }, [
  56. renderSlot(_ctx.$slots, "title", { isActive: unref(isActive) }, () => [
  57. createTextVNode(toDisplayString(_ctx.title), 1)
  58. ])
  59. ], 2),
  60. renderSlot(_ctx.$slots, "icon", { isActive: unref(isActive) }, () => [
  61. createVNode(unref(ElIcon), {
  62. class: normalizeClass(unref(arrowKls))
  63. }, {
  64. default: withCtx(() => [
  65. (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
  66. ]),
  67. _: 1
  68. }, 8, ["class"])
  69. ])
  70. ], 42, ["id", "aria-expanded", "aria-controls", "aria-describedby", "tabindex", "onClick", "onKeydown", "onFocus", "onBlur"]),
  71. createVNode(unref(ElCollapseTransition), null, {
  72. default: withCtx(() => [
  73. withDirectives(createElementVNode("div", {
  74. id: unref(scopedContentId),
  75. role: "region",
  76. class: normalizeClass(unref(itemWrapperKls)),
  77. "aria-hidden": !unref(isActive),
  78. "aria-labelledby": unref(scopedHeadId)
  79. }, [
  80. createElementVNode("div", {
  81. class: normalizeClass(unref(itemContentKls))
  82. }, [
  83. renderSlot(_ctx.$slots, "default")
  84. ], 2)
  85. ], 10, ["id", "aria-hidden", "aria-labelledby"]), [
  86. [vShow, unref(isActive)]
  87. ])
  88. ]),
  89. _: 3
  90. })
  91. ], 2);
  92. };
  93. }
  94. });
  95. var CollapseItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "collapse-item.vue"]]);
  96. export { CollapseItem as default };
  97. //# sourceMappingURL=collapse-item2.mjs.map