PHP Classes

File: resources/js/Components/Dropdown.vue

Recommend this page to a friend!
  Classes of Rodrigo Faustino   Vue.js PHP CRUD Example Using Laravel Vite   resources/js/Components/Dropdown.vue   Download  
File: resources/js/Components/Dropdown.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Vue.js PHP CRUD Example Using Laravel Vite
Example application to manage users and blog posts
Author: By
Last change:
Date: 5 months ago
Size: 2,072 bytes
 

Contents

Class file image Download
<script setup> import { computed, onMounted, onUnmounted, ref } from 'vue'; const props = defineProps({ align: { default: 'right', }, width: { default: '48', }, contentClasses: { default: () => ['py-1', 'bg-white'], }, }); const closeOnEscape = (e) => { if (open.value && e.key === 'Escape') { open.value = false; } }; onMounted(() => document.addEventListener('keydown', closeOnEscape)); onUnmounted(() => document.removeEventListener('keydown', closeOnEscape)); const widthClass = computed(() => { return { 48: 'w-48', }[props.width.toString()]; }); const alignmentClasses = computed(() => { if (props.align === 'left') { return 'origin-top-left left-0'; } else if (props.align === 'right') { return 'origin-top-right right-0'; } else { return 'origin-top'; } }); const open = ref(false); </script> <template> <div class="relative"> <div @click="open = !open"> <slot name="trigger" /> </div> <!-- Full Screen Dropdown Overlay --> <div v-show="open" class="fixed inset-0 z-40" @click="open = false"></div> <transition enter-active-class="transition ease-out duration-200" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95" > <div v-show="open" class="absolute z-50 mt-2 rounded-md shadow-lg" :class="[widthClass, alignmentClasses]" style="display: none" @click="open = false" > <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses"> <slot name="content" /> </div> </div> </transition> </div> </template>