[ui] Vue 3 - Migrated HueTable component
<!-- eslint-enable vue/no-v-html -->
<script lang="ts">
- import Vue from 'vue';
- import Component from 'vue-class-component';
- import { Prop } from 'vue-property-decorator';
- import { Column, Row } from './HueTable';
+ import { defineComponent, PropType, Component } from 'vue';
- @Component
- export default class HueTable<T> extends Vue {
- @Prop({ required: false, default: () => [] })
- rows?: Row[];
- @Prop({ required: false, default: () => [] })
- columns?: Column<T>[];
- @Prop()
- caption?: string;
- @Prop({ required: false, default: false })
- stickyHeader?: boolean;
- @Prop({ required: false, default: false })
- stickyFirstColumn?: boolean;
+ import { Column, Row } from './HueTable';
+ export default <T>(): Component =>
+ defineComponent({
+ props: {
+ rows: {
+ type: Object as PropType<Row[]>,
+ required: false,
+ default: () => []
+ },
+ columns: {
+ type: Object as PropType<Column<T>[]>,
+ required: false,
+ default: () => []
+ },
+ caption: {
+ type: String,
+ default: undefined
+ },
+ stickyHeader: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
+ stickyFirstColumn: {
+ type: Boolean,
+ required: false,
+ default: false
+ }
+ },
+
+ emits: ['scroll-to-end', 'row-clicked'],
+
+ methods: {
hasCellSlot(column: Column<T>): boolean {
- return !!this.$scopedSlots[this.cellSlotName(column)];
- }
+ return !!this.$slots[this.cellSlotName(column)];
+ },
cellSlotName(column: Column<T>): string {
return 'cell-' + column.key;
- }
+ },
onContainerScroll(): void {
const containerEl = <HTMLElement>this.$refs.tableContainer;
if (containerEl.scrollHeight === containerEl.scrollTop + containerEl.clientHeight) {
this.$emit('scroll-to-end');
}
- }
+ },
cellClass(cellClass: string | undefined, index: number): string | null {
// This prevents rendering of empty class="" for :class="[x,y]" when x and y are undefined
return cellClass || null;
}
}
+ });
</script>
<style lang="scss" scoped>
