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.
@@ -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(() => className(o, w.class ?? "flex-1 px-2 py-1 rounded-md border")), effect(() => o.value = toList(w.value).map((o) => String(o))), o;
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(() => className(o, w.class ?? "flex-1 px-2 py-1 rounded-md border")), effect(() => o.value = w.value ?? ""), o;
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(() => className(o, w.class ?? "flex-1 px-2 py-1 rounded-md border")), effect(() => o.value = w.value ?? ""), o;
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(() => className(N, `px-2 py-1 rounded-md border ${o.hideFields ? "hidden" : ""}`)), effect(() => N.value = w.node.field), effect(() => P.value = w.node.op || defaultOp(A())), M;
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: h }) => (_) => {
17
- let v = [_.col.editable, e].filter((e) => e != null);
18
- return !!v.length && v.every((e) => unFn(e, _)) && !_.data[h.internal] && !_.col[h.internal];
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: h }) => (v) => {
21
- let y, { props: b } = useContext(Ctx), [w, T] = createSignal(!1), D = "", O = () => unFn(b.editable, v), A = () => (([e, h]) => v.x == e && v.y == h)(h.selected.start || []), j = () => A() && O() && !w(), [M, N] = createSignal(!1), P = createAsyncMemo(() => {
22
- if (w()) {
23
- let e = createMemo(() => JSON.stringify(h.selected ?? "{}"));
24
- createEffect(on(e, () => T(!1), { defer: !0 })), L.w = y.getBoundingClientRect().width, L.h = y.getBoundingClientRect().height;
25
- let g = !1, _ = v.data[v.col.id], x = ((e) => typeof e == "string" ? h.editors[e] : e)(v.col.editor ?? v.col.type ?? (v.col.enum ? "select" : "text")), S = {
26
- props: v.col.editorProps,
27
- col: v.col,
28
- eventKey: D,
29
- data: v.data,
30
- value: _,
31
- ok: async () => {
32
- await F(C.getValue()), T(!1);
33
- },
34
- cancel: () => (g = !0, T(!1)),
35
- onChange: (e) => w() && F(e).catch(() => {})
36
- }, C = x(S);
37
- return queueMicrotask(() => C.focus?.()), onCleanup(() => {
38
- !g && C.getValue() !== _ && h.commands.rowChange({
39
- ...b.data[v.y],
40
- [v.col.id]: C.getValue()
41
- }), g || F(C.getValue()).catch(() => {}), D = "", C.destroy();
42
- }), [S, C];
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
- async function F(e) {
46
- try {
47
- N(!0), await h.validateCell(e, v.data, v.col);
48
- } finally {
49
- N(!1);
50
- }
51
- }
52
- let I, L = createMutable({
53
- w: 0,
54
- h: 0
55
- }), R = mergeProps$2(v, {
56
- ref: (e) => (y = e, v.ref?.(e)),
57
- get class() {
58
- return [w() ? "is-editing" : "", v.class].filter(Boolean).join(" ");
59
- },
60
- get style() {
61
- return [w() ? `width: ${L.w}px; height: ${L.h}px; padding: 0; ` : "", v.style].filter(Boolean).join(" ");
62
- },
63
- onClick: (e) => (I?.focus?.(), v.onClick?.(e)),
64
- onDblClick: (e) => (T(O()), v.onDblClick?.(e)),
65
- onKeyDown: (e) => (e.key == "Escape" && P()?.[0].cancel(), v.onKeyDown?.(e))
66
- });
67
- return createComponent(e, mergeProps$2(R, { get children() {
68
- return [memo(() => memo(() => !!P()?.[1]?.el)() ? (() => {
69
- var e = _tmpl$();
70
- return addEventListener(e, "keydown", (e) => {
71
- e.stopPropagation(), e.key == "Enter" && !e.shiftKey && (P()?.[0].ok(), e.preventDefault()), e.key == "Escape" && P()?.[0].cancel();
72
- }), addEventListener(e, "pointerdown", (e) => e.stopPropagation()), insert(e, () => P()?.[1]?.el, null), insert(e, (() => {
73
- var e = memo(() => !!M());
74
- return () => e() && _tmpl$2();
75
- })(), null), e;
76
- })() : v.children), memo(() => memo(() => !!j())() && (() => {
77
- var e = _tmpl$3();
78
- return e.addEventListener("compositionend", () => {
79
- T(!0);
80
- }), e.$$input = (e) => {
81
- D = e.target.value, T(!e.isComposing);
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, g, v) => ({ eventKey: y, value: b, col: x, ok: S, cancel: w, props: T, onChange: E }) => createRoot((w) => {
93
- let [D, O] = createSignal(y || b), k;
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) => k = 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 D();
101
+ return k();
99
102
  },
100
- onInput: (e) => (O(e instanceof Event ? e.target.value : e), E?.(D())),
101
- onChange: (e) => (O(e instanceof Event ? e.target.value : e), E?.(D()), v && S()),
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(() => !!x.enum)() ? resolveOptions(x.enum ?? []) : void 0;
106
+ return memo(() => !!C.enum)() ? resolveOptions(C.enum ?? []) : void 0;
104
107
  }
105
- }, g, T)), setTimeout(() => {
106
- v && k?.showPicker?.();
108
+ }, v, D)), setTimeout(() => {
109
+ b && j?.showPicker?.();
107
110
  }, 0), {
108
- el: k,
109
- getValue: D,
110
- focus: () => k.focus(),
111
- destroy: w
111
+ el: j,
112
+ getValue: k,
113
+ focus: () => j.focus(),
114
+ destroy: E
112
115
  };
113
116
  }), Input = (e) => (() => {
114
- var h = _tmpl$4();
115
- return spread(h, e, !1, !1), h;
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((h) => createComponent(Files, mergeProps$2(h, {
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) => h.onChange([...h.value || [], ...e.map((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 h = _tmpl$5(), g = e.ref;
142
- return typeof g == "function" ? use(g, h) : e.ref = h, insert(h, createComponent(Checkbox, mergeProps$2(e, {
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
- }))), h;
149
+ }))), _;
147
150
  })()),
148
151
  select: createEditor((e) => (() => {
149
- var h = _tmpl$6();
150
- return spread(h, e, !1, !0), insert(h, (() => {
151
- var h = memo(() => !e.multiple);
152
- return () => h() && _tmpl$7();
153
- })(), null), insert(h, () => e.options?.map((h) => (() => {
154
- var g = _tmpl$8();
155
- return insert(g, () => h.label), effect(() => g.selected = h.value === e.value), effect(() => g.value = h.value), g;
156
- })()), null), h;
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%)`;
@@ -23,8 +23,7 @@ export declare const RenderPlugin: Plugin;
23
23
  export { text2colorMap } from './components';
24
24
  export declare const renders: {
25
25
  text: Render;
26
- number: Render;
27
- date: Render;
26
+ switch: Render;
28
27
  checkbox: Render;
29
28
  file: Render;
30
29
  };
@@ -9,35 +9,32 @@ const RenderPlugin = {
9
9
  name: "render",
10
10
  priority: -Infinity,
11
11
  store: () => ({ renders: { ...renders } }),
12
- rewriteProps: { Td: ({ Td: m }, { store: h }) => (g) => (h.props.cpu && (g = mergeProps$2(() => ({}), g)), createComponent(m, mergeProps$2(g, { get children() {
13
- return createMemo(() => {
14
- let m = ((e) => typeof e == "string" ? h.renders[e] : e)(g.col.render ?? g.col.type ?? text);
15
- return m == text ? text(g) : renderComponent(m, g, h);
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((m) => getOpt(e.col.enum, m));
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
- number: text,
28
- date: text,
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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intable",
3
- "version": "0.0.53",
3
+ "version": "0.0.55",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "files": [