ele-admin-plus 1.0.0-beta.1

package/lib/ele-qr-code/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//

package/lib/ele-qr-code/types/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 容错等级
+ */
+export type Level = 'L' | 'M' | 'Q' | 'H';
+/**
+ * 自定义图片参数
+ */
+export interface ImageSettings {
+    src?: string;
+    height?: number;
+    width?: number;
+    x?: number;
+    y?: number;
+    excavate?: boolean;
+}
+/**
+ * 二维码数据
+ */
+export type Modules = boolean[][];
+/**
+ * 擦除区域
+ */
+export interface Excavation {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}

package/lib/ele-qr-code/util.d.ts

@@ -0,0 +1,26 @@
+import qrcodegen from './qrcodegen';
+import type { ImageSettings, Modules, Excavation } from './types';
+export declare const ERROR_LEVEL_MAP: {
+    L: qrcodegen.QrCode.Ecc;
+    M: qrcodegen.QrCode.Ecc;
+    Q: qrcodegen.QrCode.Ecc;
+    H: qrcodegen.QrCode.Ecc;
+};
+export declare const DEFAULT_IMG_SCALE = 0.1;
+export declare const SUPPORTS_PATH2D: boolean;
+/**
+ * 获取自定义
+ * @param imageSettings 图片参数
+ * @param size 二维码尺寸
+ * @param margin 二维码间距
+ * @param cells 二维码数据
+ */
+export declare function getImageSettings(imageSettings: ImageSettings | undefined | null, size: number, margin: number, cells: Modules): null | {
+    x: number;
+    y: number;
+    h: number;
+    w: number;
+    excavation: Excavation | null;
+};
+export declare function excavateModules(modules: Modules, excavation: Excavation): Modules;
+export declare function generatePath(modules: Modules, margin?: number): string;

package/lib/ele-qr-code/util.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const qrcodegen = require("./qrcodegen");
+const ERROR_LEVEL_MAP = {
+  L: qrcodegen.QrCode.Ecc.LOW,
+  M: qrcodegen.QrCode.Ecc.MEDIUM,
+  Q: qrcodegen.QrCode.Ecc.QUARTILE,
+  H: qrcodegen.QrCode.Ecc.HIGH
+};
+const DEFAULT_IMG_SCALE = 0.1;
+const SUPPORTS_PATH2D = function() {
+  try {
+    new Path2D().addPath(new Path2D());
+  } catch (e) {
+    return false;
+  }
+  return true;
+}();
+function getImageSettings(imageSettings, size, margin, cells) {
+  if (imageSettings == null || !imageSettings.src) {
+    return null;
+  }
+  const numCells = cells.length + margin * 2;
+  const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
+  const scale = numCells / size;
+  const w = (imageSettings.width || defaultSize) * scale;
+  const h = (imageSettings.height || defaultSize) * scale;
+  const x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale;
+  const y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale;
+  let excavation = null;
+  if (imageSettings.excavate) {
+    const floorX = Math.floor(x);
+    const floorY = Math.floor(y);
+    const ceilW = Math.ceil(w + x - floorX);
+    const ceilH = Math.ceil(h + y - floorY);
+    excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
+  }
+  return { x, y, h, w, excavation };
+}
+function excavateModules(modules, excavation) {
+  return modules.slice().map((row, y) => {
+    if (y < excavation.y || y >= excavation.y + excavation.h) {
+      return row;
+    }
+    return row.map((cell, x) => {
+      if (x < excavation.x || x >= excavation.x + excavation.w) {
+        return cell;
+      }
+      return false;
+    });
+  });
+}
+function generatePath(modules, margin = 0) {
+  const ops = [];
+  modules.forEach(function(row, y) {
+    let start = null;
+    row.forEach(function(cell, x) {
+      if (!cell && start !== null) {
+        ops.push(
+          `M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`
+        );
+        start = null;
+        return;
+      }
+      if (x === row.length - 1) {
+        if (!cell) {
+          return;
+        }
+        if (start === null) {
+          ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
+        } else {
+          ops.push(
+            `M${start + margin},${y + margin} h${x + 1 - start}v1H${start + margin}z`
+          );
+        }
+        return;
+      }
+      if (cell && start === null) {
+        start = x;
+      }
+    });
+  });
+  return ops.join("");
+}
+exports.DEFAULT_IMG_SCALE = DEFAULT_IMG_SCALE;
+exports.ERROR_LEVEL_MAP = ERROR_LEVEL_MAP;
+exports.SUPPORTS_PATH2D = SUPPORTS_PATH2D;
+exports.excavateModules = excavateModules;
+exports.generatePath = generatePath;
+exports.getImageSettings = getImageSettings;

