CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-25 17:40:38 +12:00
Code Issues Projects Releases Wiki Activity

change name to section, add illegalChildren prop to manifest

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-06-09 10:23:42 +02:00
parent 1d2d02b48b
commit 03b5cff753
5 changed files with 54 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
View file

@ -1,16 +1,18 @@
<script>
import {
ActionMenu,
ActionGroup,
ActionButton,
MenuItem,
Icon,
} from "@budibase/bbui"
import { store, currentAssetName } from "builderStore"
import { ActionMenu, ActionButton, MenuItem, Icon } from "@budibase/bbui"
import { store, currentAssetName, selectedComponent } from "builderStore"
import structure from "./componentStructure.json"
$: enrichedStructure = enrichStructure(structure, $store.components)
const isChildAllowed = ({ name }, selectedComponent) => {
const currentComponent = store.actions.components.getDefinition(
selectedComponent._component
)
return currentComponent?.illegalChildren?.includes(name)
}
const enrichStructure = (structure, definitions) => {
let enrichedStructure = []
structure.forEach(item => {
@ -45,6 +47,7 @@
<ActionMenu disabled={!item.isCategory}>
<ActionButton
icon={item.icon}
disabled={isChildAllowed(item, $selectedComponent)}
quiet
size="S"
slot="control"

2
packages/builder/src/components/design/AppPreview/componentStructure.json
View file

@ -1,6 +1,6 @@
[
"section",
"container",
"layout",
"dataprovider",
"table",
"repeater",

41
packages/standard-components/manifest.json
View file

@ -6,15 +6,17 @@
"hasChildren": true,
"styleable": true,
"transitionable": true,
"illegalChildren": ["Section"],
"settings": []
},
"layout": {
"name": "Layout",
"description": "Use this component to create different column layouts",
"section": {
"name": "Section",
"description": "Add a section to your application",
"icon": "ColumnTwoB",
"hasChildren": true,
"styleable": true,
"transitionable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "modal",
@ -35,6 +37,7 @@
"name": "Button",
"description": "A basic html button that is ready for styling",
"icon": "Button",
"illegalChildren": ["Section"],
"styleable": true,
"settings": [
{
@ -59,6 +62,7 @@
"description": "A configurable data list that attaches to your backend tables.",
"icon": "ViewList",
"styleable": true,
"illegalChildren": ["Section"],
"hasChildren": true,
"settings": [
{
@ -87,6 +91,7 @@
"icon": "TaskList",
"description": "A basic card component that can contain content and actions.",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -116,6 +121,7 @@
"description": "A basic card component that can contain content and actions.",
"icon": "ViewColumn",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -176,6 +182,7 @@
"description": "A component for displaying paragraph text.",
"icon": "TextParagraph",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -189,6 +196,7 @@
"icon": "TextBold",
"description": "A component for displaying heading text",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -209,6 +217,7 @@
"description": "A basic component for displaying images",
"icon": "Image",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -222,6 +231,7 @@
"description": "A background image",
"icon": "Images",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -279,6 +289,7 @@
"description": "A basic component for displaying icons",
"icon": "Bell",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "icon",
@ -326,6 +337,7 @@
"description": "A component for handling the navigation within your app.",
"icon": "BreadcrumbNavigation",
"styleable": true,
"illegalChildren": ["Section"],
"hasChildren": true,
"settings": [
{
@ -346,6 +358,7 @@
"description": "A basic link component for internal and external links",
"icon": "Link",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -375,6 +388,7 @@
"description": "A basic card component that can contain content and actions.",
"icon": "ViewRow",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -447,6 +461,7 @@
"description": "A card component for displaying numbers.",
"icon": "Card",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -473,6 +488,7 @@
"icon": "Code",
"description": "Embed content from 3rd party sources",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -486,6 +502,7 @@
"description": "Bar chart",
"icon": "GraphBarVertical",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -586,6 +603,7 @@
"description": "Line chart",
"icon": "GraphTrend",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -687,6 +705,7 @@
"description": "Line chart",
"icon": "GraphAreaStacked",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -800,6 +819,7 @@
"description": "Pie chart",
"icon": "GraphPie",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -877,6 +897,7 @@
"description": "Donut chart",
"icon": "GraphDonut",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -954,6 +975,7 @@
"description": "Candlestick chart",
"icon": "GraphBarVerticalStacked",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "text",
@ -1036,6 +1058,7 @@
"icon": "Form",
"styleable": true,
"hasChildren": true,
"illegalChildren": ["Section"],
"actions": [
"ValidateForm"
],
@ -1100,6 +1123,7 @@
"name": "Field Group",
"icon": "Group",
"styleable": true,
"illegalChildren": ["Section"],
"hasChildren": true,
"settings": [
{
@ -1128,6 +1152,7 @@
"name": "Text Field",
"icon": "Text",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "field/string",
@ -1156,6 +1181,7 @@
"name": "Number Field",
"icon": "123",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "field/number",
@ -1184,6 +1210,7 @@
"name": "Password Field",
"icon": "LockClosed",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "field/string",
@ -1212,6 +1239,7 @@
"name": "Options Picker",
"icon": "ViewList",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "field/options",
@ -1241,6 +1269,7 @@
"name": "Checkbox",
"icon": "Checkmark",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "field/boolean",
@ -1269,6 +1298,7 @@
"name": "Rich Text",
"icon": "TextParagraph",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "field/longform",
@ -1298,6 +1328,7 @@
"name": "Date Picker",
"icon": "DateInput",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "field/datetime",
@ -1332,6 +1363,7 @@
"name": "Attachment",
"icon": "Attach",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "field/attachment",
@ -1355,6 +1387,7 @@
"name": "Relationship Picker",
"icon": "TaskList",
"styleable": true,
"illegalChildren": ["Section"],
"settings": [
{
"type": "field/link",
@ -1384,6 +1417,7 @@
"info": "Pagination is only available for data stored in internal tables.",
"icon": "Data",
"styleable": false,
"illegalChildren": ["Section"],
"hasChildren": true,
"settings": [
{
@ -1447,6 +1481,7 @@
"name": "Table",
"icon": "Table",
"styleable": true,
"illegalChildren": ["Section"],
"hasChildren": true,
"settings": [
{

5
packages/standard-components/src/Layout.svelte → packages/standard-components/src/Section.svelte
View file

@ -30,6 +30,7 @@
bind:clientWidth={containerWidth}
in:transition={{ type: $component.transition }}
class="{type} columns-{columnsDependingOnSize}"
use:styleable={$component.styles}
>
<slot />
{#if layoutMap[type] - $component.children > 0}
@ -45,10 +46,10 @@
grid-gap: 16px;
}
.mainSidebar {
grid-template-columns: 2fr 1fr;
grid-template-columns: 3fr 1fr;
}
.sidebarMain {
grid-template-columns: 1fr 2fr;
grid-template-columns: 1fr 3fr;
}
.twoColumns {
grid-template-columns: 1fr 1fr;

2
packages/standard-components/src/index.js
View file

@ -11,7 +11,7 @@ import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
loadSpectrumIcons()
export { default as container } from "./Container.svelte"
export { default as layout } from "./Layout.svelte"
export { default as section } from "./Section.svelte"
export { default as dataprovider } from "./DataProvider.svelte"
export { default as screenslot } from "./ScreenSlot.svelte"
export { default as button } from "./Button.svelte"