fix: console text selection

components.d.ts

@@ -14,6 +14,7 @@ declare module 'vue' {
     ActionCommandPromptDialog: typeof import('./src/components/common/ActionCommandPromptDialog.vue')['default']
     AddInstanceDialog: typeof import('./src/components/common/AddInstanceDialog.vue')['default']
     AppAnnouncementDismissMenu: typeof import('./src/components/layout/AppAnnouncementDismissMenu.vue')['default']
+    AppAutoScrollContainer: typeof import('./src/components/ui/AppAutoScrollContainer.vue')['default']
     AppBar: typeof import('./src/components/layout/AppBar.vue')['default']
     AppBtn: typeof import('./src/components/ui/AppBtn.vue')['default']
     AppBtnCollapse: typeof import('./src/components/ui/AppBtnCollapse.vue')['default']

package.json

@@ -64,7 +64,6 @@
     "vue-meta": "^2.4.0",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.6.5",
-    "vue-virtual-scroller": "^1.1.2",
     "vue2-touch-events": "^3.2.3",
     "vuetify": "^2.7.2",
     "vuetify-confirm": "^2.0.6",

src/components/common/UpdatingDialog.vue

@@ -11,7 +11,6 @@
       <console
         :items="responses"
         :fullscreen="isMobileViewport"
-        :height="250"
         readonly
       />
     </v-card-text>

src/components/layout/AppObservedColumn.vue

@@ -37,10 +37,8 @@ export default class AppObservedColumn extends Vue {
   }
 
   beforeDestroy () {
-    if (this.observer) {
-      this.observer.disconnect()
-      this.observer = null
-    }
+    this.observer?.disconnect()
+    this.observer = null
   }
 }
 </script>

src/components/ui/AppAutoScrollContainer.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    ref="box"
+    class="app-auto-scroll-container"
+    @scroll="updateAutoScrollPaused"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Ref, Vue, Watch } from 'vue-property-decorator'
+import { markRaw } from 'vue'
+
+@Component
+export default class AppAutoScrollContainer extends Vue {
+  @Prop({ type: Boolean })
+  readonly reversed?: boolean
+
+  @Ref('box')
+  readonly box!: HTMLElement
+
+  autoScrollPaused = false
+  resizeObserver: ResizeObserver | null = null
+
+  @Watch('reversed')
+  onReversed () {
+    this.scrollToLatest(true)
+  }
+
+  @Watch('autoScrollPaused')
+  onAutoScrollPaused (value: boolean) {
+    this.$emit('update:auto-scroll-paused', value)
+  }
+
+  mounted () {
+    this.scrollToLatest()
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = markRaw(new ResizeObserver(() => this.updateAutoScrollPaused()))
+      this.resizeObserver.observe(this.box)
+    }
+  }
+
+  updated () {
+    this.scrollToLatest()
+  }
+
+  beforeDestroy () {
+    this.resizeObserver?.disconnect()
+    this.resizeObserver = null
+  }
+
+  private updateAutoScrollPaused () {
+    this.autoScrollPaused = (
+      this.reversed
+        ? this.getScrollTop()
+        : this.getScrollBottom()
+    ) > 1
+  }
+
+  scrollToLatest (force?: boolean) {
+    if (
+      !force &&
+      this.autoScrollPaused
+    ) {
+      return
+    }
+
+    this.$nextTick(() => {
+      this.setScrollTop(
+        this.reversed
+          ? 0
+          : this.box.scrollHeight
+      )
+      this.autoScrollPaused = false
+    })
+  }
+
+  private getScrollTop () {
+    return this.box.scrollTop
+  }
+
+  private setScrollTop (value: number) {
+    this.box.scrollTop = value
+  }
+
+  private getScrollBottom () {
+    const { scrollTop, scrollHeight, clientHeight } = this.box
+
+    return scrollHeight - clientHeight - scrollTop
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .app-auto-scroll-container {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+</style>