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

Merge pull request #12244 from Budibase/budi-7105-builder-option-for-read-only-form-fields 

Read only form fields
This commit is contained in:
Martin McKeaveney 2023-11-07 10:13:39 +00:00 committed by GitHub
parent 466d5350e2 c169a73764
commit c1c9dbb642
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 188 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/bbui/src/Form/Core/Checkbox.svelte
View File

@ -8,6 +8,7 @@
export let id = null
export let text = null
export let disabled = false
export let readonly = false
export let size
export let indeterminate = false
@ -24,6 +25,7 @@
class:is-invalid={!!error}
class:checked={value}
class:is-indeterminate={indeterminate}
class:readonly
>
<input
checked={value}
@ -68,4 +70,7 @@
.spectrum-Checkbox-input {
opacity: 0;
}
.readonly {
pointer-events: none;
}
</style>

5
packages/bbui/src/Form/Core/CheckboxGroup.svelte
View File

@ -8,6 +8,7 @@
export let options = []
export let error = null
export let disabled = false
export let readonly = false
export let getOptionLabel = option => option
export let getOptionValue = option => option
@ -34,6 +35,7 @@
title={getOptionLabel(option)}
class="spectrum-Checkbox spectrum-FieldGroup-item"
class:is-invalid={!!error}
class:readonly
>
<label
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
@ -66,4 +68,7 @@
.spectrum-Checkbox-input {
opacity: 0;
}
.readonly {
pointer-events: none;
}
</style>

4
packages/bbui/src/Form/Core/DatePicker.svelte
View File

@ -9,6 +9,7 @@
export let id = null
export let disabled = false
export let readonly = false
export let error = null
export let enableTime = true
export let value = null
@ -186,7 +187,7 @@
>
<div
id={flatpickrId}
class:is-disabled={disabled}
class:is-disabled={disabled || readonly}
class:is-invalid={!!error}
class="flatpickr spectrum-InputGroup spectrum-Datepicker"
class:is-focused={open}
@ -211,6 +212,7 @@
{/if}
<input
{disabled}
{readonly}
data-input
type="text"
class="spectrum-Textfield-input spectrum-InputGroup-input"

5
packages/bbui/src/Form/Core/RadioGroup.svelte
View File

@ -8,6 +8,7 @@
export let options = []
export let error = null
export let disabled = false
export let readonly = false
export let getOptionLabel = option => option
export let getOptionValue = option => option
export let getOptionTitle = option => option
@ -40,6 +41,7 @@
title={getOptionTitle(option)}
class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
class:is-invalid={!!error}
class:readonly
>
<input
on:change={onChange}
@ -62,4 +64,7 @@
.spectrum-Radio-input {
opacity: 0;
}
.readonly {
pointer-events: none;
}
</style>

2
packages/bbui/src/Form/Core/RichTextField.svelte
View File

@ -4,6 +4,7 @@
export let value = ""
export let placeholder = null
export let disabled = false
export let readonly = false
export let error = null
export let height = null
export let id = null
@ -20,6 +21,7 @@
{fullScreenOffset}
{disabled}
{easyMDEOptions}
{readonly}
on:change
/>
</div>

2
packages/bbui/src/Form/Core/TextArea.svelte
View File

@ -5,6 +5,7 @@
export let value = ""
export let placeholder = null
export let disabled = false
export let readonly = false
export let error = null
export let id = null
export let height = null
@ -61,6 +62,7 @@
class="spectrum-Textfield-input"
style={align ? `text-align: ${align}` : ""}
{disabled}
{readonly}
{id}
on:focus={() => (focus = true)}
on:blur={onChange}

2
packages/bbui/src/Form/DatePicker.svelte
View File

@ -7,6 +7,7 @@
export let label = null
export let labelPosition = "above"
export let disabled = false
export let readonly = false
export let error = null
export let enableTime = true
export let timeOnly = false
@ -33,6 +34,7 @@
<DatePicker
{error}
{disabled}
{readonly}
{value}
{placeholder}
{enableTime}

5
packages/bbui/src/Markdown/MarkdownEditor.svelte
View File

