🌏 Translated with the assistance of DeepSeek and ChatGPT

Dialog

When a dialog is triggered, the dialog will pop up.

Basic Usage

The visible property controls the display and hiding of the dialog. When visible is passed, it enters controlled mode. If not passed or set to undefined, it is in uncontrolled mode, and the defaultVisible property can be provided as the default value.

Title

Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content

Uncontrolled Dialog

Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content

<template>
	<div>
		<px-dialog title="Title" v-model:visible="visible">
			Content Content Content Content Content Content Content Content Content Content Content
			Content Content Content Content Content Content Content Content Content Content Content
			Content Content Content Content Content Content Content Content Content Content
		</px-dialog>
		<px-dialog title="Uncontrolled Dialog" ref="dialog">
			Content Content Content Content Content Content Content Content Content Content Content
			Content Content Content Content Content Content Content Content Content Content Content
			Content Content Content Content Content Content Content Content Content Content
		</px-dialog>
		<px-space>
			<px-button @click="visible = true">Open Controlled Dialog</px-button>
			<px-button @click="dialog?.open()">Open Uncontrolled Dialog</px-button>
		</px-space>
	</div>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { Dialog } from '@pixelium/web-vue'

// If on-demand import
// import { Dialog } from '@pixelium/web-vue/es';

const visible = ref(false)
const dialog = shallowRef<InstanceType<typeof Dialog> | null>(null)
</script>

Form in Dialog

This is just an example of using a form inside a dialog. As demonstrated by the example, you can directly pass attrs such as class and style through to the dialog container element.

Form

*  Input

*  Radio

Yes

No

*  Checkbox

A

B

C

D

Number

*  Tags

*  Text

*  Switch

*  Select

Please select...

*  Email

*  URL

Slider

*  Number String

<template>
	<div>
		<px-dialog
			title="Form"
			v-model:visible="visible"
			style="max-height: 70vh; width: 600px"
			@before-ok="submitHandler"
		>
			<px-form
				:model="form"
				:rules="rules"
				style="width: 500px"
				@submit="submitHandler"
				ref="formRef"
				poll-size-change
			>
				<px-form-item label="Input" field="input">
					<px-input v-model="form.input" placeholder="Please input..."></px-input>
				</px-form-item>
				<px-form-item label="Radio" field="radio">
					<px-radio-group
						v-model="form.radio"
						:options="radioOptions"
						variant="retro"
					></px-radio-group>
				</px-form-item>
				<px-form-item label="Checkbox" field="checkbox">
					<px-checkbox-group
						v-model="form.checkbox"
						:options="checkboxOptions"
					></px-checkbox-group>
				</px-form-item>
				<px-form-item label="Number" field="number">
					<px-input-number
						v-model="form.number"
						placeholder="Please input..."
					></px-input-number>
				</px-form-item>
				<px-form-item label="Tags" field="tags">
					<px-input-tag
						v-model="form.tags"
						placeholder="Press enter to confirm..."
					></px-input-tag>
				</px-form-item>
				<px-form-item label="Text" field="text">
					<px-textarea v-model="form.text" placeholder="Please input text..."></px-textarea>
				</px-form-item>
				<px-form-item label="Switch" field="switch">
					<px-switch v-model="form.switch"></px-switch>
				</px-form-item>
				<px-form-item label="Select" field="select">
					<px-select
						:options="options"
						v-model="form.select"
						placeholder="Please select..."
					></px-select>
				</px-form-item>
				<px-form-item label="Email" field="email">
					<px-input v-model="form.email" placeholder="Please email..."></px-input>
				</px-form-item>
				<px-form-item label="URL" field="url">
					<px-input v-model="form.url" placeholder="Please URL..."></px-input>
				</px-form-item>
				<px-form-item label="Slider" field="slider">
					<px-slider v-model="form.slider"></px-slider>
				</px-form-item>
				<px-form-item label="Number String" field="numberString">
					<px-input v-model="form.numberString" placeholder="Please number..."></px-input>
				</px-form-item>
			</px-form>
		</px-dialog>

		<px-button @click="visible = true" variant="plain">Open Form Dialog</px-button>
	</div>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { Form } from '@pixelium/web-vue'

// If on-demand import
// import { Form } from '@pixelium/web-vue/es'

const visible = ref(false)

const form = ref({
	input: '',
	number: 0,
	tags: [] as string[],
	text: '',
	select: null as null | string,
	email: '',
	url: '',
	numberString: '',
	switch: false,
	radio: null as null | string,
	checkbox: [] as string[],
	slider: 10
})

