hongluan-ui
Version:
Hongluan Component Library for Vue 3
89 lines (86 loc) • 3.47 kB
JavaScript
import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, withKeys, withModifiers, renderSlot, toDisplayString, createVNode, withCtx, withDirectives, vShow } from 'vue';
import '../../../hooks/index.mjs';
import { HlCollapseTransition } from '../../collapse-transition/index.mjs';
import { HlIcon } from '../../icon/index.mjs';
import '../../system-icon/index.mjs';
import { collapseItemProps } from './collapse-item2.mjs';
import { useCollapseItem } from './use-collapse-item.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import SystemArrowDown from '../../system-icon/src/arrow-down.mjs';
const __default__ = defineComponent({
name: "CollapseItem"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: collapseItemProps,
setup(__props, { expose }) {
const props = __props;
const {
focusing,
id,
isActive,
handleFocus,
handleHeaderClick,
handleEnterClick
} = useCollapseItem(props);
const { namespace } = useNamespace("collapse-item");
expose({
isActive
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass({ [unref(namespace)]: true, "is-active": unref(isActive), "is-disabled": _ctx.disabled })
}, [
createElementVNode("div", {
role: "tab",
"aria-expanded": unref(isActive),
"aria-controls": `collapse-content-${unref(id)}`,
"aria-describedby": `collapse-content-${unref(id)}`
}, [
createElementVNode("div", {
id: `collapse-head-${unref(id)}`,
class: normalizeClass(["item-header", {
"focusing": unref(focusing) && !_ctx.disabled
}]),
role: "button",
tabindex: _ctx.disabled ? -1 : 0,
onClick: unref(handleHeaderClick),
onKeydown: withKeys(withModifiers(unref(handleEnterClick), ["self", "stop", "prevent"]), ["space", "enter"]),
onFocus: unref(handleFocus),
onBlur: ($event) => focusing.value = false
}, [
renderSlot(_ctx.$slots, "title", {}, () => [
createElementVNode("div", { class: "item-title" }, toDisplayString(_ctx.title), 1)
]),
createVNode(unref(HlIcon), { class: "item-arrow" }, {
default: withCtx(() => [
createVNode(unref(SystemArrowDown))
]),
_: 1
})
], 42, ["id", "tabindex", "onClick", "onKeydown", "onFocus", "onBlur"])
], 8, ["aria-expanded", "aria-controls", "aria-describedby"]),
createVNode(unref(HlCollapseTransition), null, {
default: withCtx(() => [
withDirectives(createElementVNode("div", {
id: `collapse-content-${unref(id)}`,
class: "item-wrap",
role: "tabpanel",
"aria-hidden": !unref(isActive),
"aria-labelledby": `collapse-head-${unref(id)}`
}, [
createElementVNode("div", { class: "item-content" }, [
renderSlot(_ctx.$slots, "default")
])
], 8, ["id", "aria-hidden", "aria-labelledby"]), [
[vShow, unref(isActive)]
])
]),
_: 3
})
], 2);
};
}
});
export { _sfc_main as default };
//# sourceMappingURL=collapse-item.mjs.map