@plitzi/sdk-elements 0.30.19

package/dist/elements/basic/Text/index.mjs

@@ -0,0 +1,45 @@
+import e from "./Text.mjs";
+//#region src/elements/basic/Text/index.ts
+var t = Object.assign(e, {
+	type: "text",
+	content: {
+		attributes: { content: "Text" },
+		definition: {
+			label: "Text",
+			type: "text",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-align-left"
+		},
+		defaultStyle: {
+			name: "Text",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"font-size": "14px",
+				"line-height": "24px",
+				display: "inline"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/form/Form/Form.d.ts

@@ -0,0 +1,34 @@
+import { SourceField } from '@plitzi/sdk-shared';
+import { ReactNode, RefObject } from 'react';
+export type FormProps = {
+    ref: RefObject<HTMLElement>;
+    className: string;
+    children: ReactNode;
+    method: 'get' | 'post';
+    actionUrl: string;
+    managedByInteractions: boolean;
+    errors: Record<string, string>;
+    values: Record<string, unknown>;
+};
+export type Field = {
+    id: string;
+    name: string;
+};
+export type FieldValue = string | boolean | number;
+export type FormContextValue = {
+    fields: Record<string, SourceField>;
+    errors: Record<string, string>;
+    values: Record<string, unknown>;
+    registerField: (field: SourceField) => void;
+    unregisterField: (name: string) => void;
+    getField: (name: string) => SourceField | Record<string, SourceField>;
+    setFieldValue: (name: string, value: FieldValue | null) => void;
+    setFieldError: (name: string, error: string) => void;
+};
+declare const Form: ({ ref, className, children, method, actionUrl, managedByInteractions, errors, values }: FormProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<FormProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Form };

package/dist/elements/form/Form/Form.mjs

@@ -0,0 +1,213 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import { use as n, useCallback as r, useMemo as i, useState as a } from "react";
+import o from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as s, omit as c } from "@plitzi/plitzi-ui/helpers";
+import { emptyObject as l } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as u } from "react/jsx-runtime";
+import d from "clsx";
+import f from "@plitzi/sdk-shared/elements/hooks/useElement";
+import { produce as p } from "immer";
+//#region src/elements/form/Form/Form.tsx
+var m = ({ ref: t, className: m = "", children: h, method: g = "get", actionUrl: _ = "", managedByInteractions: v = !1, errors: y = l, values: b = l }) => {
+	let [x, S] = a({}), { id: C, definition: { label: w = "Form" }, setElementState: T } = f(), { settings: { previewMode: E }, contexts: { DataSourceContext: D, InteractionsContext: O } } = o(), { useDataSource: k } = n(D), { interactionsManager: A } = n(O), j = r((e) => S((t) => ({
+		...t,
+		[e.name]: e
+	})), [S]), M = r((e) => !e || !x[e] ? x : s(x, e), [x]), N = r((e) => {
+		S((t) => p(t, (t) => {
+			t[e] && delete t[e];
+		})), e && T((t) => ({
+			...t,
+			values: c(t, `values.${e}`),
+			errors: c(t, `errors.${e}`)
+		}));
+	}, [T]), P = r((e, t = "") => {
+		e && (t === null && (t = ""), T((n) => n.errors && n.errors[e] ? {
+			...n,
+			values: {
+				...n.values,
+				[e]: t
+			},
+			errors: c(n.errors, [e])
+		} : {
+			...n,
+			values: {
+				...n.values,
+				[e]: t
+			}
+		}));
+	}, [T]), F = r((e, t) => {
+		e && T((n) => !t && !s(n, `errors.${e}`) ? n : !t && n.errors && n.errors[e] ? {
+			...n,
+			errors: c(n, [`errors.${e}`])
+		} : {
+			...n,
+			errors: {
+				...n.errors,
+				[e]: t
+			}
+		});
+	}, [T]), I = r(() => Object.values(x).filter((e) => !!e.name).reduce((e, t) => [
+		...e,
+		{
+			path: `fields.${t.name}.id`,
+			name: `${t.name} ID`
+		},
+		{
+			path: `values.${t.name}`,
+			name: `${t.name} Value`
+		},
+		{
+			path: `errors.${t.name}`,
+			name: `${t.name} Error Message`
+		}
+	], []), [x]), L = i(() => ({
+		fields: x,
+		errors: y,
+		values: b,
+		registerField: j,
+		unregisterField: N,
+		getField: M,
+		setFieldValue: P,
+		setFieldError: F
+	}), [
+		x,
+		y,
+		b,
+		j,
+		N,
+		M,
+		P,
+		F
+	]), [R] = k({
+		id: C,
+		source: "form",
+		mode: "write",
+		name: w || `Form - ${C}`,
+		fields: I
+	}), z = i(() => ({ onSubmit: {
+		action: "onSubmit",
+		title: "On Form Submit",
+		type: "trigger",
+		params: {},
+		preview: {
+			values: Object.values(x).reduce((e, t) => ({
+				...e,
+				[t.name]: ""
+			}), {}),
+			actionUrl: "",
+			method: ""
+		}
+	} }), [x]), B = r((e) => {
+		if (T((e) => ({
+			...e,
+			errors: {}
+		})), !v || (e.stopPropagation(), e.preventDefault(), !E)) return;
+		let t = Object.values(x).reduce((e, { name: t }) => ({
+			...e,
+			[t]: b[t]
+		}), {});
+		A.interactionTrigger(C, "onSubmit", {
+			values: t,
+			actionUrl: _,
+			method: g
+		});
+	}, [
+		T,
+		v,
+		E,
+		x,
+		A,
+		C,
+		_,
+		g,
+		b
+	]), V = r((e) => {
+		v && (e instanceof Event && (e.stopPropagation(), e.preventDefault()), T((e) => ({
+			...e,
+			values: {},
+			errors: {}
+		})));
+	}, [T, v]), H = r((e) => {
+		let { name: t, value: n } = e;
+		P(t, n);
+	}, [P]), U = r((e) => {
+		let { name: t, error: n } = e;
+		F(t, n);
+	}, [F]), W = i(() => ({
+		performReset: {
+			action: "performReset",
+			title: `Reset ${w}`,
+			type: "callback",
+			callback: V,
+			params: {}
+		},
+		setFieldValue: {
+			action: "setFieldValue",
+			title: `Set Field Value ${w}`,
+			type: "callback",
+			callback: H,
+			preview: {},
+			params: {
+				name: {
+					label: "Field Name",
+					defaultValue: void 0,
+					type: "select",
+					options: Object.values(x).map((e) => ({
+						value: e.name,
+						label: e.name
+					}))
+				},
+				value: {
+					type: "text",
+					defaultValue: ""
+				}
+			}
+		},
+		setFieldError: {
+			action: "setFieldError",
+			title: `Set Field Error ${w}`,
+			type: "callback",
+			callback: U,
+			preview: {},
+			params: {
+				name: {
+					label: "Field Name",
+					defaultValue: void 0,
+					type: "select",
+					options: Object.values(x).map((e) => ({
+						value: e.name,
+						label: e.name
+					}))
+				},
+				error: {
+					type: "text",
+					defaultValue: ""
+				}
+			}
+		}
+	}), [
+		w,
+		V,
+		H,
+		x,
+		U
+	]);
+	return /* @__PURE__ */ u(e, {
+		tag: "form",
+		ref: t,
+		method: g,
+		className: d("plitzi-component__form", m),
+		interactionTriggers: z,
+		interactionCallbacks: W,
+		onSubmit: B,
+		onReset: V,
+		action: _,
+		children: /* @__PURE__ */ u(R, {
+			value: L,
+			children: h
+		})
+	});
+}, h = t(m);
+//#endregion
+export { m as Form, h as default };

package/dist/elements/form/Form/Settings.d.ts

@@ -0,0 +1,8 @@
+type SettingsProps = {
+    method?: 'get' | 'post';
+    managedByInteractions?: boolean;
+    actionUrl?: string;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ method, managedByInteractions, actionUrl, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/form/Form/Settings.mjs

@@ -0,0 +1,41 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+import a from "@plitzi/plitzi-ui/Select";
+//#region src/elements/form/Form/Settings.tsx
+var o = ({ method: o = "get", managedByInteractions: s = !1, actionUrl: c = "", onUpdate: l }) => {
+	let u = e((e) => l?.("actionUrl", e), [l]), d = e((e) => l?.("method", e), [l]), f = e((e) => l?.("managedByInteractions", e.target.checked), [l]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ n(a, {
+				value: o,
+				label: "Form Method",
+				onChange: d,
+				size: "xs",
+				children: [/* @__PURE__ */ t("option", {
+					value: "get",
+					children: "GET"
+				}), /* @__PURE__ */ t("option", {
+					value: "post",
+					children: "POST"
+				})]
+			}),
+			/* @__PURE__ */ t(i, {
+				value: c,
+				onChange: u,
+				label: "Action URL",
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: s,
+				onChange: f,
+				label: "Managed By Interactions",
+				size: "xs"
+			})
+		]
+	});
+};
+//#endregion
+export { o as default };

package/dist/elements/form/Form/index.d.ts

@@ -0,0 +1,61 @@
+declare const Form: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Form').FormProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            method: string;
+            actionUrl: string;
+            managedByInteractions: boolean;
+            errors: {};
+            values: {};
+        };
+        definition: {
+            label: string;
+            type: string;
+            description: string;
+            items: never[];
+            bindings: {};
+            styleSelectors: {
+                base: string;
+            };
+            initialState: {
+                visibility: boolean;
+            };
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: never[];
+        };
+        market: {
+            category: string;
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
+            icon: import("react/jsx-runtime").JSX.Element;
+        };
+        defaultStyle: {
+            name: string;
+            displayMode: string;
+            style: {
+                base: {
+                    default: {
+                        'min-width': string;
+                        'min-height': string;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export * from './Form';
+export default Form;

package/dist/elements/form/Form/index.mjs

@@ -0,0 +1,54 @@
+import e, { Form as t } from "./Form.mjs";
+import { jsx as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/icons/Form";
+//#region src/elements/form/Form/index.tsx
+var i = Object.assign(e, {
+	type: "form",
+	content: {
+		attributes: {
+			method: "get",
+			actionUrl: "",
+			managedByInteractions: !1,
+			errors: {},
+			values: {}
+		},
+		definition: {
+			label: "Form",
+			type: "form",
+			description: "",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "form",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: /* @__PURE__ */ n(r, {})
+		},
+		defaultStyle: {
+			name: "Form",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"min-width": "50px",
+				"min-height": "50px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as Form, i as default };

package/dist/elements/form/FormControl/FormControl.d.ts

@@ -0,0 +1,28 @@
+import { ChangeEvent, RefObject } from 'react';
+export type FormControlProps = {
+    ref: RefObject<HTMLElement>;
+    className: string;
+    subType: 'text' | 'number' | 'email' | 'password' | 'time' | 'checkbox' | 'switch' | 'select' | 'textarea' | 'hidden';
+    name: string;
+    label: string;
+    placeholder: string;
+    autoComplete: boolean;
+    disabled: boolean;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    required: boolean;
+    readOnly: boolean;
+    value: string;
+    error: string;
+    handleChange: (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement> | ChangeEvent<HTMLTextAreaElement>) => void;
+    handleValidate: () => void;
+};
+declare const FormControl: ({ ref, className, subType, name, label, placeholder, autoComplete, disabled, options, required, readOnly, value, error, handleChange, handleValidate }: FormControlProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./hocs/withFieldValue').WithFieldValueProps<FormControlProps>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { FormControl };

package/dist/elements/form/FormControl/FormControl.mjs

@@ -0,0 +1,139 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "./components/Label.mjs";
+import n from "./hocs/withFieldValue.mjs";
+import r from "./inputs/Checkbox.mjs";
+import i from "./inputs/Hidden.mjs";
+import a from "./inputs/Input.mjs";
+import o from "./inputs/Select.mjs";
+import s from "./inputs/Textarea.mjs";
+import c from "../../../Element/hocs/withElement.mjs";
+import { use as l, useEffect as u } from "react";
+import d from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "clsx";
+import h from "@plitzi/sdk-shared/elements/hooks/useElement";
+var g = c(n(({ ref: n, className: c = "", subType: g = "text", name: _ = "", label: v = "Label", placeholder: y = "", autoComplete: b = !0, disabled: x = !1, options: S = [], required: C = !0, readOnly: w = !1, value: T = "", error: E = "", handleChange: D, handleValidate: O }) => {
+	let { id: k, rootId: A, definition: { styleSelectors: j } } = h(), { settings: { previewMode: M }, contexts: { DataSourceContext: N } } = d(), { useDataSource: P } = l(N), { form: F } = P({
+		id: k,
+		mode: "read"
+	});
+	if (!F && !M) return /* @__PURE__ */ f(e, {
+		ref: n,
+		className: m("plitzi-component__form-input", { "form-input--out-of-context": !M }, c),
+		children: /* @__PURE__ */ f("div", { children: "Form Input Only Works inside Form element" })
+	});
+	if (!F && M) return null;
+	let { registerField: I, unregisterField: L } = F, R = ["checkbox", "switch"].includes(g);
+	return u(() => (I && I({
+		name: _,
+		path: _
+	}), () => {
+		L && L(_);
+	}), [
+		_,
+		I,
+		L
+	]), /* @__PURE__ */ p(e, {
+		ref: n,
+		className: m("plitzi-component__form-control", {
+			"form-control--invalid": E && M,
+			[`plitzi-component__form-control-${g}`]: g
+		}, c),
+		children: [
+			!R && v && /* @__PURE__ */ f(t, {
+				targetInput: `${A}_${k}`,
+				previewMode: M,
+				className: j.label,
+				type: g,
+				required: C,
+				children: v
+			}),
+			R && v && /* @__PURE__ */ p(t, {
+				targetInput: `${A}_${k}`,
+				previewMode: M,
+				className: j.label,
+				type: g,
+				required: C,
+				children: [g === "checkbox" && /* @__PURE__ */ f(r, {
+					id: `${A}_${k}`,
+					name: _,
+					value: T,
+					className: j.input,
+					placeholder: y,
+					required: C,
+					disabled: x,
+					onChange: D,
+					onValidate: O
+				}), v]
+			}),
+			g === "checkbox" && !v && /* @__PURE__ */ f(r, {
+				id: `${A}_${k}`,
+				name: _,
+				value: T,
+				className: j.input,
+				placeholder: y,
+				required: C,
+				disabled: x,
+				onChange: D,
+				onValidate: O
+			}),
+			[
+				"text",
+				"number",
+				"email",
+				"password",
+				"time"
+			].includes(g) && /* @__PURE__ */ f(a, {
+				id: `${A}_${k}`,
+				name: _,
+				value: T,
+				type: g,
+				className: j.input,
+				placeholder: y,
+				autoComplete: g === "password" ? !1 : b,
+				required: C,
+				disabled: x,
+				readOnly: w || !M,
+				onChange: D,
+				onValidate: O
+			}),
+			g === "hidden" && /* @__PURE__ */ f(i, {
+				id: `${A}_${k}`,
+				name: _,
+				value: T,
+				required: C,
+				disabled: x,
+				previewMode: M
+			}),
+			g === "select" && /* @__PURE__ */ f(o, {
+				id: `${A}_${k}`,
+				name: _,
+				onChange: D,
+				onValidate: O,
+				value: T,
+				className: j.input,
+				placeholder: y,
+				disabled: x,
+				options: S
+			}),
+			g === "textarea" && /* @__PURE__ */ f(s, {
+				id: `${A}_${k}`,
+				name: _,
+				value: T,
+				className: j.input,
+				placeholder: y,
+				required: C,
+				disabled: x,
+				readOnly: w,
+				onChange: D,
+				onValidate: O
+			}),
+			E && /* @__PURE__ */ f("div", {
+				className: m("form-control__error-message", j.error),
+				children: E
+			})
+		]
+	});
+}));
+//#endregion
+export { g as default };

package/dist/elements/form/FormControl/Settings.d.ts

@@ -0,0 +1,16 @@
+type SettingsProps = {
+    subType?: 'text' | 'number' | 'time' | 'email' | 'password' | 'select' | 'checkbox' | 'textarea' | 'hidden' | 'color' | 'switch';
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    autoComplete?: boolean;
+    defaultValue?: string;
+    options?: string[];
+    required?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    previewError?: boolean;
+    onUpdate?: (key: string, value: string | boolean | number | string[]) => void;
+};
+declare const Settings: ({ subType, name, label, defaultValue, placeholder, autoComplete, options, required, readOnly, disabled, previewError, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;