diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte index 54002cfc99..579e612f0e 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte @@ -30,7 +30,7 @@ export let showAllQueries $: text = value?.label ?? "Choose an option" - $: tables = $tablesStore.list.map((m) => ({ + $: tables = $tablesStore.list.map(m => ({ label: m.name, tableId: m._id, type: "table", @@ -46,9 +46,9 @@ }, []) $: queries = $queriesStore.list .filter( - (query) => showAllQueries || query.queryVerb === "read" || query.readable + query => showAllQueries || query.queryVerb === "read" || query.readable ) - .map((query) => ({ + .map(query => ({ label: query.name, name: query.name, tableId: query._id, @@ -61,15 +61,15 @@ $currentAsset, $store.selectedComponentId ) - $: queryBindableProperties = bindableProperties.map((property) => ({ + $: queryBindableProperties = bindableProperties.map(property => ({ ...property, category: property.type === "instance" ? "Component" : "Table", label: property.readableBinding, path: property.readableBinding, })) $: links = bindableProperties - .filter((x) => x.fieldSchema?.type === "link") - .map((property) => { + .filter(x => x.fieldSchema?.type === "link") + .map(property => { return { providerId: property.providerId, label: property.readableBinding, @@ -89,7 +89,7 @@ } function fetchQueryDefinition(query) { - const source = $datasources.list.find((ds) => ds._id === query.datasourceId) + const source = $datasources.list.find(ds => ds._id === query.datasourceId) .source return $integrations[source].query[query.queryVerb] } @@ -100,20 +100,18 @@ readonly value={text} options={[text]} - on:click={dropdownRight.show} - /> - {#if value?.type === "query"} + on:click={dropdownRight.show} /> + {#if value?.type === 'query'} - + @@ -121,20 +119,15 @@ {#if value.parameters.length > 0} query._id === value._id) - .parameters} - bindings={queryBindableProperties} - /> + parameters={queries.find(query => query._id === value._id).parameters} + bindings={queryBindableProperties} /> {/if} ds._id === value.datasourceId - )} - editable={false} - /> + datasource={$datasources.list.find(ds => ds._id === value.datasourceId)} + editable={false} /> @@ -147,12 +140,7 @@ @@ -161,12 +149,7 @@
    {#each views as view} -
  • handleSelected(view)} - > - {view.label} -
    • +
  • handleSelected(view)}>{view.label}
    • {/each}
@@ -175,12 +158,7 @@
    {#each links as link} -
  • handleSelected(link)} - > - {link.label} -
    • +
  • handleSelected(link)}>{link.label}
    • {/each}
@@ -191,8 +169,7 @@ {#each queries as query}
  • handleSelected(query)} - > + on:click={() => handleSelected(query)}> {query.label}
    • {/each} @@ -205,12 +182,7 @@
      {#each otherSources as source} -
    • handleSelected(source)} - > - {source.label} -
      • +
    • handleSelected(source)}>{source.label}
      • {/each}
    {/if} @@ -246,15 +218,15 @@ cursor: pointer; margin: 0px; padding: var(--spacing-s) var(--spacing-m); - font-size: var(--font-size-xs); + font-size: var(--font-size-m); } .selected { - background-color: var(--grey-4); + color: var(--spectrum-global-color-blue-600); } li:hover { - background-color: var(--grey-4); + background-color: var(--spectrum-global-color-gray-200); } .drawer-contents { diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte index 1c7aa94474..dfd8475d60 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte @@ -1,7 +1,14 @@ - + Define what actions to run. diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte index 071c7033d4..12b3c395bc 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte @@ -35,7 +35,7 @@ } - + diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte index af81ea3d24..fc8e42b95e 100644 --- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte @@ -80,11 +80,11 @@ "field/link": RelationshipFieldSelect, } - const getControl = type => { + const getControl = (type) => { return controlMap[type] } - const canRenderControl = setting => { + const canRenderControl = (setting) => { const control = getControl(setting?.type) if (!control) { return false @@ -95,7 +95,7 @@ return true } - const onInstanceNameChange = name => { + const onInstanceNameChange = (name) => { onChange("_instanceName", name) } @@ -103,13 +103,13 @@ const form = findClosestMatchingComponent( $currentAsset.props, componentInstance._id, - component => component._component.endsWith("/form") + (component) => component._component.endsWith("/form") ) const dataSource = form?.dataSource const fields = makeDatasourceFormComponents(dataSource) onChange( "_children", - fields.map(field => field.json()) + fields.map((field) => field.json()) ) } @@ -123,7 +123,8 @@ label={def.label} key={def.key} value={get(assetInstance, def.key)} - onChange={val => onScreenPropChange(def.key, val)} /> + onChange={(val) => onScreenPropChange(def.key, val)} + /> {/each} {/if} @@ -134,7 +135,8 @@ label="Name" key="_instanceName" value={componentInstance._instanceName} - onChange={onInstanceNameChange} /> + onChange={onInstanceNameChange} + /> {/if} {#if settings && settings.length > 0} @@ -145,10 +147,12 @@ control={getControl(setting.type)} label={setting.label} key={setting.key} - value={componentInstance[setting.key] ?? componentInstance[setting.key]?.defaultValue} + value={componentInstance[setting.key] ?? + componentInstance[setting.key]?.defaultValue} {componentInstance} - onChange={val => onChange(setting.key, val)} - props={{ options: setting.options, placeholder: setting.placeholder }} /> + onChange={(val) => onChange(setting.key, val)} + props={{ options: setting.options, placeholder: setting.placeholder }} + /> {/if} {/each} {:else} @@ -157,10 +161,12 @@ {/if} - {#if componentDefinition?.component?.endsWith('/fieldgroup')} - + {#if componentDefinition?.component?.endsWith("/fieldgroup")} +
    + +
    {/if} + title="Confirm Form Field Update" +/> diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js index 6cc387058a..9a89f1d273 100644 --- a/packages/client/src/utils/styleable.js +++ b/packages/client/src/utils/styleable.js @@ -24,7 +24,10 @@ const addBuilderPreviewStyles = (node, styleString, componentId) => { if (componentId === get(builderStore).selectedComponentId) { const style = window.getComputedStyle(node) const property = style?.display === "table-row" ? "outline" : "border" - return styleString + `;${property}: 2px solid #4285f4 !important;` + return ( + styleString + + `;${property}: 2px solid #4285f4 !important; border-radius: 4px !important;` + ) } else { return styleString } diff --git a/packages/standard-components/src/DataProvider.svelte b/packages/standard-components/src/DataProvider.svelte index e7feb804f3..83de1ceb66 100644 --- a/packages/standard-components/src/DataProvider.svelte +++ b/packages/standard-components/src/DataProvider.svelte @@ -103,6 +103,8 @@ } - - - +
    + + + +