@opensig/opendesign
Version:
162 lines (161 loc) • 6.06 kB
JavaScript
;
const vue = require("vue");
const icons = require("../_utils/icons.js");
const index = require("../layer/index.js");
const index$1 = require("../button/index.js");
require("../scrollbar/index.js");
const types = require("./types.js");
const vueUtils = require("../_utils/vue-utils.js");
require("../_utils/is.js");
require("../hooks/use-theme.js");
const useScreen = require("../hooks/use-screen.js");
require("@vueuse/core");
const vScrollbar = require("../scrollbar/vScrollbar.js");
const _hoisted_1 = {
key: 0,
class: "o-dlg-header"
};
const _hoisted_2 = { class: "o-dlg-body-content" };
const _hoisted_3 = {
key: 1,
class: "o-dlg-footer"
};
const _hoisted_4 = { class: "o-dlg-actions" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "ODialog",
props: types.dialogProps,
emits: ["change", "update:visible"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const { isPhonePad } = useScreen.useScreen();
const layerRef = vue.ref(null);
const onCloseClick = () => {
var _a;
(_a = layerRef.value) == null ? void 0 : _a.toggle(false);
};
const onChange = (visible) => {
emits("change", visible);
};
const onUpdateVisible = (value, e) => {
emits("update:visible", value, e);
};
const scrollbarProps = vue.computed(() => {
if (props.scrollbar === true) {
return {
showType: "hover",
size: "small"
};
}
return props.scrollbar;
});
__expose({
/**
* @zh-CN 切换对话框显示状态
* @en-US Toggle the dialog visibility
*/
toggle(show) {
var _a;
(_a = layerRef.value) == null ? void 0 : _a.toggle(show);
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(index.OLayer), {
ref_key: "layerRef",
ref: layerRef,
class: vue.normalizeClass(["o-dialog", [
`o-dialog-${props.size}`,
{
"o-dialog-responsive": !props.noResponsive,
"o-dialog-phone-half-full": props.phoneHalfFull
}
]]),
visible: props.visible,
wrapper: props.wrapper,
"unmount-on-hide": props.unmountOnHide,
"main-class": vue.unref(vueUtils.mergeClass)("o-dlg-main", props.mainClass),
"main-transition": props.mainTransition,
"mask-transition": props.maskTransition,
mask: props.mask,
"mask-close": props.maskClose,
"before-hide": props.beforeHide,
"before-show": props.beforeShow,
"transition-orign": vue.unref(isPhonePad) ? "css" : "mouse",
onChange,
"onUpdate:visible": onUpdateVisible
}, {
default: vue.withCtx(() => [
_ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.renderSlot(_ctx.$slots, "header")
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-dlg-body", {
"with-footer": _ctx.$slots.footer || props.actions
}])
},
[
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "default")
])), [
[vue.unref(vScrollbar.vScrollbar), scrollbarProps.value]
])
],
2
/* CLASS */
),
_ctx.$slots.footer || _ctx.$slots.actions || props.actions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
vue.renderSlot(_ctx.$slots, "footer", {}, () => [
vue.createElementVNode("div", _hoisted_4, [
vue.renderSlot(_ctx.$slots, "actions", { isPhonePad: vue.unref(isPhonePad) }, () => [
vue.createCommentVNode(" 需要审视透传子组件属性 "),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(props.actions, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$1.OButton), {
key: item.id,
class: "o-dlg-btn",
color: item.color,
variant: !item.variant && vue.unref(isPhonePad) ? "text" : item.variant,
size: item.size,
round: item.round,
icon: item.icon,
loading: item.loading,
disabled: item.disabled,
onClick: item.onClick
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(item.label),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["color", "variant", "size", "round", "icon", "loading", "disabled", "onClick"]);
}),
128
/* KEYED_FRAGMENT */
))
])
])
])
])) : vue.createCommentVNode("v-if", true),
!props.hideClose ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
class: "o-dlg-btn-close",
onClick: onCloseClick
}, [
vue.createVNode(vue.unref(icons.IconClose))
])) : vue.createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 8, ["class", "visible", "wrapper", "unmount-on-hide", "main-class", "main-transition", "mask-transition", "mask", "mask-close", "before-hide", "before-show", "transition-orign"]);
};
}
});
module.exports = _sfc_main;