[ui] Vue 3 - Migrated ColumnSelectorPanel component
</template>
<script lang="ts">
+ import { defineComponent, PropType } from 'vue';
+
import HueButton from './HueButton.vue';
- import Vue from 'vue';
- import Component from 'vue-class-component';
- import { Prop } from 'vue-property-decorator';
import { Column } from 'components/HueTable';
interface SelectableColumn {
checked: boolean;
}
- @Component({
- components: { HueButton }
- })
- export default class ColumnSelectorPanel extends Vue {
- @Prop({ required: true })
- columns!: Column<unknown>[];
- @Prop({ required: true })
- visibleColumns!: Column<unknown>[];
+ export default defineComponent({
+ components: { HueButton },
- get selectableColumns(): SelectableColumn[] {
- const visibleColsSet = new Set<Column<unknown>>(this.visibleColumns);
- return this.columns.map(column => ({ column, checked: visibleColsSet.has(column) }));
+ props: {
+ columns: {
+ type: Object as PropType<Column<unknown>[]>,
+ required: true
+ },
+ visibleColumns: {
+ type: Object as PropType<Column<unknown>[]>,
+ required: true
}
+ },
+
+ emits: ['update:visible-columns'],
- filterText = '';
+ data(): {
+ filterText: string;
+ } {
+ return {
+ filterText: ''
+ };
+ },
- get columnsWithLabels(): SelectableColumn[] {
+ computed: {
+ selectableColumns(): SelectableColumn[] {
+ const visibleColsSet = new Set<Column<unknown>>(this.visibleColumns);
+ return this.columns.map(column => ({ column, checked: visibleColsSet.has(column) }));
+ },
+
+ columnsWithLabels(): SelectableColumn[] {
return this.selectableColumns.filter(column => column.column.label);
- }
+ },
- get filteredColumns(): SelectableColumn[] {
+ filteredColumns(): SelectableColumn[] {
if (!this.filterText) {
return this.columnsWithLabels;
}
col => col.column.label.toLowerCase().indexOf(lowerFilter) !== -1
);
}
+ },
+ methods: {
apply(): void {
this.$emit(
'update:visible-columns',
);
}
}
+ });
</script>
<style lang="scss" scoped>
