-
-
Save ujackson/1ef6a4b87fedb6855baf2fca2170f08f to your computer and use it in GitHub Desktop.
Modals in Laravel Nova Tools
This file contains hidden or 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 hidden or 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment