@cratis/event-models 0.183.1 → 0.184.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/screen-editor/{BindingExpressionPropertyEditor-DbYpy_bX.js → BindingExpressionPropertyEditor-ClMKmJ_3.js} +17 -17
- package/dist/screen-editor/{ColumnListEditor-BHLrr4WK.js → ColumnListEditor-MZzEtJuo.js} +1 -1
- package/dist/screen-editor/{FieldEditor-4a_4uQit.js → FieldEditor-Biz82jlR.js} +1 -1
- package/dist/screen-editor/{FieldListEditor-RGb59BLM.js → FieldListEditor-VWZ3LAwY.js} +1 -1
- package/dist/screen-editor/NavigationItemTargetEditor-pApohBNj.js +78 -0
- package/dist/screen-editor/{NavigationTargetEditor-BZ0uQnIl.js → NavigationTargetEditor-DiGohBww.js} +1 -1
- package/dist/screen-editor/{QueryBindingPropertyEditor-DLlC-slh.js → QueryBindingPropertyEditor-DOxhWp02.js} +7 -7
- package/dist/screen-editor/{ReferenceEditor-BGuaEvY7.js → ReferenceEditor-DYLimujk.js} +1 -1
- package/dist/screen-editor/{ReferenceTargetEditors-kxd9SIuG.js → ReferenceTargetEditors-D0jEg1QM.js} +1 -1
- package/dist/screen-editor/ScreenEditor/DesignMode/DesignModeStrings.d.ts +2 -0
- package/dist/screen-editor/ScreenEditor/PropertyEditors/Registry/PropertyEditorProps.d.ts +1 -0
- package/dist/screen-editor/ScreenEditor/PropertyEditors/Registry/PropertyEditorStrings.d.ts +1 -0
- package/dist/screen-editor/ScreenEditor/PropertyEditors/Specific/NavigationItemTargetEditor.d.ts +1 -0
- package/dist/screen-editor/SearchableSelect-Cj_cgVO0.js +114 -0
- package/dist/screen-editor/{SelectEditor-eeAE7a9p.js → SelectEditor-DStMNhWd.js} +1 -1
- package/dist/screen-editor/{SliceEditor-DLqvdYge.js → SliceEditor-C9bAGN4f.js} +1 -1
- package/dist/screen-editor/{StateChangeEditors-OQ-OUDrv.js → StateChangeEditors-BkAsY31N.js} +1 -1
- package/dist/screen-editor/{TemplatePropertyEditor-D_OaRTPe.js → TemplatePropertyEditor-Dx1dw5aY.js} +1 -1
- package/dist/screen-editor/index.js +1721 -1699
- package/dist/screen-editor/screen-editor.css +1 -1
- package/dist/screen-editor/{toTemplateSources-CN-BMZ39.js → toTemplateSources-DHyjt_ff.js} +55 -55
- package/package.json +3 -3
- package/dist/screen-editor/NavigationItemTargetEditor-C3epn45p.js +0 -72
- package/dist/screen-editor/SearchableSelect-C4yzIyo_.js +0 -110
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { a as V, i as _, l as J, n as I, o as R, r as O, s as Q, t as j } from "./defaultStructuredEditorStrings-Ch1I0Lci.js";
|
|
2
2
|
import { c as w } from "./structuredValue-vqCZttsk.js";
|
|
3
3
|
import { t as D } from "./StructuredValueEditor-CcwyOga0.js";
|
|
4
|
-
import { useEffect as K, useRef as E, useState as
|
|
4
|
+
import { useEffect as K, useRef as E, useState as F } from "react";
|
|
5
5
|
import { BindingSourceKind as d, PropertyValueType as C } from "@cratis/scene.model";
|
|
6
6
|
import { Fragment as x, jsx as t, jsxs as i } from "react/jsx-runtime";
|
|
7
7
|
var u = /* @__PURE__ */ (function(e) {
|
|
8
8
|
return e.String = "string", e.Number = "number", e.Boolean = "boolean", e.Null = "null", e.Json = "json", e;
|
|
9
|
-
})(u || {}),
|
|
10
|
-
const r = s.properties.binding, h = Q(e.effectiveValue) ? e.effectiveValue : void 0, m = h ? void 0 : T(e.effectiveValue), f = V(e), o = h ?? f,
|
|
9
|
+
})(u || {}), $ = ({ property: e, sources: l, strings: s, disabled: c, onChange: p }) => {
|
|
10
|
+
const r = s.properties.binding, h = Q(e.effectiveValue) ? e.effectiveValue : void 0, m = h ? void 0 : T(e.effectiveValue), f = V(e), o = h ?? f, y = L(o, e.descriptor.acceptedBindingKinds?.length ? e.descriptor.acceptedBindingKinds : I, l, r), b = o.query ? l.queryResults.find((n) => n.id === o.query || n.name === o.query) : void 0, v = o.componentId ? l.componentOutputs.find((n) => n.componentId === o.componentId) : void 0, a = (n) => p(A({
|
|
11
11
|
...o,
|
|
12
12
|
...n
|
|
13
13
|
})), P = () => p(void 0);
|
|
@@ -45,7 +45,7 @@ var u = /* @__PURE__ */ (function(e) {
|
|
|
45
45
|
/* @__PURE__ */ i("label", { children: [/* @__PURE__ */ t("span", { children: r.source }), /* @__PURE__ */ t("select", {
|
|
46
46
|
value: o.kind ?? d.DataContext,
|
|
47
47
|
onChange: (n) => a(M(n.target.value, o)),
|
|
48
|
-
children:
|
|
48
|
+
children: y.map((n) => /* @__PURE__ */ t("option", {
|
|
49
49
|
value: n.kind,
|
|
50
50
|
disabled: n.disabled,
|
|
51
51
|
children: n.label
|
|
@@ -86,7 +86,7 @@ var u = /* @__PURE__ */ (function(e) {
|
|
|
86
86
|
})] })
|
|
87
87
|
]
|
|
88
88
|
}),
|
|
89
|
-
|
|
89
|
+
y.filter((n) => n.disabled && n.reason).map((n) => /* @__PURE__ */ i("p", {
|
|
90
90
|
className: "studio-editor-binding__missing",
|
|
91
91
|
children: [
|
|
92
92
|
n.label,
|
|
@@ -94,14 +94,14 @@ var u = /* @__PURE__ */ (function(e) {
|
|
|
94
94
|
n.reason
|
|
95
95
|
]
|
|
96
96
|
}, `${n.kind}:reason`)),
|
|
97
|
-
|
|
97
|
+
g(o) === d.DataContext && /* @__PURE__ */ t(S, {
|
|
98
98
|
id: `${e.descriptor.path}-data-context-paths`,
|
|
99
99
|
label: r.path,
|
|
100
100
|
value: o.path,
|
|
101
101
|
options: l.dataContextPaths,
|
|
102
102
|
onChange: (n) => a({ path: n })
|
|
103
103
|
}),
|
|
104
|
-
|
|
104
|
+
g(o) === d.QueryResult && /* @__PURE__ */ i(x, { children: [
|
|
105
105
|
/* @__PURE__ */ i("label", { children: [/* @__PURE__ */ t("span", { children: r.query }), /* @__PURE__ */ i("select", {
|
|
106
106
|
value: o.query ?? "",
|
|
107
107
|
onChange: (n) => a({
|
|
@@ -136,7 +136,7 @@ var u = /* @__PURE__ */ (function(e) {
|
|
|
136
136
|
children: r.missingQuery(o.query)
|
|
137
137
|
})
|
|
138
138
|
] }),
|
|
139
|
-
|
|
139
|
+
g(o) === d.ComponentProperty && /* @__PURE__ */ i(x, { children: [
|
|
140
140
|
/* @__PURE__ */ i("label", { children: [/* @__PURE__ */ t("span", { children: r.component }), /* @__PURE__ */ i("select", {
|
|
141
141
|
value: o.componentId ?? "",
|
|
142
142
|
onChange: (n) => a({
|
|
@@ -180,7 +180,7 @@ var u = /* @__PURE__ */ (function(e) {
|
|
|
180
180
|
children: r.missingComponent(o.componentId)
|
|
181
181
|
})
|
|
182
182
|
] }),
|
|
183
|
-
|
|
183
|
+
g(o) === d.Literal && /* @__PURE__ */ t(k, {
|
|
184
184
|
value: o.value,
|
|
185
185
|
descriptor: e.descriptor,
|
|
186
186
|
targetType: o.expectedValueType ?? e.descriptor.valueType,
|
|
@@ -209,14 +209,14 @@ var u = /* @__PURE__ */ (function(e) {
|
|
|
209
209
|
id: e,
|
|
210
210
|
children: c.map((r) => /* @__PURE__ */ t("option", { value: r }, r))
|
|
211
211
|
})
|
|
212
|
-
] }),
|
|
213
|
-
const h = q(e, s), m = N(e, s), f = E(m), [o,
|
|
212
|
+
] }), k = ({ value: e, descriptor: l, targetType: s, strings: c, structured: p, onChange: r }) => {
|
|
213
|
+
const h = q(e, s), m = N(e, s), f = E(m), [o, y] = F(h);
|
|
214
214
|
K(() => {
|
|
215
215
|
const a = N(e, s);
|
|
216
|
-
a !== f.current && (f.current = a,
|
|
216
|
+
a !== f.current && (f.current = a, y(q(e, s)));
|
|
217
217
|
}, [e, s]);
|
|
218
218
|
const b = (a) => {
|
|
219
|
-
|
|
219
|
+
y(a);
|
|
220
220
|
const P = B(a);
|
|
221
221
|
f.current = N(P, s), r(P);
|
|
222
222
|
}, v = w(l);
|
|
@@ -287,7 +287,7 @@ var u = /* @__PURE__ */ (function(e) {
|
|
|
287
287
|
});
|
|
288
288
|
};
|
|
289
289
|
function L(e, l, s, c) {
|
|
290
|
-
const p =
|
|
290
|
+
const p = g(e);
|
|
291
291
|
return I.map((r) => {
|
|
292
292
|
const h = l.includes(r), m = r === d.QueryResult && s.queryResults.length === 0 || r === d.ComponentProperty && s.componentOutputs.length === 0;
|
|
293
293
|
return {
|
|
@@ -298,7 +298,7 @@ function L(e, l, s, c) {
|
|
|
298
298
|
};
|
|
299
299
|
});
|
|
300
300
|
}
|
|
301
|
-
function
|
|
301
|
+
function g(e) {
|
|
302
302
|
return e.kind ?? d.DataContext;
|
|
303
303
|
}
|
|
304
304
|
function T(e) {
|
|
@@ -313,7 +313,7 @@ function T(e) {
|
|
|
313
313
|
].some((l) => l in e) ? e : void 0;
|
|
314
314
|
}
|
|
315
315
|
function A(e) {
|
|
316
|
-
switch (
|
|
316
|
+
switch (g(e)) {
|
|
317
317
|
case d.Literal:
|
|
318
318
|
return {
|
|
319
319
|
...e,
|
|
@@ -413,7 +413,7 @@ var Z = ({ onChange: e, context: l, disabled: s }) => {
|
|
|
413
413
|
const { session: c } = l;
|
|
414
414
|
if (!c) return null;
|
|
415
415
|
const { controller: p, environment: r } = c, h = J(p.document, p.composition.roots, p.context, r.availableSources, r.queryCandidates);
|
|
416
|
-
return /* @__PURE__ */ t(
|
|
416
|
+
return /* @__PURE__ */ t($, {
|
|
417
417
|
property: c.property,
|
|
418
418
|
sources: h,
|
|
419
419
|
strings: c.screenStrings,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { l as m, o as _, v as N, y } from "./structuredValue-vqCZttsk.js";
|
|
2
|
-
import { FieldEditor as C } from "./FieldEditor-
|
|
2
|
+
import { FieldEditor as C } from "./FieldEditor-Biz82jlR.js";
|
|
3
3
|
import { jsx as a, jsxs as u } from "react/jsx-runtime";
|
|
4
4
|
var p = [
|
|
5
5
|
"start",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { l as c, t as g, v as w, y as m } from "./structuredValue-vqCZttsk.js";
|
|
2
|
-
import { FieldEditor as y } from "./FieldEditor-
|
|
2
|
+
import { FieldEditor as y } from "./FieldEditor-Biz82jlR.js";
|
|
3
3
|
import { jsx as r, jsxs as u } from "react/jsx-runtime";
|
|
4
4
|
var $ = ({ value: p, onChange: b, descriptor: h, context: l, disabled: a, problem: v, id: d }) => {
|
|
5
5
|
const s = l.strings.editors.list, o = g(p).filter((i) => typeof i == "string"), e = (i) => b(i.length === 0 ? void 0 : i), f = {
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { o as h } from "./structuredValue-vqCZttsk.js";
|
|
2
|
+
import { jsx as n, jsxs as p } from "react/jsx-runtime";
|
|
3
|
+
var b = (t) => h(t) && typeof t.module == "string" && t.module !== "" ? {
|
|
4
|
+
module: t.module,
|
|
5
|
+
...typeof t.feature == "string" && t.feature !== "" ? { feature: t.feature } : {}
|
|
6
|
+
} : void 0, u = (t, o) => t?.module === o?.module && (t?.feature ?? "") === (o?.feature ?? "");
|
|
7
|
+
function f(t, o, s, d) {
|
|
8
|
+
return o.flatMap((i) => {
|
|
9
|
+
const r = s ? `${s}.${i.id}` : i.id;
|
|
10
|
+
return [{
|
|
11
|
+
key: `${t}.${r}`,
|
|
12
|
+
label: i.name,
|
|
13
|
+
depth: d,
|
|
14
|
+
target: {
|
|
15
|
+
module: t,
|
|
16
|
+
feature: r
|
|
17
|
+
},
|
|
18
|
+
module: !1,
|
|
19
|
+
owner: t
|
|
20
|
+
}, ...f(t, i.features, r, d + 1)];
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
var k = (t) => t.modules.flatMap((o) => [{
|
|
24
|
+
key: o.id,
|
|
25
|
+
label: o.name,
|
|
26
|
+
depth: 0,
|
|
27
|
+
target: { module: o.id },
|
|
28
|
+
module: !0,
|
|
29
|
+
owner: o.id
|
|
30
|
+
}, ...f(o.id, o.features, "", 1)]), _ = ({ value: t, onChange: o, context: s, disabled: d, id: i }) => {
|
|
31
|
+
const r = s.strings.editors.navigationItemTarget, g = s.lookups.structure ?? { modules: [] }, c = k(g), a = b(t), m = s.lookups.navigationModule, l = (e) => m !== void 0 && e.owner !== m, v = a !== void 0 && !c.some((e) => u(e.target, a));
|
|
32
|
+
return /* @__PURE__ */ p("div", {
|
|
33
|
+
id: i,
|
|
34
|
+
className: "studio-editor-target",
|
|
35
|
+
role: "listbox",
|
|
36
|
+
"aria-labelledby": `${i}-label`,
|
|
37
|
+
"aria-disabled": d,
|
|
38
|
+
children: [
|
|
39
|
+
/* @__PURE__ */ n("button", {
|
|
40
|
+
type: "button",
|
|
41
|
+
role: "option",
|
|
42
|
+
"aria-selected": a === void 0,
|
|
43
|
+
disabled: d,
|
|
44
|
+
className: "studio-editor-target__row",
|
|
45
|
+
"data-chosen": a === void 0 || void 0,
|
|
46
|
+
onClick: () => o(void 0),
|
|
47
|
+
children: r.notLinked
|
|
48
|
+
}),
|
|
49
|
+
c.map((e) => /* @__PURE__ */ p("button", {
|
|
50
|
+
type: "button",
|
|
51
|
+
role: "option",
|
|
52
|
+
"aria-selected": u(e.target, a),
|
|
53
|
+
"aria-disabled": l(e) || void 0,
|
|
54
|
+
disabled: d,
|
|
55
|
+
"data-module": e.module || void 0,
|
|
56
|
+
"data-chosen": u(e.target, a) || void 0,
|
|
57
|
+
className: "studio-editor-target__row",
|
|
58
|
+
title: l(e) ? r.outOfScope : void 0,
|
|
59
|
+
style: { paddingInlineStart: `${12 + e.depth * 16}px` },
|
|
60
|
+
onClick: () => {
|
|
61
|
+
l(e) || o(e.target);
|
|
62
|
+
},
|
|
63
|
+
children: [/* @__PURE__ */ n("span", { children: e.label }), e.module && /* @__PURE__ */ n("span", {
|
|
64
|
+
className: "studio-editor-target__kind",
|
|
65
|
+
children: r.module
|
|
66
|
+
})]
|
|
67
|
+
}, e.key)),
|
|
68
|
+
v && /* @__PURE__ */ n("span", {
|
|
69
|
+
className: "studio-editor-chip studio-editor-chip--error",
|
|
70
|
+
role: "alert",
|
|
71
|
+
children: r.unresolved([a.module, a.feature].filter(Boolean).join(" › "))
|
|
72
|
+
})
|
|
73
|
+
]
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
export {
|
|
77
|
+
_ as NavigationItemTargetEditor
|
|
78
|
+
};
|
package/dist/screen-editor/{NavigationTargetEditor-BZ0uQnIl.js → NavigationTargetEditor-DiGohBww.js}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { o as g } from "./structuredValue-vqCZttsk.js";
|
|
2
|
-
import { t as v } from "./SearchableSelect-
|
|
2
|
+
import { t as v } from "./SearchableSelect-Cj_cgVO0.js";
|
|
3
3
|
import { Fragment as f, jsx as l, jsxs as y } from "react/jsx-runtime";
|
|
4
4
|
var T = (o) => typeof o == "string" && o !== "" ? o : g(o) && typeof o.screen == "string" && o.screen !== "" ? o.screen : void 0, C = ({ value: o, onChange: b, descriptor: t, context: n, disabled: h, id: c }) => {
|
|
5
5
|
const r = n.strings.editors, d = n.lookups.destinations, s = T(o), a = d.find((e) => e.id === s), i = s !== void 0 && a === void 0, m = t.valueType === "destination", p = d.map((e) => ({
|
|
@@ -33,13 +33,13 @@ function A(e, r, i = r) {
|
|
|
33
33
|
}]
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
|
-
function
|
|
36
|
+
function F(e, r) {
|
|
37
37
|
return {
|
|
38
38
|
...e,
|
|
39
39
|
results: e.results.filter((i) => i.field !== r)
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
|
-
var
|
|
42
|
+
var M = (e, r) => e.arguments.find((i) => i.parameter === r.name)?.source.path ?? "", S = (e, r) => e.results.some((i) => i.field === r.name), u = /* @__PURE__ */ (function(e) {
|
|
43
43
|
return e.NoQuery = "noQuery", e.MissingQuery = "missingQuery", e.Loading = "loading", e.Empty = "empty", e.Error = "error", e.Ready = "ready", e;
|
|
44
44
|
})({});
|
|
45
45
|
function R({ binding: e, candidate: r, isLoading: i, error: s, rowCount: c }) {
|
|
@@ -103,7 +103,7 @@ var k = (e) => e.origin.map((r) => r.name).join(" / "), D = ({ property: e, cand
|
|
|
103
103
|
t && m && /* @__PURE__ */ d(I, { children: [m.parameters.length > 0 && /* @__PURE__ */ d("div", {
|
|
104
104
|
className: "studio-editor-query__group",
|
|
105
105
|
children: [/* @__PURE__ */ o("strong", { children: l.parameters }), m.parameters.map((n) => /* @__PURE__ */ d("label", { children: [/* @__PURE__ */ d("span", { children: [l.sourceFor(n.name), n.required ? " *" : ""] }), /* @__PURE__ */ d("select", {
|
|
106
|
-
value:
|
|
106
|
+
value: M(t, n),
|
|
107
107
|
onChange: (a) => p(L(t, n.name, a.target.value)),
|
|
108
108
|
children: [/* @__PURE__ */ o("option", {
|
|
109
109
|
value: "",
|
|
@@ -119,8 +119,8 @@ var k = (e) => e.origin.map((r) => r.name).join(" / "), D = ({ property: e, cand
|
|
|
119
119
|
className: "studio-editor-query__column",
|
|
120
120
|
children: [/* @__PURE__ */ o("input", {
|
|
121
121
|
type: "checkbox",
|
|
122
|
-
checked:
|
|
123
|
-
onChange: (a) => p(a.target.checked ? A(t, n.name) :
|
|
122
|
+
checked: S(t, n),
|
|
123
|
+
onChange: (a) => p(a.target.checked ? A(t, n.name) : F(t, n.name))
|
|
124
124
|
}), /* @__PURE__ */ o("span", { children: l.showColumn(n.name) })]
|
|
125
125
|
}, n.name))]
|
|
126
126
|
})] }),
|
|
@@ -153,7 +153,7 @@ function O(e, r) {
|
|
|
153
153
|
return "";
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
|
-
var
|
|
156
|
+
var G = ({ onChange: e, context: r, disabled: i }) => {
|
|
157
157
|
const { session: s } = r;
|
|
158
158
|
return s ? /* @__PURE__ */ o(D, {
|
|
159
159
|
property: s.property,
|
|
@@ -165,5 +165,5 @@ var H = ({ onChange: e, context: r, disabled: i }) => {
|
|
|
165
165
|
}) : null;
|
|
166
166
|
};
|
|
167
167
|
export {
|
|
168
|
-
|
|
168
|
+
G as QueryBindingPropertyEditor
|
|
169
169
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as h } from "./SearchableSelect-
|
|
1
|
+
import { t as h } from "./SearchableSelect-Cj_cgVO0.js";
|
|
2
2
|
import { Fragment as v, jsx as p, jsxs as g } from "react/jsx-runtime";
|
|
3
3
|
var L = ({ value: s, onChange: d, descriptor: i, context: l, disabled: u, problem: b, id: n }) => {
|
|
4
4
|
const o = l.strings.editors.select, c = i.editorOptions?.reference, m = c ? l.lookups.references(c.target) : [], r = typeof s == "string" && s !== "" ? s : void 0, t = m.map((e) => ({
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export interface DesignModeStrings {
|
|
2
2
|
toolbarLabel: (itemLabel: string) => string;
|
|
3
|
+
slotName: (slot: string) => string;
|
|
3
4
|
titleField: string;
|
|
4
5
|
notLinked: string;
|
|
5
6
|
chooseSlice: string;
|
|
@@ -12,6 +13,7 @@ export interface DesignModeStrings {
|
|
|
12
13
|
choiceLabel: (title: string) => string;
|
|
13
14
|
close: string;
|
|
14
15
|
toolbar: {
|
|
16
|
+
toolbarButton: string;
|
|
15
17
|
opensAsDialog: string;
|
|
16
18
|
dialogFromSlice: (template: string) => string;
|
|
17
19
|
dialogDefault: (template: string) => string;
|
|
@@ -42,6 +42,7 @@ export interface EditorLookups {
|
|
|
42
42
|
destinations: readonly ConfigurationDestination[];
|
|
43
43
|
slots: readonly string[];
|
|
44
44
|
structure?: ApplicationStructure;
|
|
45
|
+
navigationModule?: string;
|
|
45
46
|
queryCandidates: readonly QueryCandidate[];
|
|
46
47
|
availableSources: Readonly<Record<string, string>>;
|
|
47
48
|
fields: readonly QueryResultField[];
|
package/dist/screen-editor/ScreenEditor/PropertyEditors/Specific/NavigationItemTargetEditor.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ interface Row {
|
|
|
10
10
|
depth: number;
|
|
11
11
|
target: NavigationItemTarget;
|
|
12
12
|
module: boolean;
|
|
13
|
+
owner: string;
|
|
13
14
|
}
|
|
14
15
|
export declare const rowsOf: (structure: ApplicationStructure) => Row[];
|
|
15
16
|
export declare const NavigationItemTargetEditor: ({ value, onChange, context, disabled, id }: PropertyEditorProps<unknown>) => import("react").JSX.Element;
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { Fragment as R, useId as T, useMemo as U, useRef as V, useState as g } from "react";
|
|
2
|
+
import { jsx as l, jsxs as o } from "react/jsx-runtime";
|
|
3
|
+
function $(u, a) {
|
|
4
|
+
const r = a.trim().toLowerCase();
|
|
5
|
+
return u.filter((i) => r === "" || i.label.toLowerCase().includes(r) || (i.group ?? "").toLowerCase().includes(r));
|
|
6
|
+
}
|
|
7
|
+
var H = ({ id: u, options: a, value: r, onChange: i, disabled: b, invalid: j, placeholder: O, searchLabel: v, emptyLabel: E, clearLabel: F, clearable: I, renderClosed: y, inline: c, ...w }) => {
|
|
8
|
+
const [K, N] = g(!1), d = c === !0 || K, [h, k] = g(""), [x, m] = g(0), D = T(), C = V(null), _ = a.find((e) => e.value === r), n = U(() => $(a, h), [a, h]), s = n.filter((e) => e.disabled !== !0), p = () => {
|
|
9
|
+
c !== !0 && N(!1), k("");
|
|
10
|
+
}, M = (e) => {
|
|
11
|
+
e.disabled || (i(e.value), p());
|
|
12
|
+
}, L = (e) => {
|
|
13
|
+
if (e.key === "Escape") {
|
|
14
|
+
e.stopPropagation(), p();
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
18
|
+
if (e.preventDefault(), s.length === 0) return;
|
|
19
|
+
m((t) => (t + (e.key === "ArrowDown" ? 1 : -1) + s.length) % s.length);
|
|
20
|
+
} else if (e.key === "Enter") {
|
|
21
|
+
e.preventDefault();
|
|
22
|
+
const t = s[Math.min(x, s.length - 1)];
|
|
23
|
+
t && M(t);
|
|
24
|
+
}
|
|
25
|
+
}, f = n.some((e) => e.section !== void 0), S = (e) => f ? e.section ?? "" : e.group ?? "", q = [...new Set(n.map(S))].sort((e, t) => f ? 0 : e === "" ? -1 : t === "" ? 1 : 0), B = s[Math.min(x, Math.max(s.length - 1, 0))]?.value;
|
|
26
|
+
return /* @__PURE__ */ o("div", {
|
|
27
|
+
ref: C,
|
|
28
|
+
className: "studio-editor-select",
|
|
29
|
+
onKeyDown: d ? L : void 0,
|
|
30
|
+
onBlur: (e) => {
|
|
31
|
+
C.current?.contains(e.relatedTarget) || p();
|
|
32
|
+
},
|
|
33
|
+
children: [
|
|
34
|
+
c !== !0 && /* @__PURE__ */ l("button", {
|
|
35
|
+
type: "button",
|
|
36
|
+
id: u,
|
|
37
|
+
role: "combobox",
|
|
38
|
+
"aria-haspopup": "listbox",
|
|
39
|
+
"aria-expanded": d,
|
|
40
|
+
"aria-controls": d ? D : void 0,
|
|
41
|
+
"aria-invalid": j || void 0,
|
|
42
|
+
className: "studio-editor-select__trigger",
|
|
43
|
+
disabled: b,
|
|
44
|
+
...w,
|
|
45
|
+
onClick: () => {
|
|
46
|
+
N(!d), m(0);
|
|
47
|
+
},
|
|
48
|
+
children: y ? y(_) : /* @__PURE__ */ l("span", {
|
|
49
|
+
className: _ ? void 0 : "studio-editor-select__placeholder",
|
|
50
|
+
children: _?.label ?? O
|
|
51
|
+
})
|
|
52
|
+
}),
|
|
53
|
+
I === !0 && r !== void 0 && !b && /* @__PURE__ */ l("button", {
|
|
54
|
+
type: "button",
|
|
55
|
+
className: "studio-editor-select__clear",
|
|
56
|
+
"aria-label": F,
|
|
57
|
+
onClick: () => i(void 0),
|
|
58
|
+
children: "×"
|
|
59
|
+
}),
|
|
60
|
+
d && /* @__PURE__ */ o("div", {
|
|
61
|
+
className: `studio-editor-select__panel${c === !0 ? " studio-editor-select__panel--inline" : ""}`,
|
|
62
|
+
children: [(c !== !0 || a.length > 10) && /* @__PURE__ */ l("input", {
|
|
63
|
+
type: "search",
|
|
64
|
+
autoFocus: !0,
|
|
65
|
+
className: "studio-editor-select__search",
|
|
66
|
+
"aria-label": v,
|
|
67
|
+
placeholder: v,
|
|
68
|
+
value: h,
|
|
69
|
+
onChange: (e) => {
|
|
70
|
+
k(e.target.value), m(0);
|
|
71
|
+
}
|
|
72
|
+
}), /* @__PURE__ */ o("ul", {
|
|
73
|
+
id: D,
|
|
74
|
+
role: "listbox",
|
|
75
|
+
"aria-labelledby": w["aria-labelledby"],
|
|
76
|
+
className: "studio-editor-select__options",
|
|
77
|
+
children: [n.length === 0 && /* @__PURE__ */ l("li", {
|
|
78
|
+
className: "studio-editor-select__empty",
|
|
79
|
+
children: E
|
|
80
|
+
}), q.map((e) => /* @__PURE__ */ o("li", {
|
|
81
|
+
role: "presentation",
|
|
82
|
+
children: [e !== "" && /* @__PURE__ */ l("div", {
|
|
83
|
+
className: "studio-editor-select__group",
|
|
84
|
+
children: e
|
|
85
|
+
}), /* @__PURE__ */ l("ul", {
|
|
86
|
+
role: "presentation",
|
|
87
|
+
children: n.filter((t) => S(t) === e).map((t, A, P) => /* @__PURE__ */ o(R, { children: [f && t.group && (A === 0 || P[A - 1].group !== t.group) && /* @__PURE__ */ l("li", {
|
|
88
|
+
role: "presentation",
|
|
89
|
+
className: "studio-editor-select__subgroup",
|
|
90
|
+
children: t.group
|
|
91
|
+
}), /* @__PURE__ */ o("li", {
|
|
92
|
+
role: "option",
|
|
93
|
+
"aria-selected": t.value === r,
|
|
94
|
+
"aria-disabled": t.disabled || void 0,
|
|
95
|
+
className: [
|
|
96
|
+
"studio-editor-select__option",
|
|
97
|
+
t.value === B ? "studio-editor-select__option--active" : "",
|
|
98
|
+
t.value === r ? "studio-editor-select__option--chosen" : ""
|
|
99
|
+
].join(" ").trim(),
|
|
100
|
+
title: t.reason ?? (t.group ? t.group : void 0),
|
|
101
|
+
onMouseDown: (Q) => Q.preventDefault(),
|
|
102
|
+
onClick: () => M(t),
|
|
103
|
+
children: [/* @__PURE__ */ l("span", { children: t.label }), t.trailing !== void 0 ? /* @__PURE__ */ l("small", { children: t.trailing }) : t.disabled && t.reason && /* @__PURE__ */ l("small", { children: t.reason })]
|
|
104
|
+
})] }, t.value))
|
|
105
|
+
})]
|
|
106
|
+
}, e))]
|
|
107
|
+
})]
|
|
108
|
+
})
|
|
109
|
+
]
|
|
110
|
+
});
|
|
111
|
+
};
|
|
112
|
+
export {
|
|
113
|
+
H as t
|
|
114
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as b, t as p } from "./choiceKeys-DQcUX97p.js";
|
|
2
|
-
import { t as h } from "./SearchableSelect-
|
|
2
|
+
import { t as h } from "./SearchableSelect-Cj_cgVO0.js";
|
|
3
3
|
import { jsx as m } from "react/jsx-runtime";
|
|
4
4
|
var x = ({ value: i, onChange: c, descriptor: o, context: s, disabled: n, problem: d, id: r }) => {
|
|
5
5
|
const a = s.strings.editors.select, l = i ?? void 0, t = b(o.choices ?? [], l);
|
package/dist/screen-editor/{TemplatePropertyEditor-D_OaRTPe.js → TemplatePropertyEditor-Dx1dw5aY.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { i as b, n as v, r as k, t as g } from "./toTemplateSources-
|
|
1
|
+
import { i as b, n as v, r as k, t as g } from "./toTemplateSources-DHyjt_ff.js";
|
|
2
2
|
import { useMemo as y } from "react";
|
|
3
3
|
import { applicableTemplates as S } from "@cratis/scene.engine";
|
|
4
4
|
import { jsx as m } from "react/jsx-runtime";
|