@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
909 lines (908 loc) • 31.6 kB
JavaScript
var Q = Object.defineProperty;
var Z = (t, s, i) => s in t ? Q(t, s, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[s] = i;
var A = (t, s, i) => Z(t, typeof s != "symbol" ? s + "" : s, i);
import { responseLayoutEditorSettingProps as _, ResponseLayoutEditorSetting as ee } from "../../components/response-layout-editor/index.esm.js";
import { defineComponent as B, ref as u, watch as R, onBeforeMount as H, createVNode as a, createTextVNode as N, computed as U, onMounted as q, inject as J, provide as te } from "vue";
import { FModalService as ne } from "../../components/modal/index.esm.js";
import { useDesignerComponent as ae, DgControl as X } from "../../components/designer-canvas/index.esm.js";
import { cloneDeep as G } from "lodash-es";
import oe from "../../components/capsule/index.esm.js";
import le from "../../components/switch/index.esm.js";
import re from "../../components/combo-list/index.esm.js";
import ie from "../../components/radio-button/index.esm.js";
import ue from "../../components/rate/index.esm.js";
import { resolveAppearance as se, createPropsResolver as ce } from "../../components/dynamic-resolver/index.esm.js";
const de = {
/** 接受传入的原始数据的defaultState */
initialState: { type: Object },
/** 页面高度 */
height: { type: Number, default: 0 },
/** 页面宽度 */
width: { type: Number, default: 0 },
modelValue: { type: Object },
/** 打开弹窗前进行校验 */
beforeOpen: { type: Object }
}, fe = {
/** 接受传入的原始数据的defaultState */
initialState: { type: Object, default: {} }
}, ve = {
/** 记录默认模式及分组状态 */
defaultStates: { type: Object, default: { mode: "" } },
/** 当前开关模式 */
onSwitchInStandardModeChanged: { type: Function, default: () => {
} },
/** 用户设置的屏幕分辨率变化-例:MD*/
onCurrentScreenResolutionChanged: { type: Function, default: () => {
} },
/** 用户设置的屏幕分辨率缩写变化-例:中等屏幕 */
onScreenNameChanged: { type: Function, default: () => {
} }
}, me = /* @__PURE__ */ B({
name: "FScreenResolutionSelector",
props: ve,
emits: ["screenNameChanged", "currentScreenResolutionChanged", "switchInStandardModeChanged"],
setup(t, s) {
const i = u([{
name: "小屏幕",
code: "SM",
value: "SM",
active: !1
}, {
name: "中等屏幕",
code: "MD",
value: "MD",
active: !0
}, {
name: "大屏幕",
code: "LG",
value: "LG",
active: !1
}, {
name: "极大屏幕",
code: "EL",
value: "EL",
active: !1
}]), r = u(t.defaultStates), n = u("MD"), S = u("中等屏幕"), h = u(!0);
function y(v) {
i.value.forEach((e) => {
e.active = e.code === v, e.active && (n.value = e.code, S.value = e.name, s.emit("screenNameChanged", S.value), s.emit("currentScreenResolutionChanged", n.value));
});
}
function I() {
s.emit("switchInStandardModeChanged", h.value);
}
R(h, () => {
}), H(() => {
r.value.model === "standard" ? h.value = !0 : (h.value = !1, I());
});
function C() {
return a(oe, {
class: "f-layout-editor-screen-resolution-selector-frame",
items: i.value,
modelValue: n.value,
"onUpdate:modelValue": (v) => n.value = v,
onChange: y
}, null);
}
return () => a("div", {
class: "f-layout-editor-screen-resolution-selector"
}, [a("div", {
class: "f-layout-editor-screen-resolution-selector-header"
}, [a("div", {
class: "f-layout-editor-screen-resolution-selector-form"
}, [N("表单布局配置")])]), C(), a("div", {
class: "f-layout-editor-screen-resolution-selector-switch"
}, [a(le, {
class: "f-layout-editor-show-switch",
modelValue: h.value,
"onUpdate:modelValue": (v) => h.value = v,
onModelValueChanged: I
}, null), h.value ? a("div", {
class: "f-layout-editor-show-switch-label"
}, [N("标准模式")]) : a("div", {
class: "f-layout-editor-show-switch-label"
}, [N("自定义模式")])])]);
}
}), pe = {
/** 默认屏幕分辨率对应的英文缩写 */
currentScreenResolution: { type: String, default: "" },
/** 模式开关 */
switchInStandardMode: { type: Boolean, default: !1 },
/** 记录当前展示的区域 */
currentArea: { type: Object, default: [] },
/** 接受组件列表区传入的二维数组 */
twoDimensionalArray: { type: Array, default: [] }
}, he = {
/** 单个组件的预览状态 */
item: { type: Object, default: {} },
/** 默认屏幕分辨率对应的英文缩写 */
currentScreenResolution: { type: String, default: "" },
/** 接受switch状态，若为自定义模式，则需要改变Col-num的num来源；*/
switchInStandardMode: { type: Boolean, default: !1 }
}, ge = /* @__PURE__ */ B({
name: "FColumnWidthView",
props: he,
emits: [],
setup(t, s) {
const i = u(t.item), r = u(t.currentScreenResolution), n = U(() => `col-${i.value[`columnIn${r.value}`]}`);
return R([() => t.item, () => t.currentScreenResolution], ([S, h], [y, I]) => {
S !== y && (i.value = S), h !== I && (r.value = h);
}), () => a("div", {
class: n.value
}, [a("div", {
class: "f-layout-editor-column-width-view",
title: i.value.label
}, [a("div", {
class: "f-layout-editor-column-width-view-label"
}, [i.value.label])])]);
}
}), ye = /* @__PURE__ */ B({
name: "FPreview",
props: pe,
emits: ["update:twoDimensionalArray"],
setup(t, s) {
const i = u(t.currentScreenResolution), r = u(t.switchInStandardMode), n = u(t.currentArea), S = u(t.twoDimensionalArray), h = u([]);
R([() => t.currentArea, () => t.switchInStandardMode, () => t.currentScreenResolution], ([e, o, c], [d, m, w]) => {
e !== d && (n.value = e), o !== m && (r.value = o), c !== w && (i.value = c);
});
function y(e, o) {
const c = [];
let d = [];
return e.forEach((m) => {
o !== m.componentRow && (o += 1, c.push(d), d = []), d.push(m);
}), c.push(d), c;
}
function I() {
const e = [];
let o = 1;
return h.value.forEach((c) => {
const d = y(c, o);
o += d.length, e.push(d);
}), e;
}
function C() {
h.value = G(S.value), h.value = I();
}
R(() => t.twoDimensionalArray, () => {
S.value = t.twoDimensionalArray, C();
}), q(() => {
C();
});
function v() {
if (r.value)
return "";
const e = Array.from({
length: 12
}, () => a("div", {
class: "col-1"
}, [a("div", {
class: "f-layout-editor-preview-customize-single-background"
}, [N(" ")])]));
return a("div", {
class: "f-layout-editor-preview-customize-whole-background"
}, [e]);
}
return () => a("div", {
class: "f-layout-editor-preview f-utils-fill-flex-column"
}, [a("div", {
class: "f-layout-editor-preview-header"
}, [N("预览区")]), v(), a("div", {
class: "f-layout-editor-preview-view f-utils-overflow-xhya"
}, [a("div", {
class: "f-layout-editor-preview-row-group"
}, [h.value.map((e) => {
var o, c;
return ((o = e[0][0]) == null ? void 0 : o.group.toString()) === ((c = n.value[0]) == null ? void 0 : c.id) && e.map((d) => a("div", {
class: "f-layout-editor-row"
}, [d.map((m) => a(ge, {
item: m,
"onUpdate:item": (w) => m = w,
currentScreenResolution: i.value,
switchInStandardMode: r.value
}, null))]));
})])])]);
}
}), Se = {
/** 用户切换屏幕分辨率-缩写-例:MD； */
currentScreenResolution: { type: String, default: "" },
/** 检测用户是否切换模式 */
switchInStandardMode: { type: Boolean, default: !1 },
/** 输入的控件原始数据 */
originalData: { type: Array, default: [] },
/** 在用户切换模式时显示原数据，确保两个模式下的数据不互通 */
originalDataCopy: { type: Array, default: [] },
/** 默认状态：包括defaultGroupNumber(默认显示组)及mode(当前模式：standard或customize) */
defaultStates: { type: Object, default: {} },
/** twoDimensionalArray值变化事件 */
onTwoDimensionalArrayChanged: { type: Function, default: () => {
} },
/** originalData值变化事件 */
onOriginalDataChanged: { type: Function, default: () => {
} }
};
function Ce(t, s) {
const i = u(-1), r = u(!1);
function n(e) {
if (e.target.offsetParent) {
const o = e.target.offsetParent, c = o.offsetWidth - e.target.offsetWidth / 2 - 4, d = o.offsetHeight / 2;
e.dataTransfer && e.dataTransfer.setDragImage(o, c, d);
}
}
function S(e) {
if (e) {
const o = t.value.findIndex((c) => c.label === e.label);
setTimeout(() => {
i.value = o, r.value = !0, e.moving = !0;
});
}
}
function h(e, o) {
e.stopPropagation(), n(e), S(o);
}
function y(e) {
const o = t.value.findIndex((c) => c.label === e.label);
if (i.value !== o) {
const c = t.value[i.value], d = t.value;
d.splice(i.value, 1), d.splice(o, 0, c), i.value = o, s && s();
}
}
function I(e, o) {
e.preventDefault(), y(o);
}
function C(e) {
e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move");
}
function v(e, o) {
o && (o.moving = !1), r.value = !1;
}
return {
dragstart: h,
dragenter: I,
dragover: C,
dragend: v,
isDragging: r
};
}
const we = {
/** 默认屏幕分辨率对应的英文缩写 */
currentScreenResolution: { type: String, default: "" },
/** 传入的单个控件的响应式列宽值 */
field: { type: Object, default: {} },
/** 模式开关 */
switchInStandardMode: { type: Boolean, default: !1 },
/** 列数值变化事件 */
fieldChanged: { type: Function, default: () => {
} }
}, Ie = /* @__PURE__ */ B({
name: "FColumnWidthEditor",
props: we,
emits: ["fieldChanged"],
setup(t, s) {
const i = {
SM: ["1"],
MD: ["1", "2"],
LG: ["1", "2", "3", "4"],
EL: ["1", "2", "3", "4", "5", "6"]
}, r = u(t.currentScreenResolution), n = u(t.field), S = u(t.switchInStandardMode), h = u(), y = u(""), I = u(), C = u("customize"), v = u(), e = J("ResponseLayoutEditorDraggableComposition"), {
dragstart: o,
dragenter: c,
dragover: d,
dragend: m
} = e;
function w() {
h.value = i == null ? void 0 : i[r.value], S.value ? (y.value = `displayWidthIn${r.value}`, C.value = `${n.value[y.value]}`) : (y.value = `columnIn${r.value}`, v.value = n.value[y.value]);
}
function D(g) {
if (S.value === !0) {
const M = Number(g == null ? void 0 : g.text);
I.value = M;
const $ = n.value[`columnIn${r.value}`] / n.value[`displayWidthIn${r.value}`];
n.value[`columnIn${r.value}`] = M * $, n.value[`displayWidthIn${r.value}`] = Number(M), s.emit("fieldChanged", n.value);
}
}
function b(g) {
v.value = g;
const M = n.value[`columnIn${r.value}`] / n.value[`displayWidthIn${r.value}`];
n.value[`columnIn${r.value}`] = v.value, n.value[`displayWidthIn${r.value}`] = v.value / M, s.emit("fieldChanged", n.value);
}
function W() {
return a(ue, {
enableHalf: !0,
size: "extraLarge",
pointSystem: 12,
numOfStar: 6,
lightColor: "#5D89FE",
darkColor: "#e7e9f3",
iconClass: "f-icon-column-rectangle",
modelValue: v.value,
"onUpdate:modelValue": (g) => v.value = g,
enableScore: !1,
onSelectedValue: () => b(v.value)
}, null);
}
function L() {
const g = [];
h.value = i == null ? void 0 : i[r.value];
const M = n.value[`displayWidthIn${r.value}`];
return h.value.forEach(($) => {
const O = {
text: $,
active: M.toString() === $
};
g.push(O);
}), g;
}
function E() {
const g = L();
return a(ie, {
enumData: g,
suffixValue: "列",
onSelectedValueChanged: D
}, {
default: () => [N(" ")]
});
}
function P() {
var g;
if (((g = n == null ? void 0 : n.value) == null ? void 0 : g.showTopBorder) === 1)
return a("div", {
class: "f-layout-editor-column-width-editor-row"
}, [a("span", {
class: "f-layout-editor-column-width-editor-row-left"
}, null), a("span", {
class: "f-layout-editor-column-width-editor-row-middle"
}, [N("第"), n.value.componentRow, N("行")]), a("span", {
class: "f-layout-editor-column-width-editor-row-right"
}, null)]);
}
function f() {
return S.value ? a("div", {
class: "f-column-width-editor-switch-standard"
}, [a("div", {
class: "f-layout-editor-column-width-editor-click-button"
}, [E()])]) : a("div", {
class: "f-column-width-editor-switch-customize",
onDragenter: (g) => c(g, n.value),
onDragend: (g) => m(g, n.value),
onDragover: (g) => d(g)
}, [a("div", {
class: "f-layout-editor-column-width-editor-rectangle"
}, [W(), a("div", {
class: "f-layout-editor-rate-show-column"
}, [v.value, N("列")]), a("span", {
class: "f-layout-editor-drag-handler f-icon f-icon-drag-vertical",
draggable: "true",
onDragstart: (g) => o(g, n.value)
}, null)])]);
}
function T() {
var g, M;
return a("div", {
class: "f-layout-editor-column-width-editor-component"
}, [a("div", {
class: "f-layout-editor-column-width-editor-label",
title: (g = n == null ? void 0 : n.value) == null ? void 0 : g.label
}, [(M = n == null ? void 0 : n.value) == null ? void 0 : M.label]), f()]);
}
return R(() => [t.field, t.switchInStandardMode, t.currentScreenResolution], ([g, M, $], [O, j, l]) => {
$ !== l && (r.value = $, h.value = i[r.value], w()), M !== j && (S.value = M), S.value === !1 && w(), g !== O && (n.value = g);
}), q(() => {
w();
}), () => a("div", {
class: "f-layout-editor-column-width-editor"
}, [P(), T()]);
}
}), De = /* @__PURE__ */ B({
name: "FFieldList",
props: Se,
emits: ["update:currentArea", "twoDimensionalArrayChanged", "originalDataChanged"],
setup(t, s) {
const i = u(t.currentScreenResolution), r = u(t.switchInStandardMode), n = u(t.originalData), S = u(t.originalDataCopy), h = u(t.defaultStates), y = u(""), I = u([]), C = u(t.currentArea), v = u(0), e = u(), o = u(0), c = u("1"), d = u([]);
function m() {
const l = [];
return n.value.forEach((p) => {
l.indexOf(p.group) === -1 && l.push(p.group);
}), l;
}
function w() {
c.value = h.value.defaultGroupNumber.toString(), y.value = `区域${c.value}`, C.value = [I.value[Number(c.value) - 1]], s.emit("update:currentArea", C.value);
}
function D() {
var p;
const l = m();
for (let F = 0; F < l.length; F++) {
const x = {
id: (p = l[F]) == null ? void 0 : p.toString(),
label: "区域" + l[F]
};
I.value.push(x);
}
w();
}
function b() {
let l = [];
e.value = [];
let p = 1;
n.value.forEach((F) => {
F.group === p || (p += 1, e.value.push(l), l = []), l.push(F);
}), e.value.push(l);
}
function W(l, p) {
let x = 12;
return v.value = 1 + p, l.forEach((V) => {
V.showTopBorder = 0;
const k = V[`columnIn${i.value}`];
x >= k ? (V.componentRow = v.value, x -= k) : (v.value += 1, V.componentRow = v.value, x = 12 - k, V.showTopBorder = 1);
}), l[0].showTopBorder = 1, l;
}
function L(l) {
let p = [];
for (const F of l)
p = p.concat(F);
n.value = G(p), o.value = 0;
}
function E() {
e.value[C.value[0].id - 1] = G(d.value);
const l = [];
o.value = 0, e.value.forEach((p) => {
const F = W(p, o.value);
l.push(F), o.value = F[F.length - 1].componentRow;
}), L(l);
}
function P() {
b();
const l = [];
return o.value = 0, e.value.forEach((p) => {
const F = W(p, o.value);
l.push(F), o.value = F[F.length - 1].componentRow;
}), s.emit("twoDimensionalArrayChanged", e.value), L(l), n.value;
}
function f() {
d.value = [], n.value.forEach((l) => {
l.group === Number(C.value[0].id) && d.value.push(l);
});
}
function T() {
n.value = G(P()), s.emit("originalDataChanged", n.value);
}
function g(l) {
d.value.forEach((p) => {
p.id === l.id && Object.assign(p, l);
}), E(), T(), f();
}
function M(l) {
for (let p = 0; p < l.length; p++)
C.value = [{
id: l[p].id,
label: l[p].label
}];
s.emit("update:currentArea", C.value), f(), E();
}
function $() {
return a("div", {
class: "f-layout-editor-field-list-top"
}, [a("div", {
class: "f-layout-editor-field-list-header"
}, [N("组件列表")]), a("div", {
class: "f-layout-editor-choose-group"
}, [a(re, {
modelValue: c.value,
"onUpdate:modelValue": (l) => c.value = l,
placeholder: "当前可编辑组",
enableClear: !1,
"id-field": "id",
"text-field": "label",
data: I.value,
editable: !1,
onChange: M
}, null)])]);
}
function O() {
return a("div", {
class: "f-layout-editor-field-list-content f-utils-overflow-xhya"
}, [d.value.map((l) => a(Ie, {
key: l.label,
currentScreenResolution: i.value,
field: l,
"onUpdate:field": (p) => l = p,
switchInStandardMode: r.value,
"onUpdate:switchInStandardMode": (p) => r.value = p,
onFieldChanged: g
}, null))]);
}
const j = Ce(d, () => {
E(), T(), f();
});
return te("ResponseLayoutEditorDraggableComposition", j), R(() => t.currentArea, (l, p) => {
l !== p && (C.value = t.currentArea, f());
}), R(C, (l, p) => {
l !== p && f();
}), R(() => t.currentGroup, (l, p) => {
l !== p && (y.value = t.currentGroup);
}), R(() => t.currentScreenResolution, (l, p) => {
l !== p && (i.value = t.currentScreenResolution, T(), b(), C.value[0] && (d.value = G(e.value[Number(C.value[0].id) - 1])));
}), R(() => t.switchInStandardMode, (l, p) => {
l !== p && (r.value = t.switchInStandardMode, n.value = G(S.value));
}), R(h, (l, p) => {
l !== p && T();
}), H(() => {
D(), P(), f();
}), () => a("div", {
class: "f-layout-editor-field-list f-utils-fill-flex-column"
}, [r.value ? (
/* 标准模式 */
a("div", {
class: "f-layout-editor-field-list-standard f-utils-fill-flex-column"
}, [$(), O()])
) : (
/* 自定义模式 */
a("div", {
class: "f-layout-editor-field-list-customize f-utils-fill-flex-column"
}, [$(), O()])
)]);
}
}), be = /* @__PURE__ */ B({
name: "FResponseLayoutEditor",
props: fe,
emits: ["close", "submit"],
setup(t, s) {
const i = u(t.initialState), r = u(), n = u(), S = u(""), h = u(""), y = u(!0), I = u([{
id: "1",
label: "区域1"
}]), C = u([]), v = u();
u(t.width), u(t.height), R(() => t.initialState, (f) => {
i.value = f;
}), R([() => t.currentArea, () => t.switchInStandardMode], ([f, T], [g, M]) => {
f !== g && (I.value = f), T !== M && (y.value = T);
});
function e(f) {
S.value = f;
}
function o(f) {
h.value = f;
}
function c(f) {
y.value = f;
}
function d(f) {
I.value = [].concat(f);
}
function m(f) {
r.value = G(f);
}
function w(f) {
C.value = f;
}
function D() {
s.emit("close");
}
function b() {
s.emit("submit", r.value);
}
function W() {
return a(De, {
class: "f-utils-fill-flex-column",
defaultStates: n.value,
originalDataCopy: v.value,
currentScreenResolution: h.value,
"onUpdate:currentScreenResolution": (f) => h.value = f,
originalData: r.value,
"onUpdate:originalData": (f) => r.value = f,
switchInStandardMode: y.value,
"onUpdate:switchInStandardMode": (f) => y.value = f,
currentArea: I.value,
"onUpdate:currentArea": (f) => I.value = f,
onCurrentAreaChanged: d,
onTwoDimensionalArrayChanged: w,
onOriginalDataChanged: m
}, null);
}
function L() {
return a(ye, {
class: "f-utils-fill-flex-column",
currentArea: I.value,
"onUpdate:currentArea": (f) => I.value = f,
currentScreenResolution: h.value,
"onUpdate:currentScreenResolution": (f) => h.value = f,
switchInStandardMode: y.value,
twoDimensionalArray: C.value,
"onUpdate:twoDimensionalArray": (f) => C.value = f
}, null);
}
const E = U(() => y.value ? "f-layout-editor-left-standard f-utils-fill-flex-column" : "f-layout-editor-left-customize f-utils-fill-flex-column"), P = U(() => y.value ? "f-layout-editor-right-standard f-utils-fill-flex-column" : "f-layout-editor-right-customize f-utils-fill-flex-column");
return H(() => {
r.value = G(i.value.importData), v.value = G(i.value.importData), n.value = i.value.defaultState, S.value = "中等屏幕", h.value = "MD";
}), (f) => a("div", {
class: "f-layout-editor f-utils-flex-column"
}, [a("div", {
class: "f-layout-editor-top"
}, [a(me, {
defaultStates: n.value,
onScreenNameChanged: e,
onCurrentScreenResolutionChanged: o,
onSwitchInStandardModeChanged: c
}, null)]), a("div", {
class: "f-layout-editor-content f-utils-fill"
}, [a("div", {
class: "f-layout-editor-left f-utils-fill-flex-column"
}, [a("div", {
class: E.value
}, [W()])]), a("div", {
class: "f-layout-editor-right f-utils-fill-flex-column"
}, [a("div", {
class: P.value
}, [L()])])]), a("div", {
class: "f-layout-editor-bottom"
}, [a("div", {
class: "f-layout-editor-button"
}, [a("div", {
class: "f-layout-editor-cancel-btn",
onClick: D
}, [a("span", {
class: "f-layout-editor-text-cancel"
}, [N("取消")])]), a("div", {
class: "f-layout-editor-sure-btn",
onClick: b
}, [a("span", {
class: "f-layout-editor-text-sure"
}, [N("确认")])])])])]);
}
}), z = /* @__PURE__ */ B({
name: "FResponseLayoutEditorSettingDesign",
props: de,
emits: [],
setup(t, s) {
const i = u(t.initialState), r = u(t.width), n = u(t.height), S = u(), h = J("design-item-context"), y = ae(S, h);
q(() => {
S.value.componentInstance = y;
}), s.expose(y.value);
function I() {
const C = ne.show({
// title: '响应式列宽编辑器',
render: () => a(be, {
initialState: i,
width: r,
height: n
}, null),
width: 900,
height: 500,
buttons: [{
class: "btn btn-primary",
text: "确定",
iconClass: "f-icon f-icon-check",
handle: () => {
C.destroy();
}
}, {
class: "btn btn-light",
text: "取消",
iconClass: "f-icon f-icon-close",
handle: () => {
C.destroy();
}
}]
});
}
return () => a("div", {
ref: S,
class: "f-column-width-setting-button",
onClick: I
}, [a("div", {
class: "f-icon f-icon-add"
}, null), a("div", {
class: "f-column-width-setting-button-name"
}, [a("span", {
class: "f-column-width-setting-button-center"
}, [N("高级设置")])])]);
}
}), Me = /* @__PURE__ */ new Map([
["appearance", se]
]);
function Fe(t, s, i, r) {
const n = t.getSchemaByType("section");
return n.id = `${r}-section`, n.appearance = { class: "f-section-form f-section-in-main" }, n.mainTitle = "标题", n.contents = [s], n;
}
function Ae(t, s, i, r) {
const n = t.getSchemaByType("component");
return n.id = `${r}-component`, n.componentType = "form-col-1", n.appearance = {
class: "f-struct-form f-struct-wrapper"
}, n.contents = [s], n;
}
function Ee(t, s, i) {
s.appearance = { class: "f-form-layout farris-form farris-form-controls-inline" };
const r = Fe(t, s, i, s.id);
return Ae(t, r, i, s.id);
}
const Re = "https://json-schema.org/draft/2020-12/schema", Ne = "https://farris-design.gitee.io/response-layout-editor-setting.schema.json", Le = "response-layout-editor-setting", Te = "A Farris Data Collection Component", We = "object", $e = {
id: {
description: "The unique identifier for response layout editor",
type: "string"
},
type: {
description: "The type string of response layout editor component",
type: "string",
default: "response-layout-editor-setting"
},
initialState: {
description: "",
type: "object",
default: {}
},
height: {
description: "",
type: "number",
default: 0
},
width: {
description: "",
type: "number",
default: 0
},
beforeOpen: {
description: "",
type: "function"
}
}, Ge = [
"id",
"type"
], Pe = {
$schema: Re,
$id: Ne,
title: Le,
description: Te,
type: We,
properties: $e,
required: Ge
}, Be = "response-form", Oe = "A Farris Component", xe = "object", Ve = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, je = {
title: Be,
description: Oe,
type: xe,
categories: Ve
};
class Y {
constructor() {
/** 控件标题 */
A(this, "label", "");
/** 控件id */
A(this, "id", "");
/** 每个控件占用的栅格数 */
A(this, "columnInSM", 12);
A(this, "columnInMD", 6);
A(this, "columnInLG", 3);
A(this, "columnInEL", 2);
/** 每个控件占用的列数 */
A(this, "displayWidthInSM", 1);
A(this, "displayWidthInMD", 1);
A(this, "displayWidthInLG", 1);
A(this, "displayWidthInEL", 1);
/** 编辑器内部默认显示的屏幕大小-----可以去掉 */
A(this, "displayColumnCountAtBreakPoint", "md");
/** 控件所在行，传0即可-----编辑器内部使用 */
A(this, "tagRow", 0);
/** 控件是否显示上方空白：传0即可-----编辑器内部使用 */
A(this, "showTopBorder", 0);
/** 区域，从1开始。卡片内的控件从上往下，从左往右划分区域，遇到分组fieldSet时group+1，分组结束后group+1 */
A(this, "group", 1);
/** 控件是否符合标准的class配置(设计器用的) */
A(this, "isSupportedClass", !0);
/** 控件所在分组id(设计器用的) */
A(this, "fieldSetId", "");
}
}
function et(t) {
let s, i;
const r = /* @__PURE__ */ new Map();
let n = [];
function S(v, e) {
const c = ((v == null ? void 0 : v.split(" ")) || []).filter((b) => b.startsWith("col-"));
if (c.length === 0) {
e.isSupportedClass = !1;
return;
}
let d = c.find((b) => /^col-([1-9]|10|11|12)$/.test(b)), m = c.find((b) => /^col-md-([1-9]|10|11|12)$/.test(b)), w = c.find((b) => /^col-xl-([1-9]|10|11|12)$/.test(b)), D = c.find((b) => /^col-el-([1-9]|10|11|12)$/.test(b));
d = d || "col-12", e.columnInSM = parseInt(d.replace("col-", ""), 10), e.displayWidthInSM = e.columnInSM / 12, e.displayWidthInSM !== 1 && (e.isSupportedClass = !1), m = m || "col-md-" + e.columnInSM, e.columnInMD = parseInt(m.replace("col-md-", ""), 10), e.displayWidthInMD = e.columnInMD / 6, [1, 2].includes(e.displayWidthInMD) || (e.isSupportedClass = !1), w = w || "col-xl-" + e.columnInMD, e.columnInLG = parseInt(w.replace("col-xl-", ""), 10), e.displayWidthInLG = e.columnInLG / 3, [1, 2, 3, 4].includes(e.displayWidthInLG) || (e.isSupportedClass = !1), D = D || "col-el-" + e.columnInLG, e.columnInEL = parseInt(D.replace("col-el-", ""), 10), e.displayWidthInEL = e.columnInEL / 2, [1, 2, 3, 4, 5, 6].includes(e.displayWidthInEL) || (e.isSupportedClass = !1);
}
function h(v, e, o, c = !1) {
let d = !1;
if (!v.contents || v.contents.length === 0) {
const m = new Y();
S(v.layout, m), e.push(m);
return;
}
v.contents.forEach((m) => {
if (m.type === "fieldset") {
o += 1, h(m, e, o, !0), d = !0;
return;
}
if (m.type === "dynamic-form")
return;
d && (o += 1, d = !1);
const w = m.appearance && m.appearance.class, D = new Y();
w ? S(w, D) : D.isSupportedClass = !1, D.label = m.label || m.id, D.id = m.id, D.group = o, c && (D.fieldSetId = v.id), i === m.id && (s = o), r.set(m.id, m), e.push(D);
});
}
function y(v) {
const e = t.getComponentById(v);
if (!e || !e.componentType || !e.componentType.startsWith("form"))
return { result: !1, message: "只可以在响应式表单组件中调整响应式布局配置" };
const o = t.selectNode(e, (c) => c.type === X["response-form"].type);
return !o || !o.contents || o.contents.length === 0 ? { result: !1, message: "Form区域内没有控件，请先添加控件" } : { result: !0, message: "", formNode: o };
}
function I(v, e) {
e = e || v.id;
const { result: o, message: c, formNode: d } = y(e);
if (!o)
return { result: o, message: c };
i = v.id, n = [], r.clear();
const m = d.contents[0].type === X.fieldset.type ? 0 : 1;
h(d, n, m);
const w = n.find((b) => !b.isSupportedClass);
return {
defaultState: {
defaultGroupNumber: s || 1,
model: w ? "customize" : "standard"
},
importData: n
};
}
function C(v, e) {
e = e;
const { result: o, formNode: c } = y(e);
if (!o)
return "";
const d = [];
return v.forEach((m) => {
var b;
const w = r.get(m.id), D = w.appearance && w.appearance.class;
if (D) {
const L = D.split(" ").filter((M) => !M.startsWith("col-")), E = "col-" + m.columnInSM, P = "col-md-" + m.columnInMD, f = "col-xl-" + m.columnInLG, T = "col-el-" + m.columnInEL, g = [E, P, f, T].concat(L);
w.appearance.class = g.join(" ");
}
if (m.fieldSetId) {
const W = c.contents.find((E) => E.id === m.fieldSetId), L = d.find((E) => E.id === m.fieldSetId);
L ? (b = L.contents) == null || b.push(w) : (d.push(W), W.contents = [w]);
} else
d.push(w);
}), c.contents = d, c.id;
}
return {
checkCanFindFormNode: y,
checkCanOpenLayoutEditor: I,
changeFormControlsByResponseLayoutConfig: C,
getResonseFormLayoutConfig: h
};
}
const K = ce(_, Pe, Me, Ee, je);
z.register = (t, s, i, r) => {
t["response-layout-editor-setting"] = ee, s["response-layout-editor-setting"] = K;
};
z.registerDesigner = (t, s, i) => {
t["response-layout-editor-setting"] = z, s["response-layout-editor-setting"] = K;
};
export {
z as default,
K as propsResolver,
et as useResponseLayoutEditorSetting
};