@web-utils/component 4.0.15 → 5.0.0-beta01

package/fy-upload/index.mjs

@@ -1,423 +1,2 @@
-import R from "element-ui/lib/button";
-import I from "element-ui/lib/upload";
-import { p as N, e as B } from "../chunks/event.DSlcqYHL.mjs";
-import { B as K, v as T, g as L } from "../chunks/util.DI42t5GU.mjs";
-import { p as A } from "../chunks/packages.ByyangTp.mjs";
-import { isBlank as b } from "@web-utils/core";
-import { n as D } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-let d, g;
-const w = {
-  width: 200,
-  height: 200
-}, s = {
-  text: "avueJS",
-  // 文字
-  fontFamily: "microsoft yahei",
-  // 字体
-  color: "#999",
-  // 颜色
-  fontSize: 16,
-  // 大小
-  opacity: 100,
-  // 透明度
-  bottom: 10,
-  // 下边位置
-  right: 10,
-  // 右边位置
-  ratio: 1
-  // 压缩比
-};
-function k(i, t) {
-  const e = new FileReader();
-  e.readAsDataURL(i), e.onload = function(o) {
-    t(o.target.result);
-  };
-}
-function q(i, t = {}, e) {
-  const { text: o, fontFamily: n, color: u, fontSize: l, opacity: p, bottom: S, right: f, ratio: x } = t;
-  v(), k(i, C);
-  function v() {
-    s.text = o || s.text, s.fontFamily = n || s.fontFamily, s.color = u || s.color, s.fontSize = l || s.fontSize, s.opacity = p || s.opacity, s.bottom = S || s.bottom, s.right = f || s.right, s.ratio = x || s.ratio;
-  }
-  function C(y) {
-    const c = new Image();
-    c.src = y, c.onload = function() {
-      const m = c.width, a = c.height;
-      r(m, a), g.drawImage(c, 0, 0, m, a), P(m, a);
-      const _ = document.getElementById("canvas").toDataURL(i.type, s.ratio), F = K(_, i.name);
-      e == null || e(F);
-    };
-  }
-  function r(y, c) {
-    d = document.getElementById("canvas"), d === null && (d = document.createElement("canvas"), d.id = "canvas", d.className = "avue-canvas", document.body.appendChild(d)), g = d.getContext("2d"), d.width = y, d.height = c;
-  }
-  function P(y, c) {
-    const m = s.text, a = U(m, y, c);
-    g.font = `${a.fontSize}px ${s.fontFamily}`, g.fillStyle = s.color, g.globalAlpha = s.opacity / 100, g.fillText(m, a.x, a.y);
-  }
-  function U(y, c, m) {
-    let a, _;
-    const E = s.fontSize / w.width * c;
-    s.bottom ? _ = w.height - s.bottom : _ = s.top, s.right ? a = w.width - s.right : a = s.left, g.font = `${s.fontSize}px ${s.fontFamily}`;
-    const $ = Number(g.measureText(y).width);
-    a = a - $;
-    const z = a / w.width, j = _ / w.height;
-    return a = z * c, _ = j * m, {
-      x: a,
-      y: _,
-      fontSize: E
-    };
-  }
-}
-const M = (i, t, e) => {
-  const o = JSON.stringify(e);
-  window.__ENV__ === "development" && (console == null || console.log("put_policy = ", o));
-  const n = J(V(o));
-  window.__ENV__ === "development" && (console == null || console.log("encoded = ", n));
-  const l = window.CryptoJS.HmacSHA1(n, t).toString(window.CryptoJS.enc.Base64);
-  window.__ENV__ === "development" && (console == null || console.log("encoded_signed=", l));
-  const p = `${i}:${H(l)}:${n}`;
-  return window.__ENV__ === "development" && (console == null || console.log("upload_token=", p)), p;
-};
-function V(i) {
-  let t, e, o;
-  t = "";
-  const n = i.length;
-  for (e = 0; e < n; e++)
-    o = i.charCodeAt(e), o >= 1 && o <= 127 ? t += i.charAt(e) : o > 2047 ? (t += String.fromCharCode(224 | o >> 12 & 15), t += String.fromCharCode(128 | o >> 6 & 63), t += String.fromCharCode(128 | o >> 0 & 63)) : (t += String.fromCharCode(192 | o >> 6 & 31), t += String.fromCharCode(128 | o >> 0 & 63));
-  return t;
-}
-const h = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
-function J(i) {
-  let t, e, o, n, u;
-  const l = i.length;
-  for (e = 0, t = ""; e < l; ) {
-    if (o = i.charCodeAt(e++) & 255, e === l) {
-      t += h.charAt(o >> 2), t += h.charAt((o & 3) << 4), t += "==";
-      break;
-    }
-    if (n = i.charCodeAt(e++), e === l) {
-      t += h.charAt(o >> 2), t += h.charAt((o & 3) << 4 | (n & 240) >> 4), t += h.charAt((n & 15) << 2), t += "=";
-      break;
-    }
-    u = i.charCodeAt(e++), t += h.charAt(o >> 2), t += h.charAt((o & 3) << 4 | (n & 240) >> 4), t += h.charAt((n & 15) << 2 | (u & 192) >> 6), t += h.charAt(u & 63);
-  }
-  return t;
-}
-const H = function(i) {
-  return i = i.replace(/\+/g, "-"), i = i.replace(/\//g, "_"), i;
-}, Q = (i) => new window.OSS(i);
-function O(i, t = "") {
-  return t.match(/(^http:\/\/|^https:\/\/|^\/\/|data:image\/)/) ? t : i + t;
-}
-const W = {
-  name: "FyUpload",
-  mixins: [N, B],
-  props: {
-    qiniu: Object,
-    ali: Object,
-    data: {
-      type: Object,
-      default: () => ({})
-    },
-    showFileList: {
-      type: Boolean,
-      default: !0
-    },
-    fileText: String,
-    fileType: {
-      type: String
-    },
-    oss: {
-      type: String
-    },
-    limit: {
-      type: Number
-    },
-    headers: {
-      type: Object,
-      default: () => ({})
-    },
-    accept: {
-      type: [String, Array],
-      default: ""
-    },
-    canvasOption: {
-      type: Object,
-      default: () => ({})
-    },
-    cropperOption: {
-      type: Object,
-      default: () => ({})
-    },
-    fileSize: {
-      type: Number
-    },
-    dragFile: {
-      type: Boolean,
-      default: !1
-    },
-    drag: {
-      type: Boolean,
-      default: !1
-    },
-    loadText: {
-      type: String,
-      default: "Loading..."
-    },
-    action: {
-      type: String,
-      default: ""
-    },
-    uploadBefore: Function,
-    uploadAfter: Function,
-    uploadDelete: Function,
-    uploadPreview: Function,
-    uploadError: Function,
-    uploadExceed: Function,
-    httpRequest: Function
-  },
-  data() {
-    return {
-      res: "",
-      loading: !1,
-      menu: !1,
-      reload: Math.random()
-    };
-  },
-  computed: {
-    isObject() {
-      return typeof this.text[0] == "object";
-    },
-    acceptList() {
-      return Array.isArray(this.accept) ? this.accept.join(",") : this.accept;
-    },
-    homeUrl() {
-      return this.propsHttp.home || "";
-    },
-    fileName() {
-      return this.propsHttp.fileName || "file";
-    },
-    isAliOss() {
-      return this.oss === "ali";
-    },
-    isQiniuOss() {
-      return this.oss === "qiniu";
-    },
-    isPictureImg() {
-      return this.listType === "picture-img";
-    },
-    // 单个头像图片
-    imgUrl() {
-      return b(this.text) ? null : O(this.homeUrl, this.text[0]);
-    },
-    fileList() {
-      const i = [];
-      return (this.text || []).forEach((t, e) => {
-        if (t) {
-          const o = this.isObject ? t[this.labelKey] : t.substring(t.lastIndexOf("/") + 1);
-          let n = this.isObject ? t[this.valueKey] : t;
-          n = O(this.homeUrl, n), i.push({
-            uid: `${e}`,
-            status: "done",
-            type: this.isMediaType(n),
-            name: o,
-            url: n
-          });
-        }
-      }), i;
-    }
-  },
-  mounted() {
-    this.drag && this.setSort();
-  },
-  methods: {
-    isMediaType(i) {
-      return T(i, this.fileType);
-    },
-    setSort() {
-      if (!window.Sortable) {
-        A.logs("Sortable");
-        return;
-      }
-      const i = this.$el.querySelectorAll(".avue-upload > ul")[0];
-      window.Sortable.create(i, {
-        animation: 100,
-        onEnd: (t) => {
-          const e = this.text.splice(t.oldIndex, 1)[0];
-          this.text.splice(t.newIndex, 0, e), this.reload = Math.random(), this.$nextTick(() => this.setSort());
-        }
-      });
-    },
-    handleSuccess(i) {
-      if (this.isPictureImg)
-        this.text.splice(0, 1, i[this.urlKey]);
-      else if (this.isObject) {
-        const t = {};
-        t[this.labelKey] = i[this.nameKey], t[this.valueKey] = i[this.urlKey], this.text.push(t);
-      } else
-        this.text.push(i[this.urlKey]);
-    },
-    handleRemove(i) {
-      this.beforeRemove(i).then(() => {
-        this.delete(i);
-      });
-    },
-    handleError(i) {
-      var t;
-      (t = this.uploadError) == null || t.call(this, i, this.column);
-    },
-    delete(i) {
-      (this.text || []).forEach((t, e) => {
-        const o = this.isObject ? t[this.valueKey] : t;
-        O(this.homeUrl, o) === i.url && this.text.splice(e, 1);
-      });
-    },
-    show(i) {
-      this.loading = !1, this.res = i || this.res, this.handleSuccess(this.res);
-    },
-    hide(i) {
-      this.loading = !1, i && this.handleError(i);
-    },
-    handleFileChange(i, t) {
-      t.splice(t.length - 1, 1);
-    },
-    httpUpload(i) {
-      if (typeof this.httpRequest == "function") {
-        this.httpRequest(i);
-        return;
-      }
-      this.loading = !0;
-      let t = i.file;
-      const e = t.size / 1024;
-      if (!b(e) && e > this.fileSize) {
-        this.hide("文件太大不符合");
-        return;
-      }
-      const o = Object.assign(this.headers, { "Content-Type": "multipart/form-data" });
-      let n = {}, u = {};
-      const l = new FormData(), p = () => {
-        const f = (x) => {
-          let v = this.action;
-          for (const r in this.data)
-            l.append(r, this.data[r]);
-          const C = x || t;
-          if (l.append(this.fileName, C), this.isQiniuOss) {
-            if (!window.CryptoJS) {
-              A.logs("CryptoJS"), this.hide();
-              return;
-            }
-            n = this.qiniu || this.$AVUE.qiniu;
-            const r = M(n.AK, n.SK, {
-              scope: n.scope,
-              deadline: (/* @__PURE__ */ new Date()).getTime() + n.deadline * 3600
-            });
-            l.append("token", r), v = n.bucket;
-          } else if (this.isAliOss) {
-            if (!window.OSS) {
-              A.logs("AliOSS"), this.hide();
-              return;
-            }
-            n = this.ali || this.$AVUE.ali, u = Q(n);
-          }
-          (this.isAliOss ? u.put(C.name, C, {
-            headers: this.headers
-          }) : this.$axios.post(v, l, { headers: o })).then((r) => {
-            this.res = {}, this.isQiniuOss && (r.data.key = n.url + r.data.key), this.res = L(this.isAliOss ? r : r.data, this.resKey), typeof this.uploadAfter == "function" ? this.uploadAfter(this.res, this.show, this.hide, this.column) : this.show();
-          }).catch((r) => {
-            this.hide(r);
-          });
-        };
-        typeof this.uploadBefore == "function" ? this.uploadBefore(t, f, this.hide, this.column) : f();
-      };
-      if (T(t.name) !== "img") {
-        p();
-        return;
-      }
-      const S = () => {
-        b(this.canvasOption) ? p() : q(t, this.canvasOption, (f) => {
-          t = f, p();
-        });
-      };
-      b(this.cropperOption) ? S() : k(t, (f) => {
-        const x = Object.assign(this.cropperOption, {
-          img: f,
-          type: "file",
-          callback: (v) => {
-            t = v, S();
-          },
-          cancel: () => {
-            this.loading = !1;
-          }
-        });
-        this.$ImageCropper(x);
-      });
-    },
-    handleExceed(i, t) {
-      var e;
-      (e = this.uploadExceed) == null || e.call(this, this.limit, i, t, this.column);
-    },
-    handlePreview(i) {
-      const t = () => {
-        const e = this.fileList.findIndex((o) => o.url === i.url);
-        this.$ImagePreview(this.fileList, e);
-      };
-      typeof this.uploadPreview == "function" ? this.uploadPreview(i, this.column, t) : t();
-    },
-    handleDelete(i) {
-      this.beforeRemove(i).then(() => {
-        this.text = [], this.menu = !1;
-      });
-    },
-    beforeRemove(i) {
-      return typeof this.uploadDelete == "function" ? this.uploadDelete(i, this.column) : Promise.resolve();
-    }
-  }
-};
-var X = function() {
-  var t = this, e = t._self._c;
-  return e("div", { directives: [{ name: "loading", rawName: "v-loading.lock", value: t.loading, expression: "loading", modifiers: { lock: !0 } }], staticClass: "avue-upload", attrs: { "element-loading-text": t.loadText } }, [e(I, { key: t.reload, class: { "avue-upload--list": t.listType === "picture-img", "avue-upload--upload": t.disabled }, attrs: { action: t.action, "on-remove": t.handleRemove, accept: t.acceptList, "before-remove": t.beforeRemove, multiple: t.multiple, "on-preview": t.handlePreview, limit: t.limit, "http-request": t.httpUpload, readonly: t.readonly, drag: t.dragFile, "show-file-list": t.isPictureImg ? !1 : t.showFileList, "list-type": t.listType, "on-change": t.handleFileChange, "on-exceed": t.handleExceed, disabled: t.disabled, "file-list": t.fileList }, nativeOn: { click: function(o) {
-    return t.handleClick.apply(null, arguments);
-  } }, scopedSlots: t._u([{ key: "tip", fn: function() {
-    return [e("div", { staticClass: "el-upload__tip", domProps: { innerHTML: t._s(t.tip) } })];
-  }, proxy: !0 }, { key: "file", fn: function({ file: o }) {
-    return [t.$scopedSlots.default ? t._t("default", null, { file: o }) : t.listType === "picture-card" ? e("span", [t.isMediaType(o.url) ? e(o.type, { tag: "Component", staticClass: "el-upload-list__item-thumbnail", attrs: { src: o.url } }) : e("i", { staticClass: "avue-upload__avatar el-icon-document" }), e("span", { staticClass: "el-upload-list__item-actions" }, [e("span", { staticClass: "el-upload-list__item-preview" }, [e("i", { staticClass: "el-icon-zoom-in", on: { click: function(n) {
-      return n.stopPropagation(), t.handlePreview(o);
-    } } })]), e("span", { staticClass: "el-upload-list__item-delete" }, [t.disabled ? t._e() : e("i", { staticClass: "el-icon-delete", on: { click: function(n) {
-      return n.stopPropagation(), t.handleRemove(o);
-    } } })])])], 1) : t.listType === "picture" ? e("span", { on: { click: function(n) {
-      return n.stopPropagation(), t.handlePreview(o);
-    } } }, [e(o.type, { tag: "Component", staticClass: "el-upload-list__item-thumbnail", attrs: { src: o.url } }), e("a", { staticClass: "el-upload-list__item-name" }, [e("i", { staticClass: "el-icon-document" }), t._v(" " + t._s(o.name) + " ")]), e("i", { staticClass: "el-icon-close", on: { click: function(n) {
-      return n.stopPropagation(), t.handleRemove(o);
-    } } })], 1) : e("span", { on: { click: function(n) {
-      return n.stopPropagation(), t.handlePreview(o);
-    } } }, [e("a", { staticClass: "el-upload-list__item-name" }, [e("i", { staticClass: "el-icon-document" }), t._v(" " + t._s(o.name) + " ")]), t.disabled ? t._e() : e("i", { staticClass: "el-icon-close", on: { click: function(n) {
-      return n.stopPropagation(), t.handleRemove(o);
-    } } })])];
-  } }], null, !0) }, [t.listType === "picture-card" ? [e("i", { staticClass: "el-icon-plus" })] : t.listType === "picture-img" ? [t.$scopedSlots.default ? t._t("default", null, { file: { url: t.imgUrl } }) : [t.isMediaType(t.imgUrl) ? e(t.isMediaType(t.imgUrl), { tag: "Component", staticClass: "avue-upload__avatar", attrs: { src: t.imgUrl }, on: { mouseover: function(o) {
-    t.menu = !0;
-  } } }) : t.imgUrl ? e("i", { staticClass: "avue-upload__avatar el-icon-document", on: { mouseover: function(o) {
-    t.menu = !0;
-  } } }) : e("i", { staticClass: "el-icon-plus avue-upload__avatar" }), t.menu ? e("div", { staticClass: "el-upload-list__item-actions avue-upload__menu", on: { mouseover: function(o) {
-    t.menu = !0;
-  }, mouseout: function(o) {
-    t.menu = !1;
-  }, click: function(o) {
-    o.stopPropagation();
-  } } }, [e("i", { staticClass: "el-icon-zoom-in", on: { click: function(o) {
-    return o.stopPropagation(), t.handlePreview({ url: t.imgUrl });
-  } } }), t.disabled ? t._e() : e("i", { staticClass: "el-icon-delete", on: { click: function(o) {
-    return o.stopPropagation(), t.handleDelete(t.imgUrl);
-  } } })]) : t._e()]] : t.dragFile ? [e("i", { staticClass: "el-icon-upload" }), e("div", { staticClass: "el-upload__text" }, [e("em", [t._v(t._s(t.fileText || "上传"))])])] : [e(R, { attrs: { icon: "el-icon-upload", size: t.size, type: "primary" } }, [t._v(" " + t._s(t.fileText || "上传") + " ")])]], 2)], 1);
-}, Y = [], G = /* @__PURE__ */ D(
-  W,
-  X,
-  Y,
-  !1,
-  null,
-  null
-);
-const at = G.exports;
-export {
-  at as default
-};
+import { t as e } from "../chunks/FyUpload.B2QKfTxF.mjs";
+export { e as default };

package/guide-steps/index.mjs

@@ -1,74 +1,73 @@
-import l from "element-ui/lib/step";
-import i from "element-ui/lib/steps";
-import { n } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-const u = {
-  name: "GuideSteps",
-  props: {
-    value: {
-      type: Number,
-      default: 0
-    },
-    steps: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      ready: []
-    };
-  },
-  watch: {
-    steps: {
-      immediate: !0,
-      deep: !0,
-      handler(t) {
-        this.ready = t != null && t.length ? t.map(() => !1) : [];
-      }
-    }
-  },
-  methods: {
-    activeStep(t) {
-      t !== 0 && !this.available(t) || this.$emit("input", t);
-    },
-    setReady(t, e) {
-      t < this.ready.length && this.$set(this.ready, t, e);
-    },
-    available(t) {
-      let e = !0;
-      if (t > 0 && t < this.ready.length) {
-        for (let a = 0; a < t; a++)
-          if (!this.ready[a]) {
-            e = !1;
-            break;
-          }
-      }
-      return e;
-    }
-  }
-};
-var p = function() {
-  var e = this, a = e._self._c;
-  return a(i, { staticClass: "guide-steps", attrs: { "align-center": "" } }, e._l(e.steps, function(s, r) {
-    return a(l, { key: s.label, class: [
-      {
-        "current important": e.value === r,
-        disabled: !e.available(r),
-        available: !e.ready[r] && e.available(r)
-      }
-    ], attrs: { status: e.ready[r] ? "success" : "", title: s.label }, nativeOn: { click: function(_) {
-      return e.activeStep(r);
-    } } });
-  }), 1);
-}, o = [], c = /* @__PURE__ */ n(
-  u,
-  p,
-  o,
-  !1,
-  null,
-  null
-);
-const v = c.exports;
-export {
-  v as default
+import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
+import { Fragment as t, createBlock as n, createElementBlock as r, normalizeClass as i, openBlock as a, renderList as o, resolveComponent as s, withCtx as c } from "vue";
+//#region src/components/GuideSteps.vue
+var l = {
+	name: "GuideSteps",
+	props: {
+		modelValue: {
+			type: Number,
+			default: 0
+		},
+		steps: {
+			type: Array,
+			default: () => []
+		}
+	},
+	emits: ["update:modelValue"],
+	data() {
+		return { ready: [] };
+	},
+	watch: { steps: {
+		immediate: !0,
+		deep: !0,
+		handler(e) {
+			this.ready = e != null && e.length ? e.map(() => !1) : [];
+		}
+	} },
+	methods: {
+		activeStep(e) {
+			e !== 0 && !this.available(e) || this.$emit("update:modelValue", e);
+		},
+		setReady(e, t) {
+			e < this.ready.length && this.$set(this.ready, e, t);
+		},
+		available(e) {
+			let t = !0;
+			if (e > 0 && e < this.ready.length) {
+				for (let n = 0; n < e; n++) if (!this.ready[n]) {
+					t = !1;
+					break;
+				}
+			}
+			return t;
+		}
+	}
 };
+function u(e, l, u, d, f, p) {
+	let m = s("ElStep"), h = s("ElSteps");
+	return a(), n(h, {
+		class: "guide-steps",
+		"align-center": ""
+	}, {
+		default: c(() => [(a(!0), r(t, null, o(u.steps, (e, t) => (a(), n(m, {
+			key: e.label,
+			class: i([{
+				"current important": u.modelValue === t,
+				disabled: !p.available(t),
+				available: !f.ready[t] && p.available(t)
+			}]),
+			status: f.ready[t] ? "success" : "",
+			title: e.label,
+			onClick: (e) => p.activeStep(t)
+		}, null, 8, [
+			"class",
+			"status",
+			"title",
+			"onClick"
+		]))), 128))]),
+		_: 1
+	});
+}
+var d = /* @__PURE__ */ e(l, [["render", u]]);
+//#endregion
+export { d as default };

package/helper-function.d.ts

@@ -1,33 +1,5 @@
-import { default as Vue } from 'vue';
 import { photoswipe } from './photo-swipe';
 import { configComponents } from '../components/configComponents';
-declare const imagePreview: (datas?: never[], index?: number, ops?: {}) => import('vue/types/vue').CombinedVueInstance<import('vue/types/v3-component-options').ExtractComputedReturns<{}> & Record<never, any> & Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue> & import('vue').ShallowUnwrapRef<{}> & Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue>, {
-    datas: never[];
-    index: number;
-    ops: {
-        closeOnClickModal: boolean;
-        beforeClose: null;
-        click: null;
-        modal: boolean;
-    };
-}, object, object, Record<never, any>, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, import('vue/types/v3-component-public-instance').OptionTypesType<{}, {}, {}, {}, {}, {}>>;
-declare const imageCropper: (ops?: {}) => import('vue/types/vue').CombinedVueInstance<import('vue/types/v3-component-options').ExtractComputedReturns<{}> & Record<never, any> & Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue> & import('vue').ShallowUnwrapRef<{}> & Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue>, {
-    option: {
-        outputSize: number;
-        outputType: string;
-        info: boolean;
-        canScale: boolean;
-        autoCrop: boolean;
-        fixed: boolean;
-        full: boolean;
-        fixedBox: boolean;
-        canMove: boolean;
-        canMoveBox: boolean;
-        original: boolean;
-        centerBox: boolean;
-        height: boolean;
-        infoTrue: boolean;
-        enlarge: number;
-    };
-}, object, object, Record<never, any>, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, import('vue/types/v3-component-public-instance').OptionTypesType<{}, {}, {}, {}, {}, {}>>;
+declare const imagePreview: (datas?: never[], index?: number, ops?: {}) => any;
+declare const imageCropper: (ops?: {}) => any;
 export { photoswipe, configComponents, imagePreview, imageCropper };