budibase/packages/standard-components/components.json

669 lines
12 KiB
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"
}
},
"button": {
"name": "Button",
"description": "an html <button />",
"props": {
"text": "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": "string",
"title": "string",
"buttonText": "string"
},
"tags": [
"login",
"credentials",
"password",
"logon"
]
},
"input": {
"name": "Textfield",
"bindable": "value",
"description": "An HTML input",
"props": {
"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"
}
},
"tags": [
"form"
]
},
"text": {
"name": "Text",
"description": "stylable block of text",
"props": {
"text": "string",
"type": {
"type": "string",
"default": "none"
}
},
"tags": [
"div",
"container"
]
},
"richtext": {
"name": "Rich Text",
"description": "A component that allows the user to enter long form text.",
"props": {
"value": "string"
}
},
"icon": {
"description": "A HTML icon tag",
"props": {
"icon": "string",
"size": {
"type": "string",
"default": "fa-lg"
},
"color": {
"type": "string",
"default": "#000"
}
}
},
"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": {}
},
"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"
]
}
}
},
"cardstat": {
"name": "Stat Card",
"props": {
"title": "string",
"value": "string",
"label": "string",
"color": "string",
"bordercolor": "string"
}
},
"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": "string",
"default": "400"
},
"width": "string",
"dataLabels": "bool",
"animate": {
"type": "bool",
"default": true
},
"xAxisLabel": "string",
"yAxisLabel": "string",
"legend": "bool",
"stacked": "bool",
"yAxisUnits": {
"type": "options",
"default": "Default",
"options": [
"Default", "Thousands", "Millions"
]
},
"palette": {
"type": "options",
"default": "Palette 1",
"options": [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
}
}
},
"line": {
"description": "Line Chart",
"data": true,
"props": {
"title": "string",
"datasource": "tables",
"labelColumn": "string",
"valueColumns": "string",
"height": {
"type": "string",
"default": "400"
},
"width": "string",
"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"
]
},
"palette": {
"type": "options",
"default": "Palette 1",
"options": [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
}
}
},
"area": {
"description": "Area Chart",
"data": true,
"props": {
"title": "string",
"datasource": "tables",
"labelColumn": "string",
"valueColumns": "string",
"height": {
"type": "string",
"default": "400"
},
"width": "string",
"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"
]
},
"palette": {
"type": "options",
"default": "Palette 1",
"options": [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
}
}
},
"pie": {
"description": "Pie Chart",
"data": true,
"props": {
"title": "string",
"datasource": "tables",
"labelColumn": "string",
"valueColumn": "string",
"height": {
"type": "string",
"default": "200"
},
"width": "string",
"dataLabels": "bool",
"animate": {
"type": "bool",
"default": true
},
"legend": {
"type": "bool",
"default": true
},
"palette": {
"type": "options",
"default": "Palette 1",
"options": [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
}
}
},
"donut": {
"description": "Donut Chart",
"data": true,
"props": {
"title": "string",
"datasource": "tables",
"labelColumn": "string",
"valueColumn": "string",
"height": {
"type": "string",
"default": "200"
},
"width": "string",
"dataLabels": "bool",
"animate": {
"type": "bool",
"default": true
},
"legend": {
"type": "bool",
"default": true
},
"palette": {
"type": "options",
"default": "Palette 1",
"options": [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
}
}
},
"candlestick": {
"description": "Candlestick Chart",
"data": true,
"props": {
"title": "string",
"datasource": "tables",
"dateColumn": "string",
"openColumn": "string",
"closeColumn": "string",
"highColumn": "string",
"lowColumn": "string",
"height": {
"type": "string",
"default": "400"
},
"width": "string",
"animate": {
"type": "bool",
"default": true
},
"xAxisLabel": "string",
"yAxisLabel": "string",
"yAxisUnits": {
"type": "options",
"default": "Default",
"options": [
"Default", "Thousands", "Millions"
]
}
}
},
"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"
}
},
"image": {
"description": "an HTML <img> tag",
"props": {
"url": "string"
}
},
"container": {
"name": "Container",
"children": true,
"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
"props": {
"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": {
"text": "string",
"type": {
"type": "options",
"default": "h1",
"options": [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6"
]
}
},
"tags": []
}
}