Components

ExDialog

<ExDialog
    v-model="isVisible"
    :persistent="enablePersistent"
>
    <Transition name="fade" appear mode="out-in">
        <ExDialogOverlay v-if="isVisible && showOverlay" class="backdrop-blur-md bg-white/5"></ExDialogOverlay>
    </Transition>

    <Transition name="slide-fade" appear>
        <ExDialogContent v-if="isVisible" class="top-48 left-1/2 bg-primary border-body/5 sm:max-w-sm fixed w-[calc(100%-24px)] p-10 overflow-y-auto -translate-x-1/2 border rounded-lg shadow-2xl">
            <h2 class="text-body mb-3 text-xl">Proceed to Exstasy!</h2>
            <p class="text-body/60 mt-2 text-base">This is a Dialog box</p>
            <ExDialogClose class="hover:ring hover:bg-body/20 hover:ring-body/30 focus:ring focus:ring-body/40 text-body bg-body/10 w-32 px-4 py-2 mt-8 text-sm transition-all rounded-md">
                <span class="flex items-center">
                    <span class="inline-block">Aparecium</span>
                    <span class="inline-block ml-2 text-base">🪄</span>
                </span>
            </ExDialogClose>
        </ExDialogContent>
    </Transition>
</ExDialog>

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
    ExCard,
    ExDialog,
    ExDialogClose,
    ExDialogContent,
    ExDialogOverlay,
} from 'mi-components'

const showDialog = ref(false)
const toggleModal = () => (showDialog.value = !showDialog.value)
</script>

Interact

Overlay:

Persistent:

Props: ExDialog

modelValue

Type	Default	Required
boolean	false	true

Description: Controls the display of dialog box.

---

focusFirst

Type	Default	Required
boolean	false	false

Description: Sets the focus on the first focusable element once the dialog is visible.

---

persistent

Type	Default	Required
boolean	false	false

Description: Disables closing the dialog on outside click

---

Emits

Name	Description
update:modelValue	This is emits event for v-model <ExDialog v-model="dialogVisibility" ...> ... </ExDialog>
onClose	This is emitted when the modal is closed <div @on-close="anyMethod" />

Slots

Name	Description
default	The default Vue slot. { isOpen: boolean, // modal visibility closeDialog: Function // function to toggle modal visibility }

Props: ExDialogContent

as

Type	Default	Required
string component	div	false

Description: Sets the element type of ex-dialog-content. Any custom vue component can also be passed.

---

Slots

Name	Description
default	The default Vue slot.

Props: ExDialogOverlay

as

Type	Default	Required
string component	div	false

Description: Sets the element type of ex-dialog-overlay. Any custom vue component can also be passed.

---

Slots

Name	Description
default	The default Vue slot.

Props: ExDialogClose

as

Type	Default	Required
string component	button	false

Description: Sets the element type of ex-dialog-close. Any custom vue component can also be passed.

---

disabled

Type	Default	Required
boolean	false	false

Description: Enables / Disables ex-dialog-close element. No events will be emitted if the value is true.

Slots

Name	Description
default	The default Vue slot. { isOpen: boolean }

Examples

Form Dialog

Template

<ExDialog
    v-model="isVisible"
    @close="emits('close')"
>
    <Transition name="fade" mode="out-in" appear>
        <ExDialogOverlay v-if="isVisible" class="backdrop-blur-md bg-white/5" />
    </Transition>

    <Transition name="slide-fade" appear>
        <ExDialogContent v-if="isVisible" class="top-48 left-1/2 bg-primary border-body/10 fixed w-full max-w-[600px] overflow-y-auto -translate-x-1/2 border rounded-lg shadow-2xl">
            <div class="bg-body/5 border-border/60 flex items-center justify-between px-4 py-3 border-b">
                <h4 class="text-body/80 text-sm tracking-normal">New Message</h4>
                <ExDialogClose class="text-body/80 hover:text-body/50 w-4 h-4 text-xs rounded">&#x2715;</ExDialogClose>
            </div>
            <div class="px-4 pb-5">
                <div class="border-border border-b">
                    <input
                        type="email"
                        placeholder="Recipients"
                        class="min-h-10 max-h-10 placeholder:text-body/40 text-sm"
                    >
                </div>
                <div class="border-border border-b">
                    <input
                        type="text"
                        placeholder="Subject"
                        class="min-h-10 max-h-10 placeholder:text-body/40 text-sm"
                    >
                </div>
                <div class="py-4">
                    <textarea
                        placeholder="Compose your message.."
                        class="min-h-[120px] max-h-[240px] placeholder:text-body/40 w-full placeholder:text-sm text-sm bg-transparent resize-none"
                    ></textarea>
                </div>
                <ExDialogClose class="hover:ring hover:ring-indigo-400 active:bg-indigo-600 w-32 px-4 py-2 text-sm text-white transition-all bg-indigo-700 rounded-full">
                    Send Mail
                </ExDialogClose>
            </div>
        </ExDialogContent>
    </Transition>
</ExDialog>

Script

import { nextTick, ref, watch, Transition } from 'vue'
import ExDialog from 'ExDialog/ExDialog.vue' // import is for demo purpose, make sure the correct package reference is used
import ExDialogContent from 'ExDialogialog/ExDialogContent.vue'
import ExDialogClose from 'ExDialogialog/ExDialogClose.vue'
import MiDialOverlayse from 'ExDialogialog/ExDialogOverlay.vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})

const emits = defineEmits(['close'])
const isVisible = ref(props.show)
const messageModel = ref('')

watch(isVisible, (val) => {
    if (!val) emits('close')
})

watch(() => props.show, (val) => {
    isVisible.value = val
})

Style

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all 0.25s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}