Last active
June 12, 2024 11:54
-
-
Save blackfyre/ccd2a207948912594b5ac6cf67a11ef8 to your computer and use it in GitHub Desktop.
Modals in Laravel Nova Tools
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<modal @modal-close="handleClose"> | |
<form | |
@submit.prevent="handleConfirm" | |
slot-scope="props" | |
class="bg-white rounded-lg shadow-lg overflow-hidden" | |
style="width: 460px" | |
> | |
<slot :uppercaseMode="uppercaseMode" :mode="mode"> | |
<div class="p-8"> | |
<heading :level="2" class="mb-6">{{ __('General Modal') }}</heading> | |
<p class="text-80 leading-normal">{{__('General modal contents')}}</p> | |
</div> | |
</slot> | |
<div class="bg-30 px-6 py-3 flex"> | |
<div class="ml-auto"> | |
<button type="button" data-testid="cancel-button" dusk="cancel-general-button" @click.prevent="handleClose" class="btn text-80 font-normal h-9 px-3 mr-3 btn-link">{{__('Cancel')}}</button> | |
<button id="confirm-delete-button" ref="confirmButton" data-testid="confirm-button" type="submit" class="btn btn-default btn-danger">{{ __(uppercaseMode) }}</button> | |
</div> | |
</div> | |
</form> | |
</modal> | |
</template> | |
<script> | |
export default { | |
name: "GeneralModal", | |
methods: { | |
handleClose() { | |
this.$emit('close') | |
}, | |
handleConfirm() { | |
this.$emit('confirm') | |
}, | |
}, | |
/** | |
* Mount the component. | |
*/ | |
mounted() { | |
this.$refs.confirmButton.focus() | |
}, | |
} | |
</script> | |
<style scoped> | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<button @click="openModal">{{__('Open Modal')}}</button> | |
<portal to="modals"> | |
<transition name="fade"> | |
<general-modal | |
v-if="modalOpen" | |
@confirm="confirmModal" | |
@close="closeModal" | |
/> | |
</transition> | |
</portal> | |
</div> | |
</template> | |
<script> | |
import GeneralModal from './parts/modals/GeneralModal.vue'; | |
export default { | |
props: ["resourceName", "resourceId", "field"], | |
data() { | |
return { | |
modalOpen: false | |
} | |
}, | |
components: { | |
GeneralModal | |
}, | |
mounted() { | |
}, | |
methods: { | |
openModal() { | |
this.modalOpen = true; | |
}, | |
confirmModal() { | |
this.modalOpen = false; | |
}, | |
closeModal() { | |
this.modalOpen = false; | |
} | |
} | |
}; | |
</script> |
@bmoex thanks for the snippet. any idea how to trigger the auto close on click away functionality? I can see that Nova 4 native modals have it
@bmoex thanks for the snippet. any idea how to trigger the auto close on click away functionality? I can see that Nova 4 native modals have it
You really can't do that without modifying the nova code as it usually involves a click listener on the backdrop.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for your sharing; I fixed it for Nova 4 like this:
Similar to your implementation but changed to match
laravel/nova/resources/js/components/Modals/DeleteResourceModal.vue
GeneralModal.vue
Tool.vue