Ui3nDialog

Ui3nDialog acts as a structural layout skeleton for building modal windows. Developers define the body content and specific modal logic within an independent component file using the framework slots, and then imperatively open it from anywhere in the codebase using the queue manager $openDialog.

Props

Name	Type	Default	Description
id	string | undefined	—	Dialog id
title	string | undefined	—	Dialog title
icon	string | Ui3nIconField | undefined	—	Dialog icon
width	string | number | undefined	—	Dialog width
draggable	boolean | undefined	—	Whether dialog is draggable
hideCloseButton	boolean | undefined	—	Whether to hide close button
cssClass	string[] | undefined	[]	CSS classes for dialog
cssStyle	Record<string, string> | undefined	{}	CSS styles for dialog
contentCssClass	string[] | undefined	[]	CSS classes for content
contentCssStyle	Record<string, string> | undefined	{}	CSS styles for content
confirmButton	boolean | undefined	true	Whether to show confirm button
cancelButton	boolean | undefined	true	Whether to show cancel button
confirmButtonText	string | undefined	"Done"	Confirm button text
cancelButtonText	string | undefined	"Cancel"	Cancel button text
confirmButtonColor	string | undefined	"var(--color-text-button-primary-default)"	Confirm button color
cancelButtonColor	string | undefined	"var(--color-text-button-secondary-default)"	Cancel button color
confirmButtonBackground	string | undefined	"var(--color-bg-button-primary-default)"	Confirm button background
cancelButtonBackground	string | undefined	"var(--color-bg-button-secondary-default)"	Cancel button background
closeOnClickOverlay	boolean | undefined	—	Whether to close on click overlay
closeOnEsc	boolean | undefined	—	Whether to close on ESC key
data	V | undefined	—	Dialog data
isValid	boolean | undefined	true	Whether dialog is valid

Events

Event Name	Arguments / Value Type	Description
action	{ event: Ui3nDialogEvent<E>; data?: V | undefined; }	Called when dialog action is performed

Slots

Slot Name	Scope Props (v-slot)	Description
#header	—	Header slot
#body	—	Body slot
#actions	—	Actions slot
#loading	—	Loading slot

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-dialog-actions-height	64px
--ui3n-dialog-actions-padding	16px
--ui3n-dialog-border-radius	12px
--ui3n-dialog-cancel-background-color	var(--color-bg-button-secondary-default)
--ui3n-dialog-cancel-button-color	var(--color-text-button-secondary-default)
--ui3n-dialog-confirm-background-color	var(--color-bg-button-primary-default)
--ui3n-dialog-confirm-button-color	var(--color-text-button-primary-default)
--ui3n-dialog-title-font-size	14px
--ui3n-dialog-title-height	48px
--ui3n-dialog-title-padding	0 32px 0 16px

Core Concepts

To successfully use dialog windows in your application, ensure that:

1. The dialogs plugin is registered during application initialization (app.use(dialogs)).
2. The <ui3n-dialog-provider /> component is embedded into the root Layout of your application structure.

Usage Examples

1. Simple Dialog

To build a dialog, create a component using the <ui3n-dialog> framework wrapper.

Dialog Template (Example01.vue):

<template>
  <ui3n-dialog
    v-bind="dialogProps"
    @action="emits('action', $event)"
  >
    <template #body>
      <div class="dialog-body">{{ text }}</div>
    </template>
  </ui3n-dialog>
</template>

Live Demo & Calling Code:

Opening a Simple Dialog

How to open the configured dialog component using the imperial plugin

---

2. Button Customization & Behavior

You can completely control button text, styling, and structural states (like draggable) from your calling environment configuration without touching the dialog file template.

Dialog Template (Example02.vue):

<template>
  <ui3n-dialog
    v-bind="dialogProps"
    @action="emits('action', $event)"
  >
    <template #body>
      <div class="dialog-body">{{ message }}</div>
    </template>
  </ui3n-dialog>
</template>

Live Demo & Calling Code:

Opening a Customized Dialog

Passing color overrides, header icons, and enabling draggable features

---

3. Custom Slots Override

Components can completely replace the predefined sections of the layout structure by using internal template slots.

Dialog Template (Example03.vue):

<template>
  <ui3n-dialog
    v-bind="dialogProps"
    @action="emits('action', $event)"
  >
    <template #header>
      <h3>Custom Title Status</h3>
    </template>
    
    <template #body>
      <p>Custom body text area...</p>
    </template>
    
    <template #actions>
      <ui3n-button
        @click="emits('action', { event: 'confirm' })"
      >
        Apply
      </ui3n-button>
    </template>
  </ui3n-dialog>
</template>

Live Demo & Calling Code:

Opening a Custom Slots Dialog

Rendering advanced slot workflows from an imperatively mounted template

---

4. Form Data & Promise Exchange

You can supply initial form values into the container and receive the modified entity state straight back into your reactive state once the user clicks submit.

Dialog Template (Example04.vue):

<template>
  <ui3n-dialog
    v-bind="dialogProps"
    :is-valid="isValid"
    @action="handleAction"
  >
    <template #body>
      <ui3n-input
        v-model="localForm.name"
        @input="onInput"
      />
    </template>
  </ui3n-dialog>
</template>

Live Demo & Calling Code:

Opening an Interactive Form Dialog

Handling two-way form synchronization and fetching data via Promise returns