@hankchen/canvas-editor-vue 0.6.0 → 0.7.0
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/dist/{useDataSourceSchema-YV8g-lo0.js → DropdownMenu-CeUNKMDQ.js} +70 -78
- package/dist/ExpressionPathPicker-DchGsK70.js +739 -0
- package/dist/{canvas-CX1RdlFC.js → canvas-D3fFnBqG.js} +526 -527
- package/dist/canvas.js +1 -1
- package/dist/index.js +14 -15
- package/dist/layer-panel/TemplateTableForm.d.ts +1 -27
- package/dist/{layer-panel-Cd1e8xNB.js → layer-panel-BouAYiDq.js} +231 -257
- package/dist/layer-panel.js +1 -1
- package/dist/property-panel/PropertyField.d.ts +9 -2
- package/dist/property-panel/fieldSchema.d.ts +16 -10
- package/dist/property-panel/fields/RowsPathField.d.ts +17 -0
- package/dist/property-panel/fields/index.d.ts +1 -0
- package/dist/property-panel/usePropertyPanel.d.ts +11 -2
- package/dist/{property-panel-B32ZBQdf.js → property-panel-DJQJzioT.js} +403 -341
- package/dist/property-panel.js +2 -2
- package/dist/resourceTemplate-D-DKEo7Z.js +33 -0
- package/dist/shared/ExpressionPathPicker.d.ts +9 -2
- package/dist/shared/index.d.ts +13 -10
- package/dist/shared/pathPickerModel.d.ts +16 -3
- package/dist/shared/popupPosition.d.ts +2 -2
- package/dist/shared/rowsPathPickerSource.d.ts +15 -0
- package/dist/shared/useDataSourceSchema.d.ts +9 -1
- package/dist/shared/useExpressionDiagnostics.d.ts +11 -0
- package/dist/{shared-wuupBoZg.js → shared-CRDKDSpa.js} +22 -22
- package/dist/shared.js +9 -10
- package/dist/{status-bar-XMVbRLY9.js → status-bar-DBf5kIXY.js} +69 -67
- package/dist/status-bar.js +1 -1
- package/dist/style.css +1 -1
- package/dist/uploadFile-mXJVPEzm.js +653 -0
- package/dist/{useTransientFeedback-CTjmMmFF.js → useTransientFeedback-BN_O7V2w.js} +43 -28
- package/package.json +2 -2
- package/dist/popupPosition-Ck5Gsvjy.js +0 -526
- package/dist/resourceTemplate-cdcQtp9a.js +0 -246
- package/dist/shared/rowsPathCompletionSource.d.ts +0 -3
- package/dist/shared/usePathCompletion.d.ts +0 -18
- package/dist/uploadFile-D1RY-ji0.js +0 -516
- package/dist/usePathCompletion-Do17CQ6l.js +0 -220
|
@@ -1,246 +0,0 @@
|
|
|
1
|
-
import { l as e, r as t } from "./popupPosition-Ck5Gsvjy.js";
|
|
2
|
-
import { Fragment as n, Teleport as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as ee, onScopeDispose as f, openBlock as p, ref as m, renderList as te, toDisplayString as h, watch as g, withModifiers as _ } from "vue";
|
|
3
|
-
//#region ../canvas-editor/src/shared/resourcePath.ts
|
|
4
|
-
function v(e, t) {
|
|
5
|
-
return {
|
|
6
|
-
kind: t,
|
|
7
|
-
start: 0,
|
|
8
|
-
end: e.length,
|
|
9
|
-
at: {
|
|
10
|
-
start: 0,
|
|
11
|
-
end: e.length
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
function y(t) {
|
|
16
|
-
let n = t.endsWith("\n") ? t.slice(0, -1) : t, r = /^\{\{([^{}]*)\}\}$/.exec(n);
|
|
17
|
-
if (r === null) return [v(t, "resource_not_single_ref")];
|
|
18
|
-
let i = e(r[1] ?? "");
|
|
19
|
-
return i === "" ? [v(t, "empty_fragment")] : i.includes("(") ? [v(t, "resource_function_call")] : [];
|
|
20
|
-
}
|
|
21
|
-
//#endregion
|
|
22
|
-
//#region src/shared/pathPickerModel.ts
|
|
23
|
-
function b(e, t) {
|
|
24
|
-
let n = e(t);
|
|
25
|
-
if (n === null) return [];
|
|
26
|
-
let r = [];
|
|
27
|
-
for (let t of n.candidates) t.kind === "path" && t.path !== void 0 && r.push({
|
|
28
|
-
path: t.path,
|
|
29
|
-
item: t,
|
|
30
|
-
drillable: x(e, t.path)
|
|
31
|
-
});
|
|
32
|
-
return r;
|
|
33
|
-
}
|
|
34
|
-
function x(e, t) {
|
|
35
|
-
let n = e(`${t}.`);
|
|
36
|
-
return n !== null && n.candidates.some((e) => e.kind === "path");
|
|
37
|
-
}
|
|
38
|
-
//#endregion
|
|
39
|
-
//#region src/shared/ExpressionPathPicker.vue?vue&type=script&setup=true&lang.ts
|
|
40
|
-
var S = ["title", "aria-label"], C = ["aria-expanded", "aria-label"], w = ["aria-label"], T = { class: "truncate font-mono" }, ne = {
|
|
41
|
-
key: 1,
|
|
42
|
-
class: "cn-pathpicker__empty px-2 py-2 text-cn-muted"
|
|
43
|
-
}, E = [
|
|
44
|
-
"aria-label",
|
|
45
|
-
"title",
|
|
46
|
-
"onClick",
|
|
47
|
-
"onMousemove"
|
|
48
|
-
], D = { class: "cn-pathpicker__segment min-w-0 truncate font-mono text-cn-fg" }, O = {
|
|
49
|
-
key: 0,
|
|
50
|
-
class: "shrink-0 rounded-sm bg-cn-field px-1 py-0.5 text-[9px] leading-none text-cn-muted"
|
|
51
|
-
}, k = {
|
|
52
|
-
key: 1,
|
|
53
|
-
class: "min-w-0 flex-1 truncate text-[10px] leading-none text-cn-muted"
|
|
54
|
-
}, A = {
|
|
55
|
-
key: 2,
|
|
56
|
-
class: "cn-pathpicker__drill ml-auto shrink-0 text-cn-muted",
|
|
57
|
-
"aria-hidden": "true"
|
|
58
|
-
}, j = /* @__PURE__ */ l({
|
|
59
|
-
__name: "ExpressionPathPicker",
|
|
60
|
-
props: {
|
|
61
|
-
modelValue: {},
|
|
62
|
-
source: { type: [Function, null] },
|
|
63
|
-
disabled: { type: Boolean },
|
|
64
|
-
ariaLabel: {},
|
|
65
|
-
placeholder: {}
|
|
66
|
-
},
|
|
67
|
-
emits: ["update:modelValue", "change"],
|
|
68
|
-
setup(e, { emit: l }) {
|
|
69
|
-
let v = e, y = l, x = i(() => !v.disabled && v.source !== null), j = m(!1), M = m([]), N = m(0), P = i(() => M.value[M.value.length - 1] ?? null), re = i(() => {
|
|
70
|
-
let e = M.value[M.value.length - 2];
|
|
71
|
-
return e === void 0 ? "" : e.label === "" ? "根级字段" : e.label;
|
|
72
|
-
});
|
|
73
|
-
function F(e, t) {
|
|
74
|
-
return {
|
|
75
|
-
prefix: e,
|
|
76
|
-
label: t,
|
|
77
|
-
entries: v.source === null ? [] : b(v.source, e)
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
function ie() {
|
|
81
|
-
x.value && !j.value && (M.value = [F("", "")], N.value = 0, j.value = !0, u(() => {
|
|
82
|
-
Y(), K.value?.focus();
|
|
83
|
-
}));
|
|
84
|
-
}
|
|
85
|
-
function I() {
|
|
86
|
-
j.value && (L(), G.value?.focus());
|
|
87
|
-
}
|
|
88
|
-
function L() {
|
|
89
|
-
j.value = !1, M.value = [], N.value = 0;
|
|
90
|
-
}
|
|
91
|
-
function R() {
|
|
92
|
-
j.value ? I() : ie();
|
|
93
|
-
}
|
|
94
|
-
function z(e) {
|
|
95
|
-
v.source !== null && (M.value.push(F(`${e.path}.`, e.path)), N.value = 0, u(Y));
|
|
96
|
-
}
|
|
97
|
-
function B() {
|
|
98
|
-
M.value.length <= 1 || (M.value.pop(), N.value = 0, u(Y));
|
|
99
|
-
}
|
|
100
|
-
function V(e) {
|
|
101
|
-
if (e.drillable) {
|
|
102
|
-
z(e);
|
|
103
|
-
return;
|
|
104
|
-
}
|
|
105
|
-
y("update:modelValue", e.path), y("change", e.path), I();
|
|
106
|
-
}
|
|
107
|
-
function H() {
|
|
108
|
-
return P.value?.entries[N.value] ?? null;
|
|
109
|
-
}
|
|
110
|
-
function U(e) {
|
|
111
|
-
if (e.key === "Escape") {
|
|
112
|
-
e.preventDefault(), I();
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
if (e.key === "Tab") {
|
|
116
|
-
I();
|
|
117
|
-
return;
|
|
118
|
-
}
|
|
119
|
-
let t = P.value?.entries ?? [];
|
|
120
|
-
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
121
|
-
e.preventDefault();
|
|
122
|
-
let n = t.length;
|
|
123
|
-
n > 0 && (N.value = (N.value + (e.key === "ArrowDown" ? 1 : n - 1)) % n);
|
|
124
|
-
return;
|
|
125
|
-
}
|
|
126
|
-
if (e.key === "ArrowRight") {
|
|
127
|
-
let t = H();
|
|
128
|
-
t?.drillable && (e.preventDefault(), z(t));
|
|
129
|
-
return;
|
|
130
|
-
}
|
|
131
|
-
if (e.key === "ArrowLeft") {
|
|
132
|
-
M.value.length > 1 && (e.preventDefault(), B());
|
|
133
|
-
return;
|
|
134
|
-
}
|
|
135
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
136
|
-
let t = H();
|
|
137
|
-
t !== null && (e.preventDefault(), V(t));
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
let W = m(null), G = m(null), K = m(null), q = m(0), J = m(0);
|
|
141
|
-
function Y() {
|
|
142
|
-
if (!j.value) return;
|
|
143
|
-
let e = W.value, n = K.value;
|
|
144
|
-
if (e === null) return;
|
|
145
|
-
let r = e.getBoundingClientRect(), i = t({
|
|
146
|
-
anchor: r,
|
|
147
|
-
popupWidth: n?.offsetWidth ?? 0,
|
|
148
|
-
popupHeight: n?.offsetHeight ?? 0,
|
|
149
|
-
viewportWidth: window.innerWidth,
|
|
150
|
-
viewportHeight: window.innerHeight
|
|
151
|
-
});
|
|
152
|
-
q.value = i.top, J.value = i.left;
|
|
153
|
-
}
|
|
154
|
-
function X() {
|
|
155
|
-
Y();
|
|
156
|
-
}
|
|
157
|
-
g(j, (e) => {
|
|
158
|
-
e ? (window.addEventListener("pointerdown", Z), window.addEventListener("keydown", Q), window.addEventListener("scroll", X, !0), window.addEventListener("resize", X)) : $();
|
|
159
|
-
});
|
|
160
|
-
function Z(e) {
|
|
161
|
-
let t = e.target;
|
|
162
|
-
t instanceof Node && (W.value?.contains(t) || K.value?.contains(t) || L());
|
|
163
|
-
}
|
|
164
|
-
function Q(e) {
|
|
165
|
-
e.key === "Escape" && I();
|
|
166
|
-
}
|
|
167
|
-
function $() {
|
|
168
|
-
window.removeEventListener("pointerdown", Z), window.removeEventListener("keydown", Q), window.removeEventListener("scroll", X, !0), window.removeEventListener("resize", X);
|
|
169
|
-
}
|
|
170
|
-
return f($, !0), (t, i) => (p(), s("div", {
|
|
171
|
-
ref_key: "rootRef",
|
|
172
|
-
ref: W,
|
|
173
|
-
class: "cn-pathpicker flex w-full items-center gap-1.5"
|
|
174
|
-
}, [
|
|
175
|
-
c("div", {
|
|
176
|
-
class: d(["cn-pathpicker__value min-w-0 flex-1 truncate rounded-md border border-cn-field-line bg-cn-field px-2 py-1.5 font-mono text-[11px] leading-none text-cn-fg", e.modelValue === "" ? "text-cn-muted" : ""]),
|
|
177
|
-
title: e.modelValue,
|
|
178
|
-
"aria-label": e.ariaLabel
|
|
179
|
-
}, h(e.modelValue === "" ? e.placeholder ?? "点击右侧按钮选择字段" : e.modelValue), 11, S),
|
|
180
|
-
x.value ? (p(), s("button", {
|
|
181
|
-
key: 0,
|
|
182
|
-
ref_key: "toggleButton",
|
|
183
|
-
ref: G,
|
|
184
|
-
type: "button",
|
|
185
|
-
class: "cn-pathpicker__toggle h-7 shrink-0 rounded-md border border-cn-field-line bg-cn-field px-1.5 text-[11px] leading-none text-cn-muted transition-colors duration-100 hover:border-cn-muted/40 hover:text-cn-fg",
|
|
186
|
-
"aria-haspopup": "menu",
|
|
187
|
-
"aria-expanded": j.value,
|
|
188
|
-
"aria-label": e.ariaLabel === void 0 ? "选择字段路径" : `选择字段路径(${e.ariaLabel})`,
|
|
189
|
-
title: "选择字段路径",
|
|
190
|
-
onClick: R
|
|
191
|
-
}, "▾", 8, C)) : o("", !0),
|
|
192
|
-
(p(), a(r, { to: "body" }, [j.value && P.value !== null ? (p(), s("div", {
|
|
193
|
-
key: 0,
|
|
194
|
-
ref_key: "menuRoot",
|
|
195
|
-
ref: K,
|
|
196
|
-
class: "cn-props cn-pathpicker__menu fixed z-50 max-h-[240px] min-w-[180px] max-w-[280px] overflow-y-auto rounded-md border border-cn-field-line py-1 text-[11px] leading-none",
|
|
197
|
-
style: ee({
|
|
198
|
-
top: `${q.value}px`,
|
|
199
|
-
left: `${J.value}px`
|
|
200
|
-
}),
|
|
201
|
-
role: "menu",
|
|
202
|
-
"aria-label": e.ariaLabel === void 0 ? "字段路径菜单" : `${e.ariaLabel} 字段路径菜单`,
|
|
203
|
-
tabindex: "-1",
|
|
204
|
-
onKeydown: _(U, ["stop"])
|
|
205
|
-
}, [
|
|
206
|
-
M.value.length > 1 ? (p(), s("button", {
|
|
207
|
-
key: 0,
|
|
208
|
-
type: "button",
|
|
209
|
-
role: "menuitem",
|
|
210
|
-
class: "cn-pathpicker__back flex w-full items-center gap-1 border-b border-cn-line/70 px-2 py-1.5 text-left text-cn-muted",
|
|
211
|
-
onClick: B
|
|
212
|
-
}, [i[0] ||= c("span", { "aria-hidden": "true" }, "‹", -1), c("span", T, h(re.value), 1)])) : o("", !0),
|
|
213
|
-
P.value.entries.length === 0 ? (p(), s("div", ne, "无可选字段")) : o("", !0),
|
|
214
|
-
(p(!0), s(n, null, te(P.value.entries, (e, t) => (p(), s("button", {
|
|
215
|
-
key: `${e.path}`,
|
|
216
|
-
type: "button",
|
|
217
|
-
role: "menuitem",
|
|
218
|
-
class: d(["cn-pathpicker__option flex w-full items-center gap-1.5 px-2 py-1.5 text-left", t === N.value ? "cn-pathpicker__option--active" : ""]),
|
|
219
|
-
"aria-label": e.path,
|
|
220
|
-
title: e.path,
|
|
221
|
-
onClick: (t) => V(e),
|
|
222
|
-
onMousemove: (e) => N.value = t
|
|
223
|
-
}, [
|
|
224
|
-
c("span", D, h(e.item.segment), 1),
|
|
225
|
-
e.item.type ? (p(), s("span", O, h(e.item.type), 1)) : o("", !0),
|
|
226
|
-
e.item.description ?? e.item.title ? (p(), s("span", k, h(e.item.description ?? e.item.title), 1)) : o("", !0),
|
|
227
|
-
e.drillable ? (p(), s("span", A, "›")) : o("", !0)
|
|
228
|
-
], 42, E))), 128))
|
|
229
|
-
], 44, w)) : o("", !0)]))
|
|
230
|
-
], 512));
|
|
231
|
-
}
|
|
232
|
-
});
|
|
233
|
-
//#endregion
|
|
234
|
-
//#region src/shared/resourceTemplate.ts
|
|
235
|
-
function M(t) {
|
|
236
|
-
if (y(t).length > 0) return null;
|
|
237
|
-
let n = t.endsWith("\n") ? t.slice(0, -1) : t, r = /^\{\{([^{}]*)\}\}$/.exec(n)?.[1];
|
|
238
|
-
if (r === void 0) return null;
|
|
239
|
-
let i = e(r);
|
|
240
|
-
return i === "" ? null : i;
|
|
241
|
-
}
|
|
242
|
-
function N(e) {
|
|
243
|
-
return `{{${e}}}`;
|
|
244
|
-
}
|
|
245
|
-
//#endregion
|
|
246
|
-
export { y as a, b as i, M as n, j as r, N as t };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { MaybeRefOrGetter, Ref } from 'vue';
|
|
2
|
-
import { CompletionSource } from './completion';
|
|
3
|
-
import { ExpressionCompletionState } from './useExpressionCompletion';
|
|
4
|
-
export declare function usePathCompletion(options: {
|
|
5
|
-
/** 宿主输入元素(textarea/input),模板 ref 传入 */
|
|
6
|
-
target: Ref<HTMLTextAreaElement | HTMLInputElement | null>;
|
|
7
|
-
/** 补全门(无 schema/非标记字段恒闭);响应式 getter/ ref 均可 */
|
|
8
|
-
enabled: MaybeRefOrGetter<boolean>;
|
|
9
|
-
/** 候选源(纯函数注入缝,见 completion.ts;入参 = 光标前输入串) */
|
|
10
|
-
resolve: CompletionSource;
|
|
11
|
-
/** 浮层根元素(可选;在场时按其量宽做视口右缘收口) */
|
|
12
|
-
popupEl?: MaybeRefOrGetter<HTMLElement | null>;
|
|
13
|
-
}): {
|
|
14
|
-
/** 呈现态(reactive),传给浮层组件 */
|
|
15
|
-
popup: ExpressionCompletionState;
|
|
16
|
-
/** 接受高亮项(或指定项);浮层点选经此回接 */
|
|
17
|
-
accept: (index?: number) => void;
|
|
18
|
-
};
|