Vue Attract: Sort/filterable table based on Vue
Initial commit implementing sortable and filterable tables for attract using Vue.
This commit is contained in:
42
src/scripts/js/es6/common/vuecomponents/menu/DropDown.js
Normal file
42
src/scripts/js/es6/common/vuecomponents/menu/DropDown.js
Normal file
@@ -0,0 +1,42 @@
|
||||
const TEMPLATE =`
|
||||
<div class="pillar-dropdown">
|
||||
<div class="pillar-dropdown-button"
|
||||
:class="buttonClasses"
|
||||
@click="toggleShowMenu"
|
||||
>
|
||||
<slot name="button"/>
|
||||
</div>
|
||||
<div class="pillar-dropdown-menu"
|
||||
v-show="showMenu"
|
||||
v-click-outside="closeMenu"
|
||||
>
|
||||
<slot name="menu"/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
let DropDown = Vue.component('pillar-dropdown', {
|
||||
template: TEMPLATE,
|
||||
data() {
|
||||
return {
|
||||
showMenu: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
buttonClasses() {
|
||||
return {'is-open': this.showMenu};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleShowMenu(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.showMenu = !this.showMenu;
|
||||
},
|
||||
closeMenu(event) {
|
||||
this.showMenu = false;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export { DropDown }
|
Reference in New Issue
Block a user