Skip to content
Permalink
Browse files

Context Menu Episode Complet

  • Loading branch information...
JeffreyWay committed May 22, 2019
1 parent 484c85c commit 48294fe156f6f75efaa13829cc7e6f42834bb95c
Showing with 99 additions and 8 deletions.
  1. +2 −0 resources/js/app.js
  2. +66 −0 resources/js/components/Dropdown.vue
  3. +31 −8 resources/views/context-menu.php
@@ -1,9 +1,11 @@
import Vue from 'vue';
import ScrollLink from './components/ScrollLink';
import Dropdown from './components/Dropdown';

window.Vue = Vue;

Vue.component('scroll-link', ScrollLink);
Vue.component('dropdown', Dropdown);

new Vue({
el: '#app'
@@ -0,0 +1,66 @@
<template>
<div class="dropdown relative">
<div class="dropdown-trigger"
@click.prevent="isOpen = ! isOpen"
aria-haspopup="true"
:aria-expanded="isOpen"
>
<slot name="trigger"></slot>
</div>

<transition name="pop-out-quick">
<ul v-show="isOpen"
class="dropdown-menu absolute bg-black mt-2 py-2 rounded shadow text-white z-10"
:class="classes"
>
<slot></slot>
</ul>
</transition>
</div>
</template>

<script>
export default {
props: ['classes'],
data() {
return {
isOpen: false
};
},
watch: {
isOpen(isOpen) {
if (isOpen) {
document.addEventListener(
'click',
this.closeIfClickedOutside
);
}
}
},
methods: {
closeIfClickedOutside(event) {
if (! event.target.closest('.dropdown')) {
this.isOpen = false;
document.removeEventListener('click', this.closeIfClickedOutside);
}
}
}
}
</script>

<style>
.pop-out-quick-enter-active,
.pop-out-quick-leave-active {
transition: all 0.4s;
}
.pop-out-quick-enter,
.pop-out-quick-leave-active {
opacity: 0;
transform: translateY(-7px);
}
</style>
@@ -9,17 +9,40 @@
<title>Smooth Scrolling</title>
</head>
<body>
<div id="app" class="flex flex-col items-center p-8">
<h1 class="text-2xl font-bold mb-8">Context Menu</h1>
<div id="app" class="flex flex-col items-center p-8">
<h1 class="text-2xl font-bold mb-8">Context Menu</h1>
<div>
<div class="bg-gray-400 w-64 h-64 flex items-center justify-center">
<!-- Example 1 -->
<dropdown>
<template v-slot:trigger>
<button class="hover:text-blue-500">...</button>
</template>
<div>
<div class="bg-gray-400 w-64 h-64 flex items-center justify-center">
...
<li><a href="#" class="pl-2 pr-8 leading-loose text-xs block hover:bg-gray-900">Edit</a></li>
<li><a href="#" class="pl-2 pr-8 leading-loose text-xs block hover:bg-gray-900">Delete</a></li>
<li><a href="#" class="pl-2 pr-8 leading-loose text-xs block hover:bg-gray-900">Report</a></li>
</dropdown>
</div>
</div>
<hr>
<!-- Example 2 -->
<dropdown classes="w-full">
<template v-slot:trigger>
<button class="text-blue-500">Example With Full Width Menu<button>
</template>
<li><a href="#" class="pl-2 pr-8 leading-loose text-xs block hover:bg-gray-900">Edit</a></li>
<li><a href="#" class="pl-2 pr-8 leading-loose text-xs block hover:bg-gray-900">Delete</a></li>
<li><a href="#" class="pl-2 pr-8 leading-loose text-xs block hover:bg-gray-900">Report</a></li>
</dropdown>
</div>
</div>
<script src="/js/app.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
</html>

0 comments on commit 48294fe

Please sign in to comment.
You can’t perform that action at this time.