File size: 1,861 Bytes
76a7a50 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <!--
Matomo - free/libre analytics platform
@link https://matomo.org
@license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
-->
<template>
<div
ref="root"
class="metrics-picker"
v-expand-on-click="{ expander: 'expander' }"
>
<button
ref="expander"
type="button"
class="metrics-picker__toggle"
>
<span class="metrics-picker__toggle-label">{{ translate('General_ChooseMetrics') }}</span>
<span class="icon-chevron-down metrics-picker__chevron" />
</button>
<div class="metrics-picker__dropdown">
<MetricsPickerOptions
:multiselect="multiselect"
:selectable-columns="selectableColumns"
:selectable-rows="selectableRows"
:selected-columns="selectedColumns"
:selected-rows="selectedRows"
@select="onSelect($event)"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { ExpandOnClick } from 'CoreHome';
import MetricsPickerOptions from './MetricsPickerOptions.vue';
interface SelectedOptions {
columns: string[];
rows: string[];
}
export default defineComponent({
props: {
multiselect: Boolean,
selectableColumns: {
type: Array,
default: () => [],
},
selectableRows: {
type: Array,
default: () => [],
},
selectedColumns: {
type: Array,
default: () => [],
},
selectedRows: {
type: Array,
default: () => [],
},
},
components: {
MetricsPickerOptions,
},
directives: {
ExpandOnClick,
},
emits: ['select'],
methods: {
onSelect(selected: SelectedOptions) {
this.$emit('select', selected);
// selecting a metric applies the change and closes the dropdown
(this.$refs.root as HTMLElement).classList.remove('expanded');
},
},
});
</script>
|