Class TJSDialog

Provides a reactive dialog implementation configured from a unique dialog options object. The dialog features a bottom button bar for user selection.

A glasspane / modal option with various styling and transition capabilities is available when setting modal: true.

Most importantly the content attribute of dialog data can be a Svelte component configuration object to render your custom component as the dialog content. When using a Svelte component as the content you can assign a string to the various on<XXX> dialog callbacks and an exported function from your component will be invoked to handle the button callback. All dialog button callbacks and onClose callback receive a single argument which is the dialog / application instance.

When making a form with form validation or other dialog that you don't want to close immediately on button press you can set autoClose: false, however you are 100% in control of resolving any Promise callbacks from button presses and also closing the application. Each button can also be configured with autoClose: false in the button data.

There is a handy Promise management capability to track a single Promise for the lifetime of a dialog available at TJSDialog.managedPromise. By default when the user closes the dialog / application any managed Promise is resolved with null. The managed Promise is available in any Svelte content component by using const managedPromise = getContext('#managedPromise'). When handling any custom resolution particularly when setting autoClose: false for a given button you are 100% in control of resolving or rejecting asynchronous data to return from the dialog.

To create and wait upon a managed promise for asynchronous return results use the static or member variation of TJSDialog.wait.

Please refer to TJSDialogOptions for the various options used to construct the dialog.

There are a couple of static helper methods to quickly create standard dialogs such as a 'yes' / 'no' confirmation dialog with TJSDialog.confirm and an 'ok' single button dialog with TJSDialog.prompt.

Hierarchy

Constructors

constructor

Accessors

data elementContent elementTarget managedPromise position reactive state svelte

Methods

maximize minimize onSvelteMount onSvelteRemount wait confirm prompt wait

Constructors

constructor

Accessors

data

elementContent

  • get elementContent(): HTMLElement

  • Returns the content element if an application shell is mounted.

    Returns HTMLElement

    Content element.

elementTarget

  • get elementTarget(): HTMLElement

  • Returns the target element or main element if no target defined.

    Returns HTMLElement

    Target element.

managedPromise

position

  • get position(): TJSPosition

  • Returns the TJSPosition instance.

    Returns TJSPosition

    The TJSPosition instance.

reactive

  • get reactive(): SvelteReactive

  • Returns the reactive accessors & Svelte stores for SvelteApplication.

    Returns SvelteReactive

    The reactive accessors & Svelte stores.

state

  • get state(): ApplicationState

  • Returns the application state manager.

    Returns ApplicationState

    The application state manager.

svelte

  • get svelte(): GetSvelteData

  • Returns the Svelte helper class w/ various methods to access mounted Svelte components.

    Returns GetSvelteData

    GetSvelteData

Methods

maximize

  • maximize(opts?): Promise<void>

  • Provides a mechanism to update the UI options store for maximized.

    Note: the sanity check is duplicated from Application.maximize the store is updated before performing the rest of animations. This allows application shells to remove / show any resize handlers correctly. Extra constraint data is stored in a saved position state in SvelteApplication.minimize to animate the content area.

    Parameters

    • Optionalopts: {
          animate?: boolean;
          duration?: number;
      }

      Optional parameters.

      • Optionalanimate?: boolean

        When true perform default maximizing animation.

      • Optionalduration?: number

        Controls content area animation duration in seconds.

    Returns Promise<void>

minimize

  • minimize(opts?): Promise<void>

  • Provides a mechanism to update the UI options store for minimized.

    Note: the sanity check is duplicated from Application.minimize the store is updated before performing the rest of animations. This allows application shells to remove / show any resize handlers correctly. Extra constraint data is stored in a saved position state in SvelteApplication.minimize to animate the content area.

    Parameters

    • Optionalopts: {
          animate?: boolean;
          duration?: number;
      }

      Optional parameters.

      • Optionalanimate?: boolean

        When true perform default minimizing animation.

      • Optionalduration?: number

        Controls content area animation duration in seconds.

    Returns Promise<void>

onSvelteMount

  • onSvelteMount(mountedAppShell?): void

  • Provides a callback after all Svelte components are initialized.

    Parameters

    Returns void

onSvelteRemount

  • onSvelteRemount(mountedAppShell?): void

  • Provides a callback after the main application shell is remounted. This may occur during HMR / hot module replacement or directly invoked from the elementRootUpdate callback passed to the application shell component context.

    Parameters

    Returns void

wait

  • wait<T>(options?): Promise<T>

  • Brings to top or renders this dialog returning a Promise that is resolved any button pressed or when the dialog is closed.

    Creates an anonymous data defined TJSDialog returning a Promise that can be awaited upon for the user to make a choice.

    Note: null is returned if the dialog is closed without a user making a choice.

    Type Parameters

    • T

    Parameters

    • Optionaloptions: {
          reuse?: boolean;
      }

      Options.

      • Optionalreuse?: boolean

        When true if there is an existing managed Promise this allows multiple sources to await on the same result.

    Returns Promise<T>

    A promise for dialog resolution.

Staticconfirm

  • confirm<T>(data?, options?): Promise<T>

  • A helper factory method to create simple confirmation dialog windows which consist of simple yes / no prompts. If you require more flexibility, a custom TJSDialog instance is preferred. The default focused button is 'yes'. You can change the default focused button by setting default to yes or no.

    Type Parameters

    • T

    Parameters

    • Optionaldata: TJSDialogOptions & {
          onNo?: string | ((data?: {
              application?: TJSDialog;
          }) => any);
          onYes?: string | ((data?: {
              application?: TJSDialog;
          }) => any);
      }

      Confirm dialog options.

    • Optionaloptions: SvelteApplicationOptions

      SvelteApplication options passed to the TJSDialog constructor.

    Returns Promise<T>

    A promise which resolves with result of yes / no callbacks or true / false.

    Example

    const result = await TJSDialog.confirm({
     title: 'A Yes or No Question',
     content: '<p>Choose wisely.</p>',
     onYes: () => 'YES Result',
     onNo: () => 'NO Result'
    });

    // Logs 'YES result', 'NO Result', or null if the user closed the dialog without making a selection.
    console.log(result);

Staticprompt

  • prompt<T>(data?, options?): Promise<T>

  • A helper factory method to display a basic "prompt" style TJSDialog with a single button.

    Type Parameters

    • T

    Parameters

    • Optionaldata: TJSDialogOptions & {
          icon?: string;
          label?: string;
          onOk?: string | ((data?: {
              application?: TJSDialog;
          }) => any);
      }

      Prompt dialog options that includes any TJSDialog options along with the following optional fields:

    • Optionaloptions: SvelteApplicationOptions

      SvelteApplication options passed to the TJSDialog constructor.

    Returns Promise<T>

    The returned value from the provided callback function or true if the button is pressed.

    Example

    const result = await TJSDialog.prompt({
     title: 'Are you OK?',
     content: '<p>Are you OK?.</p>',
     label: 'Feeling Fine!',
     onOk: () => 'OK'
    });

    // Logs 'OK' or null if the user closed the dialog without making a selection.
    console.log(result);

Staticwait

  • wait<T>(data, options?): Promise<T>

  • Creates an anonymous data defined TJSDialog returning a Promise that can be awaited upon for the user to make a choice.

    Note: By default null is returned if the dialog is closed without a user making a choice.

    Type Parameters

    • T

    Parameters

    Returns Promise<T>

    A Promise that resolves to the chosen result.

Settings

Member Visibility

On This Page

Constructors
Accessors
Methods