this package use @mui
npm i @creaditor/emoji-picker-web-component
import "@creaditor/emoji-picker-web-component"
<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);