@plitzi/sdk-elements 0.38.6 → 0.38.8

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

@@ -26,10 +26,12 @@ var n = {
 	"padding-right": "16px",
 	"padding-top": "8px",
 	"padding-bottom": "8px",
-	"line-height": "20px",
 	outline: "none",
 	position: "relative"
 }, r = {
+	...n,
+	"line-height": "20px"
+}, i = {
 	display: "flex",
 	cursor: "pointer",
 	"font-weight": "600",
@@ -37,14 +39,113 @@ var n = {
 	"line-height": "18px",
 	color: "#6b7280",
 	"user-select": "none"
-}, i = {
-	...r,
-	"margin-bottom": "4px"
 }, a = {
+	...i,
+	"margin-bottom": "4px"
+}, o = {
 	display: "block",
 	color: "red",
 	"margin-top": "4px"
-}, o = e()({
+}, s = {
+	color: "red",
+	"margin-left": "4px"
+}, c = {
+	"border-top-style": "none",
+	"border-right-style": "none",
+	"border-bottom-style": "none",
+	"border-left-style": "none"
+}, l = {
+	height: "100%",
+	width: "100%",
+	"padding-top": "0px",
+	"padding-right": "0px",
+	"padding-bottom": "0px",
+	"padding-left": "0px",
+	display: "block",
+	...c,
+	"background-color": "inherit",
+	color: "inherit",
+	"line-height": "inherit",
+	"font-family": "inherit",
+	"font-size": "inherit",
+	"box-shadow": "none"
+}, u = {
+	height: "100%",
+	width: "100%",
+	display: "block",
+	...c,
+	"background-color": "transparent",
+	color: "inherit",
+	"line-height": "inherit",
+	"font-family": "inherit",
+	"font-size": "inherit",
+	appearance: "none",
+	cursor: "inherit",
+	"box-shadow": "none"
+}, d = {
+	height: "100%",
+	"margin-top": "0px",
+	"margin-right": "0px",
+	"margin-bottom": "0px",
+	"margin-left": "0px",
+	"padding-right": "4px",
+	"padding-left": "4px",
+	display: "flex",
+	"justify-content": "center",
+	"align-items": "center",
+	...c,
+	"background-color": "transparent",
+	color: "inherit",
+	"line-height": "inherit",
+	"font-family": "inherit",
+	"font-size": "inherit",
+	"font-weight": "inherit",
+	cursor: "pointer"
+}, f = {
+	...n,
+	cursor: "pointer"
+}, p = {
+	height: "20px",
+	width: "36px",
+	"margin-top": "0px",
+	"margin-bottom": "0px",
+	"margin-left": "0px",
+	"margin-right": "8px",
+	position: "relative",
+	"flex-shrink": "0",
+	"border-top-color": "currentColor",
+	"border-top-style": "solid",
+	"border-top-width": "1px",
+	"border-right-color": "currentColor",
+	"border-right-style": "solid",
+	"border-right-width": "1px",
+	"border-bottom-color": "currentColor",
+	"border-bottom-style": "solid",
+	"border-bottom-width": "1px",
+	"border-left-color": "currentColor",
+	"border-left-style": "solid",
+	"border-left-width": "1px",
+	"border-top-left-radius": "10px",
+	"border-top-right-radius": "10px",
+	"border-bottom-left-radius": "10px",
+	"border-bottom-right-radius": "10px",
+	"background-color": "transparent",
+	transition: "background-color 150ms ease",
+	appearance: "none",
+	cursor: "pointer"
+}, m = (e, t, { field: n, icon: r } = {}) => ({
+	name: e,
+	displayMode: "desktop",
+	style: {
+		base: { default: {} },
+		input: { default: t },
+		...n ? { field: { default: n } } : {},
+		...r ? { icon: { default: r } } : {},
+		label: { default: a },
+		requiredMark: { default: s },
+		error: { default: o }
+	}
+}), h = { field: l }, g = e()({
 	type: "formControl",
 	attributeValues: { subType: t()([
 		"text",
@@ -101,12 +202,15 @@ var n = {
 		definition: {
 			label: "Form Control",
 			type: "formControl",
-			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes.",
+			description: "A single labelled input (text/select/checkbox/… per its subType) inside a form; captures one field of user input. A select offers its `options`: `[{ label, value }, …]` — the text shown, and what the field takes. A `switch` is a checkbox announced and drawn as an on/off switch (`role=\"switch\"`), for a setting that applies at once; both hold `true`/`false`, and a `defaultValue` of `\"true\"` starts them on. Its slots: `label`, `requiredMark` (the `*` that ends the label of a required field), `input` (the box a typed field or a select is drawn in — a textarea, checkbox or switch is its own box), `field` (the `<input>` or `<select>` inside that box), `icon` (the show/hide button of a password) and `error`. The thumb of a switch is no element a class reaches: the class on its `input` slot sets `--plitzi-switch-thumb` (off), `--plitzi-switch-thumb-checked` (on, white by default) and `--plitzi-switch-thumb-shadow`.",
 			bindings: {},
 			styleSelectors: {
 				base: "",
 				label: "",
+				requiredMark: "",
 				input: "",
+				field: "",
+				icon: "",
 				error: ""
 			},
 			initialState: { visibility: !0 }
@@ -134,66 +238,26 @@ var n = {
 			displayMode: "desktop",
 			style: { base: { default: {} } },
 			subTypes: {
-				hidden: {
-					name: "Form Control Hidden",
-					displayMode: "desktop",
-					style: {
-						base: {},
-						input: { default: {} },
-						label: { default: i },
-						error: { default: a }
-					}
-				},
-				text: {
-					name: "Form Control Text",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: n },
-						label: { default: i },
-						error: { default: a }
-					}
-				},
-				password: {
-					name: "Form Control Password",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: n },
-						label: { default: i },
-						error: { default: a }
-					}
-				},
-				number: {
-					name: "Form Control Number",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: n },
-						label: { default: i },
-						error: { default: a }
-					}
-				},
-				email: {
-					name: "Form Control Email",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: n },
-						label: { default: i },
-						error: { default: a }
-					}
-				},
-				textarea: {
-					name: "Form Control Textarea",
-					displayMode: "desktop",
-					style: {
-						base: { default: {} },
-						input: { default: n },
-						label: { default: i },
-						error: { default: a }
-					}
-				},
+				hidden: m("Form Control Hidden", {}),
+				text: m("Form Control Text", r, h),
+				number: m("Form Control Number", r, h),
+				email: m("Form Control Email", r, h),
+				password: m("Form Control Password", r, {
+					...h,
+					icon: d
+				}),
+				search: m("Form Control Search", r, h),
+				url: m("Form Control URL", r, h),
+				tel: m("Form Control Phone", r, h),
+				date: m("Form Control Date", r, h),
+				time: m("Form Control Time", r, h),
+				color: m("Form Control Color", r, h),
+				textarea: m("Form Control Textarea", {
+					...r,
+					color: "inherit",
+					resize: "vertical"
+				}),
+				select: m("Form Control Select", f, { field: u }),
 				checkbox: {
 					name: "Form Control Checkbox",
 					displayMode: "desktop",
@@ -205,21 +269,23 @@ var n = {
 							"margin-left": "0px",
 							"margin-right": "4px"
 						} },
-						label: { default: r },
-						error: { default: a }
+						label: { default: i },
+						requiredMark: { default: s },
+						error: { default: o }
 					}
 				},
-				select: {
-					name: "Form Control Select",
+				switch: {
+					name: "Form Control Switch",
 					displayMode: "desktop",
 					style: {
 						base: { default: {} },
-						input: { default: {
-							...n,
-							cursor: "pointer"
+						input: { default: p },
+						label: { default: {
+							...i,
+							"align-items": "center"
 						} },
-						label: i,
-						error: { default: a }
+						requiredMark: { default: s },
+						error: { default: o }
 					}
 				}
 			}
@@ -228,4 +294,4 @@ var n = {
 	}
 });
 //#endregion
-export { o as default };
+export { g as default };

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

@@ -0,0 +1,8 @@
+/**
+ * Whether a checkbox or a switch is on, from the value its field holds.
+ *
+ * Inside a form the value is the form's: `true`/`false` once the box has been clicked, the `defaultValue` string before
+ * that. Outside one the control keeps its own, as the string `'true'`/`'false'`. Both read the same way here, so a
+ * default or a binding of `'true'` shows the box ticked.
+ */
+export declare const isChecked: (value: unknown) => boolean;

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

@@ -0,0 +1,4 @@
+//#region src/elements/form/FormControl/helpers/isChecked.ts
+var e = (e) => e === !0 || e === "true";
+//#endregion
+export { e as isChecked };

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

@@ -65,17 +65,13 @@ var u = (u) => {
 			F
 		]);
 		let H = t((e) => {
-			let t = e.target.type === "radio" || e.target.type === "checkbox" || p === "switch";
+			let t = e.target.type === "radio" || e.target.type === "checkbox";
 			if (!B) {
 				j(t ? String(e.target.checked) : e.target.value);
 				return;
 			}
 			B(f, t ? e.target.checked : e.target.value);
-		}, [
-			B,
-			f,
-			p
-		]), U = t(() => V?.(f, e(F, L, P ?? {})), [
+		}, [B, f]), U = t(() => V?.(f, e(F, L, P ?? {})), [
 			F,
 			L,
 			P,