@king-one/form-design 0.0.12 → 0.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/es/src/components/base/json-preview.vue.mjs +262 -0
- package/dist/es/src/components/form-panel.vue.mjs +67 -64
- package/dist/es/src/core/index.mjs +1 -1
- package/dist/lib/src/components/base/json-preview.vue.js +6 -0
- package/dist/lib/src/components/form-panel.vue.js +2 -2
- package/dist/lib/src/core/index.js +1 -1
- package/dist/theme-chalk/form-config.css +1 -1
- package/dist/theme-chalk/hljs-json-custom.css +1 -0
- package/dist/theme-chalk/icon.css +1 -1
- package/dist/theme-chalk/index.css +1 -1
- package/dist/theme-chalk/json-preview.css +1 -0
- package/dist/types/src/components/form-panel.vue.d.ts +1 -3
- package/package.json +2 -1
- /package/dist/es/src/core/{design.mjs → Design.mjs} +0 -0
- /package/dist/lib/src/core/{design.js → Design.js} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
import { ref as B, computed as z, onMounted as J, watch as T, openBlock as V, createElementBlock as W, normalizeClass as G, unref as I, createElementVNode as j, createCommentVNode as K } from "vue";
|
|
2
|
+
import S from "highlight.js/lib/core";
|
|
3
|
+
import P from "highlight.js/lib/languages/json";
|
|
4
|
+
import "../../internal.mjs";
|
|
5
|
+
import { useNamespace as Q } from "../../hooks/use-namespace/index.mjs";
|
|
6
|
+
const U = { class: "code-container" }, nt = {
|
|
7
|
+
__name: "json-preview",
|
|
8
|
+
props: {
|
|
9
|
+
data: {
|
|
10
|
+
type: [Object, Array, String, Number, Boolean, null],
|
|
11
|
+
required: !0
|
|
12
|
+
},
|
|
13
|
+
indent: {
|
|
14
|
+
type: Number,
|
|
15
|
+
default: 2
|
|
16
|
+
},
|
|
17
|
+
defaultFoldCollapsed: {
|
|
18
|
+
type: Boolean,
|
|
19
|
+
default: !1
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
setup(E) {
|
|
23
|
+
const p = E, { b: $ } = Q("json-preview");
|
|
24
|
+
let A = null, N = !1, h = null;
|
|
25
|
+
async function R() {
|
|
26
|
+
N || (S.registerLanguage("json", P), A = S, N = !0);
|
|
27
|
+
}
|
|
28
|
+
const b = B(null);
|
|
29
|
+
let y = [];
|
|
30
|
+
const w = z(() => {
|
|
31
|
+
try {
|
|
32
|
+
const n = p.data;
|
|
33
|
+
if (typeof n == "string")
|
|
34
|
+
try {
|
|
35
|
+
const c = JSON.parse(n);
|
|
36
|
+
return JSON.stringify(c, null, p.indent);
|
|
37
|
+
} catch {
|
|
38
|
+
return n;
|
|
39
|
+
}
|
|
40
|
+
return JSON.stringify(n, null, p.indent);
|
|
41
|
+
} catch {
|
|
42
|
+
return String(p.data);
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
async function v() {
|
|
46
|
+
const n = b.value;
|
|
47
|
+
if (!n)
|
|
48
|
+
return;
|
|
49
|
+
await R();
|
|
50
|
+
const c = String(w.value).split(/\r\n|\r|\n/);
|
|
51
|
+
y = c;
|
|
52
|
+
const s = L(c, p.indent);
|
|
53
|
+
n.innerHTML = D(c, s), h = null, _(n, s), H(n), F(n), p.defaultFoldCollapsed ? q() : x();
|
|
54
|
+
}
|
|
55
|
+
J(() => {
|
|
56
|
+
v();
|
|
57
|
+
}), T(w, () => {
|
|
58
|
+
v();
|
|
59
|
+
});
|
|
60
|
+
function q() {
|
|
61
|
+
const n = b.value;
|
|
62
|
+
if (!n)
|
|
63
|
+
return;
|
|
64
|
+
const c = n.querySelectorAll(".fold-toggle"), s = (l) => n.querySelector(`tr[data-line="${l}"]`), u = (l, a) => {
|
|
65
|
+
for (let t = l + 1; t <= a - 1; t++) {
|
|
66
|
+
const e = s(t);
|
|
67
|
+
e && (e.style.display = "none");
|
|
68
|
+
}
|
|
69
|
+
}, d = (l, a) => {
|
|
70
|
+
if (!Array.isArray(y))
|
|
71
|
+
return !1;
|
|
72
|
+
for (let t = l + 1; t <= a - 1; t++) {
|
|
73
|
+
const e = (y[t - 1] || "").trim();
|
|
74
|
+
if (e && e !== "}" && e !== "]")
|
|
75
|
+
return !0;
|
|
76
|
+
}
|
|
77
|
+
return !1;
|
|
78
|
+
}, f = (l) => {
|
|
79
|
+
const a = s(l);
|
|
80
|
+
return a ? a.querySelector("td.hljs-ln-code") : null;
|
|
81
|
+
}, i = (l, a) => {
|
|
82
|
+
const t = f(l);
|
|
83
|
+
if (!t)
|
|
84
|
+
return;
|
|
85
|
+
let e = t.querySelector(".fold-ellipsis");
|
|
86
|
+
a ? (e || (e = document.createElement("span"), e.className = "fold-ellipsis", e.textContent = "…", t.appendChild(e)), e.style.display = "inline") : e && (e.style.display = "none");
|
|
87
|
+
};
|
|
88
|
+
c.forEach((l) => {
|
|
89
|
+
const a = Number(l.getAttribute("data-start")), t = Number(l.getAttribute("data-end"));
|
|
90
|
+
l.setAttribute("data-collapsed", "true"), l.textContent = "▸", u(a, t), d(a, t) && i(a, !0);
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
function x() {
|
|
94
|
+
const n = b.value;
|
|
95
|
+
if (!n)
|
|
96
|
+
return;
|
|
97
|
+
const c = n.querySelectorAll(".fold-toggle"), s = (i) => n.querySelector(`tr[data-line="${i}"]`), u = (i, l) => {
|
|
98
|
+
for (let a = i + 1; a <= l - 1; a++) {
|
|
99
|
+
const t = s(a);
|
|
100
|
+
t && (t.style.display = "");
|
|
101
|
+
}
|
|
102
|
+
}, d = (i) => {
|
|
103
|
+
const l = s(i);
|
|
104
|
+
return l ? l.querySelector("td.hljs-ln-code") : null;
|
|
105
|
+
}, f = (i, l) => {
|
|
106
|
+
const a = d(i);
|
|
107
|
+
if (!a)
|
|
108
|
+
return;
|
|
109
|
+
let t = a.querySelector(".fold-ellipsis");
|
|
110
|
+
l ? (t || (t = document.createElement("span"), t.className = "fold-ellipsis", t.textContent = "…", a.appendChild(t)), t.style.display = "inline") : t && (t.style.display = "none");
|
|
111
|
+
};
|
|
112
|
+
c.forEach((i) => {
|
|
113
|
+
const l = Number(i.getAttribute("data-start")), a = Number(i.getAttribute("data-end"));
|
|
114
|
+
i.setAttribute("data-collapsed", "false"), i.textContent = "▾", u(l, a), f(l, !1), f(a, !1);
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
function L(n) {
|
|
118
|
+
const c = [], s = [];
|
|
119
|
+
for (let d = 0; d < n.length; d++) {
|
|
120
|
+
const i = n[d].trim(), l = i.charAt(i.length - 1), a = i.charAt(0);
|
|
121
|
+
if (l === "{" || l === "[") {
|
|
122
|
+
if (i.endsWith("{}") || i.endsWith("[]"))
|
|
123
|
+
continue;
|
|
124
|
+
s.push({ type: l, start: d + 1 });
|
|
125
|
+
}
|
|
126
|
+
if (a === "}" || a === "]") {
|
|
127
|
+
const t = a;
|
|
128
|
+
for (let e = s.length - 1; e >= 0; e--)
|
|
129
|
+
if (s[e].type === "{" && t === "}" || s[e].type === "[" && t === "]") {
|
|
130
|
+
const r = s[e].start, o = d + 1;
|
|
131
|
+
s.splice(e, 1), o > r + 1 && c.push({ start: r, end: o, type: t });
|
|
132
|
+
break;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
const u = {};
|
|
137
|
+
for (const d of c) u[d.start] = d;
|
|
138
|
+
return u;
|
|
139
|
+
}
|
|
140
|
+
function D(n, c) {
|
|
141
|
+
let s = '<table class="hljs-ln">';
|
|
142
|
+
for (let u = 0; u < n.length; u++) {
|
|
143
|
+
const d = u + 1, f = n[u], i = f.length > 0 ? f : " ", l = i.match(/^[\t ]*/), t = (l ? l[0] : "").replace(/\t/g, " ".repeat(p.indent)), e = Math.floor(t.length / p.indent), r = A ? A.highlight(i, { language: "json" }).value : k(i), o = c[d], g = o ? `<span class="fold-toggle" data-start="${d}" data-end="${o.end}" data-collapsed="${p.defaultFoldCollapsed ? "true" : "false"}">${p.defaultFoldCollapsed ? "▸" : "▾"}</span>` : "";
|
|
144
|
+
let m = "";
|
|
145
|
+
for (let C = 0; C < e; C++)
|
|
146
|
+
m += `<i class="indent-guide" style="--guide-left: calc(var(--indent-char, 1ch) * var(--indent-size) * ${C})"></i>`;
|
|
147
|
+
const M = `<span class="indent-guides" style="--indent-size:${p.indent}">${m}</span>`, O = `<span class="fold-gutter">${g || " "}</span>`;
|
|
148
|
+
s += `
|
|
149
|
+
<tr class="hljs-ln-line" data-line="${d}"><td class="hljs-ln-numbers" data-line-number="${d}"><div class="hljs-ln-n" data-line-number="${d}"></div></td><td class="hljs-ln-code" data-line-number="${d}">${O}<span class="line-content">${M}${r}</span></td></tr>`;
|
|
150
|
+
}
|
|
151
|
+
return s += `
|
|
152
|
+
</table>`, s;
|
|
153
|
+
}
|
|
154
|
+
function _(n) {
|
|
155
|
+
const c = n.querySelectorAll(".fold-toggle"), s = (t) => n.querySelector(`tr[data-line="${t}"]`), u = (t) => {
|
|
156
|
+
const e = s(t);
|
|
157
|
+
return e ? e.querySelector("td.hljs-ln-code") : null;
|
|
158
|
+
}, d = (t, e) => {
|
|
159
|
+
for (let r = t + 1; r <= e - 1; r++) {
|
|
160
|
+
const o = s(r);
|
|
161
|
+
o && (o.style.display = "none");
|
|
162
|
+
}
|
|
163
|
+
}, f = (t, e) => {
|
|
164
|
+
for (let r = t + 1; r <= e - 1; r++) {
|
|
165
|
+
const o = s(r);
|
|
166
|
+
o && (o.style.display = "");
|
|
167
|
+
}
|
|
168
|
+
}, i = (t, e) => {
|
|
169
|
+
if (!Array.isArray(y))
|
|
170
|
+
return !1;
|
|
171
|
+
for (let r = t + 1; r <= e - 1; r++) {
|
|
172
|
+
const o = (y[r - 1] || "").trim();
|
|
173
|
+
if (o && o !== "}" && o !== "]")
|
|
174
|
+
return !0;
|
|
175
|
+
}
|
|
176
|
+
return !1;
|
|
177
|
+
}, l = (t, e) => {
|
|
178
|
+
const r = u(t);
|
|
179
|
+
if (!r)
|
|
180
|
+
return;
|
|
181
|
+
let o = r.querySelector(".fold-ellipsis");
|
|
182
|
+
e ? (o || (o = document.createElement("span"), o.className = "fold-ellipsis", o.textContent = "…", r.appendChild(o)), o.style.display = "inline") : o && (o.style.display = "none");
|
|
183
|
+
}, a = (t, e) => {
|
|
184
|
+
for (let r = t + 1; r <= e - 1; r++) {
|
|
185
|
+
const o = n.querySelector(`.fold-toggle[data-start="${r}"]`);
|
|
186
|
+
if (o && o.getAttribute("data-collapsed") === "true") {
|
|
187
|
+
const g = Number(o.getAttribute("data-start")), m = Number(o.getAttribute("data-end"));
|
|
188
|
+
d(g, m), i(g, m) && l(g, !0);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
c.forEach((t) => {
|
|
193
|
+
t.addEventListener("click", () => {
|
|
194
|
+
const e = Number(t.getAttribute("data-start")), r = Number(t.getAttribute("data-end")), g = !(t.getAttribute("data-collapsed") === "true");
|
|
195
|
+
t.setAttribute("data-collapsed", g ? "true" : "false"), t.textContent = g ? "▸" : "▾", g ? (d(e, r), i(e, r) && l(e, !0)) : (f(e, r), l(e, !1), l(r, !1), a(e, r));
|
|
196
|
+
});
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
function k(n) {
|
|
200
|
+
const c = { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" };
|
|
201
|
+
return String(n).replace(/[&<>"']/g, (s) => c[s]);
|
|
202
|
+
}
|
|
203
|
+
function H(n) {
|
|
204
|
+
n.getAttribute("data-copy-init") !== "true" && (n.setAttribute("data-copy-init", "true"), n.addEventListener("copy", (c) => {
|
|
205
|
+
const s = window.getSelection();
|
|
206
|
+
if (!s || s.rangeCount === 0)
|
|
207
|
+
return;
|
|
208
|
+
const u = s.getRangeAt(0), d = (m) => m && (m.nodeType === 3 ? m.parentElement : m), f = d(u.startContainer), i = d(u.endContainer), l = f ? f.closest("tr.hljs-ln-line") : null, a = i ? i.closest("tr.hljs-ln-line") : null;
|
|
209
|
+
if (!l || !a || s.isCollapsed) {
|
|
210
|
+
c.clipboardData.setData("text/plain", y.join(`
|
|
211
|
+
`)), c.preventDefault();
|
|
212
|
+
return;
|
|
213
|
+
}
|
|
214
|
+
const t = Number(l.getAttribute("data-line")), e = Number(a.getAttribute("data-line"));
|
|
215
|
+
if (Number.isNaN(t) || Number.isNaN(e)) {
|
|
216
|
+
c.clipboardData.setData("text/plain", y.join(`
|
|
217
|
+
`)), c.preventDefault();
|
|
218
|
+
return;
|
|
219
|
+
}
|
|
220
|
+
const r = Math.min(t, e), o = Math.max(t, e), g = y.slice(r - 1, o).join(`
|
|
221
|
+
`);
|
|
222
|
+
c.clipboardData.setData("text/plain", g), c.preventDefault();
|
|
223
|
+
}));
|
|
224
|
+
}
|
|
225
|
+
function F(n) {
|
|
226
|
+
n.getAttribute("data-select-init") !== "true" && (n.setAttribute("data-select-init", "true"), n.addEventListener("click", (c) => {
|
|
227
|
+
const s = c.target;
|
|
228
|
+
if (!(s instanceof Element) || s.closest(".fold-toggle"))
|
|
229
|
+
return;
|
|
230
|
+
const u = s.closest("tr.hljs-ln-line");
|
|
231
|
+
u && (h && h !== u && h.classList.remove("selected"), u.classList.add("selected"), h = u);
|
|
232
|
+
}));
|
|
233
|
+
}
|
|
234
|
+
return (n, c) => (V(), W(
|
|
235
|
+
"div",
|
|
236
|
+
{
|
|
237
|
+
class: G(I($)())
|
|
238
|
+
},
|
|
239
|
+
[
|
|
240
|
+
j("div", U, [
|
|
241
|
+
j(
|
|
242
|
+
"pre",
|
|
243
|
+
{
|
|
244
|
+
ref_key: "preRef",
|
|
245
|
+
ref: b,
|
|
246
|
+
class: "hljs"
|
|
247
|
+
},
|
|
248
|
+
null,
|
|
249
|
+
512
|
|
250
|
+
/* NEED_PATCH */
|
|
251
|
+
),
|
|
252
|
+
K(" 去掉 fade-mask 与动态高度样式 ")
|
|
253
|
+
])
|
|
254
|
+
],
|
|
255
|
+
2
|
|
256
|
+
/* CLASS */
|
|
257
|
+
));
|
|
258
|
+
}
|
|
259
|
+
};
|
|
260
|
+
export {
|
|
261
|
+
nt as default
|
|
262
|
+
};
|
|
@@ -1,55 +1,56 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as z, ref as g, nextTick as E, toRaw as R, openBlock as v, createElementBlock as h, normalizeClass as i, unref as e, createElementVNode as o, createVNode as n, withCtx as l, createCommentVNode as d, renderSlot as k, withDirectives as C, vShow as b } from "vue";
|
|
2
2
|
import "../internal.mjs";
|
|
3
|
-
import { Tooltip as
|
|
4
|
-
import
|
|
5
|
-
import { useInjectDragContext as
|
|
3
|
+
import { Tooltip as x, Form as T } from "ant-design-vue";
|
|
4
|
+
import j from "vuedraggable";
|
|
5
|
+
import { useInjectDragContext as B, useInjectDesignContext as J } from "../context/design.mjs";
|
|
6
6
|
import "./panel/panel-item.vue2.mjs";
|
|
7
|
+
import O from "./base/json-preview.vue.mjs";
|
|
7
8
|
import "./index.mjs";
|
|
8
|
-
import { useNamespace as
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
const
|
|
9
|
+
import { useNamespace as P } from "../hooks/use-namespace/index.mjs";
|
|
10
|
+
import S from "./form-icon.vue2.mjs";
|
|
11
|
+
import q from "./panel/panel-item.vue.mjs";
|
|
12
|
+
const A = { class: "left" }, G = { class: "right" }, H = { class: "content-panel" }, K = {
|
|
12
13
|
key: 0,
|
|
13
14
|
class: "prompt"
|
|
14
|
-
},
|
|
15
|
-
ref: "contentEditorTel",
|
|
16
|
-
class: "content-editor"
|
|
17
|
-
}, oe = /* @__PURE__ */ E({
|
|
15
|
+
}, L = { class: "form-item" }, M = { class: "content-editor" }, le = /* @__PURE__ */ z({
|
|
18
16
|
name: "FormPanel",
|
|
19
17
|
__name: "form-panel",
|
|
20
|
-
setup(
|
|
21
|
-
const { isDrag: w } =
|
|
22
|
-
function
|
|
18
|
+
setup(Q) {
|
|
19
|
+
const f = g({}), { isDrag: w } = B(), r = g(!1), c = J(), { fields: m } = c;
|
|
20
|
+
function D() {
|
|
21
|
+
r.value = !r.value, E(() => {
|
|
22
|
+
f.value = c.getFormSchema();
|
|
23
|
+
});
|
|
23
24
|
}
|
|
24
|
-
function
|
|
25
|
+
function y() {
|
|
25
26
|
}
|
|
26
|
-
const { b:
|
|
27
|
-
function
|
|
27
|
+
const { b: $, e: p, em: u } = P("panel");
|
|
28
|
+
function F() {
|
|
28
29
|
const { shared: s } = c, { key: t } = s.draggedContext;
|
|
29
30
|
return t !== "";
|
|
30
31
|
}
|
|
31
32
|
function I(s, t) {
|
|
32
|
-
const
|
|
33
|
-
if (
|
|
34
|
-
const { shared:
|
|
35
|
-
|
|
33
|
+
const a = R(s), { oldIndex: N } = t, _ = a[N];
|
|
34
|
+
if (_) {
|
|
35
|
+
const { shared: V } = c;
|
|
36
|
+
V.draggedContext.key = _.key;
|
|
36
37
|
}
|
|
37
38
|
}
|
|
38
|
-
return (s, t) => (
|
|
39
|
+
return (s, t) => (v(), h(
|
|
39
40
|
"div",
|
|
40
41
|
{
|
|
41
|
-
class: i(e(
|
|
42
|
+
class: i(e($)())
|
|
42
43
|
},
|
|
43
44
|
[
|
|
44
45
|
o(
|
|
45
46
|
"div",
|
|
46
47
|
{
|
|
47
|
-
class: i(e(
|
|
48
|
+
class: i(e(p)("toolbar"))
|
|
48
49
|
},
|
|
49
50
|
[
|
|
50
|
-
o("div",
|
|
51
|
-
n(e(
|
|
52
|
-
title:
|
|
51
|
+
o("div", A, [
|
|
52
|
+
n(e(x), { placement: "bottom" }, {
|
|
53
|
+
title: l(() => t[1] || (t[1] = [
|
|
53
54
|
o(
|
|
54
55
|
"span",
|
|
55
56
|
null,
|
|
@@ -58,19 +59,19 @@ const O = { class: "left" }, P = { class: "right" }, q = { class: "content-panel
|
|
|
58
59
|
/* CACHED */
|
|
59
60
|
)
|
|
60
61
|
])),
|
|
61
|
-
default:
|
|
62
|
-
n(e(
|
|
62
|
+
default: l(() => [
|
|
63
|
+
n(e(S), {
|
|
63
64
|
name: "delete1",
|
|
64
|
-
class: i(e(
|
|
65
|
+
class: i(e(u)("toolbar", "icon")),
|
|
65
66
|
size: 18,
|
|
66
|
-
onClick:
|
|
67
|
+
onClick: y
|
|
67
68
|
}, null, 8, ["class"])
|
|
68
69
|
]),
|
|
69
70
|
_: 1
|
|
70
71
|
/* STABLE */
|
|
71
72
|
}),
|
|
72
|
-
n(e(
|
|
73
|
-
title:
|
|
73
|
+
n(e(x), { placement: "bottom" }, {
|
|
74
|
+
title: l(() => t[2] || (t[2] = [
|
|
74
75
|
o(
|
|
75
76
|
"span",
|
|
76
77
|
null,
|
|
@@ -79,61 +80,61 @@ const O = { class: "left" }, P = { class: "right" }, q = { class: "content-panel
|
|
|
79
80
|
/* CACHED */
|
|
80
81
|
)
|
|
81
82
|
])),
|
|
82
|
-
default:
|
|
83
|
-
n(e(
|
|
83
|
+
default: l(() => [
|
|
84
|
+
n(e(S), {
|
|
84
85
|
name: "code",
|
|
85
|
-
class: i(e(
|
|
86
|
+
class: i(e(u)("toolbar", "icon")),
|
|
86
87
|
size: 18,
|
|
87
|
-
onClick:
|
|
88
|
+
onClick: D
|
|
88
89
|
}, null, 8, ["class"])
|
|
89
90
|
]),
|
|
90
91
|
_: 1
|
|
91
92
|
/* STABLE */
|
|
92
93
|
}),
|
|
93
|
-
|
|
94
|
+
d(` <FormIcon name="desktop" />
|
|
94
95
|
<FormIcon name="mobile" /> `)
|
|
95
96
|
]),
|
|
96
|
-
o("div",
|
|
97
|
-
|
|
97
|
+
o("div", G, [
|
|
98
|
+
k(s.$slots, "toolbar")
|
|
98
99
|
])
|
|
99
100
|
],
|
|
100
101
|
2
|
|
101
102
|
/* CLASS */
|
|
102
103
|
),
|
|
103
|
-
|
|
104
|
+
d(' ref="contentTelRef" '),
|
|
104
105
|
o(
|
|
105
106
|
"div",
|
|
106
107
|
{
|
|
107
|
-
class: i(e(
|
|
108
|
+
class: i(e(p)("content"))
|
|
108
109
|
},
|
|
109
110
|
[
|
|
110
|
-
|
|
111
|
+
C(o(
|
|
111
112
|
"div",
|
|
112
|
-
|
|
113
|
+
H,
|
|
113
114
|
[
|
|
114
|
-
!e(w) && e(
|
|
115
|
-
n(e(
|
|
115
|
+
!e(w) && e(m).length === 0 ? (v(), h("div", K, " 👈 请在左侧选择控件并拖至此处 ")) : d("v-if", !0),
|
|
116
|
+
n(e(T), {
|
|
116
117
|
autocomplete: "off",
|
|
117
118
|
class: "design-from",
|
|
118
119
|
"label-align": "left"
|
|
119
120
|
}, {
|
|
120
|
-
default:
|
|
121
|
-
n(e(
|
|
121
|
+
default: l(() => [
|
|
122
|
+
n(e(j), {
|
|
122
123
|
class: "drag-from",
|
|
123
|
-
list: e(
|
|
124
|
-
group: { name: "form", put:
|
|
124
|
+
list: e(m),
|
|
125
|
+
group: { name: "form", put: F },
|
|
125
126
|
animation: 300,
|
|
126
127
|
sort: !0,
|
|
127
128
|
"item-key": "id",
|
|
128
129
|
"chosen-class": "choose",
|
|
129
|
-
onStart: t[0] || (t[0] = (
|
|
130
|
+
onStart: t[0] || (t[0] = (a) => I(e(m), a))
|
|
130
131
|
}, {
|
|
131
|
-
item:
|
|
132
|
-
o("div",
|
|
133
|
-
|
|
134
|
-
n(
|
|
135
|
-
field:
|
|
136
|
-
space: e(
|
|
132
|
+
item: l(({ element: a }) => [
|
|
133
|
+
o("div", L, [
|
|
134
|
+
k(s.$slots, `panel-${a.key}`, {}, () => [
|
|
135
|
+
n(q, {
|
|
136
|
+
field: a,
|
|
137
|
+
space: e(m)
|
|
137
138
|
}, null, 8, ["field", "space"])
|
|
138
139
|
])
|
|
139
140
|
])
|
|
@@ -149,16 +150,18 @@ const O = { class: "left" }, P = { class: "right" }, q = { class: "content-panel
|
|
|
149
150
|
512
|
|
150
151
|
/* NEED_PATCH */
|
|
151
152
|
), [
|
|
152
|
-
[
|
|
153
|
+
[b, !r.value]
|
|
153
154
|
]),
|
|
154
|
-
|
|
155
|
+
C(o(
|
|
155
156
|
"div",
|
|
156
|
-
|
|
157
|
-
|
|
157
|
+
M,
|
|
158
|
+
[
|
|
159
|
+
n(O, { data: f.value }, null, 8, ["data"])
|
|
160
|
+
],
|
|
158
161
|
512
|
|
159
162
|
/* NEED_PATCH */
|
|
160
163
|
), [
|
|
161
|
-
[
|
|
164
|
+
[b, r.value]
|
|
162
165
|
])
|
|
163
166
|
],
|
|
164
167
|
2
|
|
@@ -171,5 +174,5 @@ const O = { class: "left" }, P = { class: "right" }, q = { class: "content-panel
|
|
|
171
174
|
}
|
|
172
175
|
});
|
|
173
176
|
export {
|
|
174
|
-
|
|
177
|
+
le as default
|
|
175
178
|
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("vue"),j=require("highlight.js/lib/core"),B=require("highlight.js/lib/languages/json");require("../../internal.js");const T=require("../../hooks/use-namespace/index.js"),z={class:"code-container"},J={__name:"json-preview",props:{data:{type:[Object,Array,String,Number,Boolean,null],required:!0},indent:{type:Number,default:2},defaultFoldCollapsed:{type:Boolean,default:!1}},setup(E){const p=E,{b:q}=T.useNamespace("json-preview");let C=null,N=!1,b=null;async function $(){N||(j.registerLanguage("json",B),C=j,N=!0)}const A=y.ref(null);let m=[];const w=y.computed(()=>{try{const n=p.data;if(typeof n=="string")try{const c=JSON.parse(n);return JSON.stringify(c,null,p.indent)}catch{return n}return JSON.stringify(n,null,p.indent)}catch{return String(p.data)}});async function S(){const n=A.value;if(!n)return;await $();const c=String(w.value).split(/\r\n|\r|\n/);m=c;const s=_(c,p.indent);n.innerHTML=L(c,s),b=null,D(n,s),H(n),M(n),p.defaultFoldCollapsed?R():x()}y.onMounted(()=>{S()}),y.watch(w,()=>{S()});function R(){const n=A.value;if(!n)return;const c=n.querySelectorAll(".fold-toggle"),s=l=>n.querySelector(`tr[data-line="${l}"]`),u=(l,a)=>{for(let t=l+1;t<=a-1;t++){const e=s(t);e&&(e.style.display="none")}},d=(l,a)=>{if(!Array.isArray(m))return!1;for(let t=l+1;t<=a-1;t++){const e=(m[t-1]||"").trim();if(e&&e!=="}"&&e!=="]")return!0}return!1},f=l=>{const a=s(l);return a?a.querySelector("td.hljs-ln-code"):null},i=(l,a)=>{const t=f(l);if(!t)return;let e=t.querySelector(".fold-ellipsis");a?(e||(e=document.createElement("span"),e.className="fold-ellipsis",e.textContent="…",t.appendChild(e)),e.style.display="inline"):e&&(e.style.display="none")};c.forEach(l=>{const a=Number(l.getAttribute("data-start")),t=Number(l.getAttribute("data-end"));l.setAttribute("data-collapsed","true"),l.textContent="▸",u(a,t),d(a,t)&&i(a,!0)})}function x(){const n=A.value;if(!n)return;const c=n.querySelectorAll(".fold-toggle"),s=i=>n.querySelector(`tr[data-line="${i}"]`),u=(i,l)=>{for(let a=i+1;a<=l-1;a++){const t=s(a);t&&(t.style.display="")}},d=i=>{const l=s(i);return l?l.querySelector("td.hljs-ln-code"):null},f=(i,l)=>{const a=d(i);if(!a)return;let t=a.querySelector(".fold-ellipsis");l?(t||(t=document.createElement("span"),t.className="fold-ellipsis",t.textContent="…",a.appendChild(t)),t.style.display="inline"):t&&(t.style.display="none")};c.forEach(i=>{const l=Number(i.getAttribute("data-start")),a=Number(i.getAttribute("data-end"));i.setAttribute("data-collapsed","false"),i.textContent="▾",u(l,a),f(l,!1),f(a,!1)})}function _(n){const c=[],s=[];for(let d=0;d<n.length;d++){const i=n[d].trim(),l=i.charAt(i.length-1),a=i.charAt(0);if(l==="{"||l==="["){if(i.endsWith("{}")||i.endsWith("[]"))continue;s.push({type:l,start:d+1})}if(a==="}"||a==="]"){const t=a;for(let e=s.length-1;e>=0;e--)if(s[e].type==="{"&&t==="}"||s[e].type==="["&&t==="]"){const r=s[e].start,o=d+1;s.splice(e,1),o>r+1&&c.push({start:r,end:o,type:t});break}}}const u={};for(const d of c)u[d.start]=d;return u}function L(n,c){let s='<table class="hljs-ln">';for(let u=0;u<n.length;u++){const d=u+1,f=n[u],i=f.length>0?f:" ",l=i.match(/^[\t ]*/),t=(l?l[0]:"").replace(/\t/g," ".repeat(p.indent)),e=Math.floor(t.length/p.indent),r=C?C.highlight(i,{language:"json"}).value:k(i),o=c[d],g=o?`<span class="fold-toggle" data-start="${d}" data-end="${o.end}" data-collapsed="${p.defaultFoldCollapsed?"true":"false"}">${p.defaultFoldCollapsed?"▸":"▾"}</span>`:"";let h="";for(let v=0;v<e;v++)h+=`<i class="indent-guide" style="--guide-left: calc(var(--indent-char, 1ch) * var(--indent-size) * ${v})"></i>`;const F=`<span class="indent-guides" style="--indent-size:${p.indent}">${h}</span>`,O=`<span class="fold-gutter">${g||" "}</span>`;s+=`
|
|
2
|
+
<tr class="hljs-ln-line" data-line="${d}"><td class="hljs-ln-numbers" data-line-number="${d}"><div class="hljs-ln-n" data-line-number="${d}"></div></td><td class="hljs-ln-code" data-line-number="${d}">${O}<span class="line-content">${F}${r}</span></td></tr>`}return s+=`
|
|
3
|
+
</table>`,s}function D(n){const c=n.querySelectorAll(".fold-toggle"),s=t=>n.querySelector(`tr[data-line="${t}"]`),u=t=>{const e=s(t);return e?e.querySelector("td.hljs-ln-code"):null},d=(t,e)=>{for(let r=t+1;r<=e-1;r++){const o=s(r);o&&(o.style.display="none")}},f=(t,e)=>{for(let r=t+1;r<=e-1;r++){const o=s(r);o&&(o.style.display="")}},i=(t,e)=>{if(!Array.isArray(m))return!1;for(let r=t+1;r<=e-1;r++){const o=(m[r-1]||"").trim();if(o&&o!=="}"&&o!=="]")return!0}return!1},l=(t,e)=>{const r=u(t);if(!r)return;let o=r.querySelector(".fold-ellipsis");e?(o||(o=document.createElement("span"),o.className="fold-ellipsis",o.textContent="…",r.appendChild(o)),o.style.display="inline"):o&&(o.style.display="none")},a=(t,e)=>{for(let r=t+1;r<=e-1;r++){const o=n.querySelector(`.fold-toggle[data-start="${r}"]`);if(o&&o.getAttribute("data-collapsed")==="true"){const g=Number(o.getAttribute("data-start")),h=Number(o.getAttribute("data-end"));d(g,h),i(g,h)&&l(g,!0)}}};c.forEach(t=>{t.addEventListener("click",()=>{const e=Number(t.getAttribute("data-start")),r=Number(t.getAttribute("data-end")),g=!(t.getAttribute("data-collapsed")==="true");t.setAttribute("data-collapsed",g?"true":"false"),t.textContent=g?"▸":"▾",g?(d(e,r),i(e,r)&&l(e,!0)):(f(e,r),l(e,!1),l(r,!1),a(e,r))})})}function k(n){const c={"&":"&","<":"<",">":">",'"':""","'":"'"};return String(n).replace(/[&<>"']/g,s=>c[s])}function H(n){n.getAttribute("data-copy-init")!=="true"&&(n.setAttribute("data-copy-init","true"),n.addEventListener("copy",c=>{const s=window.getSelection();if(!s||s.rangeCount===0)return;const u=s.getRangeAt(0),d=h=>h&&(h.nodeType===3?h.parentElement:h),f=d(u.startContainer),i=d(u.endContainer),l=f?f.closest("tr.hljs-ln-line"):null,a=i?i.closest("tr.hljs-ln-line"):null;if(!l||!a||s.isCollapsed){c.clipboardData.setData("text/plain",m.join(`
|
|
4
|
+
`)),c.preventDefault();return}const t=Number(l.getAttribute("data-line")),e=Number(a.getAttribute("data-line"));if(Number.isNaN(t)||Number.isNaN(e)){c.clipboardData.setData("text/plain",m.join(`
|
|
5
|
+
`)),c.preventDefault();return}const r=Math.min(t,e),o=Math.max(t,e),g=m.slice(r-1,o).join(`
|
|
6
|
+
`);c.clipboardData.setData("text/plain",g),c.preventDefault()}))}function M(n){n.getAttribute("data-select-init")!=="true"&&(n.setAttribute("data-select-init","true"),n.addEventListener("click",c=>{const s=c.target;if(!(s instanceof Element)||s.closest(".fold-toggle"))return;const u=s.closest("tr.hljs-ln-line");u&&(b&&b!==u&&b.classList.remove("selected"),u.classList.add("selected"),b=u)}))}return(n,c)=>(y.openBlock(),y.createElementBlock("div",{class:y.normalizeClass(y.unref(q)())},[y.createElementVNode("div",z,[y.createElementVNode("pre",{ref_key:"preRef",ref:A,class:"hljs"},null,512),y.createCommentVNode(" 去掉 fade-mask 与动态高度样式 ")])],2))}};exports.default=J;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../internal.js");const l=require("ant-design-vue"),
|
|
2
|
-
<FormIcon name="mobile" /> `)]),e.createElementVNode("div",
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../internal.js");const l=require("ant-design-vue"),w=require("vuedraggable"),m=require("../context/design.js");require("./panel/panel-item.vue2.js");const k=require("./base/json-preview.vue.js");require("./index.js");const x=require("../hooks/use-namespace/index.js"),f=require("./form-icon.vue2.js"),b=require("./panel/panel-item.vue.js"),E={class:"left"},S={class:"right"},q={class:"content-panel"},y={key:0,class:"prompt"},D={class:"form-item"},z={class:"content-editor"},I=e.defineComponent({name:"FormPanel",__name:"form-panel",setup(F){const c=e.ref({}),{isDrag:p}=m.useInjectDragContext(),r=e.ref(!1),s=m.useInjectDesignContext(),{fields:a}=s;function _(){r.value=!r.value,e.nextTick(()=>{c.value=s.getFormSchema()})}function v(){}const{b:g,e:i,em:u}=x.useNamespace("panel");function h(){const{shared:n}=s,{key:t}=n.draggedContext;return t!==""}function C(n,t){const o=e.toRaw(n),{oldIndex:N}=t,d=o[N];if(d){const{shared:V}=s;V.draggedContext.key=d.key}}return(n,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(g)())},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(i)("toolbar"))},[e.createElementVNode("div",E,[e.createVNode(e.unref(l.Tooltip),{placement:"bottom"},{title:e.withCtx(()=>t[1]||(t[1]=[e.createElementVNode("span",null,"全部删除",-1)])),default:e.withCtx(()=>[e.createVNode(e.unref(f.default),{name:"delete1",class:e.normalizeClass(e.unref(u)("toolbar","icon")),size:18,onClick:v},null,8,["class"])]),_:1}),e.createVNode(e.unref(l.Tooltip),{placement:"bottom"},{title:e.withCtx(()=>t[2]||(t[2]=[e.createElementVNode("span",null,"查看JSON Schema",-1)])),default:e.withCtx(()=>[e.createVNode(e.unref(f.default),{name:"code",class:e.normalizeClass(e.unref(u)("toolbar","icon")),size:18,onClick:_},null,8,["class"])]),_:1}),e.createCommentVNode(` <FormIcon name="desktop" />
|
|
2
|
+
<FormIcon name="mobile" /> `)]),e.createElementVNode("div",S,[e.renderSlot(n.$slots,"toolbar")])],2),e.createCommentVNode(' ref="contentTelRef" '),e.createElementVNode("div",{class:e.normalizeClass(e.unref(i)("content"))},[e.withDirectives(e.createElementVNode("div",q,[!e.unref(p)&&e.unref(a).length===0?(e.openBlock(),e.createElementBlock("div",y," 👈 请在左侧选择控件并拖至此处 ")):e.createCommentVNode("v-if",!0),e.createVNode(e.unref(l.Form),{autocomplete:"off",class:"design-from","label-align":"left"},{default:e.withCtx(()=>[e.createVNode(e.unref(w),{class:"drag-from",list:e.unref(a),group:{name:"form",put:h},animation:300,sort:!0,"item-key":"id","chosen-class":"choose",onStart:t[0]||(t[0]=o=>C(e.unref(a),o))},{item:e.withCtx(({element:o})=>[e.createElementVNode("div",D,[e.renderSlot(n.$slots,`panel-${o.key}`,{},()=>[e.createVNode(b.default,{field:o,space:e.unref(a)},null,8,["field","space"])])])]),_:3},8,["list","group"])]),_:3})],512),[[e.vShow,!r.value]]),e.withDirectives(e.createElementVNode("div",z,[e.createVNode(k.default,{data:c.value},null,8,["data"])],512),[[e.vShow,r.value]])],2)],2))}});exports.default=I;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Design.js"),t=e=>new r.FormDesign(e);exports.CreateFormDesign=t;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.k-design-form-config .setting-tabs{height:100%}.k-design-form-config .setting-tabs .ant-tabs-content{height:100%;overflow:auto}.k-design-form-config .ant-collapse{border-radius:0;border-left:none;border-right:none}.k-design-form-config .ant-collapse-header{padding:5px 10px!important}.k-design-form-config .ant-collapse-item{border-radius:0!important}
|
|
1
|
+
.k-design-form-config{height:100%;overflow:auto}.k-design-form-config .setting-tabs{height:100%}.k-design-form-config .setting-tabs .ant-tabs-content{height:100%;overflow:auto}.k-design-form-config .ant-collapse{border-radius:0;border-left:none;border-right:none}.k-design-form-config .ant-collapse-header{padding:5px 10px!important}.k-design-form-config .ant-collapse-item{border-radius:0!important}.k-design-form-config .ant-collapse-item-active:last-child{border-bottom:0!important}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@charset "UTF-8";:root{--hljs-background:#ffffff;--hljs-fg:#ffffff;--hljs-key:#a31515;--hljs-string:#0451a5;--hljs-number:#059669;--hljs-literal:#b45309;--hljs-punctuation:#000000}.hljs{background:var(--hljs-background);color:var(--hljs-fg)}.hljs-attr{color:var(--hljs-key)}.hljs-string{color:var(--hljs-string)}.hljs-number{color:var(--hljs-number)}.hljs-literal{color:var(--hljs-literal)}.hljs-operator,.hljs-punctuation{color:var(--hljs-punctuation)}.hljs-symbol{color:var(--hljs-literal)}.hljs-quote{color:var(--hljs-string)}.hljs-title{color:var(--hljs-key)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-family:iconfont-design;src:url(fonts/iconfont.woff2?t=
|
|
1
|
+
@font-face{font-family:iconfont-design;src:url(fonts/iconfont.woff2?t=87885) format("woff2"),url(fonts/iconfont.woff?t=80571) format("woff"),url(fonts/iconfont.ttf?t=86251) format("truetype")}.k-design-icon{font-family:iconfont-design!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-from-design-exclamation-circle-filled:before{content:"\e670"}.icon-from-design-exclamation-circle:before{content:"\e660"}.icon-from-design-form-object:before{content:"\e666"}.icon-from-design-form-list:before{content:"\e667"}.icon-from-design-form-table:before{content:"\e66f"}.icon-from-design-copy:before{content:"\e65d"}.icon-from-design-form-radio:before{content:"\e698"}.icon-from-design-form-daterange:before{content:"\e699"}.icon-from-design-form-money:before{content:"\e69a"}.icon-from-design-form-kit-leave:before{content:"\e69b"}.icon-from-design-form-kit-reimbursement:before{content:"\e69c"}.icon-from-design-form-kit-out:before{content:"\e69d"}.icon-from-design-form-kit-replenish:before{content:"\e69e"}.icon-from-design-form-kit-overtime:before{content:"\e69f"}.icon-from-design-form-number:before{content:"\e6a0"}.icon-from-design-form-textarea:before{content:"\e6a1"}.icon-from-design-form-select:before{content:"\e6a2"}.icon-from-design-form-kit-transfer:before{content:"\e6a3"}.icon-from-design-form-right:before{content:"\e6a4"}.icon-from-design-form-checkbox:before{content:"\e687"}.icon-from-design-form-area:before{content:"\e688"}.icon-from-design-form-del:before{content:"\e689"}.icon-from-design-form-contact-person:before{content:"\e68a"}.icon-from-design-form-default:before{content:"\e68b"}.icon-from-design-form-date:before{content:"\e68c"}.icon-from-design-form-drag:before{content:"\e68d"}.icon-from-design-form-desctext:before{content:"\e68e"}.icon-from-design-form-fileupload:before{content:"\e68f"}.icon-from-design-form-input:before{content:"\e690"}.icon-from-design-form-grid:before{content:"\e691"}.icon-from-design-form-imgupload:before{content:"\e692"}.icon-from-design-form-hot-city:before{content:"\e693"}.icon-from-design-form-kit-leave-2:before{content:"\e694"}.icon-from-design-form-inputNumber:before{content:"\e695"}.icon-from-design-form-kit-business-trip:before{content:"\e696"}.icon-from-design-shouzhixiangyou:before{content:"\e615"}.icon-from-design-xiangzuohuangse:before{content:"\e60a"}.icon-from-design-code:before{content:"\e65a"}.icon-from-design-desktop:before{content:"\e65b"}.icon-from-design-delete1:before{content:"\e65c"}.icon-from-design-double-left:before{content:"\e65e"}.icon-from-design-double-right:before{content:"\e65f"}.icon-from-design-mobile:before{content:"\e668"}.icon-from-design-question-circle:before{content:"\e66c"}.icon-from-design-sound:before{content:"\e672"}
|