various-ui
Version:
This is a test version of the Vue 3 component library
114 lines (111 loc) • 4.06 kB
JavaScript
import { defineComponent, onMounted, onBeforeUnmount, openBlock, createBlock, Transition, mergeProps, toHandlers, unref, withCtx, withDirectives, createElementVNode, withModifiers, normalizeStyle, createCommentVNode, createElementBlock, createVNode, renderSlot, vShow } from 'vue';
import { UiIcon } from '../../icon/index.mjs';
import '../../../utils/index.mjs';
import { UiModalSidePropsOption, UiModalSideEmits } from './index.mjs';
import { useComposable } from './src/composable.mjs';
import { append, remove } from '../../../utils/src/node/index.mjs';
const __default__ = defineComponent({ name: "UiModalSide" });
var _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: UiModalSidePropsOption,
emits: UiModalSideEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const emits = __emit;
const define = __props;
const { ons, refs, nodes, binds, methods } = useComposable(define, emits);
const { open } = refs;
const { main, container } = nodes;
const { openModal, closeModal, scrollTo } = methods;
onMounted(() => {
if (main.value) {
append(document.body, main.value);
}
});
onBeforeUnmount(() => {
document.body.style.overflow = "";
if (main.value) {
remove(document.body, main.value);
}
});
;
__expose({ openModal, closeModal, scrollTo });
return (_ctx, _cache) => {
return openBlock(), createBlock(
Transition,
mergeProps(toHandlers(unref(ons).animation), { persisted: "" }),
{
default: withCtx(() => [
withDirectives(createElementVNode(
"div",
{
class: "ui-modal-aside ui-mask",
ref_key: "main",
ref: main,
onClick: _cache[0] || (_cache[0] = withModifiers(
//@ts-ignore
(...args) => unref(closeModal) && unref(closeModal)(...args),
["self"]
)),
style: normalizeStyle({ zIndex: _ctx.zIndex })
},
[
createElementVNode(
"div",
mergeProps({
class: "ui-modal-container",
ref_key: "container",
ref: container
}, unref(binds).container),
[
createCommentVNode(" * \u5173\u95ED\u6309\u94AE "),
_ctx.close ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: "ui-modal-close",
style: normalizeStyle({ "font-size": _ctx.closeSize + "px" })
},
[
createVNode(unref(UiIcon), {
name: _ctx.closeIcon,
onClick: unref(closeModal)
}, null, 8, ["name", "onClick"])
],
4
/* STYLE */
)) : createCommentVNode("v-if", true),
createCommentVNode(" * \u5185\u5BB9 "),
createElementVNode(
"div",
mergeProps({
class: "ui-modal-content",
ref: "content"
}, unref(binds).content),
[
renderSlot(_ctx.$slots, "default")
],
16
/* FULL_PROPS */
)
],
16
/* FULL_PROPS */
)
],
4
/* STYLE */
), [
[vShow, unref(open)]
])
]),
_: 3
/* FORWARDED */
},
16
/* FULL_PROPS */
);
};
}
});
export { _sfc_main as default };
//# sourceMappingURL=index.vue2.mjs.map