The filter and column settings in tables are stored per project and context in the browsers localStorage. This makes the table keep the settings even if the browser is refreshed or restarted. The table emits a "componentStateChanged" event containing the tables current state (filter/column settings) which then is saved by the top level component.
43 lines
895 B
JavaScript
43 lines
895 B
JavaScript
const TEMPLATE =`
|
|
<div class="pillar-dropdown">
|
|
<div class="pillar-dropdown-button action"
|
|
: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 }
|