Last active
June 8, 2019 06:03
-
-
Save JeffreyNaval/e105943986644e6a62c78c9800ce1eb1 to your computer and use it in GitHub Desktop.
New Laravel
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
/** | |
* Vue directive to react on clicks outside an element without stopping the | |
* event propagation. Great for closing dialogues, menus among other things. | |
* | |
* https://github.com/ndelvalle/v-click-outside | |
*/ | |
import vClickOutside from 'v-click-outside'; | |
Vue.use(vClickOutside); | |
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 class="relative" v-click-outside="closeDropdown"> | |
<slot name="button" v-bind:toggle="toggle"></slot> | |
<transition | |
enter-active-class="transition-all transition-fastest ease-out-quad" | |
leave-active-class="transition-all transition-faster ease-in-quad" | |
enter-class="opacity-0 scale-70" | |
enter-to-class="opacity-100 scale-100" | |
leave-class="opacity-100 scale-100" | |
leave-to-class="opacity-0 scale-70" | |
> | |
<div v-if="open" class="absolute origin-top-right w-full right-0" style="min-width: 200px;"> | |
<div class="bg-white rounded shadow overflow-hidden"> | |
<slot name="dropdown"></slot> | |
</div> | |
</div> | |
</transition> | |
</div> | |
</template> | |
<script> | |
export default { | |
data() { | |
return { | |
open: false, | |
} | |
}, | |
events: { | |
closeDropdown(event) { | |
this.open = false; | |
} | |
}, | |
methods: { | |
toggle() { | |
this.open = !this.open; | |
}, | |
closeDropdown(event) { | |
this.open = false; | |
}, | |
}, | |
} | |
</script> |
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
# New Laravel | |
laravel new mysite | |
cd mysite | |
# Install Tailwind | |
composer require laravel-frontend-presets/tailwindcss | |
php artisan preset tailwindcss-auth | |
# Install Tailwind Custom Form | |
npm i -D @tailwindcss/custom-forms | |
# Install Tailwind Table | |
npm i -D tailwindcss-tables | |
# Install V Click Outside | |
npm i -D v-click-outside | |
# Add to tailwind.config.js | |
# plugins: [ | |
# require('@tailwindcss/custom-forms'), | |
# require('tailwindcss-tables'), | |
# ] | |
npm install && npm run dev | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment