budibase/packages/standard-components/components.json

{
	"_lib": "./dist/index.js",
	"_templates": {
		"saveRowButton": {
			"description": "Save row button",
			"component": "button"
		}
	},
	"embed": {
		"name": "Embed",
		"description": "Embed stuff",
		"props": {
			"embed": "string"
		}
	},
	"Navigation": {
		"name": "Navigation",
		"description": "A basic header navigation component",
		"children": true,
		"props": {
			"logoUrl": "string",
			"title": "string",
			"backgroundColor": "string",
			"color": "string",
			"borderWidth": "string",
			"borderColor": "string",
			"borderStyle": "string"
		}
	},
	"button": {
		"name": "Button",
		"description": "an html <button />",
		"props": {
			"text": "string",
			"className": "string",
			"disabled": "bool",
			"onClick": "event"
		},
		"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",
			"title": "string",
			"usernameLabel": {
				"type": "string",
				"default": "Username"
			},
			"passwordLabel": {
				"type": "string",
				"default": "Password"
			},
			"loginButtonLabel": {
				"type": "string",
				"default": "Login"
			},
			"buttonClass": "string",
			"inputClass": "string",
			"buttonText": "string"
		},
		"tags": [
			"login",
			"credentials",
			"password",
			"logon"
		]
	},
	"input": {
		"name": "Textfield",
		"bindable": "value",
		"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",
		"bindable": "value",
		"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",
			"type": {
				"type": "string",
				"default": "none"
			}
		},
		"tags": [
			"div",
			"container"
		]
	},
	"textfield": {
		"name": "Textfield",
		"description": "A component that allows the user to input text.",
		"props": {
			"label": "string",
			"type": "string",
			"value": "string",
			"onchange": "event"
		}
	},
	"checkbox": {
		"name": "Checkbox",
		"bindable": "value",
		"description": "A selectable checkbox component",
		"props": {
			"label": "string",
			"checked": "bool",
			"value": "string",
			"onchange": "event"
		}
	},
	"radiobutton": {
		"name": "Radiobutton",
		"bindable": "value",
		"description": "A selectable radiobutton component",
		"props": {
			"label": "string",
			"checked": "bool",
			"value": "string",
			"onchange": "event"
		}
	},
	"icon": {
		"description": "A HTML icon tag",
		"props": {
			"icon": "string",
			"size": {
				"type": "string",
				"default": "fa-lg"
			},
			"color": {
				"type": "string",
				"default": "#000"
			}
		}
	},
	"datatable": {
		"description": "an HTML table that fetches data from a table or view and displays it.",
		"data": true,
		"props": {
			"datasource": "tables",
			"stripeColor": "string",
			"borderColor": "string",
			"backgroundColor": "string",
			"color": "string"
		}
	},
	"datagrid": {
		"name": "Grid",
		"description": "a datagrid component with functionality to add, remove and edit rows.",
		"data": true,
		"props": {
			"datasource": "tables",
			"editable": "bool",
			"theme": {
				"type": "options",
				"default": "alpine",
				"options": [
					"alpine",
					"alpine-dark",
					"balham",
					"balham-dark",
					"material"
				]
			},
			"height": {
				"type": "number",
				"default": "540"
			},
			"pagination": {
				"type": "bool",
				"default": true
			},
			"detailUrl": "string"
		}
	},
	"dataform": {
		"name": "Form",
		"description": "an HTML table that fetches data from a table or view and displays it.",
		"data": true,
		"props": {}
	},
	"dataformwide": {
		"name": "Form Wide",
		"description": "an HTML table that fetches data from a table or view and displays it.",
		"data": true,
		"props": {}
	},
	"datalist": {
		"description": "A configurable data list that attaches to your backend tables.",
		"data": true,
		"props": {
			"table": "tables",
			"layout": {
				"type": "options",
				"default": "list",
				"options": [
					"list",
					"grid"
				]
			}
		}
	},
	"list": {
		"name": "Repeater",
		"description": "A configurable data list that attaches to your backend tables.",
		"context": "datasource",
		"children": true,
		"data": true,
		"props": {
			"datasource": "tables"
		}
	},
	"stackedlist": {
		"name": "Stacked List",
		"description": "A stacked list component for displaying information",
		"props": {
			"imageUrl": "string",
			"heading": "string",
			"text1": "string",
			"text2": "string",
			"text3": "string",
			"destinationUrl": "string"
		}
	},
	"rowdetail": {
		"name": "Row Detail",
		"description": "Loads a row, using an ID in the url",
		"context": "table",
		"children": true,
		"data": true,
		"baseComponent": true,
		"props": {
			"table": "tables"
		}
	},
	"newrow": {
		"name": "New Row",
		"description": "Prepares a new row for creation",
		"context": "table",
		"children": true,
		"data": true,
		"baseComponent": true,
		"props": {
			"table": "tables"
		}
	},
	"card": {
		"name": "Card",
		"props": {
			"imageUrl": "string",
			"heading": "string",
			"description": "string",
			"linkText": "string",
			"linkUrl": "string",
			"color": "string",
			"linkHoverColor": "string",
			"imageHeight": {
				"type": "options",
				"default": "20rem",
				"options": [
					"12rem",
					"16rem",
					"20rem",
					"24rem"
				]
			},
			"cardWidth": {
				"type": "options",
				"default": "20rem",
				"options": [
					"16rem",
					"20rem",
					"24rem"
				]
			}
		}
	},
	"cardhorizontal": {
		"name": "Horizontal Card",
		"props": {
			"imageUrl": "string",
			"heading": "string",
			"description": "string",
			"subtext": "string",
			"linkText": "string",
			"linkUrl": "string",
			"color": "string",
			"linkHoverColor": "string",
			"imageWidth": {
				"type": "options",
				"default": "8rem",
				"options": [
					"8rem",
					"12rem",
					"16rem"
				]
			},
			"cardWidth": {
				"type": "options",
				"default": "32rem",
				"options": [
					"24rem",
					"28rem",
					"32rem",
					"40rem",
					"48rem",
					"60rem",
					"100%"
				]
			},
			"imageHeight": {
				"type": "options",
				"default": "8rem",
				"options": [
					"8rem",
					"12rem",
					"16rem"
				]
			}
		}
	},
	"bar": {
		"description": "Bar Chart",
		"data": true,
		"props": {
			"title": "string",
			"datasource": "tables",
			"labelColumn": "string",
			"valueColumns": "string",
			"height": {
				"type": "number",
				"default": "400"
			},
			"width": "number",
			"dataLabels": "bool",
			"animate": {
				"type": "bool",
				"default": true
			},
			"xAxisLabel": "string",
			"yAxisLabel": "string",
			"legend": "bool",
			"stacked": "bool",
			"yAxisUnits": {
				"type": "options",
				"default": "Default",
				"options": [
					"Default", "Thousands", "Millions"
				]
			}
		}
	},
	"line": {
		"description": "Line Chart",
		"data": true,
		"props": {
			"title": "string",
			"datasource": "tables",
			"labelColumn": "string",
			"valueColumns": "string",
			"height": {
				"type": "number",
				"default": "400"
			},
			"width": "number",
			"dataLabels": {
				"type": "bool",
				"default": false
			},
			"animate": {
				"type": "bool",
				"default": true
			},
			"xAxisLabel": "string",
			"yAxisLabel": "string",
			"curve": {
				"type": "options",
				"options": [
					"Smooth",
					"Straight",
					"Stepline"
				],
				"default": "Smooth"
			},
			"legend": "bool",
			"yAxisUnits": {
				"type": "options",
				"default": "Default",
				"options": [
					"Default", "Thousands", "Millions"
				]
			}
		}
	},
	"area": {
		"description": "Area Chart",
		"data": true,
		"props": {
			"title": "string",
			"datasource": "tables",
			"labelColumn": "string",
			"valueColumns": "string",
			"height": {
				"type": "number",
				"default": "400"
			},
			"width": "number",
			"dataLabels": {
				"type": "bool",
				"default": false
			},
			"animate": {
				"type": "bool",
				"default": true
			},
			"xAxisLabel": "string",
			"yAxisLabel": "string",
			"curve": {
				"type": "options",
				"options": [
					"Smooth",
					"Straight",
					"Stepline"
				],
				"default": "Smooth"
			},
			"legend": "bool",
			"stacked": {
				"type": "bool",
				"default": true
			},
			"gradient": "bool",
			"yAxisUnits": {
				"type": "options",
				"default": "Default",
				"options": [
					"Default", "Thousands", "Millions"
				]
			}
		}
	},
	"pie": {
		"description": "Pie Chart",
		"data": true,
		"props": {
			"title": "string",
			"datasource": "tables",
			"labelColumn": "string",
			"valueColumn": "string",
			"height": {
				"type": "number",
				"default": "200"
			},
			"width": "number",
			"dataLabels": "bool",
			"animate": {
				"type": "bool",
				"default": true
			},
			"legend": {
				"type": "bool",
				"default": true
			}
		}
	},
	"donut": {
		"description": "Donut Chart",
		"data": true,
		"props": {
			"title": "string",
			"datasource": "tables",
			"labelColumn": "string",
			"valueColumn": "string",
			"height": {
				"type": "number",
				"default": "200"
			},
			"width": "number",
			"dataLabels": "bool",
			"animate": {
				"type": "bool",
				"default": true
			},
			"legend": {
				"type": "bool",
				"default": true
			}
		}
	},
	"datepicker": {
		"name": "Date Picker",
		"description": "Date Picker",
		"bindable": "value",
		"props": {
			"placeholder": "string"
		}
	},
	"link": {
		"name": "Link",
		"description": "an HTML anchor <a> tag",
		"props": {
			"url": "string",
			"openInNewTab": "bool",
			"text": "string",
			"color": "string",
			"hoverColor": "string",
			"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",
		"children": true,
		"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"
			}
		},
		"baseComponent": true,
		"tags": [
			"div",
			"container",
			"layout"
		]
	},
	"heading": {
		"name": "Heading",
		"description": "An HTML H1 - H6 tag",
		"props": {
			"className": "string",
			"text": "string",
			"type": {
				"type": "options",
				"default": "h1",
				"options": [
					"h1",
					"h2",
					"h3",
					"h4",
					"h5",
					"h6"
				]
			}
		},
		"tags": []
	},
	"thead": {
		"name": "Table Head",
		"description": "an HTML <thead> tab",
		"props": {
			"className": "string"
		}
	},
	"tbody": {
		"name": "Table Body",
		"description": "an HTML <tbody> tab",
		"props": {
			"className": "string"
		}
	}
}