@ -8,6 +8,7 @@
export let id = null
export let fullScreenOffset = 0
export let disabled = false
export let readonly = false
export let easyMDEOptions
const dispatch = createEventDispatcher()
@ -19,6 +20,9 @@
// control
$: checkValue(value)
$: mde?.codemirror.on("change", debouncedUpdate)
$: if (readonly || disabled) {
mde?.togglePreview()
}
const checkValue = val => {
if (mde && val !== latestValue) {
@ -54,6 +58,7 @@
easyMDEOptions={{
initialValue: value,
placeholder,
toolbar: disabled || readonly ? false : undefined,
...easyMDEOptions,
}}
/>

119
packages/client/manifest.json
View File

@ -2589,6 +2589,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "text",
"label": "Initial form step",
@ -2738,6 +2749,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "validation/string",
"label": "Validation",
@ -2858,6 +2880,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "validation/number",
"label": "Validation",
@ -3165,6 +3198,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "select",
"label": "Options source",
@ -3319,6 +3363,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "select",
"label": "Type",
@ -3522,6 +3577,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "validation/boolean",
"label": "Validation",
@ -3630,6 +3696,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "validation/string",
"label": "Validation",
@ -3740,6 +3817,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "validation/datetime",
"label": "Validation",
@ -4087,7 +4175,7 @@
},
{
"type": "boolean",
"label": "Disabled",
"label": "Read only",
"key": "disabled",
"defaultValue": false
},
@ -4193,6 +4281,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "select",
"label": "Layout",
@ -4274,6 +4373,17 @@
"key": "disabled",
"defaultValue": false
},
{
"type": "boolean",
"label": "Read only",
"key": "readonly",
"defaultValue": false,
"dependsOn": {
"setting": "disabled",
"value": true,
"invert": true
}
},
{
"type": "select",
"label": "Layout",
@ -5923,12 +6033,7 @@
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false,
"dependsOn": {
"setting": "actionType",
"value": "View",
"invert": true
}
"defaultValue": false
}
]
},

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

