@wfrog/vc/dist/es/components/dialog/dialog.mjs

vue3 组件库 vc

import './index.css'
import { u as useNamespace } from '../../chunk/E_WRn0OP.mjs';
import { b as dialogContentEmits, c as dialogContentProps, e as dialogInjectionKey, d as dialogEmits, a as dialogProps, u as useDialog, E as ElOverlay, f as useSameTarget } from '../../chunk/B7POrE6v.mjs';
import { E as ElScrollbar } from '../../chunk/CJQcPuNK.mjs';
import { E as ElButton } from '../../chunk/BT7IBuxS.mjs';
import { ref, onMounted, watchEffect, onBeforeUnmount, defineComponent, inject, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createCommentVNode, renderSlot, toDisplayString, createVNode, withCtx, createBlock, resolveDynamicComponent, useSlots, provide, Transition, mergeProps, withDirectives, createSlots, vShow, useCssVars, useCssModule, watch, isRef, createTextVNode } from 'vue';
import { CopyDocument, FullScreen, Close } from '@element-plus/icons-vue';
import { C as Component$1 } from '../button/button.mjs';
import { u as useVModel } from '../../chunk/eQT9aAiW.mjs';
import { F as FOCUS_TRAP_INJECTION_KEY, b as ElTeleport, d as ElFocusTrap } from '../../chunk/DUd8IaU9.mjs';
import { E as ElIcon } from '../../chunk/m2vp1CCf.mjs';
import { _ as _export_sfc, w as withInstall } from '../../chunk/D389hx_T.mjs';
import { a as addUnit } from '../../chunk/CD1S5tP1.mjs';
import { C as CloseComponents } from '../icon/icon2.mjs';
import { u as useLocale } from '../../chunk/-m34CPRn.mjs';
import { u as useDeprecated } from '../../chunk/VAdRxe-1.mjs';
import { u as useToggle } from '../../chunk/GvCnndsC.mjs';
import { _ as _export_sfc$1 } from '../../chunk/pcqpp-6-.mjs';

