various-ui/es/components/modal/default/index.vue2.mjs

This is a test version of the Vue 3 component library

import { defineComponent, onMounted, onBeforeUnmount, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, mergeProps, unref, withModifiers, normalizeStyle, createCommentVNode, createElementBlock, renderSlot, createTextVNode, toDisplayString, createVNode, vShow } from 'vue';
import '../../../utils/index.mjs';
import { useComposable } from './src/composable.mjs';
import { UiModalPropsOption, UiModalEmits } from './index.mjs';
import { UiIcon } from '../../icon/index.mjs';
import { append, remove } from '../../../utils/src/node/index.mjs';

const _hoisted_1 = {
  key: 0,
  class: "ui-modal-header"
};
const _hoisted_2 = {
  key: 1,
  class: "ui-modal-close"
};
const _hoisted_3 = {
  class: "ui-modal-content",
  ref: "content"
};
const __default__ = defineComponent({ name: "UiModal" });
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: UiModalPropsOption,
  emits: UiModalEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const define = __props;
    const emits = __emit;
    const { refs, binds, methods, computeds } = useComposable(define, emits);
    const { containerStyle } = computeds;
    const { scrollTo, openModal, closeModal } = methods;
    const { open, main, container } = refs;
    onMounted(() => {
      refs.observer.value = new ResizeObserver(methods.resizeHandler);
      if (refs.main.value) {
        append(document.body, refs.main.value);
      }
    });
    onBeforeUnmount(() => {
      var _a;
      document.body.style.overflow = "";
      (_a = refs.observer.value) == null ? void 0 : _a.disconnect();
      if (refs.main.value) {
        remove(document.body, refs.main.value);
      }
    });
    ;
    __expose({ scrollTo, openModal, closeModal });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Transition, { persisted: "" }, {
        default: withCtx(() => [
          withDirectives(createElementVNode(
            "div",
            mergeProps({
              class: "ui-modal ui-mask",
              ref_key: "main",
              ref: main
            }, unref(binds).main, {
              onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.closeOnClick && unref(closeModal)(), ["self"]))
            }),
            [
              createElementVNode(
                "div",
                {
                  class: "ui-modal-container",
                  ref_key: "container",
                  ref: container,
                  style: normalizeStyle(unref(containerStyle))
                },
                [
                  createCommentVNode(" \u5934\u90E8\u4FE1\u606F "),
                  _ctx.title || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1, [
                    renderSlot(_ctx.$slots, "header", {}, () => [
                      createTextVNode(
                        toDisplayString(_ctx.title),
                        1
                        /* TEXT */
                      )
                    ])
                  ])) : createCommentVNode("v-if", true),
                  createCommentVNode(" \u5173\u95ED\u6309\u94AE "),
                  _ctx.close ? (openBlock(), createElementBlock("div", _hoisted_2, [
                    createVNode(unref(UiIcon), {
                      name: "close",
                      onClick: unref(closeModal)
                    }, null, 8, ["onClick"])
                  ])) : createCommentVNode("v-if", true),
                  createCommentVNode(" \u5185\u5BB9 "),
                  createElementVNode(
                    "div",
                    _hoisted_3,
                    [
                      renderSlot(_ctx.$slots, "default")
                    ],
                    512
                    /* NEED_PATCH */
                  )
                ],
                4
                /* STYLE */
              )
            ],
            16
            /* FULL_PROPS */
          ), [
            [vShow, unref(open)]
          ])
        ]),
        _: 3
        /* FORWARDED */
      });
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=index.vue2.mjs.map