budibase/packages/standard-components/components.json

{
	"_lib": "./dist/index.js",
	"_templates": {
		"saveRecordButton": {
			"description": "Save record 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": "Input",
		"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": "models",
			"stripeColor": "string",
			"borderColor": "string",
			"backgroundColor": "string",
			"color": "string"
		}
	},
	"datagrid": {
		"description": "a datagrid component with functionality to add, remove and edit rows.",
		"data": true,
		"props": {
			"datasource": "models"
		}
	},
	"dataform": {
		"description": "an HTML table that fetches data from a table or view and displays it.",
		"data": true,
		"props": {
			"model": "models",
			"title": "string",
			"buttonText": "string"
		}
	},
	"dataformwide": {
		"description": "an HTML table that fetches data from a table or view and displays it.",
		"data": true,
		"props": {
			"model": "models",
			"title": "string",
			"buttonText": "string"
		}
	},
	"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"
				]
			}
		}
	},
	"list": {
		"description": "A configurable data list that attaches to your backend models.",
		"context": "datasource",
		"children": true,
		"data": true,
		"props": {
			"datasource": "models"
		}
	},
	"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"
		}
	},
	"recorddetail": {
		"description": "Loads a record, using an ID in the url",
		"context": "model",
		"children": true,
		"data": true,
		"props": {
			"model": "models"
		}
	},
	"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"
				]
			}
		}
	},
	"datamap": {
		"description": "shiny chart",
		"data": true,
		"props": {
			"model": "models"
		}
	},
	"donut": {
		"description": "Donut Chart",
		"data": true,
		"props": {
			"datasource": "string",
			"data": "string",
			"color": "string",
			"height": "number",
			"width": "number",
			"hasFixedHighlightedSlice": "bool",
			"hasLastHoverSliceHighlighted": "bool",
			"hasHoverAnimation": "bool",
			"numberFormat": "string",
			"nameKey": "string",
			"valueKey": "string",
			"isAnimated": "bool",
			"externalRadius": "number",
			"internalRadius": "number",
			"radiusHoverOffset": "number",
			"percentageFormat": "string",
			"useLegend": "bool",
			"legendWidth": "number",
			"legendHeight": "number"
		}
	},
	"sparkline": {
		"description": "Sparkline Chart",
		"data": true,
		"props": {
			"model": "string",
			"areaGradient": "string",
			"height": "number",
			"width": "number",
			"dateLabel": "string",
			"duration": "string",
			"isAnimated": "bool",
			"lineGradient": "string",
			"titleText": "string",
			"valueLabel": "string"
		}
	},
	"stackedbar": {
		"description": "Stacked Bar Chart",
		"data": true,
		"props": {
			"datasource": "models",
			"color": "string",
			"height": "number",
			"width": "number",
			"margin": "string",
			"aspectRatio": "string",
			"betweenBarsPadding": "number",
			"grid": "string",
			"hasPercentage": "bool",
			"hasReversedStacks": "bool",
			"isAnimated": "bool",
			"isHorizontal": "bool",
			"locale": "string",
			"nameLabel": "string",
			"percentageAxisToMaxRatio": "number",
			"stackLabel": "string",
			"valueLabel": "string",
			"valueLabelFormat": "string",
			"xTicks": "number",
			"yTicks": "number",
			"yAxisLabel": "string",
			"yAxisLabelOffset": "number",
			"useLegend": "bool"
		}
	},
	"stackarea": {
		"description": "Step Chart",
		"data": true,
		"props": {
			"model": "string",
			"color": "string",
			"height": "number",
			"width": "number",
			"margin": "string",
			"xAxisLabel": "string",
			"xAxisLabelOffset": "string",
			"yAxisLabel": "string",
			"yAxisLabelOffset": "string",
			"areaCurve": "number",
			"areaOpacity": "number",
			"aspectRatio": "number",
			"dateLabel": "string",
			"grid": "string",
			"isAnimated": "bool",
			"keyLabel": "string",
			"locale": "string",
			"tooltipThreshold": "number",
			"topicsOrder": "string",
			"valueLabel": "string",
			"xAxisCustomFormat": "string",
			"xAxisFormat": "string",
			"xAxisScale": "string",
			"xAxisValueType": "string",
			"yTicks": "number",
			"xTicks": "number",
			"yAxisBaseline": "string",
			"useLegend": "bool"
		}
	},
	"step": {
		"description": "Step Chart",
		"data": true,
		"props": {
			"model": "string",
			"height": "number",
			"width": "number",
			"margin": "string",
			"xAxisLabel": "string",
			"xAxisLabelOffset": "string",
			"yAxisLabel": "string",
			"yAxisLabelOffset": "string",
			"yTicks": "string"
		}
	},
	"scatterplot": {
		"description": "Scatterplot Chart",
		"data": true,
		"props": {
			"model": "string",
			"color": "string",
			"height": "number",
			"width": "number",
			"aspectRatio": "string",
			"circleOpacity": "string",
			"grid": "string",
			"hasCrossHairs": "bool",
			"isAnimated": "bool",
			"maxCircleArea": "number",
			"xAxisLabel": "string",
			"xAxisLabelOffset": "string",
			"xTicks": "string",
			"yAxisFormat": "string",
			"yAxisLabel": "string",
			"yAxisLabelOffset": "string",
			"yTicks": "string"
		}
	},
	"bar": {
		"description": "Bar Chart",
		"data": true,
		"props": {
			"datasource": "models",
			"nameLabel": "string",
			"valueLabel": "string",
			"betweenBarsPadding": "number",
			"gradient": "string",
			"color": "string",
			"hasSingleBarHighlight": "bool",
			"height": "number",
			"width": "number",
			"isAnimated": "bool",
			"isHorizontal": "bool",
			"labelNumberFormat": "number",
			"locale": "string",
			"xAxisLabel": "string",
			"yAxisLabel": "string",
			"useLegend": "bool",
			"xTicks": "number",
			"yTicks": "number"
		}
	},
	"line": {
		"description": "Line Chart",
		"data": true,
		"props": {
			"datasource": "models",
			"width": "number",
			"height": "number",
			"axisTimeCombinations": "string",
			"color": "string",
			"grid": {
				"type": "string",
				"default": "horizontal"
			},
			"aspectRatio": "number",
			"dateLabel": "string",
			"isAnimated": {
				"type": "bool",
				"default": true
			},
			"lineCurve": "string",
			"locale": "string",
			"numberFormat": "string",
			"shouldShowAllDataPoints": {
				"type": "bool",
				"default": true
			},
			"topicLabel": "string",
			"valueLabel": "string",
			"xAxisValueType": {
				"type": "string",
				"default": "date"
			},
			"xAxisScale": "string",
			"xAxisFormat": {
				"type": "string",
				"default": "custom"
			},
			"xAxisCustomFormat": "string",
			"xAxisLabel": "string",
			"yAxisLabel": "string",
			"tooltipTitle": "string",
			"xTicks": "number",
			"yTicks": "number"
		}
	},
	"brush": {
		"description": "brush chart",
		"data": true,
		"props": {
			"model": "string",
			"gradient": "string",
			"height": "number",
			"width": "number",
			"margin": "string",
			"dateRange": "string",
			"locale": "string",
			"roundingTimeInterval": "string",
			"xAxisFormat": "string",
			"xTicks": "number",
			"xAxisCustomFormat": "string"
		}
	},
	"heatmap": {
		"description": "Heatmap chart",
		"data": true,
		"props": {
			"model": "string",
			"color": "string",
			"height": "number",
			"width": "number",
			"useLegend": "bool",
			"yAxisLabel": "string",
			"boxSize": "number"
		}
	},
	"groupedbar": {
		"description": "Groupedbar chart",
		"data": true,
		"props": {
			"datasource": "models",
			"nameLabel": "string",
			"valueLabel": "string",
			"color": "string",
			"height": "string",
			"width": "string",
			"margin": "string",
			"grid": "string",
			"groupLabel": "string",
			"isAnimated": "bool",
			"isHorizontal": "bool",
			"yTicks": "string",
			"useLegend": "bool",
			"tooltipTitle": "string"
		}
	},
	"bullet": {
		"description": "Bullet chart",
		"data": true,
		"props": {
			"model": "string",
			"color": "string",
			"customSubtitle": "string",
			"customTitle": "string",
			"numberFormat": "string",
			"paddingBetweenAxisAndChart": "number",
			"height": "number",
			"width": "number"
		}
	},
	"datepicker": {
		"description": "Date Picker",
		"bindable": "value",
		"props": {
			"placeholder": "string"
		}
	},
	"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": "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"
			}
		},
		"container": 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": "TableHead",
		"description": "an HTML <thead> tab",
		"props": {
			"className": "string"
		}
	},
	"tbody": {
		"name": "TableBody",
		"description": "an HTML <tbody> tab",
		"props": {
			"className": "string"
		}
	}
}