@ -137,7 +137,8 @@
actionType: actionType === "Create" ? "Create" : "Update",
dataSource,
size,
disabled: disabled || actionType === "View",
disabled,
readonly: !disabled && actionType === "View",
}}
styles={{
normal: {

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

@ -6,6 +6,7 @@
export let field
export let label
export let disabled = false
export let readonly = false
export let compact = false
export let validation
export let extensions
@ -72,6 +73,7 @@
{label}
{field}
{disabled}
{readonly}
{validation}
{span}
type="attachment"
@ -82,7 +84,7 @@
{#if fieldState}
<CoreDropzone
value={fieldState.value}
disabled={fieldState.disabled}
disabled={fieldState.disabled || fieldState.readonly}
error={fieldState.error}
on:change={handleChange}
{processFiles}

3
packages/client/src/components/app/forms/BooleanField.svelte
View File

@ -6,6 +6,7 @@
export let label
export let text
export let disabled = false
export let readonly = false
export let size
export let validation
export let defaultValue
@ -39,6 +40,7 @@
{label}
{field}
{disabled}
{readonly}
{validation}
defaultValue={isTruthy(defaultValue)}
type="boolean"
@ -49,6 +51,7 @@
<CoreCheckbox
value={fieldState.value}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
error={fieldState.error}
id={fieldState.fieldId}
{size}

4
packages/client/src/components/app/forms/CodeScannerField.svelte
View File

@ -6,6 +6,7 @@
export let label
export let type = "barcodeqr"
export let disabled = false
export let readonly = false
export let validation
export let defaultValue = ""
export let onChange
@ -33,6 +34,7 @@
{label}
{field}
{disabled}
{readonly}
{validation}
{defaultValue}
{type}
@ -43,7 +45,7 @@
<CodeScanner
value={fieldState.value}
on:change={handleUpdate}
disabled={fieldState.disabled}
disabled={fieldState.disabled || fieldState.readonly}
{allowManualEntry}
scanButtonText={scanText}
{beepOnScan}

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

@ -6,6 +6,7 @@
export let label
export let placeholder
export let disabled = false
export let readonly = false
export let enableTime = true
export let timeOnly = false
export let time24hr = false
@ -30,6 +31,7 @@
{label}
{field}
{disabled}
{readonly}
{validation}
{defaultValue}
{span}
@ -42,6 +44,7 @@
value={fieldState.value}
on:change={handleChange}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
error={fieldState.error}
id={fieldState.fieldId}
appendTo={document.getElementById("flatpickr-root")}

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

@ -10,6 +10,7 @@
export let defaultValue
export let type
export let disabled = false
export let readonly = false
export let validation
export let span = 6
@ -29,6 +30,7 @@
type,
defaultValue,
disabled,
readonly,
validation,
formStep
)
@ -76,6 +78,7 @@
contenteditable={$component.editing}
on:blur={$component.editing ? updateLabel : null}
class:hidden={!label}
class:readonly
for={fieldState?.fieldId}
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelClass}`}
>
@ -136,4 +139,7 @@
.spectrum-FieldLabel--left {
padding-right: var(--spectrum-global-dimension-size-200);
}
.readonly {
pointer-events: none;
}
</style>

4
packages/client/src/components/app/forms/Form.svelte
View File

@ -8,6 +8,7 @@
export let theme
export let size
export let disabled = false
export let readonly = false
export let actionType = "Create"
export let initialFormStep = 1
@ -39,7 +40,7 @@
$: schemaKey = generateSchemaKey(schema)
$: initialValues = getInitialValues(actionType, dataSource, $context)
$: resetKey = Helpers.hashString(
schemaKey + JSON.stringify(initialValues) + disabled
schemaKey + JSON.stringify(initialValues) + disabled + readonly
)
// Returns the closes data context which isn't a built in context
@ -97,6 +98,7 @@
{theme}
{size}
{disabled}
{readonly}
{actionType}
{schema}
{table}

3
packages/client/src/components/app/forms/InnerForm.svelte
View File

@ -6,6 +6,7 @@
export let dataSource
export let disabled = false
export let readonly = false
export let initialValues
export let size
export let schema
@ -148,6 +149,7 @@
type,
defaultValue = null,
fieldDisabled = false,
fieldReadOnly = false,
validationRules,
step = 1
) => {
@ -205,6 +207,7 @@
error: initialError,
disabled:
disabled || fieldDisabled || (isAutoColumn && !editAutoColumns),
readonly: readonly || fieldReadOnly,
defaultValue,
validator,
lastUpdate: Date.now(),

3
packages/client/src/components/app/forms/JSONField.svelte
View File

@ -7,6 +7,7 @@
export let label
export let placeholder
export let disabled = false
export let readonly = false
export let defaultValue = ""
export let onChange
@ -48,6 +49,7 @@
{label}
{field}
{disabled}
{readonly}
{validation}
{defaultValue}
type="json"
@ -60,6 +62,7 @@
value={serialiseValue(fieldState.value)}
on:change={handleChange}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
error={fieldState.error}
id={fieldState.fieldId}
{placeholder}

4
packages/client/src/components/app/forms/LongFormField.svelte
View File

@ -8,6 +8,7 @@
export let label
export let placeholder
export let disabled = false
export let readonly = false
export let validation
export let defaultValue = ""
export let format = "auto"
@ -58,6 +59,7 @@
{label}
{field}
{disabled}
{readonly}
{validation}
{defaultValue}
type="longform"
@ -71,6 +73,7 @@
value={fieldState.value}
on:change={handleChange}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
error={fieldState.error}
id={fieldState.fieldId}
{placeholder}
@ -88,6 +91,7 @@
value={fieldState.value}
on:change={handleChange}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
error={fieldState.error}
id={fieldState.fieldId}
{placeholder}

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

@ -6,6 +6,7 @@
export let label
export let placeholder
export let disabled = false
export let readonly = false
export let validation
export let defaultValue
export let optionsSource = "schema"
@ -56,6 +57,7 @@
{field}
{label}
{disabled}
{readonly}
{validation}
{span}
defaultValue={expandedDefaultValue}
@ -73,6 +75,7 @@
getOptionValue={flatOptions ? x => x : x => x.value}
id={fieldState.fieldId}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
on:change={handleChange}
{placeholder}
{options}
@ -83,6 +86,7 @@
value={fieldState.value || []}
id={fieldState.fieldId}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
error={fieldState.error}
{options}
{direction}

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

@ -6,6 +6,7 @@
export let label
export let placeholder
export let disabled = false
export let readonly = false
export let optionsType = "select"
export let validation
export let defaultValue
@ -46,6 +47,7 @@
{field}
{label}
{disabled}
{readonly}
{validation}
{defaultValue}
{span}
@ -60,6 +62,7 @@
value={fieldState.value}
id={fieldState.fieldId}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
error={fieldState.error}
{options}
{placeholder}
@ -74,6 +77,7 @@
value={fieldState.value}
id={fieldState.fieldId}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
error={fieldState.error}
{options}
{direction}

3
packages/client/src/components/app/forms/RelationshipField.svelte
View File

@ -11,6 +11,7 @@
export let label
export let placeholder
export let disabled = false
export let readonly = false
export let validation
export let autocomplete = true
export let defaultValue
@ -186,6 +187,7 @@
{label}
{field}
{disabled}
{readonly}
{validation}
defaultValue={expandedDefaultValue}
{type}
@ -204,6 +206,7 @@
on:loadMore={loadMore}
id={fieldState.fieldId}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
error={fieldState.error}
getOptionLabel={getDisplayName}
getOptionValue={option => option._id}

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

@ -7,6 +7,7 @@
export let placeholder
export let type = "text"
export let disabled = false
export let readonly = false
export let validation
export let defaultValue = ""
export let align
@ -28,6 +29,7 @@
{label}
{field}
{disabled}
{readonly}
{validation}
{defaultValue}
{span}
@ -41,6 +43,7 @@
value={fieldState.value}
on:change={handleChange}
disabled={fieldState.disabled}
readonly={fieldState.readonly}
error={fieldState.error}
id={fieldState.fieldId}
{placeholder}