@creaditor/form-builder-web-component

Creaditor Form-Builder-web-component

Keep the following in mind

this package use @mui

Installation

Node package

npm i @creaditor/emoji-picker-web-component

Include the module in your application

import "@creaditor/emoji-picker-web-component"

Add the tag in as dom element

<cdtr-form-builder></cdtr-form-builder>

Example:

  const FormBuilder = window.formBuilder = document.createElement("cdtr-form-builder");
        FormBuilder.language = "he";
        FormBuilder.autoComplete = "off"
        FormBuilder.direction = "rtl";
        FormBuilder.spacing = 2;
        FormBuilder.theme = {
          palette:{
            primary:{
            main: "#845EC2"
          }
          }
        }
        FormBuilder.style = {
          width:"500px",
          padding:"30px",
          background:"#fff",
          boxShadow:"0 0 10px #ccc",
          margin:"auto",
          borderRadius:"10px"
        }
        FormBuilder.onSortEnd = ({items})=>{
          FormBuilder.items = items;
        }
        FormBuilder.items = [
          {
            type: "input",
            props: {
              id:4,
              autoFocus: true,
              type: "text",
              variant:"outlined",
              style: {},
              classList: [],
              placeholder: "",
              name: "username",
              fullWidth: true,
              value: "",
              autocomplete:"off",
              label: {
                props: {
                  inline:true,
                   style: {}, classList: [], text: "שם" },

              },
            },
          },
          {
            type: "input",
            props: {
              id:5,
              type: "email",
              variant:"outlined",
              style: {

              },
              fullWidth: true,
              classList: [],
              placeholder: "נא למלא את המייל",
              name: "username",
              value: "",
              autocomplete:"off",
              label: {
                props: {
                  inline:false,
                   style: {}, classList: [], text: "אימייל" },
              },
            },
          },
          {
            type: "input",
            props: {
              id:6,
              type: "number",
              variant:"outlined",
              style: {
                backgroundColor:"#f5f5f5",
              },
              fullWidth: true,
              classList: [],
              placeholder: "נא למלא את המספר",
              name: "number",
              value: "",
              autocomplete:"off",
              label: {
                props: {
                  inline:false,
                   style: {}, classList: [], text: "number" },
              },
            },
          },
          {
            type:"radio-group",
            props:{
              id:39,
              style: {},
              classList: [],
              name: "radio",
              value: "",
              label: {
                props: {
                  inline:false,
                   style: {}, classList: [], text: "מה המין שלך" },
              },
              items:[
                {
                  value:"זכר",
                  label:"זכר"
                },
                {
                  value:"נקבה",
                  label:"נקבה"
                },
                {
                  value:"אחר",
                  label:"אחר"
                }
              ]
            }
          },
          {
            type: "input",
            props: {
              id:2222,
              type: "date",
              variant:"outlined",
              style: {
                backgroundColor:"#f5f5f5",
              },
              fullWidth: true,
              classList: [],
              placeholder: "נא למלא את המספר",
              name: "datetime",
              value: "",
              autocomplete:"off",
              label: {
                props: {
                  inline:false,
                   style: {}, classList: [], text: "datetime" },
              },
            },
          },
          {
            type:"checkbox",
            props:{
              id:456,
              style:{},
              justify:"start",
              classList:[],
              isRequired:true,
              label: {
                props: {
                  inline:false,
                   style: {}, classList: [], text: "האם אתה מסכים לחוזה" },
              },
            }
          },
          {
            type:"menu",
            props:{
              id:77,
              variant:"outlined",
              triggerProps:{
                fullWidth: true,
              classList: [],
              placeholder: "נא למלא את המספר",
              name: "multi",
              text: "בחירה מרובה",
              style:{
                justifyContent:"right",
                border:"1px solid #ccc",
              }
              },
              label: {
                props: {
                  inline:false,
                   style: {}, classList: [], text: "number" },
              },
              items:[
                {
                  name:"בחירה 1",
                  value:"1"
                },
                {
                  name:"בחירה 2",
                  value:"2"
                },
                {
                  name:"בחירה 3",
                  value:"3"
                }
              ]
            },
          },
          {
            type: "textarea",
            props: {
              id:7,
              variant:"outlined",
              style: {
                backgroundColor:"#f5f5f5",
                width:"100%",
                maxWidth:"100%",
                borderRadius:"3px",
                fontFamily:"Arial",
                padding:"10px",

              },
              fullWidth: true,
              classList: [],
              placeholder: "כתוב על עצמך",
              name: "desctiption",
              minRows: 5,
              ariaLabel:"for description",
              value: "",
              autocomplete:"off",
              label: {
                props: {
                  inline:false,
                   style: {}, classList: [], text: "תיאור" },
              },
            },
          },
          {
            type: "button",
            props: {
              style: {
                width: "100%",
                background:'#FF6F91'
              },
              size:"large",
              variant:"contained",
              // color:"primary",
              fullWidth: true,
              classList: [],
              text: "שליחה",
              disabled: false,
              onClick: [],
            },
          },
        ];


        document.getElementById("root").appendChild(FormBuilder);