|
@@ -62,50 +62,69 @@
|
|
|
<!-- eslint-enable vue/no-v-html -->
|
|
<!-- eslint-enable vue/no-v-html -->
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
- import Vue from 'vue';
|
|
|
|
|
- import Component from 'vue-class-component';
|
|
|
|
|
- import { Prop } from 'vue-property-decorator';
|
|
|
|
|
|
|
+ import { defineComponent, PropType, Component } from 'vue';
|
|
|
|
|
+
|
|
|
import { Column, Row } from './HueTable';
|
|
import { Column, Row } from './HueTable';
|
|
|
|
|
|
|
|
- @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;
|
|
|
|
|
-
|
|
|
|
|
- hasCellSlot(column: Column<T>): boolean {
|
|
|
|
|
- return !!this.$scopedSlots[this.cellSlotName(column)];
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ 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
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
- cellSlotName(column: Column<T>): string {
|
|
|
|
|
- return 'cell-' + column.key;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ emits: ['scroll-to-end', 'row-clicked'],
|
|
|
|
|
|
|
|
- onContainerScroll(): void {
|
|
|
|
|
- const containerEl = <HTMLElement>this.$refs.tableContainer;
|
|
|
|
|
- if (containerEl.scrollHeight === containerEl.scrollTop + containerEl.clientHeight) {
|
|
|
|
|
- this.$emit('scroll-to-end');
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ hasCellSlot(column: Column<T>): boolean {
|
|
|
|
|
+ return !!this.$slots[this.cellSlotName(column)];
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
- cellClass(cellClass: string | undefined, index: number): string | null {
|
|
|
|
|
- // This prevents rendering of empty class="" for :class="[x,y]" when x and y are undefined
|
|
|
|
|
- // Possibly fixed in Vue 3
|
|
|
|
|
- if (cellClass && this.stickyFirstColumn && index === 0) {
|
|
|
|
|
- return `${cellClass} sticky-first-col`;
|
|
|
|
|
- } else if (this.stickyFirstColumn && index === 0) {
|
|
|
|
|
- return 'sticky-first-col';
|
|
|
|
|
|
|
+ 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
|
|
|
|
|
+ // Possibly fixed in Vue 3
|
|
|
|
|
+ if (cellClass && this.stickyFirstColumn && index === 0) {
|
|
|
|
|
+ return `${cellClass} sticky-first-col`;
|
|
|
|
|
+ } else if (this.stickyFirstColumn && index === 0) {
|
|
|
|
|
+ return 'sticky-first-col';
|
|
|
|
|
+ }
|
|
|
|
|
+ return cellClass || null;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- return cellClass || null;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ });
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|