Formblock fixes
This commit is contained in:
Dean
parent
46c54e8119
commit
8cc5eb19e6
|
|
@ -18,6 +18,7 @@
|
|||
checked={value}
|
||||
{disabled}
|
||||
on:change={onChange}
|
||||
on:click
|
||||
{id}
|
||||
type="checkbox"
|
||||
class="spectrum-Switch-input"
|
||||
|
|
|
|||
|
|
@ -19,5 +19,5 @@
|
|||
</script>
|
||||
|
||||
<Field {helpText} {label} {labelPosition} {error}>
|
||||
<Switch {error} {disabled} {text} {value} on:change={onChange} />
|
||||
<Switch {error} {disabled} {text} {value} on:change={onChange} on:click />
|
||||
</Field>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,10 @@
|
|||
size="S"
|
||||
name="Close"
|
||||
hoverable
|
||||
on:click={() => removeButton(item._id)}
|
||||
on:click={e => {
|
||||
e.stopPropagation()
|
||||
removeButton(item._id)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,11 +32,14 @@
|
|||
}
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const flipDurationMs = 150
|
||||
|
||||
let anchors = {}
|
||||
let draggableItems = []
|
||||
|
||||
// Used for controlling cursor behaviour in order to limit drag behaviour
|
||||
// to the drag handle
|
||||
let inactive = true
|
||||
|
||||
const buildDraggable = items => {
|
||||
return items
|
||||
.map(item => {
|
||||
|
|
@ -64,6 +67,7 @@
|
|||
}
|
||||
|
||||
const handleFinalize = e => {
|
||||
inactive = true
|
||||
updateRowOrder(e)
|
||||
dispatch("change", serialiseUpdate())
|
||||
}
|
||||
|
|
@ -77,24 +81,36 @@
|
|||
class="list-wrap"
|
||||
use:dndzone={{
|
||||
items: draggableItems,
|
||||
flipDurationMs,
|
||||
dropTargetStyle: { outline: "none" },
|
||||
dragDisabled: !draggable,
|
||||
dragDisabled: !draggable || inactive,
|
||||
}}
|
||||
on:finalize={handleFinalize}
|
||||
on:consider={updateRowOrder}
|
||||
>
|
||||
{#each draggableItems as draggable (draggable.id)}
|
||||
{#each draggableItems as draggableItem (draggableItem.id)}
|
||||
<li
|
||||
on:mousedown={() => {
|
||||
on:click={() => {
|
||||
get(store).actions.select(draggableItem.id)
|
||||
}}
|
||||
on:mousedown={e => {
|
||||
get(store).actions.select()
|
||||
}}
|
||||
bind:this={anchors[draggable.id]}
|
||||
class:highlighted={draggable.id === $store.selected}
|
||||
bind:this={anchors[draggableItem.id]}
|
||||
class:highlighted={draggableItem.id === $store.selected}
|
||||
>
|
||||
<div class="left-content">
|
||||
{#if showHandle}
|
||||
<div class="handle">
|
||||
<div
|
||||
class="handle"
|
||||
aria-label="drag-handle"
|
||||
style={!inactive ? "cursor:grabbing" : "cursor:grab"}
|
||||
on:mousedown={() => {
|
||||
inactive = false
|
||||
}}
|
||||
on:mouseup={() => {
|
||||
inactive = true
|
||||
}}
|
||||
>
|
||||
<DragHandle />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -102,8 +118,8 @@
|
|||
<div class="right-content">
|
||||
<svelte:component
|
||||
this={listType}
|
||||
anchor={anchors[draggable.item._id]}
|
||||
item={draggable.item}
|
||||
anchor={anchors[draggableItem.item._id]}
|
||||
item={draggableItem.item}
|
||||
{...listTypeProps}
|
||||
on:change={onItemChanged}
|
||||
/>
|
||||
|
|
@ -143,6 +159,7 @@
|
|||
--spectrum-table-row-background-color-hover,
|
||||
var(--spectrum-alias-highlight-hover)
|
||||
);
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-wrap > li:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
|
|
@ -165,6 +182,9 @@
|
|||
display: flex;
|
||||
height: var(--spectrum-global-dimension-size-150);
|
||||
}
|
||||
.handle:hover {
|
||||
cursor: grab;
|
||||
}
|
||||
.handle :global(svg) {
|
||||
fill: var(--spectrum-global-color-gray-500);
|
||||
margin-right: var(--spacing-m);
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@
|
|||
|
||||
<div class="field-configuration">
|
||||
<div class="toggle-all">
|
||||
<span />
|
||||
<span>Fields</span>
|
||||
<Toggle
|
||||
on:change={() => {
|
||||
let update = fieldList.map(field => ({
|
||||
|
|
@ -186,6 +186,9 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.field-configuration {
|
||||
padding-top: 1px;
|
||||
}
|
||||
.field-configuration :global(.spectrum-ActionButton) {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -204,6 +207,5 @@
|
|||
.toggle-all span {
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
font-size: 12px;
|
||||
margin-left: calc(var(--spacing-s) - 1px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,15 @@
|
|||
<div class="field-label">{readableText}</div>
|
||||
</div>
|
||||
<div class="list-item-right">
|
||||
<Toggle on:change={onToggle(item)} text="" value={item.active} thin />
|
||||
<Toggle
|
||||
on:change={onToggle(item)}
|
||||
on:click={e => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
text=""
|
||||
value={item.active}
|
||||
thin
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6040,18 +6040,6 @@
|
|||
"options": ["Create", "Update", "View"],
|
||||
"defaultValue": "Create"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Title",
|
||||
"key": "title",
|
||||
"nested": true
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Description",
|
||||
"key": "description",
|
||||
"nested": true
|
||||
},
|
||||
{
|
||||
"section": true,
|
||||
"dependsOn": {
|
||||
|
|
@ -6059,7 +6047,7 @@
|
|||
"value": "Create",
|
||||
"invert": true
|
||||
},
|
||||
"name": "Row details",
|
||||
"name": "Row ID",
|
||||
"info": "<a href='https://docs.budibase.com/docs/form-block' target='_blank'>How to pass a row ID using bindings</a>",
|
||||
"settings": [
|
||||
{
|
||||
|
|
@ -6079,8 +6067,20 @@
|
|||
},
|
||||
{
|
||||
"section": true,
|
||||
"name": "Fields",
|
||||
"name": "Details",
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Title",
|
||||
"key": "title",
|
||||
"nested": true
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Description",
|
||||
"key": "description",
|
||||
"nested": true
|
||||
},
|
||||
{
|
||||
"type": "fieldConfiguration",
|
||||
"key": "fields",
|
||||
|
|
|
|||
Loading…
Reference in New Issue