budibase/packages/standard-components/components.json

{
	"_lib": "./dist/index.js",
	"button" : {
		"importPath": "button",
		"name": "Button",
		"description": "an html <button />",
		"props": {
			"contentText": { "type": "string", "default": "Button" },
			"contentComponent": "component",
			"className": {"type": "string", "default": "default"},
			"disabled": "bool",
			"onClick": "event"
		},
		"tags": ["button"]
	}, 
	"login" : {
		"importPath": "Login",
		"name": "Login Control",
		"desciption": "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"]
	},
	"form" : {
		"importPath": "Form",
		"name": "Form",
		"desciption": "A form - allgned fields with labels",
		"props" : {
			"containerClass": "string",
			"formControls": {
				"type":"array",
				"elementDefinition": {
					"label": "string",
					"control":"component"
				}
			}
		},
		"tags": ["form"]
	},
	"textbox" : {
		"importPath": "Textbox",
		"name": "Textbox",
		"desciption": "An input type=text or password",
		"props" : {
			"value": "string",
			"hideValue": "boolean",
			"className": {"type": "string", "default": "default"}
		},
		"tags": ["form"]
	},
	"stackpanel": {
		"importPath": "StackPanel",
		"name": "StackPanel",
		"desciption": "Layout elements in a stack, either horizontally or vertically",
		"props" : {
			"direction": {
				"type": "options", 
				"options": ["horizontal", "vertical"],
				"default":"horizontal"
			},
			"children": {
				"type":"array",
				"elementDefinition": {
					"control":"component"
				}
			},
			"width": {"type":"string","default":"auto"},
			"height": {"type":"string","default":"auto"},
			"containerClass":"string",
			"itemContainerClass":"string"
		},
		"tags": ["div", "container", "layout", "panel"]
	},
	"grid": {
		"importPath": "Grid",
		"name": "Grid",
		"desciption": "CSS Grid layout ",
		"props" : {
			"gridTemplateRows": "string",
			"gridTemplateColumns": "string",
			"children": {
				"type":"array",
				"elementDefinition": {
					"control":"component",
					"gridColumn":"string",
					"gridRow":"string",
					"gridColumnStart":"string",
					"gridColumnEnd":"string",
					"gridRowStart":"string",
					"gridRowEnd":"string"
				}
			},
			"width": {"type":"string","default":"auto"},
			"height": {"type":"string","default":"auto"},
			"containerClass":"string",
			"itemContainerClass":"string"
		},
		"tags": ["div", "container", "layout", "panel", "grid"]
	},
	"text": {
		"importPath": "Text",
		"name": "Text",
		"desciption": "stylable block of text",
		"props" : {
			"value": "string",
			"containerClass": "string",
			"font": "string",
			"color": "string",
			"textAlign": {
				"type": "options", 
				"default":"inline", 
				"options": [
					"left", "center", "right"
				]
			},
			"verticalAlign": {
				"type": "options", 
				"default":"inline", 
				"options": [
					"top", "middle", "bottom"
				]
			},
			"display": {
				"type": "options", 
				"default":"inline", 
				"options": [
					"inline", "block", "inline-block"
				]
			}
		},
		"tags": ["div", "container"]
	},
	"panel": {
		"importPath": "Panel",
		"name": "Panel",
		"desciption": "A stylable div with a component inside",
		"props" : {
			"text": "string",
			"component": "component",
			"containerClass": "string",
			"background": "string",
			"border": "string",
			"borderRadius":"string",
			"font": "string",
			"color": "string",
			"padding": "string",
			"display": {
				"type": "options", 
				"default":"inline", 
				"options": [
					"inline", "block", "inline-block"
				]
			}
		},
		"tags": ["div", "container"]
	},
	"nav": {
		"importPath": "Nav",
		"name": "Nav",
		"desciption": "A nav - a side bar of buttons that control the currently active component",
		"props" : {
			"navBarBackground": {"type" :"string", "default":"silver"},
			"navBarBorder": "string",
			"navBarColor": {"type" :"string", "default":"black"},
			"selectedItemBackground": {"type" :"string", "default":"white"},
			"selectedItemColor": {"type" :"string", "default":"black"},
			"selectedItemBorder": "string",
			"itemHoverBackground": {"type" :"string", "default":"gainsboro"},
			"itemHoverColor": {"type" :"string", "default":"black"},
			"items": {
				"type": "array",
				"elementDefinition" : {
					"title": "string",
					"component": "component"
				}
			}

		},
		"tags": ["nav", "navigation", "sidebar"]
	},
	"table": {
		"importPath": "Table",
		"name": "Table",
		"desciption": "An HTML table",
		"props" : {
			"data": "state",
			"columns": {
				"type": "array",
				"elementDefinition" : {
					"title": "string",
					"value": "string"
				}
			},
			"onRowClick":"event",
			"tableClass": {"type":"string", "default":"table-default"},
			"theadClass": {"type":"string", "default":"thead-default"},
			"tbodyClass": {"type":"string", "default":"tbody-default"},
			"trClass": {"type":"string", "default":"tr-default"},
			"thClass": {"type":"string", "default":"th-default"}
		},
		"tags": ["table"]
	}
}