@aldoivan10/vuetify-dialog/src/dialog.store.ts

Plugin to use dialogs from vuetify programatically

import { defineStore } from "pinia"
import { markRaw, ref } from "vue"
import ChoiceForm from "./components/ChoiceForm.vue"
import { useDialog } from "./composable/dialog.use"
import type { Types } from "./model/types"

export const useDialogStore = defineStore("dialog", () => {
    const dialog = useDialog()
    const props = ref<Record<string, any>>({})

    const alertProps = ref({
        header: { content: { title: "¡Alerta!", subtitle: "Urgente" } },
        body: { content: "Soy una <b>alerta<b> :D", props: { html: true } },
        action: { value: 123, text: "Aceptar" },
    })

    const confirmProps = ref({
        header: { content: { title: "¡Alto!", subtitle: "Responde" } },
        body: { content: "¿Te ha gustado?", props: { html: true } },
        acceptBtn: { text: "Sí", value: true },
        cancelBtn: { text: "No", value: false },
    })
    const simpleProps = ref({
        header: { content: { title: "Escoge al usuario" } },
        body: { content: markRaw(ChoiceForm) },
    })
    const loading = ref(false)
    const customProps = ref<Types.Props>({
        header: { content: { title: "Personalizado", subtitle: ":D" } },
        body: { content: "Soy un componente custom", props: { html: true } },
        actions: [
            {
                text: "Aceptar",
                variant: "flat",
                onClick: (closeDialog) => closeDialog("Boton 1"),
            },
            {
                text: "Cancelar",
                color: "error",
                onClick: (closeDialog) => closeDialog(20),
            },
            {
                text: "Extra 1",
                color: "success",
                variant: "tonal",
                onClick: (closeDialog) =>
                    closeDialog({ id: 1, name: "Nameless" }),
            },
            {
                onClick: (closeDialog, props) => {
                    props.loading = true
                    setTimeout(() => closeDialog([1, 2, 3, 4]), 3000)
                },
                loading,
                text: "Extra 2",
                variant: "outlined",
                color: "primary",
            },
        ],
        onAfterLeave: () => { loading.value = false }
    })

    async function show() {
        const result = await dialog.show<any>(customProps.value)
        console.log(result)
    }

    async function showAlert() {
        const result = await dialog.alert<any>(alertProps.value)
        console.log(result)
    }

    async function showQuestion() {
        const result = await dialog.confirm<boolean>(confirmProps.value)
        console.log(result)
    }

    async function showChoice() {
        const result = await dialog.simple<number>(simpleProps.value)
        console.log(result)
    }

    return {
        props,
        show,
        showAlert,
        alertProps,
        showQuestion,
        showChoice,
        simpleProps,
        confirmProps,
        customProps,
    }
})