Overlay
The resources/js/Components/Overlay
directory contains Vue components that have some kind of overlay functionality, like the ones listed below.
AppConfirmDialog
The AppConfirmDialog
Vue component is a modal component generally used to confirm destructive actions, such as deleting content in your application. It is designed to enable the user to confirm or cancel the action with minimal effort in your Vue component. It can be used as follows:
<AppButton
class="btn btn-destructive"
@click="confirmDelete(route('customer.destroy', customer.id))"
>
Delete Customer
</AppButton>
<AppConfirmDialog ref="confirmDialogRef"></AppConfirmDialog>
<script setup>
import { ref } from 'vue'
const confirmDialogRef = ref(null)
const confirmDelete = (deleteRoute) => {
confirmDialogRef.value.openModal(deleteRoute)
}
const customer = { id: 369 }
</script>
Note that in the example above, the customer.id
is hard-coded for demonstration purposes. However, in a real application, you generally have an array of customers, use a v-for
loop, and pass the customer.id
to the confirmDelete
method.
The rendered result will be (click on the button to open the confirmation modal):
Confirmation
Are you sure you want to proceed?
TIP
When the user confirms the deletion action in the AppConfirmDialog
window, a DELETE
request is automatically sent to your backend. In the example above, the deleteRoute
will be /customer/369
. By default, after the deletion, the user will be redirected to the index
page of the Module in context
(in this example, the Customer module), accompanied by a success toast message to provide visual feedback to the user.
AppConfirmDialog Exposed Methods
Method | Arguments | Description |
---|---|---|
openModal | The route path to send a DELETE request if the user confirms the delete action (for example: '/customer/369') | Opens the AppConfirmDialog modal. |
AppModal
The AppModal
Vue component is a modal component that can be used to display any type of content in a consistent way. It can be used as follows:
<AppButton class="btn btn-primary" @click="openModal">
Open Modal
</AppButton>
<AppModal :is-modal-open="isModalOpen">
<!-- Modal header -->
<template #header>
<div
class="flex items-center justify-between rounded-t border-b border-skin-neutral-6 p-5"
>
<h3 class="text-xl font-semibold lg:text-2xl">Header</h3>
<AppButton
class="btn btn-neutral btn-icon"
@click="closeModal"
>
<i class="ri-close-line h-5 w-5"></i>
</AppButton>
</div>
</template>
<!-- Modal body -->
<template #body>
<div class="space-y-6 p-5">
<p class="text-base leading-relaxed">
You can put any content here...
</p>
</div>
</template>
<!-- Modal footer -->
<template #footer>
<div
class="flex items-center justify-end space-x-2 rounded-b border-t border-skin-neutral-6 p-5"
>
<AppButton class="btn btn-primary" @click="closeModal">
Ok, got it!
</AppButton>
</div>
</template>
</AppModal>
<script setup>
import { ref } from 'vue'
const isModalOpen = ref(false)
const openModal = () => {
isModalOpen.value = true
}
const closeModal = () => {
isModalOpen.value = false
}
</script>
The rendered result will be (click on the button to open the modal):
Header
You can put any content here...
AppModal Props
Name | Type | Default | Description |
---|---|---|---|
backdropClasses | String | 'bg-skin-neutral-9 bg-opacity-75 fixed inset-0 z-50' | The classes applied to the modal backdrop. |
placement | String | 'center' | The placement of the modal content, can be center , top , bottom , left , right , top-left , top-right , bottom-left and bottom-right . |
isModalOpen | Boolean | false | The current state of the Modal. |
AppModal Slots
Name | Description |
---|---|
header | The content of the modal header. |
body | The content of the modal body. |
footer | The content of the modal footer. |
AppSideBar
The AppSideBar
Vue component wraps around the AppMenu
within the AuthenticatedLayout
component. It allows users to open or close the sidebar using the hamburger button located in the top left corner of the interface. See the image below for reference:
AppSideBar Props
Name | Type | Default | Description |
---|---|---|---|
placement | String | 'left' | Determines the sidebar's position. Options: 'left' or 'right'. If set to 'right' the AuthenticatedLayout must be updated to accommodate the changes. |
bodyScrolling | Boolean | false | Controls whether main content can be scrolled when the AppSideBar is open. |
backdrop | Boolean | false | Controls the visibility of the backdrop when the AppSideBar is open. |
startsVisible | Boolean | true | Sets the initial visibility of the AppSideBar at component mount. Visible if true , hidden if false . |
AppSideBar Slots
Name | Description |
---|---|
default | The content of the AppSideBar. |