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

Add all new definitions for non-chart components

This commit is contained in:
Andrew Kingston 2021-01-19 11:49:52 +00:00
parent 275f0ca092
commit 0a10bc6c71
4 changed files with 243 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/builder/src/components/design/AppPreview/componentStructure.json
View File

@ -2,33 +2,54 @@
"container",
"grid",
"list",
"button",
{
"name": "Cards",
"name": "Form",
"icon": "ri-file-edit-line",
"children": [
"card",
"stackedlist"
]
},
{
"name": "Forms",
"icon": "ri-file-edit-line",
"children": [
"form",
"dataform",
"dataformwide",
"input",
"richtext",
"datepicker"
]
},
"button",
"text",
"link",
{
"name": "Card",
"icon": "ri-archive-drawer-line",
"children": [
"stackedlist",
"card",
"cardhorizontal",
"cardstat"
]
},
{
"name": "Chart",
"icon": "ri-bar-chart-2-line",
"children": []
},
{
"name": "Elements",
"icon": "ri-paragraph",
"children": [
"heading",
"text",
"image",
"link",
"icon",
"embed"
]
},
{
"name": "Other",
"icon": "ri-file-edit-line",
"icon": "ri-more-2-line",
"children": [
"screenslot",
"navigation"
"navigation",
"login",
"rowdetail",
"newrow"
]
}
]

244
packages/builder/src/components/design/temporaryPanelStructure.js
View File

@ -1,132 +1,5 @@
export default {
categories: [
{
name: "Card",
icon: "ri-archive-drawer-line",
isCategory: true,
children: [
{
_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: ScreenSelect,
placeholder: "Link URL",
},
{
label: "Link Color",
key: "linkColor",
control: Colorpicker,
defaultValue: "#000",
},
{
label: "Hover Color",
key: "linkHoverColor",
control: Colorpicker,
defaultValue: "#222",
},
{
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",
},
],
},
},
{
_component: "@budibase/standard-components/cardstat",
name: "Stat",
description: "A card component for displaying numbers.",
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",
},
],
},
},
],
},
{
name: "Chart",
icon: "ri-bar-chart-2-line",
@ -715,122 +588,5 @@ export default {
},
],
},
{
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: [
{
key: "text",
label: "Text",
control: Input,
},
{
key: "type",
label: "Type",
control: OptionSelect,
options: ["h1", "h2", "h3", "h4", "h5", "h6"],
},
],
},
},
{
_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/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: "Other",
icon: "ri-more-2-line",
isCategory: true,
children: [
{
_component: "##builtin/screenslot",
name: "Screen Slot",
description:
"This component is a placeholder for the rendering of a screen within a layout.",
icon: "ri-crop-2-line",
properties: { design: { ...all } },
commonProps: {},
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: [],
},
],
},
],
}

199
packages/standard-components/manifest.json
View File

