@plitzi/sdk-elements 0.30.19

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

@@ -0,0 +1,129 @@
+import { useCallback as e, useMemo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@plitzi/plitzi-ui/Checkbox";
+import a from "@plitzi/plitzi-ui/Input";
+import o from "@plitzi/plitzi-ui/TextArea";
+import s from "@plitzi/plitzi-ui/Select";
+//#region src/elements/form/FormControl/Settings.tsx
+var c = ({ subType: c = "text", name: l = "", label: u = "Label", defaultValue: d = "", placeholder: f = "", autoComplete: p = !0, options: m, required: h = !0, readOnly: g = !1, disabled: _ = !1, previewError: v = !1, onUpdate: y }) => {
+	let b = e((e) => y?.("name", e), [y]), x = e((e) => y?.("label", e), [y]), S = e((e) => y?.("placeholder", e), [y]), C = e((e) => {
+		y?.("subType", e), y?.("defaultValue", "");
+	}, [y]), w = e((e) => y?.("defaultValue", e), [y]), T = e((e) => y?.("autoComplete", e.target.checked), [y]), E = e((e) => y?.("required", e.target.checked), [y]), D = e((e) => y?.("readOnly", e.target.checked), [y]), O = e((e) => y?.("disabled", e.target.checked), [y]), k = e((e) => y?.("previewError", e.target.checked), [y]), A = e((e) => {
+		if (!e) {
+			y?.("options", []);
+			return;
+		}
+		y?.("options", e.split("\n"));
+	}, [y]), j = t(() => Array.isArray(m) ? m.join("\n") : "", [m]);
+	return /* @__PURE__ */ r("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ n(a, {
+				value: l,
+				label: "Input Name",
+				onChange: b,
+				size: "xs"
+			}),
+			/* @__PURE__ */ n(a, {
+				value: u,
+				label: "Label",
+				onChange: x,
+				size: "xs"
+			}),
+			/* @__PURE__ */ n(a, {
+				value: f,
+				label: "Placeholder",
+				onChange: S,
+				size: "xs"
+			}),
+			/* @__PURE__ */ r(s, {
+				value: c,
+				onChange: C,
+				label: "Input Type",
+				size: "xs",
+				children: [
+					/* @__PURE__ */ n("option", {
+						value: "text",
+						children: "Text"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "number",
+						children: "Number"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "time",
+						children: "Time"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "email",
+						children: "Email"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "password",
+						children: "Password"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "select",
+						children: "Select"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "checkbox",
+						children: "Checkbox"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "textarea",
+						children: "Long Text"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "hidden",
+						children: "Hidden"
+					})
+				]
+			}),
+			/* @__PURE__ */ n(o, {
+				value: d,
+				label: "Default Value",
+				onChange: w,
+				size: "xs"
+			}),
+			c === "text" && /* @__PURE__ */ n(i, {
+				checked: p,
+				label: "Auto Complete",
+				onChange: T,
+				size: "xs"
+			}),
+			(c === "text" || c === "textarea" || c === "number" || c === "email" || c === "password") && /* @__PURE__ */ n(i, {
+				checked: g,
+				label: "Read Only",
+				onChange: D,
+				size: "xs"
+			}),
+			c === "select" && /* @__PURE__ */ n(o, {
+				value: j,
+				label: "Options",
+				onChange: A,
+				size: "xs"
+			}),
+			/* @__PURE__ */ n(i, {
+				checked: h,
+				label: "Required",
+				onChange: E,
+				size: "xs"
+			}),
+			/* @__PURE__ */ n(i, {
+				checked: _,
+				label: "Disabled",
+				onChange: O,
+				size: "xs"
+			}),
+			/* @__PURE__ */ n(i, {
+				checked: v,
+				label: "Preview Error Message",
+				onChange: k,
+				size: "xs"
+			})
+		]
+	});
+};
+//#endregion
+export { c as default };

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