const useDraggable = (targetRef, dragRef, draggable, overflow) => {
  const transform = {
    offsetX: 0,
    offsetY: 0
  };
  const isDragging = ref(false);
  const adjustPosition = (moveX, moveY) => {
    if (targetRef.value) {
      const { offsetX, offsetY } = transform;
      const targetRect = targetRef.value.getBoundingClientRect();
      const targetLeft = targetRect.left;
      const targetTop = targetRect.top;
      const targetWidth = targetRect.width;
      const targetHeight = targetRect.height;
      const clientWidth = document.documentElement.clientWidth;
      const clientHeight = document.documentElement.clientHeight;
      const minLeft = -targetLeft + offsetX;
      const minTop = -targetTop + offsetY;
      const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
      const maxTop = clientHeight - targetTop - (targetHeight < clientHeight ? targetHeight : 0) + offsetY;
      if (!(overflow == null ? void 0 : overflow.value)) {
        moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
        moveY = Math.min(Math.max(moveY, minTop), maxTop);
      }
      transform.offsetX = moveX;
      transform.offsetY = moveY;
      targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`;
    }
  };
  const onMousedown = (e) => {
    const downX = e.clientX;
    const downY = e.clientY;
    const { offsetX, offsetY } = transform;
    const onMousemove = (e2) => {
      if (!isDragging.value) {
        isDragging.value = true;
      }
      const moveX = offsetX + e2.clientX - downX;
      const moveY = offsetY + e2.clientY - downY;
      adjustPosition(moveX, moveY);
    };
    const onMouseup = () => {
      isDragging.value = false;
      document.removeEventListener("mousemove", onMousemove);
      document.removeEventListener("mouseup", onMouseup);
    };
    document.addEventListener("mousemove", onMousemove);
    document.addEventListener("mouseup", onMouseup);
  };
  const onDraggable = () => {
    if (dragRef.value && targetRef.value) {
      dragRef.value.addEventListener("mousedown", onMousedown);
      window.addEventListener("resize", updatePosition);
    }
  };
  const offDraggable = () => {
    if (dragRef.value && targetRef.value) {
      dragRef.value.removeEventListener("mousedown", onMousedown);
      window.removeEventListener("resize", updatePosition);
    }
  };
  const resetPosition = () => {
    transform.offsetX = 0;
    transform.offsetY = 0;
    if (targetRef.value) {
      targetRef.value.style.transform = "";
    }
  };
  const updatePosition = () => {
    const { offsetX, offsetY } = transform;
    adjustPosition(offsetX, offsetY);
  };
  onMounted(() => {
    watchEffect(() => {
      if (draggable.value) {
        onDraggable();
      } else {
        offDraggable();
      }
    });
  });
  onBeforeUnmount(() => {
    offDraggable();
  });
  return {
    isDragging,
    resetPosition,
    updatePosition
  };
};

const composeRefs = (...refs) => {
  return (el) => {
    refs.forEach((ref) => {
      ref.value = el;
    });
  };
};

const __default__$1 = defineComponent({ name: "ElDialogContent" });
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  ...__default__$1,
  props: dialogContentProps,
  emits: dialogContentEmits,
  setup(__props, { expose }) {
    const props = __props;
    const { t } = useLocale();
    const { Close } = CloseComponents;
    const { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey);
    const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY);
    const composedDialogRef = composeRefs(focusTrapRef, dialogRef);
    const draggable = computed(() => !!props.draggable);
    const overflow = computed(() => !!props.overflow);
    const { resetPosition, updatePosition, isDragging } = useDraggable(dialogRef, headerRef, draggable, overflow);
    const dialogKls = computed(() => [
      ns.b(),
      ns.is("fullscreen", props.fullscreen),
      ns.is("draggable", draggable.value),
      ns.is("dragging", isDragging.value),
      ns.is("align-center", !!props.alignCenter),
      { [ns.m("center")]: props.center }
    ]);
    expose({
      resetPosition,
      updatePosition
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref: unref(composedDialogRef),
        class: normalizeClass(unref(dialogKls)),
        style: normalizeStyle(unref(style)),
        tabindex: "-1"
      }, [
        createElementVNode("header", {
          ref_key: "headerRef",
          ref: headerRef,
          class: normalizeClass([unref(ns).e("header"), _ctx.headerClass, { "show-close": _ctx.showClose }])
        }, [
          renderSlot(_ctx.$slots, "header", {}, () => [
            createElementVNode("span", {
              role: "heading",
              "aria-level": _ctx.ariaLevel,
              class: normalizeClass(unref(ns).e("title"))
            }, toDisplayString(_ctx.title), 11, ["aria-level"])
          ]),
          _ctx.showClose ? (openBlock(), createElementBlock("button", {
            key: 0,
            "aria-label": unref(t)("el.dialog.close"),
            class: normalizeClass(unref(ns).e("headerbtn")),
            type: "button",
            onClick: ($event) => _ctx.$emit("close")
          }, [
            createVNode(unref(ElIcon), {
              class: normalizeClass(unref(ns).e("close"))
            }, {
              default: withCtx(() => [
                (openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIcon || unref(Close))))
              ]),
              _: 1
            }, 8, ["class"])
          ], 10, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
        ], 2),
        createElementVNode("div", {
          id: unref(bodyId),
          class: normalizeClass([unref(ns).e("body"), _ctx.bodyClass])
        }, [
          renderSlot(_ctx.$slots, "default")
        ], 10, ["id"]),
        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", {
          key: 0,
          class: normalizeClass([unref(ns).e("footer"), _ctx.footerClass])
        }, [
          renderSlot(_ctx.$slots, "footer")
        ], 2)) : createCommentVNode("v-if", true)
      ], 6);
    };
  }
});
var ElDialogContent = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "dialog-content.vue"]]);

const __default__ = defineComponent({
  name: "ElDialog",
  inheritAttrs: false
});
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: dialogProps,
  emits: dialogEmits,
  setup(__props, { expose }) {
    const props = __props;
    const slots = useSlots();
    useDeprecated({
      scope: "el-dialog",
      from: "the title slot",
      replacement: "the header slot",
      version: "3.0.0",
      ref: "https://element-plus.org/en-US/component/dialog.html#slots"
    }, computed(() => !!slots.title));
    const ns = useNamespace("dialog");
    const dialogRef = ref();
    const headerRef = ref();
    const dialogContentRef = ref();
    const {
      visible,
      titleId,
      bodyId,
      style,
      overlayDialogStyle,
      rendered,
      transitionConfig,
      zIndex,
      _draggable,
      _alignCenter,
      _overflow,
      handleClose,
      onModalClick,
      onOpenAutoFocus,
      onCloseAutoFocus,
      onCloseRequested,
      onFocusoutPrevented
    } = useDialog(props, dialogRef);
    provide(dialogInjectionKey, {
      dialogRef,
      headerRef,
      bodyId,
      ns,
      rendered,
      style
    });
    const overlayEvent = useSameTarget(onModalClick);
    const penetrable = computed(() => props.modalPenetrable && !props.modal && !props.fullscreen);
    const resetPosition = () => {
      var _a;
      (_a = dialogContentRef.value) == null ? void 0 : _a.resetPosition();
    };
    expose({
      visible,
      dialogContentRef,
      resetPosition,
      handleClose
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(ElTeleport), {
        to: _ctx.appendTo,
        disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
      }, {
        default: withCtx(() => [
          createVNode(Transition, mergeProps(unref(transitionConfig), { persisted: "" }), {
            default: withCtx(() => {
              var _a;
              return [
                withDirectives(createVNode(unref(ElOverlay), {
                  "custom-mask-event": "",
                  mask: _ctx.modal,
                  "overlay-class": [
                    (_a = _ctx.modalClass) != null ? _a : "",
                    `${unref(ns).namespace.value}-modal-dialog`,
                    unref(ns).is("penetrable", unref(penetrable))
                  ],
                  "z-index": unref(zIndex)
                }, {
                  default: withCtx(() => [
                    createElementVNode("div", {
                      role: "dialog",
                      "aria-modal": "true",
                      "aria-label": _ctx.title || void 0,
                      "aria-labelledby": !_ctx.title ? unref(titleId) : void 0,
                      "aria-describedby": unref(bodyId),
                      class: normalizeClass(`${unref(ns).namespace.value}-overlay-dialog`),
                      style: normalizeStyle(unref(overlayDialogStyle)),
                      onClick: unref(overlayEvent).onClick,
                      onMousedown: unref(overlayEvent).onMousedown,
                      onMouseup: unref(overlayEvent).onMouseup
                    }, [
                      createVNode(unref(ElFocusTrap), {
                        loop: "",
                        trapped: unref(visible),
                        "focus-start-el": "container",
                        onFocusAfterTrapped: unref(onOpenAutoFocus),
                        onFocusAfterReleased: unref(onCloseAutoFocus),
                        onFocusoutPrevented: unref(onFocusoutPrevented),
                        onReleaseRequested: unref(onCloseRequested)
                      }, {
                        default: withCtx(() => [
                          unref(rendered) ? (openBlock(), createBlock(ElDialogContent, mergeProps({
                            key: 0,
                            ref_key: "dialogContentRef",
                            ref: dialogContentRef
                          }, _ctx.$attrs, {
                            center: _ctx.center,
                            "align-center": unref(_alignCenter),
                            "close-icon": _ctx.closeIcon,
                            draggable: unref(_draggable),
                            overflow: unref(_overflow),
                            fullscreen: _ctx.fullscreen,
                            "header-class": _ctx.headerClass,
                            "body-class": _ctx.bodyClass,
                            "footer-class": _ctx.footerClass,
                            "show-close": _ctx.showClose,
                            title: _ctx.title,
                            "aria-level": _ctx.headerAriaLevel,
                            onClose: unref(handleClose)
                          }), createSlots({
                            header: withCtx(() => [
                              !_ctx.$slots.title ? renderSlot(_ctx.$slots, "header", {
                                key: 0,
                                close: unref(handleClose),
                                titleId: unref(titleId),
                                titleClass: unref(ns).e("title")
                              }) : renderSlot(_ctx.$slots, "title", { key: 1 })
                            ]),
                            default: withCtx(() => [
                              renderSlot(_ctx.$slots, "default")
                            ]),
                            _: 2
                          }, [
                            _ctx.$slots.footer ? {
                              name: "footer",
                              fn: withCtx(() => [
                                renderSlot(_ctx.$slots, "footer")
                              ])
                            } : void 0
                          ]), 1040, ["center", "align-center", "close-icon", "draggable", "overflow", "fullscreen", "header-class", "body-class", "footer-class", "show-close", "title", "aria-level", "onClose"])) : createCommentVNode("v-if", true)
                        ]),
                        _: 3
                      }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
                    ], 46, ["aria-label", "aria-labelledby", "aria-describedby", "onClick", "onMousedown", "onMouseup"])
                  ]),
                  _: 3
                }, 8, ["mask", "overlay-class", "z-index"]), [
                  [vShow, unref(visible)]
                ])
              ];
            }),
            _: 3
          }, 16)
        ]),
        _: 3
      }, 8, ["to", "disabled"]);
    };
  }
});
var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "dialog.vue"]]);

const ElDialog = withInstall(Dialog);

const _hoisted_1 = ["id"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "dialog",
  props: {
    modelValue: { type: Boolean },
    title: { default: "对话框" },
    showFullscreen: { type: Boolean, default: true },
    showDefaultFooter: { type: Boolean, default: false },
    lazy: { type: Boolean, default: true },
    height: {},
    maxHeight: {},
    fullscreenHeight: { default: "calc(100vh - 146px)" },
    flex: { type: Boolean, default: false },
    fullscreen: { type: Boolean, default: false },
    boxPadding: { type: Boolean, default: true }
  },
  emits: ["update:modelValue", "closed"],
  setup(__props, { emit: __emit }) {
    useCssVars((_ctx) => ({
      "v5830f752": _ctx.boxPadding ? "block" : "none"
    }));
    const props = __props;
    const emits = __emit;
    const $style = useCssModule();
    const dialogVisible = useVModel(props, "modelValue", emits);
    const visible = ref(false);
    const isFullscreen = ref(false);
    const toggleFullscreen = useToggle(isFullscreen);
    const Icon = computed(() => isFullscreen.value ? CopyDocument : FullScreen);
    const scrollbarClassName = computed(() => ({
      [$style.scrollbar]: true,
      [$style.flex]: props.flex
    }));
    watch(dialogVisible, (val) => {
      if (val) {
        isFullscreen.value = props.fullscreen;
        visible.value = true;
      }
    });
    function handleClosed() {
      visible.value = false;
      emits("closed");
    }
    return (_ctx, _cache) => {
      const _component_ElButton = ElButton;
      const _component_ElScrollbar = ElScrollbar;
      const _component_ElDialog = ElDialog;
      return unref(visible) || !__props.lazy ? (openBlock(), createBlock(_component_ElDialog, mergeProps({
        key: 0,
        modelValue: unref(dialogVisible),
        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(dialogVisible) ? dialogVisible.value = $event : null)
      }, _ctx.$attrs, {
        "align-center": "",
        "show-close": false,
        fullscreen: unref(isFullscreen),
        "close-on-click-modal": false,
        class: unref($style).main,
        onClosed: handleClosed
      }), createSlots({
        header: withCtx(({ close, titleId, titleClass }) => [
          createElementVNode("div", {
            class: normalizeClass(unref($style).header)
          }, [
            createElementVNode("span", {
              id: titleId,
              class: normalizeClass([titleClass, unref($style).title])
            }, [
              renderSlot(_ctx.$slots, "header", { close }, () => [
                createTextVNode(toDisplayString(__props.title), 1)
              ])
            ], 10, _hoisted_1),
            createElementVNode("span", {
              class: normalizeClass(unref($style).buttons)
            }, [
              withDirectives(createVNode(_component_ElButton, {
                icon: unref(Icon),
                plain: "",
                onClick: _cache[0] || (_cache[0] = () => unref(toggleFullscreen)())
              }, null, 8, ["icon"]), [
                [vShow, __props.showFullscreen]
              ]),
              createVNode(_component_ElButton, {
                icon: unref(Close),
                plain: "",
                onClick: close
              }, null, 8, ["icon", "onClick"])
            ], 2)
          ], 2)
        ]),
        default: withCtx(() => [
          !unref(isFullscreen) && (__props.height || __props.maxHeight) ? (openBlock(), createBlock(_component_ElScrollbar, {
            key: 0,
            class: normalizeClass(unref(scrollbarClassName)),
            height: __props.height,
            "max-height": __props.maxHeight,
            always: ""
          }, {
            default: withCtx(() => [
              createElementVNode("div", {
                class: normalizeClass(unref($style)["body-container"])
              }, [
                renderSlot(_ctx.$slots, "default")
              ], 2)
            ]),
            _: 3
          }, 8, ["class", "height", "max-height"])) : (openBlock(), createBlock(_component_ElScrollbar, {
            key: 1,
            class: normalizeClass(unref(scrollbarClassName)),
            "max-height": __props.fullscreenHeight,
            always: ""
          }, {
            default: withCtx(() => [
              createElementVNode("div", {
                class: normalizeClass(unref($style)["body-container"])
              }, [
                renderSlot(_ctx.$slots, "default")
              ], 2)
            ]),
            _: 3
          }, 8, ["class", "max-height"]))
        ]),
        _: 2
      }, [
        __props.showDefaultFooter || _ctx.$slots.footer ? {
          name: "footer",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "footer", {}, () => [
              __props.showDefaultFooter ? (openBlock(), createBlock(Component$1, {
                key: 0,
                onClick: _cache[1] || (_cache[1] = ($event) => dialogVisible.value = false)
              }, {
                default: withCtx(() => [..._cache[3] || (_cache[3] = [
                  createTextVNode("关闭", -1)
                ])]),
                _: 1
              })) : createCommentVNode("", true)
            ])
          ]),
          key: "0"
        } : void 0
      ]), 1040, ["modelValue", "fullscreen", "class"])) : createCommentVNode("", true);
    };
  }
});

/* unplugin-vue-components disabled */const main = "_main_zs7g5_1";
const header = "_header_zs7g5_46";
const title = "_title_zs7g5_65";
const scrollbar = "_scrollbar_zs7g5_70";
const flex = "_flex_zs7g5_78";
const buttons = "_buttons_zs7g5_87";
const style0 = {
	main: main,
	header: header,
	title: title,
	scrollbar: scrollbar,
	flex: flex,
	"body-container": "_body-container_zs7g5_83",
	buttons: buttons
};

const cssModules = {
  "$style": style0
};
const Component = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__cssModules", cssModules]]);

const __vite_glob_0_13 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  __proto__: null,
  default: Component
}, Symbol.toStringTag, { value: 'Module' }));

export { Component as C, __vite_glob_0_13 as _ };