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

package/lib/ele-modal/index.cjs

@@ -21,7 +21,6 @@ const _sfc_main = vue.defineComponent({
   props: props.modalProps,
   emits: props.modalEmits,
   setup(props2, { emit }) {
-    const state = { isInit: true };
     const layoutState = util.useLayoutState();
     const isResponsive = util.useResponsive(props2);
     const dialogRef = vue.ref(null);
@@ -90,97 +89,56 @@ const _sfc_main = vue.defineComponent({
       const disabled = appendTo === "body" ? !props2.appendToBody : false;
       return props2.multiple || props2.inner ? false : disabled;
     });
-    const getModalEl = () => {
-      var _a, _b;
-      return (_b = vue.unref((_a = vue.unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
-    };
-    const getZIndex = () => {
-      return props2.zIndex ?? 2e3;
-    };
-    const getPosition = () => {
-      if (props2.alignCenter) {
-        return "center";
-      }
-      if (props2.top != null && props2.top !== "") {
-        return { top: props2.top };
-      }
-      return props2.position;
-    };
-    const setInitPosition = () => {
-      if (state.isInit) {
-        state.isInit = false;
-        const modalEl = getModalEl();
-        const margin = util$1.getPositionMargin(getPosition());
-        if (modalEl && margin != null) {
-          modalEl.style.margin = margin;
-        }
-      }
-    };
-    const mousedownListener = (event) => {
-      if (props2.multiple) {
-        util$1.topModal(event.currentTarget, getZIndex());
-      }
-    };
-    const handleHeaderMousedown = (event) => {
-      const modalEl = getModalEl();
-      if (!modalEl || !props2.draggable || isFullscreen.value) {
-        return;
-      }
-      util$1.handleMove(modalEl, event, props2);
-    };
-    const handleResizeMousedown = (event) => {
-      const modalEl = getModalEl();
-      if (!modalEl || !props2.resizable || isFullscreen.value) {
-        return;
-      }
-      util$1.handleResize(modalEl, event, props2);
-    };
+    const {
+      handleHeaderMousedown,
+      handleHeaderTouchstart,
+      handleResizeMousedown,
+      handleResizeTouchstart,
+      bindAutoTopEvent,
+      unbindAutoTopEvent,
+      topModal,
+      setInitPosition,
+      resetModalStyle
+    } = util$1.useModalEvent(dialogRef, props2, isFullscreen);
     const updateModelValue = (modelValue) => {
       emit("update:modelValue", modelValue);
     };
     const toggleFullscreen = (fullscreen) => {
       isFullscreen.value = fullscreen ?? !isFullscreen.value;
       vue.nextTick(() => {
-        util$1.topModal(getModalEl(), getZIndex());
+        topModal();
       });
       emit("update:fullscreen", isFullscreen.value);
     };
-    const onOpen = () => {
+    const handleOpen = () => {
       if (props2.resetOnClose || props2.destroyOnClose) {
         isFullscreen.value = props2.fullscreen ?? false;
       }
       vue.nextTick(() => {
-        const modalEl = getModalEl();
         if (props2.resetOnClose) {
-          util$1.resetModalStyle(modalEl, props2.width, getPosition());
+          resetModalStyle();
         } else {
           setInitPosition();
         }
-        util$1.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");
     };
     vue.watch(
@@ -207,15 +165,17 @@ const _sfc_main = vue.defineComponent({
       teleportTo,
       teleportDisabled,
       handleHeaderMousedown,
+      handleHeaderTouchstart,
       handleResizeMousedown,
+      handleResizeTouchstart,
       updateModelValue,
       toggleFullscreen,
-      onOpen,
-      onOpened,
-      onClose,
-      onClosed,
-      onOpenAutoFocus,
-      onCloseAutoFocus
+      handleOpen,
+      handleOpened,
+      handleClose,
+      handleClosed,
+      handleOpenAutoFocus,
+      handleCloseAutoFocus
     };
   }
 });
@@ -262,18 +222,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
     }), vue.createSlots({
       header: vue.withCtx(({ close, titleId, titleClass }) => [
         vue.createElementVNode("div", {
           style: vue.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))
         }, [
           vue.createElementVNode("div", {
             class: "ele-modal-title",
@@ -293,6 +254,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             style: vue.normalizeStyle(_ctx.fullscreenBtnStyle),
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen()),
             onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+            }, ["stop"])),
+            onTouchstart: _cache[2] || (_cache[2] = vue.withModifiers(() => {
             }, ["stop"]))
           }, [
             vue.renderSlot(_ctx.$slots, "maxIcon", { fullscreen: _ctx.isFullscreen }, () => [
@@ -308,8 +271,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 1,
             class: "ele-modal-tool",
             style: vue.normalizeStyle(_ctx.closeBtnStyle),
-            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.updateModelValue(false)),
-            onMousedown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
+            onClick: _cache[3] || (_cache[3] = ($event) => _ctx.updateModelValue(false)),
+            onMousedown: _cache[4] || (_cache[4] = vue.withModifiers(() => {
+            }, ["stop"])),
+            onTouchstart: _cache[5] || (_cache[5] = vue.withModifiers(() => {
             }, ["stop"]))
           }, [
             vue.renderSlot(_ctx.$slots, "closeIcon", {}, () => [
@@ -330,7 +295,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             { "is-vertical": _ctx.resizable === "vertical" }
           ]),
           style: vue.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))
         }, [
           vue.renderSlot(_ctx.$slots, "resizeIcon", {}, () => [
             vue.createVNode(_component_ElIcon, null, {

package/lib/ele-modal/index.d.ts

@@ -1,5 +1,4 @@
 import { ElDialogInstance } from '../ele-app/el';
-import { Position } from './types';
 
 declare const _default: import('vue').DefineComponent<{
     appendToBody: {
@@ -12,7 +11,7 @@ declare const _default: import('vue').DefineComponent<{
     };
     moveOut: import('vue').PropType<import('./types').MoveOut>;
     resizable: import('vue').PropType<import('./types').Resizable>;
-    position: import('vue').PropType<Position>;
+    position: import('vue').PropType<import('./types').Position>;
     resetOnClose: {
         type: BooleanConstructor;
         default: boolean;
@@ -28,18 +27,18 @@ declare const _default: import('vue').DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    headerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    titleStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    bodyStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    footerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    closeBtnStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    fullscreenBtnStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    resizeIconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    titleStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    footerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    closeBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    fullscreenBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    resizeIconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
-    form: BooleanConstructor; /** 弹窗类名 */
+    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: import('vue').PropType<import('element-plus').DialogBeforeCloseFn>;
@@ -79,7 +78,7 @@ declare const _default: import('vue').DefineComponent<{
     center: BooleanConstructor;
     alignCenter: BooleanConstructor;
     closeIcon: {
-        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, {}, 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;
@@ -95,16 +94,18 @@ declare const _default: import('vue').DefineComponent<{
     dialogClass: import('vue').ComputedRef<string>;
     teleportTo: import('vue').ComputedRef<string | Element>;
     teleportDisabled: import('vue').ComputedRef<boolean>;
-    handleHeaderMousedown: (event: MouseEvent) => void;
-    handleResizeMousedown: (event: MouseEvent) => void;
+    handleHeaderMousedown: (e: MouseEvent) => void;
+    handleHeaderTouchstart: (e: TouchEvent) => void;
+    handleResizeMousedown: (e: MouseEvent) => void;
+    handleResizeTouchstart: (e: TouchEvent) => void;
     updateModelValue: (modelValue: boolean) => void;
     toggleFullscreen: (fullscreen?: boolean) => void;
-    onOpen: () => void;
-    onOpened: () => void;
-    onClose: () => void;
-    onClosed: () => void;
-    onOpenAutoFocus: () => void;
-    onCloseAutoFocus: () => void;
+    handleOpen: () => void;
+    handleOpened: () => void;
+    handleClose: () => void;
+    handleClosed: () => void;
+    handleOpenAutoFocus: () => void;
+    handleCloseAutoFocus: () => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     'update:fullscreen': (_fullscreen: boolean) => boolean;
     open: () => boolean;
@@ -125,7 +126,7 @@ declare const _default: import('vue').DefineComponent<{
     };
     moveOut: import('vue').PropType<import('./types').MoveOut>;
     resizable: import('vue').PropType<import('./types').Resizable>;
-    position: import('vue').PropType<Position>;
+    position: import('vue').PropType<import('./types').Position>;
     resetOnClose: {
         type: BooleanConstructor;
         default: boolean;
@@ -141,18 +142,18 @@ declare const _default: import('vue').DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    headerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    titleStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    bodyStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    footerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    closeBtnStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    fullscreenBtnStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    resizeIconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    titleStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    footerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    closeBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    fullscreenBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    resizeIconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
-    form: BooleanConstructor; /** 弹窗类名 */
+    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: import('vue').PropType<import('element-plus').DialogBeforeCloseFn>;
@@ -192,7 +193,7 @@ declare const _default: import('vue').DefineComponent<{
     center: BooleanConstructor;
     alignCenter: BooleanConstructor;
     closeIcon: {
-        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, {}, 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/lib/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;