788 lines
15 KiB
JSON
788 lines
15 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",
|
|
"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": "Input",
|
|
"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"
|
|
}
|
|
},
|
|
"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": "models",
|
|
"stripeColor": "string",
|
|
"borderColor": "string",
|
|
"backgroundColor": "string",
|
|
"color": "string"
|
|
}
|
|
},
|
|
"datagrid": {
|
|
"description": "a datagrid component with functionality to add, remove and edit rows.",
|
|
"data": true,
|
|
"props": {
|
|
"datasource": "models"
|
|
}
|
|
},
|
|
"dataform": {
|
|
"description": "an HTML table that fetches data from a table or view and displays it.",
|
|
"data": true,
|
|
"props": {
|
|
"model": "models",
|
|
"title": "string",
|
|
"buttonText": "string"
|
|
}
|
|
},
|
|
"dataformwide": {
|
|
"description": "an HTML table that fetches data from a table or view and displays it.",
|
|
"data": true,
|
|
"props": {
|
|
"model": "models",
|
|
"title": "string",
|
|
"buttonText": "string"
|
|
}
|
|
},
|
|
"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.",
|
|
"context": "datasource",
|
|
"children": true,
|
|
"data": true,
|
|
"props": {
|
|
"datasource": "models"
|
|
}
|
|
},
|
|
"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"
|
|
}
|
|
},
|
|
"recorddetail": {
|
|
"description": "Loads a record, using an ID in the url",
|
|
"context": "model",
|
|
"children": true,
|
|
"data": true,
|
|
"props": {
|
|
"model": "models"
|
|
}
|
|
},
|
|
"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"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"datamap": {
|
|
"description": "shiny chart",
|
|
"data": true,
|
|
"props": {
|
|
"model": "models"
|
|
}
|
|
},
|
|
"donut": {
|
|
"description": "Donut Chart",
|
|
"data": true,
|
|
"props": {
|
|
"datasource": "string",
|
|
"data": "string",
|
|
"color": "string",
|
|
"height": "number",
|
|
"width": "number",
|
|
"hasFixedHighlightedSlice": "bool",
|
|
"hasLastHoverSliceHighlighted": "bool",
|
|
"hasHoverAnimation": "bool",
|
|
"numberFormat": "string",
|
|
"nameKey": "string",
|
|
"valueKey": "string",
|
|
"isAnimated": "bool",
|
|
"externalRadius": "number",
|
|
"internalRadius": "number",
|
|
"radiusHoverOffset": "number",
|
|
"percentageFormat": "string",
|
|
"useLegend": "bool",
|
|
"legendWidth": "number",
|
|
"legendHeight": "number"
|
|
}
|
|
},
|
|
"sparkline": {
|
|
"description": "Sparkline Chart",
|
|
"data": true,
|
|
"props": {
|
|
"model": "string",
|
|
"areaGradient": "string",
|
|
"height": "number",
|
|
"width": "number",
|
|
"dateLabel": "string",
|
|
"duration": "string",
|
|
"isAnimated": "bool",
|
|
"lineGradient": "string",
|
|
"titleText": "string",
|
|
"valueLabel": "string"
|
|
}
|
|
},
|
|
"stackedbar": {
|
|
"description": "Stacked Bar Chart",
|
|
"data": true,
|
|
"props": {
|
|
"datasource": "models",
|
|
"color": "string",
|
|
"height": "number",
|
|
"width": "number",
|
|
"margin": "string",
|
|
"aspectRatio": "string",
|
|
"betweenBarsPadding": "number",
|
|
"grid": "string",
|
|
"hasPercentage": "bool",
|
|
"hasReversedStacks": "bool",
|
|
"isAnimated": "bool",
|
|
"isHorizontal": "bool",
|
|
"locale": "string",
|
|
"nameLabel": "string",
|
|
"percentageAxisToMaxRatio": "number",
|
|
"stackLabel": "string",
|
|
"valueLabel": "string",
|
|
"valueLabelFormat": "string",
|
|
"xTicks": "number",
|
|
"yTicks": "number",
|
|
"yAxisLabel": "string",
|
|
"yAxisLabelOffset": "number",
|
|
"useLegend": "bool"
|
|
}
|
|
},
|
|
"stackarea": {
|
|
"description": "Step Chart",
|
|
"data": true,
|
|
"props": {
|
|
"model": "string",
|
|
"color": "string",
|
|
"height": "number",
|
|
"width": "number",
|
|
"margin": "string",
|
|
"xAxisLabel": "string",
|
|
"xAxisLabelOffset": "string",
|
|
"yAxisLabel": "string",
|
|
"yAxisLabelOffset": "string",
|
|
"areaCurve": "number",
|
|
"areaOpacity": "number",
|
|
"aspectRatio": "number",
|
|
"dateLabel": "string",
|
|
"grid": "string",
|
|
"isAnimated": "bool",
|
|
"keyLabel": "string",
|
|
"locale": "string",
|
|
"tooltipThreshold": "number",
|
|
"topicsOrder": "string",
|
|
"valueLabel": "string",
|
|
"xAxisCustomFormat": "string",
|
|
"xAxisFormat": "string",
|
|
"xAxisScale": "string",
|
|
"xAxisValueType": "string",
|
|
"yTicks": "number",
|
|
"xTicks": "number",
|
|
"yAxisBaseline": "string",
|
|
"useLegend": "bool"
|
|
}
|
|
},
|
|
"step": {
|
|
"description": "Step Chart",
|
|
"data": true,
|
|
"props": {
|
|
"model": "string",
|
|
"height": "number",
|
|
"width": "number",
|
|
"margin": "string",
|
|
"xAxisLabel": "string",
|
|
"xAxisLabelOffset": "string",
|
|
"yAxisLabel": "string",
|
|
"yAxisLabelOffset": "string",
|
|
"yTicks": "string"
|
|
}
|
|
},
|
|
"scatterplot": {
|
|
"description": "Scatterplot Chart",
|
|
"data": true,
|
|
"props": {
|
|
"model": "string",
|
|
"color": "string",
|
|
"height": "number",
|
|
"width": "number",
|
|
"aspectRatio": "string",
|
|
"circleOpacity": "string",
|
|
"grid": "string",
|
|
"hasCrossHairs": "bool",
|
|
"isAnimated": "bool",
|
|
"maxCircleArea": "number",
|
|
"xAxisLabel": "string",
|
|
"xAxisLabelOffset": "string",
|
|
"xTicks": "string",
|
|
"yAxisFormat": "string",
|
|
"yAxisLabel": "string",
|
|
"yAxisLabelOffset": "string",
|
|
"yTicks": "string"
|
|
}
|
|
},
|
|
"bar": {
|
|
"description": "Bar Chart",
|
|
"data": true,
|
|
"props": {
|
|
"datasource": "models",
|
|
"nameLabel": "string",
|
|
"valueLabel": "string",
|
|
"betweenBarsPadding": "number",
|
|
"gradient": "string",
|
|
"color": "string",
|
|
"hasSingleBarHighlight": "bool",
|
|
"height": "number",
|
|
"width": "number",
|
|
"isAnimated": "bool",
|
|
"isHorizontal": "bool",
|
|
"labelNumberFormat": "number",
|
|
"locale": "string",
|
|
"xAxisLabel": "string",
|
|
"yAxisLabel": "string",
|
|
"useLegend": "bool",
|
|
"xTicks": "number",
|
|
"yTicks": "number"
|
|
}
|
|
},
|
|
"line": {
|
|
"description": "Line Chart",
|
|
"data": true,
|
|
"props": {
|
|
"datasource": "models",
|
|
"width": "number",
|
|
"height": "number",
|
|
"axisTimeCombinations": "string",
|
|
"color": "string",
|
|
"grid": {
|
|
"type": "string",
|
|
"default": "horizontal"
|
|
},
|
|
"aspectRatio": "number",
|
|
"dateLabel": "string",
|
|
"isAnimated": {
|
|
"type": "bool",
|
|
"default": true
|
|
},
|
|
"lineCurve": "string",
|
|
"locale": "string",
|
|
"numberFormat": "string",
|
|
"shouldShowAllDataPoints": {
|
|
"type": "bool",
|
|
"default": true
|
|
},
|
|
"topicLabel": "string",
|
|
"valueLabel": "string",
|
|
"xAxisValueType": {
|
|
"type": "string",
|
|
"default": "date"
|
|
},
|
|
"xAxisScale": "string",
|
|
"xAxisFormat": {
|
|
"type": "string",
|
|
"default": "custom"
|
|
},
|
|
"xAxisCustomFormat": "string",
|
|
"xAxisLabel": "string",
|
|
"yAxisLabel": "string",
|
|
"tooltipTitle": "string",
|
|
"xTicks": "number",
|
|
"yTicks": "number"
|
|
}
|
|
},
|
|
"brush": {
|
|
"description": "brush chart",
|
|
"data": true,
|
|
"props": {
|
|
"model": "string",
|
|
"gradient": "string",
|
|
"height": "number",
|
|
"width": "number",
|
|
"margin": "string",
|
|
"dateRange": "string",
|
|
"locale": "string",
|
|
"roundingTimeInterval": "string",
|
|
"xAxisFormat": "string",
|
|
"xTicks": "number",
|
|
"xAxisCustomFormat": "string"
|
|
}
|
|
},
|
|
"heatmap": {
|
|
"description": "Heatmap chart",
|
|
"data": true,
|
|
"props": {
|
|
"model": "string",
|
|
"color": "string",
|
|
"height": "number",
|
|
"width": "number",
|
|
"useLegend": "bool",
|
|
"yAxisLabel": "string",
|
|
"boxSize": "number"
|
|
}
|
|
},
|
|
"groupedbar": {
|
|
"description": "Groupedbar chart",
|
|
"data": true,
|
|
"props": {
|
|
"datasource": "models",
|
|
"nameLabel": "string",
|
|
"valueLabel": "string",
|
|
"color": "string",
|
|
"height": "string",
|
|
"width": "string",
|
|
"margin": "string",
|
|
"grid": "string",
|
|
"groupLabel": "string",
|
|
"isAnimated": "bool",
|
|
"isHorizontal": "bool",
|
|
"yTicks": "string",
|
|
"useLegend": "bool",
|
|
"tooltipTitle": "string"
|
|
}
|
|
},
|
|
"bullet": {
|
|
"description": "Bullet chart",
|
|
"data": true,
|
|
"props": {
|
|
"model": "string",
|
|
"color": "string",
|
|
"customSubtitle": "string",
|
|
"customTitle": "string",
|
|
"numberFormat": "string",
|
|
"paddingBetweenAxisAndChart": "number",
|
|
"height": "number",
|
|
"width": "number"
|
|
}
|
|
},
|
|
"datepicker": {
|
|
"description": "Date Picker",
|
|
"bindable": "value",
|
|
"props": {
|
|
"placeholder": "string"
|
|
}
|
|
},
|
|
"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",
|
|
"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"
|
|
}
|
|
},
|
|
"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"
|
|
}
|
|
}
|
|
} |