@appscode/design-system 1.0.43-alpha.124 → 1.0.43-alpha.125

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 (5) hide show
  1. package/package.json +1 -1
  2. package/vue-components/v2/banner/Banner.vue +2 -2
  3. package/vue-components/v2/editor/Editor.vue +28 -20
  4. package/vue-components/v2/preloader/Preloader.vue +1 -1
  5. package/vue-components/v3/editor/Editor.vue +11 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.0.43-alpha.124",
3
+ "version": "1.0.43-alpha.125",
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/v2/banner/Banner.vue CHANGED
@@ -1,8 +1,8 @@
1
1
  <template>
2
2
  <div class="sign-up-notification mb-20">
3
3
  <div class="notification-inner has-text-centered">
4
- <h3><slot name="banner-title" /></h3>
5
- <slot />
4
+ <h3><slot name="banner-title" />Error!</h3>
5
+ <slot><p>Oops!! There was an error while loading!</p></slot>
6
6
  </div>
7
7
  </div>
8
8
  </template>
package/vue-components/v2/editor/Editor.vue CHANGED
@@ -15,12 +15,12 @@
15
15
  :language="language"
16
16
  :options="{
17
17
  minimap: {
18
- enabled: calcShowMinimap
18
+ enabled: calcShowMinimap,
19
19
  },
20
20
  theme: theme,
21
21
  readOnly: readOnly,
22
22
  wordWrap: wordWrap,
23
- scrollBeyondLastLine: false
23
+ scrollBeyondLastLine: false,
24
24
  }"
25
25
  />
26
26
  <monaco-editor
@@ -31,12 +31,12 @@
31
31
  :language="language"
32
32
  :options="{
33
33
  minimap: {
34
- enabled: calcShowMinimap
34
+ enabled: calcShowMinimap,
35
35
  },
36
36
  theme: theme,
37
37
  readOnly: true,
38
38
  wordWrap: wordWrap,
39
- scrollBeyondLastLine: false
39
+ scrollBeyondLastLine: false,
40
40
  }"
41
41
  :original="originalEditorContent"
42
42
  :diff-editor="true"
@@ -45,51 +45,59 @@
45
45
  </template>
46
46
 
47
47
  <script>
48
+ import Preloader from "../preloader/Preloader.vue";
49
+ import Banner from "../banner/Banner.vue";
48
50
  export default {
49
51
  props: {
50
52
  value: {
51
53
  type: String,
52
- default: ""
54
+ default: "",
53
55
  },
54
56
  originalValue: {
55
57
  type: String,
56
- default: ""
58
+ default: "",
57
59
  },
58
60
  readOnly: {
59
61
  type: Boolean,
60
- default: false
62
+ default: false,
61
63
  },
62
64
  language: {
63
65
  type: String,
64
- default: "yaml"
66
+ default: "yaml",
65
67
  },
66
68
  showMinimap: {
67
69
  type: Boolean,
68
- default: true
70
+ default: true,
69
71
  },
70
72
  editorHeight: {
71
73
  type: Number,
72
- default: 40
74
+ default: 40,
73
75
  },
74
76
  editorTheme: {
75
77
  type: String,
76
- default: ""
78
+ default: "",
77
79
  },
78
80
  wordWrap: {
79
81
  type: String,
80
- default: "off"
82
+ default: "off",
81
83
  },
82
84
  },
83
85
  components: {
84
86
  EditorTabs: () => import("../tabs/EditorTabs.vue"),
85
- MonacoEditor: () => import("vue-monaco")
87
+ MonacoEditor: () => ({
88
+ component: import("vue-monaco"),
89
+ loading: Preloader,
90
+ delay: 200,
91
+ error: Banner,
92
+ timeout: 20000,
93
+ }),
86
94
  },
87
95
 
88
96
  data() {
89
97
  return {
90
98
  activeTab: "edit",
91
99
  editorContent: "",
92
- originalEditorContent: ""
100
+ originalEditorContent: "",
93
101
  };
94
102
  },
95
103
 
@@ -105,7 +113,7 @@ export default {
105
113
  ? "vs-dark"
106
114
  : "vs")
107
115
  );
108
- }
116
+ },
109
117
  },
110
118
 
111
119
  watch: {
@@ -115,7 +123,7 @@ export default {
115
123
  if (this.editorContent !== n) {
116
124
  this.editorContent = n;
117
125
  }
118
- }
126
+ },
119
127
  },
120
128
  originalValue: {
121
129
  immediate: true,
@@ -123,8 +131,8 @@ export default {
123
131
  if (this.originalEditorContent !== n) {
124
132
  this.originalEditorContent = n;
125
133
  }
126
- }
127
- }
134
+ },
135
+ },
128
136
  },
129
137
 
130
138
  methods: {
@@ -134,7 +142,7 @@ export default {
134
142
  editor.onDidBlurEditorText(() => {
135
143
  this.$emit("input", this.editorContent);
136
144
  });
137
- }
138
- }
145
+ },
146
+ },
139
147
  };
140
148
  </script>
package/vue-components/v2/preloader/Preloader.vue CHANGED
@@ -19,7 +19,7 @@ export default {
19
19
  },
20
20
  message: {
21
21
  type: String,
22
- default: "Fetching! Please wait for sometime..."
22
+ default: "Loading ..."
23
23
  }
24
24
  }
25
25
  };
package/vue-components/v3/editor/Editor.vue CHANGED
@@ -46,6 +46,8 @@
46
46
 
47
47
  <script>
48
48
  import { defineComponent, defineAsyncComponent, h } from "vue";
49
+ import Preloader from "../../v2/preloader/Preloader.vue";
50
+ import Banner from "../../v2/banner/Banner.vue";
49
51
  export default defineComponent({
50
52
  props: {
51
53
  value: {
@@ -88,9 +90,15 @@ export default defineComponent({
88
90
  EditorTabs: defineAsyncComponent(() =>
89
91
  import("../tabs/EditorTabs.vue").then((module) => module.default)
90
92
  ),
91
- MonacoEditor: defineAsyncComponent(() =>
92
- import("monaco-editor-vue3").then((module) => module.default)
93
- ),
93
+ MonacoEditor: defineAsyncComponent({
94
+ loader: () =>
95
+ import("monaco-editor-vue3").then((module) => module.default),
96
+
97
+ loadingComponent: Preloader,
98
+ delay: 200,
99
+ errorComponent: Banner,
100
+ timeout: 20000,
101
+ }),
94
102
  },
95
103
 
96
104
  data() {