@plitzi/sdk-elements 0.30.19

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

@@ -0,0 +1,490 @@
+declare const FormControl: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./hocs/withFieldValue').WithFieldValueProps<import('./FormControl').FormControlProps>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            subType: string;
+            name: string;
+            label: string;
+            placeholder: string;
+            defaultValue: string;
+            autoComplete: boolean;
+            disabled: boolean;
+            options: never[];
+            required: boolean;
+            readOnly: boolean;
+        };
+        definition: {
+            label: string;
+            type: string;
+            description: string;
+            bindings: {};
+            styleSelectors: {
+                base: string;
+                label: string;
+                input: string;
+                error: 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: {};
+                };
+            };
+            subTypes: {
+                hidden: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {};
+                        input: {
+                            default: {};
+                        };
+                        label: {
+                            default: {
+                                display: string;
+                                cursor: string;
+                                'margin-bottom': string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        error: {
+                            default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                text: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {};
+                        };
+                        input: {
+                            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;
+                            };
+                        };
+                        label: {
+                            default: {
+                                display: string;
+                                cursor: string;
+                                'margin-bottom': string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        error: {
+                            default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                password: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {};
+                        };
+                        input: {
+                            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;
+                            };
+                        };
+                        label: {
+                            default: {
+                                display: string;
+                                cursor: string;
+                                'margin-bottom': string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        error: {
+                            default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                number: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {};
+                        };
+                        input: {
+                            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;
+                            };
+                        };
+                        label: {
+                            default: {
+                                display: string;
+                                cursor: string;
+                                'margin-bottom': string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        error: {
+                            default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                email: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {};
+                        };
+                        input: {
+                            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;
+                            };
+                        };
+                        label: {
+                            default: {
+                                display: string;
+                                cursor: string;
+                                'margin-bottom': string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        error: {
+                            default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                textarea: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {};
+                        };
+                        input: {
+                            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;
+                            };
+                        };
+                        label: {
+                            default: {
+                                display: string;
+                                cursor: string;
+                                'margin-bottom': string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            };
+                        };
+                        error: {
+                            default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                checkbox: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {};
+                        };
+                        input: {
+                            default: {
+                                'margin-top': string;
+                                'margin-bottom': string;
+                                'margin-left': string;
+                                'margin-right': string;
+                            };
+                        };
+                        label: {
+                            default: Omit<{
+                                display: string;
+                                cursor: string;
+                                'margin-bottom': string;
+                                'font-weight': string;
+                                'font-size': string;
+                                'line-height': string;
+                                color: string;
+                                'user-select': string;
+                            }, "margin-bottom">;
+                        };
+                        error: {
+                            default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+                select: {
+                    name: string;
+                    displayMode: string;
+                    style: {
+                        base: {
+                            default: {};
+                        };
+                        input: {
+                            default: {
+                                cursor: string;
+                                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;
+                            };
+                        };
+                        label: {
+                            display: string;
+                            cursor: string;
+                            'margin-bottom': string;
+                            'font-weight': string;
+                            'font-size': string;
+                            'line-height': string;
+                            color: string;
+                            'user-select': string;
+                        };
+                        error: {
+                            default: {
+                                display: string;
+                                color: string;
+                                'margin-top': string;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default FormControl;

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

@@ -0,0 +1,193 @@
+import e from "./FormControl.mjs";
+import { jsx as t } from "react/jsx-runtime";
+import { omit as n } from "@plitzi/plitzi-ui";
+import r from "@plitzi/plitzi-ui/icons/Form";
+//#region src/elements/form/FormControl/index.tsx
+var i = {
+	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"
+}, a = {
+	display: "flex",
+	cursor: "pointer",
+	"margin-bottom": "4px",
+	"font-weight": "600",
+	"font-size": "14px",
+	"line-height": "18px",
+	color: "#6b7280",
+	"user-select": "none"
+}, o = {
+	display: "block",
+	color: "red",
+	"margin-top": "4px"
+}, s = Object.assign(e, {
+	type: "formControl",
+	content: {
+		attributes: {
+			subType: "text",
+			name: "",
+			label: "Label",
+			placeholder: "",
+			defaultValue: "",
+			autoComplete: !0,
+			disabled: !1,
+			options: [],
+			required: !0,
+			readOnly: !1
+		},
+		definition: {
+			label: "Form Control",
+			type: "formControl",
+			description: "",
+			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",
+			icon: /* @__PURE__ */ t(r, {})
+		},
+		defaultStyle: {
+			name: "Form Control",
+			displayMode: "desktop",
+			style: { base: { default: {} } },
+			subTypes: {
+				hidden: {
+					name: "Form Control Hidden",
+					displayMode: "desktop",
+					style: {
+						base: {},
+						input: { default: {} },
+						label: { default: a },
+						error: { default: o }
+					}
+				},
+				text: {
+					name: "Form Control Text",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: i },
+						label: { default: a },
+						error: { default: o }
+					}
+				},
+				password: {
+					name: "Form Control Password",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: i },
+						label: { default: a },
+						error: { default: o }
+					}
+				},
+				number: {
+					name: "Form Control Number",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: i },
+						label: { default: a },
+						error: { default: o }
+					}
+				},
+				email: {
+					name: "Form Control Email",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: i },
+						label: { default: a },
+						error: { default: o }
+					}
+				},
+				textarea: {
+					name: "Form Control Textarea",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: i },
+						label: { default: a },
+						error: { default: o }
+					}
+				},
+				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(a, ["margin-bottom"]) },
+						error: { default: o }
+					}
+				},
+				select: {
+					name: "Form Control Select",
+					displayMode: "desktop",
+					style: {
+						base: { default: {} },
+						input: { default: {
+							...i,
+							cursor: "pointer"
+						} },
+						label: a,
+						error: { default: o }
+					}
+				}
+			}
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { s as default };

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

@@ -0,0 +1,14 @@
+import { ChangeEvent } from 'react';
+export type CheckboxProps = {
+    className?: string;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onValidate?: () => void;
+};
+declare const Checkbox: ({ className, id, name, placeholder, value, required, disabled, onChange, onValidate }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export default Checkbox;