hongluan-ui
Version:
Hongluan Component Library for Vue 3
133 lines (130 loc) • 5.2 kB
JavaScript
import { defineComponent, computed, inject, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, Fragment, toDisplayString, createBlock, withCtx, createVNode, createCommentVNode } from 'vue';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import { HlIcon } from '../../icon/index.mjs';
import { HlButton } from '../../button/index.mjs';
import '../../focus-trap/index.mjs';
import '../../system-icon/index.mjs';
import { dialogContentProps } from './dialog-content2.mjs';
import { DialogDragger } from './dragger.mjs';
import { DialogResizer } from './resizer.mjs';
import '../../../utils/index.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import SystemClose from '../../system-icon/src/close.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { dialogInjectionKey } from '../../../tokens/dialog.mjs';
import { FOCUS_TRAP_INJECTION_KEY } from '../../focus-trap/src/tokens.mjs';
import { composeRefs } from '../../../utils/vue/refs.mjs';
const _sfc_main = defineComponent({
name: "DialogContent",
components: {
HlIcon,
HlButton,
SystemClose
},
directives: {
"dragger": DialogDragger,
"resizer": DialogResizer
},
props: dialogContentProps,
setup(props) {
const { namespace } = useNamespace();
const { t } = useLocale();
const canDrag = computed(() => {
return props.showAs === "drawer" || props.placement === "fullscreen" ? false : props.draggable;
});
const canResize = computed(() => {
return props.showAs === "drawer" || props.placement === "fullscreen" ? false : props.resizable;
});
const dialogContext = inject(dialogInjectionKey);
const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY);
const composedDialogRef = composeRefs(focusTrapRef, dialogContext.dialogRef);
return {
t,
namespace,
canDrag,
canResize,
focusTrapRef,
composedDialogRef,
...dialogContext
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_system_close = resolveComponent("system-close");
const _component_hl_icon = resolveComponent("hl-icon");
const _component_hl_button = resolveComponent("hl-button");
const _directive_dragger = resolveDirective("dragger");
const _directive_resizer = resolveDirective("resizer");
return withDirectives((openBlock(), createElementBlock("div", {
ref: _ctx.composedDialogRef,
class: normalizeClass([
_ctx.namespace + "-panel",
_ctx.customClass,
_ctx.panelClass,
_ctx.canDrag ? "is-draggable" : "",
_ctx.canResize ? "is-resizable" : ""
]),
style: normalizeStyle([
{
width: _ctx.width,
height: _ctx.height
},
_ctx.top ? `top: ${_ctx.top}` : "",
_ctx.panelStyle
]),
"show-as": _ctx.showAs,
tabindex: "-1"
}, [
createElementVNode("div", {
class: normalizeClass(["panel-header", _ctx.panelHeaderClass])
}, [
_ctx.$slots.header ? renderSlot(_ctx.$slots, "header", { key: 0 }) : _ctx.title || _ctx.showClose || _ctx.$slots.title ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
renderSlot(_ctx.$slots, "title", {}, () => [
createElementVNode("h4", {
class: "panel-title",
role: "heading",
"aria-level": _ctx.ariaLevel
}, toDisplayString(_ctx.title), 9, ["aria-level"])
]),
createElementVNode("div", { class: "panel-header-right" }, [
_ctx.showClose ? (openBlock(), createBlock(_component_hl_button, {
key: 0,
class: "panel-close",
"aria-label": _ctx.t("hl.dialog.close"),
onClick: _ctx.handleClose
}, {
default: withCtx(() => [
createVNode(_component_hl_icon, null, {
default: withCtx(() => [
createVNode(_component_system_close)
]),
_: 1
})
]),
_: 1
}, 8, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
])
], 64)) : createCommentVNode("v-if", true)
], 2),
createElementVNode("div", {
id: _ctx.bodyId,
class: normalizeClass(["panel-body", _ctx.panelBodyClass])
}, [
renderSlot(_ctx.$slots, "default")
], 10, ["id"]),
_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["panel-footer", _ctx.panelFooterClass])
}, [
renderSlot(_ctx.$slots, "footer")
], 2)) : createCommentVNode("v-if", true)
], 14, ["show-as"])), [
[_directive_dragger, { canDrag: _ctx.canDrag, showAs: _ctx.showAs, placement: _ctx.placement }],
[_directive_resizer, { canResize: _ctx.canResize, showAs: _ctx.showAs, placement: _ctx.placement }]
]);
}
var DialogContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { DialogContent as default };
//# sourceMappingURL=dialog-content.mjs.map