@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,385 lines • 57.4 kB
JavaScript
import { ref as T, computed as mt, inject as we, onMounted as Te, onUnmounted as dt, watch as re, defineComponent as Se, createVNode as j, withModifiers as Z } from "vue";
import { cloneDeep as Me, isPlainObject as xe } from "lodash-es";
import { getSchemaByTypeForDesigner as gt } from "../dynamic-resolver/index.esm.js";
function Fe(e, t) {
let a;
function d(s) {
const { properties: i, title: o, ignore: u } = s, l = u && Array.isArray(u), m = Object.keys(i).reduce((w, E) => ((!l || !u.find((O) => O === E)) && (w[E] = i[E].type === "object" && i[E].properties ? d(i[E]) : Me(i[E].default)), w), {});
if (o && (!l || !u.find((w) => w === "id"))) {
const w = o.toLowerCase().replace(/-/g, "_");
m.id = `${w}_${Math.random().toString().slice(2, 6)}`;
}
return m;
}
function x(s) {
const { properties: i, title: o, required: u } = s;
if (u && Array.isArray(u)) {
const l = u.reduce((m, w) => (m[w] = i[w].type === "object" && i[w].properties ? d(i[w]) : Me(i[w].default), m), {});
if (o && u.find((m) => m === "id")) {
const m = o.toLowerCase().replace(/-/g, "_");
l.id = `${m}_${Math.random().toString().slice(2, 6)}`;
}
return l;
}
return {
type: o
};
}
function n(s, i = {}, o) {
const u = e[s];
if (u) {
let l = x(u);
const m = t[s];
return l = m ? m({ getSchemaByType: n }, l, i, o) : l, a != null && a.appendIdentifyForNewControl && a.appendIdentifyForNewControl(l), l;
}
return null;
}
function M(s, i) {
const o = d(i);
return Object.keys(o).reduce((u, l) => (Object.prototype.hasOwnProperty.call(s, l) && (u[l] && xe(u[l]) && xe(s[l] || !s[l]) ? Object.assign(u[l], s[l] || {}) : u[l] = s[l]), u), o), o;
}
function F(s, i) {
return Object.keys(s).filter((u) => s[u] != null).reduce((u, l) => {
if (i.has(l)) {
const m = i.get(l);
if (typeof m == "string")
u[m] = s[l];
else {
const w = m(l, s[l], s);
Object.assign(u, w);
}
} else
u[l] = s[l];
return u;
}, {});
}
function B(s, i, o = /* @__PURE__ */ new Map()) {
const u = M(s, i);
return F(u, o);
}
function v(s) {
var o;
const i = s.type;
if (i) {
const u = e[i];
if (!u)
return s;
const l = M(s, u), m = ((o = s.editor) == null ? void 0 : o.type) || "";
if (m) {
const w = e[m], E = M(s.editor, w);
l.editor = E;
}
return l;
}
return s;
}
function S(s) {
a = s;
}
return { getSchemaByType: n, resolveSchemaWithDefaultValue: v, resolveSchemaToProps: B, mappingSchemaToProps: F, setDesignerContext: S };
}
const Ae = {}, De = {}, { getSchemaByType: va, resolveSchemaWithDefaultValue: pt, resolveSchemaToProps: ht, mappingSchemaToProps: yt, setDesignerContext: ma } = Fe(Ae, De);
function bt(e = {}) {
function t(v, S, s, i) {
if (typeof s == "number")
return i[v].length === s;
if (typeof s == "object") {
const o = Object.keys(s)[0], u = s[o];
if (o === "not")
return Number(i[v].length) !== Number(u);
if (o === "moreThan")
return Number(i[v].length) >= Number(u);
if (o === "lessThan")
return Number(i[v].length) <= Number(u);
}
return !1;
}
function a(v, S, s, i) {
return i[v] && i[v].propertyValue && String(i[v].propertyValue.value) === String(s);
}
const d = /* @__PURE__ */ new Map([
["length", t],
["getProperty", a]
]);
Object.keys(e).reduce((v, S) => (v.set(S, e[S]), v), d);
function x(v, S) {
const s = v;
return typeof S == "number" ? [{ target: s, operator: "length", param: null, value: Number(S) }] : typeof S == "boolean" ? [{ target: s, operator: "getProperty", param: v, value: !!S }] : typeof S == "object" ? Object.keys(S).map((i) => {
if (i === "length")
return { target: s, operator: "length", param: null, value: S[i] };
const o = i, u = S[i];
return { target: s, operator: "getProperty", param: o, value: u };
}) : [];
}
function n(v) {
return Object.keys(v).reduce((s, i) => {
const o = x(i, v[i]);
return s.push(...o), s;
}, []);
}
function M(v, S) {
if (d.has(v.operator)) {
const s = d.get(v.operator);
return s && s(v.target, v.param, v.value, S) || !1;
}
return !1;
}
function F(v, S) {
return n(v).reduce((o, u) => o && M(u, S), !0);
}
function B(v, S) {
const s = Object.keys(v), i = s.includes("allOf"), o = s.includes("anyOf"), u = i || o, w = (u ? v[u ? i ? "allOf" : "anyOf" : "allOf"] : [v]).map((O) => F(O, S));
return i ? !w.includes(!1) : w.includes(!0);
}
return { parseValueSchema: B };
}
const Mt = {
convertTo: (e, t, a, d) => {
e.appearance || (e.appearance = {}), e.appearance[t] = a;
},
convertFrom: (e, t, a) => e.appearance ? e.appearance[t] : e[t]
}, xt = {
convertFrom: (e, t, a) => e.buttons && e.buttons.length ? `共 ${e.buttons.length} 项` : "无"
}, wt = {
convertTo: (e, t, a, d) => {
e.editor && (e.editor[t] = a);
},
convertFrom: (e, t, a) => e.editor && Object.prototype.hasOwnProperty.call(e.editor, t) ? e.editor[t] : e[t]
}, Pe = {
button: { type: "button", name: "按钮" },
"response-toolbar": { type: "response-toolbar", name: "工具栏" },
"response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
"content-container": { type: "content-container", name: "容器" },
"input-group": { type: "input-group", name: "文本" },
textarea: { type: "textarea", name: "多行文本" },
lookup: { type: "lookup", name: "帮助" },
"number-spinner": { type: "number-spinner", name: "数值" },
"date-picker": { type: "date-picker", name: "日期" },
switch: { type: "switch", name: "开关" },
"radio-group": { type: "radio-group", name: "单选组" },
"check-box": { type: "check-box", name: "复选框" },
"check-group": { type: "check-group", name: "复选框组" },
"combo-list": { type: "combo-list", name: "下拉列表" },
"response-form": { type: "response-form", name: "卡片面板" },
"response-layout": { type: "response-layout", name: "布局容器", icon: "response-layout-3" },
"response-layout-item": { type: "response-layout-item", name: "布局", icon: "response-layout-1" },
"tree-grid": { type: "tree-grid", name: "树表格" },
"tree-grid-column": { type: "tree-grid-column", name: "树表格列" },
"data-grid": { type: "data-grid", name: "表格" },
"data-grid-column": { type: "data-grid-column", name: "表格列" },
module: { type: "Module", name: "模块" },
component: { type: "component", name: "组件" },
tabs: { type: "tabs", name: "标签页" },
"tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" },
"tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮" },
"html-template": { type: "html-template", name: "模板容器" },
"time-picker": { type: "time-picker", name: "时间选择" },
section: { type: "section", name: "分组面板" },
"section-toolbar": { type: "section-toolbar", name: "分组面板工具栏" },
"section-toolbar-item": { type: "section-toolbar-item", name: "分组面板按钮" },
splitter: { type: "splitter", name: "分栏面板" },
"splitter-pane": { type: "splitter-pane", name: "分栏面板项", dependentParentControl: "Splitter" },
"component-ref": { type: "component-ref", name: "组件引用节点" },
uploader: { type: "uploader", name: "附件上传" },
"page-header": { type: "page-header", name: "页头" },
"page-footer": { type: "page-footer", name: "页脚" },
"tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏" },
fieldset: { type: "fieldset", name: "分组" },
"query-solution": { type: "query-solution", name: "筛选方案" },
drawer: { type: "drawer", name: "抽屉" },
"external-container": { type: "external-container", name: "外部容器", icon: "content-container" },
"list-nav": { type: "list-nav", name: "列表导航" },
"list-view": { type: "list-view", name: "列表" },
"filter-bar": { type: "filter-bar", name: "筛选条" },
"language-textbox": { type: "language-textbox", name: "多语输入框" }
}, Tt = {
convertFrom: (e, t, a) => {
var x;
const d = e.editor && e.editor[t] ? e.editor[t] : e[t];
return ((x = Pe[d]) == null ? void 0 : x.name) || d;
}
}, St = {
convertTo: (e, t, a, d) => {
e[t] = e[t];
},
convertFrom: (e, t, a) => e.editor ? a.getRealEditorType(e.editor.type) : ""
}, Ft = {
convertTo: (e, t, a, d) => {
(e.type === "data-grid-column" || e.type === "tree-grid-column") && (e.formatter ? e.formatter[t] = a : e.formatter = {
[t]: a
});
},
convertFrom: (e, t, a) => {
if (e.formatter) {
if (t === "trueText")
return e.formatter.trueText;
if (t === "falseText")
return e.formatter.falseText;
if (t === "prefix")
return e.formatter.prefix;
if (t === "suffix")
return e.formatter.suffix;
if (t === "precision")
return e.formatter.precision;
if (t === "decimal")
return e.formatter.decimal;
if (t === "thousand")
return e.formatter.thousand;
if (t === "tempDateFormat")
return e.formatter.dateFormat === "yyyy年MM月dd日" ? "yearMonthDay" : e.formatter.dateFormat === "yyyy-MM-dd HH:mm:ss" ? "yyyy-MM-ddTHH:mm:ss" : e.formatter.dateFormat === "yyyy/MM/dd HH:mm:ss" ? "yyyy/MM/ddTHH:mm:ss" : e.formatter.dateFormat === "yyyy年MM月dd日 HH时mm分ss秒" ? "yearMonthDayHourMinuteSecond" : e.formatter.tempDateFormat || e.formatter.dateFormat || "yyyy-MM-dd";
if (t === "customFormat")
return e.formatter.customFormat;
if (t === "type")
return e.formatter.type || "none";
}
return "none";
}
}, At = {
convertTo: (e, t, a, d) => {
e.command ? e.command[t] = a : e.command = {
[t]: a
}, t === "enable" && a && (e.command.commands || (e.command.commands = [
{
text: "编辑",
type: "primary",
command: "edit"
},
{
text: "删除",
type: "danger",
command: "remove"
}
]));
},
convertFrom: (e, t, a) => e.command && t === "enable" ? e.command.enable : ""
}, Dt = {
convertTo: (e, t, a, d) => {
e.column ? e.column[t] = a : e.column = {
[t]: a
}, t === "fitColumns" && a && (e.column.fitMode || (e.column.fitMode = "average"));
},
convertFrom: (e, t, a) => {
if (e.column) {
if (t === "fitColumns")
return e.column.fitColumns;
if (t === "fitMode")
return e.column.fitMode;
}
return "";
}
}, Pt = {
convertTo: (e, t, a, d) => {
e.summary ? e.summary[t] = a : e.summary = {
[t]: a
}, t === "enable" && a && (e.summary ? e.summary.groupFields || (e.summary.groupFields = []) : e.summary = {
enable: a,
groupFields: []
});
},
convertFrom: (e, t, a) => e.summary && t === "enable" ? e.summary.enable : e.type === "data-grid-column" ? e.enableSummary === void 0 ? !1 : e.enableSummary : ""
}, Et = {
convertTo: (e, t, a, d) => {
e.group ? e.group[t] = a : e.group = {
[t]: a
}, t === "enable" && a && (e.group ? e.group.groupFields || (e.group.groupFields = []) : e.group = {
enable: a,
groupFields: [],
showSummary: !1
});
},
convertFrom: (e, t, a) => {
if (e.group) {
if (t === "enable")
return e.group.enable;
if (t === "showSummary")
return e.group.showSummary;
}
}
}, kt = {
convertFrom: (e, t) => e.binding ? e.binding.path : "",
convertTo: (e, t, a) => {
if (a && a.length > 0) {
const d = a[0];
e.binding || (e.binding = {}), e.binding.type = "Form", e.binding.path = d.bindingField, e.binding.field = d.id, e.binding.fullPath = d.path, e.path = d.bindingPath;
}
}
}, Ct = {
convertTo: (e, t, a, d) => {
e.pagination || (e.pagination = {}), e.pagination[t] = a;
},
convertFrom: (e, t, a) => e.pagination ? e.pagination[t] : e[t]
}, Bt = {
convertTo: (e, t, a, d) => {
e.rowNumber || (e.rowNumber = {}), e.rowNumber[t] = a;
},
convertFrom: (e, t, a) => e.rowNumber ? e.rowNumber[t] : e[t]
}, zt = {
convertTo: (e, t, a, d) => {
e.selection || (e.selection = {}), e.selection[t] = a;
},
convertFrom: (e, t, a) => e.selection ? e.selection[t] : e[t]
}, Ot = {
convertFrom: (e, t, a) => e[t] && e[t].length ? `共 ${e[t].length} 项` : ""
}, $t = {
convertFrom: (e, t) => e[t] || "",
convertTo: (e, t, a) => {
e[t] = a;
}
}, Nt = {
convertTo: (e, t, a, d) => {
e.size || (e.size = {}), e.size[t] = a;
},
convertFrom: (e, t, a) => e.size ? e.size[t] : e[t]
}, jt = {
convertFrom: (e, t, a) => {
var d, x;
return (d = e.formatter) != null && d.data && t === "formatterEnumData" && !e.formatterEnumData ? (x = e.formatter) == null ? void 0 : x.data : e.formatterEnumData;
}
}, Rt = {
convertTo: (e, t, a, d) => {
e.sort || (e.sort = {}), e.sort[t] = a;
},
convertFrom: (e, t, a) => {
var d, x;
if (t === "mode")
return ((d = e.sort) == null ? void 0 : d.mode) || "client";
if (t === "multiSort")
return !!((x = e.sort) != null && x.multiSort);
}
}, Ht = {
convertTo: (e, t, a, d) => {
e.filter || (e.filter = {}), e.filter[t] = a;
},
convertFrom: (e, t, a) => {
var d;
if (t === "mode")
return ((d = e.filter) == null ? void 0 : d.mode) || "client";
}
}, Wt = {
convertTo: (e, t, a, d) => {
e.rowOption ? e.rowOption[t] = a : e.rowOption = {
[t]: a
};
},
convertFrom: (e, t, a) => {
if (e.rowOption) {
if (t === "customRowStyle")
return e.rowOption.customRowStyle;
if (t === "customCellStyle")
return e.rowOption.customCellStyle;
}
return "";
}
};
function Ee(e, t, a) {
const d = /* @__PURE__ */ new Map([
["/converter/appearance.converter", Mt],
["/converter/buttons.converter", xt],
["/converter/property-editor.converter", wt],
["/converter/items-count.converter", Ot],
["/converter/type.converter", Tt],
["/converter/change-editor.converter", St],
["/converter/change-formatter.converter", Ft],
["/converter/column-command.converter", At],
["/converter/column-option.converter", Dt],
["/converter/summary.converter", Pt],
["/converter/group.converter", Et],
["/converter/form-group-label.converter", $t],
["/converter/field-selector.converter", kt],
["/converter/pagination.converter", Ct],
["/converter/row-number.converter", Bt],
["/converter/grid-selection.converter", zt],
["/converter/size.converter", Nt],
["/converter/change-formatter-enum.converter", jt],
["/converter/grid-sort.converter", Rt],
["/converter/grid-filter.converter", Ht],
["/converter/row-option.converter", Wt]
]), x = /* @__PURE__ */ new Map([
["string", { type: "input-group", enableClear: !1 }],
["boolean", {
type: "combo-list",
textField: "name",
valueField: "value",
idField: "value",
enableClear: !1,
editable: !1,
data: [
{
value: !0,
name: "是"
},
{
value: !1,
name: "否"
}
]
}],
["enum", { type: "combo-list", maxHeight: 128, enableClear: !1, editable: !1 }],
["array", { type: "button-edit" }],
["number", { type: "number-spinner", placeholder: "" }],
["events-editor", { type: "events-editor", hide: !0 }]
]), n = bt();
function M(u, l) {
return () => n.parseValueSchema(u, l);
}
function F(u, l, m) {
return u.includes("visible") && l.visible !== void 0 ? typeof l.visible == "boolean" ? () => !!l.visible : l.visible === void 0 ? !0 : M(l.visible, m) : () => !0;
}
function B(u, l, m) {
return u.includes("readonly") && l.readonly !== void 0 ? typeof l.readonly == "boolean" ? () => !!l.readonly : M(l.readonly, m) : () => !1;
}
function v(u, l) {
const m = u.$converter || l;
return typeof m == "string" && m && d.has(m) ? d.get(m) || null : m || null;
}
function S(u, l, m, w, E, O = "", H = "") {
return Object.keys(u).map((A) => {
const y = T(1), D = A, g = u[A], W = Object.keys(g), N = g.title, f = g.type, b = x.get(f) || { type: "input-group", enableClear: !1 }, p = g.editor ? Object.assign({}, b, g.editor) : Object.assign({}, b), k = F(W, g, l), R = B(W, g, l);
p.readonly = p.readonly === void 0 ? R() : p.readonly;
const $ = g.type === "cascade" ? S(g.properties, l, m, w, E, O, H) : [], C = !0;
let U = v(g, H);
const J = mt({
get() {
if (y.value) {
if (["class", "style"].find((te) => te === D) && !U && (U = d.get("/converter/appearance.converter") || null), U && U.convertFrom)
return U.convertFrom(m, A, E, O);
const I = m[A];
return Object.prototype.hasOwnProperty.call(g, "defaultValue") && (I === void 0 || typeof I == "string" && I === "") ? g.type === "boolean" ? g.defaultValue : g.defaultValue || "" : I;
}
return null;
},
set(I) {
y.value += 1, U && U.convertTo ? (U.convertTo(w, A, I, E, O), U.convertTo(m, A, I, E, O)) : (w[A] = I, m[A] = I);
}
}), { refreshPanelAfterChanged: _, description: V, isExpand: q, parentPropertyID: G } = g, P = { propertyID: D, propertyName: N, propertyType: f, propertyValue: J, editor: p, visible: k, readonly: R, cascadeConfig: $, hideCascadeTitle: C, refreshPanelAfterChanged: _, description: V, isExpand: q, parentPropertyID: G };
return l[D] = P, P;
});
}
function s(u, l, m = {}) {
const w = {}, E = e[u];
return E && E.categories ? Object.keys(E.categories).map((H) => {
const z = E.categories[H], A = z == null ? void 0 : z.title, y = S(z.properties || {}, w, {}, m, l);
return { categoryId: H, categoryName: A, properties: y };
}) : [];
}
function i(u, l, m, w, E = "") {
const O = l.$ref.schema, H = l.$ref.converter, z = m[O], A = z.type, y = a(z), D = {}, g = e[A];
if (g && g.categories) {
const W = g.categories[u], N = W == null ? void 0 : W.title;
H && Object.keys(W.properties).forEach((p) => {
W.properties[p].$converter = H;
});
const f = (W == null ? void 0 : W.properties) || {}, b = S(f, D, y, z, w, E);
return { categoryId: u, categoryName: N, properties: b };
}
return { categoryId: u, categoryName: "", properties: [] };
}
function o(u, l, m, w, E) {
const O = u.type, H = a(u), z = {};
let A = E || e[O];
if (A && Object.keys(A).length === 0 && m && m.getPropConfig && (A = m.getPropConfig(w)), A && A.categories) {
const y = [];
return Object.keys(A.categories).map((D) => {
const g = A.categories[D];
if (g.$ref) {
y.push(i(D, g, u, l, w));
return;
}
const W = g == null ? void 0 : g.title, N = g == null ? void 0 : g.tabId, f = g == null ? void 0 : g.tabName, b = g == null ? void 0 : g.hide, p = g == null ? void 0 : g.hideTitle, k = S(g.properties || {}, z, H, u, l, w, g.$converter), { setPropertyRelates: R } = g, $ = g == null ? void 0 : g.parentPropertyID;
y.push({ categoryId: D, categoryName: W, tabId: N, tabName: f, hide: b, properties: k, hideTitle: p, setPropertyRelates: R, parentPropertyID: $ });
}), y;
}
return [];
}
return {
getPropertyConfigBySchema: o,
getPropertyConfigByType: s,
propertyConverterMap: d
};
}
const ke = {}, Ce = {};
Ee(ke, Ce, pt);
const Be = {}, ze = {}, { getSchemaByType: da, resolveSchemaWithDefaultValue: Lt, resolveSchemaToProps: ga, mappingSchemaToProps: pa, setDesignerContext: ha } = Fe(Be, ze), Oe = {}, $e = {};
Ee(Oe, $e, Lt);
function _t(e, t, a = /* @__PURE__ */ new Map(), d = (M, F, B, v) => F, x = {}, n = (M) => M) {
return Ae[t.title] = t, De[t.title] = d, ke[t.title] = x, Ce[t.title] = n, Be[t.title] = t, ze[t.title] = d, Oe[t.title] = x, $e[t.title] = n, (M = {}, F = !0) => {
if (!F)
return yt(M, a);
const B = ht(M, t, a), v = Object.keys(e).reduce((S, s) => (S[s] = e[s].default, S), {});
return Object.assign(v, B);
};
}
function Ut(e, t) {
return { customClass: t.class, customStyle: t.style };
}
function qt(e, t, a) {
return t;
}
const Vt = /* @__PURE__ */ new Map([
["appearance", Ut]
]), Qt = "https://json-schema.org/draft/2020-12/schema", Gt = "https://farris-design.gitee.io/image-cropper.schema.json", Jt = "image-cropper", Zt = "A Farris Component", Yt = "object", It = {
id: {
description: "The unique identifier for image-cropper",
type: "string"
},
type: {
description: "The type string of image-cropper",
type: "string",
default: "image-cropper"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
}
}, Xt = [
"id",
"type"
], Kt = {
$schema: Qt,
$id: Gt,
title: Jt,
description: Zt,
type: Yt,
properties: It,
required: Xt
}, ea = "image-cropper", ta = "A Farris Component", aa = "object", na = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
},
behavior: {
description: "Basic Infomation",
title: "行为",
properties: {
readonly: {
description: "",
title: "只读",
type: "string"
},
required: {
description: "",
title: "必填",
type: "boolean"
},
visible: {
description: "",
title: "可见",
type: "boolean"
},
placeholder: {
description: "",
title: "提示文本",
type: "string"
},
tabindex: {
description: "",
title: "tab索引",
type: "number"
}
}
}
}, ra = {
title: ea,
description: ta,
type: aa,
categories: na
}, me = {
/** 输出图片格式 */
format: { type: String, default: "png" },
/** 保持长宽比例 */
maintainAspectRatio: { type: Boolean, default: !0 },
/** scale缩放 rotate旋转 flipH横向反转 flipV垂直翻转 执行变化 */
transform: { type: Object, default: { scale: 0, rotate: 0, flipH: !1, flipV: !1 } },
/** 宽高比例 width/height */
aspectRatio: { type: Number, default: 1 },
/** 裁剪后图片被调整为的宽度 */
resizeToWidth: { type: Number, default: 0 },
/** 裁剪后图片被调整为的高度 */
resizeToHeight: { type: Number, default: 0 },
/** 裁剪最小宽度 */
cropperMinWidth: { type: Number, default: 0 },
/** 裁剪最小高度 */
cropperMinHeight: { type: Number, default: 0 },
/** 旋转画布 1 = 90deg */
canvasRotation: { type: Number, default: 0 },
/** 裁剪形状是否为圆形 */
roundCropper: { type: Boolean, default: !0 },
/** 启用这个选项将确保较小的图像不会被放大 */
onlyScaleDown: { type: Boolean, default: !1 },
/** 适用于使用jpeg或webp作为输出格式时。输入0到100之间的数字将决定输出图像的质量 */
imageQuality: { type: Number, default: 92 },
/** 是否每次修改cropper的位置或大小时，cropper都会发出一个图像 */
autoCrop: { type: Boolean, default: !0 },
/** 背景色 */
backgroundColor: { type: String, default: "" },
/** 是否在图像周围添加填充以使其适合长宽比 */
containWithinAspectRatio: { type: Boolean, default: !1 },
/** 隐藏 */
hideResizeSquares: { type: Boolean, default: !1 },
/** 图片加载错误的提示 */
loadImageErrorText: { type: String, default: "图片加载错误" },
/** 图片居中 */
alignImage: { type: String, default: "center" },
/** 是否禁用 */
disabled: { type: Boolean, default: !1 },
/** 图片路径 */
imageURL: { type: String, default: "./src/assets/image01.png" },
/** 图片事件变化 */
imageChangedEvent: { type: Object, default: null },
/** imageBase64 */
imageBase64: { type: String, default: "" },
/** imageFile */
imageFile: { type: Object, default: null },
/** 裁剪的坐标 */
cropper: {
type: Object,
default: {
x1: -100,
y1: -100,
x2: 1e4,
y2: 1e4
}
}
}, Ne = _t(me, Kt, Vt, qt, ra);
var oe = /* @__PURE__ */ ((e) => (e.Move = "move", e.Resize = "resize", e))(oe || {});
function ia() {
function e(x) {
switch (typeof x == "string" && (x = t(x)), x) {
case 2:
return { rotate: 0, flip: !0 };
case 3:
return { rotate: 2, flip: !1 };
case 4:
return { rotate: 2, flip: !0 };
case 5:
return { rotate: 1, flip: !0 };
case 6:
return { rotate: 1, flip: !1 };
case 7:
return { rotate: 3, flip: !0 };
case 8:
return { rotate: 3, flip: !1 };
default:
return { rotate: 0, flip: !1 };
}
}
function t(x) {
const n = new DataView(a(x));
if (n.getUint16(0, !1) !== 65496)
return -2;
const M = n.byteLength;
let F = 2;
for (; F < M; ) {
if (n.getUint16(F + 2, !1) <= 8)
return -1;
const B = n.getUint16(F, !1);
if (F += 2, B === 65505) {
if (n.getUint32(F += 2, !1) !== 1165519206)
return -1;
const v = n.getUint16(F += 6, !1) === 18761;
F += n.getUint32(F + 4, v);
const S = n.getUint16(F, v);
F += 2;
for (let s = 0; s < S; s++)
if (n.getUint16(F + s * 12, v) === 274)
return n.getUint16(F + s * 12 + 8, v);
} else {
if ((B & 65280) !== 65280)
break;
F += n.getUint16(F, !1);
}
}
return -1;
}
function a(x) {
x = x.replace(/^data:([^;]+);base64,/gmi, "");
const n = atob(x), M = n.length, F = new Uint8Array(M);
for (let B = 0; B < M; B++)
F[B] = n.charCodeAt(B);
return F.buffer;
}
function d(x, n, M) {
const F = x.width, B = x.height;
n = Math.round(n), M = Math.round(M);
const v = F / n, S = B / M, s = Math.ceil(v / 2), i = Math.ceil(S / 2), o = x.getContext("2d");
if (o) {
const u = o.getImageData(0, 0, F, B), l = o.createImageData(n, M), { data: m } = u, w = l.data;
for (let E = 0; E < M; E++)
for (let O = 0; O < n; O++) {
const H = (O + E * n) * 4, z = E * S;
let A = 0, y = 0, D = 0, g = 0, W = 0, N = 0, f = 0;
const b = Math.floor(O * v), p = Math.floor(E * S);
let k = Math.ceil((O + 1) * v), R = Math.ceil((E + 1) * S);
k = Math.min(k, F), R = Math.min(R, B);
for (let $ = p; $ < R; $++) {
const C = Math.abs(z - $) / i, U = O * v, J = C * C;
for (let _ = b; _ < k; _++) {
const V = Math.abs(U - _) / s, q = Math.sqrt(J + V * V);
if (q >= 1)
continue;
A = 2 * q * q * q - 3 * q * q + 1;
const G = 4 * (_ + $ * F);
f += A * m[G + 3], D += A, m[G + 3] < 255 && (A = A * m[G + 3] / 250), g += A * m[G], W += A * m[G + 1], N += A * m[G + 2], y += A;
}
}
w[H] = g / y, w[H + 1] = W / y, w[H + 2] = N / y, w[H + 3] = f / D;
}
x.width = n, x.height = M, o.putImageData(l, 0, 0);
}
}
return {
resizeCanvas: d,
getTransformationsFromExifData: e
};
}
function oa(e, t, a, d) {
function x(i, o) {
e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * a.value, i = Math.max(e.value.x2 - t.value.width, 0), o = Math.max(0 - e.value.y1, 0), (i > 0 || o > 0) && (e.value.x2 -= o * a.value > i ? o * a.value : i, e.value.y1 += o * a.value > i ? o : i / a.value);
}
function n(i, o) {
e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * a.value, i = Math.max(e.value.x2 - t.value.width, 0), o = Math.max(e.value.y2 - t.value.height, 0), (i > 0 || o > 0) && (e.value.x2 -= o * a.value > i ? o * a.value : i, e.value.y2 -= o * a.value > i ? o : i / a.value);
}
function M(i, o) {
e.value.y1 = e.value.y2 - (e.value.x2 - e.value.x1) / a.value, i = Math.max(0 - e.value.x1, 0), o = Math.max(0 - e.value.y1, 0), (i > 0 || o > 0) && (e.value.x1 += o * a.value > i ? o * a.value : i, e.value.y1 += o * a.value > i ? o : i / a.value);
}
function F(i, o) {
e.value.y1 = e.value.y2 - (e.value.x2 - e.value.x1) / a.value, i = Math.max(e.value.x2 - t.value.width, 0), o = Math.max(0 - e.value.y1, 0), (i > 0 || o > 0) && (e.value.x2 -= o * a.value > i ? o * a.value : i, e.value.y1 += o * a.value > i ? o : i / a.value);
}
function B(i, o) {
e.value.y2 = e.value.y1 + (e.value.x2 - e.value.x1) / a.value, i = Math.max(e.value.x2 - t.value.width, 0), o = Math.max(e.value.y2 - t.value.height, 0), (i > 0 || o > 0) && (e.value.x2 -= o * a.value > i ? o * a.value : i, e.value.y2 -= o * a.value > i ? o : i / a.value);
}
function v(i, o) {
e.value.y2 = e.value.y1 + (e.value.x2 - e.value.x1) / a.value, i = Math.max(0 - e.value.x1, 0), o = Math.max(e.value.y2 - t.value.height, 0), (i > 0 || o > 0) && (e.value.x1 += o * a.value > i ? o * a.value : i, e.value.y2 -= o * a.value > i ? o : i / a.value);
}
function S() {
e.value.x2 = e.value.x1 + (e.value.y2 - e.value.y1) * a.value, e.value.y2 = e.value.y1 + (e.value.x2 - e.value.x1) / a.value;
const i = Math.max(0 - e.value.x1, 0), o = Math.max(e.value.x2 - t.value.width, 0), u = Math.max(e.value.y2 - t.value.height, 0), l = Math.max(0 - e.value.y1, 0);
(i > 0 || o > 0 || u > 0 || l > 0) && (e.value.x1 += u * a.value > i ? u * a.value : i, e.value.x2 -= l * a.value > o ? l * a.value : o, e.value.y1 += l * a.value > o ? l : o / a.value, e.value.y2 -= u * a.value > i ? u : i / a.value);
}
function s() {
if (t.value.width && t.value.height)
switch (d.position) {
case "top":
x(0, 0);
break;
case "bottom":
n(0, 0);
break;
case "topleft":
M(0, 0);
break;
case "topright":
F(0, 0);
break;
case "right":
case "bottomright":
B(0, 0);
break;
case "left":
case "bottomleft":
v(0, 0);
break;
case "center":
S();
break;
}
}
return { checkAspectRatio: s };
}
function je(e, t) {
const { resizeCanvas: a, getTransformationsFromExifData: d } = ia(), x = we("NotifyService"), n = T(e.cropper), M = T(e.transform), F = T(e.cropperMinWidth), B = T(e.maintainAspectRatio), v = T(e.aspectRatio), S = T(e.autoCrop), s = T(e.backgroundColor), i = T(e.resizeToWidth), o = T(e.onlyScaleDown), u = T(e.containWithinAspectRatio), l = T(e.canvasRotation), m = T(e.format), w = T(e.imageQuality), E = T(e.resizeToHeight), O = T(e.cropperMinHeight), H = T(""), z = T(!0), A = T(!0);
let y, D, g = 0, W, N, f;
const b = T(null), p = T(""), k = T(""), R = T("0px"), $ = T(), C = T({ width: 100, height: 100 }), U = oe;
let J, _ = 20, V = 20, q = !1, G = { rotate: 0, flip: !1 }, P = { active: !1, type: null, position: null, x1: 0, y1: 0, x2: 0, y2: 0, clientX: 0, clientY: 0 };
const I = T(e.imageChangedEvent), te = T(e.imageURL), Re = T(e.imageBase64), He = T(e.imageFile);
function We() {
k.value = "scaleX(" + (M.value.scale || 1) * (M.value.flipH ? -1 : 1) + ")scaleY(" + (M.value.scale || 1) * (M.value.flipV ? -1 : 1) + ")rotate(" + (M.value.rotate || 0) + "deg)";
}
function ae() {
A.value = !1, $.value = null, H.value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=", P = {
active: !1,
type: null,
position: null,
x1: 0,
y1: 0,
x2: 0,
y2: 0,
clientX: 0,
clientY: 0
}, C.value = {
width: 0,
height: 0
}, y = {
width: 0,
height: 0
}, D = {
width: 0,
height: 0
}, n.value.x1 = -100, n.value.y1 = -100, n.value.x2 = 1e4, n.value.y2 = 1e4;
}
function Le(r) {
return /image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(r);
}
function _e() {
if (l.value += G.rotate, u.value && y.width && y.height) {
if (l.value % 2) {
const h = y.width * v.value, L = y.height / v.value;
return {
width: Math.max(y.height, h),
height: Math.max(y.width, L)
};
}
const r = y.height * v.value, c = y.width / v.value;
return {
width: Math.max(y.width, r),
height: Math.max(y.height, c)
};
}
return l.value % 2 ? {
height: y.width,
width: y.height
} : {
width: y.width,
height: y.height
};
}
function Ue() {
l.value += G.rotate;
const r = _e(), c = document.createElement("canvas");
r.width && r.height && (c.width = r.width, c.height = r.height);
const h = c.getContext("2d");
return y.width && y.height && f && (h == null || h.setTransform(G.flip ? -1 : 1, 0, 0, 1, c.width / 2, c.height / 2), h == null || h.rotate(Math.PI * (l.value / 2)), h == null || h.drawImage(f, -y.width / 2, -y.height / 2)), c.toDataURL();
}
function qe(r) {
return new Promise((c) => {
J = r, H.value = r, $.value = new Image(), $.value.onload = () => {
var h, L;
D.width = (h = $.value) == null ? void 0 : h.naturalWidth, D.height = (L = $.value) == null ? void 0 : L.naturalHeight, c();
}, $.value.src = J;
});
}
function de() {
if (!f || !f.complete || !G)
return Promise.reject(new Error("No image loaded"));
const r = Ue();
return qe(r);
}
function le(r) {
const c = (h) => {
x.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片上传错误，请重试" }]
}), z.value = !1, q = !0, t.emit("loadImageFailed"), f = null, p.value = "";
};
f = new Image(), f.onload = () => {
p.value = r, G = d(r), y.width = f == null ? void 0 : f.naturalWidth, y.height = f == null ? void 0 : f.naturalHeight, de().then(() => {
q = !1;
}).catch(c);
}, f.onerror = c, f.src = r;
}
function Ve(r, c) {
Le(c) ? (q = !1, le(r)) : (x.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片类型不正确,请重试" }]
}), z.value = !1, q = !0, t.emit("loadImageFailed"));
}
function ge(r) {
const c = new FileReader();
c.onload = (h) => Ve(h.target.result, r.type), c.readAsDataURL(r);
}
function pe(r) {
const c = new Image();
c.onerror = () => {
x.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片加载错误，请重试" }]
}), z.value = !1, q = !0, t.emit("loadImageFailed");
}, c.onload = () => {
q = !1;
const h = document.createElement("canvas"), L = h.getContext("2d");
h.width = c.width, h.height = c.height, L == null || L.drawImage(c, 0, 0), le(h.toDataURL());
}, c.crossOrigin = "anonymous", c.src = r;
}
function Qe() {
return b.value && b.value && b.value.offsetWidth > 0;
}
function ue() {
if (b.value) {
const r = b.value;
C.value.width = r.offsetWidth, C.value.height = r.offsetHeight, R.value = "calc(50% - " + C.value.width / 2 + "px)";
}
}
function Ge() {
$.value && C.value.width && (_ = F.value > 0 ? Math.max(20, F.value / $.value.width * C.value.width) : 20);
}
function Je() {
B.value ? V = Math.max(20, _ / v.value) : O.value > 0 && $.value && C.value.height ? V = Math.max(20, O.value / $.value.height * C.value.height) : V = 20;
}
function se() {
$.value ? (Ge(), Je()) : (_ = 20, V = 20);
}
function Ze() {
const r = b.value, c = T({ x1: 0, x2: 0, y1: 0, y2: 0 });
if (r && D.width && D.height) {
const h = D.width / r.offsetWidth;
c.value = {
x1: Math.round(n.value.x1 * h),
y1: Math.round(n.value.y1 * h),
x2: Math.round(n.value.x2 * h),
y2: Math.round(n.value.y2 * h)
}, u.value || (c.value.x1 = Math.max(c.value.x1, 0), c.value.y1 = Math.max(c.value.y1, 0), c.value.x2 = Math.min(c.value.x2, D.width), c.value.y2 = Math.min(c.value.y2, D.height));
}
return c.value;
}
function Ye() {
l.value += G.rotate;
const r = b.value, c = T({ x1: 0, x2: 0, y1: 0, y2: 0 });
if (r && D.height && D.width && y.height && y.width) {
const h = D.width / r.offsetWidth;
let L, Q;
l.value % 2 ? (L = (D.width - y.height) / 2, Q = (D.height - y.width) / 2) : (L = (D.width - y.width) / 2, Q = (D.height - y.height) / 2), c.value = {
x1: Math.round(n.value.x1 * h) - L,
y1: Math.round(n.value.y1 * h) - Q,
x2: Math.round(n.value.x2 * h) - L,
y2: Math.round(n.value.y2 * h) - Q
}, u.value || (c.value.x1 = Math.max(c.value.x1, 0), c.value.y1 = Math.max(c.value.y1, 0), c.value.x2 = Math.min(c.value.x2, D.width), c.value.y2 = Math.min(c.value.y2, D.height));
}
return c.value;
}
function Ie(r, c) {
if (i.value > 0) {
if (!o.value || r > i.value)
return i.value / r;
} else if (E.value > 0 && (!o.value || c > E.value))
return E.value / c;
return 1;
}
function Xe() {
return Math.min(1, Math.max(0, w.value / 100));
}
function Ke(r) {
return r.toDataURL("image/" + m.value, Xe());
}
function et() {
if (b.value && b.value && $.value != null) {
const r = Ze(), c = r.x2 - r.x1, h = r.y2 - r.y1, L = document.createElement("canvas");
L.width = c, L.height = h;
const Q = L.getContext("2d");
if (Q) {
s.value != null && (Q.fillStyle = s.value, Q.fillRect(0, 0, c, h));
const X = (M.value.scale || 1) * (M.value.flipH ? -1 : 1), K = (M.value.scale || 1) * (M.value.flipV ? -1 : 1);
D.width && D.height && (Q.setTransform(X, 0, 0, K, D.width / 2, D.height / 2), Q.translate(-r.x1 / X, -r.y1 / K), Q.rotate((M.value.rotate || 0) * Math.PI / 180), Q.drawImage($.value, -D.width / 2, -D.height / 2));
const Y = {
width: c,
height: h,
imagePosition: r,
cropperPosition: { ...n.value }
};
u.value && (Y.offsetImagePosition = Ye());
const ne = Ie(c, h);
return ne !== 1 && (Y.width = Math.round(c * ne), Y.height = B.value ? Math.round(Y.width / v.value) : Math.round(h * ne), a(L, Y.width, Y.height)), Y.base64 = Ke(L), t.emit("imageCropped", Y), Y;
}
}
return null;
}
function ie() {
S.value && et();
}
function he() {
const r = b.value;
if (r) {
if (!B.value)
n.value.x1 = 0, n.value.x2 = r.offsetWidth, n.value.y1 = 0, n.value.y2 = r.offsetHeight;
else if (r.offsetWidth / v.value < r.offsetHeight) {
n.value.x1 = 0, n.value.x2 = r.offsetWidth;
const c = r.offsetWidth / v.value;
n.value.y1 = (r.offsetHeight - c) / 2, n.value.y2 = n.value.y1 + c;
} else {
n.value.y1 = 0, n.value.y2 = r.offsetHeight;
const c = r.offsetHeight * v.value;
n.value.x1 = (r.offsetWidth - c) / 2, n.value.x2 = n.value.x1 + c;
}
ie(), A.value = !0;
}
}
function ye() {
g > 40 ? (x.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片加载超时，请重试" }]
}), q = !0, z.value = !1, t.emit("loadImageFailed")) : Qe() ? (q = !1, ue(), se(), he(), t.emit("cropperReady", { ...C.value })) : (g++, setTimeout(() => ye(), 50));
}
function tt() {
$.value != null && (z.value = !1, t.emit("imageLoaded"), g = 0, setTimeout(() => ye()));
}
function at() {
const r = b.value;
(C.value.width !== (r == null ? void 0 : r.offsetWidth) || C.value.height !== (r == null ? void 0 : r.offsetHeight)) && C.value.width && C.value.height && r && (n.value.x1 = n.value.x1 * r.offsetWidth / C.value.width, n.value.x2 = n.value.x2 * r.offsetWidth / C.value.width, n.value.y1 = n.value.y1 * r.offsetHeight / C.value.height, n.value.y2 = n.value.y2 * r.offsetHeight / C.value.height);
}
const nt = () => {
at(), ue(), se();
}, be = () => {
clearTimeout(N), N = setTimeout(nt, 300);
};
Te(() => {
window.addEventListener("resize", be), te.value && (ae(), z.value = !0, pe(te.value));
}), dt(() => {
window.removeEventListener("resize", be);
});
function rt() {
P.active && (P.active = !1, ie());
}
function ce(r) {
return (r.touches && r.touches[0] ? r.touches[0].clientX : r.clientX) || 0;
}
function fe(r) {
return (r.touches && r.touches[0] ? r.touches[0].clientY : r.clientY) || 0;
}
function it(r, c, h = null) {
P && P.active || (r.preventDefault && r.preventDefault(), P = {
active: !0,
type: c,
position: h,
clientX: ce(r),
clientY: fe(r),
...n.value
});
}
function ve(r = !1) {
n.value.x1 < 0 && (n.value.x2 -= r ? n.value.x1 : 0, n.value.x1 = 0), n.value.y1 < 0 && (n.value.y2 -= r ? n.value.y1 : 0, n.value.y1 = 0), n.value.x2 > C.value.width && (n.value.x1 -= r ? n.value.x2 - C.value.width : 0, n.value.x2 = C.value.width), n.value.y2 > C.value.height && (n.value.y1 -= r ? n.value.y2 - C.value.height : 0, n.value.y2 = C.value.height);
}
function ot(r) {
const c = ce(r) - P.clientX, h = fe(r) - P.clientY;
n.value.x1 = P.x1 + c, n.value.y1 = P.y1 + h, n.value.x2 = P.x2 + c, n.value.y2 = P.y2 + h;
}
const { checkAspectRatio: lt } = oa(n, C, v, P);
function ut(r) {
const c = ce(r) - P.clientX, h = fe(r) - P.clientY;
switch (P.position) {
case "left":
n.value.x1 = Math.min(P.x1 + c, n.value.x2 - _);
break;
case "topleft":
n.value.x1 = Math.min(P.x1 + c, n.value.x2 - _), n.value.y1 = Math.min(P.y1 + h, n.value.y2 - V);
break;
case "top":
n.value.y1 = Math.min(P.y1 + h, n.value.y2 - V);
break;
case "topright":
n.value.x2 = Math.max(P.x2 + c, n.value.x1 + _), n.value.y1 = Math.min(P.y1 + h, n.value.y2 - V);
break;
case "right":
n.value.x2 = Math.max(P.x2 + c, n.value.x1 + _);
break;
case "bottomright":
n.value.x2 = Math.max(P.x2 + c, n.value.x1 + _), n.value.y2 = Math.max(P.y2 + h, n.value.y1 + V);
break;
case "bottom":
n.value.y2 = Math.max(P.y2 + h, n.value.y1 + V);
break;
case "bottomleft":
n.value.x1 = Math.min(P.x1 + c, n.value.x2 - _), n.value.y2 = Math.max(P.y2 + h, n.value.y1 + V);
break;
case "center":
const { scale: L } = r, Q = Math.abs(P.x2 - P.x1) * L, X = Math.abs(P.y2 - P.y1) * L, { x1: K } = n.value, { y1: Y } = n.value;
n.value.x1 = Math.min(P.clientX - Q / 2, n.value.x2 - _), n.value.y1 = Math.min(P.clientY - X / 2, n.value.y2 - V), n.value.x2 = Math.max(P.clientX + Q / 2, K + _), n.value.y2 = Math.max(P.clientY + X / 2, Y + V);
break;
}
B.value && lt();
}
function st(r) {
P && P.active && (r.stopPropagation && r.stopPropagation(), r.preventDefault && r.preventDefault(), clearTimeout(W), W = setTimeout(() => {
P.type === oe.Move ? (ot(r), ve(!0)) : P.type === oe.Resize && (ut(r), ve(!1));
}, 300));
}
return re(I, (r) => {
ae(), r && r.target && r.target.files && r.target.files.length > 0 && (z.value = !0, ge(r.target.files[0]));
}), re(te, (r) => {
r ? (ae(), z.value = !0, pe(r)) : (x.show({
showCloseButton: !1,
timeout: 3e3,
animate: "fadeIn",
toasts: [{ type: "string", title: "提示", msg: "图片路径为空" }]
}), z.value = !1, q = !0);
}), re(Re, (r) => {
ae(), z.value = !0, le(r);
}), re(He, (r) => {
ae(), r && (z.value = !0, ge(r));
}), re(
() => [
e.containWithinAspectRatio,
e.canvasRotation,
e.cropper,
e.aspectRatio,
e.transform,
e.imageChangedEvent
],
([r, c, h, L, Q, X], [K, Y, ne, ct, ft, vt]) => {
f && f.complete && G && (r !== K || c !== Y) && de(), h !== ne && (ue(), se(), ve(!1), ie()), L !== ct && A.value && he(), Q !== ft && (We(), ie()), X !== vt && (I.value = X);
}
), {
uploadError: q,
imageVisible: A,
backgroundColor: s,
sourceImage: b,
safeImgDataUrl: H,
safeTransformStyle: k,
maxSize: C,
cropper: n,
marginLeft: R,
moveTypes: U,
isLoading: z,
startMove: it,
imageLoadedInView: tt,
moveStop: rt,
moveImg: st
};
}
const ee = /* @__PURE__ */ Se({
name: "FImageCropper",
props: me,
emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
setup(e, t) {
const a = T(e.alignImage), d = T(e.roundCropper), x = T(e.hideResizeSquares), n = T(e.loadImageErrorText), M = T(e.disabled), F = T(null), {
uploadError: B,
imageVisible: v,
backgroundColor: S,
sourceImage: s,
safeImgDataUrl: i,
safeTransformStyle: o,
maxSize: u,
cropper: l,
marginLeft: m,
moveTypes: w,
isLoading: E,
startMove: O,
imageLoadedInView: H,
moveStop: z,
moveImg: A
} = je(e, t);
function y(N) {
return j("span", {
class: `farris-image-cropper-resize-bar ${N}`,
onMousedown: Z((f) => O(f, w.Resize, N), ["prevent"])
}, null);
}
function D(N) {
return j("div", null, [j("span", {
class: `farris-image-cropper-resize-bar ${N}`,
onMousedown: Z((f) => O(f, w.Resize, N), ["prevent"])
}, [j("span", {
class: "farris-image-cropper-square"
}, null)]), j("span", {
class: "farris-image-cropper-resize top"
}, [j("span", {
class: "farris-image-cropper-square"
}, null)])]);
}
const g = ["top", "right", "bottom", "left"].map((N) => y(N)), W = ["topleft", "topright", "bottomright", "bottomleft"].map((N) => D(N));
return () => j("div", {
class: ["farris-image-cropper-frame", {
"farris-image-cropper-disabled": M.value
}],
style: {
"text-align": a.value
},
onMousemove: Z((N) => A(N), ["prevent"]),
onTouchmove: Z((N) => A(N), ["prevent"]),
onMouseup: Z(() => z(), ["prevent"]),
onTouchend: Z(() => z(), ["prevent"])
}, [!B && j("div", {
ref: F,
class: "farris-image-cropper",
style: [{
background: v.value ? S.value : ""
}]
}, [i.value && j("img", {
title: "farris-source-image",
ref: s,
class: "farris-source-image",
style: [{
visibility: v.value ? "visible" : "hidden"
}, {
transform: o.value
}],
src: i.value,
onLoad: () => H()
}, null), u.value && j("div", {
class: "farris-image-overlay",
style: [{
width: `${u.value.width || 0}px`
}, {
height: `${u.value.height || 0}px`
}, {
"margin-left": a.value === "center" ? m.value : ""
}]
}, null), v.value && j("div", {
class: ["farris-image-cropper-wrapper", {
"farris-image-cropper-rounded": d.value
}],
style: [{
top: `${l.value.y1}px`
}, {
left: `${l.value.x1}px`
}, {
width: `${l.value.x2 - l.value.x1}px`
}, {
height: `${l.value.y2 - l.value.y1}px`
}, {
visibility: v.value ? "visible" : "hidden"
}, {
"margin-left": a.value === "center" ? m.value : ""
}],
tabindex: "0"
}, [j("div", {
class: "farris-image-cropper-move",
onMousedown: Z((N) => O(N, w.Move, "topleft"), ["prevent"])
}, null), !x.value && j("div", null, [W, g])])]), E.value && j("div", {
class: "farris-image-cropper-loading"
}, [j("div", {
class: "farris-image-cropper-loading-spinner"
}, null)]), B && j("div", {
class: "farris-image-cropper-error"
}, [n.value])]);
}
});
function la(e, t, a) {
var N;
const d = "", x = "", n = T();
let M;
function F() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function B() {
return !1;
}
function v() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function S() {
return (t == null ? void 0 : t.schema.componentType) === "frame";
}
function s(f) {
if (!f || !f.value)
return null;
if (f.value.schema && f.value.schema.type === "component")
return f.value;
const b = T(f == null ? void 0 : f.value.parent), p = s(b);
return p || null;
}
function i(f = t) {
var R;
const { componentInstance: b, designerItemElementRef: p } = f;
if (!b || !b.value)
return null;
const { getCustomButtons: k } = b.value;
return b.value.canMove || k && ((R = k()) != null && R.length) ? p : i(f.parent);
}
function o(f) {
return !!a;
}
function u() {
return (t == null ? void 0 : t.schema.label) || (t == null ? void 0 : t.schema.title) || (t == null ? void 0 : t.schema.name);
}
function l() {
}
function m(f, b) {
var p;
!f || !b || (p = t == null ? void 0 : t.setupContext) == null || p.emit("dragEnd");
}
function w(f, b) {
const { componentType: p } = f;
let k = gt(p, f, b);
const R = p.toLowerCase().replace(/-/g, "_");
return k && !k.id && k.type === p && (k.id = `${R}_${Math.random().toString().slice(2, 6)}`), k;
}
function E(f) {
}
function O(...f) {
}
function H(f) {
if (!f)
return;
const b = t == null ? void 0 : t.schema, { formSchemaUtils: p } = f;
if (b && p.getExpressions().length) {
const k = p.getExpressions().findIndex((R) => R.target === b.id);
k > -1 && p.getExpressions().splice(k, 1);
}
}
function z(f) {
if (!f || !(t != null && t.schema))
return;
const b = t.schema, { formSchemaUtils: p } = f;
p.removeCommunicationInComponent(b)