Procházet zdrojové kódy

[ui] Vue 3 - Migrated LogsPanel component

sreenaths před 4 roky
rodič
revize
259f933793
1 změnil soubory, kde provedl 49 přidání a 37 odebrání
  1. 49 37
      desktop/core/src/desktop/js/components/LogsPanel.vue

+ 49 - 37
desktop/core/src/desktop/js/components/LogsPanel.vue

@@ -24,53 +24,65 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import Component from 'vue-class-component';
-  import { Prop, Watch } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
 
   import I18n from 'utils/i18n';
 
-  @Component({
-    methods: { I18n }
-  })
-  export default class LogsPanel extends Vue {
-    @Prop()
-    logs = '';
-    @Prop({ required: false })
-    autoScroll = true;
+  export default defineComponent({
+    props: {
+      logs: {
+        type: String,
+        default: undefined
+      },
+      autoScroll: {
+        type: Boolean,
+        default: true
+      }
+    },
 
-    ignoreNextScrollEvent = false;
-    userScrolled = false;
+    data(): {
+      ignoreNextScrollEvent: boolean;
+      userScrolled: boolean;
+    } {
+      return {
+        ignoreNextScrollEvent: false,
+        userScrolled: false
+      };
+    },
 
-    onScroll(): void {
-      if (!this.autoScroll) {
-        return;
-      }
-      const containerEl = <HTMLDivElement>this.$refs.logsContainer;
-      if (!this.ignoreNextScrollEvent && containerEl) {
-        this.userScrolled =
+    watch: {
+      logs(): void {
+        if (!this.autoScroll) {
+          return;
+        }
+        const containerEl = <HTMLDivElement>this.$refs.logsContainer;
+        if (
+          !this.userScrolled &&
           containerEl &&
-          containerEl.scrollHeight - containerEl.clientHeight - containerEl.scrollTop > 10;
+          containerEl.scrollHeight > containerEl.clientHeight
+        ) {
+          this.ignoreNextScrollEvent = true;
+          containerEl.scrollTop = containerEl.scrollHeight - containerEl.clientHeight;
+        }
       }
-      this.ignoreNextScrollEvent = false;
-    }
+    },
 
-    @Watch('logs', { immediate: true })
-    scrollToLatest(): void {
-      if (!this.autoScroll) {
-        return;
-      }
-      const containerEl = <HTMLDivElement>this.$refs.logsContainer;
-      if (
-        !this.userScrolled &&
-        containerEl &&
-        containerEl.scrollHeight > containerEl.clientHeight
-      ) {
-        this.ignoreNextScrollEvent = true;
-        containerEl.scrollTop = containerEl.scrollHeight - containerEl.clientHeight;
+    methods: {
+      I18n,
+      onScroll(): void {
+        if (!this.autoScroll) {
+          return;
+        }
+        const containerEl = <HTMLDivElement>this.$refs.logsContainer;
+        if (!this.ignoreNextScrollEvent && containerEl) {
+          this.userScrolled =
+            containerEl &&
+            containerEl.scrollHeight - containerEl.clientHeight - containerEl.scrollTop > 10;
+        }
+        this.ignoreNextScrollEvent = false;
       }
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>