ele-admin-plus 1.2.1-beta.2 → 1.2.1-beta.4

package/lib/ele-pro-table/util.d.ts

@@ -1,6 +1,6 @@
 import { ElePaginationProps } from '../ele-app/plus';
 import { DataItem, Column, Columns, Sorter, Filter, TableSize, TreeProps, RowKey, SpanMethod, SummaryMethod } from '../ele-data-table/types';
-import { Pages, Orders, Filters, OrderItem, RequestOption, ResponseOption, TablePagination, DatasourceResult, ResponseResult, ReloadDataResult, ColItem, ProProps, ExportBodyNode, ExportDataItem, ExportDataResult, TableLocale } from './types';
+import { Pages, Orders, Filters, OrderItem, RequestOption, ResponseOption, TablePagination, DatasourceResult, ResponseResult, ReloadDataResult, ColItem, ProProps, ExportBodyNode, ExportDataItem, ExportDataResult, CacheKey, TableLocale } from './types';
 
 /**
  * 合并复合属性
@@ -121,8 +121,9 @@ export declare function getColId(column: Column): string | undefined;
 /**
  * 获取初始显示的列数据
  * @param columns 列数据
+ * @param cacheColsWidth 缓存的列宽
  */
-export declare function getInitColumns(columns: Columns): Columns;
+export declare function getInitColumns(columns: Columns, cacheColsWidth?: ColItem[]): Columns;
 /**
  * 获取初始显示的列数据
  * @param columns 列数据
@@ -138,8 +139,9 @@ export declare function getInitCacheColumns(columns: Columns, cacheKey?: string,
  * @param isHideInCol 用于排序时计算不显示在配置中的列
  * @param filter 强制过滤的列
  * @param reserveUnchecked 是否保留未选中的列
+ * @param cacheColsWidth 缓存的列宽
  */
-export declare function getCheckedColumns(columns: Columns | undefined, cols: ColItem[], sortable: boolean | undefined, isHideInCol: (item: Column) => boolean | undefined, filter?: (item: Column) => boolean, reserveUnchecked?: boolean): Columns;
+export declare function getCheckedColumns(columns: Columns | undefined, cols: ColItem[], sortable: boolean | undefined, isHideInCol?: (item: Column) => boolean | undefined, filter?: (item: Column) => boolean, reserveUnchecked?: boolean, cacheColsWidth?: ColItem[]): Columns;
 /**
  * 获取列展示列表数据
  * @param columns 列配置
@@ -148,32 +150,72 @@ export declare function getCheckedColumns(columns: Columns | undefined, cols: Co
  * @param cacheCols 缓存的列展示列表数据
  * @param sortFixed 是否对固定列排序
  * @param cancelFixed 是否取消固定列
+ * @param cacheColsWidth 缓存的列宽
  */
