@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
93 lines (90 loc) • 2.89 kB
JavaScript
import { defineComponent, ref, watch, nextTick, onMounted, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createVNode, withCtx, withDirectives, vShow } from 'vue';
import _CollapseTransition from '../../collapse-transition/index.mjs';
import '../../../hooks/index.mjs';
import { sidebarGroupProps } from './sidebar-group.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
const __default__ = defineComponent({
name: "VsSidebarGroup"
});
const _sfc_main = defineComponent({
...__default__,
props: sidebarGroupProps,
setup(__props) {
const props = __props;
const ns = useNamespace("sidebar-group");
const groupRef = ref();
const contentRef = ref();
const openState = ref(false);
const onClickHeader = () => {
openState.value = !openState.value;
};
watch(
() => props.open,
(val) => {
nextTick(() => {
if (!contentRef.value)
return;
const h = contentRef.value.scrollHeight || 0;
const content = contentRef.value;
if (val) {
content.style.height = `${content.scrollHeight + h - 1}px`;
} else {
content.style.height = `${content.scrollHeight - h + 1}px`;
}
});
}
);
onMounted(() => {
if (props.open) {
openState.value = true;
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(
"div",
{
ref_key: "groupRef",
ref: groupRef,
class: normalizeClass([unref(ns).b(), unref(ns).is("open", openState.value)])
},
[
createElementVNode(
"div",
{
class: normalizeClass(unref(ns).e("header")),
onClick: onClickHeader
},
[
renderSlot(_ctx.$slots, "header")
],
2
),
createVNode(unref(_CollapseTransition), null, {
default: withCtx(() => [
withDirectives(createElementVNode(
"div",
{
ref_key: "contentRef",
ref: contentRef,
class: normalizeClass(unref(ns).e("content"))
},
[
renderSlot(_ctx.$slots, "default")
],
2
), [
[vShow, openState.value]
])
]),
_: 3
})
],
2
);
};
}
});
var SidebarGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/sidebar/src/sidebar-group.vue"]]);
export { SidebarGroup as default };
//# sourceMappingURL=sidebar-group2.mjs.map