545 lines
12 KiB
JSON
545 lines
12 KiB
JSON
{
|
|
"container": {
|
|
"name": "Container",
|
|
"description": "This component contains things within itself",
|
|
"icon": "ri-layout-column-line",
|
|
"hasChildren": true,
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "select",
|
|
"key": "type",
|
|
"label": "Type",
|
|
"defaultValue": "div",
|
|
"options": [
|
|
"article",
|
|
"aside",
|
|
"details",
|
|
"div",
|
|
"figure",
|
|
"figcaption",
|
|
"footer",
|
|
"header",
|
|
"main",
|
|
"mark",
|
|
"nav",
|
|
"paragraph",
|
|
"summary"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"grid": {
|
|
"name": "Grid",
|
|
"description":
|
|
"A datagrid component with functionality to add, remove and edit rows.",
|
|
"icon": "ri-grid-line",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "datasource",
|
|
"label": "Source",
|
|
"key": "datasource"
|
|
},
|
|
{
|
|
"type": "detailScreen",
|
|
"label": "Detail URL",
|
|
"key": "detailUrl"
|
|
},
|
|
{
|
|
"type": "boolean",
|
|
"label": "Editable",
|
|
"key": "editable"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"label": "Theme",
|
|
"key": "theme",
|
|
"options": ["alpine", "alpine-dark", "balham", "balham-dark", "material"],
|
|
"defaultValue": "alpine"
|
|
},
|
|
{
|
|
"type": "number",
|
|
"label": "Height",
|
|
"key": "height",
|
|
"defaultValue": "500"
|
|
},
|
|
{
|
|
"type": "boolean",
|
|
"label": "Pagination",
|
|
"key": "pagination"
|
|
}
|
|
]
|
|
},
|
|
"screenslot": {
|
|
"name": "Screenslot",
|
|
"description": "Contains your app screens",
|
|
"styleable": true
|
|
},
|
|
"button": {
|
|
"name": "Button",
|
|
"description": "A basic html button that is ready for styling",
|
|
"icon": "ri-share-box-line",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Text",
|
|
"key": "text"
|
|
},
|
|
{
|
|
"type": "boolean",
|
|
"label": "Disabled",
|
|
"key": "disabled"
|
|
},
|
|
{
|
|
"type": "event",
|
|
"label": "On Click",
|
|
"key": "onClick"
|
|
}
|
|
]
|
|
},
|
|
"list": {
|
|
"name": "Repeater",
|
|
"description": "A configurable data list that attaches to your backend tables.",
|
|
"icon": "ri-list-check-2",
|
|
"styleable": true,
|
|
"hasChildren": true,
|
|
"dataProvider": true,
|
|
"settings": [
|
|
{
|
|
"type": "datasource",
|
|
"label": "Data",
|
|
"key": "datasource"
|
|
}
|
|
]
|
|
},
|
|
"dataform": {
|
|
"name": "Form",
|
|
"icon": "ri-file-edit-line",
|
|
"styleable": true
|
|
},
|
|
"dataformwide": {
|
|
"name": "Wide Form",
|
|
"icon": "ri-file-edit-line",
|
|
"styleable": true
|
|
},
|
|
"input": {
|
|
"name": "Text Field",
|
|
"description": "A textfield component that allows the user to input text.",
|
|
"icon": "ri-edit-box-line",
|
|
"styleable": true,
|
|
"bindable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Label",
|
|
"key": "label"
|
|
},
|
|
{
|
|
"label": "Type",
|
|
"key": "type",
|
|
"defaultValue": "text",
|
|
"options": ["text", "password"]
|
|
}
|
|
]
|
|
},
|
|
"richtext": {
|
|
"name": "Rich Text",
|
|
"description": "A component that allows the user to enter long form text.",
|
|
"icon": "ri-edit-box-line",
|
|
"styleable": true,
|
|
"bindable": true
|
|
},
|
|
"datepicker": {
|
|
"name": "Date Picker",
|
|
"description": "A basic date picker component",
|
|
"icon": "ri-calendar-line",
|
|
"styleable": true,
|
|
"bindable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Placeholder",
|
|
"key": "placeholder"
|
|
}
|
|
]
|
|
},
|
|
"stackedlist": {
|
|
"name": "Stacked List",
|
|
"icon": "ri-archive-drawer-line",
|
|
"description": "A basic card component that can contain content and actions.",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Image",
|
|
"key": "imageUrl"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Heading",
|
|
"key": "heading"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Text 1",
|
|
"key": "text1"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Text 2",
|
|
"key": "text2"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Text 3",
|
|
"key": "text3"
|
|
},
|
|
{
|
|
"type": "screen",
|
|
"label": "Link URL",
|
|
"key": "destinationUrl"
|
|
}
|
|
]
|
|
},
|
|
"card": {
|
|
"name": "Vertical Card",
|
|
"description": "A basic card component that can contain content and actions.",
|
|
"icon": "ri-layout-column-line",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Image",
|
|
"key": "imageUrl"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Heading",
|
|
"key": "heading"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Description",
|
|
"key": "description"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Link Text",
|
|
"key": "linkText"
|
|
},
|
|
{
|
|
"type": "screen",
|
|
"label": "Link Url",
|
|
"key": "linkUrl"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"label": "Link Color",
|
|
"key": "linkColor",
|
|
"defaultValue": "#000"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"label": "Hover Color",
|
|
"key": "linkHoverColor",
|
|
"defaultValue": "#222"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"label": "Image Height",
|
|
"key": "imageHeight",
|
|
"options": ["auto", "12rem", "16rem", "20rem", "24rem"],
|
|
"defaultValue": "auto"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"label": "Card Width",
|
|
"key": "cardWidth",
|
|
"options": ["16rem", "20rem", "24rem"],
|
|
"defaultValue": "20rem"
|
|
}
|
|
]
|
|
},
|
|
"text": {
|
|
"name": "Paragraph",
|
|
"description": "A component for displaying paragraph text.",
|
|
"icon": "ri-paragraph",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Text",
|
|
"key": "text"
|
|
}
|
|
]
|
|
},
|
|
"heading": {
|
|
"name": "Headline",
|
|
"icon": "ri-heading",
|
|
"description": "A component for displaying heading text",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"key": "text",
|
|
"label": "Text"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"key": "type",
|
|
"label": "Type",
|
|
"options": ["h1", "h2", "h3", "h4", "h5", "h6"],
|
|
"defaultValue": "h1"
|
|
}
|
|
]
|
|
},
|
|
"image": {
|
|
"name": "Image",
|
|
"description": "A basic component for displaying images",
|
|
"icon": "ri-image-line",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "URL",
|
|
"key": "url"
|
|
}
|
|
]
|
|
},
|
|
"icon": {
|
|
"name": "Icon",
|
|
"description": "A basic component for displaying icons",
|
|
"icon": "ri-sun-fill",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "icon",
|
|
"label": "Icon",
|
|
"key": "icon"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"label": "Size",
|
|
"key": "size",
|
|
"defaultValue": "fa-lg",
|
|
"options": [
|
|
{ "value": "fa-xs", "label": "xs" },
|
|
{ "value": "fa-sm", "label": "sm" },
|
|
{ "value": "fa-lg", "label": "lg" },
|
|
{ "value": "fa-2x", "label": "2x" },
|
|
{ "value": "fa-3x", "label": "3x" },
|
|
{ "value": "fa-5x", "label": "5x" },
|
|
{ "value": "fa-7x", "label": "7x" },
|
|
{ "value": "fa-10x", "label": "10x" }
|
|
]
|
|
},
|
|
{
|
|
"type": "color",
|
|
"label": "Color",
|
|
"key": "color",
|
|
"defaultValue": "#000"
|
|
}
|
|
]
|
|
},
|
|
"login": {
|
|
"description": "A component that automatically generates a login screen for your app.",
|
|
"icon": "ri-login-box-line",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Logo",
|
|
"key": "logo"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Title",
|
|
"key": "title"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Button Text",
|
|
"key": "buttonText"
|
|
}
|
|
]
|
|
},
|
|
"navigation": {
|
|
"name": "Nav Bar",
|
|
"description": "A component for handling the navigation within your app.",
|
|
"icon": "ri-navigation-line",
|
|
"styleable": true,
|
|
"hasChildren": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Logo URL",
|
|
"key": "logoUrl"
|
|
}
|
|
]
|
|
},
|
|
"link": {
|
|
"name": "Link",
|
|
"description": "A basic link component for internal and external links",
|
|
"icon": "ri-link",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Text",
|
|
"key": "text"
|
|
},
|
|
{
|
|
"type": "screen",
|
|
"label": "URL",
|
|
"key": "url"
|
|
},
|
|
{
|
|
"type": "boolean",
|
|
"label": "New Tab",
|
|
"key": "openInNewTab"
|
|
}
|
|
]
|
|
},
|
|
"rowdetail": {
|
|
"name": "Row Detail",
|
|
"description": "Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
|
|
"icon": "ri-profile-line",
|
|
"styleable": true,
|
|
"hasChildren": true,
|
|
"dataProvider": true,
|
|
"settings": [
|
|
{
|
|
"type": "table",
|
|
"label": "Table",
|
|
"key": "table"
|
|
}
|
|
]
|
|
},
|
|
"newrow": {
|
|
"name": "New Row",
|
|
"description": "Sets up a new row for creation, which can be used with {{ context }}, in children",
|
|
"icon": "ri-profile-line",
|
|
"hasChildren": true,
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Table",
|
|
"key": "table"
|
|
}
|
|
]
|
|
},
|
|
"cardhorizontal": {
|
|
"name": "Horizontal Card",
|
|
"description": "A basic card component that can contain content and actions.",
|
|
"icon": "ri-layout-row-line",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Image",
|
|
"key": "imageUrl"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Heading",
|
|
"key": "heading"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Description",
|
|
"key": "description"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Subtext",
|
|
"key": "subtext"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Link Text",
|
|
"key": "linkText"
|
|
},
|
|
{
|
|
"type": "screen",
|
|
"label": "Link URL",
|
|
"key": "linkUrl"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"label": "Link Color",
|
|
"key": "linkColor",
|
|
"defaultValue": "#000"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"label": "Hover Color",
|
|
"key": "linkHoverColor",
|
|
"defaultValue": "#222"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"label": "Card Width",
|
|
"key": "cardWidth",
|
|
"options": ["24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"],
|
|
"default": "32rem"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"label": "Image Width",
|
|
"key": "imageWidth",
|
|
"options": ["auto", "8rem", "12rem", "16rem"],
|
|
"defaultValue": "8rem"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"label": "Image Height",
|
|
"key": "imageHeight",
|
|
"options": ["auto", "8rem", "12rem", "16rem", "auto"],
|
|
"defaultValue": "auto"
|
|
}
|
|
]
|
|
},
|
|
"cardstat": {
|
|
"name": "Stat Card",
|
|
"description": "A card component for displaying numbers.",
|
|
"icon": "ri-dual-sim-2-line",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Title",
|
|
"key": "title",
|
|
"placeholder": "Total Revenue"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Value",
|
|
"key": "value",
|
|
"placeholder": "$1,981,983"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"label": "Label",
|
|
"key": "label",
|
|
"placeholder": "Stripe"
|
|
}
|
|
]
|
|
},
|
|
"embed": {
|
|
"name": "Embed",
|
|
"icon": "ri-code-line",
|
|
"description": "Embed content from 3rd party sources",
|
|
"styleable": true,
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"label": "Embed",
|
|
"key": "embed"
|
|
}
|
|
]
|
|
}
|
|
}
|