ele-admin-plus 1.4.1 → 1.5.0-beta.2

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

@@ -1,10 +1,14 @@
-import { Ref } from 'vue';
-import { ElDialogInstance } from '../ele-app/el';
-import { ModalProps } from './props';
+import { MoveOut, MoveOutValue, Position } from './types';
 
 export declare const containerClass = "ele-modal-container";
 export declare const wrapperClass = "ele-modal";
 export declare const closedClass = "ele-modal-closed";
+/**
+ * 是否可拉出指定方向
+ * @param moveOut 拉出值
+ * @param direction 方向
+ */
+export declare function canMoveOut(moveOut?: MoveOut, direction?: MoveOutValue): boolean;
 /**
  * 获取弹窗容器
  * @param inner 是否限制在主体内部
@@ -14,39 +18,13 @@ export declare const closedClass = "ele-modal-closed";
  */
 export declare function getModalContainer(inner?: boolean, multiple?: boolean, appendTo?: string | HTMLElement, modalsEl?: HTMLElement | null): HTMLElement | string;
 /**
- * 弹窗支持移动
- * @param dialogRef 弹窗实例
- * @param props 属性
- * @param isFullscreen 全屏状态
- */
-export declare function useModalMove(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
-    handleHeaderMousedown: (e: MouseEvent) => void;
-    handleHeaderTouchstart: (e: TouchEvent) => void;
-};
-/**
- * 弹窗支持拉伸
- * @param dialogRef 弹窗实例
- * @param props 属性
- * @param isFullscreen 全屏状态
+ * 获取位置对应的外间距值
+ * @param position 位置
  */
-export declare function useModalResize(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
-    handleResizeMousedown: (e: MouseEvent) => void;
-    handleResizeTouchstart: (e: TouchEvent) => void;
-};
+export declare function getPositionMargin(position?: Position): string | undefined;
 /**
- * 弹窗事件处理
- * @param dialogRef 弹窗实例
- * @param props 属性
- * @param isFullscreen 全屏状态
+ * 获取弹窗最大层级
+ * @param modalEl 弹窗节点
+ * @param defaultZIndex 默认层级
  */
-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;
-};
+export declare function getMaxZIndex(modalEl?: HTMLElement, defaultZIndex?: number): number | undefined;

package/lib/ele-modal-render/components/item-render.cjs

