Inspector

Status	stable
Published	2.0.0

portal-vue and JdsTeleportProvider must be installed and implemented to use the inspector, as it will need to be teleported to the bottom of the DOM tree.

Example

<jds-inspector ref="inspector">
    <template #title>Top Text</template>
    <template #help>Help text</template>
    <template #toolbar="{ close, cancel }">
        <jds-button type="primary" size="high" @click="close">
            <template #icon><jds-glyph for="save" /></template>
            Save
        </jds-button>
        <jds-button type="secondary" size="high" @click="flipInspector">
            Flip
        </jds-button>
        <jds-button type="secondary" size="high" @click="cancel">
            Cancel
        </jds-button>
    </template>
    Hello world!


    <jds-dropdown-menu label="Bulk actions">
        <jds-dropdown-menu-item icon="mail">Bulk email...
            <template #hint>
                Send email to each selected candidate.
            </template>
        </jds-dropdown-menu-item>
        <jds-dropdown-menu-item icon="mail">Send additional forms...
            <template #hint>
                Send out a form to each selected candidate by email.
            </template>
        </jds-dropdown-menu-item>
        <jds-dropdown-menu-item icon="mail">Bulk email...
            <template #hint>
                Send email to each selected candidate.
            </template>
        </jds-dropdown-menu-item>
        <jds-dropdown-menu-item icon="mail">Send additional forms...
            <template #hint>
                Send out a form to each selected candidate by email.
            </template>
        </jds-dropdown-menu-item>
        <jds-dropdown-menu-item icon="mail">Bulk email...
            <template #hint>
                Send email to each selected candidate.
            </template>
        </jds-dropdown-menu-item>
        <jds-dropdown-menu-item icon="mail">Send additional forms...
            <template #hint>
                Send out a form to each selected candidate by email.
            </template>
        </jds-dropdown-menu-item>
        <jds-dropdown-menu-item icon="mail">Bulk email...
            <template #hint>
                Send email to each selected candidate.
            </template>
        </jds-dropdown-menu-item>
        <jds-dropdown-menu-item icon="mail">Send additional forms...
            <template #hint>
                Send out a form to each selected candidate by email.
            </template>
        </jds-dropdown-menu-item>
    </jds-dropdown-menu>

    <jds-breakdown>
        <jds-breakdown-item icon="dashboard" label="Layout">Default breakdown layout</jds-breakdown-item>
        <jds-breakdown-item label="Item 1">Item contents</jds-breakdown-item>
        <jds-breakdown-item label="Item 2">Item contents</jds-breakdown-item>
    </jds-breakdown>

    <template #back>
        Flip side!
        <jds-button type="secondary" size="high" @click="inspector.close()">
            Close
        </jds-button>
    </template>
</jds-inspector>
<jds-button @click="openInspector">Open Inspector</jds-button>

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

JdsInspector

Props

Prop	Value	Default
icon	`string`	none
noAutofocus	`boolean`	none

Events

Event	Payload
close
cancel

Methods

Method	Parameters
open	-	Open this inspector.
close	-	Close this inspector; same effect as the `close` binding on the `toolbar` slot.
cancel	-	Close this inspector; same effect as the `cancel` binding on the `toolbar` slot. No analytics event will be emitted.
flip	-	Reveal the opposite side of the inspector, populated by the `back` slot. experimental

Slots

Slot

title Required

Main title of this inspector.

help

Optional smaller help text to explain the purpose of this entity.

default

Main content of this inspector.

toolbar Required

Toolbar to take action on the inspected entity.

Binding	Type
close	`function`	Call this to close the inspector with a "positive" effect, such as saving its contents.
cancel	`function`	Call this to close the inspector as part of a cancellation effect.

back

The "inverse" side of this inspector, suitable for post-saving loading indicators, additional confirmations, or success states.

experimental

Analytics Events

Event

jds.inspector:cancel

Fired on user-initiated inspector canceling.

Parameter
trigger	Either `backdrop` or `button`, which the user clicked on to cancel this inspector.
duration	How long, in milliseconds, the inspector 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.