-export declare function getColItems(columns: Columns | undefined, locale: TableLocale, filter?: (item: Column) => boolean, cacheCols?: ColItem[], sortFixed?: boolean, cancelFixed?: boolean): {
+export declare function getColItems(columns: Columns | undefined, locale: TableLocale, filter?: (item: Column) => boolean, cacheCols?: ColItem[], sortFixed?: boolean, cancelFixed?: boolean, cacheColsWidth?: ColItem[]): {
     cols: ColItem[];
     checkAll: boolean;
     indeterminate: boolean;
 };
 /**
- * 获取缓存的列配置下拉列表数据
+ * 获取表格密度缓存的名称
  * @param cacheKey 缓存的名称
  */
-export declare function getCacheCols(cacheKey?: string): ColItem[] | undefined;
+export declare function getSizeCacheKey(cacheKey: string): string;
 /**
  * 获取列配置缓存的名称
  * @param cacheKey 缓存的名称
  */
-export declare function getColsCacheKey(cacheKey: string): string;
+export declare function getColsCacheKey<T extends CacheKey>(cacheKey: T): T;
 /**
- * 获取表格密度缓存的名称
+ * 获取表格列宽缓存的名称
+ * @param cacheKey 缓存的名称
+ */
+export declare function getColsWidthCacheKey(cacheKey: string): string;
+/**
+ * 获取导出的列配置缓存的名称
  * @param cacheKey 缓存的名称
  */
-export declare function getSizeCacheKey(cacheKey: string): string;
+/**
+ * 获取导出的列宽缓存的名称
+ * @param cacheKey 缓存的名称
+ */
+/**
+ * 获取打印的列配置缓存的名称
+ * @param cacheKey 缓存的名称
+ */
+/**
+ * 获取打印的列宽缓存的名称
+ * @param cacheKey 缓存的名称
+ */
+/**
+ * 获取缓存的列配置下拉列表数据
+ * @param cacheKey 缓存的名称
+ */
+export declare function getCacheCols(cacheKey?: string): ColItem[] | undefined;
 /**
  * 获取缓存的表格密度
  * @param cacheKey 缓存的名称
  */
 export declare function getCacheSize(cacheKey?: string): TableSize;
+/**
+ * 获取缓存的列宽
+ * @param cacheKey 缓存的名称
+ */
+export declare function getCacheColsWidth(cacheKey?: string): ColItem[] | undefined;
+/**
+ * 获取列对应的缓存的列宽
+ * @param cacheColsWidth 缓存的列宽
+ * @param column 列配置
+ */
+export declare function getCacheColWidth(cacheColsWidth?: ColItem[], column?: Column): number | string | undefined;
+/**
+ * 缓存列宽
+ * @param width 列宽
+ * @param column 列配置
+ * @param cacheKey 缓存的名称
+ */
+export declare function cacheColWidth(width: number, column?: Column, cacheKey?: string): void;
 /**
  * 获取 rowKey
  * @param rowKey 自定义 rowKey

package/lib/ele-qr-code/components/canvas-render.cjs

@@ -0,0 +1,146 @@
+"use strict";
+const vue = require("vue");
+const qrcodegen = require("../qrcodegen");
+const props = require("../props");
+const util = require("../util");
+const _sfc_main = vue.defineComponent({
+  name: "CanvasRender",
+  props: props.qrCodeProps,
+  emits: props.qrCodeEmits,
+  setup(props2, { emit }) {
+    const imgData = vue.ref("");
+    const canvasRef = vue.ref(null);
+    const imageRef = vue.ref(null);
+    const render = () => {
+      const { value, size, level, bgColor, fgColor, margin, imageSettings } = props2;
+      const canvas = canvasRef.value;
+      if (!canvas) {
+        return;
+      }
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        return;
+      }
+      if (!value) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        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
+      );
+      const image = imageRef.value;
+      const haveImageToRender = calculatedImageSettings != null && image != null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
+      if (haveImageToRender && calculatedImageSettings.excavation != null) {
+        cells = util.excavateModules(cells, calculatedImageSettings.excavation);
+      }
+      const pixelRatio = window.devicePixelRatio || 1;
+      canvas.height = canvas.width = size * pixelRatio;
+      const scale = size / numCells * pixelRatio;
+      ctx.scale(scale, scale);
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, numCells, numCells);
+      ctx.fillStyle = fgColor;
+      if (util.SUPPORTS_PATH2D) {
+        ctx.fill(new Path2D(util.generatePath(cells, margin)));
+      } else {
+        cells.forEach(function(row, rdx) {
+          row.forEach(function(cell, cdx) {
+            if (cell) {
+              ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
+            }
+          });
+        });
+      }
+      if (haveImageToRender) {
+        ctx.drawImage(
+          image,
+          calculatedImageSettings.x + margin,
+          calculatedImageSettings.y + margin,
+          calculatedImageSettings.w,
+          calculatedImageSettings.h
+        );
+      }
+      if (props2.tag === "img") {
+        imgData.value = canvas.toDataURL();
+      }
+      emit("done");
+    };
+    vue.watch(
+      [
+        () => props2.value,
+        () => props2.size,
+        () => props2.level,
+        () => props2.margin,
+        () => props2.bgColor,
+        () => props2.fgColor,
+        () => props2.tag
+      ],
+      () => {
+        render();
+      }
+    );
+    vue.watch(
+      () => props2.imageSettings,
+      () => {
+        render();
+      },
+      { deep: true }
+    );
+    vue.onMounted(() => {
+      render();
+    });
+    return { imgData, canvasRef, imageRef, 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",
+  style: { display: "inline-flex" }
+};
+const _hoisted_2 = ["src"];
+const _hoisted_3 = ["src"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    _ctx.tag === "img" ? (vue.openBlock(), vue.createElementBlock("img", {
+      key: 0,
+      src: _ctx.imgData,
+      style: vue.normalizeStyle([{ width: _ctx.size + "px", height: _ctx.size + "px" }, _ctx.customStyle || {}])
+    }, null, 12, _hoisted_2)) : vue.createCommentVNode("", true),
+    vue.createElementVNode("canvas", {
+      ref: "canvasRef",
+      style: vue.normalizeStyle([
+        {
+          width: _ctx.size + "px",
+          height: _ctx.size + "px",
+          display: _ctx.tag === "img" ? "none" : void 0
+        },
+        _ctx.customStyle || {}
+      ])
+    }, null, 4),
+    _ctx.imageSettings && _ctx.imageSettings.src ? (vue.openBlock(), vue.createElementBlock("img", {
+      key: 1,
+      ref: "imageRef",
+      src: _ctx.imageSettings.src,
+      crossorigin: "anonymous",
+      referrerpolicy: "no-referrer",
+      style: { display: "none" },
+      onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.render && _ctx.render(...args))
+    }, null, 40, _hoisted_3)) : vue.createCommentVNode("", true)
+  ]);
+}
+const canvasRender = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = canvasRender;

package/lib/ele-qr-code/components/canvas-render.d.ts

@@ -0,0 +1,67 @@
+declare const _default: import('vue').DefineComponent<{
+    value: StringConstructor;
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    level: {
+        type: import('vue').PropType<import('../types').Level>;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    imageSettings: import('vue').PropType<import('../types').ImageSettings>;
+    customStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    tag: import('vue').PropType<import('../types').QrCodeTag>;
+}, {
+    imgData: import('vue').Ref<string>;
+    canvasRef: import('vue').Ref<HTMLCanvasElement | null>;
+    imageRef: import('vue').Ref<HTMLImageElement | null>;
+    render: () => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    done: () => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: StringConstructor;
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    level: {
+        type: import('vue').PropType<import('../types').Level>;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    imageSettings: import('vue').PropType<import('../types').ImageSettings>;
+    customStyle: import('vue').PropType<import('../../ele-app/types').StyleValue>;
+    tag: import('vue').PropType<import('../types').QrCodeTag>;
+}>> & {
+    onDone?: (() => any) | undefined;
+}, {
+    margin: number;
+    size: number;
+    level: import('../types').Level;
+    bgColor: string;
+    fgColor: string;
+}, {}>;
+export default _default;

package/lib/ele-qr-code/index.cjs

@@ -1,129 +1,18 @@
 "use strict";
 const vue = require("vue");
-const qrcodegen = require("./qrcodegen");
+const EleQrCodeSvg = require("../ele-qr-code-svg/index");
+const CanvasRender = require("./components/canvas-render");
 const props = require("./props");
-const util = require("./util");
 const _sfc_main = vue.defineComponent({
   name: "EleQrCode",
+  components: { EleQrCodeSvg, CanvasRender },
   props: props.qrCodeProps,
   emits: props.qrCodeEmits,
-  setup(props2, { emit }) {
-    const canvasRef = vue.ref(null);
-    const imageRef = vue.ref(null);
-    const imageSrc = vue.computed(
-      () => {
-        var _a;
-        return (_a = props2.imageSettings) == null ? void 0 : _a.src;
-      }
-    );
-    const canvasStyle = vue.computed(() => {
-      const styles = [
-        {
-          height: `${props2.size}px`,
-          width: `${props2.size}px`
-        }
-      ];
-      if (props2.customStyle != null) {
-        styles.push(props2.customStyle);
-      }
-      return styles;
-    });
-    const render = () => {
-      const { value, size, level, bgColor, fgColor, margin, imageSettings } = props2;
-      if (canvasRef.value == null) {
-        return;
-      }
-      const canvas = canvasRef.value;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) {
-        return;
-      }
-      if (!value) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        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
-      );
-      const image = imageRef.value;
-      const haveImageToRender = calculatedImageSettings != null && image != null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
-      if (haveImageToRender && calculatedImageSettings.excavation != null) {
-        cells = util.excavateModules(cells, calculatedImageSettings.excavation);
-      }
-      const pixelRatio = window.devicePixelRatio || 1;
-      canvas.height = canvas.width = size * pixelRatio;
-      const scale = size / numCells * pixelRatio;
-      ctx.scale(scale, scale);
-      ctx.fillStyle = bgColor;
-      ctx.fillRect(0, 0, numCells, numCells);
-      ctx.fillStyle = fgColor;
-      if (util.SUPPORTS_PATH2D) {
-        ctx.fill(new Path2D(util.generatePath(cells, margin)));
-      } else {
-        cells.forEach(function(row, rdx) {
-          row.forEach(function(cell, cdx) {
-            if (cell) {
-              ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
-            }
-          });
-        });
-      }
-      if (haveImageToRender) {
-        ctx.drawImage(
-          image,
-          calculatedImageSettings.x + margin,
-          calculatedImageSettings.y + margin,
-          calculatedImageSettings.w,
-          calculatedImageSettings.h
-        );
-      }
+  setup(_props, { emit }) {
+    const handleDone = () => {
       emit("done");
     };
-    vue.watch(
-      [
-        () => props2.value,
-        () => props2.level,
-        () => props2.bgColor,
-        () => props2.fgColor,
-        () => props2.margin
-      ],
-      () => {
-        render();
-      }
-    );
-    vue.watch(
-      () => props2.size,
-      () => {
-        vue.nextTick(() => {
-          render();
-        });
-      }
-    );
-    vue.watch(
-      () => props2.imageSettings,
-      () => {
-        render();
-      },
-      { deep: true }
-    );
-    vue.onMounted(() => {
-      render();
-    });
-    return {
-      canvasRef,
-      imageRef,
-      imageSrc,
-      canvasStyle,
-      render
-    };
+    return { handleDone };
   }
 });
 const _export_sfc = (sfc, props2) => {
@@ -133,25 +22,33 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-qr-code" };
-const _hoisted_2 = ["height", "width"];
-const _hoisted_3 = ["src"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
-    vue.createElementVNode("canvas", {
-      ref: "canvasRef",
-      height: _ctx.size,
-      width: _ctx.size,
-      style: vue.normalizeStyle(_ctx.canvasStyle)
-    }, null, 12, _hoisted_2),
-    _ctx.imageSrc ? (vue.openBlock(), vue.createElementBlock("img", {
-      key: 0,
-      ref: "imageRef",
-      src: _ctx.imageSrc,
-      style: { display: "none" },
-      onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.render && _ctx.render(...args))
-    }, null, 40, _hoisted_3)) : vue.createCommentVNode("", true)
-  ]);
+  const _component_EleQrCodeSvg = vue.resolveComponent("EleQrCodeSvg");
+  const _component_CanvasRender = vue.resolveComponent("CanvasRender");
+  return _ctx.tag === "svg" ? (vue.openBlock(), vue.createBlock(_component_EleQrCodeSvg, {
+    key: 0,
+    value: _ctx.value,
+    size: _ctx.size,
+    level: _ctx.level,
+    bgColor: _ctx.bgColor,
+    fgColor: _ctx.fgColor,
+    margin: _ctx.margin,
+    imageSettings: _ctx.imageSettings,
+    customStyle: _ctx.customStyle,
+    onDone: _ctx.handleDone
+  }, null, 8, ["value", "size", "level", "bgColor", "fgColor", "margin", "imageSettings", "customStyle", "onDone"])) : (vue.openBlock(), vue.createBlock(_component_CanvasRender, {
+    key: 1,
+    value: _ctx.value,
+    size: _ctx.size,
+    level: _ctx.level,
+    bgColor: _ctx.bgColor,
+    fgColor: _ctx.fgColor,
+    margin: _ctx.margin,
+    imageSettings: _ctx.imageSettings,
+    customStyle: _ctx.customStyle,
+    tag: _ctx.tag,
+    onDone: _ctx.handleDone
+  }, null, 8, ["value", "size", "level", "bgColor", "fgColor", "margin", "imageSettings", "customStyle", "tag", "onDone"]));
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 module.exports = index;

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

@@ -1,5 +1,3 @@
-import { StyleValues } from '../ele-app/types';
-
 declare const _default: import('vue').DefineComponent<{
     value: StringConstructor;
     size: {
@@ -23,13 +21,10 @@ declare const _default: import('vue').DefineComponent<{
         default: number;
     };
     imageSettings: import('vue').PropType<import('./types').ImageSettings>;
-    customStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    tag: import('vue').PropType<import('./types').QrCodeTag>;
 }, {
-    canvasRef: import('vue').Ref<HTMLCanvasElement | null>;
-    imageRef: import('vue').Ref<HTMLImageElement | null>;
-    imageSrc: import('vue').ComputedRef<string | undefined>;
-    canvasStyle: import('vue').ComputedRef<StyleValues>;
-    render: () => void;
+    handleDone: () => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     done: () => boolean;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -55,7 +50,8 @@ declare const _default: import('vue').DefineComponent<{
         default: number;
     };
     imageSettings: import('vue').PropType<import('./types').ImageSettings>;
-    customStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    tag: import('vue').PropType<import('./types').QrCodeTag>;
 }>> & {
     onDone?: (() => any) | undefined;
 }, {

package/lib/ele-qr-code/props.cjs

@@ -31,7 +31,9 @@ const qrCodeProps = {
   /** 自定义图片 */
   imageSettings: Object,
   /** 自定义样式 */
-  customStyle: Object
+  customStyle: Object,
+  /** 渲染标签 */
+  tag: String
 };
 const qrCodeEmits = {
   /** 渲染完成事件 */

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

@@ -1,5 +1,6 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { Level, ImageSettings } from './types';
+import { StyleValue } from '../ele-app/types';
+import { Level, ImageSettings, QrCodeTag } from './types';
 
 /**
  * 属性
@@ -35,7 +36,9 @@ export declare const qrCodeProps: {
     /** 自定义图片 */
     imageSettings: PropType<ImageSettings>;
     /** 自定义样式 */
-    customStyle: PropType<Partial<import('vue').CSSProperties>>;
+    customStyle: PropType<StyleValue>;
+    /** 渲染标签 */
+    tag: PropType<QrCodeTag>;
 };
 export type QrCodeProps = ExtractPropTypes<typeof qrCodeProps>;
 /**

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

@@ -21,6 +21,11 @@ export interface ImageSettings {
   excavate?: boolean;
 }
 
+/**
+ * 渲染标签
+ */
+export type QrCodeTag = 'img' | 'canvas' | 'svg';
+
 /**
  * 二维码数据
  */

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