package/lib/ele-qr-code-svg/index.d.ts

@@ -0,0 +1,70 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    value: StringConstructor;
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    level: {
+        type: import("vue").PropType<import("../ele-qr-code/types").Level>;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    imageSettings: import("vue").PropType<import("../ele-qr-code/types").ImageSettings>;
+    customStyle: import("vue").PropType<import("vue").CSSProperties>;
+}, {
+    viewBox: import("vue").Ref<string>;
+    path: import("vue").Ref<string>;
+    fgPath: import("vue").Ref<string>;
+    imageHeight: import("vue").Ref<number>;
+    imageWidth: import("vue").Ref<number>;
+    imageX: import("vue").Ref<number>;
+    imageY: import("vue").Ref<number>;
+    imageSrc: import("vue").ComputedRef<string | undefined>;
+    render: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    done: () => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: StringConstructor;
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    level: {
+        type: import("vue").PropType<import("../ele-qr-code/types").Level>;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    imageSettings: import("vue").PropType<import("../ele-qr-code/types").ImageSettings>;
+    customStyle: import("vue").PropType<import("vue").CSSProperties>;
+}>> & {
+    onDone?: (() => any) | undefined;
+}, {
+    size: number;
+    level: import("../ele-qr-code/types").Level;
+    bgColor: string;
+    fgColor: string;
+    margin: number;
+}, {}>;
+export default _sfc_main;

package/lib/ele-qr-code-svg/index.js

@@ -0,0 +1,129 @@
+"use strict";
+const vue = require("vue");
+const qrcodegen = require("../ele-qr-code/qrcodegen");
+const util = require("../ele-qr-code/util");
+const props = require("../ele-qr-code/props");
+const _sfc_main = vue.defineComponent({
+  name: "EleQrCodeSvg",
+  props: props.qrCodeProps,
+  emits: props.qrCodeEmits,
+  setup(props2, { emit }) {
+    const viewBox = vue.ref("");
+    const path = vue.ref("");
+    const fgPath = vue.ref("");
+    const imageHeight = vue.ref(0);
+    const imageWidth = vue.ref(0);
+    const imageX = vue.ref(0);
+    const imageY = vue.ref(0);
+    const imageSrc = vue.computed(
+      () => {
+        var _a;
+        return (_a = props2.imageSettings) == null ? void 0 : _a.src;
+      }
+    );
+    const render = () => {
+      const { value, size, level, margin, imageSettings } = props2;
+      if (!value) {
+        viewBox.value = "";
+        return;
+      }
+      let cells = qrcodegen.QrCode.encodeText(
+        value,
+        util.ERROR_LEVEL_MAP[level]
+      ).getModules();
+      const numCells = cells.length + margin * 2;
+      const calculatedImageSettings = util.getImageSettings(
+        imageSettings,
+        size,
+        margin,
+        cells
+      );
+      if (imageSettings != null && calculatedImageSettings != null) {
+        if (calculatedImageSettings.excavation != null) {
+          cells = util.excavateModules(cells, calculatedImageSettings.excavation);
+        }
+        imageHeight.value = calculatedImageSettings.h;
+        imageWidth.value = calculatedImageSettings.w;
+        imageX.value = calculatedImageSettings.x + margin;
+        imageY.value = calculatedImageSettings.y + margin;
+      }
+      viewBox.value = `0 0 ${numCells} ${numCells}`;
+      path.value = `M0,0 h${numCells}v${numCells}H0z`;
+      fgPath.value = util.generatePath(cells, margin);
+      emit("done");
+    };
+    vue.watch(
+      [
+        () => props2.value,
+        () => props2.size,
+        () => props2.level,
+        () => props2.margin
+      ],
+      () => {
+        render();
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => props2.imageSettings,
+      () => {
+        render();
+      },
+      { deep: true }
+    );
+    return {
+      viewBox,
+      path,
+      fgPath,
+      imageHeight,
+      imageWidth,
+      imageX,
+      imageY,
+      imageSrc,
+      render
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-qr-code" };
+const _hoisted_2 = ["height", "width", "viewBox"];
+const _hoisted_3 = ["fill", "d"];
+const _hoisted_4 = ["fill", "d"];
+const _hoisted_5 = ["xlink:href", "height", "width", "x", "y"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+    _ctx.viewBox ? (vue.openBlock(), vue.createElementBlock("svg", {
+      key: 0,
+      shapeRendering: "crispEdges",
+      height: _ctx.size,
+      width: _ctx.size,
+      viewBox: _ctx.viewBox
+    }, [
+      vue.createElementVNode("path", {
+        fill: _ctx.bgColor,
+        d: _ctx.path
+      }, null, 8, _hoisted_3),
+      vue.createElementVNode("path", {
+        fill: _ctx.fgColor,
+        d: _ctx.fgPath
+      }, null, 8, _hoisted_4),
+      _ctx.imageSrc ? (vue.openBlock(), vue.createElementBlock("image", {
+        key: 0,
+        "xlink:href": _ctx.imageSrc,
+        height: _ctx.imageHeight,
+        width: _ctx.imageWidth,
+        x: _ctx.imageX,
+        y: _ctx.imageY,
+        preserveAspectRatio: "none"
+      }, null, 8, _hoisted_5)) : vue.createCommentVNode("", true)
+    ], 8, _hoisted_2)) : vue.createCommentVNode("", true)
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-qr-code-svg/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//

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

@@ -0,0 +1,61 @@
+import type { CSSProperties } from 'vue';
+declare const _sfc_main: import("vue").DefineComponent<{
+    size: StringConstructor;
+    minSize: NumberConstructor;
+    maxSize: NumberConstructor;
+    space: StringConstructor;
+    customStyle: import("vue").PropType<CSSProperties>;
+    bodyStyle: import("vue").PropType<CSSProperties>;
+    allowCollapse: BooleanConstructor;
+    collapseStyle: import("vue").PropType<CSSProperties>;
+    collapse: BooleanConstructor;
+    vertical: BooleanConstructor;
+    reverse: BooleanConstructor;
+    resizable: BooleanConstructor;
+    flexTable: BooleanConstructor;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+}, {
+    rootRef: import("vue").Ref<HTMLElement | null>;
+    wrapRef: import("vue").Ref<HTMLElement | null>;
+    sideRef: import("vue").Ref<HTMLElement | null>;
+    isResponsive: import("vue").ComputedRef<boolean>;
+    isCollapse: import("vue").Ref<boolean>;
+    resizing: import("vue").Ref<boolean>;
+    rootStyle: import("vue").ComputedRef<CSSProperties>;
+    toggleCollapse: (collapse?: boolean) => void;
+    onResize: (event: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:collapse': (_collapse: boolean) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: StringConstructor;
+    minSize: NumberConstructor;
+    maxSize: NumberConstructor;
+    space: StringConstructor;
+    customStyle: import("vue").PropType<CSSProperties>;
+    bodyStyle: import("vue").PropType<CSSProperties>;
+    allowCollapse: BooleanConstructor;
+    collapseStyle: import("vue").PropType<CSSProperties>;
+    collapse: BooleanConstructor;
+    vertical: BooleanConstructor;
+    reverse: BooleanConstructor;
+    resizable: BooleanConstructor;
+    flexTable: BooleanConstructor;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+}>> & {
+    "onUpdate:collapse"?: ((_collapse: boolean) => any) | undefined;
+}, {
+    reverse: boolean;
+    allowCollapse: boolean;
+    collapse: boolean;
+    vertical: boolean;
+    resizable: boolean;
+    flexTable: boolean;
+    responsive: boolean;
+}, {}>;
+export default _sfc_main;

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

@@ -0,0 +1,170 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const iconsVue = require("@element-plus/icons-vue");
+const licenseUtil = require("../utils/license-util");
+const useReceiver = require("../ele-config-provider/use-receiver");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleSplitPanel",
+  components: { ElIcon: elementPlus.ElIcon, ArrowLeft: iconsVue.ArrowLeft, ArrowUp: iconsVue.ArrowUp },
+  props: props.splitPanelProps,
+  emits: props.splitPanelEmits,
+  setup(props2, { emit }) {
+    const { authenticated } = licenseUtil.useLicense();
+    const isResponsive = useReceiver.useResponsive(props2);
+    const rootRef = vue.ref(null);
+    const wrapRef = vue.ref(null);
+    const sideRef = vue.ref(null);
+    const isCollapse = vue.ref(false);
+    const resizedSize = vue.ref(null);
+    const resizing = vue.ref(false);
+    const rootStyle = vue.computed(() => {
+      return {
+        "--ele-split-size": resizedSize.value ?? props2.size,
+        "--ele-split-space": props2.space
+      };
+    });
+    const toggleCollapse = (collapse) => {
+      if (!authenticated.value) {
+        console.warn(licenseUtil.UNAUTHORIZED_TIP);
+        return;
+      }
+      isCollapse.value = typeof collapse === "boolean" ? collapse : !isCollapse.value;
+      emit("update:collapse", isCollapse.value);
+    };
+    const getMaxSize = (el) => {
+      const size = props2.vertical ? el.clientHeight : el.clientWidth;
+      if (!props2.maxSize) {
+        return size;
+      }
+      if (props2.maxSize < 0) {
+        return size + props2.maxSize;
+      } else if (props2.maxSize < 1) {
+        return Math.floor(size * props2.maxSize);
+      }
+      return Math.min(props2.maxSize, size);
+    };
+    const onResize = (event) => {
+      const rootEl = rootRef.value;
+      const sideEl = sideRef.value;
+      if (!authenticated.value || !rootEl || !sideEl) {
+        return;
+      }
+      resizing.value = true;
+      const downX = event.clientX;
+      const downY = event.clientY;
+      const downW = sideEl.clientWidth;
+      const downH = sideEl.clientHeight;
+      const limitMin = props2.minSize || 0;
+      const limitMax = getMaxSize(rootEl);
+      const mousemoveFn = (e) => {
+        const size = props2.vertical ? (props2.reverse ? downY - e.clientY : e.clientY - downY) + downH : (props2.reverse ? downX - e.clientX : e.clientX - downX) + downW;
+        resizedSize.value = (size < limitMin ? limitMin : size > limitMax ? limitMax : size) + "px";
+      };
+      const mouseupFn = () => {
+        resizing.value = false;
+        document.removeEventListener("mousemove", mousemoveFn);
+        document.removeEventListener("mouseup", mouseupFn);
+      };
+      document.addEventListener("mousemove", mousemoveFn);
+      document.addEventListener("mouseup", mouseupFn);
+    };
+    vue.watch(
+      [() => props2.collapse, () => props2.allowCollapse],
+      () => {
+        if (!authenticated.value || !props2.allowCollapse) {
+          isCollapse.value = false;
+        } else {
+          isCollapse.value = props2.collapse;
+        }
+      },
+      { immediate: true }
+    );
+    return {
+      rootRef,
+      wrapRef,
+      sideRef,
+      isResponsive,
+      isCollapse,
+      resizing,
+      rootStyle,
+      toggleCollapse,
+      onResize
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  ref: "wrapRef",
+  class: "ele-split-panel-wrap"
+};
+const _hoisted_2 = { 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");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    ref: "rootRef",
+    class: vue.normalizeClass([
+      "ele-split-panel",
+      { "is-reverse": _ctx.reverse },
+      { "is-vertical": _ctx.vertical },
+      { "is-collapse": _ctx.isCollapse },
+      { "is-resizing": _ctx.resizing },
+      { "is-responsive": _ctx.isResponsive },
+      { "is-flex-table": _ctx.flexTable }
+    ]),
+    style: vue.normalizeStyle(_ctx.rootStyle)
+  }, [
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.createElementVNode("div", {
+        ref: "sideRef",
+        class: "ele-split-panel-side",
+        style: vue.normalizeStyle(_ctx.customStyle)
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 4),
+      vue.createElementVNode("div", _hoisted_2, [
+        _ctx.resizable ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "ele-split-resize-line",
+          onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.onResize && _ctx.onResize(...args))
+        }, null, 32)) : vue.createCommentVNode("", true)
+      ])
+    ], 512),
+    vue.createElementVNode("div", {
+      class: "ele-split-panel-body",
+      style: vue.normalizeStyle(_ctx.bodyStyle)
+    }, [
+      vue.renderSlot(_ctx.$slots, "body", { collapse: _ctx.isCollapse })
+    ], 4),
+    _ctx.allowCollapse ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      style: vue.normalizeStyle(_ctx.collapseStyle),
+      class: "ele-split-collapse-button",
+      onClick: _cache[1] || (_cache[1] = ($event) => _ctx.toggleCollapse())
+    }, [
+      vue.renderSlot(_ctx.$slots, "collapse", { collapse: _ctx.isCollapse }, () => [
+        vue.createVNode(_component_ElIcon, { class: "ele-split-collapse-icon" }, {
+          default: vue.withCtx(() => [
+            _ctx.vertical ? (vue.openBlock(), vue.createBlock(_component_ArrowUp, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_ArrowLeft, { key: 1 }))
+          ]),
+          _: 1
+        })
+      ])
+    ], 4)) : vue.createCommentVNode("", true),
+    vue.createElementVNode("div", {
+      class: "ele-split-panel-mask",
+      onClick: _cache[2] || (_cache[2] = ($event) => _ctx.toggleCollapse())
+    })
+  ], 6);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

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

