ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add all new definitions for non-chart components

master
Andrew Kingston 6 years ago
parent
275f0ca092
commit
0a10bc6c71
4 changed files with 241 additions and 270 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 47
      packages/builder/src/components/design/AppPreview/componentStructure.json
  2. 244
      packages/builder/src/components/design/temporaryPanelStructure.js
  3. 199
      packages/standard-components/manifest.json
  4. 21
      packages/standard-components/src/index.js

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

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

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

@ -1,132 +1,5 @@
export default { export default {
categories: [ 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", name: "Chart",
icon: "ri-bar-chart-2-line", 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", "name": "Form",
"icon": "ri-file-edit-line", "icon": "ri-file-edit-line",
"styleable": true "styleable": true
}, },
"dataformwide": {
"name": "Wide Form",
"icon": "ri-file-edit-line",
"styleable": true
},
"input": { "input": {
"name": "Text Field", "name": "Text Field",
"description": "A textfield component that allows the user to input text.", "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": { "login": {
"description": "A component that automatically generates a login screen for your app.", "description": "A component that automatically generates a login screen for your app.",
"icon": "ri-login-box-line", "icon": "ri-login-box-line",
@ -343,5 +416,129 @@
"key": "table" "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 "@budibase/bbui/dist/bbui.css"
import "flatpickr/dist/flatpickr.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 container } from "./Container.svelte"
export { default as grid } from "./grid/Component.svelte" export { default as grid } from "./grid/Component.svelte"
export { default as screenslot } from "./ScreenSlot.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 list } from "./List.svelte"
export { default as stackedlist } from "./StackedList.svelte" export { default as stackedlist } from "./StackedList.svelte"
export { default as card } from "./Card.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 datepicker } from "./DatePicker.svelte"
export { default as text } from "./Text.svelte" export { default as text } from "./Text.svelte"
export { default as login } from "./Login.svelte" export { default as login } from "./Login.svelte"
export { default as navigation } from "./Navigation.svelte" export { default as navigation } from "./Navigation.svelte"
export { default as link } from "./Link.svelte" export { default as link } from "./Link.svelte"
export { default as rowdetail } from "./RowDetail.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" // export * from "./charts"

Write Preview
Loading…
Cancel
Save