@@ -15,12 +15,6 @@ const _sfc_main = vue.defineComponent({
     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) {
@@ -79,7 +73,6 @@ const _sfc_main = vue.defineComponent({
       imageWidth,
       imageX,
       imageY,
-      imageSrc,
       render
     };
   }
@@ -91,19 +84,23 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-qr-code" };
+const _hoisted_1 = {
+  class: "ele-qr-code",
+  style: { display: "inline-flex" }
+};
 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, [
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
     _ctx.viewBox ? (vue.openBlock(), vue.createElementBlock("svg", {
       key: 0,
       shapeRendering: "crispEdges",
       height: _ctx.size,
       width: _ctx.size,
-      viewBox: _ctx.viewBox
+      viewBox: _ctx.viewBox,
+      style: vue.normalizeStyle(_ctx.customStyle)
     }, [
       vue.createElementVNode("path", {
         fill: _ctx.bgColor,
@@ -113,16 +110,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         fill: _ctx.fgColor,
         d: _ctx.fgPath
       }, null, 8, _hoisted_4),
-      _ctx.imageSrc ? (vue.openBlock(), vue.createElementBlock("image", {
+      _ctx.imageSettings && _ctx.imageSettings.src ? (vue.openBlock(), vue.createElementBlock("image", {
         key: 0,
-        "xlink:href": _ctx.imageSrc,
+        "xlink:href": _ctx.imageSettings.src,
         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)
+    ], 12, _hoisted_2)) : vue.createCommentVNode("", true)
   ]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);