@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,132 lines (1,131 loc) • 39 kB
JavaScript
import { ref as F, computed as O, defineComponent as x, watch as J, createVNode as j, Fragment as fe, inject as pe, onMounted as de } from "vue";
import { cloneDeep as X, isPlainObject as Y } from "lodash-es";
import { getSchemaByTypeForDesigner as ge } from "../dynamic-resolver/index.esm.js";
import { withInstall as me } from "../common/index.esm.js";
function Q(e, t) {
let r;
function i(s) {
const { properties: a, title: g, ignore: n } = s, o = n && Array.isArray(n), u = Object.keys(a).reduce((c, v) => ((!o || !n.find((T) => T === v)) && (c[v] = a[v].type === "object" && a[v].properties ? i(a[v]) : X(a[v].default)), c), {});
if (g && (!o || !n.find((c) => c === "id"))) {
const c = g.toLowerCase().replace(/-/g, "_");
u.id = `${c}_${Math.random().toString().slice(2, 6)}`;
}
return u;
}
function S(s) {
const { properties: a, title: g, required: n } = s;
if (n && Array.isArray(n)) {
const o = n.reduce((u, c) => (u[c] = a[c].type === "object" && a[c].properties ? i(a[c]) : X(a[c].default), u), {});
if (g && n.find((u) => u === "id")) {
const u = g.toLowerCase().replace(/-/g, "_");
o.id = `${u}_${Math.random().toString().slice(2, 6)}`;
}
return o;
}
return {
type: g
};
}
function P(s, a = {}, g) {
const n = e[s];
if (n) {
let o = S(n);
const u = t[s];
return o = u ? u({ getSchemaByType: P }, o, a, g) : o, r != null && r.appendIdentifyForNewControl && r.appendIdentifyForNewControl(o), o;
}
return null;
}
function b(s, a) {
const g = i(a);
return Object.keys(g).reduce((n, o) => (Object.prototype.hasOwnProperty.call(s, o) && (n[o] && Y(n[o]) && Y(s[o] || !s[o]) ? Object.assign(n[o], s[o] || {}) : n[o] = s[o]), n), g), g;
}
function k(s, a) {
return Object.keys(s).filter((n) => s[n] != null).reduce((n, o) => {
if (a.has(o)) {
const u = a.get(o);
if (typeof u == "string")
n[u] = s[o];
else {
const c = u(o, s[o], s);
Object.assign(n, c);
}
} else
n[o] = s[o];
return n;
}, {});
}
function M(s, a, g = /* @__PURE__ */ new Map()) {
const n = b(s, a);
return k(n, g);
}
function l(s) {
var g;
const a = s.type;
if (a) {
const n = e[a];
if (!n)
return s;
const o = b(s, n), u = ((g = s.editor) == null ? void 0 : g.type) || "";
if (u) {
const c = e[u], v = b(s.editor, c);
o.editor = v;
}
return o;
}
return s;
}
function d(s) {
r = s;
}
return { getSchemaByType: P, resolveSchemaWithDefaultValue: l, resolveSchemaToProps: M, mappingSchemaToProps: k, setDesignerContext: d };
}
const Z = {}, V = {}, { getSchemaByType: bt, resolveSchemaWithDefaultValue: ve, resolveSchemaToProps: ye, mappingSchemaToProps: be, setDesignerContext: ht } = Q(Z, V);
function he(e = {}) {
function t(l, d, s, a) {
if (typeof s == "number")
return a[l].length === s;
if (typeof s == "object") {
const g = Object.keys(s)[0], n = s[g];
if (g === "not")
return Number(a[l].length) !== Number(n);
if (g === "moreThan")
return Number(a[l].length) >= Number(n);
if (g === "lessThan")
return Number(a[l].length) <= Number(n);
}
return !1;
}
function r(l, d, s, a) {
return a[l] && a[l].propertyValue && String(a[l].propertyValue.value) === String(s);
}
const i = /* @__PURE__ */ new Map([
["length", t],
["getProperty", r]
]);
Object.keys(e).reduce((l, d) => (l.set(d, e[d]), l), i);
function S(l, d) {
const s = l;
return typeof d == "number" ? [{ target: s, operator: "length", param: null, value: Number(d) }] : typeof d == "boolean" ? [{ target: s, operator: "getProperty", param: l, value: !!d }] : typeof d == "object" ? Object.keys(d).map((a) => {
if (a === "length")
return { target: s, operator: "length", param: null, value: d[a] };
const g = a, n = d[a];
return { target: s, operator: "getProperty", param: g, value: n };
}) : [];
}
function P(l) {
return Object.keys(l).reduce((s, a) => {
const g = S(a, l[a]);
return s.push(...g), s;
}, []);
}
function b(l, d) {
if (i.has(l.operator)) {
const s = i.get(l.operator);
return s && s(l.target, l.param, l.value, d) || !1;
}
return !1;
}
function k(l, d) {
return P(l).reduce((g, n) => g && b(n, d), !0);
}
function M(l, d) {
const s = Object.keys(l), a = s.includes("allOf"), g = s.includes("anyOf"), n = a || g, c = (n ? l[n ? a ? "allOf" : "anyOf" : "allOf"] : [l]).map((T) => k(T, d));
return a ? !c.includes(!1) : c.includes(!0);
}
return { parseValueSchema: M };
}
const Se = {
convertTo: (e, t, r, i) => {
e.appearance || (e.appearance = {}), e.appearance[t] = r;
},
convertFrom: (e, t, r) => e.appearance ? e.appearance[t] : e[t]
}, ke = {
convertFrom: (e, t, r) => e.buttons && e.buttons.length ? `共 ${e.buttons.length} 项` : "无"
}, Pe = {
convertTo: (e, t, r, i) => {
e.editor && (e.editor[t] = r);
},
convertFrom: (e, t, r) => e.editor && Object.prototype.hasOwnProperty.call(e.editor, t) ? e.editor[t] : e[t]
}, I = {
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: "多语输入框" }
}, Te = {
convertFrom: (e, t, r) => {
var S;
const i = e.editor && e.editor[t] ? e.editor[t] : e[t];
return ((S = I[i]) == null ? void 0 : S.name) || i;
}
}, $e = {
convertTo: (e, t, r, i) => {
e[t] = e[t];
},
convertFrom: (e, t, r) => e.editor ? r.getRealEditorType(e.editor.type) : ""
}, we = {
convertTo: (e, t, r, i) => {
(e.type === "data-grid-column" || e.type === "tree-grid-column") && (e.formatter ? e.formatter[t] = r : e.formatter = {
[t]: r
});
},
convertFrom: (e, t, r) => {
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";
}
}, Fe = {
convertTo: (e, t, r, i) => {
e.command ? e.command[t] = r : e.command = {
[t]: r
}, t === "enable" && r && (e.command.commands || (e.command.commands = [
{
text: "编辑",
type: "primary",
command: "edit"
},
{
text: "删除",
type: "danger",
command: "remove"
}
]));
},
convertFrom: (e, t, r) => e.command && t === "enable" ? e.command.enable : ""
}, Oe = {
convertTo: (e, t, r, i) => {
e.column ? e.column[t] = r : e.column = {
[t]: r
}, t === "fitColumns" && r && (e.column.fitMode || (e.column.fitMode = "average"));
},
convertFrom: (e, t, r) => {
if (e.column) {
if (t === "fitColumns")
return e.column.fitColumns;
if (t === "fitMode")
return e.column.fitMode;
}
return "";
}
}, Me = {
convertTo: (e, t, r, i) => {
e.summary ? e.summary[t] = r : e.summary = {
[t]: r
}, t === "enable" && r && (e.summary ? e.summary.groupFields || (e.summary.groupFields = []) : e.summary = {
enable: r,
groupFields: []
});
},
convertFrom: (e, t, r) => e.summary && t === "enable" ? e.summary.enable : e.type === "data-grid-column" ? e.enableSummary === void 0 ? !1 : e.enableSummary : ""
}, je = {
convertTo: (e, t, r, i) => {
e.group ? e.group[t] = r : e.group = {
[t]: r
}, t === "enable" && r && (e.group ? e.group.groupFields || (e.group.groupFields = []) : e.group = {
enable: r,
groupFields: [],
showSummary: !1
});
},
convertFrom: (e, t, r) => {
if (e.group) {
if (t === "enable")
return e.group.enable;
if (t === "showSummary")
return e.group.showSummary;
}
}
}, Be = {
convertFrom: (e, t) => e.binding ? e.binding.path : "",
convertTo: (e, t, r) => {
if (r && r.length > 0) {
const i = r[0];
e.binding || (e.binding = {}), e.binding.type = "Form", e.binding.path = i.bindingField, e.binding.field = i.id, e.binding.fullPath = i.path, e.path = i.bindingPath;
}
}
}, De = {
convertTo: (e, t, r, i) => {
e.pagination || (e.pagination = {}), e.pagination[t] = r;
},
convertFrom: (e, t, r) => e.pagination ? e.pagination[t] : e[t]
}, Ne = {
convertTo: (e, t, r, i) => {
e.rowNumber || (e.rowNumber = {}), e.rowNumber[t] = r;
},
convertFrom: (e, t, r) => e.rowNumber ? e.rowNumber[t] : e[t]
}, Ee = {
convertTo: (e, t, r, i) => {
e.selection || (e.selection = {}), e.selection[t] = r;
},
convertFrom: (e, t, r) => e.selection ? e.selection[t] : e[t]
}, Ce = {
convertFrom: (e, t, r) => e[t] && e[t].length ? `共 ${e[t].length} 项` : ""
}, Re = {
convertFrom: (e, t) => e[t] || "",
convertTo: (e, t, r) => {
e[t] = r;
}
}, Ge = {
convertTo: (e, t, r, i) => {
e.size || (e.size = {}), e.size[t] = r;
},
convertFrom: (e, t, r) => e.size ? e.size[t] : e[t]
}, We = {
convertFrom: (e, t, r) => {
var i, S;
return (i = e.formatter) != null && i.data && t === "formatterEnumData" && !e.formatterEnumData ? (S = e.formatter) == null ? void 0 : S.data : e.formatterEnumData;
}
}, Ae = {
convertTo: (e, t, r, i) => {
e.sort || (e.sort = {}), e.sort[t] = r;
},
convertFrom: (e, t, r) => {
var i, S;
if (t === "mode")
return ((i = e.sort) == null ? void 0 : i.mode) || "client";
if (t === "multiSort")
return !!((S = e.sort) != null && S.multiSort);
}
}, Le = {
convertTo: (e, t, r, i) => {
e.filter || (e.filter = {}), e.filter[t] = r;
},
convertFrom: (e, t, r) => {
var i;
if (t === "mode")
return ((i = e.filter) == null ? void 0 : i.mode) || "client";
}
}, ze = {
convertTo: (e, t, r, i) => {
e.rowOption ? e.rowOption[t] = r : e.rowOption = {
[t]: r
};
},
convertFrom: (e, t, r) => {
if (e.rowOption) {
if (t === "customRowStyle")
return e.rowOption.customRowStyle;
if (t === "customCellStyle")
return e.rowOption.customCellStyle;
}
return "";
}
};
function K(e, t, r) {
const i = /* @__PURE__ */ new Map([
["/converter/appearance.converter", Se],
["/converter/buttons.converter", ke],
["/converter/property-editor.converter", Pe],
["/converter/items-count.converter", Ce],
["/converter/type.converter", Te],
["/converter/change-editor.converter", $e],
["/converter/change-formatter.converter", we],
["/converter/column-command.converter", Fe],
["/converter/column-option.converter", Oe],
["/converter/summary.converter", Me],
["/converter/group.converter", je],
["/converter/form-group-label.converter", Re],
["/converter/field-selector.converter", Be],
["/converter/pagination.converter", De],
["/converter/row-number.converter", Ne],
["/converter/grid-selection.converter", Ee],
["/converter/size.converter", Ge],
["/converter/change-formatter-enum.converter", We],
["/converter/grid-sort.converter", Ae],
["/converter/grid-filter.converter", Le],
["/converter/row-option.converter", ze]
]), S = /* @__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 }]
]), P = he();
function b(n, o) {
return () => P.parseValueSchema(n, o);
}
function k(n, o, u) {
return n.includes("visible") && o.visible !== void 0 ? typeof o.visible == "boolean" ? () => !!o.visible : o.visible === void 0 ? !0 : b(o.visible, u) : () => !0;
}
function M(n, o, u) {
return n.includes("readonly") && o.readonly !== void 0 ? typeof o.readonly == "boolean" ? () => !!o.readonly : b(o.readonly, u) : () => !1;
}
function l(n, o) {
const u = n.$converter || o;
return typeof u == "string" && u && i.has(u) ? i.get(u) || null : u || null;
}
function d(n, o, u, c, v, T = "", B = "") {
return Object.keys(n).map((h) => {
const E = F(1), R = h, p = n[h], C = Object.keys(p), W = p.title, f = p.type, m = S.get(f) || { type: "input-group", enableClear: !1 }, y = p.editor ? Object.assign({}, m, p.editor) : Object.assign({}, m), $ = k(C, p, o), N = M(C, p, o);
y.readonly = y.readonly === void 0 ? N() : y.readonly;
const w = p.type === "cascade" ? d(p.properties, o, u, c, v, T, B) : [], A = !0;
let G = l(p, B);
const L = O({
get() {
if (E.value) {
if (["class", "style"].find((ue) => ue === R) && !G && (G = i.get("/converter/appearance.converter") || null), G && G.convertFrom)
return G.convertFrom(u, h, v, T);
const z = u[h];
return Object.prototype.hasOwnProperty.call(p, "defaultValue") && (z === void 0 || typeof z == "string" && z === "") ? p.type === "boolean" ? p.defaultValue : p.defaultValue || "" : z;
}
return null;
},
set(z) {
E.value += 1, G && G.convertTo ? (G.convertTo(c, h, z, v, T), G.convertTo(u, h, z, v, T)) : (c[h] = z, u[h] = z);
}
}), { refreshPanelAfterChanged: q, description: ae, isExpand: ce, parentPropertyID: le } = p, U = { propertyID: R, propertyName: W, propertyType: f, propertyValue: L, editor: y, visible: $, readonly: N, cascadeConfig: w, hideCascadeTitle: A, refreshPanelAfterChanged: q, description: ae, isExpand: ce, parentPropertyID: le };
return o[R] = U, U;
});
}
function s(n, o, u = {}) {
const c = {}, v = e[n];
return v && v.categories ? Object.keys(v.categories).map((B) => {
const D = v.categories[B], h = D == null ? void 0 : D.title, E = d(D.properties || {}, c, {}, u, o);
return { categoryId: B, categoryName: h, properties: E };
}) : [];
}
function a(n, o, u, c, v = "") {
const T = o.$ref.schema, B = o.$ref.converter, D = u[T], h = D.type, E = r(D), R = {}, p = e[h];
if (p && p.categories) {
const C = p.categories[n], W = C == null ? void 0 : C.title;
B && Object.keys(C.properties).forEach((y) => {
C.properties[y].$converter = B;
});
const f = (C == null ? void 0 : C.properties) || {}, m = d(f, R, E, D, c, v);
return { categoryId: n, categoryName: W, properties: m };
}
return { categoryId: n, categoryName: "", properties: [] };
}
function g(n, o, u, c, v) {
const T = n.type, B = r(n), D = {};
let h = v || e[T];
if (h && Object.keys(h).length === 0 && u && u.getPropConfig && (h = u.getPropConfig(c)), h && h.categories) {
const E = [];
return Object.keys(h.categories).map((R) => {
const p = h.categories[R];
if (p.$ref) {
E.push(a(R, p, n, o, c));
return;
}
const C = p == null ? void 0 : p.title, W = p == null ? void 0 : p.tabId, f = p == null ? void 0 : p.tabName, m = p == null ? void 0 : p.hide, y = p == null ? void 0 : p.hideTitle, $ = d(p.properties || {}, D, B, n, o, c, p.$converter), { setPropertyRelates: N } = p, w = p == null ? void 0 : p.parentPropertyID;
E.push({ categoryId: R, categoryName: C, tabId: W, tabName: f, hide: m, properties: $, hideTitle: y, setPropertyRelates: N, parentPropertyID: w });
}), E;
}
return [];
}
return {
getPropertyConfigBySchema: g,
getPropertyConfigByType: s,
propertyConverterMap: i
};
}
const ee = {}, te = {};
K(ee, te, ve);
const re = {}, ne = {}, { getSchemaByType: St, resolveSchemaWithDefaultValue: qe, resolveSchemaToProps: kt, mappingSchemaToProps: Pt, setDesignerContext: Tt } = Q(re, ne), oe = {}, se = {};
K(oe, se, qe);
function He(e, t, r = /* @__PURE__ */ new Map(), i = (b, k, M, l) => k, S = {}, P = (b) => b) {
return Z[t.title] = t, V[t.title] = i, ee[t.title] = S, te[t.title] = P, re[t.title] = t, ne[t.title] = i, oe[t.title] = S, se[t.title] = P, (b = {}, k = !0) => {
if (!k)
return be(b, r);
const M = ye(b, t, r), l = Object.keys(e).reduce((d, s) => (d[s] = e[s].default, d), {});
return Object.assign(l, M);
};
}
function _e(e, t) {
return { customClass: t.class, customStyle: t.style };
}
const Ue = /* @__PURE__ */ new Map([
["appearance", _e]
]);
function Xe(e, t, r) {
return t;
}
const Ye = "https://json-schema.org/draft/2020-12/schema", xe = "https://farris-design.gitee.io/progress.schema.json", Je = "progress", Qe = "A Farris Component", Ze = "object", Ve = {
id: {
description: "The unique identifier for progress",
type: "string"
},
type: {
description: "The type string of progress",
type: "string",
default: "progress"
},
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
}
}, Ie = [
"id",
"type"
], Ke = {
$schema: Ye,
$id: xe,
title: Je,
description: Qe,
type: Ze,
properties: Ve,
required: Ie
}, et = "progress", tt = "A Farris Component", rt = "object", nt = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, ot = {
title: et,
description: tt,
type: rt,
categories: nt
}, _ = {
progressType: { type: String, default: "line" },
strokeWidth: { type: Number, default: 0 },
size: { type: String, default: "default" },
showInfo: { type: Boolean, default: !0 },
progressStatus: { type: String, default: "default" },
successPercent: { type: Number, default: 0 },
strokeColor: { type: String, default: "" },
strokeLinecap: { type: String, default: "round" },
width: { type: Number, default: 100 },
percent: { type: Number, default: 20 },
/**
* 启用成功分段背景图片
*/
enableBackgroundImg: { type: Boolean, default: !1 },
/**
* 成功分段背景图片
*/
backgroundImg: { type: String, default: "" },
/**
* 仪表盘缺口位置
*/
gapPosition: { type: String },
/**
* 仪表盘缺口角度，默认0°
*/
gapDegree: { type: Number, default: 0 },
/**
* 格式化进度信息
*/
format: { type: Function, default: (e, t) => `${e}%` }
}, ie = He(_, Ke, Ue, Xe, ot);
function st(e) {
function t(b) {
return +b.replace("%", "");
}
function r(b) {
let k = [];
return Object.keys(b).forEach((M) => {
const l = b[M], d = t(M);
isNaN(d) || k.push({
key: d,
value: l
});
}), k = k.sort((M, l) => M.key - l.key), k;
}
const i = O(() => !!e.strokeColor && typeof e.strokeColor != "string"), S = O(() => {
const { from: b = "#59a1ff", to: k = "#59a1ff", direction: M = "to right", ...l } = e.strokeColor;
if (Object.keys(l).length !== 0) {
const d = r(l).map(({ key: s, value: a }) => `${a} ${s}%`).join(", ");
return `linear-gradient(${M}, ${d})`;
}
return `linear-gradient(${M}, ${b}, ${k})`;
}), P = O(() => r(e.strokeColor).map(({ key: b, value: k }) => ({ offset: `${b}%`, color: k })));
return {
isGradient: i,
linearGradient: S,
circleGradient: P
};
}
function it(e) {
return { strokeWidth: O(() => e.strokeWidth || (e.progressType === "line" && e.size !== "small" ? 8 : 6)) };
}
function at(e) {
return { formatPercentageText: O(() => e.format(e.percent, e.successPercent)) };
}
function ct(e, t, r, i) {
const { isCircleStyle: S } = t, { isGradient: P, linearGradient: b } = r, { strokeWidth: k } = i, M = O(() => {
const c = {
"f-progress": !0,
"f-progress-line": e.progressType === "line",
"ant-progress-small": e.size === "small",
"f-progress-show-info": e.showInfo,
"f-progress-circle": S.value
}, v = `f-progress-status-${e.progressStatus}`;
return c[v] = !0, c;
}), l = O(() => ({
width: `${e.width}px`,
height: `${e.width}px`,
"font-size": `${e.width * 0.15 + 6}px`,
"f-progress-circle-gradient": P.value
})), d = O(() => ({
"f-progress-inner": !0,
"f-progress-circle-gradient": P.value
})), s = 0, a = O(() => s + 1), g = O(() => {
const c = 50 - k.value / 2, v = e.gapPosition || (e.progressType === "circle" ? "top" : "bottom");
let T = 0, B = -c, D = 0, h = c * -2;
switch (v) {
case "left":
T = -c, B = 0, D = c * 2, h = 0;
break;
case "right":
T = c, B = 0, D = c * -2, h = 0;
break;
case "bottom":
B = c, h = c * 2;
break;
}
return `M 50,50 m ${T},${B}
a ${c},${c} 0 1 1 ${D},${-h}
a ${c},${c} 0 1 1 ${-D},${h}`;
}), n = O(() => {
const c = 50 - k.value / 2, v = Math.PI * 2 * c, T = e.gapDegree || (e.progressType === "circle" ? 0 : 75);
return {
strokeDasharray: `${v - T}px ${v}px`,
strokeDashoffset: `-${T / 2}px`,
transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
};
}), o = O(() => {
const c = 50 - k.value / 2, v = Math.PI * 2 * c, T = e.gapDegree || (e.progressType === "circle" ? 0 : 75), B = e.successPercent !== void 0 && e.successPercent !== null ? [e.successPercent, e.percent] : [e.percent];
return B.map((D, h) => {
const E = B.length === 2 && h === 0;
return {
stroke: P.value && !E ? `url(#gradient-${a.value})` : null,
strokePathStyle: {
stroke: P.value ? null : E ? "default" : e.strokeColor,
transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
strokeDasharray: `${(D || 0) / 100 * (v - T)}px ${v}px`,
strokeDashoffset: `-${T / 2}px`
}
};
}).reverse();
}), u = O(() => ({
width: `${e.percent}%`,
"border-radius": e.strokeLinecap === "round" ? "100px" : "0",
background: P.value ? null : e.strokeColor,
"background-image": P.value ? b.value : null,
height: `${k.value}px`
}));
return {
progressClass: M,
inCircleProgressBarStyle: l,
inCircleProgressBarClass: d,
pathString: g,
trailPathStyle: n,
progressCirclePaths: o,
gradientId: a,
inlineProgressBackgroundStyle: u
};
}
function lt(e) {
return { isCircleStyle: O(() => e.progressType === "circle" || e.progressType === "dashboard") };
}
function ut(e) {
const t = O(() => {
const S = {
"f-progress-text-icon": !0,
"f-icon": !0
}, P = `f-icon-${e.progressStatus}`;
return S[P] = !0, S;
}), r = O(() => {
const S = {
"f-progress-text-icon": !0,
"f-icon": !0
}, P = e.progressStatus === "success" ? "f-icon-checkmark" : "f-icon-x";
return S[P] = !0, S;
}), i = O(() => e.progressStatus === "error" || e.progressStatus === "success");
return {
inlineProgrssStatusClass: t,
circleProgrssStatusClass: r,
shouldShowStatus: i
};
}
function ft(e) {
const t = O(() => ({
width: `${e.successPercent}%`,
"border-radius": e.strokeLinecap === "round" ? "100px" : "0",
height: `${e.strokeWidth}px`,
"background-image": e.enableBackgroundImg ? `url(${e.backgroundImg})` : null
})), r = O(() => e.successPercent || e.successPercent === 0);
return { inlineProgressSuccessBackgroundStyle: t, shouldShowSuccessInlineProgressBackground: r };
}
const H = /* @__PURE__ */ x({
name: "FProgress",
props: _,
emits: [],
setup(e) {
const t = F(e.progressType), r = F(e.showInfo), i = F(e.percent), S = F(e.strokeLinecap), P = st(e), {
isGradient: b,
circleGradient: k
} = P, M = it(e), {
strokeWidth: l
} = M, {
formatPercentageText: d
} = at(e), s = lt(e), {
isCircleStyle: a
} = s, {
progressClass: g,
inCircleProgressBarStyle: n,
inCircleProgressBarClass: o,
pathString: u,
trailPathStyle: c,
progressCirclePaths: v,
gradientId: T,
inlineProgressBackgroundStyle: B
} = ct(e, s, P, M), {
inlineProgrssStatusClass: D,
circleProgrssStatusClass: h,
shouldShowStatus: E
} = ut(e), {
inlineProgressSuccessBackgroundStyle: R,
shouldShowSuccessInlineProgressBackground: p
} = ft(e);
J(() => e.percent, (m) => {
i.value = m || 0;
});
function C() {
return r.value && j("span", {
class: "f-progress-text"
}, [E.value ? j("span", {
class: a.value ? h.value : D.value
}, null) : d.value]);
}
function W() {
return j(fe, null, [j("div", {
class: "f-progress-outer"
}, [j("div", {
class: "f-progress-inner"
}, [j("div", {
class: "f-progress-bg",
style: B.value
}, null), p.value && j("div", {
class: "f-progress-success-bg",
style: R.value
}, null)])]), C()]);
}
function f() {
return j("div", {
class: o.value,
style: n.value
}, [j("svg", {
class: "f-progress-circle",
viewBox: "0 0 100 100"
}, [b.value && j("defs", null, [j("linearGradient", {
id: "gradient-" + T.value,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "0%"
}, [k.value.map((m) => j("stop", {
offset: m.offset,
"stop-color": m.color
}, null))])]), j("path", {
class: "f-progress-circle-trail",
stroke: "#efefef",
"fill-opacity": "0",
"stroke-width": l.value,
d: u.value,
style: c.value
}, null), v.value.map((m) => j("path", {
class: "f-progress-circle-path",
"fill-opacity": "0",
d: u.value,
"stroke-linecap": S.value,
stroke: m.stroke,
"stroke-width": i.value ? l.value : 0,
style: m.strokePathStyle
}, null))]), C()]);
}
return () => j("div", {
class: g.value
}, [t.value === "line" && W(), a.value && f()]);
}
});
function pt(e, t, r) {
var W;
const i = "", S = "", P = F();
let b;
function k() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function M() {
return !1;
}
function l() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function d() {
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 m = F(f == null ? void 0 : f.value.parent), y = s(m);
return y || null;
}
function a(f = t) {
var N;
const { componentInstance: m, designerItemElementRef: y } = f;
if (!m || !m.value)
return null;
const { getCustomButtons: $ } = m.value;
return m.value.canMove || $ && ((N = $()) != null && N.length) ? y : a(f.parent);
}
function g(f) {
return !!r;
}
function n() {
return (t == null ? void 0 : t.schema.label) || (t == null ? void 0 : t.schema.title) || (t == null ? void 0 : t.schema.name);
}
function o() {
}
function u(f, m) {
var y;
!f || !m || (y = t == null ? void 0 : t.setupContext) == null || y.emit("dragEnd");
}
function c(f, m) {
const { componentType: y } = f;
let $ = ge(y, f, m);
const N = y.toLowerCase().replace(/-/g, "_");
return $ && !$.id && $.type === y && ($.id = `${N}_${Math.random().toString().slice(2, 6)}`), $;
}
function v(f) {
}
function T(...f) {
}
function B(f) {
if (!f)
return;
const m = t == null ? void 0 : t.schema, { formSchemaUtils: y } = f;
if (m && y.getExpressions().length) {
const $ = y.getExpressions().findIndex((N) => N.target === m.id);
$ > -1 && y.getExpressions().splice($, 1);
}
}
function D(f) {
if (!f || !(t != null && t.schema))
return;
const m = t.schema, { formSchemaUtils: y } = f;
y.removeCommunicationInComponent(m);
}
function h(f) {
B(f), D(f), t != null && t.schema.contents && t.schema.contents.map((m) => {
let y = m.id;
m.type === "component-ref" && (y = m.component);
const $ = e.value.querySelectorAll(`#${y}-design-item`);
$ != null && $.length && Array.from($).map((N) => {
var w;
(w = N == null ? void 0 : N.componentInstance) != null && w.value.onRemoveComponent && N.componentInstance.value.onRemoveComponent(f);
});
});
}
function E() {
}
function R(f) {
var y, $;
if (!((y = t == null ? void 0 : t.schema) != null && y.id))
return;
!b && f && (b = f.formSchemaUtils);
let m = "";
{
const { text: N, title: w, label: A, mainTitle: G, name: L, type: q } = t.schema;
m = N || w || A || G || L || (($ = I[q]) == null ? void 0 : $.name);
}
m && b.getControlBasicInfoMap().set(t.schema.id, {
componentTitle: m,
parentPathName: m
});
}
function p(f) {
var N;
const { changeObject: m } = f, { propertyID: y, propertyValue: $ } = m;
if (["text", "title", "label", "name", "mainTitle"].includes((N = f == null ? void 0 : f.changeObject) == null ? void 0 : N.propertyID) && y && $ && (R(), b)) {
const w = b.getControlBasicInfoMap(), A = w.keys().toArray().filter((G) => {
var L, q;
return ((L = w.get(G)) == null ? void 0 : L.reliedComponentId) === ((q = t == null ? void 0 : t.schema) == null ? void 0 : q.id);
});
A != null && A.length && A.forEach((G) => {
const L = w.get(G).parentPathName.split(" > ");
L[0] = $, w.get(G).parentPathName = L.join(" > ");
});
}
}
function C(f) {
p(f);
}
return P.value = {
canMove: k(),
canSelectParent: M(),
canDelete: l(),
canNested: !d(),
contents: t == null ? void 0 : t.schema.contents,
elementRef: e,
parent: (W = t == null ? void 0 : t.parent) == null ? void 0 : W.componentInstance,
schema: t == null ? void 0 : t.schema,
styles: i,
designerClass: S,
canAccepts: g,
getBelongedComponentInstance: s,
getDraggableDesignItemElement: a,
getDraggingDisplayText: n,
getPropConfig: T,
getDragScopeElement: o,
onAcceptMovedChildElement: u,
onChildElementMovedOut: v,
addNewChildComponentSchema: c,
triggerBelongedComponentToMoveWhenMoved: F(!1),
triggerBelongedComponentToDeleteWhenDeleted: F(!1),
onRemoveComponent: h,
getCustomButtons: E,
onPropertyChanged: C,
setComponentBasicInfoMap: R,
updateContextSchema: t == null ? void 0 : t.updateContextSchema
}, P;
}
const dt = /* @__PURE__ */ x({
name: "FProgressDesign",
props: _,
emits: [],
setup(e, t) {
const r = F(e.progressStatus), i = F(e.progressType), S = F(e.size), P = F(e.showInfo), b = F(e.strokeWidth), k = F(e.percent), M = F(e.strokeLinecap), l = F(!1), d = F(e.strokeColor), s = F(null), a = F(0), g = F(e.width), n = F(""), o = F([]), u = F(""), c = F([]), v = F(e.enableBackgroundImg), T = F(e.backgroundImg), B = F(), D = pe("design-item-context"), h = pt(B, D);
de(() => {
B.value.componentInstance = h;
}), t.expose(h.value), J(() => e.percent, (w) => {
k.value = w || 0;
});
const E = O(() => b.value || (i.value === "line" && S.value !== "small" ? 8 : 6)), R = O(() => i.value === "circle" || i.value === "dashboard"), p = O(() => {
const w = {
"f-progress": !0,
"f-progress-line": i.value === "line",
"ant-progress-small": S.value === "small",
"f-progress-show-info": P.value,
".f-progress-circle": R.value
}, A = `f-progress-status-${r.value}`;
return w[A] = !0, w;
}), C = O(() => ({
width: `${k.value}%`,
"border-radius": M.value === "round" ? "100px" : "0",
backgroud: l.value ? null : d.value,
"background-image": l.value ? s.value : null,
height: `${E.value}px`
})), W = O(() => ({
width: `${k.value}%`,
"border-radius": M.value === "round" ? "100px" : "0",
height: `${E.value}px`,
"background-image": v.value ? T.value : null
})), f = O(() => a.value || a.value === 0);
function m() {
return j("div", {
class: "f-progress-outer"
}, [j("div", {
class: "f-progress-inner"
}, [j("div", {
class: "f-progress-bg",
style: C.value
}, null), f.value && j("div", {
class: "f-progress-success-bg",
style: W.value
}, null)])]);
}
const y = O(() => ({
width: `${g.value}px`,
height: `${g.value}px`,
"font-size": `${g.value * 0.15 + 6}px`,
"f-progress-circle-gradient": l.value
})), $ = O(() => ({}));
function N() {
return j("div", {
class: "f-progress-inner",
style: y.value
}, [j("svg", {
class: "f-progress-circle",
viewBox: "0 0 100 100"
}, [l.value && j("defs", null, [j("linearGradient", {
id: "gradient-" + n.value,
x1: "100%",
y1: "0%",
x2: "0%",
y2: "0%"
}, [o.value.map((w) => j("stop", {
offset: w.offset,
"stop-color": w.color
}, null))])]), j("path", {
class: "f-progress-circle-trail",
stroke: "#efefef",
"fill-opacity": "0",
"stroke-width": E.value,
d: u.value,
style: $.value
}, null), c.value.map((w) => j("path", {
class: "f-progress-circle-path",
"fill-opacity": "0",
d: u.value,
"stroke-linecap": M.value,
stroke: w.stroke,
"stroke-width": k.value ? E.value : 0,
style: w.strokePathStyle
}, null))])]);
}
return () => j("div", {
ref: B,
class: p.value
}, [i.value === "line" && m(), R.value && N()]);
}
});
H.register = (e, t, r) => {
e.progress = H, t.progress = ie;
};
H.registerDesigner = (e, t, r) => {
e.progress = dt, t.progress = ie;
};
const $t = me(H);
export {
H as Progress,
$t as default,
_ as progressProps,
ie as propsResolver
};