const rules = {
	input: { required: true, message: 'Please input' },
	select: { required: true, message: 'Please select' },
	switch: { required: true, message: 'Please select' },
	number: { min: 10, message: 'Min is 10' },
	tags: [
		{ required: true, message: 'Please input tags' },
		{ maxLength: 5, message: 'Length less than or equal 5' }
	],
	text: { required: true, message: 'Just a tip', level: 'warning' },
	email: { required: true, email: true, message: 'Please input email' },
	url: { required: true, url: true, message: 'Please input a URL' },
	numberString: { required: true, numberString: true, message: 'Please input number' },
	radio: {
		required: true,
		validator(value: string) {
			return value !== 'Yes' ? 'Please select Yes' : undefined
		}
	},
	checkbox: [
		{ required: true, message: 'Please select' },
		{ maxLength: 2, message: 'You can select up to 2 items' }
	],
	slider: { max: 90, message: 'Max is 90' }
}

const options = ref(['vue', 'react', 'angular'])
const radioOptions = ref(['Yes', 'No'])
const checkboxOptions = ref(['A', 'B', 'C', 'D'])

const formRef = shallowRef<null | InstanceType<typeof Form>>(null)
const submitHandler = () => {
	return formRef.value?.validate().then(({ isValid }) => {
		if (isValid) {
			console.log('submit')
			return true
		} else {
			return false
		}
	})
}
</script>

Functional Usage

If you have fully registered the component library, you can use it in the following ways:

• window.$dialog;
• Inside a Vue component: getCurrentInstance().appContext.config.globalProperties.PixeliumVue.dialog;
• Import from @pixelium/web-vue.

When using on-demand import, you can also import Dialog from @pixelium/web-vue/es for usage.

<template>
	<px-space>
		<px-button @click="info" variant="outline">Info</px-button>
		<px-button @click="notice" theme="notice" variant="outline">Notice</px-button>
		<px-button @click="success" theme="success" variant="outline">Success</px-button>
		<px-button @click="warning" theme="warning" variant="outline">Warning</px-button>
		<px-button @click="error" theme="danger" variant="outline">Error</px-button>
		<px-button @click="confirm" theme="info" variant="outline">Confirm</px-button>
	</px-space>
</template>

<script setup lang="ts">
const info = () => {
	$dialog.info('This is an informational dialog.')
}
const notice = () => {
	$dialog.notice('This is an notice dialog.')
}
const success = () => {
	$dialog.success('This is a success dialog.')
}
const warning = () => {
	$dialog.warning('This is a warning dialog.')
}
const error = () => {
	$dialog.error('This is an error dialog.')
}
const confirm = () => {
	$dialog.confirm('Are you sure to proceed?').then((ok) => {
		if (ok) {
			$dialog.success('You have confirmed.')
		} else {
			$dialog.info('You have cancelled.')
		}
	})
}
</script>

Asynchronous Confirmation

When onBeforeOk is provided, the confirmation process will wait for onBeforeOk to complete. If the result is not false, subsequent code will be executed.

<template>
	<px-space>
		<px-button @click="confirm" theme="warning">Async Confirm</px-button>
	</px-space>
</template>

<script setup lang="ts">
const confirm = () => {
	$dialog
		.confirm({
			title: 'Async Confirm',
			content: 'Are you sure to proceed with async operation?',
			onBeforeOk() {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve(Math.random() > 0.5)
					}, 2000)
				})
			},
			okText: 'Random Succeed',
			cancelText: 'Cancel',
			okButtonProps: {
				theme: 'warning'
			}
		})
		.then((ok) => {
			if (ok) {
				$message.success('You have confirmed.')
			} else {
				$message.info('You have cancelled.')
			}
		})
}
</script>

API

Dialog Function

After calling a function on the Dialog, a Promise<boolean> is returned. If the dialog is closed via confirmation, the promise is fulfilled with true; otherwise, it is false.

type DialogReturn = Promise<boolean> & {
	close: () => void
}

// ...
{
	[key in DialogOptions['type'] & string]: (
		options:
			| (Omit<DialogOptions, 'type'> & Omit<EmitEvent<DialogEvents>, 'update:visible'>)
			| string
	) => DialogReturn
}

Just as demonstrated in the example above example, when used as a component, you can directly pass attributes such as class and style through to the dialog container element.

DialogOptions

Attribute	Type	Optional	Default	Description	Version
content	ValidContent	False		Dialog content.	0.1.0
title	ValidContent	True		Dialog title.	0.1.0
icon	ValidVNodeContent	True		Dialog title icon.	0.1.0
footer	ValidVNodeContent	True		Dialog footer area.	0.1.0
type	'info' | 'success' | 'warning' | 'error' | 'normal' | 'confirm' | 'notice'	True	'normal'	Dialog type.	0.1.0
closable	boolean	True	true	Whether to display the close button in the top-right corner.	0.1.0
mask	boolean	True	true	Whether to display the mask layer.	0.1.0
maskClosable	boolean	True	true	Whether the dialog can be closed by clicking the mask layer.	0.1.0
escToClose	boolean	True	true	Whether the dialog can be closed by pressing the ESC key (requires focus to be within the dialog).	0.1.0
showCancel	boolean	True		Whether to display the cancel button. If not set, it is influenced by the type field—only displayed when the type is 'confirm'.	0.1.0
okText	string	True		Text content of the confirm button.	0.1.0
cancelText	string	True		Text content of the cancel button.	0.1.0
showFooter	boolean	True	true	Whether to display the dialog footer area.	0.1.0
zIndex	number	True		The z-index property of the dialog.	0.1.0
root	string | HTMLElement	True	'body'	The root element to which the dialog is mounted.	0.1.0
okButtonProps	ButtonProps & EmitEvent<ButtonEvents> & RestAttrs	True		Properties of the confirm button.	0.1.0
cancelButtonProps	ButtonProps & EmitEvent<ButtonEvents> & RestAttrs	True		Properties of the cancel button.	0.1.0
maskProps	Omit<MaskProps, 'zIndex'>	True		Properties of the mask layer.	0.1.0
containerProps	RestAttrs	True		Properties of the dialog container element.	0.1.0
headerProps	RestAttrs	True		Properties of the dialog header area element.	0.1.0
bodyProps	RestAttrs	True		Properties of the dialog content area element.	0.1.0
footerProps	RestAttrs	True		Properties of the dialog footer area element.	0.1.0

DialogProps

Attribute	Type	Optional	Default	Description	Version
visible	boolean | null	True		Controls the display of the dialog (controlled mode), supports v-model.	0.1.0
visible	boolean | null	True		Controls the display of the dialog (controlled mode), supports v-model.	0.1.0
title	string	True	''	Dialog title.	0.1.0
closable	boolean	True	true	Whether to display the close button in the top-right corner.	0.1.0
mask	boolean	True	true	Whether to display the mask layer.	0.1.0
maskClosable	boolean	True	true	Whether the dialog can be closed by clicking the mask layer.	0.1.0
escToClose	boolean	True	true	Whether the dialog can be closed by pressing the ESC key (requires focus to be within the dialog).	0.1.0
showCancel	boolean	True	true	Whether to display the cancel button. If not set, it is influenced by the type field—only displayed when the type is 'confirm'.	0.1.0
okText	string	True		Text content of the confirm button.	0.1.0
cancelText	string	True		Text content of the cancel button.	0.1.0
boolean	boolean	True	false		0.1.0
showFooter	boolean	True	true	Whether to display the dialog footer area.	0.1.0
root	string | HTMLElement	True	'body'	The root element to which the dialog is mounted.	0.1.0
zIndex	number	True		The z-index property of the dialog.	0.1.0
destroyOnHide	boolean	True	false	Whether the dialog content is destroyed after hiding.	0.1.0
okButtonProps	ButtonProps & EmitEvent<ButtonEvents> & RestAttrs	True		Properties of the confirm button.	0.1.0
cancelButtonProps	ButtonProps & EmitEvent<ButtonEvents> & RestAttrs	True		Properties of the cancel button.	0.1.0
maskProps	Omit<MaskProps, 'zIndex'>	True		Properties of the mask layer.	0.1.0
containerProps	RestAttrs	True		Properties of the dialog container element.	0.1.0
headerProps	RestAttrs	True		Properties of the dialog header area element.	0.1.0
bodyProps	RestAttrs	True		Properties of the dialog content area element.	0.1.0
footerProps	RestAttrs	True		Properties of the dialog footer area element.	0.1.0

DialogSlots

Slot	Parameter	Description	Version
default		Dialog content.	0.1.0
title		Dialog title.	0.1.0
icon		Dialog title icon.	0.1.0
footer		Dialog footer area.	0.1.0

DialogEvents

Event	Parameter	Description	Version
update:visible		Used to update the visible value in controlled mode.	0.1.0
beforeOk		For async confirmation. Must return a value of type Promise<boolean | void> | boolean | void to indicate success. Confirmation is successful if the result after await is not false.	0.1.0
ok	event: MouseEvent	Callback triggered when the dialog is successfully closed via confirmation.	0.1.0
cancel	event: MouseEvent | KeyboardEvent	Callback triggered when the dialog is closed via cancellation, close button, mask layer, ESC key, etc.	0.1.0
open		Callback triggered when the dialog opens.	0.1.0
afterOpen		Callback triggered after the dialog opening animation ends.	0.1.0
close		Callback triggered when the dialog closes.	0.1.0
afterClose		Callback triggered after the dialog closing animation ends.	0.1.0

DialogExpose

Attribute	Type	Optional	Default	Description	Version
close	() => void	False		Close the dialog.	0.1.0
open	() => void	False		Open the dialog.	0.1.0

ValidContent, ValidVNodeContent

export type ValidContent = string | ((...args: any[]) => VNode | string | JSX.Element | null | void)
export type ValidVNodeContent = (...args: any[]) => VNode | JSX.Element

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}