collapse-item2.mjs 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  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. itemWrapperKls,
  28. itemContentKls,
  29. scopedContentId,
  30. scopedHeadId
  31. } = useCollapseItemDOM(props, { focusing, isActive, id });
  32. expose({
  33. isActive
  34. });
  35. return (_ctx, _cache) => {
  36. return openBlock(), createElementBlock("div", {
  37. class: normalizeClass(unref(rootKls))
  38. }, [
  39. createElementVNode("button", {
  40. id: unref(scopedHeadId),
  41. class: normalizeClass(unref(headKls)),
  42. "aria-expanded": unref(isActive),
  43. "aria-controls": unref(scopedContentId),
  44. "aria-describedby": unref(scopedContentId),
  45. tabindex: _ctx.disabled ? -1 : 0,
  46. type: "button",
  47. onClick: unref(handleHeaderClick),
  48. onKeydown: withKeys(withModifiers(unref(handleEnterClick), ["stop", "prevent"]), ["space", "enter"]),
  49. onFocus: unref(handleFocus),
  50. onBlur: ($event) => focusing.value = false
  51. }, [
  52. renderSlot(_ctx.$slots, "title", {}, () => [
  53. createTextVNode(toDisplayString(_ctx.title), 1)
  54. ]),
  55. renderSlot(_ctx.$slots, "icon", { isActive: unref(isActive) }, () => [
  56. createVNode(unref(ElIcon), {
  57. class: normalizeClass(unref(arrowKls))
  58. }, {
  59. default: withCtx(() => [
  60. (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
  61. ]),
  62. _: 1
  63. }, 8, ["class"])
  64. ])
  65. ], 42, ["id", "aria-expanded", "aria-controls", "aria-describedby", "tabindex", "onClick", "onKeydown", "onFocus", "onBlur"]),
  66. createVNode(unref(ElCollapseTransition), null, {
  67. default: withCtx(() => [
  68. withDirectives(createElementVNode("div", {
  69. id: unref(scopedContentId),
  70. role: "region",
  71. class: normalizeClass(unref(itemWrapperKls)),
  72. "aria-hidden": !unref(isActive),
  73. "aria-labelledby": unref(scopedHeadId)
  74. }, [
  75. createElementVNode("div", {
  76. class: normalizeClass(unref(itemContentKls))
  77. }, [
  78. renderSlot(_ctx.$slots, "default")
  79. ], 2)
  80. ], 10, ["id", "aria-hidden", "aria-labelledby"]), [
  81. [vShow, unref(isActive)]
  82. ])
  83. ]),
  84. _: 3
  85. })
  86. ], 2);
  87. };
  88. }
  89. });
  90. var CollapseItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "collapse-item.vue"]]);
  91. export { CollapseItem as default };
  92. //# sourceMappingURL=collapse-item2.mjs.map