intable 0.0.53 → 0.0.55
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/components/AndOrFields.js +29 -4
- package/dist/plugins/EditablePlugin.js +102 -99
- package/dist/plugins/RenderPlugin/components.js +1 -1
- package/dist/plugins/RenderPlugin/index.d.ts +1 -2
- package/dist/plugins/RenderPlugin/index.js +19 -22
- package/dist/plugins/TreePlugin.js +2 -2
- package/package.json +1 -1
|
@@ -264,7 +264,13 @@ const RuleValueEditor = (w) => {
|
|
|
264
264
|
return o.addEventListener("change", (o) => w.onChange([...o.target.selectedOptions].map((o) => o.value))), insert(o, () => j().map((o) => (() => {
|
|
265
265
|
var w = _tmpl$7();
|
|
266
266
|
return insert(w, () => String(o.label)), effect(() => w.value = String(o.value)), w;
|
|
267
|
-
})())), effect(() =>
|
|
267
|
+
})())), effect((E) => {
|
|
268
|
+
var D = w.class ?? "flex-1 px-2 py-1 rounded-md border", O = toList(w.value).map((o) => String(o));
|
|
269
|
+
return D !== E.e && className(o, E.e = D), O !== E.t && (o.value = E.t = O), E;
|
|
270
|
+
}, {
|
|
271
|
+
e: void 0,
|
|
272
|
+
t: void 0
|
|
273
|
+
}), o;
|
|
268
274
|
}
|
|
269
275
|
}),
|
|
270
276
|
createComponent(Match, {
|
|
@@ -315,7 +321,13 @@ const RuleValueEditor = (w) => {
|
|
|
315
321
|
return o.firstChild, o.$$input = (o) => w.onChange(o.target.value), insert(o, () => j().map((o) => (() => {
|
|
316
322
|
var w = _tmpl$7();
|
|
317
323
|
return insert(w, () => String(o.label)), effect(() => w.value = String(o.value)), w;
|
|
318
|
-
})()), null), effect(() =>
|
|
324
|
+
})()), null), effect((E) => {
|
|
325
|
+
var D = w.class ?? "flex-1 px-2 py-1 rounded-md border", O = w.value ?? "";
|
|
326
|
+
return D !== E.e && className(o, E.e = D), O !== E.t && (o.value = E.t = O), E;
|
|
327
|
+
}, {
|
|
328
|
+
e: void 0,
|
|
329
|
+
t: void 0
|
|
330
|
+
}), o;
|
|
319
331
|
}
|
|
320
332
|
}),
|
|
321
333
|
createComponent(Match, {
|
|
@@ -331,7 +343,13 @@ const RuleValueEditor = (w) => {
|
|
|
331
343
|
return o.firstChild, o.$$input = (o) => w.onChange(o.target.value), insert(o, () => [!0, !1].map((o) => (() => {
|
|
332
344
|
var w = _tmpl$7();
|
|
333
345
|
return insert(w, () => String(o)), effect(() => w.value = String(o)), w;
|
|
334
|
-
})()), null), effect(() =>
|
|
346
|
+
})()), null), effect((E) => {
|
|
347
|
+
var D = w.class ?? "flex-1 px-2 py-1 rounded-md border", O = w.value ?? "";
|
|
348
|
+
return D !== E.e && className(o, E.e = D), O !== E.t && (o.value = E.t = O), E;
|
|
349
|
+
}, {
|
|
350
|
+
e: void 0,
|
|
351
|
+
t: void 0
|
|
352
|
+
}), o;
|
|
335
353
|
}
|
|
336
354
|
})
|
|
337
355
|
];
|
|
@@ -392,7 +410,14 @@ const AndOrFields = (o) => createComponent(AndOr, mergeProps(o, { renderRule: (w
|
|
|
392
410
|
},
|
|
393
411
|
class: "flex-1 px-2 py-1 rounded-md border",
|
|
394
412
|
onChange: (o) => w.update({ value: o })
|
|
395
|
-
}), null), effect(() =>
|
|
413
|
+
}), null), effect((E) => {
|
|
414
|
+
var D = `px-2 py-1 rounded-md border ${o.hideFields ? "hidden" : ""}`, O = w.node.field, k = w.node.op || defaultOp(A());
|
|
415
|
+
return D !== E.e && className(N, E.e = D), O !== E.t && (N.value = E.t = O), k !== E.a && (P.value = E.a = k), E;
|
|
416
|
+
}, {
|
|
417
|
+
e: void 0,
|
|
418
|
+
t: void 0,
|
|
419
|
+
a: void 0
|
|
420
|
+
}), M;
|
|
396
421
|
})();
|
|
397
422
|
} }));
|
|
398
423
|
delegateEvents(["input"]);
|
|
@@ -13,106 +13,109 @@ const EditablePlugin = {
|
|
|
13
13
|
name: "editable",
|
|
14
14
|
store: () => ({ editors: { ...editors } }),
|
|
15
15
|
rewriteProps: {
|
|
16
|
-
editable: ({ editable: e }, { store:
|
|
17
|
-
let
|
|
18
|
-
return !!
|
|
16
|
+
editable: ({ editable: e }, { store: _ }) => (y) => {
|
|
17
|
+
let b = [y.col.editable, e].filter((e) => e != null);
|
|
18
|
+
return !!b.length && b.every((e) => unFn(e, y)) && !y.data[_.internal] && !y.col[_.internal];
|
|
19
19
|
},
|
|
20
|
-
Td: ({ Td: e }, { store:
|
|
21
|
-
let
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
col:
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
20
|
+
Td: ({ Td: e }, { store: _ }) => (b) => {
|
|
21
|
+
let x, { props: S } = useContext(Ctx), E = () => unFn(S.editable, b);
|
|
22
|
+
return createMemo(() => E() ? unFn(() => {
|
|
23
|
+
let v = "", [C, D] = createSignal(!1), k = () => (([e, _]) => b.x == e && b.y == _)(_.selected.start || []), A = () => E() && !C() && k(), [M, N] = createSignal(!1), P = createAsyncMemo(() => {
|
|
24
|
+
if (C()) {
|
|
25
|
+
let e = createMemo(() => JSON.stringify(_.selected ?? "{}"));
|
|
26
|
+
createEffect(on(e, () => D(!1), { defer: !0 })), L.w = x.getBoundingClientRect().width, L.h = x.getBoundingClientRect().height;
|
|
27
|
+
let y = !1, w = b.data[b.col.id], T = ((e) => typeof e == "string" ? _.editors[e] : e)(b.col.editor ?? b.col.type ?? (b.col.enum ? "select" : "text")), E = {
|
|
28
|
+
props: b.col.editorProps,
|
|
29
|
+
col: b.col,
|
|
30
|
+
eventKey: v,
|
|
31
|
+
data: b.data,
|
|
32
|
+
value: w,
|
|
33
|
+
ok: async () => {
|
|
34
|
+
await F(O.getValue()), D(!1);
|
|
35
|
+
},
|
|
36
|
+
cancel: () => (y = !0, D(!1)),
|
|
37
|
+
onChange: (e) => C() && F(e).catch(() => {})
|
|
38
|
+
}, O = T(E);
|
|
39
|
+
return queueMicrotask(() => O.focus?.()), onCleanup(() => {
|
|
40
|
+
!y && O.getValue() !== w && _.commands.rowChange({
|
|
41
|
+
...S.data[b.y],
|
|
42
|
+
[b.col.id]: O.getValue()
|
|
43
|
+
}), y || F(O.getValue()).catch(() => {}), v = "", O.destroy();
|
|
44
|
+
}), [E, O];
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
async function F(e) {
|
|
48
|
+
try {
|
|
49
|
+
N(!0), await _.validateCell(e, b.data, b.col);
|
|
50
|
+
} finally {
|
|
51
|
+
N(!1);
|
|
52
|
+
}
|
|
43
53
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}, e.$$keydown = (e) => {
|
|
83
|
-
e.key == " " && e.preventDefault();
|
|
84
|
-
}, use((e) => {
|
|
85
|
-
I = e, delay(0).then(() => e.focus({ preventScroll: !0 }));
|
|
86
|
-
}, e), e;
|
|
87
|
-
})())];
|
|
88
|
-
} }));
|
|
54
|
+
let I, L = createMutable({
|
|
55
|
+
w: 0,
|
|
56
|
+
h: 0
|
|
57
|
+
}), R = mergeProps$2(b, {
|
|
58
|
+
ref: (e) => (x = e, b.ref?.(e)),
|
|
59
|
+
get class() {
|
|
60
|
+
return [C() ? "is-editing" : "", b.class].filter(Boolean).join(" ");
|
|
61
|
+
},
|
|
62
|
+
get style() {
|
|
63
|
+
return [C() ? `width: ${L.w}px; height: ${L.h}px; padding: 0; ` : "", b.style].filter(Boolean).join(" ");
|
|
64
|
+
},
|
|
65
|
+
onClick: (e) => (I?.focus?.(), b.onClick?.(e)),
|
|
66
|
+
onDblClick: (e) => (D(E()), b.onDblClick?.(e)),
|
|
67
|
+
onKeyDown: (e) => (e.key == "Escape" && P()?.[0].cancel(), b.onKeyDown?.(e))
|
|
68
|
+
});
|
|
69
|
+
return createComponent(e, mergeProps$2(R, { get children() {
|
|
70
|
+
return [() => P()?.[1]?.el ? (() => {
|
|
71
|
+
var e = _tmpl$();
|
|
72
|
+
return addEventListener(e, "keydown", (e) => {
|
|
73
|
+
e.stopPropagation(), e.key == "Enter" && !e.shiftKey && (P()?.[0].ok(), e.preventDefault()), e.key == "Escape" && P()?.[0].cancel();
|
|
74
|
+
}), addEventListener(e, "pointerdown", (e) => e.stopPropagation()), insert(e, () => P()?.[1]?.el, null), insert(e, (() => {
|
|
75
|
+
var e = memo(() => !!M());
|
|
76
|
+
return () => e() && _tmpl$2();
|
|
77
|
+
})(), null), e;
|
|
78
|
+
})() : b.children, () => A() && (() => {
|
|
79
|
+
var e = _tmpl$3();
|
|
80
|
+
return e.addEventListener("compositionend", () => {
|
|
81
|
+
D(!0);
|
|
82
|
+
}), e.$$input = (e) => {
|
|
83
|
+
v = e.target.value, D(!e.isComposing);
|
|
84
|
+
}, e.$$keydown = (e) => {
|
|
85
|
+
e.key == " " && e.preventDefault();
|
|
86
|
+
}, use((e) => {
|
|
87
|
+
I = e, delay(0).then(() => e.focus({ preventScroll: !0 }));
|
|
88
|
+
}, e), e;
|
|
89
|
+
})()];
|
|
90
|
+
} }));
|
|
91
|
+
}) : createComponent(e, b));
|
|
89
92
|
}
|
|
90
93
|
}
|
|
91
94
|
};
|
|
92
|
-
var createEditor = (e,
|
|
93
|
-
let [
|
|
95
|
+
var createEditor = (e, v, b) => ({ eventKey: x, value: S, col: C, ok: w, cancel: E, props: D, onChange: O }) => createRoot((E) => {
|
|
96
|
+
let [k, A] = createSignal(x || S), j;
|
|
94
97
|
return createComponent(e, mergeProps$2({
|
|
95
|
-
ref: (e) =>
|
|
98
|
+
ref: (e) => j = e,
|
|
96
99
|
class: "relative block px-2 size-full z-9 box-border resize-none outline-0",
|
|
97
100
|
get value() {
|
|
98
|
-
return
|
|
101
|
+
return k();
|
|
99
102
|
},
|
|
100
|
-
onInput: (e) => (
|
|
101
|
-
onChange: (e) => (
|
|
103
|
+
onInput: (e) => (A(e instanceof Event ? e.target.value : e), O?.(k())),
|
|
104
|
+
onChange: (e) => (A(e instanceof Event ? e.target.value : e), O?.(k()), b && w()),
|
|
102
105
|
get options() {
|
|
103
|
-
return memo(() => !!
|
|
106
|
+
return memo(() => !!C.enum)() ? resolveOptions(C.enum ?? []) : void 0;
|
|
104
107
|
}
|
|
105
|
-
},
|
|
106
|
-
|
|
108
|
+
}, v, D)), setTimeout(() => {
|
|
109
|
+
b && j?.showPicker?.();
|
|
107
110
|
}, 0), {
|
|
108
|
-
el:
|
|
109
|
-
getValue:
|
|
110
|
-
focus: () =>
|
|
111
|
-
destroy:
|
|
111
|
+
el: j,
|
|
112
|
+
getValue: k,
|
|
113
|
+
focus: () => j.focus(),
|
|
114
|
+
destroy: E
|
|
112
115
|
};
|
|
113
116
|
}), Input = (e) => (() => {
|
|
114
|
-
var
|
|
115
|
-
return spread(
|
|
117
|
+
var _ = _tmpl$4();
|
|
118
|
+
return spread(_, e, !1, !1), _;
|
|
116
119
|
})();
|
|
117
120
|
const editors = {
|
|
118
121
|
text: createEditor(Input),
|
|
@@ -130,30 +133,30 @@ const editors = {
|
|
|
130
133
|
color: createEditor(Input, { type: "color" }),
|
|
131
134
|
tel: createEditor(Input, { type: "tel" }),
|
|
132
135
|
password: createEditor(Input, { type: "password" }),
|
|
133
|
-
file: createEditor((
|
|
136
|
+
file: createEditor((_) => createComponent(Files, mergeProps$2(_, {
|
|
134
137
|
class: "relative z-9 outline-2 outline-blue min-h-a! h-a! p-1 bg-#fff",
|
|
135
|
-
onAdd: () => chooseFile({ multiple: !0 }).then((e) =>
|
|
138
|
+
onAdd: () => chooseFile({ multiple: !0 }).then((e) => _.onChange([..._.value || [], ...e.map((e) => ({
|
|
136
139
|
name: e.name,
|
|
137
140
|
size: e.size
|
|
138
141
|
}))]))
|
|
139
142
|
}))),
|
|
140
143
|
checkbox: createEditor((e) => (() => {
|
|
141
|
-
var
|
|
142
|
-
return typeof
|
|
144
|
+
var _ = _tmpl$5(), v = e.ref;
|
|
145
|
+
return typeof v == "function" ? use(v, _) : e.ref = _, insert(_, createComponent(Checkbox, mergeProps$2(e, {
|
|
143
146
|
ref: () => {},
|
|
144
147
|
onInput: () => {},
|
|
145
148
|
class: "mx-3!"
|
|
146
|
-
}))),
|
|
149
|
+
}))), _;
|
|
147
150
|
})()),
|
|
148
151
|
select: createEditor((e) => (() => {
|
|
149
|
-
var
|
|
150
|
-
return spread(
|
|
151
|
-
var
|
|
152
|
-
return () =>
|
|
153
|
-
})(), null), insert(
|
|
154
|
-
var
|
|
155
|
-
return insert(
|
|
156
|
-
})()), null),
|
|
152
|
+
var _ = _tmpl$6();
|
|
153
|
+
return spread(_, e, !1, !0), insert(_, (() => {
|
|
154
|
+
var _ = memo(() => !e.multiple);
|
|
155
|
+
return () => _() && _tmpl$7();
|
|
156
|
+
})(), null), insert(_, () => e.options?.map((e) => (() => {
|
|
157
|
+
var _ = _tmpl$8();
|
|
158
|
+
return insert(_, () => e.label), effect(() => _.value = e.value), _;
|
|
159
|
+
})()), null), effect(() => _.value = e.value), _;
|
|
157
160
|
})(), {}, !0)
|
|
158
161
|
};
|
|
159
162
|
delegateEvents(["keydown", "input"]);
|
|
@@ -162,7 +162,7 @@ const Checkbox = (e) => {
|
|
|
162
162
|
archived: "#9ca3af"
|
|
163
163
|
};
|
|
164
164
|
var stringToColor = (e) => {
|
|
165
|
-
if (text2colorMap[e]) return text2colorMap[e];
|
|
165
|
+
if (e = e.trim().toLowerCase(), text2colorMap[e]) return text2colorMap[e];
|
|
166
166
|
let m = 0;
|
|
167
167
|
for (let h = 0; h < e.length; h++) m = (m << 5) - m + e.charCodeAt(h) | 0;
|
|
168
168
|
return `hsl(${Math.abs(m * 137) % 360} 55% 40%)`;
|
|
@@ -9,35 +9,32 @@ const RenderPlugin = {
|
|
|
9
9
|
name: "render",
|
|
10
10
|
priority: -Infinity,
|
|
11
11
|
store: () => ({ renders: { ...renders } }),
|
|
12
|
-
rewriteProps: { Td: ({ Td:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
});
|
|
17
|
-
} }))) }
|
|
12
|
+
rewriteProps: { Td: ({ Td: h }, { store: g }) => (_) => (g.props.cpu && (_ = mergeProps$2(() => ({}), _)), createComponent(h, mergeProps$2(_, { children: createMemo(() => {
|
|
13
|
+
let h = ((e) => typeof e == "string" ? g.renders[e] : e)(_.col.render ?? (_.col.enum && text) ?? _.col.type) ?? text;
|
|
14
|
+
return h == text ? text(_) : renderComponent(h, _, g);
|
|
15
|
+
}) }))) }
|
|
18
16
|
};
|
|
19
17
|
var text = (e) => e.col.enum ? createComponent(Tags, {
|
|
20
18
|
disabled: !0,
|
|
21
19
|
get value() {
|
|
22
|
-
return toArr(e.value).map((
|
|
20
|
+
return toArr(e.value).map((h) => getOpt(e.col.enum, h) ?? h);
|
|
23
21
|
}
|
|
24
|
-
}) : e.value
|
|
22
|
+
}) : e.value, checkbox = (e) => (() => {
|
|
23
|
+
var h = _tmpl$();
|
|
24
|
+
return insert(h, createComponent(Checkbox, {
|
|
25
|
+
class: "",
|
|
26
|
+
get value() {
|
|
27
|
+
return e.value;
|
|
28
|
+
},
|
|
29
|
+
get onChange() {
|
|
30
|
+
return e.onChange;
|
|
31
|
+
}
|
|
32
|
+
})), h;
|
|
33
|
+
})();
|
|
25
34
|
const renders = {
|
|
26
35
|
text,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
checkbox: (e) => (() => {
|
|
30
|
-
var m = _tmpl$();
|
|
31
|
-
return insert(m, createComponent(Checkbox, {
|
|
32
|
-
class: "",
|
|
33
|
-
get value() {
|
|
34
|
-
return e.value;
|
|
35
|
-
},
|
|
36
|
-
get onChange() {
|
|
37
|
-
return e.onChange;
|
|
38
|
-
}
|
|
39
|
-
})), m;
|
|
40
|
-
})(),
|
|
36
|
+
switch: checkbox,
|
|
37
|
+
checkbox,
|
|
41
38
|
file: (e) => createComponent(Files, {
|
|
42
39
|
get value() {
|
|
43
40
|
return e.value;
|
|
@@ -37,7 +37,7 @@ const TreePlugin = (c) => {
|
|
|
37
37
|
let n = t.props.tree.children || "children", r = t.props.rowKey, { flat: i, meta: a } = flattenTree(e, n, r, (e) => t.tree.has(e));
|
|
38
38
|
return t._treeMeta = a, t._haschildren = Object.values(Object.fromEntries(a)).some((e) => e.hasChildren), i;
|
|
39
39
|
},
|
|
40
|
-
Td: ({ Td: t }, { store: c }) => (l) => {
|
|
40
|
+
Td: ({ Td: t }, { store: c }) => c._haschildren ? (l) => {
|
|
41
41
|
let f = () => c.props.rowKey, m = () => c._treeMeta?.get(l.data?.[f()]);
|
|
42
42
|
return createComponent(t, mergeProps$1(l, {
|
|
43
43
|
onDblClick: (e) => {
|
|
@@ -61,7 +61,7 @@ const TreePlugin = (c) => {
|
|
|
61
61
|
})() : l.children;
|
|
62
62
|
}
|
|
63
63
|
}));
|
|
64
|
-
}
|
|
64
|
+
} : t
|
|
65
65
|
},
|
|
66
66
|
commands: (e, { addRows: t }) => ({ addRows(n, r, i = !0) {
|
|
67
67
|
if (!e.props?.tree) return t?.(n, r, i);
|