budibase/packages/standard-components/components.json

360 lines
8.2 KiB
JSON

{
"_lib": "./dist/index.js",
"_generators": {
"_lib": "./dist/generators.js",
"app": {
"name": "App",
"description": "Generate app based on your backend"
},
"forms": {
"name": "Forms",
"description": "Generate forms, based on your records"
},
"buttons": {
"name": "Buttons",
"description": "Generate some styled buttons"
},
"headers": {
"name": "Headers",
"description": "Generate some styled headings"
},
"nav": {
"name": "Nav bar",
"description": "Generate a nav bar, based n your root records"
},
"indexTables": {
"name": "Nav bar",
"description": "Generate a table based on an index"
}
},
"button" : {
"importPath": "button",
"name": "Button",
"description": "an html <button />",
"props": {
"contentText": { "type": "string", "default": "Button" },
"className": {"type": "string", "default": "default"},
"disabled": "bool",
"onClick": "event",
"background": "string",
"color": "string",
"border": "string",
"padding": "string",
"hoverColor": "string",
"hoverBackground": "string",
"hoverBorder": "string"
},
"tags": ["button"]
},
"login" : {
"importPath": "Login",
"name": "Login Control",
"description": "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",
"description": "A form - allgned fields with labels",
"props" : {
"containerClass": "string",
"formControls": {
"type":"array",
"elementDefinition": {
"label": "string"
}
}
},
"tags": ["form"]
},
"textbox" : {
"importPath": "Textbox",
"name": "Textbox",
"description": "An input type=text or password",
"props" : {
"value": "string",
"hideValue": "bool",
"className": {"type": "string", "default": "default"}
},
"tags": ["form"]
},
"input" : {
"importPath": "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"
},
"className": {"type": "string", "default": "default"}
},
"tags": ["form"]
},
"select" : {
"importPath": "Input",
"name": "Input",
"description": "An HTML input",
"props" : {
"value": "string",
"options": {
"type" : "array",
"elementDefinition" : {
"id":"string",
"value":"string"
}
},
"className": {"type": "string", "default": "default"}
},
"tags": ["form"]
},
"stackpanel": {
"importPath": "StackPanel",
"name": "StackPanel",
"description": "Layout elements in a stack, either horizontally or vertically",
"props" : {
"direction": {
"type": "options",
"options": ["horizontal", "vertical"],
"default":"horizontal"
},
"width": {"type":"string","default":"auto"},
"height": {"type":"string","default":"auto"},
"containerClass":"string",
"itemContainerClass":"string",
"data": "state",
"onLoad": "event"
},
"tags": ["div", "container", "layout", "panel"]
},
"grid": {
"importPath": "Grid",
"name": "Grid",
"description": "CSS Grid layout ",
"props" : {
"gridTemplateRows": "string",
"gridTemplateColumns": "string",
"children": {
"type":"array",
"elementDefinition": {
"gridColumnStart":"string",
"gridColumnEnd":"string",
"gridRowStart":"string",
"gridRowEnd":"string",
"justifySelf": {
"type":"options",
"options":["start", "center", "end", "stretch"],
"default":"stretch"
}
}
},
"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",
"description": "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",
"description": "A stylable div with a component inside",
"props" : {
"text": "string",
"containerClass": "string",
"background": "string",
"border": "string",
"borderRadius":"string",
"font": "string",
"color": "string",
"padding": "string",
"margin": "string",
"hoverColor": "string",
"hoverBackground": "string",
"height":"string",
"width":"string",
"onClick": "event",
"display": {
"type": "options",
"default":"inline",
"options": [
"inline", "block", "inline-block"
]
}
},
"tags": ["div", "container"]
},
"nav": {
"importPath": "Nav",
"name": "Nav",
"description": "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"
}
},
"selectedItem":"string",
"hideNavBar":"bool"
},
"tags": ["nav", "navigation", "sidebar"]
},
"table": {
"importPath": "Table",
"name": "Table",
"description": "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"]
},
"div": {
"importPath": "Div",
"name": "Div",
"description": "An HTML div tag",
"props" : {
"children": {
"type":"array",
"elementDefinition": {
"className": "string"
}
},
"className":"string",
"data": "state",
"onLoad": "event"
},
"tags": ["div", "container", "layout"]
},
"h1": {
"importPath": "h1",
"name": "H1",
"description": "An HTML H1 tag",
"props" : {
"text": "string",
"className":"string"
},
"tags": []
},
"h2": {
"importPath": "h2",
"name": "H2",
"description": "An HTML H2 tag",
"props" : {
"text": "string",
"className":"string"
},
"tags": []
},
"h3": {
"importPath": "h3",
"name": "H3",
"description": "An HTML H3 tag",
"props" : {
"text": "string",
"className":"string"
},
"tags": []
},
"h4": {
"importPath": "h4",
"name": "H4",
"description": "An HTML H4 tag",
"props" : {
"text": "string",
"className":"string"
},
"tags": []
},
"h5": {
"importPath": "h5",
"name": "H5",
"description": "An HTML H5 tag",
"props" : {
"text": "string",
"className":"string"
},
"tags": ["div", "container", "layout"]
},
"h6": {
"importPath": "h6",
"name": "H6",
"description": "An HTML H6 tag",
"props" : {
"text": "string",
"className":"string"
},
"tags": []
}
}