budibase/packages/standard-components/components.json

{
	"_lib": "./dist/index.js",
	"_templates": {
		"saveRecordButton": {
			"description": "Save record button",
			"component": "button"
		}
	},
	"Navigation": {
		"name": "Navigation",
		"description": "A basic header navigation component",
		"props": {
			"logoUrl": "string",
			"title": "string",
			"backgroundColor": "colour",
			"color": "colour",
			"borderWidth": "string",
			"borderColor": "colour",
			"borderStyle": "string"
		}
	},
	"button": {
		"name": "Button",
		"description": "an html <button />",
		"props": {
			"contentText": {
				"type": "string",
				"default": "Button"
			},
			"className": "string",
			"disabled": "bool",
			"onClick": "event",
			"background": "colour",
			"color": "colour",
			"border": "string",
			"padding": "string",
			"hoverColor": "string",
			"hoverBackground": "string",
			"hoverBorder": "string",
			"fontFamily": {
				"type": "options",
				"default": "initial",
				"styleBindingProperty": "font-family",
				"options": [
					"initial",
					"Times New Roman",	
					"Georgia",
					"Arial",
					"Arial Black",	
					"Comic Sans MS",
					"Impact",	
					"Lucida Sans Unicode"
				]
			}
		},
		"tags": [
			"layout"
		],
		"presets": {
			"primary": {
				"contentText": "Primary Button Preset",
				"color": "papayawhip",
				"padding": "20px",
				"background": "blue"
			},
			"secondary": {
				"contentText": "Secondary Button Preset",
				"color": "rebeccapurple",
				"padding": "10px",
				"background": "#fff",
				"border": "1px solid red"
			},
			"error": {
				"contentText": "ERROR",
				"color": "red",
				"padding": "10px",
				"border": "1px solid red"
			}
		}
	},
	"login": {
		"name": "Login Control",
		"description": "A control that accepts username, password an also handles password resets",
		"props": {
			"logo": "asset",
			"loginRedirect": "string",
			"usernameLabel": {
				"type": "string",
				"default": "Username"
			},
			"passwordLabel": {
				"type": "string",
				"default": "Password"
			},
			"loginButtonLabel": {
				"type": "string",
				"default": "Login"
			},
			"buttonClass": "string",
			"inputClass": "string"
		},
		"tags": [
			"login",
			"credentials",
			"password",
			"logon"
		]
	},
	"input": {
		"name": "Input",
		"description": "An HTML input",
		"props": {
			"value": "string",
			"type": {
				"type": "options",
				"options": [
					"text",
					"password",
					"checkbox",
					"color",
					"date",
					"datetime-local",
					"email",
					"file",
					"hidden",
					"image",
					"month",
					"number",
					"radio",
					"range",
					"reset",
					"search",
					"submit",
					"tel",
					"time",
					"week"
				],
				"default": "text"
			},
			"onChange": "event",
			"className": "string"
		},
		"tags": [
			"form"
		]
	},
	"select": {
		"name": "Select",
		"description": "An HTML <select> (dropdown)",
		"props": {
			"value": "string",
			"className": "string"
		}
	},
	"option": {
		"name": "Option",
		"description": "An HTML <option>, to be used with <select>",
		"children": false,
		"props": {
			"value": "string",
			"text": "string"
		}
	},
	"text": {
		"name": "Text",
		"description": "stylable block of text",
		"children": false,
		"props": {
			"text": "string",
			"color": "colour",
			"fontFamily": {
				"type": "options",
				"default": "initial",
				"styleBindingProperty": "font-family",
				"options": [
					"initial",
					"Times New Roman",	
					"Georgia",
					"Arial",
					"Arial Black",	
					"Comic Sans MS",
					"Impact",	
					"Lucida Sans Unicode"
				]
			},
			"fontSize": "string",			
			"textAlign": {
				"type": "options",
				"default": "inline",
				"options": [
					"left",
					"center",
					"right"
				]
			},
			"verticalAlign": {
				"type": "options",
				"default": "inline",
				"options": [
					"top",
					"middle",
					"bottom"
				]
			},
			"formattingTag": {
				"type": "options",
				"default": "none",
				"options": [
					"none",
					"<b> - bold",
					"<strong> - important",
					"<i> - italic",
					"<em> - emphasized",
					"<mark> - marked text",
					"<small> - small",
					"<del> - deleted",
					"<ins> - inserted",
					"<sub> - subscript",
					"<sup> - superscript"
				]
			}
		},
		"tags": [
			"div",
			"container"
		]
	},
	"textfield": {
		"name": "Textfield",
		"description": "A component that allows the user to input text.",
		"props": {
			"label": "string",
			"value": "string",
			"onchange": "event"
		}
	},
	"checkbox": {
		"name": "Checkbox",
		"description": "A selectable checkbox component",
		"props": {
			"label": "string",
			"checked": "bool",
			"value": "string",
			"onchange": "event"
		}
	},
	"radiobutton": {
		"name": "Radiobutton",
		"description": "A selectable radiobutton component",
		"props": {
			"label": "string",
			"checked": "bool",
			"value": "string",
			"onchange": "event"
		}
	},
	"icon": {
		"description": "A HTML icon tag",
		"props": {
			"icon": "string",
			"fontSize": "string",
			"color": "colour"
		}
	},
	"datatable": {
		"description": "an HTML table that fetches data from a model or view and displays it.",
		"data": true,
		"props": {
			"model": "models" 
		}
	},
	"dataform": {
		"description": "an HTML table that fetches data from a model or view and displays it.",
		"data": true,
		"props": {
			"model": "models"
		}
	},
	"datalist": {
		"description": "A configurable data list that attaches to your backend models.",
		"data": true,
		"props": {
			"model": "models",
			"layout": {
				"type": "options",
				"default": "list",
				"options": [
					"list",
					"grid"
				]
			}
		}
	},
	"datachart": {
		"description": "shiny chart",
		"data": true,
		"props": {
			"model": "models",
			"type": {
				"type": "options",
				"default": "column2d",
				"options": [
					"column3d",
					"line",
					"area2d",
					"bar2d",
					"bar3d",
					"pie2d",
					"pie3d",
					"doughnut2d",
					"doughnut3d",
					"pareto2d",
					"pareto3d"
				]
			}
		}
	},
	"link": {
		"description": "an HTML anchor <a> tag",
		"props": {
			"url": "string",
			"openInNewTab": "bool",
			"text": "string",
			"color": "colour",
			"hoverColor": "colour",
			"underline": "bool",
			"fontSize": "string",
			"fontFamily": {
				"type": "options",
				"default": "initial",
				"styleBindingProperty": "font-family",
				"options": [
					"initial",
					"Times New Roman",	
					"Georgia",
					"Arial",
					"Arial Black",	
					"Comic Sans MS",
					"Impact",	
					"Lucida Sans Unicode"
				]
			}
		}
	},
	"image": {
		"description": "an HTML <img> tag",
		"props": {
			"url": "string",
			"className": "string",
			"description": "string",
			"height": "string",
			"width": "string"
		}
	},
	"container": {
		"name": "Container",
		"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
		"props": {
			"className": "string",
			"onLoad": "event",
			"type": {
				"type": "options",
				"options": [
					"article",
					"aside",
					"details",
					"div",
					"firgure",
					"figcaption",
					"footer",
					"header",
					"main",
					"mark",
					"nav",
					"paragraph",
					"summary"
				],
				"default": "div"
			},
			"backgroundColor": "string",
			"color": "string",
			"borderWidth": "string",
			"borderColor": "string",
			"borderStyle": {
				"type": "options",
				"options": [
					"none",
					"solid",
					"dotted",
					"dashed",
					"double",
					"groove",
					"ridge",
					"inset",
					"outset"
				],
				"default": "none"
			}
		},
		"container": true,
		"tags": [
			"div",
			"container",
			"layout"
		]
	},
	"heading": {
		"name": "Heading",
		"description": "An HTML H1 - H6 tag",
		"props": {
			"className": "string",
			"color":"colour",
			"text": "string",
		"type": {
				"type": "options",
				"default": "h1",
				"options": [
					"h1",
					"h2",
					"h3",
					"h4",
					"h5",
					"h6"
				]
			},
			"fontFamily": {
				"type": "options",
				"default": "initial",
				"styleBindingProperty": "font-family",
				"options": [
					"initial",
					"Times New Roman",	
					"Georgia",
					"Arial",
					"Arial Black",	
					"Comic Sans MS",
					"Impact",	
					"Lucida Sans Unicode"
				]
			}
		},
		"tags": []
	},
	"thead": {
		"name": "TableHead",
		"description": "an HTML <thead> tab",
		"props": {
			"className": "string"
		}
	},
	"tbody": {
		"name": "TableBody",
		"description": "an HTML <tbody> tab",
		"props": {
			"className": "string"
		}
	}
}