ele-admin-plus 1.2.2-beta.1 → 1.2.2-beta.2

package/es/ele-app/components/form-item-rest.js

@@ -1,9 +1,9 @@
-import { defineComponent, provide } from "vue";
-import { formItemContextKey } from "element-plus";
+import { defineComponent } from "vue";
+import { useFormItemRest } from "../../utils/hook";
 const formItemRest = defineComponent({
   name: "FormItemRest",
   setup(_props, { slots }) {
-    provide(formItemContextKey, null);
+    useFormItemRest();
     return () => {
       var _a;
       return (_a = slots.default) == null ? void 0 : _a.call(slots);

package/es/ele-cropper/components/cropper-tools.js

@@ -168,7 +168,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 accept: _ctx.accept,
                 showFileList: false,
                 beforeUpload: _ctx.handleUpload,
-                style: { "display": "inline-block", "line-height": "0" }
+                class: "ele-cropper-tool-upload"
               }, {
                 default: withCtx(() => [
                   createVNode(_component_ElButton, {

package/es/ele-cropper/style/index.scss

@@ -68,12 +68,21 @@
 }
 
 .ele-cropper-tool-item {
-  margin: 10px 14px 0 0;
+  margin: 10px 10px 0 0;
   vertical-align: top;
 
   &:last-child {
     margin-right: 0;
   }
+
+  & > .ele-cropper-tool-upload {
+    float: left;
+  }
+
+  .ele-cropper-tool-upload {
+    line-height: 0;
+    display: inline-block;
+  }
 }
 
 .ele-cropper-tool {

package/es/ele-menus/components/item-title.js

@@ -52,7 +52,7 @@ const _hoisted_1 = {
   key: 0,
   class: "ele-menu-title"
 };
-const _hoisted_2 = ["href"];
+const _hoisted_2 = ["href", "target"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElIcon = resolveComponent("ElIcon");
   const _component_ElBadge = resolveComponent("ElBadge");
@@ -89,15 +89,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _ctx.isExternalLink(_ctx.item.path) ? (openBlock(), createElementBlock("a", {
           key: 0,
           href: _ctx.item.path,
-          target: "_blank",
+          target: _ctx.item.pathTarget || "_blank",
           class: "ele-menu-link",
           onClick: _cache[0] || (_cache[0] = withModifiers(() => {
           }, ["stop"]))
         }, null, 8, _hoisted_2)) : _ctx.item.path ? (openBlock(), createBlock(_component_RouterLink, {
           key: 1,
           to: _ctx.item.path,
+          target: _ctx.item.pathTarget,
           class: "ele-menu-link"
-        }, null, 8, ["to"])) : createCommentVNode("", true)
+        }, null, 8, ["to", "target"])) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true)
     ], 32)
   ], 64);

package/es/ele-menus/types.d.ts

@@ -28,6 +28,8 @@ export interface MenuItem
   iconStyle?: StyleValue;
   /** 菜单链接地址 */
   path?: string;
+  /** 菜单的打开位置 */
+  pathTarget?: string;
   /** 是否展示为分组菜单 */
   group?: boolean;
   /** 徽章 */

package/es/ele-split-panel/index.d.ts

@@ -6,6 +6,7 @@ declare const _default: import('vue').DefineComponent<{
     maxSize: NumberConstructor;
     space: StringConstructor;
     customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    customWrapStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     allowCollapse: BooleanConstructor;
     collapseStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
@@ -37,6 +38,7 @@ declare const _default: import('vue').DefineComponent<{
     maxSize: NumberConstructor;
     space: StringConstructor;
     customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    customWrapStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     allowCollapse: BooleanConstructor;
     collapseStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;

package/es/ele-split-panel/index.js

@@ -122,11 +122,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = {
-  ref: "wrapRef",
-  class: "ele-split-panel-wrap"
-};
-const _hoisted_2 = { class: "ele-split-panel-space" };
+const _hoisted_1 = { class: "ele-split-panel-space" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ArrowUp = resolveComponent("ArrowUp");
   const _component_ArrowLeft = resolveComponent("ArrowLeft");
@@ -149,7 +145,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1, [
+      createElementVNode("div", {
+        ref: "wrapRef",
+        class: "ele-split-panel-wrap",
+        style: normalizeStyle(_ctx.customWrapStyle)
+      }, [
         createElementVNode("div", {
           ref: "sideRef",
           class: "ele-split-panel-side",
@@ -157,14 +157,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 4),
-        createElementVNode("div", _hoisted_2, [
+        createElementVNode("div", _hoisted_1, [
           _ctx.resizable ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: "ele-split-resize-line",
             onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleResize && _ctx.handleResize(...args))
           }, null, 32)) : createCommentVNode("", true)
         ])
-      ], 512),
+      ], 4),
       createElementVNode("div", {
         class: "ele-split-panel-body",
         style: normalizeStyle(_ctx.bodyStyle)

package/es/ele-split-panel/props.d.ts

@@ -13,8 +13,10 @@ export declare const splitPanelProps: {
     maxSize: NumberConstructor;
     /** 间距 */
     space: StringConstructor;
-    /** 自定义样式 */
+    /** 自定义边栏样式 */
     customStyle: PropType<StyleValue>;
+    /** 自定义边栏容器样式 */
+    customWrapStyle: PropType<StyleValue>;
     /** 自定义内容样式 */
     bodyStyle: PropType<StyleValue>;
     /** 是否可折叠 */

package/es/ele-split-panel/props.js

@@ -7,8 +7,10 @@ const splitPanelProps = {
   maxSize: Number,
   /** 间距 */
   space: String,
-  /** 自定义样式 */
+  /** 自定义边栏样式 */
   customStyle: Object,
+  /** 自定义边栏容器样式 */
+  customWrapStyle: Object,
   /** 自定义内容样式 */
   bodyStyle: Object,
   /** 是否可折叠 */

package/es/ele-tabs/style/index.scss

@@ -1043,8 +1043,6 @@
 /* 内部表格高度铺满 */
 .ele-tabs.is-flex-table {
   flex: 1;
-  display: flex;
-  flex-direction: column;
   overflow: auto;
 
   & > .el-tabs__content {
@@ -1056,6 +1054,7 @@
       display: flex;
       flex-direction: column;
       box-sizing: border-box;
+      overflow: auto;
 
       & > .ele-pro-table {
         flex: 1;

package/es/utils/hook.d.ts

@@ -1,5 +1,10 @@
 import { Ref } from 'vue';
+import { default as SortableJs } from 'sortablejs';
 
+/**
+ * 重置组件表单验证
+ */
+export declare function useFormItemRest(): void;
 /**
  * useTimer 返回结果
  */
@@ -111,3 +116,14 @@ export declare function useMoveEvent(option?: UseTouchEventOption<MoveEvent>): {
     handleMousedown: (e: MouseEvent) => void;
     handleTouchstart: (e: TouchEvent) => void;
 };
+/**
+ * 拖拽排序
+ * @param getEl 获取容器方法
+ * @param getData 获取数据方法
+ * @param updateData 更新数据方法
+ * @param options 自定义参数
+ */
+export declare function useSortable<T>(getEl: () => HTMLElement | undefined | null, getData: () => T[] | undefined | null, updateData: (data: T[]) => void, options?: SortableJs.Options): {
+    initSortable: () => void;
+    destroySortable: () => void;
+};

package/es/utils/hook.js

@@ -1,4 +1,9 @@
-import { ref, onBeforeUnmount } from "vue";
+import { provide, ref, onBeforeUnmount, onMounted } from "vue";
+import { formItemContextKey } from "element-plus";
+import SortableJs from "sortablejs";
+function useFormItemRest() {
+  provide(formItemContextKey, null);
+}
 function useTimer(ms, cb) {
   let timer = null;
   const waiting = ref(false);
@@ -31,10 +36,18 @@ function useMediaQuery(query, onChange) {
   };
   const startWatch = () => {
     stopWatch();
-    mediaQuery.addEventListener("change", handleChange);
+    if ("addEventListener" in mediaQuery) {
+      mediaQuery.addEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+    }
   };
   const stopWatch = () => {
-    mediaQuery.removeEventListener("change", handleChange);
+    if ("removeEventListener" in mediaQuery) {
+      mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.removeListener(handleChange);
+    }
     handleChange();
   };
   onBeforeUnmount(() => {
@@ -253,11 +266,52 @@ function useMoveEvent(option) {
     handleTouchstart
   };
 }
+function useSortable(getEl, getData, updateData, options) {
+  let sortableIns = null;
+  const destroySortable = () => {
+    if (sortableIns != null) {
+      sortableIns.destroy();
+    }
+    sortableIns = null;
+  };
+  const initSortable = () => {
+    destroySortable();
+    const el = getEl();
+    if (el == null) {
+      return;
+    }
+    sortableIns = new SortableJs(el, {
+      onUpdate: ({ oldDraggableIndex, newDraggableIndex }) => {
+        if (typeof oldDraggableIndex === "number" && typeof newDraggableIndex === "number") {
+          const data = [...getData() || []];
+          data.splice(
+            newDraggableIndex,
+            0,
+            data.splice(oldDraggableIndex, 1)[0]
+          );
+          updateData(data);
+        }
+      },
+      setData: () => {
+      },
+      ...options || {}
+    });
+  };
+  onMounted(() => {
+    initSortable();
+  });
+  onBeforeUnmount(() => {
+    destroySortable();
+  });
+  return { initSortable, destroySortable };
+}
 export {
   useCollapseAnim,
+  useFormItemRest,
   useMediaQuery,
   useMousewheel,
   useMoveEvent,
+  useSortable,
   useTimer,
   useTouchEvent,
   useWindowListener

package/lib/ele-app/components/form-item-rest.cjs

@@ -1,10 +1,10 @@
 "use strict";
 const vue = require("vue");
-const elementPlus = require("element-plus");
+const hook = require("../../utils/hook");
 const formItemRest = vue.defineComponent({
   name: "FormItemRest",
   setup(_props, { slots }) {
-    vue.provide(elementPlus.formItemContextKey, null);
+    hook.useFormItemRest();
     return () => {
       var _a;
       return (_a = slots.default) == null ? void 0 : _a.call(slots);

package/lib/ele-cropper/components/cropper-tools.cjs

@@ -169,7 +169,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 accept: _ctx.accept,
                 showFileList: false,
                 beforeUpload: _ctx.handleUpload,
-                style: { "display": "inline-block", "line-height": "0" }
+                class: "ele-cropper-tool-upload"
               }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(_component_ElButton, {

package/lib/ele-cropper/style/index.scss

@@ -68,12 +68,21 @@
 }
 
 .ele-cropper-tool-item {
-  margin: 10px 14px 0 0;
+  margin: 10px 10px 0 0;
   vertical-align: top;
 
   &:last-child {
     margin-right: 0;
   }
+
+  & > .ele-cropper-tool-upload {
+    float: left;
+  }
+
+  .ele-cropper-tool-upload {
+    line-height: 0;
+    display: inline-block;
+  }
 }
 
 .ele-cropper-tool {

package/lib/ele-menus/components/item-title.cjs

@@ -53,7 +53,7 @@ const _hoisted_1 = {
   key: 0,
   class: "ele-menu-title"
 };
-const _hoisted_2 = ["href"];
+const _hoisted_2 = ["href", "target"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElIcon = vue.resolveComponent("ElIcon");
   const _component_ElBadge = vue.resolveComponent("ElBadge");
@@ -90,15 +90,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _ctx.isExternalLink(_ctx.item.path) ? (vue.openBlock(), vue.createElementBlock("a", {
           key: 0,
           href: _ctx.item.path,
-          target: "_blank",
+          target: _ctx.item.pathTarget || "_blank",
           class: "ele-menu-link",
           onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
           }, ["stop"]))
         }, null, 8, _hoisted_2)) : _ctx.item.path ? (vue.openBlock(), vue.createBlock(_component_RouterLink, {
           key: 1,
           to: _ctx.item.path,
+          target: _ctx.item.pathTarget,
           class: "ele-menu-link"
-        }, null, 8, ["to"])) : vue.createCommentVNode("", true)
+        }, null, 8, ["to", "target"])) : vue.createCommentVNode("", true)
       ], 64)) : vue.createCommentVNode("", true)
     ], 32)
   ], 64);

package/lib/ele-menus/types.d.ts

@@ -28,6 +28,8 @@ export interface MenuItem
   iconStyle?: StyleValue;
   /** 菜单链接地址 */
   path?: string;
+  /** 菜单的打开位置 */
+  pathTarget?: string;
   /** 是否展示为分组菜单 */
   group?: boolean;
   /** 徽章 */

package/lib/ele-split-panel/index.cjs

@@ -123,11 +123,7 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const _hoisted_1 = {
-  ref: "wrapRef",
-  class: "ele-split-panel-wrap"
-};
-const _hoisted_2 = { class: "ele-split-panel-space" };
+const _hoisted_1 = { class: "ele-split-panel-space" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ArrowUp = vue.resolveComponent("ArrowUp");
   const _component_ArrowLeft = vue.resolveComponent("ArrowLeft");
@@ -150,7 +146,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, {
     default: vue.withCtx(() => [
-      vue.createElementVNode("div", _hoisted_1, [
+      vue.createElementVNode("div", {
+        ref: "wrapRef",
+        class: "ele-split-panel-wrap",
+        style: vue.normalizeStyle(_ctx.customWrapStyle)
+      }, [
         vue.createElementVNode("div", {
           ref: "sideRef",
           class: "ele-split-panel-side",
@@ -158,14 +158,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, [
           vue.renderSlot(_ctx.$slots, "default")
         ], 4),
-        vue.createElementVNode("div", _hoisted_2, [
+        vue.createElementVNode("div", _hoisted_1, [
           _ctx.resizable ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             class: "ele-split-resize-line",
             onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleResize && _ctx.handleResize(...args))
           }, null, 32)) : vue.createCommentVNode("", true)
         ])
-      ], 512),
+      ], 4),
       vue.createElementVNode("div", {
         class: "ele-split-panel-body",
         style: vue.normalizeStyle(_ctx.bodyStyle)

package/lib/ele-split-panel/index.d.ts

@@ -6,6 +6,7 @@ declare const _default: import('vue').DefineComponent<{
     maxSize: NumberConstructor;
     space: StringConstructor;
     customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    customWrapStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     allowCollapse: BooleanConstructor;
     collapseStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
@@ -37,6 +38,7 @@ declare const _default: import('vue').DefineComponent<{
     maxSize: NumberConstructor;
     space: StringConstructor;
     customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    customWrapStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     allowCollapse: BooleanConstructor;
     collapseStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;

package/lib/ele-split-panel/props.cjs

@@ -9,8 +9,10 @@ const splitPanelProps = {
   maxSize: Number,
   /** 间距 */
   space: String,
-  /** 自定义样式 */
+  /** 自定义边栏样式 */
   customStyle: Object,
+  /** 自定义边栏容器样式 */
+  customWrapStyle: Object,
   /** 自定义内容样式 */
   bodyStyle: Object,
   /** 是否可折叠 */

package/lib/ele-split-panel/props.d.ts

@@ -13,8 +13,10 @@ export declare const splitPanelProps: {
     maxSize: NumberConstructor;
     /** 间距 */
     space: StringConstructor;
-    /** 自定义样式 */
+    /** 自定义边栏样式 */
     customStyle: PropType<StyleValue>;
+    /** 自定义边栏容器样式 */
+    customWrapStyle: PropType<StyleValue>;
     /** 自定义内容样式 */
     bodyStyle: PropType<StyleValue>;
     /** 是否可折叠 */

package/lib/ele-tabs/style/index.scss

@@ -1043,8 +1043,6 @@
 /* 内部表格高度铺满 */
 .ele-tabs.is-flex-table {
   flex: 1;
-  display: flex;
-  flex-direction: column;
   overflow: auto;
 
   & > .el-tabs__content {
@@ -1056,6 +1054,7 @@
       display: flex;
       flex-direction: column;
       box-sizing: border-box;
+      overflow: auto;
 
       & > .ele-pro-table {
         flex: 1;

package/lib/utils/hook.cjs

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
+const elementPlus = require("element-plus");
+const SortableJs = require("sortablejs");
+function useFormItemRest() {
+  vue.provide(elementPlus.formItemContextKey, null);
+}
 function useTimer(ms, cb) {
   let timer = null;
   const waiting = vue.ref(false);
@@ -33,10 +38,18 @@ function useMediaQuery(query, onChange) {
   };
   const startWatch = () => {
     stopWatch();
-    mediaQuery.addEventListener("change", handleChange);
+    if ("addEventListener" in mediaQuery) {
+      mediaQuery.addEventListener("change", handleChange);
+    } else {
+      mediaQuery.addListener(handleChange);
+    }
   };
   const stopWatch = () => {
-    mediaQuery.removeEventListener("change", handleChange);
+    if ("removeEventListener" in mediaQuery) {
+      mediaQuery.removeEventListener("change", handleChange);
+    } else {
+      mediaQuery.removeListener(handleChange);
+    }
     handleChange();
   };
   vue.onBeforeUnmount(() => {
@@ -255,10 +268,51 @@ function useMoveEvent(option) {
     handleTouchstart
   };
 }
+function useSortable(getEl, getData, updateData, options) {
+  let sortableIns = null;
+  const destroySortable = () => {
+    if (sortableIns != null) {
+      sortableIns.destroy();
+    }
+    sortableIns = null;
+  };
+  const initSortable = () => {
+    destroySortable();
+    const el = getEl();
+    if (el == null) {
+      return;
+    }
+    sortableIns = new SortableJs(el, {
+      onUpdate: ({ oldDraggableIndex, newDraggableIndex }) => {
+        if (typeof oldDraggableIndex === "number" && typeof newDraggableIndex === "number") {
+          const data = [...getData() || []];
+          data.splice(
+            newDraggableIndex,
+            0,
+            data.splice(oldDraggableIndex, 1)[0]
+          );
+          updateData(data);
+        }
+      },
+      setData: () => {
+      },
+      ...options || {}
+    });
+  };
+  vue.onMounted(() => {
+    initSortable();
+  });
+  vue.onBeforeUnmount(() => {
+    destroySortable();
+  });
+  return { initSortable, destroySortable };
+}
 exports.useCollapseAnim = useCollapseAnim;
+exports.useFormItemRest = useFormItemRest;
 exports.useMediaQuery = useMediaQuery;
 exports.useMousewheel = useMousewheel;
 exports.useMoveEvent = useMoveEvent;
+exports.useSortable = useSortable;
 exports.useTimer = useTimer;
 exports.useTouchEvent = useTouchEvent;
 exports.useWindowListener = useWindowListener;

package/lib/utils/hook.d.ts

@@ -1,5 +1,10 @@
 import { Ref } from 'vue';
+import { default as SortableJs } from 'sortablejs';
 
+/**
+ * 重置组件表单验证
+ */
+export declare function useFormItemRest(): void;
 /**
  * useTimer 返回结果
  */
@@ -111,3 +116,14 @@ export declare function useMoveEvent(option?: UseTouchEventOption<MoveEvent>): {
     handleMousedown: (e: MouseEvent) => void;
     handleTouchstart: (e: TouchEvent) => void;
 };
+/**
+ * 拖拽排序
+ * @param getEl 获取容器方法
+ * @param getData 获取数据方法
+ * @param updateData 更新数据方法
+ * @param options 自定义参数
+ */
+export declare function useSortable<T>(getEl: () => HTMLElement | undefined | null, getData: () => T[] | undefined | null, updateData: (data: T[]) => void, options?: SortableJs.Options): {
+    initSortable: () => void;
+    destroySortable: () => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ele-admin-plus",
-  "version": "1.2.2-beta.1",
+  "version": "1.2.2-beta.2",
   "type": "module",
   "scripts": {
     "dev": "vite --host --config vite.global.ts",