MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Background image component can have children (#9981)

This commit is contained in:
melohagan 2023-03-13 11:44:15 +00:00 committed by GitHub
parent ca33fe7439
commit 956d8f1ae3
2 changed files with 73 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

332
packages/client/manifest.json
View File

@ -17,10 +17,7 @@
"description": "This component is specific only to layouts", "description": "This component is specific only to layouts",
"icon": "Sandbox", "icon": "Sandbox",
"hasChildren": true, "hasChildren": true,
"styles": [ "styles": ["padding", "background"],
"padding",
"background"
],
"settings": [ "settings": [
{ {
"type": "text", "type": "text",
@ -36,23 +33,14 @@
"type": "select", "type": "select",
"label": "Navigation", "label": "Navigation",
"key": "navigation", "key": "navigation",
"options": [ "options": ["Top", "Left", "None"],
"Top",
"Left",
"None"
],
"defaultValue": "Top" "defaultValue": "Top"
}, },
{ {
"type": "select", "type": "select",
"label": "Width", "label": "Width",
"key": "width", "key": "width",
"options": [ "options": ["Small", "Medium", "Large", "Max"],
"Small",
"Medium",
"Large",
"Max"
],
"defaultValue": "Large" "defaultValue": "Large"
}, },
{ {
@ -89,13 +77,7 @@
"width": 400, "width": 400,
"height": 200 "height": 200
}, },
"styles": [ "styles": ["padding", "size", "background", "border", "shadow"],
"padding",
"size",
"background",
"border",
"shadow"
],
"settings": [ "settings": [
{ {
"type": "select", "type": "select",
@ -255,9 +237,7 @@
"description": "Add a section to your application", "description": "Add a section to your application",
"icon": "ColumnTwoB", "icon": "ColumnTwoB",
"hasChildren": true, "hasChildren": true,
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"showEmptyState": false, "showEmptyState": false,
"size": { "size": {
"width": 400, "width": 400,
@ -376,9 +356,7 @@
"name": "Divider", "name": "Divider",
"description": "A basic divider", "description": "A basic divider",
"icon": "Separator", "icon": "Separator",
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"size": { "size": {
"width": 400, "width": 400,
"height": 10 "height": 10
@ -415,9 +393,7 @@
"name": "Repeater", "name": "Repeater",
"description": "A configurable data list that attaches to your backend tables.", "description": "A configurable data list that attaches to your backend tables.",
"icon": "JourneyData", "icon": "JourneyData",
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"hasChildren": true, "hasChildren": true,
"size": { "size": {
"width": 400, "width": 400,
@ -574,9 +550,7 @@
"name": "Stacked List", "name": "Stacked List",
"icon": "TaskList", "icon": "TaskList",
"description": "A basic card component that can contain content and actions.", "description": "A basic card component that can contain content and actions.",
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"settings": [ "settings": [
{ {
"type": "text", "type": "text",
@ -606,9 +580,7 @@
"name": "Vertical Card", "name": "Vertical Card",
"description": "A basic card component that can contain content and actions.", "description": "A basic card component that can contain content and actions.",
"icon": "ViewColumn", "icon": "ViewColumn",
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"settings": [ "settings": [
{ {
"type": "text", "type": "text",
@ -652,24 +624,14 @@
"type": "select", "type": "select",
"label": "Image Height", "label": "Image Height",
"key": "imageHeight", "key": "imageHeight",
"options": [ "options": ["auto", "12rem", "16rem", "20rem", "24rem"],
"auto",
"12rem",
"16rem",
"20rem",
"24rem"
],
"defaultValue": "auto" "defaultValue": "auto"
}, },
{ {
"type": "select", "type": "select",
"label": "Card Width", "label": "Card Width",
"key": "cardWidth", "key": "cardWidth",
"options": [ "options": ["16rem", "20rem", "24rem"],
"16rem",
"20rem",
"24rem"
],
"defaultValue": "20rem" "defaultValue": "20rem"
} }
] ]
@ -678,9 +640,7 @@
"name": "Paragraph", "name": "Paragraph",
"description": "A component for displaying paragraph text.", "description": "A component for displaying paragraph text.",
"icon": "TextParagraph", "icon": "TextParagraph",
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -803,9 +763,7 @@
"name": "Headline", "name": "Headline",
"icon": "TextBold", "icon": "TextBold",
"description": "A component for displaying heading text", "description": "A component for displaying heading text",
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -982,9 +940,7 @@
"name": "Image", "name": "Image",
"description": "A basic component for displaying images", "description": "A basic component for displaying images",
"icon": "Image", "icon": "Image",
"styles": [ "styles": ["size"],
"size"
],
"size": { "size": {
"width": 400, "width": 400,
"height": 300 "height": 300
@ -1002,9 +958,8 @@
"name": "Background Image", "name": "Background Image",
"description": "A background image", "description": "A background image",
"icon": "Images", "icon": "Images",
"styles": [ "hasChildren": true,
"size" "styles": ["size"],
],
"size": { "size": {
"width": 400, "width": 400,
"height": 300 "height": 300
@ -1162,9 +1117,7 @@
"name": "Nav Bar", "name": "Nav Bar",
"description": "A component for handling the navigation within your app.", "description": "A component for handling the navigation within your app.",
"icon": "BreadcrumbNavigation", "icon": "BreadcrumbNavigation",
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"hasChildren": true, "hasChildren": true,
"settings": [ "settings": [
{ {
@ -1365,25 +1318,14 @@
"type": "select", "type": "select",
"label": "Image Width", "label": "Image Width",
"key": "imageWidth", "key": "imageWidth",
"options": [ "options": ["auto", "8rem", "12rem", "16rem"],
"auto",
"8rem",
"12rem",
"16rem"
],
"defaultValue": "8rem" "defaultValue": "8rem"
}, },
{ {
"type": "select", "type": "select",
"label": "Image Height", "label": "Image Height",
"key": "imageHeight", "key": "imageHeight",
"options": [ "options": ["auto", "8rem", "12rem", "16rem", "auto"],
"auto",
"8rem",
"12rem",
"16rem",
"auto"
],
"defaultValue": "auto" "defaultValue": "auto"
} }
] ]
@ -1424,9 +1366,7 @@
"name": "Embed", "name": "Embed",
"icon": "Code", "icon": "Code",
"description": "Embed content from 3rd party sources", "description": "Embed content from 3rd party sources",
"styles": [ "styles": ["size"],
"size"
],
"size": { "size": {
"width": 400, "width": 400,
"height": 100 "height": 100
@ -1478,11 +1418,7 @@
"type": "select", "type": "select",
"label": "Format", "label": "Format",
"key": "yAxisUnits", "key": "yAxisUnits",
"options": [ "options": ["Default", "Thousands", "Millions"],
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default" "defaultValue": "Default"
}, },
{ {
@ -1640,11 +1576,7 @@
"type": "select", "type": "select",
"label": "Format", "label": "Format",
"key": "yAxisUnits", "key": "yAxisUnits",
"options": [ "options": ["Default", "Thousands", "Millions"],
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default" "defaultValue": "Default"
}, },
{ {
@ -1736,11 +1668,7 @@
"type": "select", "type": "select",
"label": "Curve", "label": "Curve",
"key": "curve", "key": "curve",
"options": [ "options": ["Smooth", "Straight", "Stepline"],
"Smooth",
"Straight",
"Stepline"
],
"defaultValue": "Smooth" "defaultValue": "Smooth"
}, },
{ {
@ -1801,11 +1729,7 @@
"type": "select", "type": "select",
"label": "Format", "label": "Format",
"key": "yAxisUnits", "key": "yAxisUnits",
"options": [ "options": ["Default", "Thousands", "Millions"],
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default" "defaultValue": "Default"
}, },
{ {
@ -1897,11 +1821,7 @@
"type": "select", "type": "select",
"label": "Curve", "label": "Curve",
"key": "curve", "key": "curve",
"options": [ "options": ["Smooth", "Straight", "Stepline"],
"Smooth",
"Straight",
"Stepline"
],
"defaultValue": "Smooth" "defaultValue": "Smooth"
}, },
{ {
@ -2253,11 +2173,7 @@
"type": "select", "type": "select",
"label": "Format", "label": "Format",
"key": "yAxisUnits", "key": "yAxisUnits",
"options": [ "options": ["Default", "Thousands", "Millions"],
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default" "defaultValue": "Default"
}, },
{ {
@ -2293,19 +2209,14 @@
"name": "Form", "name": "Form",
"icon": "Form", "icon": "Form",
"hasChildren": true, "hasChildren": true,
"illegalChildren": [ "illegalChildren": ["section", "form"],
"section",
"form"
],
"actions": [ "actions": [
"ValidateForm", "ValidateForm",
"ClearForm", "ClearForm",
"ChangeFormStep", "ChangeFormStep",
"UpdateFieldValue" "UpdateFieldValue"
], ],
"styles": [ "styles": ["size"],
"size"
],
"size": { "size": {
"width": 400, "width": 400,
"height": 400 "height": 400
@ -2315,10 +2226,7 @@
"type": "select", "type": "select",
"label": "Type", "label": "Type",
"key": "actionType", "key": "actionType",
"options": [ "options": ["Create", "Update"],
"Create",
"Update"
],
"defaultValue": "Create" "defaultValue": "Create"
}, },
{ {
@ -2388,14 +2296,8 @@
"name": "Form Step", "name": "Form Step",
"icon": "AssetsAdded", "icon": "AssetsAdded",
"hasChildren": true, "hasChildren": true,
"illegalChildren": [ "illegalChildren": ["section", "form", "form step"],
"section", "styles": ["size"],
"form",
"form step"
],
"styles": [
"size"
],
"size": { "size": {
"width": 400, "width": 400,
"height": 400 "height": 400
@ -2413,12 +2315,8 @@
"fieldgroup": { "fieldgroup": {
"name": "Field Group", "name": "Field Group",
"icon": "Group", "icon": "Group",
"illegalChildren": [ "illegalChildren": ["section"],
"section" "styles": ["size"],
],
"styles": [
"size"
],
"hasChildren": true, "hasChildren": true,
"size": { "size": {
"width": 400, "width": 400,
@ -2451,9 +2349,7 @@
"skeleton": false, "skeleton": false,
"name": "Text Field", "name": "Text Field",
"icon": "Text", "icon": "Text",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -2543,9 +2439,7 @@
"skeleton": false, "skeleton": false,
"name": "Number Field", "name": "Number Field",
"icon": "123", "icon": "123",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -2601,9 +2495,7 @@
"skeleton": false, "skeleton": false,
"name": "Password Field", "name": "Password Field",
"icon": "LockClosed", "icon": "LockClosed",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -2659,9 +2551,7 @@
"skeleton": false, "skeleton": false,
"name": "Options Picker", "name": "Options Picker",
"icon": "Menu", "icon": "Menu",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -2828,9 +2718,7 @@
"skeleton": false, "skeleton": false,
"name": "Multi-select Picker", "name": "Multi-select Picker",
"icon": "ViewList", "icon": "ViewList",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -3070,9 +2958,7 @@
"skeleton": false, "skeleton": false,
"name": "Long Form Field", "name": "Long Form Field",
"icon": "TextAlignLeft", "icon": "TextAlignLeft",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -3150,9 +3036,7 @@
"skeleton": false, "skeleton": false,
"name": "Date Picker", "name": "Date Picker",
"icon": "Date", "icon": "Date",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -3232,9 +3116,7 @@
"skeleton": false, "skeleton": false,
"name": "Barcode/QR Scanner", "name": "Barcode/QR Scanner",
"icon": "Camera", "icon": "Camera",
"styles": [ "styles": ["size"],
"size"
],
"size": { "size": {
"width": 400, "width": 400,
"height": 50 "height": 50
@ -3283,9 +3165,7 @@
"embeddedmap": { "embeddedmap": {
"name": "Embedded Map", "name": "Embedded Map",
"icon": "Location", "icon": "Location",
"styles": [ "styles": ["size"],
"size"
],
"draggable": false, "draggable": false,
"size": { "size": {
"width": 400, "width": 400,
@ -3398,9 +3278,7 @@
"skeleton": false, "skeleton": false,
"name": "Attachment", "name": "Attachment",
"icon": "Attach", "icon": "Attach",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -3463,9 +3341,7 @@
"skeleton": false, "skeleton": false,
"name": "Relationship Picker", "name": "Relationship Picker",
"icon": "TaskList", "icon": "TaskList",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -3527,9 +3403,7 @@
"skeleton": false, "skeleton": false,
"name": "JSON Field", "name": "JSON Field",
"icon": "Brackets", "icon": "Brackets",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -3579,9 +3453,7 @@
"s3upload": { "s3upload": {
"name": "S3 File Upload", "name": "S3 File Upload",
"icon": "UploadToCloud", "icon": "UploadToCloud",
"styles": [ "styles": ["size"],
"size"
],
"editable": true, "editable": true,
"size": { "size": {
"width": 400, "width": 400,
@ -3642,13 +3514,9 @@
"dataprovider": { "dataprovider": {
"name": "Data Provider", "name": "Data Provider",
"icon": "Data", "icon": "Data",
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"hasChildren": true, "hasChildren": true,
"actions": [ "actions": ["RefreshDatasource"],
"RefreshDatasource"
],
"size": { "size": {
"width": 400, "width": 400,
"height": 100 "height": 100
@ -3674,10 +3542,7 @@
"type": "select", "type": "select",
"label": "Sort Order", "label": "Sort Order",
"key": "sortOrder", "key": "sortOrder",
"options": [ "options": ["Ascending", "Descending"],
"Ascending",
"Descending"
],
"defaultValue": "Ascending" "defaultValue": "Ascending"
}, },
{ {
@ -3729,9 +3594,7 @@
"skeleton": false, "skeleton": false,
"name": "Table", "name": "Table",
"icon": "Table", "icon": "Table",
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"hasChildren": true, "hasChildren": true,
"showEmptyState": false, "showEmptyState": false,
"size": { "size": {
@ -3815,9 +3678,7 @@
"daterangepicker": { "daterangepicker": {
"name": "Date Range", "name": "Date Range",
"icon": "Calendar", "icon": "Calendar",
"styles": [ "styles": ["size"],
"size"
],
"hasChildren": false, "hasChildren": false,
"size": { "size": {
"width": 200, "width": 200,
@ -3856,9 +3717,7 @@
"spectrumcard": { "spectrumcard": {
"name": "Card", "name": "Card",
"icon": "PersonalizationField", "icon": "PersonalizationField",
"styles": [ "styles": ["size"],
"size"
],
"size": { "size": {
"width": 300, "width": 300,
"height": 120 "height": 120
@ -4031,10 +3890,7 @@
"type": "select", "type": "select",
"label": "Sort Order", "label": "Sort Order",
"key": "sortOrder", "key": "sortOrder",
"options": [ "options": ["Ascending", "Descending"],
"Ascending",
"Descending"
],
"defaultValue": "Ascending" "defaultValue": "Ascending"
}, },
{ {
@ -4213,11 +4069,7 @@
"type": "select", "type": "select",
"label": "Format", "label": "Format",
"key": "yAxisUnits", "key": "yAxisUnits",
"options": [ "options": ["Default", "Thousands", "Millions"],
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default" "defaultValue": "Default"
}, },
{ {
@ -4271,11 +4123,7 @@
"type": "select", "type": "select",
"label": "Format", "label": "Format",
"key": "yAxisUnits", "key": "yAxisUnits",
"options": [ "options": ["Default", "Thousands", "Millions"],
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default" "defaultValue": "Default"
}, },
{ {
@ -4292,11 +4140,7 @@
"type": "select", "type": "select",
"label": "Curve", "label": "Curve",
"key": "curve", "key": "curve",
"options": [ "options": ["Smooth", "Straight", "Stepline"],
"Smooth",
"Straight",
"Stepline"
],
"defaultValue": "Smooth" "defaultValue": "Smooth"
} }
] ]
@ -4328,11 +4172,7 @@
"type": "select", "type": "select",
"label": "Format", "label": "Format",
"key": "yAxisUnits", "key": "yAxisUnits",
"options": [ "options": ["Default", "Thousands", "Millions"],
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default" "defaultValue": "Default"
}, },
{ {
@ -4349,11 +4189,7 @@
"type": "select", "type": "select",
"label": "Curve", "label": "Curve",
"key": "curve", "key": "curve",
"options": [ "options": ["Smooth", "Straight", "Stepline"],
"Smooth",
"Straight",
"Stepline"
],
"defaultValue": "Smooth" "defaultValue": "Smooth"
}, },
{ {
@ -4418,11 +4254,7 @@
"type": "select", "type": "select",
"label": "Format", "label": "Format",
"key": "yAxisUnits", "key": "yAxisUnits",
"options": [ "options": ["Default", "Thousands", "Millions"],
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default" "defaultValue": "Default"
}, },
{ {
@ -4443,9 +4275,7 @@
"block": true, "block": true,
"name": "Table block", "name": "Table block",
"icon": "Table", "icon": "Table",
"styles": [ "styles": ["size"],
"size"
],
"size": { "size": {
"width": 600, "width": 600,
"height": 400 "height": 400
@ -4483,10 +4313,7 @@
"type": "select", "type": "select",
"label": "Sort Order", "label": "Sort Order",
"key": "sortOrder", "key": "sortOrder",
"options": [ "options": ["Ascending", "Descending"],
"Ascending",
"Descending"
],
"defaultValue": "Ascending" "defaultValue": "Ascending"
}, },
{ {
@ -4638,9 +4465,7 @@
"block": true, "block": true,
"name": "Cards block", "name": "Cards block",
"icon": "PersonalizationField", "icon": "PersonalizationField",
"styles": [ "styles": ["size"],
"size"
],
"size": { "size": {
"width": 600, "width": 600,
"height": 400 "height": 400
@ -4679,10 +4504,7 @@
"type": "select", "type": "select",
"label": "Sort Order", "label": "Sort Order",
"key": "sortOrder", "key": "sortOrder",
"options": [ "options": ["Ascending", "Descending"],
"Ascending",
"Descending"
],
"defaultValue": "Descending" "defaultValue": "Descending"
}, },
{ {
@ -4816,9 +4638,7 @@
"block": true, "block": true,
"name": "Repeater block", "name": "Repeater block",
"icon": "ViewList", "icon": "ViewList",
"illegalChildren": [ "illegalChildren": ["section"],
"section"
],
"hasChildren": true, "hasChildren": true,
"size": { "size": {
"width": 400, "width": 400,
@ -4846,10 +4666,7 @@
"type": "select", "type": "select",
"label": "Sort Order", "label": "Sort Order",
"key": "sortOrder", "key": "sortOrder",
"options": [ "options": ["Ascending", "Descending"],
"Ascending",
"Descending"
],
"defaultValue": "Descending" "defaultValue": "Descending"
}, },
{ {
@ -5044,9 +4861,7 @@
"markdownviewer": { "markdownviewer": {
"name": "Markdown Viewer", "name": "Markdown Viewer",
"icon": "Preview", "icon": "Preview",
"styles": [ "styles": ["size"],
"size"
],
"size": { "size": {
"width": 400, "width": 400,
"height": 100 "height": 100
@ -5063,9 +4878,7 @@
"formblock": { "formblock": {
"name": "Form Block", "name": "Form Block",
"icon": "Form", "icon": "Form",
"styles": [ "styles": ["size"],
"size"
],
"block": true, "block": true,
"info": "Form blocks are only compatible with internal or SQL tables", "info": "Form blocks are only compatible with internal or SQL tables",
"size": { "size": {
@ -5077,11 +4890,7 @@
"type": "select", "type": "select",
"label": "Type", "label": "Type",
"key": "actionType", "key": "actionType",
"options": [ "options": ["Create", "Update", "View"],
"Create",
"Update",
"View"
],
"defaultValue": "Create" "defaultValue": "Create"
}, },
{ {
@ -5215,10 +5024,7 @@
"name": "Side Panel", "name": "Side Panel",
"icon": "RailRight", "icon": "RailRight",
"hasChildren": true, "hasChildren": true,
"illegalChildren": [ "illegalChildren": ["section", "sidepanel"],
"section",
"sidepanel"
],
"showEmptyState": false, "showEmptyState": false,
"draggable": false, "draggable": false,
"info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action." "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action."

4
packages/client/src/components/app/BackgroundImage.svelte
View File

@ -21,7 +21,9 @@
{#if url} {#if url}
<div class="outer" use:styleable={$component.styles}> <div class="outer" use:styleable={$component.styles}>
<div class="inner" {style} /> <div class="inner" {style}>
<slot />
</div>
</div> </div>
{:else if $builderStore.inBuilder} {:else if $builderStore.inBuilder}
<div <div