Dialog

Status	stable
Published	5.0.0

Use Dialogs over Inspectors when you're guiding the user along a set of actions, rather than editing an entity.

Example

<jds-dialog ref="dialogEl" size="narrow">
    <template #title>Move user</template>
    <jds-select-field v-model="selectValue">
        <template #label>Team</template>
        <jds-select-field-option value="1">
            Team A
        </jds-select-field-option>
        <jds-select-field-option value="2">
            Team B
        </jds-select-field-option>
    </jds-select-field>
    <jds-text-field v-model="textValue">
        <template #label>Notes</template>
    </jds-text-field>
    <template #toolbar="{close, cancel}">
        <jds-button @click="close" type="primary">Move</jds-button>
        <jds-button @click="cancel">Cancel</jds-button>
        <jds-button @click="flip">Flip</jds-button>
    </template>
    <template #back>
        Hello world
        <jds-toolbar>
            <jds-button @click="close">Close</jds-button>
            <jds-button @click="flip">Flip</jds-button>
        </jds-toolbar>
    </template>
</jds-dialog>
<jds-button @click="open">Open Dialog</jds-button>

@Ref() inspector!: JdsInspector;
openInspector () {
    this.inspector.open()
        .then((e)=> console.log('Closed'))
        .catch((e)=> console.log('Cancelled'))
}

JdsDialog

Props

Prop	Value	Default
icon	`string`	none
allowOverflow	`boolean`	false
size	`normalwidenarrow`	'normal'

Events

Event	Payload
close
cancel

Methods

Method	Parameters
open	-	Open this dialog.
close	-	Close this dialog, after executing its function.
flip	-	Reveal the opposite side of the dialog, populated by the `back` slot. experimental
cancel	-	Cancel this dialog, marking it as incomplete.

Slots

Slot

title Required

Main title of this dialog.

help

default

toolbar

Binding	Type
cancel
close

back

Analytics Events

Event

jds.dialog:cancel

Fired on user-initiated dialog canceling.

Parameter
trigger	Either `backdrop` or `button`, which the user clicked on to cancel this dialog. Backdrop also includes the escape key.
duration	How long, in milliseconds, the dialog stayed open.

Analytics Props

Prop	Value	Default
track	`string`	(Empty string)	A way to identify this instance of this component's usage within the app. For example, `track="jobilla.ats.candidate.send-email"` will identify this butt as the Jobilla ATS candidate email sending button. If no `track` is set, events on a particular component instance will not emit analytics.
trackResource	`string`	none	If you can identify this particular instance of the component, for example the candidate ID which you're looking at right now, you can attach this to further identify the analytics events. Completely optional.