ele-admin-plus 1.3.0-beta.3 → 1.3.0

package/es/ele-viewer/index.js

@@ -0,0 +1,278 @@
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, unref, renderSlot, Fragment, renderList } from "vue";
+import { useMoveEvent, useMousewheel } from "../utils/hook";
+import { getRotatedBounds } from "./util";
+import { viewerProps, viewerEmits } from "./props";
+const _hoisted_1 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "EleViewer" },
+  __name: "index",
+  props: viewerProps,
+  emits: viewerEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const viewerRef = ref(null);
+    const bodyRef = ref(null);
+    const contentRef = ref(null);
+    const viewerMoving = ref(false);
+    const viewerTranslateX = ref(0);
+    const viewerTranslateY = ref(0);
+    const viewerScale = ref(100);
+    const viewerFlipX = ref(false);
+    const viewerFlipY = ref(false);
+    const viewerRotate = ref(0);
+    const imageTransform = computed(() => {
+      const sx = viewerFlipX.value ? -1 : 1;
+      const sy = viewerFlipY.value ? -1 : 1;
+      return `scaleX(${sx}) scaleY(${sy}) rotate(${viewerRotate.value}deg)`;
+    });
+    const scaleReverse = computed(() => {
+      return (100 / viewerScale.value).toFixed(6);
+    });
+    const imageTransformReverse = computed(() => {
+      const sx = viewerFlipX.value ? -1 : 1;
+      const sy = viewerFlipY.value ? -1 : 1;
+      return `scaleX(${sx}) scaleY(${sy}) rotate(${360 - viewerRotate.value}deg)`;
+    });
+    const handleClick = (e) => {
+      emit("contentClick", e);
+    };
+    const handleContextmenu = (e) => {
+      emit("contentContextmenu", e);
+    };
+    const handleImgLoad = () => {
+      autoIntoView();
+    };
+    const getZoomStep = () => {
+      return props.zoomStep;
+    };
+    const zoomIn = () => {
+      if (viewerScale.value >= props.zoomMax) {
+        return;
+      }
+      viewerScale.value += getZoomStep();
+    };
+    const zoomOut = () => {
+      if (viewerScale.value <= props.zoomMin) {
+        return;
+      }
+      viewerScale.value -= getZoomStep();
+    };
+    const flipX = () => {
+      viewerFlipX.value = !viewerFlipX.value;
+    };
+    const flipY = () => {
+      viewerFlipY.value = !viewerFlipY.value;
+    };
+    const rotateLeft = () => {
+      if (viewerRotate.value === 0) {
+        viewerRotate.value = 360 - props.rotateStep;
+        return;
+      }
+      if (viewerRotate.value <= props.rotateStep) {
+        viewerRotate.value = 0;
+        return;
+      }
+      viewerRotate.value -= props.rotateStep;
+    };
+    const rotateRight = () => {
+      if (viewerRotate.value >= 360 - props.rotateStep) {
+        viewerRotate.value = 0;
+        return;
+      }
+      viewerRotate.value += props.rotateStep;
+    };
+    const setTranslateX = (xValue) => {
+      viewerTranslateX.value = xValue;
+    };
+    const setTranslateY = (yValue) => {
+      viewerTranslateY.value = yValue;
+    };
+    const autoIntoView = () => {
+      const pEl = viewerRef.value;
+      const pw = (pEl == null ? void 0 : pEl.offsetWidth) || 0;
+      const ph = (pEl == null ? void 0 : pEl.offsetHeight) || 0;
+      const el = bodyRef.value;
+      const w = (el == null ? void 0 : el.offsetWidth) || 0;
+      const h = (el == null ? void 0 : el.offsetHeight) || 0;
+      viewerTranslateX.value = Math.floor((pw - w) / 2);
+      viewerTranslateY.value = Math.floor((ph - h) / 2);
+      const { width, height } = getRotatedBounds(w, h, viewerRotate.value);
+      viewerScale.value = Math.min(pw / width * 100, ph / height * 100);
+    };
+    const autoIntoViewWidth = () => {
+      const pEl = viewerRef.value;
+      const pw = (pEl == null ? void 0 : pEl.offsetWidth) || 0;
+      const ph = (pEl == null ? void 0 : pEl.offsetHeight) || 0;
+      const el = bodyRef.value;
+      const w = (el == null ? void 0 : el.offsetWidth) || 0;
+      const h = (el == null ? void 0 : el.offsetHeight) || 0;
+      viewerScale.value = pw / w * 100;
+      const sh = h * (viewerScale.value / 100);
+      viewerTranslateX.value = Math.floor((pw - w) / 2);
+      if (sh < ph) {
+        viewerTranslateY.value = Math.floor((ph - h) / 2);
+      } else {
+        viewerTranslateY.value = Math.floor((sh - h) / 2);
+      }
+    };
+    const autoIntoViewHeight = () => {
+      const pEl = viewerRef.value;
+      const pw = (pEl == null ? void 0 : pEl.offsetWidth) || 0;
+      const ph = (pEl == null ? void 0 : pEl.offsetHeight) || 0;
+      const el = bodyRef.value;
+      const w = (el == null ? void 0 : el.offsetWidth) || 0;
+      const h = (el == null ? void 0 : el.offsetHeight) || 0;
+      viewerScale.value = ph / h * 100;
+      const sw = w * (viewerScale.value / 100);
+      if (sw < pw) {
+        viewerTranslateX.value = Math.floor((pw - w) / 2);
+      } else {
+        viewerTranslateX.value = Math.floor((sw - w) / 2);
+      }
+      viewerTranslateY.value = Math.floor((ph - h) / 2);
+    };
+    const reset = () => {
+      viewerFlipX.value = false;
+      viewerFlipY.value = false;
+      viewerRotate.value = 0;
+      autoIntoView();
+    };
+    let startX = null;
+    let startY = null;
+    const { handleMousedown, handleTouchstart } = useMoveEvent({
+      start: ({ e }) => {
+        e.preventDefault();
+        e.stopPropagation();
+        viewerMoving.value = true;
+        startX = viewerTranslateX.value;
+        startY = viewerTranslateY.value;
+      },
+      move: ({ distanceX, distanceY, e }) => {
+        if (startX == null || startY == null || distanceX == null || distanceY == null) {
+          return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        viewerTranslateX.value = Math.floor(distanceX + startX);
+        viewerTranslateY.value = Math.floor(distanceY + startY);
+      },
+      end: () => {
+        startX = null;
+        startY = null;
+        viewerMoving.value = false;
+      },
+      touchmoveOptions: { passive: false }
+    });
+    const { bindMousewheel, unbindMousewheel } = useMousewheel(
+      ({ e, direction }) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (direction === "up") {
+          zoomIn();
+          return;
+        }
+        zoomOut();
+      }
+    );
+    onMounted(() => {
+      viewerRef.value && bindMousewheel(viewerRef.value);
+      autoIntoView();
+    });
+    onBeforeUnmount(() => {
+      viewerRef.value && unbindMousewheel(viewerRef.value);
+    });
+    __expose({
+      viewerMoving,
+      viewerTranslateX,
+      viewerTranslateY,
+      viewerScale,
+      viewerFlipX,
+      viewerFlipY,
+      viewerRotate,
+      zoomIn,
+      zoomOut,
+      flipX,
+      flipY,
+      rotateLeft,
+      rotateRight,
+      setTranslateX,
+      setTranslateY,
+      autoIntoView,
+      autoIntoViewWidth,
+      autoIntoViewHeight,
+      reset
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "viewerRef",
+        ref: viewerRef,
+        class: normalizeClass(["ele-viewer"])
+      }, [
+        createElementVNode("div", {
+          ref_key: "bodyRef",
+          ref: bodyRef,
+          class: "ele-viewer-body",
+          style: normalizeStyle({
+            transform: `translate(${viewerTranslateX.value}px, ${viewerTranslateY.value}px)`
+          })
+        }, [
+          createElementVNode("div", {
+            class: "ele-viewer-main",
+            style: normalizeStyle({ transform: `scale(${(viewerScale.value / 100).toFixed(6)})` })
+          }, [
+            createElementVNode("div", {
+              ref_key: "contentRef",
+              ref: contentRef,
+              class: normalizeClass(["ele-viewer-content", { "is-moving": viewerMoving.value }]),
+              style: normalizeStyle([_ctx.contentStyle || {}, { transform: imageTransform.value }]),
+              onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
+              (...args) => unref(handleMousedown) && unref(handleMousedown)(...args)),
+              onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => unref(handleTouchstart) && unref(handleTouchstart)(...args)),
+              onClick: handleClick,
+              onContextmenu: handleContextmenu
+            }, [
+              _ctx.src ? (openBlock(), createElementBlock("img", {
+                key: 0,
+                src: _ctx.src,
+                class: "ele-viewer-image",
+                style: normalizeStyle(_ctx.imageStyle),
+                onLoad: handleImgLoad
+              }, null, 44, _hoisted_1)) : (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: "ele-viewer-image",
+                style: normalizeStyle(_ctx.imageStyle)
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 4)),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.markers, (marker) => {
+                return openBlock(), createElementBlock("div", {
+                  key: marker.key,
+                  style: normalizeStyle({
+                    left: (marker.x || 0) + "px",
+                    top: (marker.y || 0) + "px",
+                    transform: marker.fixed ? `scale(${scaleReverse.value})` : void 0
+                  }),
+                  class: "ele-viewer-marker"
+                }, [
+                  createElementVNode("div", {
+                    class: "ele-viewer-marker-content",
+                    style: normalizeStyle({
+                      transform: marker.fixed ? imageTransformReverse.value : void 0
+                    })
+                  }, [
+                    renderSlot(_ctx.$slots, "markerItem", { item: marker })
+                  ], 4)
+                ], 4);
+              }), 128))
+            ], 38)
+          ], 4)
+        ], 4)
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-viewer/props.d.ts

