ele-admin-plus 1.2.1-beta.1 → 1.2.1-beta.3

package/es/ele-modal/index.js

@@ -1,9 +1,9 @@
-import { defineComponent, ref, computed, watch, onMounted, onActivated, onDeactivated, nextTick, unref, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, withModifiers, createCommentVNode, resolveDynamicComponent, normalizeClass } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, onActivated, onDeactivated, nextTick, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, withModifiers, createCommentVNode, resolveDynamicComponent, normalizeClass } from "vue";
 import { ElDialog, ElIcon } from "element-plus";
 import { CloseOutlined, CompressOutlined, ExpandOutlined, ResizeOutlined } from "../icons";
 import ReceiverView from "../ele-config-provider/components/receiver-view";
 import { useLayoutState, useResponsive } from "../ele-pro-layout/util";
-import { getModalContainer, wrapperClass, closedClass, getPositionMargin, handleMove, handleResize, topModal, resetModalStyle } from "./util";
+import { getModalContainer, useModalEvent, wrapperClass, closedClass } from "./util";
 import { modalProps, modalEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleModal",
@@ -20,7 +20,6 @@ const _sfc_main = defineComponent({
   props: modalProps,
   emits: modalEmits,
   setup(props, { emit }) {
-    const state = { isInit: true };
     const layoutState = useLayoutState();
     const isResponsive = useResponsive(props);
     const dialogRef = ref(null);
@@ -89,97 +88,56 @@ const _sfc_main = defineComponent({
       const disabled = appendTo === "body" ? !props.appendToBody : false;
       return props.multiple || props.inner ? false : disabled;
     });
-    const getModalEl = () => {
-      var _a, _b;
-      return (_b = unref((_a = unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
-    };
-    const getZIndex = () => {
-      return props.zIndex ?? 2e3;
-    };
-    const getPosition = () => {
-      if (props.alignCenter) {
-        return "center";
-      }
-      if (props.top != null && props.top !== "") {
-        return { top: props.top };
-      }
-      return props.position;
-    };
-    const setInitPosition = () => {
-      if (state.isInit) {
-        state.isInit = false;
-        const modalEl = getModalEl();
-        const margin = getPositionMargin(getPosition());
-        if (modalEl && margin != null) {
-          modalEl.style.margin = margin;
-        }
-      }
-    };
-    const mousedownListener = (event) => {
-      if (props.multiple) {
-        topModal(event.currentTarget, getZIndex());
-      }
-    };
-    const handleHeaderMousedown = (event) => {
-      const modalEl = getModalEl();
-      if (!modalEl || !props.draggable || isFullscreen.value) {
-        return;
-      }
-      handleMove(modalEl, event, props);
-    };
-    const handleResizeMousedown = (event) => {
-      const modalEl = getModalEl();
-      if (!modalEl || !props.resizable || isFullscreen.value) {
-        return;
-      }
-      handleResize(modalEl, event, props);
-    };
+    const {
+      handleHeaderMousedown,
+      handleHeaderTouchstart,
+      handleResizeMousedown,
+      handleResizeTouchstart,
+      bindAutoTopEvent,
+      unbindAutoTopEvent,
+      topModal,
+      setInitPosition,
+      resetModalStyle
+    } = useModalEvent(dialogRef, props, isFullscreen);
     const updateModelValue = (modelValue) => {
       emit("update:modelValue", modelValue);
     };
     const toggleFullscreen = (fullscreen) => {
       isFullscreen.value = fullscreen ?? !isFullscreen.value;
       nextTick(() => {
-        topModal(getModalEl(), getZIndex());
+        topModal();
       });
       emit("update:fullscreen", isFullscreen.value);
     };
-    const onOpen = () => {
+    const handleOpen = () => {
       if (props.resetOnClose || props.destroyOnClose) {
         isFullscreen.value = props.fullscreen ?? false;
       }
       nextTick(() => {
-        const modalEl = getModalEl();
         if (props.resetOnClose) {
-          resetModalStyle(modalEl, props.width, getPosition());
+          resetModalStyle();
         } else {
           setInitPosition();
         }
-        topModal(modalEl, getZIndex());
+        topModal();
       });
       emit("open");
     };
-    const onOpened = () => {
-      const modalEl = getModalEl();
-      if (modalEl) {
-        modalEl.addEventListener("mousedown", mousedownListener);
-      }
+    const handleOpened = () => {
+      bindAutoTopEvent();
       emit("opened");
     };
-    const onClose = () => {
-      const modalEl = getModalEl();
-      if (modalEl) {
-        modalEl.removeEventListener("mousedown", mousedownListener);
-      }
+    const handleClose = () => {
+      unbindAutoTopEvent();
       emit("close");
     };
-    const onClosed = () => {
+    const handleClosed = () => {
       emit("closed");
     };
-    const onOpenAutoFocus = () => {
+    const handleOpenAutoFocus = () => {
       emit("openAutoFocus");
     };
-    const onCloseAutoFocus = () => {
+    const handleCloseAutoFocus = () => {
       emit("closeAutoFocus");
     };
     watch(
@@ -206,15 +164,17 @@ const _sfc_main = defineComponent({
       teleportTo,
       teleportDisabled,
       handleHeaderMousedown,
+      handleHeaderTouchstart,
       handleResizeMousedown,
+      handleResizeTouchstart,
       updateModelValue,
       toggleFullscreen,
-      onOpen,
-      onOpened,
-      onClose,
-      onClosed,
-      onOpenAutoFocus,
-      onCloseAutoFocus
+      handleOpen,
+      handleOpened,
+      handleClose,
+      handleClosed,
+      handleOpenAutoFocus,
+      handleCloseAutoFocus
     };
   }
 });
@@ -261,18 +221,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       zIndex: _ctx.zIndex,
       headerAriaLevel: _ctx.headerAriaLevel,
       "onUpdate:modelValue": _ctx.updateModelValue,
-      onOpen: _ctx.onOpen,
-      onOpened: _ctx.onOpened,
-      onClose: _ctx.onClose,
-      onClosed: _ctx.onClosed,
-      onOpenAutoFocus: _ctx.onOpenAutoFocus,
-      onCloseAutoFocus: _ctx.onCloseAutoFocus
+      onOpen: _ctx.handleOpen,
+      onOpened: _ctx.handleOpened,
+      onClose: _ctx.handleClose,
+      onClosed: _ctx.handleClosed,
+      onOpenAutoFocus: _ctx.handleOpenAutoFocus,
+      onCloseAutoFocus: _ctx.handleCloseAutoFocus
     }), createSlots({
       header: withCtx(({ close, titleId, titleClass }) => [
         createElementVNode("div", {
           style: normalizeStyle(_ctx.headerStyle),
           class: "ele-modal-header",
-          onMousedown: _cache[4] || (_cache[4] = (...args) => _ctx.handleHeaderMousedown && _ctx.handleHeaderMousedown(...args))
+          onMousedown: _cache[6] || (_cache[6] = (...args) => _ctx.handleHeaderMousedown && _ctx.handleHeaderMousedown(...args)),
+          onTouchstart: _cache[7] || (_cache[7] = (...args) => _ctx.handleHeaderTouchstart && _ctx.handleHeaderTouchstart(...args))
         }, [
           createElementVNode("div", {
             class: "ele-modal-title",
@@ -292,6 +253,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             style: normalizeStyle(_ctx.fullscreenBtnStyle),
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen()),
             onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
+            }, ["stop"])),
+            onTouchstart: _cache[2] || (_cache[2] = withModifiers(() => {
             }, ["stop"]))
           }, [
             renderSlot(_ctx.$slots, "maxIcon", { fullscreen: _ctx.isFullscreen }, () => [
@@ -307,8 +270,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 1,
             class: "ele-modal-tool",
             style: normalizeStyle(_ctx.closeBtnStyle),
-            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.updateModelValue(false)),
-            onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {
+            onClick: _cache[3] || (_cache[3] = ($event) => _ctx.updateModelValue(false)),
+            onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {
+            }, ["stop"])),
+            onTouchstart: _cache[5] || (_cache[5] = withModifiers(() => {
             }, ["stop"]))
           }, [
             renderSlot(_ctx.$slots, "closeIcon", {}, () => [
@@ -329,7 +294,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             { "is-vertical": _ctx.resizable === "vertical" }
           ]),
           style: normalizeStyle(_ctx.resizeIconStyle),
-          onMousedown: _cache[5] || (_cache[5] = (...args) => _ctx.handleResizeMousedown && _ctx.handleResizeMousedown(...args))
+          onMousedown: _cache[8] || (_cache[8] = (...args) => _ctx.handleResizeMousedown && _ctx.handleResizeMousedown(...args)),
+          onTouchstart: _cache[9] || (_cache[9] = (...args) => _ctx.handleResizeTouchstart && _ctx.handleResizeTouchstart(...args))
         }, [
           renderSlot(_ctx.$slots, "resizeIcon", {}, () => [
             createVNode(_component_ElIcon, null, {

package/es/ele-modal/props.d.ts

@@ -1,5 +1,6 @@
 import { PropType, ExtractPropTypes } from 'vue';
 import { dialogProps } from 'element-plus';
+import { StyleValue } from '../ele-app/types';
 import { Resizable, MoveOut, Position } from './types';
 
 /**
@@ -42,19 +43,19 @@ export declare const modalProps: {
         default: number;
     };
     /** 标题栏样式 */
-    headerStyle: PropType<Partial<import('vue').CSSProperties>>;
+    headerStyle: PropType<StyleValue>;
     /** 标题样式 */
-    titleStyle: PropType<Partial<import('vue').CSSProperties>>;
+    titleStyle: PropType<StyleValue>;
     /** 主体样式 */
-    bodyStyle: PropType<Partial<import('vue').CSSProperties>>;
+    bodyStyle: PropType<StyleValue>;
     /** 底栏样式 */
-    footerStyle: PropType<Partial<import('vue').CSSProperties>>;
+    footerStyle: PropType<StyleValue>;
     /** 自定义关闭按钮样式 */
-    closeBtnStyle: PropType<Partial<import('vue').CSSProperties>>;
+    closeBtnStyle: PropType<StyleValue>;
     /** 自定义全屏按钮样式 */
-    fullscreenBtnStyle: PropType<Partial<import('vue').CSSProperties>>;
+    fullscreenBtnStyle: PropType<StyleValue>;
     /** 拉伸图标样式 */
-    resizeIconStyle: PropType<Partial<import('vue').CSSProperties>>;
+    resizeIconStyle: PropType<StyleValue>;
     /** 是否开启响应式 */
     responsive: {
         type: BooleanConstructor;
@@ -64,10 +65,10 @@ export declare const modalProps: {
     form: BooleanConstructor;
     appendTo: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string & {}) | (() => string) | ((new (...args: any[]) => string & {}) | (() => string))[], unknown, unknown, "body", boolean>;
     beforeClose: {
-        readonly type: PropType<import('element-plus').DialogBeforeCloseFn>;
+        readonly type: import('vue').PropType<import('element-plus').DialogBeforeCloseFn>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true; /** 是否显示最大化切换按钮 */
+        __epPropKey: true;
     };
     destroyOnClose: BooleanConstructor;
     closeOnClickModal: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -77,7 +78,7 @@ export declare const modalProps: {
     openDelay: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     closeDelay: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     top: {
-        readonly type: PropType<string>;
+        readonly type: import('vue').PropType<string>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -85,13 +86,13 @@ export declare const modalProps: {
     modelValue: BooleanConstructor;
     modalClass: StringConstructor;
     width: {
-        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
     zIndex: {
-        readonly type: PropType<number>;
+        readonly type: import('vue').PropType<number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -101,7 +102,7 @@ export declare const modalProps: {
     center: BooleanConstructor;
     alignCenter: BooleanConstructor;
     closeIcon: {
-        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown>>;
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;

package/es/ele-modal/util.d.ts

@@ -1,4 +1,5 @@
-import { Position } from './types';
+import { Ref } from 'vue';
+import { ElDialogInstance } from '../ele-app/el';
 import { ModalProps } from './props';
 
 export declare const containerClass = "ele-modal-container";
@@ -13,33 +14,39 @@ export declare const closedClass = "ele-modal-closed";
  */
 export declare function getModalContainer(inner?: boolean, multiple?: boolean, appendTo?: string, modalsEl?: HTMLElement | null): HTMLElement | string;
 /**
- * 弹窗移动事件处理
- * @param modalEl 弹窗节点
- * @param event 事件
+ * 弹窗支持移动
+ * @param dialogRef 弹窗实例
  * @param props 属性
+ * @param isFullscreen 全屏状态
  */
-export declare function handleMove(modalEl: HTMLElement, event: MouseEvent, props: ModalProps): void;
+export declare function useModalMove(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
+    handleHeaderMousedown: (e: MouseEvent) => void;
+    handleHeaderTouchstart: (e: TouchEvent) => void;
+};
 /**
- * 弹窗拉伸事件处理
- * @param event 事件
+ * 弹窗支持拉伸
+ * @param dialogRef 弹窗实例
  * @param props 属性
+ * @param isFullscreen 全屏状态
  */
-export declare function handleResize(modalEl: HTMLElement, event: MouseEvent, props: ModalProps): void;
+export declare function useModalResize(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
+    handleResizeMousedown: (e: MouseEvent) => void;
+    handleResizeTouchstart: (e: TouchEvent) => void;
+};
 /**
- * 置顶弹窗
- * @param modalEl 弹窗
- * @param zIndex 弹窗初始层级
- */
-export declare function topModal(modalEl?: HTMLElement, zIndex?: number): void;
-/**
- * 获取位置对应的外间距值
- * @param position 位置
- */
-export declare function getPositionMargin(position?: Position): string | undefined;
-/**
- * 重置弹窗位置及大小
- * @param modalEl 弹窗节点
- * @param width 初始宽度
- * @param top 初始顶部距离
+ * 弹窗事件处理
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
  */
-export declare function resetModalStyle(modalEl?: HTMLElement, width?: string | number, position?: Position): void;
+export declare function useModalEvent(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
+    handleHeaderMousedown: (e: MouseEvent) => void;
+    handleHeaderTouchstart: (e: TouchEvent) => void;
+    handleResizeMousedown: (e: MouseEvent) => void;
+    handleResizeTouchstart: (e: TouchEvent) => void;
+    bindAutoTopEvent: () => void;
+    unbindAutoTopEvent: () => void;
+    topModal: (el?: HTMLElement) => void;
+    setInitPosition: () => void;
+    resetModalStyle: () => void;
+};