@plitzi/plitzi-ui 1.6.2

package/dist/components/QueryBuilder/QueryBuilderProvider.js

@@ -0,0 +1,109 @@
+import { get as e } from "../../helpers/lodash/get.js";
+import { set as t } from "../../helpers/lodash/set.js";
+import { getQueryMap as n } from "./helpers/QueryBuilderHelper.js";
+import r from "./QueryBuilderContext.js";
+import { defaultCombinators as i } from "./helpers/QueryBuilderContants.js";
+import { useCallback as a, useMemo as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { v4 as l } from "uuid";
+import { produce as u } from "immer";
+//#region src/components/QueryBuilder/QueryBuilderProvider.tsx
+var d = ({ children: d, query: f, fields: p, allowDisableRules: m = !0, allowSubGroups: h = !0, combinators: g = i, error: _ = !1, onChange: v }) => {
+	let y = s(f);
+	y.current = f;
+	let b = o(() => n(f), [f]), x = s(b);
+	x.current = b;
+	let S = a((t, n) => {
+		let { parentId: r, path: i } = e(x.current, n, {});
+		if (!(r && !i)) return i === "" ? t : e(t, i);
+	}, []), C = a((e) => v?.(u(y.current, (t) => {
+		let n = S(t, e);
+		n && n.rules.push({
+			id: l(),
+			field: "",
+			operator: "",
+			value: "",
+			enabled: !0
+		});
+	})), [v, S]), w = a((t) => v?.(u(y.current, (n) => {
+		let r = S(n, t);
+		!r || !h || !("rules" in r) || r.rules.push({
+			id: l(),
+			combinator: e(g, "0.value", "and"),
+			rules: [{
+				id: l(),
+				field: "",
+				operator: "",
+				value: "",
+				enabled: !0
+			}],
+			enabled: !0
+		});
+	})), [
+		h,
+		g,
+		v,
+		S
+	]), T = a((n, r) => v?.(u(y.current, (i) => {
+		let a = S(i, n);
+		if (!a) return;
+		let { parentId: o } = e(x.current, n, {}), s = S(i, o);
+		!s || !("rules" in s) || t(s, `rules.${s.rules.findIndex((e) => e.id === n)}`, {
+			...a,
+			...r
+		});
+	})), [v, S]), E = a((e, n) => v?.(u(y.current, (r) => {
+		let i = S(r, e);
+		i && t(i, "combinator", n);
+	})), [v, S]), D = a((e, n) => v?.(u(y.current, (r) => {
+		let i = S(r, e);
+		i && t(i, "enabled", n);
+	})), [v, S]), O = a((e, n) => v?.(u(y.current, (r) => {
+		let i = S(r, e);
+		i && t(i, "operator", n);
+	})), [v, S]), k = a((e, n) => v?.(u(y.current, (r) => {
+		let i = S(r, e);
+		i && t(i, "value", n);
+	})), [v, S]), A = a((t) => v?.(u(y.current, (n) => {
+		let r = S(n, t), i;
+		for (; r;) {
+			let { id: t, parentId: a } = e(x.current, r.id ?? "", "");
+			if (i = S(n, a), !i || (i.rules.splice(i.rules.findIndex((e) => e.id === t), 1), i.rules.length < 2 && i.combinator !== "and" && (i.combinator = "and"), i.rules.length > 0 || !a)) break;
+			r = i;
+		}
+	})), [v, S]);
+	return /* @__PURE__ */ c(r, {
+		value: o(() => ({
+			addGroup: w,
+			addRule: C,
+			update: T,
+			updateCombinator: E,
+			updateEnabled: D,
+			updateRuleOperator: O,
+			updateRuleValue: k,
+			remove: A,
+			fields: p,
+			allowDisableRules: m,
+			allowSubGroups: h,
+			combinators: g,
+			error: _
+		}), [
+			w,
+			C,
+			T,
+			E,
+			D,
+			O,
+			k,
+			A,
+			p,
+			m,
+			h,
+			g,
+			_
+		]),
+		children: d
+	});
+};
+//#endregion
+export { d as default };

package/dist/components/QueryBuilder/Rule.d.ts

@@ -0,0 +1,13 @@
+import { RuleValue as TRuleValue } from './QueryBuilder';
+import { default as QueryBuilderStyles, variantKeys } from './QueryBuilder.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+export type RuleProps = {
+    id?: string;
+    field?: string;
+    operator?: string;
+    value?: TRuleValue;
+    isBinding?: boolean;
+    enabled?: boolean;
+} & useThemeSharedProps<typeof QueryBuilderStyles, typeof variantKeys>;
+declare const Rule: ({ className, id, field, operator, value, isBinding, enabled, size, showBranches, direction, intent }: RuleProps) => import("react/jsx-runtime").JSX.Element;
+export default Rule;

