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

Add prototype of form block field layout

This commit is contained in:
Andrew Kingston 2023-09-04 08:14:31 +01:00
parent 525898a93c
commit 02fb5f3865
8 changed files with 448 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

364
packages/client/manifest.json
View File

@ -2597,6 +2597,34 @@
"barTitle": "Justify text" "barTitle": "Justify text"
} }
] ]
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -2654,6 +2682,34 @@
"type": "validation/number", "type": "validation/number",
"label": "Validation", "label": "Validation",
"key": "validation" "key": "validation"
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -2706,6 +2762,34 @@
"label": "Disabled", "label": "Disabled",
"key": "disabled", "key": "disabled",
"defaultValue": false "defaultValue": false
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -2763,6 +2847,34 @@
"type": "validation/string", "type": "validation/string",
"label": "Validation", "label": "Validation",
"key": "validation" "key": "validation"
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -2931,6 +3043,34 @@
"type": "validation/string", "type": "validation/string",
"label": "Validation", "label": "Validation",
"key": "validation" "key": "validation"
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -3093,6 +3233,34 @@
"type": "validation/array", "type": "validation/array",
"label": "Validation", "label": "Validation",
"key": "validation" "key": "validation"
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -3173,6 +3341,34 @@
"type": "validation/boolean", "type": "validation/boolean",
"label": "Validation", "label": "Validation",
"key": "validation" "key": "validation"
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -3252,6 +3448,34 @@
"type": "validation/string", "type": "validation/string",
"label": "Validation", "label": "Validation",
"key": "validation" "key": "validation"
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -3333,6 +3557,34 @@
"type": "validation/datetime", "type": "validation/datetime",
"label": "Validation", "label": "Validation",
"key": "validation" "key": "validation"
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -3434,6 +3686,34 @@
"type": "validation/string", "type": "validation/string",
"label": "Validation", "label": "Validation",
"key": "validation" "key": "validation"
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -3610,6 +3890,34 @@
"type": "validation/attachment", "type": "validation/attachment",
"label": "Validation", "label": "Validation",
"key": "validation" "key": "validation"
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -3678,6 +3986,34 @@
"label": "Disabled", "label": "Disabled",
"key": "disabled", "key": "disabled",
"defaultValue": false "defaultValue": false
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },
@ -3730,6 +4066,34 @@
"label": "Disabled", "label": "Disabled",
"key": "disabled", "key": "disabled",
"defaultValue": false "defaultValue": false
},
{
"type": "select",
"label": "Layout",
"key": "span",
"defaultValue": 6,
"showInBar": true,
"barStyle": "buttons",
"options": [
{
"label": "1 column",
"value": 6,
"barIcon": "Stop",
"barTitle": "1 column"
},
{
"label": "2 columns",
"value": 3,
"barIcon": "ColumnTwoA",
"barTitle": "2 columns"
},
{
"label": "3 columns",
"value": 2,
"barIcon": "ViewColumn",
"barTitle": "3 columns"
}
]
} }
] ]
}, },

35
packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
View File

