intable 0.0.55 → 0.0.57

package/dist/components/AndOrFields.js

@@ -1,10 +1,10 @@
 import { resolveOptions } from "../utils.js";
 import { AndOr } from "./AndOr.js";
-import { className, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, template } from "solid-js/web";
+import { className, createComponent, delegateEvents, effect, insert, memo, mergeProps, setAttribute, spread, template } from "solid-js/web";
 import { Match, Switch, createMemo } from "solid-js";
-var _tmpl$ = /* @__PURE__ */ template("<select multiple>"), _tmpl$2 = /* @__PURE__ */ template("<input>"), _tmpl$3 = /* @__PURE__ */ template("<input type=number>"), _tmpl$4 = /* @__PURE__ */ template("<input type=date>"), _tmpl$5 = /* @__PURE__ */ template("<select><option value>"), _tmpl$6 = /* @__PURE__ */ template("<div class=\"flex-1 flex items-center gap-1\"><input placeholder=开始><span class=\"text-xs c-gray/70\">~</span><input placeholder=结束>"), _tmpl$7 = /* @__PURE__ */ template("<option>"), _tmpl$8 = /* @__PURE__ */ template("<div class=\"flex items-center gap-2\"><select><option value disabled>选择字段</option></select><select class=\"px-2 py-1 rounded-md border\">"), VALUE_FREE_RULES = ["blank", "noblank"];
-function isValueFreeOp(o) {
-	return VALUE_FREE_RULES.includes(o);
+var _tmpl$ = /* @__PURE__ */ template("<input>"), _tmpl$2 = /* @__PURE__ */ template("<input type=number>"), _tmpl$3 = /* @__PURE__ */ template("<input type=date>"), _tmpl$4 = /* @__PURE__ */ template("<div class=\"flex-1 flex items-center gap-1\"><input placeholder=开始><span class=\"text-xs c-gray/70\">~</span><input placeholder=结束>"), _tmpl$5 = /* @__PURE__ */ template("<div class=\"flex items-center gap-2\">"), _tmpl$6 = /* @__PURE__ */ template("<select>"), _tmpl$7 = /* @__PURE__ */ template("<option value>"), _tmpl$8 = /* @__PURE__ */ template("<option>"), VALUE_FREE_RULES = ["blank", "noblank"];
+function isValueFreeOp(c) {
+	return VALUE_FREE_RULES.includes(c);
 }
 const RULES_BY_TYPE = {
 	text: [
@@ -198,38 +198,38 @@ const RULES_BY_TYPE = {
 		}
 	]
 };
-function isBetweenOp(o) {
-	return o === "between" || o === "not_between";
+function isBetweenOp(c) {
+	return c === "between" || c === "not_between";
 }
-function isListOp(o) {
-	return o === "in" || o === "not_in";
+function isListOp(c) {
+	return c === "in" || c === "not_in";
 }
-function toPair(o) {
-	return Array.isArray(o) ? [o[0] ?? "", o[1] ?? ""] : o == null || o === "" ? ["", ""] : [o, ""];
+function toPair(c) {
+	return Array.isArray(c) ? [c[0] ?? "", c[1] ?? ""] : c == null || c === "" ? ["", ""] : [c, ""];
 }
-function toList(o) {
-	return Array.isArray(o) ? o : o == null || o === "" ? [] : String(o).split(",").map((o) => o.trim()).filter(Boolean);
+function toList(c) {
+	return Array.isArray(c) ? c : c == null || c === "" ? [] : String(c).split(",").map((c) => c.trim()).filter(Boolean);
 }
-const RuleValueEditor = (w) => {
-	let D = () => normalizeType(w.field), j = () => resolveOptions(w.enum ?? []), N = () => w.op || defaultOp(D());
+const RuleValueEditor = (O) => {
+	let j = () => normalizeType(O.field), N = () => resolveOptions(O.enum ?? []), F = () => O.op || defaultOp(j());
 	return createComponent(Switch, {
 		get fallback() {
 			return (() => {
-				var o = _tmpl$2();
-				return o.$$input = (o) => w.onChange(o.target.value), effect((E) => {
-					var D = w.class ?? "flex-1 px-2 py-1 rounded-md border", O = w.placeholder;
-					return D !== E.e && className(o, E.e = D), O !== E.t && setAttribute(o, "placeholder", E.t = O), E;
+				var c = _tmpl$();
+				return c.$$input = (c) => O.onChange(c.target.value), effect((A) => {
+					var j = O.class ?? "flex-1 px-2 py-1 rounded-md border", M = O.placeholder;
+					return j !== A.e && className(c, A.e = j), M !== A.t && setAttribute(c, "placeholder", A.t = M), A;
 				}, {
 					e: void 0,
 					t: void 0
-				}), effect(() => o.value = w.value ?? ""), o;
+				}), effect(() => c.value = O.value ?? ""), c;
 			})();
 		},
 		get children() {
 			return [
 				createComponent(Match, {
 					get when() {
-						return isValueFreeOp(w.op || defaultOp(D()));
+						return isValueFreeOp(O.op || defaultOp(j()));
 					},
 					get children() {
 						return [];
@@ -237,97 +237,101 @@ const RuleValueEditor = (w) => {
 				}),
 				createComponent(Match, {
 					get when() {
-						return isBetweenOp(N());
+						return isBetweenOp(F());
 					},
 					get children() {
 						return (() => {
-							let [o, E] = toPair(w.value), k = D() === "number" ? "number" : D() === "date" ? "date" : "text";
+							let [c, A] = toPair(O.value), N = j() === "number" ? "number" : j() === "date" ? "date" : "text";
 							return (() => {
-								var D = _tmpl$6(), A = D.firstChild, j = A.nextSibling, N = j.nextSibling;
-								return A.$$input = (o) => w.onChange([o.target.value, E ?? ""]), setAttribute(A, "type", k), A.value = o ?? "", N.$$input = (T) => w.onChange([o ?? "", T.target.value]), setAttribute(N, "type", k), N.value = E ?? "", effect((o) => {
-									var E = w.class ?? "flex-1 px-2 py-1 rounded-md border", D = w.class ?? "flex-1 px-2 py-1 rounded-md border";
-									return E !== o.e && className(A, o.e = E), D !== o.t && className(N, o.t = D), o;
+								var j = _tmpl$4(), P = j.firstChild, F = P.nextSibling, I = F.nextSibling;
+								return P.$$input = (c) => O.onChange([c.target.value, A ?? ""]), setAttribute(P, "type", N), P.value = c ?? "", I.$$input = (k) => O.onChange([c ?? "", k.target.value]), setAttribute(I, "type", N), I.value = A ?? "", effect((c) => {
+									var A = O.class ?? "flex-1 px-2 py-1 rounded-md border", j = O.class ?? "flex-1 px-2 py-1 rounded-md border";
+									return A !== c.e && className(P, c.e = A), j !== c.t && className(I, c.t = j), c;
 								}, {
 									e: void 0,
 									t: void 0
-								}), D;
+								}), j;
 							})();
 						})();
 					}
 				}),
 				createComponent(Match, {
 					get when() {
-						return memo(() => !!isListOp(N()))() && D() === "enum";
+						return memo(() => !!isListOp(F()))() && j() === "enum";
 					},
 					get children() {
-						var o = _tmpl$();
-						return o.addEventListener("change", (o) => w.onChange([...o.target.selectedOptions].map((o) => o.value))), insert(o, () => j().map((o) => (() => {
-							var w = _tmpl$7();
-							return insert(w, () => String(o.label)), effect(() => w.value = String(o.value)), w;
-						})())), effect((E) => {
-							var D = w.class ?? "flex-1 px-2 py-1 rounded-md border", O = toList(w.value).map((o) => String(o));
-							return D !== E.e && className(o, E.e = D), O !== E.t && (o.value = E.t = O), E;
-						}, {
-							e: void 0,
-							t: void 0
-						}), o;
+						return createComponent(Select, {
+							get class() {
+								return O.class ?? "flex-1 px-2 py-1 rounded-md border";
+							},
+							multiple: !0,
+							get value() {
+								return toList(O.value).map((c) => String(c));
+							},
+							onChange: (c) => O.onChange(c),
+							get options() {
+								return N();
+							}
+						});
 					}
 				}),
 				createComponent(Match, {
 					get when() {
-						return isListOp(N());
+						return isListOp(F());
 					},
 					get children() {
-						var o = _tmpl$2();
-						return o.$$input = (o) => w.onChange(toList(o.target.value)), effect((E) => {
-							var D = w.class ?? "flex-1 px-2 py-1 rounded-md border", O = w.placeholder ?? "多个值用逗号分隔";
-							return D !== E.e && className(o, E.e = D), O !== E.t && setAttribute(o, "placeholder", E.t = O), E;
+						var c = _tmpl$();
+						return c.$$input = (c) => O.onChange(toList(c.target.value)), effect((A) => {
+							var j = O.class ?? "flex-1 px-2 py-1 rounded-md border", M = O.placeholder ?? "多个值用逗号分隔";
+							return j !== A.e && className(c, A.e = j), M !== A.t && setAttribute(c, "placeholder", A.t = M), A;
 						}, {
 							e: void 0,
 							t: void 0
-						}), effect(() => o.value = toList(w.value).join(", ")), o;
+						}), effect(() => c.value = toList(O.value).join(", ")), c;
 					}
 				}),
 				createComponent(Match, {
 					get when() {
-						return D() === "number";
+						return j() === "number";
 					},
 					get children() {
-						var o = _tmpl$3();
-						return o.$$input = (o) => w.onChange(o.target.value), effect((E) => {
-							var D = w.class ?? "flex-1 px-2 py-1 rounded-md border", O = w.placeholder;
-							return D !== E.e && className(o, E.e = D), O !== E.t && setAttribute(o, "placeholder", E.t = O), E;
+						var c = _tmpl$2();
+						return c.$$input = (c) => O.onChange(c.target.value), effect((A) => {
+							var j = O.class ?? "flex-1 px-2 py-1 rounded-md border", M = O.placeholder;
+							return j !== A.e && className(c, A.e = j), M !== A.t && setAttribute(c, "placeholder", A.t = M), A;
 						}, {
 							e: void 0,
 							t: void 0
-						}), effect(() => o.value = w.value ?? ""), o;
+						}), effect(() => c.value = O.value ?? ""), c;
 					}
 				}),
 				createComponent(Match, {
 					get when() {
-						return D() === "date";
+						return j() === "date";
 					},
 					get children() {
-						var o = _tmpl$4();
-						return o.$$input = (o) => w.onChange(o.target.value), effect(() => className(o, w.class ?? "flex-1 px-2 py-1 rounded-md border")), effect(() => o.value = w.value ?? ""), o;
+						var c = _tmpl$3();
+						return c.$$input = (c) => O.onChange(c.target.value), effect(() => className(c, O.class ?? "flex-1 px-2 py-1 rounded-md border")), effect(() => c.value = O.value ?? ""), c;
 					}
 				}),
 				createComponent(Match, {
 					get when() {
-						return D() === "enum";
+						return j() === "enum";
 					},
 					get children() {
-						var o = _tmpl$5();
-						return o.firstChild, o.$$input = (o) => w.onChange(o.target.value), insert(o, () => j().map((o) => (() => {
-							var w = _tmpl$7();
-							return insert(w, () => String(o.label)), effect(() => w.value = String(o.value)), w;
-						})()), null), effect((E) => {
-							var D = w.class ?? "flex-1 px-2 py-1 rounded-md border", O = w.value ?? "";
-							return D !== E.e && className(o, E.e = D), O !== E.t && (o.value = E.t = O), E;
-						}, {
-							e: void 0,
-							t: void 0
-						}), o;
+						return createComponent(Select, {
+							get class() {
+								return O.class ?? "flex-1 px-2 py-1 rounded-md border";
+							},
+							get value() {
+								return O.value ?? "";
+							},
+							onChange: (c) => O.onChange(c),
+							get options() {
+								return N();
+							},
+							clearable: !0
+						});
 					}
 				}),
 				createComponent(Match, {
@@ -336,89 +340,126 @@ const RuleValueEditor = (w) => {
 							"checkbox",
 							"switch",
 							"boolean"
-						].includes(D());
+						].includes(j());
 					},
 					get children() {
-						var o = _tmpl$5();
-						return o.firstChild, o.$$input = (o) => w.onChange(o.target.value), insert(o, () => [!0, !1].map((o) => (() => {
-							var w = _tmpl$7();
-							return insert(w, () => String(o)), effect(() => w.value = String(o)), w;
-						})()), null), effect((E) => {
-							var D = w.class ?? "flex-1 px-2 py-1 rounded-md border", O = w.value ?? "";
-							return D !== E.e && className(o, E.e = D), O !== E.t && (o.value = E.t = O), E;
-						}, {
-							e: void 0,
-							t: void 0
-						}), o;
+						return createComponent(Select, {
+							get class() {
+								return O.class ?? "flex-1 px-2 py-1 rounded-md border";
+							},
+							get value() {
+								return O.value ?? "";
+							},
+							onChange: (c) => O.onChange(c),
+							options: [{
+								label: "true",
+								value: "true"
+							}, {
+								label: "false",
+								value: "false"
+							}],
+							clearable: !0
+						});
 					}
 				})
 			];
 		}
 	});
 };
-function normalizeType(o) {
-	return o?.enum ? "enum" : o?.type ?? "text";
+function normalizeType(c) {
+	return c?.enum ? "enum" : c?.type ?? "text";
 }
-function defaultOp(o) {
-	return RULES_BY_TYPE[o]?.[0]?.value;
+function defaultOp(c) {
+	return RULES_BY_TYPE[c]?.[0]?.value;
 }
-function newRule(o, w) {
-	let T = normalizeType(o), E = defaultOp(T);
+function newRule(c, O) {
+	let k = normalizeType(c), A = defaultOp(k);
 	return {
-		field: o.id,
-		op: E,
-		value: VALUE_FREE_RULES.includes(E) ? null : "",
-		...w
+		field: c.id,
+		op: A,
+		value: VALUE_FREE_RULES.includes(A) ? null : "",
+		...O
 	};
 }
-function normalizeValueByOp(o, w) {
-	return VALUE_FREE_RULES.includes(o) ? null : isBetweenOp(o) ? toPair(w) : isListOp(o) ? toList(w) : w ?? "";
+function normalizeValueByOp(c, O) {
+	return VALUE_FREE_RULES.includes(c) ? null : isBetweenOp(c) ? toPair(O) : isListOp(c) ? toList(O) : O ?? "";
 }
-const AndOrFields = (o) => createComponent(AndOr, mergeProps(o, { renderRule: (w) => {
-	let D = createMemo(() => o.fields.find((o) => o.id === w.node.field)), A = createMemo(() => normalizeType(D())), j = createMemo(() => RULES_BY_TYPE[A()]);
+const AndOrFields = (c) => createComponent(AndOr, mergeProps(c, { renderRule: (O) => {
+	let k = createMemo(() => c.fields.find((c) => c.id === O.node.field)), j = createMemo(() => normalizeType(k())), M = createMemo(() => RULES_BY_TYPE[j()]);
 	return (() => {
-		var M = _tmpl$8(), N = M.firstChild;
-		N.firstChild;
-		var P = N.nextSibling;
-		return N.$$input = (T) => {
-			let E = T.target.value, D = o.fields.find((o) => o.id === E);
-			w.update(newRule(D, { field: E }));
-		}, insert(N, () => o.fields.map((o) => (() => {
-			var w = _tmpl$7();
-			return insert(w, () => o.name), effect(() => w.value = o.id), w;
-		})()), null), P.$$input = (o) => {
-			let T = o.target.value;
-			w.update({
-				op: T,
-				value: normalizeValueByOp(T, w.node.value)
-			});
-		}, insert(P, () => j().map((o) => (() => {
-			var w = _tmpl$7();
-			return insert(w, () => o.label), effect(() => w.value = o.value), w;
-		})())), insert(M, createComponent(RuleValueEditor, {
+		var P = _tmpl$5();
+		return insert(P, createComponent(Select, {
+			get class() {
+				return `px-2 py-1 rounded-md border ${c.hideFields ? "hidden" : ""}`;
+			},
+			get value() {
+				return O.node.field;
+			},
+			onChange: (k) => {
+				let A = c.fields.find((c) => c.id === k);
+				O.update(newRule(A, { field: k }));
+			},
+			get options() {
+				return c.fields.map((c) => ({
+					label: c.name ?? c.id,
+					value: c.id
+				}));
+			},
+			placeholder: "选择字段"
+		}), null), insert(P, createComponent(Select, {
+			class: "px-2 py-1 rounded-md border",
+			get value() {
+				return O.node.op || defaultOp(j());
+			},
+			onChange: (c) => {
+				O.update({
+					op: c,
+					value: normalizeValueByOp(c, O.node.value)
+				});
+			},
+			get options() {
+				return M();
+			}
+		}), null), insert(P, createComponent(RuleValueEditor, {
 			get field() {
-				return D();
+				return k();
 			},
 			get op() {
-				return w.node.op;
+				return O.node.op;
 			},
 			get value() {
-				return w.node.value;
+				return O.node.value;
 			},
 			get enum() {
-				return D()?.enum;
+				return k()?.enum;
 			},
 			class: "flex-1 px-2 py-1 rounded-md border",
-			onChange: (o) => w.update({ value: o })
-		}), null), effect((E) => {
-			var D = `px-2 py-1 rounded-md border ${o.hideFields ? "hidden" : ""}`, O = w.node.field, k = w.node.op || defaultOp(A());
-			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;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		}), M;
+			onChange: (c) => O.update({ value: c })
+		}), null), P;
 	})();
 } }));
+var Select = (c) => (() => {
+	var O = _tmpl$6();
+	return spread(O, mergeProps(c, {
+		options: null,
+		clearable: null,
+		get class() {
+			return c.class ?? "flex-1 px-2 py-1 rounded-md border";
+		},
+		onChange: (O) => {
+			let k = O.target;
+			c.onChange?.(k.multiple ? [...k.selectedOptions].map((c) => c.value) : k.value);
+		}
+	}), !1, !0), insert(O, (() => {
+		var O = memo(() => !!(c.clearable || c.placeholder));
+		return () => O() && (() => {
+			var O = _tmpl$7();
+			return insert(O, () => c.placeholder), effect(() => O.disabled = !c.clearable), O;
+		})();
+	})(), null), insert(O, () => c.options?.map((O) => (() => {
+		var k = _tmpl$8();
+		return insert(k, () => O.label), effect(() => k.selected = O.value === c.value), effect(() => k.value = O.value), k;
+	})()), null), effect(() => O.value = c.value), O;
+})();
 delegateEvents(["input"]);
 export { AndOrFields, RULES_BY_TYPE, RuleValueEditor, isValueFreeOp, newRule, normalizeType };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intable",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "license": "MIT",
   "type": "module",
   "files": [