@@ -0,0 +1,114 @@
+"use strict";
+const vue = require("vue");
+const EleModal = require("../../ele-modal/index");
+const EleDrawer = require("../../ele-drawer/index");
+const util = require("../util");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "ItemRender" },
+  __name: "item-render",
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    removeItem: (_modalId) => true,
+    updateItemVisible: (_modalId, _visible) => true,
+    updateItemProps: (_modalId, _opt) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const handleClosed = () => {
+      emit("removeItem", props.item.modalId);
+    };
+    const handleUpdateItemVisible = (visible) => {
+      emit("updateItemVisible", props.item.modalId, visible);
+    };
+    const setModalProps = (option) => {
+      emit("updateItemProps", props.item.modalId, option);
+    };
+    const closeModal = () => {
+      handleUpdateItemVisible(false);
+    };
+    const modalProps = vue.computed(
+      () => {
+        return {
+          ...props.item.props || {},
+          isDeactivated: props.item.isDeactivated,
+          compLoading: props.item.compLoading,
+          modelValue: props.item.visible,
+          "onUpdate:modelValue": handleUpdateItemVisible,
+          onClosed: handleClosed
+        };
+      }
+    );
+    vue.provide(util.MODAL_HOLDER_KEY, {
+      modalProps,
+      setModalProps,
+      closeModal
+    });
+    return (_ctx, _cache) => {
+      return __props.item.custom ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+        __props.item.component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.item.component), vue.normalizeProps(vue.mergeProps({ key: 0 }, __props.item.componentProps || {})), vue.createSlots({ _: 2 }, [
+          vue.renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+            return {
+              name,
+              fn: vue.withCtx((slotProps) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1040)) : vue.createCommentVNode("", true)
+      ], 64)) : __props.item.type === "drawer" ? (vue.openBlock(), vue.createBlock(EleDrawer, vue.normalizeProps(vue.mergeProps({ key: 1 }, modalProps.value || {})), vue.createSlots({
+        default: vue.withCtx(() => [
+          __props.item.component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.item.component), vue.normalizeProps(vue.mergeProps({ key: 0 }, __props.item.componentProps || {})), vue.createSlots({ _: 2 }, [
+            vue.renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1040)) : vue.createCommentVNode("", true)
+        ]),
+        _: 2
+      }, [
+        vue.renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1040)) : (vue.openBlock(), vue.createBlock(EleModal, vue.normalizeProps(vue.mergeProps({ key: 2 }, modalProps.value || {})), vue.createSlots({
+        default: vue.withCtx(() => [
+          __props.item.component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.item.component), vue.normalizeProps(vue.mergeProps({ key: 0 }, __props.item.componentProps || {})), vue.createSlots({ _: 2 }, [
+            vue.renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1040)) : vue.createCommentVNode("", true)
+        ]),
+        _: 2
+      }, [
+        vue.renderList(Object.keys(_ctx.$slots).filter((k) => k !== "default"), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1040));
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-modal-render/components/item-render.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { ModalItem, ModalItemId } from '../types';
+
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    item: {
+        type: PropType<ModalItem>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    removeItem: (_modalId?: ModalItemId | undefined) => void;
+    updateItemVisible: (_modalId?: ModalItemId | undefined, _visible?: boolean | undefined) => void;
+    updateItemProps: (_modalId?: ModalItemId | undefined, _opt?: Record<string, any> | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    item: {
+        type: PropType<ModalItem>;
+        required: true;
+    };
+}>> & Readonly<{
+    onRemoveItem?: ((_modalId?: ModalItemId | undefined) => any) | undefined;
+    onUpdateItemVisible?: ((_modalId?: ModalItemId | undefined, _visible?: boolean | undefined) => any) | undefined;
+    onUpdateItemProps?: ((_modalId?: ModalItemId | undefined, _opt?: Record<string, any> | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ele-modal-render/components/modal-loading.cjs

@@ -0,0 +1,19 @@
+"use strict";
+const vue = require("vue");
+const LoadingSpinner = require("../../ele-loading/components/loading-spinner");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "ModalLoading", inheritAttrs: false },
+  __name: "modal-loading",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+        vue.createVNode(LoadingSpinner, {
+          plain: true,
+          loading: true,
+          class: "ele-modal-render-loading"
+        })
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-modal-render/components/modal-loading.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/ele-modal-render/index.cjs

@@ -0,0 +1,40 @@
+"use strict";
+const vue = require("vue");
+const ItemRender = require("./components/item-render");
+const index = /* @__PURE__ */ vue.defineComponent({
+  name: "EleModalRender",
+  props: {
+    modals: Array
+  },
+  emits: {
+    removeItem: (_modalId) => true,
+    updateItemVisible: (_modalId, _visible) => true,
+    updateItemProps: (_modalId, _opt) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const handleRemoveItem = (modalId) => {
+      emit("removeItem", modalId);
+    };
+    const handleUpdateItemVisible = (modalId, visible) => {
+      emit("updateItemVisible", modalId, visible);
+    };
+    const handleUpdateItemProps = (modalId, opt) => {
+      emit("updateItemProps", modalId, opt);
+    };
+    const renderModal = (item) => {
+      return vue.createVNode(ItemRender, {
+        "key": item.modalId,
+        "item": item,
+        "onRemoveItem": handleRemoveItem,
+        "onUpdateItemVisible": handleUpdateItemVisible,
+        "onUpdateItemProps": handleUpdateItemProps
+      }, {
+        ...item.slots || {}
+      });
+    };
+    return () => (props.modals || []).map((item) => renderModal(item));
+  }
+});
+module.exports = index;

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

@@ -0,0 +1,17 @@
+import { PropType } from 'vue';
+import { ModalItem, ModalItemId } from './types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modals: PropType<ModalItem[]>;
+}>, () => any[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    removeItem: (_modalId?: ModalItemId) => true;
+    updateItemVisible: (_modalId?: ModalItemId, _visible?: boolean) => true;
+    updateItemProps: (_modalId?: ModalItemId, _opt?: Record<string, any>) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modals: PropType<ModalItem[]>;
+}>> & Readonly<{
+    onRemoveItem?: ((_modalId?: ModalItemId | undefined) => any) | undefined;
+    onUpdateItemVisible?: ((_modalId?: ModalItemId | undefined, _visible?: boolean | undefined) => any) | undefined;
+    onUpdateItemProps?: ((_modalId?: ModalItemId | undefined, _opt?: Record<string, any> | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/ele-modal-render/style/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+require("../../ele-modal/style/index");
+require("../../ele-drawer/style/index");
+require("../../ele-loading/style/index");
+require("./index.scss");

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

@@ -0,0 +1 @@
+

package/lib/ele-modal-render/style/index.scss

@@ -0,0 +1,6 @@
+@use '../../style/util.scss' as *;
+
+body > .ele-modal-render-loading.ele-loading {
+  position: fixed;
+  background: none;
+}

package/lib/ele-modal-render/types.d.ts

@@ -0,0 +1,119 @@
+import type { Ref, AsyncComponentLoader, AsyncComponentOptions } from 'vue';
+import type { UserComponent, SlotObject } from '../ele-app/types';
+import type {
+  EleModalPropsAndEmits,
+  EleDrawerPropsAndEmits
+} from '../ele-app/plus';
+
+/**
+ * 弹窗类型
+ */
+export type ModalItemType = 'modal' | 'drawer';
+
+/**
+ * 弹窗 id
+ */
+export type ModalItemId = string | number;
+
+/**
+ * 弹窗数据配置
+ */
+export interface ModalItemOption<T extends ModalItemType> {
+  /** 弹窗类型 */
+  type?: T;
+  /** 弹窗内容组件 */
+  component?: UserComponent;
+  /** 弹窗内容异步组件 */
+  asyncComponent?: AsyncComponentLoader;
+  /** 弹窗内容异步组件配置 */
+  asyncComponentOptions?: Partial<AsyncComponentOptions>;
+  /** 弹窗内容组件属性 */
+  componentProps?: Record<string, any>;
+  /** 弹窗属性 */
+  props?: T extends 'drawer' ? EleDrawerPropsAndEmits : EleModalPropsAndEmits;
+  /** 传递插槽 */
+  slots?: SlotObject;
+  /** 是否自定义弹窗组件 */
+  custom?: boolean;
+  /** 不为自定义弹窗组件时异步组件加载状态 */
+  compLoading?: boolean;
+  /** 弹窗打开状态 */
+  visible?: boolean;
+  /** 弹窗是否是失活状态 */
+  isDeactivated?: boolean;
+  /** 是否在页面销毁后不关闭弹窗 */
+  keepAlive?: boolean;
+  /** 弹窗 id */
+  modalId?: ModalItemId;
+}
+
+/**
+ * 打开的弹窗数据
+ */
+export type ModalItem = ModalItemOption<'drawer'> | ModalItemOption<'modal'>;
+
+/**
+ * 提供给后代组件的弹窗操作方法
+ */
+export interface ModalUtilProvider {
+  /** 打开弹窗 */
+  openModal: (option: ModalItem) => ModalItemId;
+  /** 关闭弹窗 */
+  closeModal: (modalId?: ModalItemId) => void;
+  /** 关闭所有弹窗 */
+  closeAllModal: () => void;
+  /** 修改弹窗失活状态 */
+  updateModalState: (modalId?: ModalItemId, deactivated?: boolean) => void;
+  /** 修改弹窗属性 */
+  updateModalProps: (
+    modalId?: ModalItemId,
+    option?: Record<string, any>
+  ) => void;
+}
+
+/**
+ * 弹窗操作方法
+ */
+export interface UseModalMethods {
+  /** 打开弹窗 */
+  openModal: (option: ModalItem) => ModalItemId;
+  /** 关闭所有弹窗(是否只关闭当前组件中打开的弹窗) */
+  closeAllModal: (current?: boolean) => void;
+  /** 关闭弹窗(指定弹窗 id 或者当前内容组件所在弹窗) */
+  closeModal: (modalId?: ModalItemId) => void;
+  /** 修改弹窗属性(指定弹窗 id 或者当前内容组件所在弹窗) */
+  setModalProps: (
+    modalId?: ModalItemId | Record<string, any>,
+    options?: Record<string, any>
+  ) => void;
+}
+
+/**
+ * 提供给内容组件的弹窗数据
+ */
+export interface ModalHolderProvider {
+  /** 关闭弹窗方法 */
+  closeModal: () => void;
+  /** 修改弹窗属性方法 */
+  setModalProps: (option?: Record<string, any>) => void;
+  /** 弹窗属性 */
+  modalProps: Ref<EleModalPropsAndEmits | EleDrawerPropsAndEmits>;
+}
+
+/**
+ * useModalRender 返回类型
+ */
+export interface UseModalRenderResult {
+  modals: Ref<ModalItem[]>;
+  openModal: (option: ModalItem) => ModalItemId;
+  closeModal: (modalId?: ModalItemId) => void;
+  closeAllModal: () => void;
+  removeModal: (modalId?: ModalItemId) => void;
+  removeAllModal: () => void;
+  updateModalVisible: (modalId?: ModalItemId, visible?: boolean) => void;
+  updateModalState: (modalId?: ModalItemId, deactivated?: boolean) => void;
+  updateModalProps: (
+    modalId?: ModalItemId,
+    option?: Record<string, any>
+  ) => void;
+}

package/lib/ele-modal-render/use-modal.cjs

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const ItemRender = require("./components/item-render");
+const util = require("./util");
+function useModal() {
+  let isHolderRender = false;
+  const renderProvider = vue.inject(util.MODAL_UTIL_KEY, null);
+  const holderProvider = vue.inject(util.MODAL_HOLDER_KEY, null);
+  const {
+    modals,
+    openModal,
+    closeModal,
+    closeAllModal,
+    removeModal,
+    updateModalVisible,
+    updateModalProps
+  } = util.useModalRender();
+  const modalIds = [];
+  const aliveModalIds = [];
+  const ModalHolder = /* @__PURE__ */ vue.defineComponent({
+    name: "ModalHolder",
+    setup() {
+      isHolderRender = true;
+      const renderModal = (item) => {
+        return vue.createVNode(ItemRender, {
+          "key": item.modalId,
+          "item": item,
+          "onRemoveItem": removeModal,
+          "onUpdateItemVisible": updateModalVisible,
+          "onUpdateItemProps": updateModalProps
+        }, {
+          ...item.slots || {}
+        });
+      };
+      return () => modals.value.map((item) => renderModal(item));
+    }
+  });
+  const methods = {
+    openModal: (option) => {
+      if (isHolderRender || !renderProvider) {
+        const modalId2 = openModal(option);
+        if (modalId2 != null) {
+          modalIds.push(modalId2);
+          if (option.keepAlive) {
+            aliveModalIds.push(modalId2);
+          }
+        }
+        return modalId2;
+      }
+      const modalId = renderProvider.openModal(option);
+      if (modalId != null) {
+        modalIds.push(modalId);
+        if (option.keepAlive) {
+          aliveModalIds.push(modalId);
+        }
+      }
+      return modalId;
+    },
+    closeAllModal: (current) => {
+      if (isHolderRender || !renderProvider) {
+        closeAllModal();
+        return;
+      }
+      if (!current) {
+        renderProvider.closeAllModal();
+        return;
+      }
+      modalIds.forEach((modalId) => {
+        if (renderProvider) {
+          renderProvider.closeModal(modalId);
+        }
+      });
+    },
+    closeModal: (modalId) => {
+      if (modalId == null) {
+        holderProvider && holderProvider.closeModal();
+        return;
+      }
+      if (isHolderRender || !renderProvider) {
+        closeModal(modalId);
+        return;
+      }
+      renderProvider.closeModal(modalId);
+    },
+    setModalProps: (modalId, options) => {
+      if (modalId == null || typeof modalId === "object") {
+        if (modalId != null && holderProvider) {
+          holderProvider.setModalProps(modalId);
+        }
+        return;
+      }
+      if (isHolderRender || !renderProvider) {
+        updateModalProps(modalId, options);
+        return;
+      }
+      renderProvider.updateModalProps(modalId, options);
+    }
+  };
+  vue.onBeforeUnmount(() => {
+    modalIds.forEach((modalId) => {
+      if (!aliveModalIds.includes(modalId)) {
+        methods.closeModal(modalId);
+      }
+    });
+  });
+  vue.onDeactivated(() => {
+    if (isHolderRender) {
+      return;
+    }
+    modalIds.forEach((modalId) => {
+      if (!renderProvider || aliveModalIds.includes(modalId)) {
+        return;
+      }
+      renderProvider.updateModalState(modalId, true);
+    });
+  });
+  vue.onActivated(() => {
+    if (isHolderRender) {
+      return;
+    }
+    modalIds.forEach((modalId) => {
+      if (!renderProvider) {
+        return;
+      }
+      renderProvider.updateModalState(modalId, false);
+    });
+  });
+  return {
+    ...methods,
+    ModalHolder,
+    modalProps: holderProvider?.modalProps
+  };
+}
+exports.useModal = useModal;

package/lib/ele-modal-render/use-modal.d.ts

@@ -0,0 +1,10 @@
+import { ModalItem, ModalItemId } from './types';
+
+export declare function useModal(): {
+    ModalHolder: import('vue').DefineComponent<{}, () => any[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    modalProps: import('vue').Ref<import('../ele-app/plus').EleDrawerPropsAndEmits | import('../ele-app/plus').EleModalPropsAndEmits, import('../ele-app/plus').EleDrawerPropsAndEmits | import('../ele-app/plus').EleModalPropsAndEmits> | undefined;
+    openModal: (option: ModalItem) => ModalItemId;
+    closeAllModal: (current?: boolean) => void;
+    closeModal: (modalId?: ModalItemId) => void;
+    setModalProps: (modalId?: ModalItemId | Record<string, any>, options?: Record<string, any>) => void;
+};