@appscode/design-system 1.0.43-alpha.177 → 1.0.43-alpha.178

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/vue-components/v3/modals/LongRunningTasksModal.vue +3 -0
  3. package/vue-components/v3/terminal/LongRunningTaskTerminal.vue +137 -65
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.0.43-alpha.177",
3
+ "version": "1.0.43-alpha.178",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/vue-components/v3/modals/LongRunningTasksModal.vue CHANGED
@@ -71,6 +71,7 @@
71
71
  </ul>
72
72
  <long-running-task-terminal
73
73
  :key="activeTask?.step"
74
+ :theme="theme"
74
75
  :logs="activeTask?.logs"
75
76
  class="task-log"
76
77
  />
@@ -131,6 +132,7 @@ defineEmits(["close"]);
131
132
  const props = withDefaults(
132
133
  defineProps<{
133
134
  open: boolean;
135
+ theme: string;
134
136
  title: string;
135
137
  simple: boolean;
136
138
  natsSubject: string;
@@ -148,6 +150,7 @@ const props = withDefaults(
148
150
  }>(),
149
151
  {
150
152
  open: true,
153
+ theme: "light",
151
154
  simple: true,
152
155
  title: "Sample title",
153
156
  natsSubject: "",
package/vue-components/v3/terminal/LongRunningTaskTerminal.vue CHANGED
@@ -3,74 +3,146 @@
3
3
  </template>
4
4
 
5
5
  <script setup lang="ts">
6
- import { computed, nextTick, ref, toRefs, watch, watchPostEffect } from 'vue'
7
- import { Terminal } from 'xterm'
8
- import { FitAddon } from 'xterm-addon-fit'
9
- import { WebglAddon } from 'xterm-addon-webgl'
10
- import { Material, MaterialDark } from 'xterm-theme' //https://github.com/ysk2014/xterm-theme/tree/master/src/iterm
11
-
12
- const props = withDefaults(
13
- defineProps<{
14
- logs: string[]
15
- }>(),
16
- { logs: () => [] }
17
- )
18
- // terminal print logic
19
- const { logs } = toRefs(props)
20
- const lastPrintIdx = ref(0)
21
- watch(
22
- logs,
23
- (n) => {
24
- if (n.length > lastPrintIdx.value) {
25
- nextTick(() => {
26
- writeOnTerminal(n.slice(lastPrintIdx.value).join('\n'))
27
- lastPrintIdx.value = n.length
28
- })
29
- }
30
- },
31
- { immediate: true, deep: true }
32
- )
33
-
34
- //theme
35
- const theme = ref('light') // handle theme logic later, without the useStore function because they are different in console and kubedb ui
36
- const bodyBgc = computed(() =>
37
- theme.value === 'light' ? '#eaeaea' : '#232322'
38
- )
39
-
40
- // xterm component logic
41
- const terminalRef = ref<HTMLElement>()
42
- const terminal = new Terminal({
43
- windowsMode: false,
44
- theme: theme.value === 'light' ? Material : MaterialDark,
45
- })
46
- const fitAddon = new FitAddon()
47
- terminal.loadAddon(fitAddon)
48
- const webGlAddon = new WebglAddon()
49
- webGlAddon.onContextLoss(() => {
50
- webGlAddon.dispose()
51
- })
52
- watchPostEffect(() => {
53
- if (terminalRef.value) {
54
- terminal.open(terminalRef.value)
55
- fitAddon.fit()
56
- terminal.focus()
57
- terminal.loadAddon(webGlAddon)
58
- }
59
- })
60
- function writeOnTerminal(msg: string) {
61
- const lines = msg.split('\n')
62
- lines.forEach((line, index) => {
63
- if (lines.length === 1 || index < lines.length - 1) terminal.writeln(line)
64
- else terminal.write(line)
65
- })
6
+ import { computed, nextTick, ref, toRefs, watch, watchPostEffect } from "vue";
7
+ import { Terminal } from "xterm";
8
+ import { FitAddon } from "xterm-addon-fit";
9
+ import { WebglAddon } from "xterm-addon-webgl";
10
+ import { Material, MaterialDark } from "xterm-theme"; //https://github.com/ysk2014/xterm-theme/tree/master/src/iterm
11
+
12
+ const props = withDefaults(
13
+ defineProps<{
14
+ theme: string;
15
+ logs: string[];
16
+ }>(),
17
+ { theme: "light", logs: () => [] }
18
+ );
19
+ // terminal print logic
20
+ const { logs, theme } = toRefs(props);
21
+ const lastPrintIdx = ref(0);
22
+ watch(
23
+ logs,
24
+ (n) => {
25
+ if (n.length > lastPrintIdx.value) {
26
+ nextTick(() => {
27
+ writeOnTerminal(n.slice(lastPrintIdx.value).join("\n"));
28
+ lastPrintIdx.value = n.length;
29
+ });
30
+ }
31
+ },
32
+ { immediate: true, deep: true }
33
+ );
34
+
35
+ //theme
36
+ const bodyBgc = computed(() =>
37
+ theme.value === "light" ? "#eaeaea" : "#232322"
38
+ );
39
+
40
+ // xterm component logic
41
+ const terminalRef = ref<HTMLElement>();
42
+ const terminal = new Terminal({
43
+ windowsMode: false,
44
+ theme: theme.value === "light" ? Material : MaterialDark,
45
+ });
46
+ const fitAddon = new FitAddon();
47
+ terminal.loadAddon(fitAddon);
48
+ const webGlAddon = new WebglAddon();
49
+ webGlAddon.onContextLoss(() => {
50
+ webGlAddon.dispose();
51
+ });
52
+ watchPostEffect(() => {
53
+ if (terminalRef.value) {
54
+ terminal.open(terminalRef.value);
55
+ fitAddon.fit();
56
+ terminal.focus();
57
+ terminal.loadAddon(webGlAddon);
66
58
  }
59
+ });
60
+ function writeOnTerminal(msg: string) {
61
+ const lines = msg.split("\n");
62
+ lines.forEach((line, index) => {
63
+ if (lines.length === 1 || index < lines.length - 1) terminal.writeln(line);
64
+ else terminal.write(line);
65
+ });
66
+ }
67
67
  </script>
68
68
 
69
69
  <style lang="scss">
70
- .terminal-body {
71
- width: 100%;
72
- height: 100%;
73
- background-color: v-bind(bodyBgc);
74
- padding: 5px 0px 0px 10px;
70
+ .terminal-body {
71
+ width: 100%;
72
+ height: 100%;
73
+ background-color: v-bind(bodyBgc);
74
+ padding: 5px 0px 0px 10px;
75
+
76
+ // for terminal scroll bar style
77
+ .xterm .xterm-viewport {
78
+ &::-webkit-scrollbar {
79
+ border-radius: 50px;
80
+ width: 3px;
81
+ }
82
+
83
+ &::-moz-scrollbar {
84
+ border-radius: 50px;
85
+ width: 3px;
86
+ }
87
+
88
+ &::-ms-scrollbar {
89
+ border-radius: 50px;
90
+ width: 3px;
91
+ }
92
+
93
+ &::-webkit-scrollbar:hover {
94
+ width: 7px;
95
+ }
96
+
97
+ &::-moz-scrollbar:hover {
98
+ width: 7px;
99
+ }
100
+
101
+ &::-ms-scrollbar:hover {
102
+ width: 7px;
103
+ }
104
+
105
+ &::-webkit-scrollbar-thumb {
106
+ background-color: #929292;
107
+ border-radius: 50px;
108
+ height: 2px !important;
109
+ }
110
+
111
+ &::-moz-scrollbar-thumb {
112
+ background-color: #929292;
113
+ border-radius: 50px;
114
+ height: 2px !important;
115
+ }
116
+
117
+ &::-ms-scrollbar-thumb {
118
+ background-color: #929292;
119
+ border-radius: 50px;
120
+ height: 2px !important;
121
+ }
122
+
123
+ &::-webkit-scrollbar-thumb:hover {
124
+ background-color: #929292;
125
+ }
126
+
127
+ &::-moz-scrollbar-thumb:hover {
128
+ background-color: #929292;
129
+ }
130
+
131
+ &::-ms-scrollbar-thumb:hover {
132
+ background-color: #929292;
133
+ }
134
+
135
+ &:hover::-webkit-scrollbar-corner {
136
+ height: 40px;
137
+ }
138
+
139
+ &:hover::-moz-scrollbar-corner {
140
+ height: 40px;
141
+ }
142
+
143
+ &:hover::-ms-scrollbar-corner {
144
+ height: 40px;
145
+ }
75
146
  }
147
+ }
76
148
  </style>