@appscode/design-system 1.0.43-alpha.20 → 1.0.43-alpha.201

package/vue-components/v3/terminal/LongRunningTaskTerminal.vue

@@ -0,0 +1,148 @@
+<template>
+  <div ref="terminalRef" class="terminal-body"></div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, toRefs, watch, watchPostEffect } from "vue";
+import { Terminal } from "xterm";
+import { FitAddon } from "xterm-addon-fit";
+import { WebglAddon } from "xterm-addon-webgl";
+import { Material, MaterialDark } from "xterm-theme"; //https://github.com/ysk2014/xterm-theme/tree/master/src/iterm
+
+const props = withDefaults(
+  defineProps<{
+    theme: string;
+    logs: string[];
+  }>(),
+  { theme: "light", logs: () => [] }
+);
+// terminal print logic
+const { logs, theme } = toRefs(props);
+const lastPrintIdx = ref(0);
+watch(
+  logs,
+  (n) => {
+    if (n.length > lastPrintIdx.value) {
+      nextTick(() => {
+        writeOnTerminal(n.slice(lastPrintIdx.value).join("\n"));
+        lastPrintIdx.value = n.length;
+      });
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+//theme
+const bodyBgc = computed(() =>
+  theme.value === "light" ? "#eaeaea" : "#232322"
+);
+
+// xterm component logic
+const terminalRef = ref<HTMLElement>();
+const terminal = new Terminal({
+  windowsMode: false,
+  theme: theme.value === "light" ? Material : MaterialDark,
+});
+const fitAddon = new FitAddon();
+terminal.loadAddon(fitAddon);
+const webGlAddon = new WebglAddon();
+webGlAddon.onContextLoss(() => {
+  webGlAddon.dispose();
+});
+watchPostEffect(() => {
+  if (terminalRef.value) {
+    terminal.open(terminalRef.value);
+    fitAddon.fit();
+    terminal.focus();
+    terminal.loadAddon(webGlAddon);
+  }
+});
+function writeOnTerminal(msg: string) {
+  const lines = msg.split("\n");
+  lines.forEach((line, index) => {
+    if (lines.length === 1 || index < lines.length - 1) terminal.writeln(line);
+    else terminal.write(line);
+  });
+}
+</script>
+
+<style lang="scss">
+.terminal-body {
+  width: 100%;
+  height: 100%;
+  background-color: v-bind(bodyBgc);
+  padding: 5px 0px 0px 10px;
+
+  // for terminal scroll bar style
+  .xterm .xterm-viewport {
+    &::-webkit-scrollbar {
+      border-radius: 50px;
+      width: 3px;
+    }
+
+    &::-moz-scrollbar {
+      border-radius: 50px;
+      width: 3px;
+    }
+
+    &::-ms-scrollbar {
+      border-radius: 50px;
+      width: 3px;
+    }
+
+    &::-webkit-scrollbar:hover {
+      width: 7px;
+    }
+
+    &::-moz-scrollbar:hover {
+      width: 7px;
+    }
+
+    &::-ms-scrollbar:hover {
+      width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #929292;
+      border-radius: 50px;
+      height: 2px !important;
+    }
+
+    &::-moz-scrollbar-thumb {
+      background-color: #929292;
+      border-radius: 50px;
+      height: 2px !important;
+    }
+
+    &::-ms-scrollbar-thumb {
+      background-color: #929292;
+      border-radius: 50px;
+      height: 2px !important;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #929292;
+    }
+
+    &::-moz-scrollbar-thumb:hover {
+      background-color: #929292;
+    }
+
+    &::-ms-scrollbar-thumb:hover {
+      background-color: #929292;
+    }
+
+    &:hover::-webkit-scrollbar-corner {
+      height: 40px;
+    }
+
+    &:hover::-moz-scrollbar-corner {
+      height: 40px;
+    }
+
+    &:hover::-ms-scrollbar-corner {
+      height: 40px;
+    }
+  }
+}
+</style>