@ -114,11 +114,16 @@
}
]
},
"form": {
"dataform": {
"name": "Form",
"icon": "ri-file-edit-line",
"styleable": true
},
"dataformwide": {
"name": "Wide Form",
"icon": "ri-file-edit-line",
"styleable": true
},
"input": {
"name": "Text Field",
"description": "A textfield component that allows the user to input text.",
@ -270,6 +275,74 @@
}
]
},
"heading": {
"name": "Headline",
"icon": "ri-heading",
"description": "A component for displaying heading text",
"styleable": true,
"settings": [
{
"type": "text",
"key": "text",
"label": "Text"
},
{
"type": "select",
"key": "type",
"label": "Type",
"options": ["h1", "h2", "h3", "h4", "h5", "h6"],
"defaultValue": "h1"
}
]
},
"image": {
"name": "Image",
"description": "A basic component for displaying images",
"icon": "ri-image-line",
"styleable": true,
"settings": [
{
"type": "text",
"label": "URL",
"key": "url"
}
]
},
"icon": {
"name": "Icon",
"description": "A basic component for displaying icons",
"icon": "ri-sun-fill",
"styleable": true,
"settings": [
{
"type": "icon",
"label": "Icon",
"key": "icon"
},
{
"type": "select",
"label": "Size",
"key": "size",
"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" }
]
},
{
"type": "color",
"label": "Color",
"key": "color",
"defaultValue": "#000"
}
]
},
"login": {
"description": "A component that automatically generates a login screen for your app.",
"icon": "ri-login-box-line",
@ -343,5 +416,129 @@
"key": "table"
}
]
},
"newrow": {
"name": "New Row",
"description": "Sets up a new row for creation, which can be used with {{ context }}, in children",
"icon": "ri-profile-line",
"hasChildren": true,
"styleable": true,
"settings": [
{
"type": "text",
"label": "Table",
"key": "table"
}
]
},
"cardhorizontal": {
"name": "Horizontal Card",
"description": "A basic card component that can contain content and actions.",
"icon": "ri-layout-row-line",
"styleable": true,
"settings": [
{
"type": "text",
"label": "Image",
"key": "imageUrl"
},
{
"type": "text",
"label": "Heading",
"key": "heading"
},
{
"type": "text",
"label": "Description",
"key": "description"
},
{
"type": "text",
"label": "Subtext",
"key": "subtext"
},
{
"type": "text",
"label": "Link Text",
"key": "linkText"
},
{
"type": "screen",
"label": "Link URL",
"key": "linkUrl"
},
{
"type": "color",
"label": "Link Color",
"key": "linkColor",
"defaultValue": "#000"
},
{
"type": "color",
"label": "Hover Color",
"key": "linkHoverColor",
"defaultValue": "#222"
},
{
"type": "select",
"label": "Card Width",
"key": "cardWidth",
"options": ["24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"],
"default": "32rem"
},
{
"type": "select",
"label": "Image Width",
"key": "imageWidth",
"options": ["auto", "8rem", "12rem", "16rem"],
"defaultValue": "8rem"
},
{
"type": "select",
"label": "Image Height",
"key": "imageHeight",
"options": ["auto", "8rem", "12rem", "16rem", "auto"],
"defaultValue": "auto"
}
]
},
"cardstat": {
"name": "Stat Card",
"description": "A card component for displaying numbers.",
"icon": "ri-dual-sim-2-line",
"styleable": true,
"settings": [
{
"type": "text",
"label": "Title",
"key": "title",
"placeholder": "Total Revenue"
},
{
"type": "text",
"label": "Value",
"key": "value",
"placeholder": "$1,981,983"
},
{
"type": "text",
"label": "Label",
"key": "label",
"placeholder": "Stripe"
}
]
},
"embed": {
"name": "Embed",
"icon": "ri-code-line",
"description": "Embed content from 3rd party sources",
"styleable": true,
"settings": [
{
"type": "text",
"label": "Embed",
"key": "embed"
}
]
}
}

21
packages/standard-components/src/index.js
View File

@ -1,10 +1,6 @@
import "@budibase/bbui/dist/bbui.css"
import "flatpickr/dist/flatpickr.css"
import "@spectrum-css/vars/dist/spectrum-global.css"
import "@spectrum-css/vars/dist/spectrum-medium.css"
import "@spectrum-css/vars/dist/spectrum-light.css"
export { default as container } from "./Container.svelte"
export { default as grid } from "./grid/Component.svelte"
export { default as screenslot } from "./ScreenSlot.svelte"
@ -14,19 +10,20 @@ export { default as richtext } from "./RichText.svelte"
export { default as list } from "./List.svelte"
export { default as stackedlist } from "./StackedList.svelte"
export { default as card } from "./Card.svelte"
export { default as form } from "./DataFormWide.svelte"
export { default as dataform } from "./DataForm.svelte"
export { default as dataformwide } from "./DataFormWide.svelte"
export { default as datepicker } from "./DatePicker.svelte"
export { default as text } from "./Text.svelte"
export { default as login } from "./Login.svelte"
export { default as navigation } from "./Navigation.svelte"
export { default as link } from "./Link.svelte"
export { default as rowdetail } from "./RowDetail.svelte"
export { default as heading } from "./Heading.svelte"
export { default as image } from "./Image.svelte"
export { default as embed } from "./Embed.svelte"
export { default as cardhorizontal } from "./CardHorizontal.svelte"
export { default as cardstat } from "./CardStat.svelte"
export { default as newrow } from "./NewRow.svelte"
export { default as icon } from "./Icon.svelte"
// export { default as heading } from "./Heading.svelte"
// export { default as image } from "./Image.svelte"
// export { default as embed } from "./Embed.svelte"
// export { default as cardhorizontal } from "./CardHorizontal.svelte"
// export { default as cardstat } from "./CardStat.svelte"
// export { default as newrow } from "./NewRow.svelte"
// export { default as icon } from "./Icon.svelte"
// export * from "./charts"