+ style="padding-left: {level * 20 + 40}px"
+ draggable={true}
+ on:dragstart={dragstart(component)}
+ on:dragover={dragover(component, index)}
+ on:drop={drop}
+ ondragover="return false"
+ ondragenter="return false">
{isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
@@ -55,8 +136,18 @@
components={component._children}
{currentComponent}
{onSelect}
+ {dragDropStore}
level={level + 1} />
{/if}
+
+ {#if $dragDropStore && $dragDropStore.targetComponent === component && ($dragDropStore.dropPosition === 'inside' || $dragDropStore.dropPosition === 'below')}
+
+ {/if}
{/each}
@@ -78,6 +169,11 @@
align-items: center;
}
+ .drop-item {
+ background: var(--blue-light);
+ height: 36px;
+ }
+
.actions {
display: none;
height: 24px;
diff --git a/packages/builder/src/components/userInterface/EditComponentProps.svelte b/packages/builder/src/components/userInterface/EditComponentProps.svelte
deleted file mode 100644
index d025b67161..0000000000
--- a/packages/builder/src/components/userInterface/EditComponentProps.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 8132d502d1..d2e6cc5693 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -1,13 +1,10 @@
-
-
Layout
-
- {#each Object.entries(display) as [key, [name, meta, size]] (component._id + key)}
-
-
{name}:
- onStyleChanged('layout', key, _value)}
- values={layout[key] || newValue(meta.length)}
- propertyName={name}
- {meta}
- {size}
- type="text" />
-
- {/each}
-
-
-
-
-
Spacing
-
- {#each Object.entries(spacing) as [key, [name, meta, size]] (component._id + key)}
-
-
{name}:
- onStyleChanged('position', key, _value)}
- values={layout[key] || newValue(meta.length)}
- {meta}
- {size}
- type="text" />
-
- {/each}
-
-
-
Size
-
- {#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)}
-
-
{name}:
- onStyleChanged('position', key, _value)}
- values={layout[key] || newValue(meta.length)}
- type="text"
- {meta}
- {size} />
-
- {/each}
-
-
-
Order
-
- {#each Object.entries(zindex) as [key, [name, meta, size]] (component._id + key)}
-
-
{name}:
- onStyleChanged('position', key, _value)}
- values={layout[key] || newValue(meta.length)}
- {meta}
- {size} />
-
- {/each}
-
-
-
diff --git a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
index 05a92d3e77..e88d379dc1 100644
--- a/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
+++ b/packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
@@ -1,6 +1,4 @@
-
-
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index d64ab670ba..cebd445ce7 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -16,12 +16,14 @@
import { pipe } from "components/common/core"
import { store } from "builderStore"
import { ArrowDownIcon, GridIcon } from "components/common/Icons/"
+ import { writable } from "svelte/store"
export let layout
let confirmDeleteDialog
let componentToDelete = ""
+ const dragDropStore = writable({})
const joinPath = join("/")
const lastPartOfName = c =>
@@ -57,7 +59,8 @@
+ currentComponent={$store.currentComponentInfo}
+ {dragDropStore} />
{/if}
diff --git a/packages/builder/src/components/userInterface/PropControl.svelte b/packages/builder/src/components/userInterface/PropControl.svelte
deleted file mode 100644
index a7053953f4..0000000000
--- a/packages/builder/src/components/userInterface/PropControl.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-
-
-
- {#if prop_definition.type !== 'event'}
-
{prop_name}
- store.setComponentProp(prop_name, v)} />
- {/if}
-
-
-
diff --git a/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte b/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
new file mode 100644
index 0000000000..1721c1bbb2
--- /dev/null
+++ b/packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte
@@ -0,0 +1,11 @@
+
+
+
diff --git a/packages/builder/src/components/userInterface/PropsView.svelte b/packages/builder/src/components/userInterface/PropsView.svelte
deleted file mode 100644
index 108b37b795..0000000000
--- a/packages/builder/src/components/userInterface/PropsView.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-
-
-
-
-
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
index 551f81bd2f..46ca1b1a05 100644
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -1,7 +1,6 @@
-
-
- {#if type === 'bool'}
-
- onChanged(!value)} />
-
- {:else if type === 'models'}
-
- {:else if type === 'options' || type === 'models'}
-
- {/if}
-
-
-
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index d5188d8818..273f6202d2 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -8,7 +8,6 @@
import NewScreen from "./NewScreen.svelte"
import CurrentItemPreview from "./CurrentItemPreview.svelte"
import SettingsView from "./SettingsView.svelte"
- import PageView from "./PageView.svelte"
import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { last } from "lodash/fp"
diff --git a/packages/builder/src/components/userInterface/pagesParsing/createProps.js b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
index de4de1c2a6..44d23c5c3e 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
@@ -48,7 +48,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
assign(props, derivedFromProps)
}
- if (componentDefinition.children !== false && isUndefined(props._children)) {
+ if (isUndefined(props._children)) {
props._children = []
}
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 0a18cb544a..9c622a383a 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,4 +1,4 @@
-import Input from "../common/Input.svelte"
+import Input from "./PropertyPanelControls/Input.svelte"
import OptionSelect from "./OptionSelect.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte"
import Colorpicker from "@budibase/colorpicker"
@@ -70,6 +70,20 @@ export const layout = [
{ label: "no wrap", value: "noWrap" },
],
},
+ {
+ label: "Gap",
+ key: "gap",
+ control: OptionSelect,
+ options: [
+ { label: "None", value: "0px" },
+ { label: "4px", value: "4px" },
+ { label: "8px", value: "8px" },
+ { label: "16px", value: "16px" },
+ { label: "20px", value: "20px" },
+ { label: "32px", value: "32px" },
+ { label: "64px", value: "64px" },
+ ],
+ },
]
export const margin = [
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 9a0d74b343..e3e934bb28 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,4 +1,4 @@
-import Input from "../common/Input.svelte"
+import Input from "./PropertyPanelControls/Input.svelte"
import OptionSelect from "./OptionSelect.svelte"
import Checkbox from "../common/Checkbox.svelte"
import ModelSelect from "components/userInterface/ModelSelect.svelte"
@@ -306,47 +306,177 @@ export default {
label: "destinationUrl",
key: "destinationUrl",
control: Input,
- placeholder: "/table/{{context._id}}",
+ placeholder: "/table/_id",
},
],
},
},
{
- _component: "@budibase/materialdesign-components/BasicCard",
name: "Card",
- description:
- "A basic card component that can contain content and actions.",
+ description: "Card components",
icon: "ri-layout-bottom-line",
- children: [],
- properties: {
- design: { ...all },
- settings: [
- {
- label: "Heading",
- key: "heading",
- control: Input,
- placeholder: "text",
+ commonProps: {},
+ children: [
+ {
+ _component: "@budibase/standard-components/card",
+ name: "Vertical",
+ description:
+ "A basic card component that can contain content and actions.",
+ icon: "ri-layout-column-line",
+ children: [],
+ properties: {
+ design: { ...all },
+ settings: [
+ {
+ label: "Image",
+ key: "imageUrl",
+ control: Input,
+ placeholder: "Image",
+ },
+ {
+ label: "Heading",
+ key: "heading",
+ control: Input,
+ placeholder: "Heading",
+ },
+ {
+ label: "Description",
+ key: "description",
+ control: Input,
+ placeholder: "Description",
+ },
+ {
+ label: "Link Text",
+ key: "linkText",
+ control: Input,
+ placeholder: "Link Text",
+ },
+ {
+ label: "Link Url",
+ key: "linkUrl",
+ control: Input,
+ placeholder: "Link URL",
+ },
+ {
+ label: "Link Color",
+ key: "color",
+ control: Input,
+ placeholder: "Link Color",
+ },
+ {
+ label: "Hover Color",
+ key: "linkHoverColor",
+ control: Input,
+ placeholder: "Hover Color",
+ },
+ {
+ label: "Image Height",
+ key: "imageHeight",
+ control: OptionSelect,
+ options: ["12rem", "16rem", "20rem", "24rem"],
+ placeholder: "Image Height",
+ },
+ {
+ label: "Card Width",
+ key: "cardWidth",
+ control: OptionSelect,
+ options: ["16rem", "20rem", "24rem"],
+ placeholder: "Card Width",
+ },
+ ],
},
- {
- label: "Subheading",
- key: "subheading",
- control: Input,
- placeholder: "text",
+ },
+ {
+ _component: "@budibase/standard-components/cardhorizontal",
+ name: "Horizontal",
+ description:
+ "A basic card component that can contain content and actions.",
+ icon: "ri-layout-row-line",
+ children: [],
+ properties: {
+ design: { ...all },
+ settings: [
+ {
+ label: "Image",
+ key: "imageUrl",
+ control: Input,
+ placeholder: "Image",
+ },
+ {
+ label: "Heading",
+ key: "heading",
+ control: Input,
+ placeholder: "Heading",
+ },
+ {
+ label: "Description",
+ key: "description",
+ control: Input,
+ placeholder: "Description",
+ },
+ {
+ label: "Subtext",
+ key: "subtext",
+ control: Input,
+ placeholder: "Subtext",
+ },
+ {
+ label: "Link Text",
+ key: "linkText",
+ control: Input,
+ placeholder: "Link Text",
+ },
+ {
+ label: "Link Url",
+ key: "linkUrl",
+ control: Input,
+ placeholder: "Link URL",
+ },
+ {
+ label: "Link Color",
+ key: "color",
+ control: Input,
+ placeholder: "Link Color",
+ },
+ {
+ label: "Hover Color",
+ key: "linkHoverColor",
+ control: Input,
+ placeholder: "Hover Color",
+ },
+ {
+ label: "Card Width",
+ key: "cardWidth",
+ control: OptionSelect,
+ options: [
+ "24rem",
+ "28rem",
+ "32rem",
+ "40rem",
+ "48rem",
+ "60rem",
+ "100%",
+ ],
+ placeholder: "Card Height",
+ },
+ {
+ label: "Image Width",
+ key: "imageWidth",
+ control: OptionSelect,
+ options: ["8rem", "12rem", "16rem"],
+ placeholder: "Image Width",
+ },
+ {
+ label: "Image Height",
+ key: "imageHeight",
+ control: OptionSelect,
+ options: ["8rem", "12rem", "16rem", "auto"],
+ placeholder: "Image Height",
+ },
+ ],
},
- {
- label: "Content",
- key: "content",
- control: Input,
- placeholder: "text",
- },
- {
- label: "Image",
- key: "imageUrl",
- control: Input,
- placeholder: "src",
- },
- ],
- },
+ },
+ ],
},
{
name: "Table",
@@ -396,11 +526,6 @@ export default {
},
],
},
- template: {
- component: "@budibase/materialdesign-components/Form",
- description: "Form for saving a record",
- name: "@budibase/materialdesign-components/recordForm",
- },
},
{
_component: "@budibase/standard-components/dataformwide",
@@ -430,129 +555,461 @@ export default {
],
},
{
- name: "Donut Chart",
- _component: "@budibase/standard-components/donut",
- description: "Donut chart",
- icon: "ri-pie-chart-fill",
- properties: {
- settings: [
- {
- label: "Table",
- key: "model",
- control: ModelSelect,
- },
- {
- label: "Animate Chart",
- key: "isAnimated",
- valueKey: "checked",
- control: Checkbox,
- },
- {
- label: "Hover Highlight",
- key: "hasHoverAnimation",
- valueKey: "checked",
- control: Checkbox,
- },
- {
- label: "Keep Last Hover",
- key: "hasLastHoverSliceHighlighted",
- valueKey: "checked",
- control: Checkbox,
- },
- {
- label: "Colors",
- key: "color",
- control: OptionSelect,
- options: [
- "britecharts",
- "blueGreen",
- "green",
- "grey",
- "orange",
- "pink",
- "purple",
- "red",
- "teal",
- "yellow",
- ],
- },
- {
- label: "Name Field",
- key: "nameKey",
- control: Input,
- },
- {
- label: "Value Field",
- key: "valueKey",
- control: Input,
- },
- {
- label: "External Radius",
- key: "externalRadius",
- control: Input,
- },
- {
- label: "Internal Radius",
- key: "internalRadius",
- control: Input,
- },
- {
- label: "Radius Offset",
- key: "radiusHoverOffset ",
- control: Input,
- },
- {
- label: "Show Legend",
- key: "useLegend ",
- valueKey: "checked",
- control: Checkbox,
- },
- {
- label: "Horizontal Legend",
- key: "horizontalLegend",
- valueKey: "checked",
- control: Checkbox,
- },
- {
- label: "Legend Width",
- key: "legendWidth",
- control: Input,
- },
- {
- label: "Legend Height",
- key: "legendHeight",
- control: Input,
- },
- ],
- },
- children: [],
- },
- {
- name: "Data List",
- _component: "@budibase/standard-components/datalist",
- description: "Shiny list",
- icon: "ri-file-list-fill",
- properties: {
- design: { ...all },
- settings: [{ label: "Table", key: "model", control: ModelSelect }],
- },
- children: [],
- },
- {
- name: "List",
- _component: "@budibase/standard-components/list",
- description: "Renders all children once per record, of a given table",
- icon: "ri-file-list-fill",
- properties: {
- design: { ...all },
- settings: [{ label: "Table", key: "model", control: ModelSelect }],
- },
+ name: "Chart",
+ description: "Shiny chart",
+ icon: "ri-bar-chart-fill",
children: [
{
- _component: "@budibase/standard-components/heading",
- name: "Headline",
- description: "A component for displaying heading text",
- icon: "ri-heading",
+ name: "Donut",
+ _component: "@budibase/standard-components/donut",
+ description: "Donut chart",
+ icon: "ri-pie-chart-fill",
+ properties: {
+ settings: [
+ {
+ label: "Table",
+ key: "model",
+ control: ModelSelect,
+ },
+ {
+ label: "Animate Chart",
+ key: "isAnimated",
+ valueKey: "checked",
+ control: Checkbox,
+ },
+ {
+ label: "Hover Highlight",
+ key: "hasHoverAnimation",
+ valueKey: "checked",
+ control: Checkbox,
+ },
+ {
+ label: "Keep Last Hover",
+ key: "hasLastHoverSliceHighlighted",
+ valueKey: "checked",
+ control: Checkbox,
+ },
+ {
+ label: "Colors",
+ key: "color",
+ control: OptionSelect,
+ options: [
+ "britecharts",
+ "blueGreen",
+ "green",
+ "grey",
+ "orange",
+ "pink",
+ "purple",
+ "red",
+ "teal",
+ "yellow",
+ ],
+ },
+ {
+ label: "Name Field",
+ key: "nameKey",
+ control: Input,
+ },
+ {
+ label: "Value Field",
+ key: "valueKey",
+ control: Input,
+ },
+ {
+ label: "External Radius",
+ key: "externalRadius",
+ control: Input,
+ },
+ {
+ label: "Internal Radius",
+ key: "internalRadius",
+ control: Input,
+ },
+ {
+ label: "Radius Offset",
+ key: "radiusHoverOffset ",
+ control: Input,
+ },
+ {
+ label: "Show Legend",
+ key: "useLegend ",
+ valueKey: "checked",
+ control: Checkbox,
+ },
+ {
+ label: "Horizontal Legend",
+ key: "horizontalLegend",
+ valueKey: "checked",
+ control: Checkbox,
+ },
+ {
+ label: "Legend Width",
+ key: "legendWidth",
+ control: Input,
+ },
+ ],
+ },
+ },
+ {
+ name: "Bar",
+ _component: "@budibase/standard-components/bar",
+ description: "Bar chart",
+ icon: "ri-bar-chart-fill",
+ properties: {
+ settings: [
+ {
+ label: "Table",
+ key: "model",
+ control: ModelSelect,
+ },
+ {
+ label: "Name Label",
+ key: "nameLabel",
+ control: Input,
+ },
+ {
+ label: "Value Label",
+ key: "valueLabel",
+ control: Input,
+ },
+ {
+ label: "Y Axis Label",
+ key: "yAxisLabel",
+ control: Input,
+ },
+ {
+ label: "X Axis Label",
+ key: "xAxisLabel",
+ control: Input,
+ },
+ {
+ label: "X Axis Label Offset",
+ key: "xAxisLabelOffset",
+ control: Input,
+ },
+ {
+ label: "Y Axis Label Offset",
+ key: "yAxisLabelOffset",
+ control: Input,
+ },
+ {
+ label: "Enable Labels",
+ key: "enableLabels",
+ control: Checkbox,
+ valueKey: "checked",
+ },
+ {
+ label: "Colors",
+ key: "color",
+ control: OptionSelect,
+ options: [
+ { label: "Normal", value: "britecharts" },
+ { label: "Blue Green", value: "blueGreen" },
+ { label: "Green", value: "green" },
+ { label: "Grey", value: "grey" },
+ { label: "Orange", value: "orange" },
+ { label: "Pink", value: "pink" },
+ { label: "Purple", value: "purple" },
+ { label: "Red", value: "red" },
+ { label: "Teal", value: "teal" },
+ { label: "Yellow", value: "yellow" },
+ ],
+ },
+ {
+ label: "Gradients",
+ key: "gradient",
+ control: OptionSelect,
+ options: [
+ { value: "", label: "None" },
+ { value: "bluePurple", label: "Blue Purple" },
+ { value: "greenBlue", label: "Green Blue" },
+ { value: "orangePink", label: "Orange Pink" },
+ ],
+ },
+ {
+ label: "Highlight Single Bar",
+ key: "hasSingleBarHighlight",
+ control: Checkbox,
+ valueKey: "checked",
+ },
+ {
+ label: "Width",
+ key: "width",
+ control: Input,
+ },
+ {
+ label: "Height",
+ key: "height",
+ control: Input,
+ },
+ {
+ label: "Animate",
+ key: "isAnimate",
+ control: Checkbox,
+ valueKey: "checked",
+ },
+ {
+ label: "Horizontal",
+ key: "isHorizontal",
+ control: Checkbox,
+ valueKey: "checked",
+ },
+ {
+ label: "Label Number Format",
+ key: "labelsNumberFormat",
+ control: Input,
+ },
+ ],
+ },
+ },
+ {
+ name: "Groupedbar",
+ _component: "@budibase/standard-components/groupedbar",
+ description: "Groupedbar chart",
+ icon: "ri-bar-chart-grouped-fill",
+ properties: {
+ settings: [
+ {
+ label: "Table",
+ key: "model",
+ control: ModelSelect,
+ },
+ {
+ label: "Color",
+ key: "color",
+ control: OptionSelect,
+ options: [
+ "britecharts",
+ "blueGreen",
+ "green",
+ "grey",
+ "orange",
+ "pink",
+ "purple",
+ "red",
+ "teal",
+ "yellow",
+ ],
+ },
+ {
+ label: "Height",
+ key: "height",
+ control: Input,
+ },
+ {
+ label: "Width",
+ key: "width",
+ control: Input,
+ },
+ {
+ label: "Aspect Ratio",
+ key: "aspectRatio",
+ control: Input,
+ },
+ {
+ label: "Grid",
+ key: "grid",
+ control: OptionSelect,
+ options: ["vertical", "horizontal", "full"],
+ },
+ {
+ label: "Group Label",
+ key: "groupLabel",
+ control: Input,
+ },
+ {
+ label: "Name Label",
+ key: "nameLabel",
+ control: Input,
+ },
+ {
+ label: "Value Label",
+ key: "valueLabel",
+ control: Input,
+ },
+ {
+ label: "Y Ticks",
+ key: "yTicks",
+ control: Input,
+ },
+ {
+ label: "Y Tick Text Offset",
+ key: "yTickTextOffset",
+ control: Input,
+ },
+ {
+ label: "Is Animated",
+ key: "isAnimated",
+ valueKey: "checked",
+ control: Checkbox,
+ },
+ {
+ label: "Is Horizontal",
+ key: "isHorizontal",
+ valueKey: "checked",
+ control: Checkbox,
+ },
+ {
+ label: "Tooltip Title",
+ key: "tooltipTitle",
+ control: Input,
+ },
+ ],
+ },
+ },
+ {
+ name: "Line",
+ _component: "@budibase/standard-components/line",
+ description: "Line chart",
+ icon: "ri-line-chart-fill",
+ properties: {
+ settings: [
+ {
+ label: "Table",
+ key: "model",
+ control: ModelSelect,
+ },
+ {
+ label: "Colors",
+ key: "color",
+ control: OptionSelect,
+ options: [
+ "britecharts",
+ "blueGreen",
+ "green",
+ "grey",
+ "orange",
+ "pink",
+ "purple",
+ "red",
+ "teal",
+ "yellow",
+ ],
+ },
+ {
+ label: "Gradients",
+ key: "lineGradient",
+ control: OptionSelect,
+ options: [
+ { value: "", label: "None" },
+ { value: "bluePurple", label: "Blue Purple" },
+ { value: "greenBlue", label: "Green Blue" },
+ { value: "orangePink", label: "Orange Pink" },
+ ],
+ },
+ {
+ label: "Line Curve",
+ key: "lineCurve",
+ control: OptionSelect,
+ options: [
+ "linear",
+ "basis",
+ "natural",
+ "monotoneX",
+ "monotoneY",
+ "step",
+ "stepAfter",
+ "stepBefore",
+ "cardinal",
+ "catmullRom",
+ ],
+ },
+ {
+ label: "X Axis Value Type",
+ key: "xAxisValueType",
+ control: OptionSelect,
+ options: ["date", "number"],
+ },
+ {
+ label: "Grid",
+ key: "grid",
+ control: OptionSelect,
+ options: ["vertical", "horizontal", "full"],
+ },
+ {
+ label: "Date Label",
+ key: "dateLabel",
+ control: Input,
+ },
+ {
+ label: "Topic Label",
+ key: "topicLabel",
+ control: Input,
+ },
+ {
+ label: "Value Label",
+ key: "valueLabel",
+ control: Input,
+ },
+ {
+ label: "X Axis Label",
+ key: "xAxisLabel",
+ control: Input,
+ },
+ {
+ label: "Y Axis Label",
+ key: "yAxisLabel",
+ control: Input,
+ },
+ {
+ label: "Show All Datapoints",
+ key: "shouldShowAllDataPoints",
+ valueKey: "checked",
+ control: Checkbox,
+ },
+ {
+ label: "Width",
+ key: "width",
+ control: Input,
+ },
+ {
+ label: "Height",
+ key: "height",
+ control: Input,
+ },
+ {
+ label: "Is Animated",
+ key: "isAnimated",
+ control: Checkbox,
+ valueKey: "checked",
+ },
+ {
+ label: "Locale",
+ key: "locale",
+ control: OptionSelect,
+ options: ["en-GB", "en-US"],
+ },
+ {
+ label: "X Axis Value Type",
+ key: "xAxisValueType",
+ control: OptionSelect,
+ options: ["date", "numeric"],
+ },
+ {
+ label: "X Axis Format",
+ key: "xAxisFormat",
+ control: OptionSelect,
+ options: [
+ "day-month",
+ "minute-hour",
+ "hour-daymonth",
+ "month-year",
+ "custom",
+ ],
+ },
+ {
+ label: "X Axis Custom Format",
+ key: "xAxisCustomFormat",
+ control: Input,
+ },
+ {
+ label: "Tooltip Title",
+ key: "tooltipTitle",
+ control: Input,
+ },
+ ],
+ },
},
],
},
diff --git a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
index 125ef2436e..7d0dbb2c06 100644
--- a/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
@@ -1,5 +1,6 @@
@@ -19,8 +20,7 @@
{#each Object.keys(value.model.schema) as field}
-
-
+
{/each}
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index fca0738e9d..1ddc72c4c3 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -5,7 +5,7 @@
import { notifier } from "builderStore/store/notifications"
import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
- import { Button } from "@budibase/bbui"
+ import { Button, Input } from "@budibase/bbui"
const { open, close } = getContext("simple-modal")
@@ -112,13 +112,7 @@