Update component definition structure for new layout
This commit is contained in:
Andrew Kingston
parent
7271662cc8
commit
e45f368de7
|
|
@ -19,15 +19,11 @@ import { all } from "./propertyCategories.js"
|
|||
|
||||
export default {
|
||||
categories: [
|
||||
{
|
||||
name: "Basic",
|
||||
isCategory: true,
|
||||
children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/container",
|
||||
name: "Container",
|
||||
description: "This component contains things within itself",
|
||||
icon: "ri-layout-row-line",
|
||||
icon: "ri-layout-column-line",
|
||||
commonProps: {},
|
||||
children: [],
|
||||
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",
|
||||
_component: "@budibase/standard-components/datagrid",
|
||||
description:
|
||||
"a datagrid component with functionality to add, remove and edit rows.",
|
||||
icon: "ri-file-list-line",
|
||||
icon: "ri-grid-line",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
|
|
@ -329,12 +106,113 @@ export default {
|
|||
},
|
||||
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",
|
||||
name: "Stacked List",
|
||||
icon: "ri-archive-drawer-line",
|
||||
description:
|
||||
"A basic card component that can contain content and actions.",
|
||||
icon: "ri-archive-drawer-line",
|
||||
children: [],
|
||||
properties: {
|
||||
design: { ...all },
|
||||
|
|
@ -370,7 +248,7 @@ export default {
|
|||
placeholder: "{{context.Text 3}}",
|
||||
},
|
||||
{
|
||||
label: "destinationUrl",
|
||||
label: "Link URL",
|
||||
key: "destinationUrl",
|
||||
control: ScreenSelect,
|
||||
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",
|
||||
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",
|
||||
description: "Shiny chart",
|
||||
icon: "ri-bar-chart-fill",
|
||||
icon: "ri-bar-chart-2-line",
|
||||
isCategory: true,
|
||||
children: [
|
||||
{
|
||||
name: "Donut",
|
||||
|
|
@ -891,7 +737,7 @@ export default {
|
|||
name: "Line",
|
||||
_component: "@budibase/standard-components/line",
|
||||
description: "Line chart",
|
||||
icon: "ri-line-chart-fill",
|
||||
icon: "ri-line-chart-line",
|
||||
properties: {
|
||||
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",
|
||||
_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",
|
||||
name: "Elements",
|
||||
icon: "ri-paragraph",
|
||||
isCategory: true,
|
||||
children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/heading",
|
||||
name: "Headline",
|
||||
icon: "ri-heading",
|
||||
description: "A component for displaying heading text",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Table", key: "table", control: TableSelect }],
|
||||
},
|
||||
children: [],
|
||||
settings: [
|
||||
{
|
||||
key: "text",
|
||||
label: "Text",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
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",
|
||||
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: "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: [],
|
||||
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,
|
||||
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: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue