Add all new definitions for non-chart components
This commit is contained in:
Andrew Kingston
parent
4818080699
commit
0935c08d5d
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -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: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue