@xosen/vuetify-dialog

Vuetify 3 dialog system with form integration, wizards, and async component support.

Features

• Dialog System - Base dialog with async/await support
• Form Integration - SchemaDialog with XFormBuilder integration
• Alert & Snackbar - Built-in notifications
• Async Actions - Handle async operations with loading states
• Future: Wizards - Multi-step forms with navigation (coming soon)

Installation

npm install @xosen/vuetify-dialog @xosen/vuetify-form
# or
pnpm add @xosen/vuetify-dialog @xosen/vuetify-form

Usage

1. Install the Plugin

// main.ts
import { createApp } from 'vue'
import { createVuetifyDialogPlugin } from '@xosen/vuetify-dialog'

const app = createApp(App)

// Install dialog plugin
app.use(createVuetifyDialogPlugin())

2. Use SchemaDialog (Form Integration)

import { defineFormSchema, vine } from '@xosen/vuetify-form'
import type { DialogSchema } from '@xosen/vuetify-dialog'

const schema: DialogSchema = {
  title: 'Create Product',

  formSchema: defineFormSchema({
    name: {
      type: 'text',
      label: 'Product Name',
      required: true,
    },
    price: {
      type: 'number',
      label: 'Price',
      required: true,
    },
  }),

  vineSchema: vine.object({
    name: vine.string().minLength(2),
    price: vine.number().min(0),
  }),

  onSave: async (data) => {
    await api.createProduct(data)
    return data
  },
}

// Open the dialog
const result = await $dialog.schema(schema)
console.log('Created:', result)

3. Use Basic Dialogs

// Confirm dialog
const confirmed = await $dialog.confirm({
  title: 'Delete Item?',
  text: 'This action cannot be undone.',
})

// Alert dialog
await $dialog.alert('Operation successful!')

// Error dialog
await $dialog.error('Something went wrong')

Architecture

This package is part of the Xosen monorepo ecosystem:

@xosen/vuetify-form          ← Pure form building
@xosen/vuetify-dialog        ← Dialog + form integration (this package)

Separation of Concerns:

• @xosen/vuetify-form - No dialog dependencies
• @xosen/vuetify-dialog - Integrates form with dialogs
• Clean composition through peerDependencies

Components

SchemaDialog

Form dialog with auto-validation and loading states.

Features:

• Automatic form validation before save
• Loading states during async operations
• Error handling with user notifications
• Supports all XFormBuilder field types
• VineJS validation integration

Dialog

Base dialog component for custom dialogs.

Alert & Snackbar

Built-in notification components.

Future Features

Wizard Component (Coming Soon)

Multi-step form wizard with navigation:

const wizardSchema = {
  title: 'Setup Wizard',
  steps: [
    {
      title: 'Step 1: Basic Info',
      formSchema: { /* fields */ },
    },
    {
      title: 'Step 2: Details',
      formSchema: { /* fields */ },
    },
  ],
  onComplete: async (data) => {
    // Handle all steps data
  },
}

await $dialog.wizard(wizardSchema)

Features:

• Next/Previous buttons
• Step validation
• Progress indicator
• Conditional steps
• Summary step

API Reference

Dialog Methods

$dialog.schema(schema: DialogSchema): Promise<any>
$dialog.confirm(options): Promise<boolean>
$dialog.alert(message): Promise<void>
$dialog.error(message): Promise<void>
$dialog.snackbar(message, options): void

DialogSchema Type

interface DialogSchema {
  title: string | ((props: any) => string)
  formSchema: FormFieldsObject | FormField[] | FormSchema
  vineSchema?: VineSchema
  dialogOptions?: DialogOptions
  buttonTexts?: {
    cancel?: string
    save?: string
  }
  onLoad?: (props: any) => Promise<any>
  onSave: (data: any, props: any) => Promise<any>
  actions?: Record<string, DialogAction>
}

License

MIT

Contributing

Contributions are welcome! Please open an issue or pull request.