diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte index 0b5439c9db..d7b35fcb0e 100644 --- a/frontend/src/lib/components/ScriptBuilder.svelte +++ b/frontend/src/lib/components/ScriptBuilder.svelte @@ -391,16 +391,11 @@
@@ -625,7 +620,8 @@ {/if}

Arguments  Arguments  The arguments are synced with the main signature but you may refine the parts that cannot be inferred from the type directly.

-
{#each actionButtons as actionButton, actionIndex (actionButton?.id)} - -
{ - if (actionButton.id !== $hoverStore) { - $hoverStore = actionButton.id - } + { + outputs?.inputs.set(inputs, true) }} - on:mouseout|stopPropagation={() => { - if ($hoverStore !== undefined) { - $hoverStore = undefined - } - }} - class={classNames( - ($selectedComponent?.includes(actionButton.id) || - $hoverStore === actionButton.id) && - $mode !== 'preview' - ? 'outline outline-indigo-500 outline-1 outline-offset-1 relative' - : '' - )} + bind:inputs + value={row} + index={rowIndex} > - {#if $mode !== 'preview'} - - { - $selectedComponent = [actionButton.id] - }} - > - {actionButton.id} - - {/if} - {#if rowIndex == 0} - {@const controls = { - left: () => { - if (actionIndex === 0) { - $selectedComponent = [id] - return true - } else if (actionIndex > 0) { - $selectedComponent = [actionButtons[actionIndex - 1].id] - return true - } - return false - }, - right: () => { - if (actionIndex === actionButtons.length - 1) { - return id - } else if (actionIndex < actionButtons.length - 1) { - $selectedComponent = [actionButtons[actionIndex + 1].id] - return true - } - return false + +
{ + if (actionButton.id !== $hoverStore) { + $hoverStore = actionButton.id } }} - {#if actionButton.type == 'buttoncomponent'} + on:mouseout|stopPropagation={() => { + if ($hoverStore !== undefined) { + $hoverStore = undefined + } + }} + class={classNames( + ($selectedComponent?.includes(actionButton.id) || + $hoverStore === actionButton.id) && + $mode !== 'preview' + ? 'outline outline-indigo-500 outline-1 outline-offset-1 relative' + : '' + )} + > + {#if $mode !== 'preview'} + + { + $selectedComponent = [actionButton.id] + }} + > + {actionButton.id} + + {/if} + {#if rowIndex == 0} + {@const controls = { + left: () => { + if (actionIndex === 0) { + $selectedComponent = [id] + return true + } else if (actionIndex > 0) { + $selectedComponent = [actionButtons[actionIndex - 1].id] + return true + } + return false + }, + right: () => { + if (actionIndex === actionButtons.length - 1) { + return id + } else if (actionIndex < actionButtons.length - 1) { + $selectedComponent = [actionButtons[actionIndex + 1].id] + return true + } + return false + } + }} + {#if actionButton.type == 'buttoncomponent'} + { + toggleRow(row, rowIndex) + }} + id={actionButton.id} + customCss={actionButton.customCss} + configuration={actionButton.configuration} + recomputeIds={actionButton.recomputeIds} + extraQueryParams={{ row: row.original }} + componentInput={actionButton.componentInput} + {controls} + /> + {:else if actionButton.type == 'checkboxcomponent'} + { + toggleRow(row, rowIndex) + }} + {controls} + /> + {:else if actionButton.type == 'selectcomponent'} +
+ { + toggleRow(row, rowIndex) + }} + {controls} + /> +
+ {/if} + {:else if actionButton.type == 'buttoncomponent'} { - toggleRow(row, rowIndex) - }} id={actionButton.id} customCss={actionButton.customCss} configuration={actionButton.configuration} recomputeIds={actionButton.recomputeIds} + preclickAction={async () => { + toggleRow(row, rowIndex) + }} extraQueryParams={{ row: row.original }} componentInput={actionButton.componentInput} - {controls} /> {:else if actionButton.type == 'checkboxcomponent'} { toggleRow(row, rowIndex) }} - {controls} /> {:else if actionButton.type == 'selectcomponent'}
{ toggleRow(row, rowIndex) }} - {controls} />
{/if} - {:else if actionButton.type == 'buttoncomponent'} - { - toggleRow(row, rowIndex) - }} - extraQueryParams={{ row: row.original }} - componentInput={actionButton.componentInput} - /> - {:else if actionButton.type == 'checkboxcomponent'} - { - toggleRow(row, rowIndex) - }} - /> - {:else if actionButton.type == 'selectcomponent'} -
- { - toggleRow(row, rowIndex) - }} - /> -
- {/if} -
+
+ {/each}
diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte index f7f17f2f70..96e0e799af 100644 --- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte +++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte @@ -20,8 +20,13 @@ const { componentControl, runnableComponents } = getContext('AppViewerContext') const iterContext = getContext('ListWrapperContext') + const rowContext = getContext('RowWrapperContext') - $: fullContext = iterContext ? { ...extraContext, iter: $iterContext } : extraContext + $: fullContext = { + ...extraContext, + iter: iterContext ? $iterContext : undefined, + row: rowContext ? $rowContext : undefined + } const dispatch = createEventDispatcher() if (input == undefined) { @@ -110,6 +115,7 @@ value = nvalue as T } } else { + lastExpr = nvalue value = nvalue } } diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte index 2dd684af73..3ea4ea488b 100644 --- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte +++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte @@ -58,6 +58,7 @@ connectingInput } = getContext('AppViewerContext') const iterContext = getContext('ListWrapperContext') + const rowContext = getContext('RowWrapperContext') const dispatch = createEventDispatcher() @@ -170,7 +171,10 @@ try { const r = await eval_like( runnable.inlineScript?.content, - computeGlobalContext($worldStore, iterContext ? { iter: $iterContext } : {}), + computeGlobalContext($worldStore, { + iter: iterContext ? $iterContext : undefined, + row: rowContext ? $rowContext : undefined + }), false, $state, $mode == 'dnd', @@ -302,10 +306,11 @@ let raw = $worldStore.newOutput(id, 'raw', res) res = await eval_like( transformer.content, - computeGlobalContext( - $worldStore, - iterContext ? { iter: $iterContext, result: res } : { result: res } - ), + computeGlobalContext($worldStore, { + iter: iterContext ? $iterContext : undefined, + row: rowContext ? $rowContext : undefined, + result: res + }), false, $state, $mode == 'dnd', diff --git a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte index eb31fc29df..785cb487e0 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte @@ -31,6 +31,8 @@ getContext('AppViewerContext') const iterContext = getContext('ListWrapperContext') const listInputs: ListInputs | undefined = getContext('ListInputs') + const rowContext = getContext('RowWrapperContext') + const rowInputs: ListInputs | undefined = getContext('RowInputs') let value: boolean = false @@ -58,6 +60,9 @@ if (iterContext && listInputs) { listInputs(id, value) } + if (rowContext && rowInputs) { + rowInputs(id, value) + } if (recomputeIds) { recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb())) } diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte index fb9003d7ef..7b2dd6147d 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte @@ -39,6 +39,8 @@ const iterContext = getContext('ListWrapperContext') const listInputs: ListInputs | undefined = getContext('ListInputs') + const rowContext = getContext('RowWrapperContext') + const rowInputs: ListInputs | undefined = getContext('RowInputs') $componentControl[id] = { setValue(nvalue: string) { @@ -87,6 +89,9 @@ if (iterContext && listInputs) { listInputs(id, rawValue) } + if (rowContext && rowInputs) { + rowInputs(id, rawValue) + } } function onChange(e: CustomEvent) { @@ -112,6 +117,9 @@ if (iterContext && listInputs) { listInputs(id, result) } + if (rowContext && rowInputs) { + rowInputs(id, result) + } if (recomputeIds) { recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((f) => f())) } diff --git a/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte b/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte index f9171ff6a7..182699c6a9 100644 --- a/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte +++ b/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte @@ -19,7 +19,6 @@ } else { inputs[id][index] = value } - console.log('foo') dispatch('inputsChange') }) diff --git a/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte b/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte new file mode 100644 index 0000000000..65a6078f80 --- /dev/null +++ b/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte @@ -0,0 +1,26 @@ + + + diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte index e1fa439553..5fc3571cc2 100644 --- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte +++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte @@ -63,7 +63,6 @@ {#key tableActionSettings?.item?.data?.id} { diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte index ba3515ac9f..aba44a0c41 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte @@ -118,7 +118,7 @@ $: extraLib = inlineScript?.language == 'frontend' && worldStore - ? buildExtraLib($worldStore?.outputsById ?? {}, id, false, $state, true) + ? buildExtraLib($worldStore?.outputsById ?? {}, id, $state, true) : undefined let drawerIsOpen: boolean | undefined = undefined diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte index 1367babeed..ef984f27c6 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte @@ -32,7 +32,6 @@ export let componentSettings: { item: GridItem; parent: string | undefined } | undefined = undefined - export let rowColumns = false export let onDelete: (() => void) | undefined = undefined export let noGrid = false export let duplicateMoveAllowed = true @@ -99,7 +98,6 @@ ? buildExtraLib( $worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, - false, $state, false ) @@ -227,7 +225,6 @@ bind:inputSpecs={componentSettings.item.data.componentInput.fields} userInputEnabled={component.type === 'formcomponent' || component.type === 'formbuttoncomponent'} - {rowColumns} /> @@ -239,7 +236,6 @@ {#if Object.values(initialConfiguration).length > 0} {:else if componentInput?.type === 'eval'} - + {:else if componentInput?.type === 'upload'} {:else if componentInput?.type === 'user'} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte index 0c29155833..27513d09d1 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte @@ -9,7 +9,6 @@ export let inputSpecsConfiguration: RichConfigurations | undefined = undefined export let userInputEnabled: boolean = false export let shouldCapitalize: boolean = true - export let rowColumns = false export let resourceOnly = false export let displayType = false @@ -26,7 +25,6 @@ {id} {shouldCapitalize} {resourceOnly} - {rowColumns} inputSpecsConfiguration={finalInputSpecsConfiguration?.[k]?.['configuration']} labels={finalInputSpecsConfiguration?.[k]?.['labels']} tooltip={finalInputSpecsConfiguration?.[k]?.['tooltip']} @@ -40,7 +38,6 @@ {userInputEnabled} {shouldCapitalize} {resourceOnly} - hasRows={rowColumns} fieldType={meta?.['fieldType']} subFieldType={meta?.['subFieldType']} format={meta?.['format']} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte index 592b67e905..d01ac5fbe5 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte @@ -11,7 +11,6 @@ export let shouldCapitalize: boolean export let id: string export let resourceOnly: boolean - export let rowColumns: boolean export let tooltip: string | undefined $: { @@ -62,7 +61,6 @@ userInputEnabled={false} {shouldCapitalize} {resourceOnly} - hasRows={rowColumns} fieldType={config?.['fieldType']} subFieldType={config?.['subFieldType']} format={config?.['format']} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte index f599c072eb..a8c5b51d80 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte @@ -14,7 +14,6 @@ } from '../appUtils' import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component' import PanelSection from './common/PanelSection.svelte' - import TableActionLabel from './TableActionLabel.svelte' import { Inspect, List, ToggleRightIcon } from 'lucide-svelte' export let components: (BaseAppComponent & @@ -67,7 +66,13 @@
- + {#if component.type == 'buttoncomponent'} + Button + {:else if component.type == 'selectcomponent'} + Select + {:else if component.type == 'checkboxcomponent'} + Toggle + {/if}