package/dist/components/QueryBuilder/Rule.js

@@ -0,0 +1,217 @@
+import { get as e } from "../../helpers/lodash/get.js";
+import t from "../../hooks/useTheme/index.js";
+import n from "../Flex/index.js";
+import r from "../Button/index.js";
+import i from "../Select2/index.js";
+import a from "../Switch/index.js";
+import o from "./QueryBuilderContext.js";
+import { defaultOperators as s } from "./helpers/QueryBuilderContants.js";
+import c from "./RuleOperator.js";
+import l from "./RuleValue.js";
+import { use as u, useCallback as d, useMemo as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/QueryBuilder/Rule.tsx
+var g = ({ className: g = "", id: _ = "", field: v = "", operator: y = "", value: b = "", isBinding: x = !1, enabled: S = !0, size: C, showBranches: w, direction: T, intent: E }) => {
+	let { fields: D, update: O, updateRuleOperator: k, updateRuleValue: A, updateEnabled: j, remove: M, allowDisableRules: N, error: P } = u(o), F = t("QueryBuilder", {
+		className: g,
+		componentKey: [
+			"rule",
+			"ruleField",
+			"ruleOperator"
+		],
+		variants: {
+			size: C,
+			showBranches: w,
+			direction: T,
+			error: P,
+			intent: E
+		}
+	}), I = f(() => {
+		let t = Object.values(D ?? {}).reduce((e, t) => {
+			let { name: n, label: r, operators: i, defaultValue: a, group: o = "Others" } = t;
+			if (o) {
+				let t = e.filter((e) => "options" in e).find((e) => e.label === o);
+				return t ? (t.options.push({
+					label: r,
+					value: n,
+					operators: i,
+					defaultValue: a
+				}), e) : [...e, {
+					label: o,
+					options: [{
+						label: r,
+						value: n,
+						operators: i,
+						defaultValue: a
+					}]
+				}];
+			}
+			return [...e, {
+				label: r,
+				value: n,
+				operators: i,
+				defaultValue: a
+			}];
+		}, []);
+		return t.length === 1 ? e(t, "0.options", []) : t;
+	}, [D]), L = d((t) => {
+		if (!t) {
+			O(_, {
+				field: "",
+				operator: "=",
+				value: ""
+			});
+			return;
+		}
+		let { value: n, defaultValue: r, operators: i } = t;
+		O(_, {
+			field: n,
+			operator: e(i, "0.value", e(s, "0.value", "=")),
+			value: r ?? ""
+		});
+	}, [O, _]), R = d(() => O(_, {
+		isBinding: !x,
+		value: ""
+	}), [
+		_,
+		O,
+		x
+	]), z = d((e) => k(_, e), [_, k]), B = d((e) => A(_, e), [A, _]), V = d((e) => A(_, e?.value ?? ""), [A, _]), H = d((e) => j(_, e.target.checked), [j, _]), U = d(() => M(_), [M, _]), { label: W, operators: G, inputType: K, options: q = [], placeholder: J = "", validator: Y } = f(() => e(D, v, {
+		label: "",
+		operators: [],
+		inputType: void 0,
+		options: [],
+		placeholder: "",
+		validator: void 0
+	}), [D, v]);
+	return /* @__PURE__ */ h(n, {
+		gap: 2,
+		className: F.rule,
+		children: [
+			/* @__PURE__ */ h(n, {
+				grow: !0,
+				basis: 0,
+				gap: 2,
+				className: F.ruleField,
+				children: [/* @__PURE__ */ m("div", {
+					className: "basis-0 grow min-w-0",
+					children: /* @__PURE__ */ m(i, {
+						placeholder: "Select a field",
+						options: I,
+						value: v,
+						size: C,
+						onChange: L,
+						allowCreateOptions: !0,
+						error: P
+					})
+				}), T === "vertical" && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(r, {
+					size: C,
+					intent: "danger",
+					className: "rounded-sm",
+					onClick: U,
+					children: "X"
+				}), N && /* @__PURE__ */ m("div", {
+					className: "flex items-center",
+					title: "Enable Group",
+					children: /* @__PURE__ */ m(a, {
+						size: C,
+						checked: S,
+						onChange: H
+					})
+				})] })]
+			}),
+			/* @__PURE__ */ m(c, {
+				value: y,
+				operators: G,
+				error: P,
+				size: C,
+				onChange: z
+			}),
+			!["empty", "notEmpty"].includes(y) && /* @__PURE__ */ h(n, {
+				grow: !0,
+				basis: 0,
+				gap: 2,
+				className: "min-w-0",
+				children: [
+					!["between", "notBetween"].includes(y) && !x && /* @__PURE__ */ m(l, {
+						className: "w-full basis-0 grow",
+						placeholder: J || `Enter ${W || "a value"}`,
+						type: K,
+						options: q,
+						value: b,
+						error: P,
+						size: C,
+						disabled: !v,
+						validator: Y,
+						onChange: B
+					}),
+					["between", "notBetween"].includes(y) && !x && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(l, {
+						className: "w-full",
+						placeholder: J || `Enter ${W || "a value"}`,
+						type: K,
+						valuePosition: 0,
+						options: q,
+						value: b,
+						error: P,
+						size: C,
+						disabled: !v,
+						validator: Y,
+						onChange: B
+					}), /* @__PURE__ */ m(l, {
+						className: "w-full",
+						placeholder: J || `Enter ${W || "a value"}`,
+						type: K,
+						valuePosition: 1,
+						options: q,
+						value: b,
+						error: P,
+						size: C,
+						disabled: !v,
+						validator: Y,
+						onChange: B
+					})] }),
+					x && v && /* @__PURE__ */ m(i, {
+						placeholder: "Select a field",
+						options: I,
+						value: b,
+						size: C,
+						onChange: V
+					}),
+					T === "vertical" && /* @__PURE__ */ h(r, {
+						size: C,
+						intent: "primary",
+						onClick: R,
+						children: [!x && /* @__PURE__ */ m(r.Icon, { icon: "fa-solid fa-plug" }), x && /* @__PURE__ */ m(r.Icon, { icon: "fa-solid fa-plug-circle-xmark" })]
+					})
+				]
+			}),
+			T === "horizontal" && /* @__PURE__ */ h(p, { children: [
+				/* @__PURE__ */ h(r, {
+					size: C,
+					className: "aspect-square",
+					intent: "primary",
+					onClick: R,
+					children: [!x && /* @__PURE__ */ m(r.Icon, { icon: "fa-solid fa-plug" }), x && /* @__PURE__ */ m(r.Icon, { icon: "fa-solid fa-plug-circle-xmark" })]
+				}),
+				/* @__PURE__ */ m(r, {
+					size: C,
+					intent: "danger",
+					className: "aspect-square",
+					onClick: U,
+					children: "X"
+				}),
+				N && /* @__PURE__ */ m("div", {
+					className: "flex items-center",
+					title: "Enable Group",
+					children: /* @__PURE__ */ m(a, {
+						size: C,
+						checked: S,
+						onChange: H
+					})
+				})
+			] })
+		]
+	});
+};
+//#endregion
+export { g as default };

