budibase/packages/standard-components/components.json

532 lines
10 KiB
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",
"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",
"name": "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",
"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",
"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": "string"
}
},
"datatable": {
"description": "an HTML table that fetches data from a table or view and displays it.",
"data": true,
"props": {
"model": "models"
}
},
"dataform": {
"description": "an HTML table that fetches data from a table or view and displays it.",
"data": true,
"props": {
"model": "models"
}
},
"dataformwide": {
"description": "an HTML table that fetches data from a table 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"
]
}
}
},
"list": {
"description": "A configurable data list that attaches to your backend models.",
"data": true,
"props": {
"model": "models"
}
},
"recorddetail": {
"description": "Loads a record, using an ID in the url",
"data": true,
"props": {
"model": "models"
}
},
"datamap": {
"description": "shiny chart",
"data": true,
"props": {
"model": "models"
}
},
"donut": {
"description": "Donut Chart",
"data": true,
"props": {
"color": "string",
"height": "number",
"width": "number",
"hasFixedHighlightedSlice": "bool",
"hasLastHoverSliceHighlighted": "bool",
"hasHoverAnimation": "bool",
"numberFormat": "string",
"isAnimated": "bool",
"externalRadius": "number",
"internalRadius": "number",
"radiusHoverOffset": "number",
"useLegend": "bool",
"percentageFormat": "string"
}
},
"sparkline": {
"description": "Sparkline Chart",
"data": true,
"props": {
"areaGradient": "string",
"height": "number",
"width": "number",
"dateLabel": "string",
"duration": "string",
"isAnimated": "bool",
"lineGradient": "string",
"titleText": "string",
"valueLabel": "string"
}
},
"bar": {
"description": "Bar Chart",
"data": true,
"props": {
"betweenBarsPadding": "number",
"gradient": "string",
"color": "string",
"enableLabels": "bool",
"hasSingleBarHighlight": "bool",
"height": "number",
"width": "number",
"isAnimated": "bool",
"isHorizontal": "bool",
"xAxisLabelOffset": "number",
"yAxisLabelOffset": "number",
"labelNumberFormat": "number",
"labelSize": "number",
"locale": "string",
"nameLabel": "string",
"numberLabel": "string",
"xAxisLabel": "string",
"yAxisLabel": "string",
"useLegend": "bool",
"xTicks": "number",
"yTicks": "number"
}
},
"line": {
"description": "Line Chart",
"data": true,
"props": {
"width": "number",
"height": "number",
"axisTimeCombinations": "string",
"color": "string",
"grid": "string",
"aspectRatio": "number",
"dateLabel": "string",
"isAnimated": "bool",
"lineCurve": "string",
"locale": "string",
"numberFormat": "string",
"shouldShowAllDataPoints": "bool",
"topicLabel": "string",
"valueLabel": "string",
"xAxisValueType": "string",
"xAxisScale": "string",
"xAxisFormat": "string",
"xAxisCustomFormat": "string",
"xAxisLabel": "string"
}
},
"brush":{
"description": "brush chart",
"data": true,
"props": {
"gradient": "string",
"height": "number",
"width": "number",
"margin": "string",
"dateRange": "string",
"locale": "string",
"roundingTimeInterval": "string",
"xAxisFormat": "string",
"xTicks": "number",
"xAxisCustomFormat": "string"
}
},
"heatmap": {
"description": "Groupedbar chart",
"data": true,
"props": {
"color": "string",
"height": "number",
"width": "number",
"useLegend": "bool",
"yAxisLabel": "string",
"boxSize": "number"
}
},
"groupedbar": {
"description": "Groupedbar chart",
"data": true,
"props": {
"color": "string",
"height": "string",
"width": "string",
"margin": "string",
"aspectRatio": "number",
"grid":"string",
"groupLabel": "string",
"isAnimated": "bool",
"isHorizontal": "bool",
"nameLabel": "string",
"valueLabel":"string",
"yTicks": "string",
"yTickTextOffset": "string",
"useLegend": "bool"
}
},
"bullet": {
"description": "Bullet chart",
"data": true,
"props": {
"color": "string",
"customSubtitle": "string",
"customTitle": "string",
"numberFormat": "string",
"paddingBetweenAxisAndChart": "number",
"height": "number",
"width": "number"
}
},
"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",
"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"
}
}
}