MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
budibase/packages/builder/src/components/userInterface/temporaryPanelStructure.js

1280 lines
37 KiB
JavaScript
Raw Normal View History

all inputs using BBUI
2020-08-18 15:51:02 +02:00
import Input from "./PropertyPanelControls/Input.svelte"
Building components settings and refactoring
2020-05-19 18:00:53 +02:00
import OptionSelect from "./OptionSelect.svelte"
Add line chart and enable multiple data series for all charts
2020-11-03 10:43:45 +01:00
import MultiTableViewFieldSelect from "./MultiTableViewFieldSelect.svelte"
Building components settings and refactoring
2020-05-19 18:00:53 +02:00
import Checkbox from "../common/Checkbox.svelte"
Renaming Model -> Table across the entire system, this is an unstable update and has not been tested fully yet.
2020-10-09 19:49:23 +02:00
import TableSelect from "components/userInterface/TableSelect.svelte"
import TableViewSelect from "components/userInterface/TableViewSelect.svelte"
import TableViewFieldSelect from "components/userInterface/TableViewFieldSelect.svelte"
merge from master
2020-08-13 12:50:12 +02:00
import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
Selects for Screens in Events and Settings
2020-09-08 17:03:04 +02:00
import ScreenSelect from "components/userInterface/ScreenSelect.svelte"
Add new DetailScreenSelect component for selecting only detail screens and update detail linking in grids
2020-10-16 16:16:29 +02:00
import DetailScreenSelect from "components/userInterface/DetailScreenSelect.svelte"
Icon and Icon Select Component
2020-09-15 12:53:02 +02:00
import { IconSelect } from "components/userInterface/IconSelect"
fix frontend bugs
2020-09-14 13:07:08 +02:00
import Colorpicker from "@budibase/colorpicker"
Testing Complete - Resolve Post Issue
2020-05-18 17:32:00 +02:00
import { all } from "./propertyCategories.js"
Britecharts work so far
2020-07-26 12:54:55 +02:00
/*
{ label: "N/A ", value: "N/A" },
{ label: "Flex", value: "flex" },
{ label: "Inline Flex", value: "inline-flex" },
*/
WIP: Changes for property panel
2020-05-04 17:07:04 +02:00
adds basic tab view to the components pane
2020-04-17 09:16:03 +02:00
export default {
categories: [
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/container",
name: "Container",
description: "This component contains things within itself",
icon: "ri-layout-column-line",
commonProps: {},
children: [],
properties: {
design: { ...all },
settings: [
{
key: "type",
label: "Type",
control: OptionSelect,
options: [
"article",
"aside",
"details",
"div",
"figure",
"figcaption",
"footer",
"header",
"main",
"mark",
"nav",
"paragraph",
"summary",
],
},
],
},
},
{
name: "Grid",
_component: "@budibase/standard-components/datagrid",
description:
"a datagrid component with functionality to add, remove and edit rows.",
icon: "ri-grid-line",
properties: {
design: { ...all },
settings: [
{
label: "Source",
key: "datasource",
control: TableViewSelect,
},
{
label: "Detail URL",
key: "detailUrl",
control: DetailScreenSelect,
},
{
label: "Editable",
key: "editable",
valueKey: "checked",
control: Checkbox,
},
{
label: "Theme",
key: "theme",
control: OptionSelect,
options: [
"alpine",
"alpine-dark",
"balham",
"balham-dark",
"material",
],
placeholder: "alpine",
},
{
label: "Height",
key: "height",
defaultValue: "500",
control: Input,
},
{
label: "Pagination",
key: "pagination",
valueKey: "checked",
control: Checkbox,
},
],
},
children: [],
},
{
name: "Repeater",
_component: "@budibase/standard-components/list",
description: "Renders all children once per row, of a given table",
icon: "ri-list-check-2",
properties: {
design: { ...all },
settings: [
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
],
},
children: [],
},
{
_component: "@budibase/standard-components/button",
name: "Button",
description: "A basic html button that is ready for styling",
icon: "ri-share-box-line",
children: [],
properties: {
design: {
...all,
},
settings: [
{ label: "Text", key: "text", control: Input },
{
label: "Disabled",
key: "disabled",
valueKey: "checked",
control: Checkbox,
},
{ label: "On Click", key: "onClick", control: Event },
],
},
},
{
name: "Form",
icon: "ri-file-edit-line",
adds backbutton and second level handling
2020-04-20 14:40:29 +02:00
isCategory: true,
makes the Component panel tabs more generic
2020-04-22 08:25:59 +02:00
children: [
adds basic tab view to the components pane
2020-04-17 09:16:03 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/dataform",
name: "Form Basic",
icon: "ri-file-edit-line",
Building components settings and refactoring
2020-05-19 18:00:53 +02:00
properties: {
design: { ...all },
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
settings: [],
Building components settings and refactoring
2020-05-19 18:00:53 +02:00
},
adds basic tab view to the components pane
2020-04-17 09:16:03 +02:00
},
Map, Icon, Datalist removed from UI
2020-07-15 12:12:43 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/dataformwide",
name: "Form Wide",
icon: "ri-file-edit-line",
Map, Icon, Datalist removed from UI
2020-07-15 12:12:43 +02:00
properties: {
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
design: { ...all },
settings: [],
Map, Icon, Datalist removed from UI
2020-07-15 12:12:43 +02:00
},
},
Input components and tidyup
2020-04-23 14:22:41 +02:00
{
removes unused components
2020-10-16 17:04:49 +02:00
_component: "@budibase/standard-components/input",
name: "Textfield",
description:
"A textfield component that allows the user to input text.",
Map, Icon, Datalist removed from UI
2020-07-15 12:12:43 +02:00
icon: "ri-edit-box-line",
removes unused components
2020-10-16 17:04:49 +02:00
properties: {
design: { ...all },
settings: [
{ label: "Label", key: "label", control: Input },
{
label: "Type",
key: "type",
control: OptionSelect,
options: ["text", "password"],
Building components settings and refactoring
2020-05-19 18:00:53 +02:00
},
removes unused components
2020-10-16 17:04:49 +02:00
],
},
Input components and tidyup
2020-04-23 14:22:41 +02:00
},
sets everything up to be used with a longform type in the Form component
2020-11-13 11:31:00 +01:00
// {
// _component: "@budibase/standard-components/richtext",
// name: "Rich Text",
// description:
// "A component that allows the user to enter long form text.",
// icon: "ri-edit-box-line",
// properties: {
// design: { ...all },
// settings: [],
// },
// },
Merge branch 'simplified-component-panel' into simplified-component-panel-tabs
2020-04-17 11:44:20 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/datepicker",
name: "Date Picker",
description: "A basic date picker component",
icon: "ri-calendar-line",
formatting + fixing builder tests
2020-05-07 11:53:34 +02:00
children: [],
Building components settings and refactoring
2020-05-19 18:00:53 +02:00
properties: {
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
design: { ...all },
settings: [
{ label: "Placeholder", key: "placeholder", control: Input },
],
},
},
],
},
{
name: "Card",
icon: "ri-archive-drawer-line",
isCategory: true,
children: [
{
_component: "@budibase/standard-components/stackedlist",
name: "Stacked List",
icon: "ri-archive-drawer-line",
description:
"A basic card component that can contain content and actions.",
children: [],
properties: {
design: { ...all },
Building components settings and refactoring
2020-05-19 18:00:53 +02:00
settings: [
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
label: "Image",
key: "imageUrl",
control: Input,
placeholder: "{{{context.Image}}}",
},
{
label: "Heading",
key: "heading",
control: Input,
placeholder: "{{context.Heading}}",
},
{
label: "Text 1",
key: "text1",
control: Input,
placeholder: "{{context.Text 1}}",
},
{
label: "Text 2",
key: "text2",
control: Input,
placeholder: "{{context.Text 2}}",
},
{
label: "Text 3",
key: "text3",
control: Input,
placeholder: "{{context.Text 3}}",
},
{
label: "Link URL",
key: "destinationUrl",
control: ScreenSelect,
placeholder: "/table/_id",
Building components settings and refactoring
2020-05-19 18:00:53 +02:00
},
linter formatting
2020-05-26 11:19:04 +02:00
],
Building components settings and refactoring
2020-05-19 18:00:53 +02:00
},
Merge branch 'simplified-component-panel' into simplified-component-panel-tabs
2020-04-17 11:44:20 +02:00
},
Image Component Image component added to builder
2020-06-09 12:06:18 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/card",
name: "Vertical",
description:
"A basic card component that can contain content and actions.",
icon: "ri-layout-column-line",
Image Component Image component added to builder
2020-06-09 12:06:18 +02:00
children: [],
properties: {
design: { ...all },
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
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: ScreenSelect,
placeholder: "Link URL",
},
{
label: "Link Color",
changes settings prop of card link color
2020-12-09 13:21:04 +01:00
key: "linkColor",
control: Colorpicker,
defaultValue: "#000"
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
},
{
label: "Hover Color",
key: "linkHoverColor",
changes settings prop of card link color
2020-12-09 13:21:04 +01:00
control: Colorpicker,
defaultValue: "#222"
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
},
{
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",
},
],
Image Component Image component added to builder
2020-06-09 12:06:18 +02:00
},
},
Icon and IconSelect Components
2020-09-14 12:08:03 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/cardhorizontal",
name: "Horizontal",
description:
"A basic card component that can contain content and actions.",
icon: "ri-layout-row-line",
Icon and IconSelect Components
2020-09-14 12:08:03 +02:00
children: [],
properties: {
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
design: { ...all },
Icon and Icon Select Component
2020-09-15 12:53:02 +02:00
settings: [
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
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: ScreenSelect,
placeholder: "Link URL",
},
{
label: "Link Color",
changes settings prop of card link color
2020-12-09 13:21:04 +01:00
key: "linkColor",
adds colorpicker to card componeent
2020-12-09 12:00:17 +01:00
control: Colorpicker,
defaultValue: "#000"
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
},
{
label: "Hover Color",
key: "linkHoverColor",
adds colorpicker to card componeent
2020-12-09 12:00:17 +01:00
control: Colorpicker,
changes settings prop of card link color
2020-12-09 13:21:04 +01:00
defaultValue: "#222"
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
},
{
label: "Card Width",
key: "cardWidth",
Icon and Icon Select Component
2020-09-15 12:53:02 +02:00
control: OptionSelect,
options: [
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
"24rem",
"28rem",
"32rem",
"40rem",
"48rem",
"60rem",
"100%",
Icon and Icon Select Component
2020-09-15 12:53:02 +02:00
],
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
placeholder: "Card Height",
Icon and Icon Select Component
2020-09-15 12:53:02 +02:00
},
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
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",
},
],
},
},
Stat card During lab day, I created a stat card. This card allows the user to display a single value, with an optional title and label. This is a popular component that will save our users time - expecially when creating dashboards.
2020-11-28 17:35:42 +01:00
{
_component: "@budibase/standard-components/cardstat",
name: "Stat",
Formatting and linting
2020-11-28 17:44:07 +01:00
description: "A card component for displaying numbers.",
Stat card During lab day, I created a stat card. This card allows the user to display a single value, with an optional title and label. This is a popular component that will save our users time - expecially when creating dashboards.
2020-11-28 17:35:42 +01:00
icon: "ri-dual-sim-2-line",
children: [],
properties: {
design: { ...all },
settings: [
{
label: "Title",
key: "title",
control: Input,
placeholder: "Total Revenue",
},
{
label: "Value",
key: "value",
control: Input,
placeholder: "$1,981,983",
},
{
label: "Label",
key: "label",
control: Input,
placeholder: "Stripe",
},
],
},
},
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
],
},
{
name: "Chart",
icon: "ri-bar-chart-2-line",
isCategory: true,
children: [
Merge branch 'simplified-component-panel' into simplified-component-panel-tabs
2020-04-17 11:44:20 +02:00
{
Add pie and donut charts
2020-11-03 12:50:55 +01:00
name: "Bar Chart",
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/bar",
description: "Bar chart",
Add pie and donut charts
2020-11-03 12:50:55 +01:00
icon: "ri-bar-chart-line",
Settings, Tidyup and Refactor
2020-05-20 12:55:25 +02:00
properties: {
settings: [
Add line chart and enable multiple data series for all charts
2020-11-03 10:43:45 +01:00
{
label: "Title",
key: "title",
control: Input,
},
Settings, Tidyup and Refactor
2020-05-20 12:55:25 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
label: "Data",
key: "datasource",
control: TableViewSelect,
},
{
Add bar chart with initial apex charts config
2020-11-02 16:32:37 +01:00
label: "Label Col.",
Add line chart and enable multiple data series for all charts
2020-11-03 10:43:45 +01:00
key: "labelColumn",
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
Add line chart and enable multiple data series for all charts
2020-11-03 10:43:45 +01:00
label: "Data Cols.",
key: "valueColumns",
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
dependsOn: "datasource",
Add line chart and enable multiple data series for all charts
2020-11-03 10:43:45 +01:00
control: MultiTableViewFieldSelect,
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
},
Add support for dates and increase robustness
2020-11-04 13:43:56 +01:00
{
label: "Format",
key: "yAxisUnits",
control: OptionSelect,
options: ["Default", "Thousands", "Millions"],
defaultValue: "Default",
},
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
{
label: "Y Axis Label",
key: "yAxisLabel",
control: Input,
},
{
label: "X Axis Label",
key: "xAxisLabel",
control: Input,
},
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
Add bar chart with initial apex charts config
2020-11-02 16:32:37 +01:00
defaultValue: "400",
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
},
Add colour palette options for charts
2020-11-05 14:37:28 +01:00
{
label: "Colours",
key: "palette",
control: OptionSelect,
defaultValue: "Palette 1",
options: [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10",
],
},
Add stacked option to bar chart
2020-11-03 10:48:35 +01:00
{
label: "Stacked",
key: "stacked",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
{
Add bar chart with initial apex charts config
2020-11-02 16:32:37 +01:00
label: "Data Labels",
key: "dataLabels",
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
control: Checkbox,
valueKey: "checked",
Default bar chart data labels to false
2020-11-03 11:11:31 +01:00
defaultValue: false,
adds ag-grid component to display data
2020-09-25 11:44:05 +02:00
},
adds detail link column to grid component
2020-10-15 19:59:46 +02:00
{
Add bar chart with initial apex charts config
2020-11-02 16:32:37 +01:00
label: "Animate",
key: "animate",
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
control: Checkbox,
valueKey: "checked",
Add bar chart with initial apex charts config
2020-11-02 16:32:37 +01:00
defaultValue: true,
Stacked list component added
2020-07-31 13:02:29 +02:00
},
Add line chart and enable multiple data series for all charts
2020-11-03 10:43:45 +01:00
{
label: "Legend",
key: "legend",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
Stacked list component added
2020-07-31 13:02:29 +02:00
],
},
},
Add line chart and enable multiple data series for all charts
2020-11-03 10:43:45 +01:00
{
Add pie and donut charts
2020-11-03 12:50:55 +01:00
name: "Line Chart",
Add line chart and enable multiple data series for all charts
2020-11-03 10:43:45 +01:00
_component: "@budibase/standard-components/line",
description: "Line chart",
icon: "ri-line-chart-line",
properties: {
settings: [
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
{
label: "Label Col.",
key: "labelColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Data Cols.",
key: "valueColumns",
dependsOn: "datasource",
control: MultiTableViewFieldSelect,
},
Add area chart and unit formatting
2020-11-03 15:32:21 +01:00
{
label: "Format",
key: "yAxisUnits",
control: OptionSelect,
options: ["Default", "Thousands", "Millions"],
defaultValue: "Default",
},
Add line chart and enable multiple data series for all charts
2020-11-03 10:43:45 +01:00
{
label: "Y Axis Label",
key: "yAxisLabel",
control: Input,
},
{
label: "X Axis Label",
key: "xAxisLabel",
control: Input,
},
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
defaultValue: "400",
},
{
label: "Curve",
key: "curve",
control: OptionSelect,
options: ["Smooth", "Straight", "Stepline"],
defaultValue: "Smooth",
},
Add colour palette options for charts
2020-11-05 14:37:28 +01:00
{
label: "Colours",
key: "palette",
control: OptionSelect,
defaultValue: "Palette 1",
options: [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10",
],
},
Add line chart and enable multiple data series for all charts
2020-11-03 10:43:45 +01:00
{
label: "Data Labels",
key: "dataLabels",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Animate",
key: "animate",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
{
label: "Legend",
key: "legend",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
],
},
},
Add area chart and unit formatting
2020-11-03 15:32:21 +01:00
{
name: "Area Chart",
_component: "@budibase/standard-components/area",
description: "Line chart",
icon: "ri-line-chart-fill",
properties: {
settings: [
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
{
label: "Label Col.",
key: "labelColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Data Cols.",
key: "valueColumns",
dependsOn: "datasource",
control: MultiTableViewFieldSelect,
},
{
label: "Format",
key: "yAxisUnits",
control: OptionSelect,
options: ["Default", "Thousands", "Millions"],
defaultValue: "Default",
},
{
label: "Y Label",
key: "yAxisLabel",
control: Input,
},
{
label: "X Label",
key: "xAxisLabel",
control: Input,
},
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
defaultValue: "400",
},
{
label: "Curve",
key: "curve",
control: OptionSelect,
options: ["Smooth", "Straight", "Stepline"],
defaultValue: "Smooth",
},
Add colour palette options for charts
2020-11-05 14:37:28 +01:00
{
label: "Colours",
key: "palette",
control: OptionSelect,
defaultValue: "Palette 1",
options: [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10",
],
},
Add area chart and unit formatting
2020-11-03 15:32:21 +01:00
{
label: "Data Labels",
key: "dataLabels",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Animate",
key: "animate",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
{
label: "Legend",
key: "legend",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Stacked",
key: "stacked",
control: Checkbox,
valueKey: "checked",
Remove unused chart settings
2020-11-04 15:26:14 +01:00
defaultValue: true,
Add area chart and unit formatting
2020-11-03 15:32:21 +01:00
},
{
label: "Gradient",
key: "gradient",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
],
},
},
Add pie and donut charts
2020-11-03 12:50:55 +01:00
{
name: "Pie Chart",
_component: "@budibase/standard-components/pie",
description: "Pie chart",
icon: "ri-pie-chart-line",
properties: {
settings: [
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
{
label: "Label Col.",
key: "labelColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Data Col.",
key: "valueColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
defaultValue: "200",
},
Add colour palette options for charts
2020-11-05 14:37:28 +01:00
{
label: "Colours",
key: "palette",
control: OptionSelect,
defaultValue: "Palette 1",
options: [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10",
],
},
Add pie and donut charts
2020-11-03 12:50:55 +01:00
{
label: "Data Labels",
key: "dataLabels",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Animate",
key: "animate",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
{
label: "Legend",
key: "legend",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
],
},
},
{
name: "Donut Chart",
_component: "@budibase/standard-components/donut",
description: "Donut chart",
icon: "ri-donut-chart-line",
properties: {
settings: [
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
{
label: "Label Col.",
key: "labelColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Data Col.",
key: "valueColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
defaultValue: "200",
},
Add colour palette options for charts
2020-11-05 14:37:28 +01:00
{
label: "Colours",
key: "palette",
control: OptionSelect,
defaultValue: "Palette 1",
options: [
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10",
],
},
Add pie and donut charts
2020-11-03 12:50:55 +01:00
{
label: "Data Labels",
key: "dataLabels",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Animate",
key: "animate",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
{
label: "Legend",
key: "legend",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
],
},
},
Add candlestick chart
2020-11-04 16:21:11 +01:00
{
name: "Candlestick Chart",
_component: "@budibase/standard-components/candlestick",
description: "Candlestick chart",
Fix warning when no data source and increase robustness of charts
2020-11-04 16:56:57 +01:00
icon: "ri-stock-line",
Add candlestick chart
2020-11-04 16:21:11 +01:00
properties: {
settings: [
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
{
label: "Date Col.",
key: "dateColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Open Col.",
key: "openColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Close Col.",
key: "closeColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "High Col.",
key: "highColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Low Col.",
key: "lowColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Format",
key: "yAxisUnits",
control: OptionSelect,
options: ["Default", "Thousands", "Millions"],
defaultValue: "Default",
},
{
label: "Y Axis Label",
key: "yAxisLabel",
control: Input,
},
{
label: "X Axis Label",
key: "xAxisLabel",
control: Input,
},
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
defaultValue: "400",
},
{
label: "Animate",
key: "animate",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
],
},
},
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
],
},
{
name: "Elements",
icon: "ri-paragraph",
isCategory: true,
children: [
New card component
2020-08-13 09:58:48 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/heading",
name: "Headline",
icon: "ri-heading",
description: "A component for displaying heading text",
properties: {
design: { ...all },
settings: [
{
key: "text",
label: "Text",
control: Input,
WIP Form Component Design Update Wide form added Boolean button fixed
2020-06-29 17:32:51 +02:00
},
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
{
key: "type",
label: "Type",
control: OptionSelect,
options: ["h1", "h2", "h3", "h4", "h5", "h6"],
WIP Form Component Design Update Wide form added Boolean button fixed
2020-06-29 17:32:51 +02:00
},
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
],
},
development setup, adding data components
2020-05-06 11:33:30 +02:00
},
data components
2020-05-07 23:15:09 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/text",
name: "Paragraph",
description: "A component for displaying paragraph text.",
icon: "ri-paragraph",
properties: {
design: { ...all },
settings: [
{
label: "Text",
key: "text",
control: Input,
Britecharts work so far
2020-07-26 12:54:55 +02:00
},
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
{
label: "Type",
key: "type",
control: OptionSelect,
options: [
"none",
"bold",
"strong",
"italic",
"emphasis",
"mark",
"small",
"del",
"ins",
"sub",
"sup",
Britecharts work so far
2020-07-26 12:54:55 +02:00
],
},
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
],
},
data components
2020-05-07 23:15:09 +02:00
},
spike - list that accepts children
2020-06-03 00:26:06 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/image",
name: "Image",
description: "A basic component for displaying images",
icon: "ri-image-line",
children: [],
spike - list that accepts children
2020-06-03 00:26:06 +02:00
properties: {
design: { ...all },
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
settings: [{ label: "URL", key: "url", control: Input }],
spike - list that accepts children
2020-06-03 00:26:06 +02:00
},
},
auto create screens with new table
2020-10-09 12:58:46 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
_component: "@budibase/standard-components/link",
name: "Link",
description: "A basic link component for internal and external links",
icon: "ri-link",
children: [],
auto create screens with new table
2020-10-09 12:58:46 +02:00
properties: {
design: { ...all },
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
settings: [
{ label: "Text", key: "text", control: Input },
{ label: "Url", key: "url", control: ScreenSelect },
{
label: "New Tab",
key: "openInNewTab",
valueKey: "checked",
control: Checkbox,
},
],
auto create screens with new table
2020-10-09 12:58:46 +02:00
},
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
},
{
_component: "@budibase/standard-components/icon",
name: "Icon",
description: "A basic component for displaying icons",
icon: "ri-sun-fill",
auto create screens with new table
2020-10-09 12:58:46 +02:00
children: [],
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
properties: {
design: {},
settings: [
{ label: "Icon", key: "icon", control: IconSelect },
{
label: "Size",
key: "size",
control: OptionSelect,
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" },
],
},
{
label: "Color",
key: "color",
control: Colorpicker,
defaultValue: "#000",
},
],
},
},
{
_component: "@budibase/standard-components/embed",
icon: "ri-code-line",
name: "Embed",
description: "Embed content from 3rd party sources",
properties: {
design: {
...all,
},
settings: [{ label: "Embed", key: "embed", control: Input }],
},
auto create screens with new table
2020-10-09 12:58:46 +02:00
},
formatting + fixing builder tests
2020-05-07 11:53:34 +02:00
],
adds basic tab view to the components pane
2020-04-17 09:16:03 +02:00
},
Update to component groupings
2020-05-27 14:21:13 +02:00
{
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
name: "Other",
icon: "ri-more-2-line",
Update to component groupings
2020-05-27 14:21:13 +02:00
isCategory: true,
children: [
{
_component: "##builtin/screenslot",
Various minor UI updates including the settings modal Settings modal update includies, improved spacing, element sizing. Working with this part of the platform felt a little brittle. It might be the fact it's a modal. The frontend component section had a different layout that the block section in the backend and workflow section - updated to follow suit. Dataform button updated and improved. Settings button color updated Additonal data blocks added which are pretty popular (not essential but took me mew a seconds to add and will save me a decent bit in the future)
2020-07-12 20:19:12 +02:00
name: "Screen Slot",
Update to component groupings
2020-05-27 14:21:13 +02:00
description:
Major re-work, client library stills needs some work but it appears layouts and screens are no longer inter-dependent.
2020-11-25 18:56:09 +01:00
"This component is a placeholder for the rendering of a screen within a layout.",
Map, Icon, Datalist removed from UI
2020-07-15 12:12:43 +02:00
icon: "ri-crop-2-line",
bugfix: restoring design props to screenslot
2020-05-29 10:40:53 +02:00
properties: { design: { ...all } },
commonProps: {},
Update to component groupings
2020-05-27 14:21:13 +02:00
children: [],
},
{
name: "Nav Bar",
Add fade screen transition and fix navigation component casing
2020-11-25 19:30:09 +01:00
_component: "@budibase/standard-components/navigation",
Update to component groupings
2020-05-27 14:21:13 +02:00
description:
"A component for handling the navigation within your app.",
Map, Icon, Datalist removed from UI
2020-07-15 12:12:43 +02:00
icon: "ri-navigation-line",
Update to component groupings
2020-05-27 14:21:13 +02:00
children: [],
adds options to navbar component
2020-06-03 14:36:39 +02:00
properties: {
design: { ...all },
Remove deprecated nav component props
2020-10-14 18:08:12 +02:00
settings: [{ label: "Logo URL", key: "logoUrl", control: Input }],
adds options to navbar component
2020-06-03 14:36:39 +02:00
},
Update to component groupings
2020-05-27 14:21:13 +02:00
},
Map, Icon, Datalist removed from UI
2020-07-15 12:12:43 +02:00
{
name: "Login",
_component: "@budibase/standard-components/login",
description:
"A component that automatically generates a login screen for your app.",
icon: "ri-login-box-line",
children: [],
Starting work on builder, very broken.
2020-11-24 19:11:34 +01:00
showOnAsset: ["login-screen"],
Map, Icon, Datalist removed from UI
2020-07-15 12:12:43 +02:00
properties: {
design: { ...all },
settings: [
{
label: "Name",
key: "name",
control: Input,
},
{
label: "Logo",
key: "logo",
control: Input,
},
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Button Text",
key: "buttonText",
control: Input,
},
],
},
},
Update component definition structure for new layout
2020-10-22 18:47:07 +02:00
{
name: "Row Detail",
_component: "@budibase/standard-components/rowdetail",
description:
"Loads a row, using an id from the URL, which can be used with {{ context }}, in children",
icon: "ri-profile-line",
properties: {
design: { ...all },
settings: [{ label: "Table", key: "table", control: TableSelect }],
},
children: [],
},
{
name: "New Row",
_component: "@budibase/standard-components/newrow",
description:
"Sets up a new row for creation, which can be used with {{ context }}, in children",
icon: "ri-profile-line",
properties: {
design: { ...all },
settings: [{ label: "Table", key: "table", control: TableSelect }],
},
children: [],
},
Update to component groupings
2020-05-27 14:21:13 +02:00
],
},
formatting + fixing builder tests
2020-05-07 11:53:34 +02:00
],
Formatting and linting done
2020-06-29 20:55:27 +02:00
}