ele-admin-plus 1.5.1-beta.3 → 1.6.0-beta.1

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

@@ -4,61 +4,54 @@
 .ele-cropper {
   .ele-cropper-main {
     display: flex;
+    height: 380px;
+    box-sizing: border-box;
+    overflow: hidden;
   }
 
   .ele-cropper-image {
     flex: 1;
-    height: 300px;
+    height: 100%;
+    border-radius: elVar('border-radius', 'base');
     box-sizing: border-box;
-    position: relative;
-
-    & > img {
-      width: auto;
-      height: auto;
-      max-width: 100%;
-      max-height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  }
+    overflow: hidden;
 
-  .ele-cropper-image,
-  .ele-cropper-image > .cropper-container,
-  .ele-cropper-image > .cropper-container > .cropper-wrap-box,
-  .ele-cropper-image > .cropper-container > .cropper-drag-box {
-    border-radius: elVar('border-radius', 'base');
-  }
+    & > cropper-canvas {
+      width: 100%;
+      height: 100%;
+    }
 
-  .ele-cropper-image > .cropper-container > .cropper-wrap-box,
-  .ele-cropper-image > .cropper-container > .cropper-drag-box {
-    overflow: hidden;
+    cropper-shade {
+      outline-style: solid;
+      outline-color: rgba(0, 0, 0, 0.6);
+    }
   }
 
   .ele-cropper-previews {
     flex-shrink: 0;
-    text-align: right;
-    font-size: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    box-sizing: border-box;
+    margin-left: 14px;
   }
 
   .ele-cropper-preview {
-    margin-top: 16px;
-    display: inline-block;
+    flex-shrink: 0;
+    width: 100%;
+    margin-bottom: 12px;
     box-sizing: border-box;
     border-radius: elVar('border-radius', 'base');
     border: 1px solid elVar('border-color', 'light');
-    vertical-align: top;
     overflow: hidden;
 
     &.is-circle {
       border-radius: 50%;
     }
-  }
-}
 
-@media screen and (max-width: #{$mobile-max-width}) {
-  .ele-cropper.is-responsive .ele-cropper-previews {
-    display: none;
+    &.is-small {
+      width: 60%;
+    }
   }
 }
 
@@ -115,6 +108,10 @@
 }
 
 @media screen and (max-width: #{$mobile-max-width}) {
+  .ele-cropper.is-responsive .ele-cropper-previews {
+    display: none;
+  }
+
   .ele-cropper.is-responsive .ele-cropper-tool-item:not(:last-child) {
     margin-right: 6px;
   }

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

@@ -1,15 +1,4 @@
 import type { Component } from 'vue';
-import type Cropper from 'cropperjs';
-
-/**
- * 上传事件参数
- */
-export interface UploadOption {
-  /** 文件数据 */
-  data?: string | ArrayBuffer | null;
-  /** 文件类型 */
-  type: string;
-}
 
 /**
  * 操作按钮名称
@@ -54,27 +43,13 @@ export interface ToolGroup {
 }
 
 /**
- * 裁剪组件参数
- */
-export type CropperOptions = Partial<Cropper.Options<HTMLImageElement>> | null;
-
-/**
- * 裁剪方法参数
- */
-export type CroppedOptions = Partial<Cropper.GetCroppedCanvasOptions> | null;
-
-/**
- * 实例状态
+ * 上传事件参数
  */
-export interface CurrentState {
-  /** 裁剪组件实例 */
-  instance?: Cropper | null;
-  /** 当前图片类型 */
-  imageType?: string;
-  /** 水平翻转值 */
-  scaleXValue: number;
-  /** 垂直翻转值 */
-  scaleYValue: number;
+export interface UploadOption {
+  /** 文件数据 */
+  data?: string | null;
+  /** 文件类型 */
+  type: string;
 }
 
 /**

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

@@ -16,12 +16,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const updateModelValue = (value) => {
       emit("update:modelValue", value);
     };
+    const handleInit = (cropperInstance) => {
+      emit("init", cropperInstance);
+    };
     const handleDone = (result) => {
       emit("done", result);
     };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(EleModal, vue.mergeProps({
-        width: "620px",
+        width: "660px",
         title: vue.unref(lang).title
       }, _ctx.modalProps || {}, {
         modelValue: _ctx.modelValue,
@@ -39,44 +42,26 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             toBlob: _ctx.toBlob,
             options: _ctx.options,
             croppedOptions: _ctx.croppedOptions,
+            aspectRatio: _ctx.aspectRatio,
             tooltip: _ctx.tooltip,
             tooltipProps: _ctx.tooltipProps,
             beforeUploadClick: _ctx.beforeUploadClick,
             responsive: _ctx.responsive,
             locale: _ctx.locale,
+            onInit: handleInit,
             onDone: handleDone
-          }, null, 8, ["height", "src", "imageType", "accept", "tools", "preview", "previewWidth", "toBlob", "options", "croppedOptions", "tooltip", "tooltipProps", "beforeUploadClick", "responsive", "locale"])
+          }, null, 8, ["height", "src", "imageType", "accept", "tools", "preview", "previewWidth", "toBlob", "options", "croppedOptions", "aspectRatio", "tooltip", "tooltipProps", "beforeUploadClick", "responsive", "locale"])
         ]),
         _: 2
       }, [
-        _ctx.$slots.header ? {
-          name: "header",
-          fn: vue.withCtx((slotProps) => [
-            vue.renderSlot(_ctx.$slots, "header", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-          ]),
-          key: "0"
-        } : void 0,
-        _ctx.$slots.footer ? {
-          name: "footer",
-          fn: vue.withCtx((slotProps) => [
-            vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-          ]),
-          key: "1"
-        } : void 0,
-        _ctx.$slots.maxIcon ? {
-          name: "maxIcon",
-          fn: vue.withCtx((slotProps) => [
-            vue.renderSlot(_ctx.$slots, "maxIcon", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-          ]),
-          key: "2"
-        } : void 0,
-        _ctx.$slots.closeIcon ? {
-          name: "closeIcon",
-          fn: vue.withCtx((slotProps) => [
-            vue.renderSlot(_ctx.$slots, "closeIcon", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-          ]),
-          key: "3"
-        } : void 0
+        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, ["title", "modelValue"]);
     };
   }

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

@@ -1,15 +1,6 @@
-declare function __VLS_template(): {
-    header?(_: {
-        close: () => void;
-        titleId: string;
-        titleClass: string;
-    }): any;
-    footer?(_: {}): any;
-    maxIcon?(_: {
-        fullscreen: boolean;
-    }): any;
-    closeIcon?(_: {}): any;
-};
+import { default as Cropper } from 'cropperjs';
+
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>>;
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     modelValue: BooleanConstructor;
     modalProps: import('vue').PropType<Partial<Omit<import('../ele-app/plus').EleModalProps, "modelValue">>>;
@@ -36,8 +27,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: number;
     };
     toBlob: BooleanConstructor;
-    options: import('vue').PropType<import('../ele-cropper/types').CropperOptions>;
-    croppedOptions: import('vue').PropType<import('../ele-cropper/types').CroppedOptions>;
+    options: import('vue').PropType<import('cropperjs').CropperOptions>;
+    croppedOptions: import('vue').PropType<Parameters<import('cropperjs').CropperSelection["$toCanvas"]>[0]>;
+    aspectRatio: NumberConstructor;
     tooltip: {
         type: BooleanConstructor;
         default: boolean;
@@ -50,8 +42,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
     locale: import('vue').PropType<Partial<import('../ele-cropper/types').CropperLocale>>;
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    done: (_result: string | Blob | null) => void;
+    done: (_result?: string | Blob | null | undefined) => void;
     "update:modelValue": (_value: boolean) => void;
+    init: (_cropperInstance: Cropper) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: BooleanConstructor;
     modalProps: import('vue').PropType<Partial<Omit<import('../ele-app/plus').EleModalProps, "modelValue">>>;
@@ -78,8 +71,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: number;
     };
     toBlob: BooleanConstructor;
-    options: import('vue').PropType<import('../ele-cropper/types').CropperOptions>;
-    croppedOptions: import('vue').PropType<import('../ele-cropper/types').CroppedOptions>;
+    options: import('vue').PropType<import('cropperjs').CropperOptions>;
+    croppedOptions: import('vue').PropType<Parameters<import('cropperjs').CropperSelection["$toCanvas"]>[0]>;
+    aspectRatio: NumberConstructor;
     tooltip: {
         type: BooleanConstructor;
         default: boolean;
@@ -92,15 +86,16 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
     locale: import('vue').PropType<Partial<import('../ele-cropper/types').CropperLocale>>;
 }>> & Readonly<{
-    onDone?: ((_result: string | Blob | null) => any) | undefined;
+    onDone?: ((_result?: string | Blob | null | undefined) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
+    onInit?: ((_cropperInstance: Cropper) => any) | undefined;
 }>, {
     modelValue: boolean;
     tooltip: boolean;
     responsive: boolean;
-    tools: string;
-    preview: boolean;
     accept: string;
+    preview: boolean;
+    tools: string;
     imageType: string;
     previewWidth: number;
     toBlob: boolean;

package/lib/ele-cropper-modal/props.cjs

@@ -9,8 +9,7 @@ const cropperModalProps = {
   modalProps: Object
 };
 const cropperModalEmits = {
-  /** 裁剪完成事件 */
-  done: (_result) => true,
+  ...props.cropperEmits,
   /** 更新弹窗显示状态 */
   "update:modelValue": (_value) => true
 };

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

@@ -32,8 +32,9 @@ export declare const cropperModalProps: {
         default: number;
     };
     toBlob: BooleanConstructor;
-    options: PropType<import('../ele-cropper/types').CropperOptions>;
-    croppedOptions: PropType<import('../ele-cropper/types').CroppedOptions>;
+    options: PropType<import('cropperjs').CropperOptions>;
+    croppedOptions: PropType<Parameters<import('cropperjs').CropperSelection["$toCanvas"]>[0]>;
+    aspectRatio: NumberConstructor;
     tooltip: {
         type: BooleanConstructor;
         default: boolean;
@@ -51,8 +52,8 @@ export type CropperModalProps = ExtractPropTypes<typeof cropperModalProps>;
  * 事件
  */
 export declare const cropperModalEmits: {
-    /** 裁剪完成事件 */
-    done: (_result: Blob | string | null) => boolean;
     /** 更新弹窗显示状态 */
     'update:modelValue': (_value: boolean) => boolean;
+    init: (_cropperInstance: import('cropperjs').default) => boolean;
+    done: (_result?: Blob | string | null) => boolean;
 };

package/lib/ele-crud/components/edit-modal.cjs

@@ -181,7 +181,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         btnItems.value.length ? {
           name: "footer",
           fn: vue.withCtx(() => [
-            vue.createVNode(EleButtons, { items: btnItems.value }, null, 8, ["items"])
+            vue.createVNode(vue.unref(EleButtons), { items: btnItems.value }, null, 8, ["items"])
           ]),
           key: "0"
         } : void 0,

package/lib/ele-crud-builder/style/index.scss

@@ -93,7 +93,7 @@
   overflow: auto;
 }
 
-.ele-crud-builder-header-tool {
+.ele-crud-builder-header-tool.el-icon {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
@@ -337,7 +337,7 @@
   z-index: 1;
 }
 
-.ele-crud-builder-field-item-arrow {
+.ele-crud-builder-field-item-arrow.el-icon {
   flex-shrink: 0;
   width: 16px;
   height: 16px;
@@ -362,8 +362,8 @@
   }
 }
 
-.ele-crud-builder-field-item-tool,
-.ele-crud-builder-field-item-handle {
+.ele-crud-builder-field-item-tool.el-icon,
+.ele-crud-builder-field-item-handle.el-icon {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
@@ -384,7 +384,7 @@
   }
 }
 
-.ele-crud-builder-field-item-handle {
+.ele-crud-builder-field-item-handle.el-icon {
   cursor: move;
 }
 
@@ -663,8 +663,8 @@
     #{eleVarName('tab-bar', 'height')}: 32px;
 
     .ele-tab-item {
-      font-weight: bold;
-      font-family: monospace;
+      font-weight: 500;
+      font-family: $logo-family;
     }
 
     &::before {
@@ -682,6 +682,11 @@
   align-items: flex-start;
   #{eleVarName('scrollbar', 'color')}: #5e5e5e;
   #{eleVarName('scrollbar', 'hover-color')}: #707070;
+
+  & > .ele-code-viewer {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .ele-crud-builder-code-pre {
@@ -689,13 +694,13 @@
   margin: 0;
   padding: 12px;
   box-sizing: border-box;
-  font-family: monospace;
+  font-family: $code-family;
 }
 
 .ele-crud-builder-code-line-numbers {
   flex-shrink: 0;
   color: #8b949e;
-  font-family: monospace;
+  font-family: $code-family;
   padding: 12px 0;
   min-width: 38px;
   background: #1e1e1e;
@@ -707,7 +712,7 @@
   left: 0;
 }
 
-.ele-crud-builder-code-icon-tool {
+.ele-crud-builder-code-icon-tool.el-icon {
   flex-shrink: 0;
   width: 22px;
   height: 22px;

package/lib/ele-data-table/index.cjs

@@ -64,8 +64,9 @@ const index = /* @__PURE__ */ vue.defineComponent({
     };
     const handleHeaderClick = (column, e) => {
       if (column.sortable && column.filters) {
+        const targetEl = e.target;
         const el = e.currentTarget;
-        if (el) {
+        if (el && targetEl && !targetEl.classList.contains("el-table__column-filter-trigger")) {
           const caretEl = el.querySelector(".caret-wrapper");
           caretEl && caretEl.dispatchEvent(new MouseEvent("click"));
         }