ele-admin-plus 1.0.0-beta.1

package/lib/ele-modal/index.js

@@ -0,0 +1,325 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const iconsVue = require("@element-plus/icons-vue");
+const icons = require("../icons");
+const useReceiver = require("../ele-config-provider/use-receiver");
+const licenseUtil = require("../utils/license-util");
+const core = require("../utils/core");
+const util = require("./util");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleModal",
+  components: { ElDialog: elementPlus.ElDialog, ElIcon: elementPlus.ElIcon, Close: iconsVue.Close, CompressOutlined: icons.CompressOutlined, ExpandOutlined: icons.ExpandOutlined },
+  inheritAttrs: false,
+  props: props.modalProps,
+  emits: props.modalEmits,
+  setup(props2, { emit }) {
+    const { authenticated } = licenseUtil.useLicense();
+    const layoutProvide = useReceiver.useLayoutState(
+      vue.ref({ mobile: core.screenWidth() < 768 })
+    );
+    const modalRef = vue.ref(null);
+    const container = vue.ref(util.getModalContainer());
+    const isFullscreen = vue.ref(props2.fullscreen ?? false);
+    const isActivated = vue.ref(true);
+    const dialogClass = vue.computed(() => {
+      const layoutState = vue.unref(layoutProvide);
+      const classes = [util.wrapperClass];
+      if (props2.responsive ?? layoutState.responsive ?? true) {
+        classes.push(util.responsiveClass);
+      }
+      if (props2.form) {
+        classes.push("ele-modal-form");
+      }
+      if (!layoutState.mobile) {
+        if (props2.draggable) {
+          classes.push(util.movableClass);
+        }
+        if (props2.resizable) {
+          classes.push(util.resizableClass);
+          if (typeof props2.resizable === "string") {
+            classes.push(util.resizableClass + "-" + props2.resizable);
+          }
+        }
+      }
+      if (props2.multiple) {
+        classes.push(util.multipleClass);
+      }
+      if (isFullscreen.value) {
+        classes.push(util.fullscreenClass);
+      }
+      if (!props2.modelValue) {
+        classes.push(util.closedClass);
+      }
+      if (!isActivated.value && props2.modelValue) {
+        classes.push(util.hideClass);
+      }
+      if (props2.inner) {
+        classes.push(util.innerClass);
+        if (layoutState.collapse && !layoutState.topLayout) {
+          classes.push(util.collapseClass);
+        }
+        if (layoutState.compact && layoutState.mixSidebar && !layoutState.topLayout) {
+          classes.push(util.compactClass);
+        }
+        if (layoutState.maximized) {
+          classes.push(util.maximizedClass);
+        }
+        if (layoutState.tabBar) {
+          classes.push(util.hasTabClass);
+        }
+        if (layoutState.mixSidebar && !layoutState.topLayout) {
+          classes.push(util.mixSidebarClass);
+          if (!layoutState.sidebar) {
+            classes.push(util.singleSidebarClass);
+          }
+        }
+        if (layoutState.topLayout) {
+          classes.push(util.topLayoutClass);
+        }
+        if (layoutState.maximized && layoutState.expanded) {
+          classes.push(util.expandedClass);
+        }
+        if (layoutState.mobile) {
+          classes.push(util.mobileClass);
+        }
+      }
+      if (props2.modalClass) {
+        classes.push(props2.modalClass);
+      }
+      return classes.join(" ");
+    });
+    const getModalEl = () => {
+      var _a, _b;
+      return (_b = vue.unref((_a = vue.unref(modalRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
+    };
+    const getZIndex = () => {
+      return props2.zIndex ?? 2e3;
+    };
+    const updateModelValue = (modelValue) => {
+      emit("update:modelValue", modelValue);
+    };
+    const toggleFullscreen = (fullscreen) => {
+      isFullscreen.value = fullscreen == null ? !isFullscreen.value : fullscreen;
+      vue.nextTick(() => {
+        util.setModalTop(getModalEl(), getZIndex());
+      });
+      emit("update:fullscreen", isFullscreen.value);
+    };
+    const mousedownListener = (event) => {
+      util.handleMovable(event, props2);
+      util.handleResizable(event, props2);
+      util.setModalTop(event.currentTarget, getZIndex());
+    };
+    const onOpen = () => {
+      if (props2.resetOnClose || props2.destroyOnClose) {
+        isFullscreen.value = props2.fullscreen ?? false;
+      }
+      vue.nextTick(() => {
+        const modalEl = getModalEl();
+        if (props2.resetOnClose) {
+          util.resetModalStyle(modalEl, props2.width, props2.top);
+        }
+        if (props2.position) {
+          util.setInitPosition(
+            modalEl,
+            props2.resizable,
+            props2.position,
+            props2.moveOut,
+            props2.resetOnClose
+          );
+        }
+        util.setModalTop(modalEl, getZIndex());
+      });
+      emit("open");
+    };
+    const onOpened = () => {
+      const el = getModalEl();
+      if (authenticated.value && el) {
+        el.addEventListener("mousedown", mousedownListener);
+      }
+      emit("opened");
+    };
+    const onClose = () => {
+      const el = getModalEl();
+      if (el) {
+        el.removeEventListener("mousedown", mousedownListener);
+      }
+      emit("close");
+    };
+    const onClosed = () => {
+      emit("closed");
+    };
+    const onOpenAutoFocus = () => {
+      emit("openAutoFocus");
+    };
+    const onCloseAutoFocus = () => {
+      emit("closeAutoFocus");
+    };
+    vue.watch(
+      () => props2.fullscreen,
+      (fullscreen) => {
+        isFullscreen.value = fullscreen ?? false;
+      }
+    );
+    vue.watch(
+      () => props2.position,
+      (position) => {
+        if (position && props2.modelValue) {
+          util.setInitPosition(
+            getModalEl(),
+            props2.resizable,
+            position,
+            props2.moveOut,
+            true
+          );
+        }
+      }
+    );
+    vue.onActivated(() => {
+      isActivated.value = true;
+    });
+    vue.onDeactivated(() => {
+      isActivated.value = false;
+    });
+    return {
+      modalRef,
+      container,
+      isFullscreen,
+      dialogClass,
+      updateModelValue,
+      toggleFullscreen,
+      onOpen,
+      onOpened,
+      onClose,
+      onClosed,
+      onOpenAutoFocus,
+      onCloseAutoFocus
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CompressOutlined = vue.resolveComponent("CompressOutlined");
+  const _component_ExpandOutlined = vue.resolveComponent("ExpandOutlined");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_Close = vue.resolveComponent("Close");
+  const _component_ElDialog = vue.resolveComponent("ElDialog");
+  return vue.openBlock(), vue.createBlock(vue.Teleport, {
+    to: _ctx.container,
+    disabled: !_ctx.multiple
+  }, [
+    vue.createVNode(_component_ElDialog, vue.mergeProps(_ctx.$attrs, {
+      ref: "modalRef",
+      modelValue: _ctx.modelValue,
+      title: _ctx.title,
+      width: _ctx.width,
+      fullscreen: false,
+      top: _ctx.top,
+      modal: _ctx.multiple ? false : _ctx.modal,
+      appendToBody: _ctx.multiple ? false : _ctx.appendToBody,
+      lockScroll: _ctx.lockScroll,
+      openDelay: _ctx.openDelay,
+      closeDelay: _ctx.closeDelay,
+      closeOnClickModal: _ctx.closeOnClickModal,
+      closeOnPressEscape: _ctx.closeOnPressEscape,
+      showClose: false,
+      beforeClose: _ctx.beforeClose,
+      draggable: false,
+      center: _ctx.center,
+      alignCenter: false,
+      destroyOnClose: _ctx.destroyOnClose,
+      modalClass: _ctx.dialogClass,
+      zIndex: _ctx.zIndex,
+      trapFocus: _ctx.trapFocus,
+      "onUpdate:modelValue": _ctx.updateModelValue,
+      onOpen: _ctx.onOpen,
+      onOpened: _ctx.onOpened,
+      onClose: _ctx.onClose,
+      onClosed: _ctx.onClosed,
+      onOpenAutoFocus: _ctx.onOpenAutoFocus,
+      onCloseAutoFocus: _ctx.onCloseAutoFocus
+    }), vue.createSlots({
+      header: vue.withCtx(({ close, titleId, titleClass }) => [
+        vue.createElementVNode("div", {
+          class: "ele-modal-header",
+          style: vue.normalizeStyle(_ctx.headerStyle)
+        }, [
+          vue.createElementVNode("div", {
+            id: titleId,
+            class: vue.normalizeClass(titleClass)
+          }, [
+            vue.renderSlot(_ctx.$slots, "header", {
+              close,
+              titleId,
+              titleClass
+            }, () => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
+            ])
+          ], 10, _hoisted_1),
+          _ctx.maxable ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "ele-modal-tool",
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen())
+          }, [
+            vue.renderSlot(_ctx.$slots, "maxIcon", { fullscreen: _ctx.isFullscreen }, () => [
+              vue.createVNode(_component_ElIcon, { style: { "transform": "scale(0.88)" } }, {
+                default: vue.withCtx(() => [
+                  _ctx.isFullscreen ? (vue.openBlock(), vue.createBlock(_component_CompressOutlined, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_ExpandOutlined, { key: 1 }))
+                ]),
+                _: 1
+              })
+            ])
+          ])) : vue.createCommentVNode("", true),
+          _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: "ele-modal-tool",
+            onClick: close
+          }, [
+            vue.renderSlot(_ctx.$slots, "closeIcon", {}, () => [
+              vue.createVNode(_component_ElIcon, { style: { "transform": "scale(1.24)" } }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_Close)
+                ]),
+                _: 1
+              })
+            ])
+          ], 8, _hoisted_2)) : vue.createCommentVNode("", true)
+        ], 4)
+      ]),
+      default: vue.withCtx(() => [
+        vue.createElementVNode("div", {
+          class: "ele-modal-body",
+          style: vue.normalizeStyle(_ctx.bodyStyle)
+        }, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 4)
+      ]),
+      _: 2
+    }, [
+      _ctx.$slots.footer ? {
+        name: "footer",
+        fn: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: "ele-modal-footer",
+            style: vue.normalizeStyle(_ctx.footerStyle)
+          }, [
+            vue.renderSlot(_ctx.$slots, "footer")
+          ], 4)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["modelValue", "title", "width", "top", "modal", "appendToBody", "lockScroll", "openDelay", "closeDelay", "closeOnClickModal", "closeOnPressEscape", "beforeClose", "center", "destroyOnClose", "modalClass", "zIndex", "trapFocus", "onUpdate:modelValue", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus"])
+  ], 8, ["to", "disabled"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

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

@@ -0,0 +1,101 @@
+import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
+import type { Resizable, MoveOut, Position } from './types';
+/**
+ * 属性
+ */
+export declare const modalProps: {
+    appendToBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    moveOut: PropType<MoveOut>;
+    resizable: PropType<Resizable>;
+    position: PropType<Position>;
+    resetOnClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxable: BooleanConstructor;
+    multiple: BooleanConstructor;
+    inner: BooleanConstructor;
+    minWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    headerStyle: PropType<CSSProperties>;
+    bodyStyle: PropType<CSSProperties>;
+    footerStyle: PropType<CSSProperties>;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    form: BooleanConstructor;
+    beforeClose: {
+        readonly type: PropType<import("element-plus").DialogBeforeCloseFn>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    destroyOnClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    closeOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    lockScroll: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    modal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    openDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    closeDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    top: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    modelValue: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    modalClass: StringConstructor;
+    width: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    zIndex: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    trapFocus: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    center: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    alignCenter: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    closeIcon: {
+        readonly type: PropType<import("element-plus/es/utils").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;
+    };
+    customClass: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    fullscreen: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+};
+export type ModalProps = ExtractPropTypes<typeof modalProps>;
+/**
+ * 事件
+ */
+export declare const modalEmits: {
+    'update:fullscreen': (_fullscreen: boolean) => boolean;
+    open: () => boolean;
+    opened: () => boolean;
+    close: () => boolean;
+    closed: () => boolean;
+    "update:modelValue": (value: boolean) => boolean;
+    openAutoFocus: () => boolean;
+    closeAutoFocus: () => boolean;
+};

package/lib/ele-modal/props.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const elementPlus = require("element-plus");
+const modalProps = {
+  ...elementPlus.dialogProps,
+  appendToBody: {
+    type: Boolean,
+    default: true
+  },
+  draggable: {
+    type: Boolean,
+    default: true
+  },
+  // 是否可以拖出边界
+  moveOut: [Boolean, Array],
+  // 是否可以拉伸
+  resizable: [Boolean, String],
+  // 初始位置
+  position: [String, Object],
+  // 是否在弹窗关闭后重置位置和大小
+  resetOnClose: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示最大化切换按钮
+  maxable: Boolean,
+  // 是否支持打开多个
+  multiple: Boolean,
+  // 是否限制在主体内部
+  inner: Boolean,
+  // 最小拉伸宽度
+  minWidth: {
+    type: Number,
+    default: 260
+  },
+  // 最小拉伸高度
+  minHeight: {
+    type: Number,
+    default: 160
+  },
+  // 标题栏样式
+  headerStyle: Object,
+  // 主体样式
+  bodyStyle: Object,
+  // 底栏样式
+  footerStyle: Object,
+  // 是否开启响应式
+  responsive: {
+    type: Boolean,
+    default: null
+  },
+  // 是否是表单弹窗
+  form: Boolean
+};
+const modalEmits = {
+  ...elementPlus.dialogEmits,
+  // 更新全屏状态
+  "update:fullscreen": (_fullscreen) => true
+};
+exports.modalEmits = modalEmits;
+exports.modalProps = modalProps;

package/lib/ele-modal/style/css-var.scss

@@ -0,0 +1,14 @@
+@use '../../style/themes/default.scss' as *;
+
+@mixin set-modal-var($var) {
+  .ele-modal {
+    @include set-ele-var('modal', $var);
+  }
+
+  .ele-modal-inner {
+    @include set-ele-var('header', $var);
+    @include set-ele-var('sidebar', $var);
+    @include set-ele-var('sidebox', $var);
+    @include set-ele-var('tab', $var);
+  }
+}

package/lib/ele-modal/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+require("element-plus/es/components/dialog/style/index");
+require("element-plus/es/components/icon/style/index");
+require("./index.scss");