hongluan-ui
Version:
Hongluan Component Library for Vue 3
222 lines (219 loc) • 7.95 kB
JavaScript
import { defineComponent, ref, computed, provide, resolveComponent, openBlock, createBlock, withCtx, createVNode, Transition, withDirectives, vShow, createElementVNode, normalizeClass, normalizeStyle, mergeProps, createSlots, renderSlot, createCommentVNode } from 'vue';
import { HlOverlay } from '../../overlay/index.mjs';
import '../../panel/index.mjs';
import '../../../tokens/index.mjs';
import '../../focus-trap/index.mjs';
import { HlTeleport } from '../../teleport/index.mjs';
import '../../../hooks/index.mjs';
import { dialogProps, dialogEmits } from './dialog.mjs';
import { useDialog } from './use-dialog.mjs';
import DialogContent from './dialog-content.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import HlFocusTrap from '../../focus-trap/src/focus-trap.mjs';
import { useDeprecated } from '../../../hooks/use-deprecated/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { usePanelProps } from '../../panel/src/panel2.mjs';
import { dialogInjectionKey } from '../../../tokens/dialog.mjs';
import { useSameTarget } from '../../../hooks/use-same-target/index.mjs';
const _sfc_main = defineComponent({
name: "Dialog",
components: {
HlOverlay,
DialogContent,
FocusTrap: HlFocusTrap,
HlTeleport
},
inheritAttrs: false,
props: dialogProps,
emits: dialogEmits,
setup(props) {
const dialogRef = ref();
const headerRef = ref();
const dialogContentRef = ref();
useDeprecated({
scope: "hl-dialog",
from: "custom-class",
replacement: "class",
version: "2.5.0",
ref: "https://element-plus.org/en-US/component/dialog.html#attributes",
type: "Attribute"
}, computed(() => !!props.customClass));
const { namespace } = useNamespace();
const {
titleId,
bodyId,
afterEnter,
afterLeave,
beforeLeave,
handleClose,
onModalClick,
onOpenAutoFocus,
onCloseAutoFocus,
onCloseRequested,
onFocusoutPrevented,
close,
rendered,
animName,
visible,
zIndex
} = useDialog(props, dialogRef);
const {
panelStyle,
panelClass,
headerClass: panelHeaderClass,
bodyClass: panelBodyClass,
footerClass: panelFooterClass
} = usePanelProps(props);
provide(dialogInjectionKey, {
dialogRef,
headerRef,
bodyId,
handleClose,
onModalClick,
visible,
zIndex,
panelStyle,
panelClass,
panelHeaderClass,
panelBodyClass,
panelFooterClass
});
const overlayEvent = useSameTarget(onModalClick);
return {
namespace,
titleId,
bodyId,
dialogContentRef,
onOpenAutoFocus,
onCloseAutoFocus,
onCloseRequested,
onFocusoutPrevented,
afterEnter,
afterLeave,
beforeLeave,
onModalClick,
overlayEvent,
handleClose,
close,
rendered,
animName,
visible,
zIndex
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hl_overlay = resolveComponent("hl-overlay");
const _component_dialog_content = resolveComponent("dialog-content");
const _component_focus_trap = resolveComponent("focus-trap");
const _component_hl_teleport = resolveComponent("hl-teleport");
return openBlock(), createBlock(_component_hl_teleport, {
to: _ctx.appendTo,
disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
}, {
default: withCtx(() => [
createVNode(Transition, { name: "fade" }, {
default: withCtx(() => [
withDirectives(createVNode(_component_hl_overlay, {
mask: _ctx.modal,
"overlay-class": _ctx.modalClass,
"z-index": _ctx.zIndex,
onClick: _ctx.overlayEvent.onClick,
onMousedown: _ctx.overlayEvent.onMousedown,
onMouseup: _ctx.overlayEvent.onMouseup
}, null, 8, ["mask", "overlay-class", "z-index", "onClick", "onMousedown", "onMouseup"]), [
[vShow, _ctx.visible]
])
]),
_: 1
}),
createVNode(Transition, {
name: _ctx.animName,
onAfterEnter: _ctx.afterEnter,
onAfterLeave: _ctx.afterLeave,
onBeforeLeave: _ctx.beforeLeave
}, {
default: withCtx(() => [
withDirectives(createElementVNode("div", {
role: _ctx.showAs,
"aria-modal": "true",
"aria-label": _ctx.title || void 0,
"aria-labelledby": !_ctx.title ? _ctx.titleId : void 0,
"aria-describedby": _ctx.bodyId,
class: normalizeClass([_ctx.namespace + "-dialog", "at-" + _ctx.placement]),
style: normalizeStyle({
zIndex: _ctx.zIndex + 1
}),
onClick: _ctx.overlayEvent.onClick,
onMousedown: _ctx.overlayEvent.onMousedown,
onMouseup: _ctx.overlayEvent.onMouseup
}, [
createVNode(_component_focus_trap, {
loop: "",
trapped: _ctx.visible,
"focus-start-el": "container",
onFocusAfterTrapped: _ctx.onOpenAutoFocus,
onFocusAfterReleased: _ctx.onCloseAutoFocus,
onFocusoutPrevented: _ctx.onFocusoutPrevented,
onReleaseRequested: _ctx.onCloseRequested
}, {
default: withCtx(() => [
_ctx.rendered ? (openBlock(), createBlock(_component_dialog_content, mergeProps({
key: 0,
ref: "dialogContentRef",
"show-as": _ctx.showAs,
"show-close": _ctx.showClose,
"custom-class": _ctx.customClass,
placement: _ctx.placement,
top: _ctx.top,
title: _ctx.title,
height: _ctx.height,
width: _ctx.width,
draggable: _ctx.draggable,
resizable: _ctx.resizable,
"aria-level": _ctx.headerAriaLevel
}, _ctx.$attrs), createSlots({
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 2
}, [
_ctx.$slots.header ? {
name: "header",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "header", {
close: _ctx.handleClose,
titleId: _ctx.titleId,
titleClass: "panel-title"
})
])
} : void 0,
_ctx.$slots.title ? {
name: "title",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "title")
])
} : void 0,
_ctx.$slots.footer ? {
name: "footer",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "footer")
])
} : void 0
]), 1040, ["show-as", "show-close", "custom-class", "placement", "top", "title", "height", "width", "draggable", "resizable", "aria-level"])) : createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
], 46, ["role", "aria-label", "aria-labelledby", "aria-describedby", "onClick", "onMousedown", "onMouseup"]), [
[vShow, _ctx.visible]
])
]),
_: 3
}, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
]),
_: 3
}, 8, ["to", "disabled"]);
}
var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { Dialog as default };
//# sourceMappingURL=dialog2.mjs.map