@@ -0,0 +1,45 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { MarkerItem } from './types';
+
+/**
+ * 属性
+ */
+export declare const viewerProps: {
+    /** 图片地址 */
+    src: StringConstructor;
+    /** 标记数据 */
+    markers: PropType<MarkerItem[]>;
+    /** 自定义内容样式 */
+    contentStyle: PropType<StyleValue>;
+    /** 自定义内容图片样式 */
+    imageStyle: PropType<StyleValue>;
+    /** 缩放速率 */
+    zoomStep: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 缩放最小百分比 */
+    zoomMin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 缩放最大百分比 */
+    zoomMax: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 每次旋转角度 */
+    rotateStep: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+export type ViewerProps = ExtractPropTypes<typeof viewerProps>;
+/**
+ * 事件
+ */
+export declare const viewerEmits: {
+    contentClick: (_e: MouseEvent) => boolean;
+    contentContextmenu: (_e: MouseEvent) => boolean;
+};

package/es/ele-viewer/props.js

@@ -0,0 +1,38 @@
+const viewerProps = {
+  /** 图片地址 */
+  src: String,
+  /** 标记数据 */
+  markers: Array,
+  /** 自定义内容样式 */
+  contentStyle: Object,
+  /** 自定义内容图片样式 */
+  imageStyle: Object,
+  /** 缩放速率 */
+  zoomStep: {
+    type: Number,
+    default: 10
+  },
+  /** 缩放最小百分比 */
+  zoomMin: {
+    type: Number,
+    default: 20
+  },
+  /** 缩放最大百分比 */
+  zoomMax: {
+    type: Number,
+    default: 400
+  },
+  /** 每次旋转角度 */
+  rotateStep: {
+    type: Number,
+    default: 90
+  }
+};
+const viewerEmits = {
+  contentClick: (_e) => true,
+  contentContextmenu: (_e) => true
+};
+export {
+  viewerEmits,
+  viewerProps
+};

package/es/ele-viewer/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-viewer/style/index.js

@@ -0,0 +1 @@
+import "./index.scss";

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

@@ -0,0 +1,57 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-viewer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  position: relative;
+  user-select: none;
+  background-image: radial-gradient(
+    #{elVar('text-color', 'placeholder')} 8%,
+    #{elVar('bg-color', 'page')} 8%
+  );
+  background-size: 16px 16px;
+  background-repeat: repeat;
+  overflow: hidden;
+}
+
+.ele-viewer-body,
+.ele-viewer-main,
+.ele-viewer-content {
+  flex-shrink: 0;
+  width: max-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  position: relative;
+}
+
+/* 内容 */
+.ele-viewer-content {
+  cursor: grab;
+
+  &.is-moving {
+    cursor: grabbing;
+  }
+
+  & > .ele-viewer-image {
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+
+  /* 标记点 */
+  & > .ele-viewer-marker {
+    flex-shrink: 0;
+    position: absolute;
+    pointer-events: none;
+
+    & > .ele-viewer-marker-content {
+      position: relative;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+/**
+ * 标记项
+ */
+export interface MarkerItem extends Record<string, any> {
+  /** 唯一值 */
+  key?: any;
+  /** 横坐标 */
+  x?: number;
+  /** 纵坐标 */
+  y?: number;
+  /** 是否固定原始尺寸和方向 */
+  fixed?: boolean;
+}

package/es/ele-viewer/util.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 计算旋转后的宽高
+ * @param w 宽
+ * @param h 高
+ * @param r 旋转角度
+ */
+export declare function getRotatedBounds(w: number, h: number, r: number): {
+    width: number;
+    height: number;
+};

package/es/ele-viewer/util.js

@@ -0,0 +1,11 @@
+function getRotatedBounds(w, h, r) {
+  const radians = r * (Math.PI / 180);
+  const cosR = Math.cos(radians);
+  const sinR = Math.sin(radians);
+  const width = Math.abs(w * cosR) + Math.abs(h * sinR);
+  const height = Math.abs(w * sinR) + Math.abs(h * cosR);
+  return { width, height };
+}
+export {
+  getRotatedBounds
+};

package/es/ele-virtual-table/components/body-cell.d.ts

@@ -1,9 +1,8 @@
 import { PropType } from 'vue';
-import { StyleValues } from '../../ele-app/types';
 import { DataItem, Column, TableSize, CellClass, CellStyle, SpanMethod, ShowOverflowTooltip } from '../../ele-data-table/types';
-import { BodyColumn, CustomRenderProps, ColSize } from '../types';
+import { BodyColumn, ColSize } from '../types';
 
-declare const _default: import('vue').DefineComponent<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     /** 列配置 */
     column: {
         type: PropType<BodyColumn>;
@@ -61,36 +60,14 @@ declare const _default: import('vue').DefineComponent<{
     fixedCellHeight: BooleanConstructor;
     /** 表格是否是自适应行高 */
     autoRowHeight: BooleanConstructor;
-}, {
-    colType: import('vue').ComputedRef<string>;
-    cellClass: import('vue').ComputedRef<string>;
-    cellStyle: import('vue').ComputedRef<StyleValues | undefined>;
-    cellText: import('vue').ComputedRef<string | number | undefined>;
-    isExpandCol: import('vue').ComputedRef<boolean>;
-    renderOpt: import('vue').ComputedRef<CustomRenderProps>;
-    handleTextClick: (e: MouseEvent) => void;
-    handleCheckedChange: (checked: boolean) => void;
-    handleExpandChange: () => void;
-    handleClick: (e: MouseEvent) => void;
-    handleDblclick: (e: MouseEvent) => void;
-    handleContextmenu: (e: MouseEvent) => void;
-    handleMouseenter: (e: MouseEvent) => void;
-    handleMouseleave: (e: MouseEvent) => void;
-}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    /** 多选框选中改变事件 */
-    checkedChange: (_checked: boolean) => true;
-    /** 展开状态改变事件 */
-    expandChange: (_expanded: boolean) => true;
-    /** 点击事件 */
-    click: (_col: Column, _e: MouseEvent) => true;
-    /** 双击事件 */
-    dblclick: (_col: Column, _e: MouseEvent) => true;
-    /** 右键事件 */
-    contextmenu: (_col: Column, _e: MouseEvent) => true;
-    /** 鼠标移入事件 */
-    mouseenter: (_col: Column, _e: MouseEvent) => true;
-    /** 鼠标移出事件 */
-    mouseleave: (_col: Column, _e: MouseEvent) => true;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (_col: Column, _e: MouseEvent) => void;
+    contextmenu: (_col: Column, _e: MouseEvent) => void;
+    dblclick: (_col: Column, _e: MouseEvent) => void;
+    mouseenter: (_col: Column, _e: MouseEvent) => void;
+    mouseleave: (_col: Column, _e: MouseEvent) => void;
+    expandChange: (_expanded: boolean) => void;
+    checkedChange: (_checked: boolean) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /** 列配置 */
     column: {
@@ -149,21 +126,21 @@ declare const _default: import('vue').DefineComponent<{
     fixedCellHeight: BooleanConstructor;
     /** 表格是否是自适应行高 */
     autoRowHeight: BooleanConstructor;
-}>> & {
-    onExpandChange?: ((_expanded: boolean) => any) | undefined;
+}>> & Readonly<{
     onClick?: ((_col: Column, _e: MouseEvent) => any) | undefined;
-    onMouseenter?: ((_col: Column, _e: MouseEvent) => any) | undefined;
-    onMouseleave?: ((_col: Column, _e: MouseEvent) => any) | undefined;
     onContextmenu?: ((_col: Column, _e: MouseEvent) => any) | undefined;
     onDblclick?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onMouseenter?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onMouseleave?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onExpandChange?: ((_expanded: boolean) => any) | undefined;
     onCheckedChange?: ((_checked: boolean) => any) | undefined;
-}, {
+}>, {
     loading: boolean;
+    fixedCellHeight: boolean;
+    autoRowHeight: boolean;
     isChecked: boolean;
     isDisabled: boolean;
     hasChildren: boolean;
     isCollapse: boolean;
-    fixedCellHeight: boolean;
-    autoRowHeight: boolean;
-}, {}>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;