@@ -0,0 +1,30 @@
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+/**
+ * 属性
+ */
+export declare const splitPanelProps: {
+    size: StringConstructor;
+    minSize: NumberConstructor;
+    maxSize: NumberConstructor;
+    space: StringConstructor;
+    customStyle: PropType<CSSProperties>;
+    bodyStyle: PropType<CSSProperties>;
+    allowCollapse: BooleanConstructor;
+    collapseStyle: PropType<CSSProperties>;
+    collapse: BooleanConstructor;
+    vertical: BooleanConstructor;
+    reverse: BooleanConstructor;
+    resizable: BooleanConstructor;
+    flexTable: BooleanConstructor;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+};
+export type SplitPanelProps = ExtractPropTypes<typeof splitPanelProps>;
+/**
+ * 事件
+ */
+export declare const splitPanelEmits: {
+    'update:collapse': (_collapse: boolean) => boolean;
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const splitPanelProps = {
+  // 默认大小
+  size: String,
+  // 最小尺寸
+  minSize: Number,
+  // 最大尺寸
+  maxSize: Number,
+  // 间距
+  space: String,
+  // 自定义样式
+  customStyle: Object,
+  // 自定义内容样式
+  bodyStyle: Object,
+  // 是否可折叠
+  allowCollapse: Boolean,
+  // 折叠按钮样式
+  collapseStyle: Object,
+  // 是否折叠
+  collapse: Boolean,
+  // 是否垂直方向
+  vertical: Boolean,
+  // 是否反向布局
+  reverse: Boolean,
+  // 是否可拉伸宽度
+  resizable: Boolean,
+  // 内部表格弹性布局
+  flexTable: Boolean,
+  // 是否开启响应式
+  responsive: {
+    type: Boolean,
+    default: null
+  }
+};
+const splitPanelEmits = {
+  // 更新折叠状态
+  "update:collapse": (_collapse) => true
+};
+exports.splitPanelEmits = splitPanelEmits;
+exports.splitPanelProps = splitPanelProps;

package/lib/ele-split-panel/style/index.js

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