@plitzi/sdk-elements 0.33.1 → 0.34.0

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

@@ -0,0 +1,497 @@
+import { FormControlProps } from './FormControl';
+import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
+/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
+export type FormControlAttributes = AuthorableAttributes<FormControlProps, 'value' | 'error' | 'handleChange' | 'handleValidate'> & {
+    defaultValue?: string;
+};
+declare const declaration: {
+    readonly type: "formControl";
+    readonly content: {
+        readonly attributes: {
+            readonly subType: "text";
+            readonly name: "";
+            readonly label: "Label";
+            readonly placeholder: "";
+            readonly defaultValue: "";
+            readonly autoComplete: true;
+            readonly disabled: false;
+            readonly options: readonly [];
+            readonly required: true;
+            readonly minLength: 0;
+            readonly maxLength: 0;
+            readonly pattern: "";
+            readonly patternMessage: "";
+            readonly matches: "";
+            readonly matchesMessage: "";
+            readonly readOnly: false;
+        };
+        readonly definition: {
+            readonly label: "Form Control";
+            readonly type: "formControl";
+            readonly description: string;
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+                readonly label: "";
+                readonly input: "";
+                readonly error: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: false;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "form";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+        };
+        readonly defaultStyle: {
+            readonly name: "Form Control";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+            readonly subTypes: {
+                readonly hidden: {
+                    readonly name: "Form Control Hidden";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {};
+                        readonly input: {
+                            readonly default: {};
+                        };
+                        readonly label: {
+                            readonly default: {
+                                'margin-bottom': string;
+                                display: string;
+                                cursor: string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        readonly error: {
+                            readonly default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                readonly text: {
+                    readonly name: "Form Control Text";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {};
+                        };
+                        readonly input: {
+                            readonly default: {
+                                width: string;
+                                display: string;
+                                'align-items': string;
+                                'border-right-color': string;
+                                'border-right-style': string;
+                                'border-right-width': string;
+                                'border-top-right-radius': string;
+                                'border-bottom-color': string;
+                                'border-bottom-style': string;
+                                'border-bottom-width': string;
+                                'border-bottom-right-radius': string;
+                                'border-bottom-left-radius': string;
+                                'border-top-left-radius': string;
+                                'border-left-color': string;
+                                'border-left-style': string;
+                                'border-left-width': string;
+                                'border-top-color': string;
+                                'border-top-style': string;
+                                'border-top-width': string;
+                                'user-select': string;
+                                'font-size': string;
+                                'padding-left': string;
+                                'padding-right': string;
+                                'padding-top': string;
+                                'padding-bottom': string;
+                                'line-height': string;
+                                outline: string;
+                                position: string;
+                            };
+                        };
+                        readonly label: {
+                            readonly default: {
+                                'margin-bottom': string;
+                                display: string;
+                                cursor: string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        readonly error: {
+                            readonly default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                readonly password: {
+                    readonly name: "Form Control Password";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {};
+                        };
+                        readonly input: {
+                            readonly default: {
+                                width: string;
+                                display: string;
+                                'align-items': string;
+                                'border-right-color': string;
+                                'border-right-style': string;
+                                'border-right-width': string;
+                                'border-top-right-radius': string;
+                                'border-bottom-color': string;
+                                'border-bottom-style': string;
+                                'border-bottom-width': string;
+                                'border-bottom-right-radius': string;
+                                'border-bottom-left-radius': string;
+                                'border-top-left-radius': string;
+                                'border-left-color': string;
+                                'border-left-style': string;
+                                'border-left-width': string;
+                                'border-top-color': string;
+                                'border-top-style': string;
+                                'border-top-width': string;
+                                'user-select': string;
+                                'font-size': string;
+                                'padding-left': string;
+                                'padding-right': string;
+                                'padding-top': string;
+                                'padding-bottom': string;
+                                'line-height': string;
+                                outline: string;
+                                position: string;
+                            };
+                        };
+                        readonly label: {
+                            readonly default: {
+                                'margin-bottom': string;
+                                display: string;
+                                cursor: string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        readonly error: {
+                            readonly default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                readonly number: {
+                    readonly name: "Form Control Number";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {};
+                        };
+                        readonly input: {
+                            readonly default: {
+                                width: string;
+                                display: string;
+                                'align-items': string;
+                                'border-right-color': string;
+                                'border-right-style': string;
+                                'border-right-width': string;
+                                'border-top-right-radius': string;
+                                'border-bottom-color': string;
+                                'border-bottom-style': string;
+                                'border-bottom-width': string;
+                                'border-bottom-right-radius': string;
+                                'border-bottom-left-radius': string;
+                                'border-top-left-radius': string;
+                                'border-left-color': string;
+                                'border-left-style': string;
+                                'border-left-width': string;
+                                'border-top-color': string;
+                                'border-top-style': string;
+                                'border-top-width': string;
+                                'user-select': string;
+                                'font-size': string;
+                                'padding-left': string;
+                                'padding-right': string;
+                                'padding-top': string;
+                                'padding-bottom': string;
+                                'line-height': string;
+                                outline: string;
+                                position: string;
+                            };
+                        };
+                        readonly label: {
+                            readonly default: {
+                                'margin-bottom': string;
+                                display: string;
+                                cursor: string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        readonly error: {
+                            readonly default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                readonly email: {
+                    readonly name: "Form Control Email";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {};
+                        };
+                        readonly input: {
+                            readonly default: {
+                                width: string;
+                                display: string;
+                                'align-items': string;
+                                'border-right-color': string;
+                                'border-right-style': string;
+                                'border-right-width': string;
+                                'border-top-right-radius': string;
+                                'border-bottom-color': string;
+                                'border-bottom-style': string;
+                                'border-bottom-width': string;
+                                'border-bottom-right-radius': string;
+                                'border-bottom-left-radius': string;
+                                'border-top-left-radius': string;
+                                'border-left-color': string;
+                                'border-left-style': string;
+                                'border-left-width': string;
+                                'border-top-color': string;
+                                'border-top-style': string;
+                                'border-top-width': string;
+                                'user-select': string;
+                                'font-size': string;
+                                'padding-left': string;
+                                'padding-right': string;
+                                'padding-top': string;
+                                'padding-bottom': string;
+                                'line-height': string;
+                                outline: string;
+                                position: string;
+                            };
+                        };
+                        readonly label: {
+                            readonly default: {
+                                'margin-bottom': string;
+                                display: string;
+                                cursor: string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        readonly error: {
+                            readonly default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                readonly textarea: {
+                    readonly name: "Form Control Textarea";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {};
+                        };
+                        readonly input: {
+                            readonly default: {
+                                width: string;
+                                display: string;
+                                'align-items': string;
+                                'border-right-color': string;
+                                'border-right-style': string;
+                                'border-right-width': string;
+                                'border-top-right-radius': string;
+                                'border-bottom-color': string;
+                                'border-bottom-style': string;
+                                'border-bottom-width': string;
+                                'border-bottom-right-radius': string;
+                                'border-bottom-left-radius': string;
+                                'border-top-left-radius': string;
+                                'border-left-color': string;
+                                'border-left-style': string;
+                                'border-left-width': string;
+                                'border-top-color': string;
+                                'border-top-style': string;
+                                'border-top-width': string;
+                                'user-select': string;
+                                'font-size': string;
+                                'padding-left': string;
+                                'padding-right': string;
+                                'padding-top': string;
+                                'padding-bottom': string;
+                                'line-height': string;
+                                outline: string;
+                                position: string;
+                            };
+                        };
+                        readonly label: {
+                            readonly default: {
+                                'margin-bottom': string;
+                                display: string;
+                                cursor: string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        readonly error: {
+                            readonly default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                readonly checkbox: {
+                    readonly name: "Form Control Checkbox";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {};
+                        };
+                        readonly input: {
+                            readonly default: {
+                                readonly 'margin-top': "0px";
+                                readonly 'margin-bottom': "0px";
+                                readonly 'margin-left': "0px";
+                                readonly 'margin-right': "4px";
+                            };
+                        };
+                        readonly label: {
+                            readonly default: {
+                                display: string;
+                                cursor: string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        readonly error: {
+                            readonly default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                readonly select: {
+                    readonly name: "Form Control Select";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {};
+                        };
+                        readonly input: {
+                            readonly default: {
+                                readonly cursor: "pointer";
+                                readonly width: string;
+                                readonly display: string;
+                                readonly 'align-items': string;
+                                readonly 'border-right-color': string;
+                                readonly 'border-right-style': string;
+                                readonly 'border-right-width': string;
+                                readonly 'border-top-right-radius': string;
+                                readonly 'border-bottom-color': string;
+                                readonly 'border-bottom-style': string;
+                                readonly 'border-bottom-width': string;
+                                readonly 'border-bottom-right-radius': string;
+                                readonly 'border-bottom-left-radius': string;
+                                readonly 'border-top-left-radius': string;
+                                readonly 'border-left-color': string;
+                                readonly 'border-left-style': string;
+                                readonly 'border-left-width': string;
+                                readonly 'border-top-color': string;
+                                readonly 'border-top-style': string;
+                                readonly 'border-top-width': string;
+                                readonly 'user-select': string;
+                                readonly 'font-size': string;
+                                readonly 'padding-left': string;
+                                readonly 'padding-right': string;
+                                readonly 'padding-top': string;
+                                readonly 'padding-bottom': string;
+                                readonly 'line-height': string;
+                                readonly outline: string;
+                                readonly position: string;
+                            };
+                        };
+                        readonly label: {
+                            'margin-bottom': string;
+                            display: string;
+                            cursor: string;
+                            'font-weight': string;
+                            'font-size': string;
+                            'line-height': string;
+                            color: string;
+                            'user-select': string;
+                        };
+                        readonly error: {
+                            readonly default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<FormControlAttributes>;
+export default declaration;

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

@@ -0,0 +1,197 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/form/FormControl/declaration.ts
+var t = {
+	width: "100%",
+	display: "flex",
+	"align-items": "center",
+	"border-right-color": "#6f7780",
+	"border-right-style": "solid",
+	"border-right-width": "1px",
+	"border-top-right-radius": "4px",
+	"border-bottom-color": "#6f7780",
+	"border-bottom-style": "solid",
+	"border-bottom-width": "1px",
+	"border-bottom-right-radius": "4px",
+	"border-bottom-left-radius": "4px",
+	"border-top-left-radius": "4px",
+	"border-left-color": "#6f7780",
+	"border-left-style": "solid",
+	"border-left-width": "1px",
+	"border-top-color": "#6f7780",
+	"border-top-style": "solid",
+	"border-top-width": "1px",
+	"user-select": "none",
+	"font-size": "14px",
+	"padding-left": "16px",
+	"padding-right": "16px",
+	"padding-top": "8px",
+	"padding-bottom": "8px",
+	"line-height": "20px",
+	outline: "none",
+	position: "relative"
+}, n = {
+	display: "flex",
+	cursor: "pointer",
+	"font-weight": "600",
+	"font-size": "14px",
+	"line-height": "18px",
+	color: "#6b7280",
+	"user-select": "none"
+}, r = {
+	...n,
+	"margin-bottom": "4px"
+}, i = {
+	display: "block",
+	color: "red",
+	"margin-top": "4px"
+}, a = e()({
+	type: "formControl",
+	content: {
+		attributes: {
+			subType: "text",
+			name: "",
+			label: "Label",
+			placeholder: "",
+			defaultValue: "",
+			autoComplete: !0,
+			disabled: !1,
+			options: [],
+			required: !0,
+			minLength: 0,
+			maxLength: 0,
+			pattern: "",
+			patternMessage: "",
+			matches: "",
+			matchesMessage: "",
+			readOnly: !1
+		},
+		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.",
+			bindings: {},
+			styleSelectors: {
+				base: "",
+				label: "",
+				input: "",
+				error: ""
+			},
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !1,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "form",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee"
+		},
+		defaultStyle: {
+			name: "Form Control",
+			displayMode: "desktop",
+			style: { base: { default: {} } },
+			subTypes: {
+				hidden: {
+					name: "Form Control Hidden",
+					displayMode: "desktop",
+					style: {
+						base: {},
+						input: { default: {} },
+						label: { default: r },
+						error: { default: i }
+					}
+				},
+				text: {
+					name: "Form Control Text",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: t },
+						label: { default: r },
+						error: { default: i }
+					}
+				},
+				password: {
+					name: "Form Control Password",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: t },
+						label: { default: r },
+						error: { default: i }
+					}
+				},
+				number: {
+					name: "Form Control Number",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: t },
+						label: { default: r },
+						error: { default: i }
+					}
+				},
+				email: {
+					name: "Form Control Email",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: t },
+						label: { default: r },
+						error: { default: i }
+					}
+				},
+				textarea: {
+					name: "Form Control Textarea",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: t },
+						label: { default: r },
+						error: { default: i }
+					}
+				},
+				checkbox: {
+					name: "Form Control Checkbox",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: {
+							"margin-top": "0px",
+							"margin-bottom": "0px",
+							"margin-left": "0px",
+							"margin-right": "4px"
+						} },
+						label: { default: n },
+						error: { default: i }
+					}
+				},
+				select: {
+					name: "Form Control Select",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: {
+							...t,
+							cursor: "pointer"
+						} },
+						label: r,
+						error: { default: i }
+					}
+				}
+			}
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { a as default };