@@ -0,0 +1,12 @@
+import { ReactNode, RefObject } from 'react';
+export type LabelProps = {
+    ref?: RefObject<HTMLLabelElement>;
+    className?: string;
+    children: ReactNode;
+    targetInput: string;
+    type: string;
+    previewMode?: boolean;
+    required: boolean;
+};
+declare const Label: ({ ref, children, targetInput, type, previewMode, required, className }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export default Label;

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

@@ -0,0 +1,28 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "clsx";
+//#region src/elements/form/FormControl/components/Label.tsx
+var i = ({ ref: i, children: a, targetInput: o = "", type: s = "text", previewMode: c = !0, required: l = !0, className: u = "" }) => {
+	let d = e((e) => {
+		c || e.preventDefault();
+	}, [c]);
+	return c ? /* @__PURE__ */ n("label", {
+		ref: i,
+		className: r(`form-control__label-${s}`, u),
+		htmlFor: o,
+		children: [a, l && a && /* @__PURE__ */ t("span", {
+			className: "form-control__label--required",
+			children: "*"
+		})]
+	}) : /* @__PURE__ */ n("label", {
+		ref: i,
+		className: r(`form-control__label-${s}`, u),
+		onClick: d,
+		children: [a, l && a && /* @__PURE__ */ t("span", {
+			className: "form-control__label--required",
+			children: "*"
+		})]
+	});
+};
+//#endregion
+export { i as default };

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

@@ -0,0 +1,14 @@
+import { FC, RefObject } from 'react';
+export type WithFieldValueProps<T> = {
+    ref: RefObject<HTMLElement>;
+    name: string;
+    defaultValue?: string;
+    subType: 'hidden' | 'text' | 'number' | 'email' | 'password' | 'select' | 'checkbox' | 'textarea' | 'color' | 'switch';
+    required: boolean;
+    previewError?: boolean;
+} & T;
+declare const withFieldValue: <T extends object>(WrappedComponent: FC<T>) => {
+    (props: WithFieldValueProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default withFieldValue;

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

@@ -0,0 +1,67 @@
+import { use as e, useCallback as t, useEffect as n, useMemo as r } from "react";
+import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as a } from "@plitzi/plitzi-ui/helpers";
+import { getDisplayName as o } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as s } from "react/jsx-runtime";
+import c from "@plitzi/sdk-shared/elements/hooks/useElement";
+//#region src/elements/form/FormControl/hocs/withFieldValue.tsx
+var l = (l) => {
+	let u = (o) => {
+		let { id: u } = c(), { ref: d, name: f = "", subType: p = "text", defaultValue: m = "", required: h = !0, previewError: g = !1 } = o, { settings: { previewMode: _ }, contexts: { DataSourceContext: v } } = i(), { useDataSource: y } = e(v), { form: b } = y({
+			id: u,
+			mode: "read"
+		});
+		if (!b) return /* @__PURE__ */ s(l, { ...o });
+		let { setFieldValue: x, setFieldError: S, errors: C, values: w } = b, T = r(() => a(w, f, m), [
+			w,
+			f,
+			m
+		]), E = r(() => !_ && g ? "This is an error message" : C[f], [
+			_,
+			g,
+			C,
+			f
+		]);
+		n(() => {
+			m && T && f && x(f, T);
+		}, [
+			m,
+			f,
+			x,
+			T
+		]);
+		let D = t((e) => {
+			e.target.type === "radio" || e.target.type === "checkbox" || p === "switch" ? x(f, e.target.checked) : x(f, e.target.value);
+		}, [
+			x,
+			f,
+			p
+		]), O = t(() => {
+			!T && h ? S(f, "This field is required") : E === "This field is required" && S(f, "");
+		}, [
+			T,
+			E,
+			f,
+			h,
+			S
+		]);
+		return r(() => /* @__PURE__ */ s(l, {
+			...o,
+			ref: d,
+			value: T,
+			error: E,
+			handleChange: D,
+			handleValidate: O
+		}), [
+			o,
+			d,
+			E,
+			T,
+			D,
+			O
+		]);
+	};
+	return u.displayName = `withFieldValue(${o(l)})`, u;
+};
+//#endregion
+export { l as default };