@ -2,6 +2,7 @@
import BlockComponent from "components/BlockComponent.svelte" import BlockComponent from "components/BlockComponent.svelte"
import Placeholder from "components/app/Placeholder.svelte" import Placeholder from "components/app/Placeholder.svelte"
import { makePropSafe as safe } from "@budibase/string-templates" import { makePropSafe as safe } from "@budibase/string-templates"
import { getContext } from "svelte"
export let dataSource export let dataSource
export let actionUrl export let actionUrl
@ -32,6 +33,7 @@
barcodeqr: "codescanner", barcodeqr: "codescanner",
bb_reference: "bbreferencefield", bb_reference: "bbreferencefield",
} }
const context = getContext("context")
let formId let formId
@ -213,16 +215,18 @@
</BlockComponent> </BlockComponent>
{/if} {/if}
{#key fields} {#key fields}
<BlockComponent type="fieldgroup" props={{ labelPosition }} order={1}> <BlockComponent type="container">
{#each fields as field, idx} <div class="fields" class:mobile={$context.device.mobile}>
{#if getComponentForField(field) && field.active} {#each fields as field, idx}
<BlockComponent {#if getComponentForField(field) && field.active}
type={getComponentForField(field)} <BlockComponent
props={getPropsForField(field)} type={getComponentForField(field)}
order={idx} props={getPropsForField(field)}
/> order={idx}
{/if} />
{/each} {/if}
{/each}
</div>
</BlockComponent> </BlockComponent>
{/key} {/key}
</BlockComponent> </BlockComponent>
@ -232,3 +236,14 @@
text="Choose your table and add some fields to your form to get started" text="Choose your table and add some fields to your form to get started"
/> />
{/if} {/if}
<style>
.fields {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px 16px;
}
.fields.mobile :global(.spectrum-Form-item) {
grid-column: span 6 !important;
}
</style>

2
packages/client/src/components/app/forms/AttachmentField.svelte
View File

@ -11,6 +11,7 @@
export let extensions export let extensions
export let onChange export let onChange
export let maximum = undefined export let maximum = undefined
export let span
let fieldState let fieldState
let fieldApi let fieldApi
@ -72,6 +73,7 @@
{field} {field}
{disabled} {disabled}
{validation} {validation}
{span}
type="attachment" type="attachment"
bind:fieldState bind:fieldState
bind:fieldApi bind:fieldApi

2
packages/client/src/components/app/forms/DateTimeField.svelte
View File

@ -13,6 +13,7 @@
export let validation export let validation
export let defaultValue export let defaultValue
export let onChange export let onChange
export let span
let fieldState let fieldState
let fieldApi let fieldApi
@ -31,6 +32,7 @@
{disabled} {disabled}
{validation} {validation}
{defaultValue} {defaultValue}
{span}
type="datetime" type="datetime"
bind:fieldState bind:fieldState
bind:fieldApi bind:fieldApi

79
packages/client/src/components/app/forms/Field.svelte
View File

@ -12,6 +12,7 @@
export let type export let type
export let disabled = false export let disabled = false
export let validation export let validation
export let span = 6
// Get contexts // Get contexts
const formContext = getContext("form") const formContext = getContext("form")
@ -62,40 +63,58 @@
}) })
</script> </script>
<FieldGroupFallback> <div
<div class="spectrum-Form-item" use:styleable={$component.styles}> class="spectrum-Form-item"
{#key $component.editing} class:span-2={span === 2}
<label class:span-3={span === 3}
bind:this={labelNode} class:span-6={span === 6 || !span}
contenteditable={$component.editing} use:styleable={$component.styles}
on:blur={$component.editing ? updateLabel : null} class:above={labelPos === "above"}
class:hidden={!label} >
for={fieldState?.fieldId} {#key $component.editing}
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`} <label
> bind:this={labelNode}
{label || " "} contenteditable={$component.editing}
</label> on:blur={$component.editing ? updateLabel : null}
{/key} class:hidden={!label}
<div class="spectrum-Form-itemField"> for={fieldState?.fieldId}
{#if !formContext} class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
<Placeholder text="Form components need to be wrapped in a form" /> >
{:else if !fieldState} {label || " "}
<Placeholder /> </label>
{:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)} {/key}
<Placeholder <div class="spectrum-Form-itemField">
text="This Field setting is the wrong data type for this component" {#if !formContext}
/> <Placeholder text="Form components need to be wrapped in a form" />
{:else} {:else if !fieldState}
<slot /> <Placeholder />
{#if fieldState.error} {:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)}
<div class="error">{fieldState.error}</div> <Placeholder
{/if} text="This Field setting is the wrong data type for this component"
/>
{:else}
<slot />
{#if fieldState.error}
<div class="error">{fieldState.error}</div>
{/if} {/if}
</div> {/if}
</div> </div>
</FieldGroupFallback> </div>
<style> <style>
.spectrum-Form-item.span-2 {
grid-column: span 2;
}
.spectrum-Form-item.span-3 {
grid-column: span 3;
}
.spectrum-Form-item.span-6 {
grid-column: span 6;
}
.spectrum-Form-item.above {
display: flex;
flex-direction: column;
}
label { label {
white-space: nowrap; white-space: nowrap;
} }

2
packages/client/src/components/app/forms/MultiFieldSelect.svelte
View File

@ -17,6 +17,7 @@
export let onChange export let onChange
export let optionsType = "select" export let optionsType = "select"
export let direction = "vertical" export let direction = "vertical"
export let span
let fieldState let fieldState
let fieldApi let fieldApi
@ -56,6 +57,7 @@
{label} {label}
{disabled} {disabled}
{validation} {validation}
{span}
defaultValue={expandedDefaultValue} defaultValue={expandedDefaultValue}
type="array" type="array"
bind:fieldState bind:fieldState

2
packages/client/src/components/app/forms/OptionsField.svelte
View File

@ -18,6 +18,7 @@
export let direction = "vertical" export let direction = "vertical"
export let onChange export let onChange
export let sort = true export let sort = true
export let span
let fieldState let fieldState
let fieldApi let fieldApi
@ -47,6 +48,7 @@
{disabled} {disabled}
{validation} {validation}
{defaultValue} {defaultValue}
{span}
type="options" type="options"
bind:fieldState bind:fieldState
bind:fieldApi bind:fieldApi

2
packages/client/src/components/app/forms/StringField.svelte
View File

@ -11,6 +11,7 @@
export let defaultValue = "" export let defaultValue = ""
export let align export let align
export let onChange export let onChange
export let span
let fieldState let fieldState
let fieldApi let fieldApi
@ -29,6 +30,7 @@
{disabled} {disabled}
{validation} {validation}
{defaultValue} {defaultValue}
{span}
type={type === "number" ? "number" : "string"} type={type === "number" ? "number" : "string"}
bind:fieldState bind:fieldState
bind:fieldApi bind:fieldApi