diff --git a/packages/ui/src/components/Component.svelte b/packages/ui/src/components/Component.svelte index 5da4e00a39..11500b86bd 100644 --- a/packages/ui/src/components/Component.svelte +++ b/packages/ui/src/components/Component.svelte @@ -13,6 +13,7 @@ // limitations under the License. --> <script lang="ts"> + import { SvelteComponent } from 'svelte' import { getResource } from '@hcengineering/platform' import type { AnyComponent } from '../types' // import Icon from './Icon.svelte' @@ -20,6 +21,8 @@ import ErrorBoundary from './internal/ErrorBoundary' import Loading from './Loading.svelte' + // Reference to rendered component instance + export let innerRef: SvelteComponent | undefined = undefined export let is: AnyComponent export let props = {} export let shrink: boolean = false @@ -36,11 +39,11 @@ {:then Ctor} <ErrorBoundary> {#if $$slots.default !== undefined} - <Ctor {...props} on:change on:close on:open on:click on:delete on:action> + <Ctor bind:this={innerRef} {...props} on:change on:close on:open on:click on:delete on:action> <slot /> </Ctor> {:else} - <Ctor {...props} on:change on:close on:open on:click on:delete on:action /> + <Ctor bind:this={innerRef} {...props} on:change on:close on:open on:click on:delete on:action /> {/if} </ErrorBoundary> {:catch err} diff --git a/packages/ui/src/components/StepsDialog.svelte b/packages/ui/src/components/StepsDialog.svelte index 1526cbb866..eabf636c2c 100644 --- a/packages/ui/src/components/StepsDialog.svelte +++ b/packages/ui/src/components/StepsDialog.svelte @@ -14,7 +14,7 @@ --> <script lang="ts"> import type { Asset, IntlString } from '@hcengineering/platform' - import { createEventDispatcher } from 'svelte' + import { createEventDispatcher, SvelteComponent } from 'svelte' import ui from '../plugin' import { AnySvelteComponent, @@ -43,7 +43,8 @@ const dispatch = createEventDispatcher() - let currentStep: DialogStep | undefined + let step: SvelteComponent | undefined + let currentStepModel: DialogStep | undefined let currentStepIndex = 0 let isStepValid = false let isSaving = false @@ -70,26 +71,26 @@ } async function completeCurrentStep () { - if (!currentStep?.onDone) { + if (!step?.done) { return } isSaving = true try { - await currentStep.onDone() + await step.done() } finally { isSaving = false } } - $: currentStep = steps[currentStepIndex] + $: currentStepModel = steps[currentStepIndex] $: stepIndex = currentStepIndex </script> <!-- svelte-ignore a11y-click-events-have-key-events --> <Panel bind:panelWidth bind:innerWidth bind:useMaxWidth {floatAside} {allowClose} isAside isHeader on:close> <svelte:fragment slot="title"> - {@const additionalStepInfo = currentStep?.additionalInfo} + {@const additionalStepInfo = currentStepModel?.additionalInfo} <div class="popupPanel-title__content-container antiTitle"> <div class="icon-wrapper"> @@ -122,8 +123,8 @@ </svelte:fragment> <svelte:fragment slot="header"> - {@const stepName = currentStep?.name} - {@const stepDescription = currentStep?.description} + {@const stepName = currentStepModel?.name} + {@const stepDescription = currentStepModel?.description} <div class="header header-row between"> {#if stepName}<h4 class="no-margin"><Label label={stepName} /></h4>{/if} @@ -164,8 +165,8 @@ </Scroller> </svelte:fragment> - {#if currentStep?.component} - {@const { component, props } = currentStep} + {#if currentStepModel?.component} + {@const { component, props } = currentStepModel} {@const isMobile = $deviceInfo.isMobile} <div @@ -176,9 +177,9 @@ class:max={!isMobile && useMaxWidth} > {#if typeof component === 'string'} - <Component is={component} {props} on:change={handleComponentChange} /> + <Component bind:innerRef={step} is={component} {props} on:change={handleComponentChange} /> {:else} - <svelte:component this={component} {...props} on:change={handleComponentChange} /> + <svelte:component this={component} bind:this={step} {...props} on:change={handleComponentChange} /> {/if} </div> {/if} diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index d6ecb08d32..75bee0ea15 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -299,5 +299,4 @@ export interface DialogStep { readonly additionalInfo?: string readonly component: AnyComponent | AnySvelteComponent props?: Record<string, any> - readonly onDone?: () => Promise<void> | void }