CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-09 06:01:08 +12:00
Code Issues Projects Releases Wiki Activity

Update component definition structure for new layout

Browse source
This commit is contained in:
Andrew Kingston 2020-10-22 17:47:07 +01:00
parent 7271662cc8
commit e45f368de7
1 changed files with 955 additions and 980 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

551
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View file

@ -19,15 +19,11 @@ import { all } from "./propertyCategories.js"
export default { export default {
categories: [ categories: [
{
name: "Basic",
isCategory: true,
children: [
{ {
_component: "@budibase/standard-components/container", _component: "@budibase/standard-components/container",
name: "Container", name: "Container",
description: "This component contains things within itself", description: "This component contains things within itself",
icon: "ri-layout-row-line", icon: "ri-layout-column-line",
commonProps: {}, commonProps: {},
children: [], children: [],
properties: { properties: {
@ -56,231 +52,12 @@ export default {
], ],
}, },
}, },
{
_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 }],
},
},
{
name: "Text",
description: "This is a simple text component",
icon: "ri-t-box-line",
commonProps: {},
children: [
{
_component: "@budibase/standard-components/heading",
name: "Headline",
description: "A component for displaying heading text",
icon: "ri-heading",
properties: {
design: { ...all },
settings: [
{
key: "text",
label: "Text",
control: Input,
},
{
key: "type",
label: "Type",
control: OptionSelect,
options: ["h1", "h2", "h3", "h4", "h5", "h6"],
},
],
},
},
{
_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,
},
{
label: "Type",
key: "type",
control: OptionSelect,
options: [
"none",
"bold",
"strong",
"italic",
"emphasis",
"mark",
"small",
"del",
"ins",
"sub",
"sup",
],
},
],
},
},
],
},
{
_component: "@budibase/standard-components/input",
name: "Textfield",
description:
"A textfield component that allows the user to input text.",
icon: "ri-edit-box-line",
properties: {
design: { ...all },
settings: [
{ label: "Label", key: "label", control: Input },
{
label: "Type",
key: "type",
control: OptionSelect,
options: ["text", "password"],
},
],
},
},
{
_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: "onClick", key: "onClick", control: Event },
],
},
},
{
_component: "@budibase/standard-components/image",
name: "Image",
description: "A basic component for displaying images",
icon: "ri-image-line",
children: [],
properties: {
design: { ...all },
settings: [{ label: "URL", key: "url", control: Input }],
},
},
{
_component: "@budibase/standard-components/icon",
name: "Icon",
description: "A basic component for displaying icons",
icon: "ri-sun-fill",
children: [],
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/link",
name: "Link",
description: "A basic link component for internal and external links",
icon: "ri-link",
children: [],
properties: {
design: { ...all },
settings: [
{ label: "Text", key: "text", control: Input },
{ label: "Url", key: "url", control: ScreenSelect },
{
label: "Open New Tab",
key: "openInNewTab",
valueKey: "checked",
control: Checkbox,
},
],
},
},
{
_component: "@budibase/standard-components/datepicker",
name: "Date Picker",
description: "A basic date picker component",
icon: "ri-calendar-line",
children: [],
properties: {
design: { ...all },
settings: [
{ label: "Placeholder", key: "placeholder", control: Input },
],
},
},
],
},
{
name: "Blocks",
isCategory: true,
children: [
{
name: "List",
_component: "@budibase/standard-components/list",
description: "Renders all children once per row, of a given table",
icon: "ri-file-list-line",
properties: {
design: { ...all },
settings: [
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
],
},
children: [],
},
{ {
name: "Grid", name: "Grid",
_component: "@budibase/standard-components/datagrid", _component: "@budibase/standard-components/datagrid",
description: description:
"a datagrid component with functionality to add, remove and edit rows.", "a datagrid component with functionality to add, remove and edit rows.",
icon: "ri-file-list-line", icon: "ri-grid-line",
properties: { properties: {
design: { ...all }, design: { ...all },
settings: [ settings: [
@ -329,12 +106,113 @@ export default {
}, },
children: [], 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",
isCategory: true,
children: [
{
_component: "@budibase/standard-components/dataform",
name: "Form Basic",
icon: "ri-file-edit-line",
properties: {
design: { ...all },
settings: [],
},
},
{
_component: "@budibase/standard-components/dataformwide",
name: "Form Wide",
icon: "ri-file-edit-line",
properties: {
design: { ...all },
settings: [],
},
},
{
_component: "@budibase/standard-components/input",
name: "Textfield",
description:
"A textfield component that allows the user to input text.",
icon: "ri-edit-box-line",
properties: {
design: { ...all },
settings: [
{ label: "Label", key: "label", control: Input },
{
label: "Type",
key: "type",
control: OptionSelect,
options: ["text", "password"],
},
],
},
},
{
_component: "@budibase/standard-components/datepicker",
name: "Date Picker",
description: "A basic date picker component",
icon: "ri-calendar-line",
children: [],
properties: {
design: { ...all },
settings: [
{ label: "Placeholder", key: "placeholder", control: Input },
],
},
},
],
},
{
name: "Card",
icon: "ri-archive-drawer-line",
isCategory: true,
children: [
{ {
_component: "@budibase/standard-components/stackedlist", _component: "@budibase/standard-components/stackedlist",
name: "Stacked List", name: "Stacked List",
icon: "ri-archive-drawer-line",
description: description:
"A basic card component that can contain content and actions.", "A basic card component that can contain content and actions.",
icon: "ri-archive-drawer-line",
children: [], children: [],
properties: { properties: {
design: { ...all }, design: { ...all },
@ -370,7 +248,7 @@ export default {
placeholder: "{{context.Text 3}}", placeholder: "{{context.Text 3}}",
}, },
{ {
label: "destinationUrl", label: "Link URL",
key: "destinationUrl", key: "destinationUrl",
control: ScreenSelect, control: ScreenSelect,
placeholder: "/table/_id", placeholder: "/table/_id",
@ -378,12 +256,6 @@ export default {
], ],
}, },
}, },
{
name: "Card",
description: "Card components",
icon: "ri-layout-bottom-line",
commonProps: {},
children: [
{ {
_component: "@budibase/standard-components/card", _component: "@budibase/standard-components/card",
name: "Vertical", name: "Vertical",
@ -545,36 +417,10 @@ export default {
}, },
], ],
}, },
{
name: "Form",
description: "A component that generates a form from your data.",
icon: "ri-file-edit-line",
commonProps: {},
children: [
{
_component: "@budibase/standard-components/dataform",
name: "Form Basic",
icon: "ri-file-edit-line",
properties: {
design: { ...all },
settings: [],
},
},
{
_component: "@budibase/standard-components/dataformwide",
name: "Form Wide",
icon: "ri-file-edit-line",
properties: {
design: { ...all },
settings: [],
},
},
],
},
{ {
name: "Chart", name: "Chart",
description: "Shiny chart", icon: "ri-bar-chart-2-line",
icon: "ri-bar-chart-fill", isCategory: true,
children: [ children: [
{ {
name: "Donut", name: "Donut",
@ -891,7 +737,7 @@ export default {
name: "Line", name: "Line",
_component: "@budibase/standard-components/line", _component: "@budibase/standard-components/line",
description: "Line chart", description: "Line chart",
icon: "ri-line-chart-fill", icon: "ri-line-chart-line",
properties: { properties: {
settings: [ settings: [
{ {
@ -1055,45 +901,150 @@ export default {
}, },
], ],
}, },
// {
// name: "Data List",
// _component: "@budibase/standard-components/datalist",
// description: "Shiny list",
// icon: "ri-file-list-line",
// properties: {
// design: { ...all },
// settings: [{ label: "Table", key: "table", control: TableSelect }],
// },
// children: [],
// },
{ {
name: "Row Detail", name: "Elements",
_component: "@budibase/standard-components/rowdetail", icon: "ri-paragraph",
description: isCategory: true,
"Loads a row, using an id from the URL, which can be used with {{ context }}, in children", children: [
icon: "ri-profile-line", {
_component: "@budibase/standard-components/heading",
name: "Headline",
icon: "ri-heading",
description: "A component for displaying heading text",
properties: { properties: {
design: { ...all }, design: { ...all },
settings: [{ label: "Table", key: "table", control: TableSelect }], settings: [
}, {
children: [], key: "text",
label: "Text",
control: Input,
}, },
{ {
name: "New Row", key: "type",
_component: "@budibase/standard-components/newrow", label: "Type",
description: control: OptionSelect,
"Sets up a new row for creation, which can be used with {{ context }}, in children", options: ["h1", "h2", "h3", "h4", "h5", "h6"],
icon: "ri-profile-line", },
],
},
},
{
_component: "@budibase/standard-components/text",
name: "Paragraph",
description: "A component for displaying paragraph text.",
icon: "ri-paragraph",
properties: { properties: {
design: { ...all }, design: { ...all },
settings: [{ label: "Table", key: "table", control: TableSelect }], settings: [
{
label: "Text",
key: "text",
control: Input,
}, },
{
label: "Type",
key: "type",
control: OptionSelect,
options: [
"none",
"bold",
"strong",
"italic",
"emphasis",
"mark",
"small",
"del",
"ins",
"sub",
"sup",
],
},
],
},
},
{
_component: "@budibase/standard-components/image",
name: "Image",
description: "A basic component for displaying images",
icon: "ri-image-line",
children: [], children: [],
properties: {
design: { ...all },
settings: [{ label: "URL", key: "url", control: Input }],
},
},
{
_component: "@budibase/standard-components/link",
name: "Link",
description: "A basic link component for internal and external links",
icon: "ri-link",
children: [],
properties: {
design: { ...all },
settings: [
{ label: "Text", key: "text", control: Input },
{ label: "Url", key: "url", control: ScreenSelect },
{
label: "New Tab",
key: "openInNewTab",
valueKey: "checked",
control: Checkbox,
},
],
},
},
{
_component: "@budibase/standard-components/icon",
name: "Icon",
description: "A basic component for displaying icons",
icon: "ri-sun-fill",
children: [],
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 }],
},
}, },
], ],
}, },
{ {
name: "Layouts", name: "Other",
icon: "ri-more-2-line",
isCategory: true, isCategory: true,
children: [ children: [
{ {
@ -1152,6 +1103,30 @@ export default {
], ],
}, },
}, },
{
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: [],
},
], ],
}, },
], ],