atasistro
/
pingcrm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve dropdown (add auto closing)

This commit is contained in:
Jonathan Reinink 2019-12-18 15:12:22 -05:00
parent 3992b27e53
commit f3b2c8fb6f
2 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
resources/js/Shared/Dropdown.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<button type="button" @click="toggle"> <button type="button" @click="show = true">
<slot /> <slot />
<portal v-if="show" to="dropdown"> <portal v-if="show" to="dropdown">
<div> <div>
<div style="position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99998; background: black; opacity: .2" @click="toggle" /> <div style="position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99998; background: black; opacity: .2" @click="show = false" />
<div ref="dropdown" style="position: absolute; z-index: 99999;" @click.stop> <div ref="dropdown" style="position: absolute; z-index: 99999;" @click.stop="show = autoClose ? false : true">
<slot name="dropdown" /> <slot name="dropdown" />
</div> </div>
</div> </div>
@ -25,6 +25,10 @@ export default {
type: String, type: String,
default: 'scrollParent', default: 'scrollParent',
}, },
autoClose: {
type: Boolean,
default: true,
},
}, },
data() { data() {
return { return {
@ -50,17 +54,9 @@ export default {
mounted() { mounted() {
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (e.keyCode === 27) { if (e.keyCode === 27) {
this.close() this.show = false
} }
}) })
}, },
methods: {
close() {
this.show = false
},
toggle() {
this.show = !this.show
},
},
} }
</script> </script>

2
resources/js/Shared/SearchFilter.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="flex items-center"> <div class="flex items-center">
<div class="flex w-full bg-white shadow rounded"> <div class="flex w-full bg-white shadow rounded">
<dropdown class="px-4 md:px-6 rounded-l border-r hover:bg-grey-lightest focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start"> <dropdown :auto-close="false" class="px-4 md:px-6 rounded-l border-r hover:bg-grey-lightest focus:border-white focus:shadow-outline focus:z-10" placement="bottom-start">
<div class="flex items-baseline"> <div class="flex items-baseline">
<span class="text-grey-darkest hidden md:inline">Filter</span> <span class="text-grey-darkest hidden md:inline">Filter</span>
<svg class="w-2 h-2 fill-grey-darker md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998"> <svg class="w-2 h-2 fill-grey-darker md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">