浏览代码

[ui] Vue 3 - Migrated HueTable component

sreenaths 4 年之前
父节点
当前提交
b2cdaa01d9
共有 1 个文件被更改,包括 57 次插入38 次删除
  1. 57 38
      desktop/core/src/desktop/js/components/HueTable.vue

+ 57 - 38
desktop/core/src/desktop/js/components/HueTable.vue

@@ -62,50 +62,69 @@
 <!-- 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 { defineComponent, PropType, Component } from 'vue';
+
   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>
 
 <style lang="scss" scoped>