801 lines
14 KiB
JSON
801 lines
14 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",
|
|
"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": "Textfield",
|
|
"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"
|
|
}
|
|
},
|
|
"richtext": {
|
|
"name": "Rich Text",
|
|
"description": "A component that allows the user to enter long form text.",
|
|
"props": {
|
|
"value": "string"
|
|
}
|
|
},
|
|
"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": "tables",
|
|
"stripeColor": "string",
|
|
"borderColor": "string",
|
|
"backgroundColor": "string",
|
|
"color": "string"
|
|
}
|
|
},
|
|
"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": {}
|
|
},
|
|
"datalist": {
|
|
"description": "A configurable data list that attaches to your backend tables.",
|
|
"data": true,
|
|
"props": {
|
|
"table": "tables",
|
|
"layout": {
|
|
"type": "options",
|
|
"default": "list",
|
|
"options": [
|
|
"list",
|
|
"grid"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"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"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"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",
|
|
"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"
|
|
}
|
|
},
|
|
"baseComponent": 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": "Table Head",
|
|
"description": "an HTML <thead> tab",
|
|
"props": {
|
|
"className": "string"
|
|
}
|
|
},
|
|
"tbody": {
|
|
"name": "Table Body",
|
|
"description": "an HTML <tbody> tab",
|
|
"props": {
|
|
"className": "string"
|
|
}
|
|
}
|
|
}
|