mirror of
https://github.com/frappe/books.git
synced 2025-02-12 08:58:34 +00:00
53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<Dropdown ref="dropdown" class="text-sm" :items="periodOptions" right>
|
||
|
|
<template
|
||
|
|
v-slot="{
|
||
|
|
toggleDropdown,
|
||
|
|
highlightItemUp,
|
||
|
|
highlightItemDown,
|
||
|
|
selectHighlightedItem
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="text-sm flex hover:bg-gray-100 focus:outline-none focus:bg-gray-100 items-center px-3 py-2 rounded cursor-pointer"
|
||
|
|
@click="toggleDropdown()"
|
||
|
|
tabindex="0"
|
||
|
|
@keydown.down="highlightItemDown"
|
||
|
|
@keydown.up="highlightItemUp"
|
||
|
|
@keydown.enter="selectHighlightedItem"
|
||
|
|
>
|
||
|
|
{{ value }}
|
||
|
|
<feather-icon name="chevron-down" class="ml-1 w-3 h-3" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</Dropdown>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Dropdown from '@/components/Dropdown';
|
||
|
|
export default {
|
||
|
|
name: 'PeriodSelector',
|
||
|
|
props: ['value'],
|
||
|
|
components: {
|
||
|
|
Dropdown
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
let options = ['This Year', 'This Quarter', 'This Month'];
|
||
|
|
return {
|
||
|
|
periodOptions: options.map(option => {
|
||
|
|
return {
|
||
|
|
label: option,
|
||
|
|
action: () => this.selectOption(option)
|
||
|
|
};
|
||
|
|
})
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
selectOption(value) {
|
||
|
|
this.$emit('change', value);
|
||
|
|
this.$refs.dropdown.toggleDropdown(false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|