package/dist/components/QueryBuilder/RuleOperator.d.ts

@@ -0,0 +1,14 @@
+import { Operator } from './QueryBuilder';
+import { default as QueryBuilderStyles, variantKeys } from './QueryBuilder.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+export type RuleOperatorProps = {
+    value?: string;
+    operators?: {
+        value: Operator;
+        label: string;
+    }[];
+    error?: boolean;
+    onChange?: (value: string) => void;
+} & useThemeSharedProps<typeof QueryBuilderStyles, typeof variantKeys>;
+declare const RuleOperator: ({ className, value, operators, error, size, onChange }: RuleOperatorProps) => import("react/jsx-runtime").JSX.Element;
+export default RuleOperator;

package/dist/components/QueryBuilder/RuleOperator.js

@@ -0,0 +1,28 @@
+import e from "../../hooks/useTheme/index.js";
+import t from "../Select/index.js";
+import { defaultOperators as n } from "./helpers/QueryBuilderContants.js";
+import { useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/QueryBuilder/RuleOperator.tsx
+var a = ({ className: a = "", value: o = "", operators: s, error: c = !1, size: l, onChange: u }) => {
+	a = e("QueryBuilder", {
+		className: a,
+		componentKey: "ruleOperator",
+		variants: { size: l }
+	});
+	let d = r(() => !Array.isArray(s) || s.length === 0 ? n : s, [s]);
+	return /* @__PURE__ */ i(t, {
+		className: a,
+		placeholder: "Operator",
+		value: o,
+		error: c,
+		size: l,
+		onChange: u,
+		children: d.map((e, t) => /* @__PURE__ */ i("option", {
+			value: e.value,
+			children: e.label
+		}, t))
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/QueryBuilder/RuleValue.d.ts

@@ -0,0 +1,19 @@
+import { Field, RuleValue } from './QueryBuilder';
+import { default as QueryBuilderStyles, variantKeys } from './QueryBuilder.styles';
+import { useThemeSharedProps } from '../../hooks/useTheme';
+export type RuleValueProps = {
+    className?: string;
+    valuePosition?: number;
+    value?: RuleValue;
+    options?: {
+        value: RuleValue;
+        label: string;
+    }[];
+    placeholder?: string;
+    type?: Field['inputType'];
+    validator?: (value: string) => string | boolean;
+    error?: boolean;
+    onChange?: (value: RuleValue) => void;
+} & useThemeSharedProps<typeof QueryBuilderStyles, typeof variantKeys>;
+declare const RuleValue: ({ className, valuePosition, value, options, placeholder, type, error, size, disabled, validator, onChange }: RuleValueProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export default RuleValue;

package/dist/components/QueryBuilder/RuleValue.js

@@ -0,0 +1,62 @@
+import { get as e } from "../../helpers/lodash/get.js";
+import t from "../Checkbox/index.js";
+import n from "../Input/index.js";
+import r from "../Select/index.js";
+import { useCallback as i, useMemo as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/QueryBuilder/RuleValue.tsx
+var c = [], l = ({ className: l = "", valuePosition: u, value: d = "", options: f = c, placeholder: p = "Enter a value", type: m = "text", error: h = !1, size: g, disabled: _, validator: v, onChange: y }) => {
+	let [b, x] = o(h), S = i((e) => y?.(e.target.checked), [y]), C = a(() => Number.isInteger(u) && typeof d == "string" ? e(d.split(","), `${u}`, d) : d, [d, u]), w = i((e) => {
+		if (e.includes(",") && Number.isInteger(u)) return;
+		if (u && Number.isInteger(u) && typeof d == "string") {
+			let t = d.split(",");
+			t[u] = e, y?.(t.join(","));
+		} else y?.(e);
+		if (typeof v != "function") return;
+		let t = v(e);
+		x(t === !0 ? !1 : t);
+	}, [
+		v,
+		y,
+		u,
+		d
+	]);
+	switch (m) {
+		case "checkbox": return /* @__PURE__ */ s("div", {
+			className: "flex items-center",
+			children: /* @__PURE__ */ s(t, {
+				className: l,
+				size: g,
+				checked: C,
+				disabled: _,
+				onChange: S
+			})
+		});
+		case "radio": return;
+		case "multiselect":
+		case "select": return /* @__PURE__ */ s(r, {
+			placeholder: p,
+			multiple: m === "multiselect",
+			value: C,
+			size: g,
+			disabled: _,
+			error: b,
+			onChange: w,
+			children: f.map((e, t) => /* @__PURE__ */ s("option", {
+				value: e.value,
+				children: e.label
+			}, t))
+		});
+		default: return /* @__PURE__ */ s(n, {
+			placeholder: p,
+			className: l,
+			value: C,
+			error: b,
+			size: g,
+			disabled: _,
+			onChange: w
+		});
+	}
+};
+//#endregion
+export { l as default };

package/dist/components/QueryBuilder/helpers/QueryBuilderContants.d.ts

@@ -0,0 +1,34 @@
+import { Operator } from '../QueryBuilder';
+export declare const defaultOperators: {
+    value: Operator;
+    label: string;
+}[];
+export declare const defaultOperatorNegationMap: {
+    '=': string;
+    '!=': string;
+    '<': string;
+    '<=': string;
+    '>': string;
+    '>=': string;
+    beginsWith: string;
+    doesNotBeginWith: string;
+    endsWith: string;
+    doesNotEndWith: string;
+    contains: string;
+    doesNotContain: string;
+    between: string;
+    notBetween: string;
+    in: string;
+    notIn: string;
+    notEmpty: string;
+    empty: string;
+};
+export declare const defaultCombinators: {
+    value: string;
+    label: string;
+}[];
+export declare const defaultCombinatorsExtended: {
+    value: string;
+    label: string;
+}[];
+export declare const defaultValidator: (value?: string | number | boolean) => true | "This field is required";

package/dist/components/QueryBuilder/helpers/QueryBuilderContants.js

@@ -0,0 +1,105 @@
+//#region src/components/QueryBuilder/helpers/QueryBuilderContants.ts
+var e = [
+	{
+		value: "=",
+		label: "= Equals"
+	},
+	{
+		value: "!=",
+		label: "!= Does not equal"
+	},
+	{
+		value: "<",
+		label: "< Less than"
+	},
+	{
+		value: ">",
+		label: "> Greater than"
+	},
+	{
+		value: "<=",
+		label: "<= Less than or equal to"
+	},
+	{
+		value: ">=",
+		label: ">= Greater than or equal to"
+	},
+	{
+		value: "contains",
+		label: "Contains"
+	},
+	{
+		value: "beginsWith",
+		label: "Begins with"
+	},
+	{
+		value: "endsWith",
+		label: "Ends with"
+	},
+	{
+		value: "doesNotContain",
+		label: "Does not contain"
+	},
+	{
+		value: "doesNotBeginWith",
+		label: "Does not begin with"
+	},
+	{
+		value: "doesNotEndWith",
+		label: "Does not end with"
+	},
+	{
+		value: "empty",
+		label: "Is empty"
+	},
+	{
+		value: "notEmpty",
+		label: "Is not empty"
+	},
+	{
+		value: "in",
+		label: "In"
+	},
+	{
+		value: "notIn",
+		label: "Does not in"
+	},
+	{
+		value: "between",
+		label: "Between"
+	},
+	{
+		value: "notBetween",
+		label: "Does not between"
+	}
+], t = {
+	"=": "!=",
+	"!=": "=",
+	"<": ">=",
+	"<=": ">",
+	">": "<=",
+	">=": "<",
+	beginsWith: "doesNotBeginWith",
+	doesNotBeginWith: "beginsWith",
+	endsWith: "doesNotEndWith",
+	doesNotEndWith: "endsWith",
+	contains: "doesNotContain",
+	doesNotContain: "contains",
+	between: "notBetween",
+	notBetween: "between",
+	in: "notIn",
+	notIn: "in",
+	notEmpty: "empty",
+	empty: "notEmpty"
+}, n = [{
+	value: "and",
+	label: "And"
+}, {
+	value: "or",
+	label: "Or"
+}], r = [...n, {
+	value: "xor",
+	label: "Xor"
+}], i = (e) => e ? !0 : "This field is required";
+//#endregion
+export { n as defaultCombinators, r as defaultCombinatorsExtended, t as defaultOperatorNegationMap, e as defaultOperators, i as defaultValidator };

package/dist/components/QueryBuilder/helpers/QueryBuilderEvaluator.d.ts

@@ -0,0 +1,32 @@
+import { Rule, RuleGroup, RuleValue } from '../QueryBuilder';
+type NestedBoolean = boolean | NestedBoolean[];
+export declare const transformQueryJson: (raw?: RuleGroup) => {
+    rules: (Rule | RuleGroup)[];
+    combinator: import('..').Combinator;
+    enabled: boolean | undefined;
+} | undefined;
+export declare const transformQuery: (raw?: RuleGroup, transformTo?: string) => {
+    rules: (Rule | RuleGroup)[];
+    combinator: import('..').Combinator;
+    enabled: boolean | undefined;
+} | undefined;
+export declare const evaluateEquals: (value: RuleValue, valueToCompare: RuleValue) => boolean;
+export declare const evaluateGreaterThan: (value: RuleValue, valueToCompare: RuleValue) => boolean;
+export declare const evaluateGreaterThanOrEqual: (value: RuleValue, valueToCompare: RuleValue) => boolean;
+export declare const evaluateLessThan: (value: RuleValue, valueToCompare: RuleValue) => boolean;
+export declare const evaluateLessThanOrEqual: (value: RuleValue, valueToCompare: RuleValue) => boolean;
+export declare const evaluateContains: (value: RuleValue, valueToCompare: RuleValue) => boolean;
+export declare const evaluateBeginsWith: (value: RuleValue, valueToCompare: RuleValue) => boolean;
+export declare const evaluateEndsWith: (value: RuleValue, valueToCompare: RuleValue) => boolean;
+export declare const evaluateEmpty: (valueToCompare: RuleValue) => boolean;
+export declare const evaluateIn: (value: RuleValue, valueToCompare: RuleValue) => boolean;
+export declare const evaluateBetween: (value: RuleValue, valueToCompare: RuleValue) => boolean;
+declare const QueryBuilderEvaluator: (queryRAW: RuleGroup, values?: {
+    [key: string]: RuleValue;
+}, granulated?: boolean, fallbackValue?: boolean) => NestedBoolean;
+export declare const getValuesRequired: (queryRAW: RuleGroup, values?: {
+    [key: string]: RuleValue;
+}, fallbackValue?: undefined) => {
+    [key: string]: RuleValue;
+} | Rule[];
+export default QueryBuilderEvaluator;