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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.124",
+  "version": "1.0.43-alpha.127",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v2/banner/Banner.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="sign-up-notification mb-20">
     <div class="notification-inner has-text-centered">
-      <h3><slot name="banner-title" /></h3>
-      <slot />
+      <h3><slot name="banner-title">Error!</slot></h3>
+      <slot><p>Oops!! There was an error while loading!</p></slot>
     </div>
   </div>
 </template>

package/vue-components/v2/editor/Editor.vue

@@ -15,12 +15,12 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap
+          enabled: calcShowMinimap,
         },
         theme: theme,
         readOnly: readOnly,
         wordWrap: wordWrap,
-        scrollBeyondLastLine: false
+        scrollBeyondLastLine: false,
       }"
     />
     <monaco-editor
@@ -31,12 +31,12 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap
+          enabled: calcShowMinimap,
         },
         theme: theme,
         readOnly: true,
         wordWrap: wordWrap,
-        scrollBeyondLastLine: false
+        scrollBeyondLastLine: false,
       }"
       :original="originalEditorContent"
       :diff-editor="true"
@@ -45,51 +45,59 @@
 </template>
 
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   props: {
     value: {
       type: String,
-      default: ""
+      default: "",
     },
     originalValue: {
       type: String,
-      default: ""
+      default: "",
     },
     readOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     language: {
       type: String,
-      default: "yaml"
+      default: "yaml",
     },
     showMinimap: {
       type: Boolean,
-      default: true
+      default: true,
     },
     editorHeight: {
       type: Number,
-      default: 40
+      default: 40,
     },
     editorTheme: {
       type: String,
-      default: ""
+      default: "",
     },
     wordWrap: {
       type: String,
-      default: "off"
+      default: "off",
     },
   },
   components: {
     EditorTabs: () => import("../tabs/EditorTabs.vue"),
-    MonacoEditor: () => import("vue-monaco")
+    MonacoEditor: () => ({
+      component: import("vue-monaco"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 20000,
+    }),
   },
 
   data() {
     return {
       activeTab: "edit",
       editorContent: "",
-      originalEditorContent: ""
+      originalEditorContent: "",
     };
   },
 
@@ -105,7 +113,7 @@ export default {
           ? "vs-dark"
           : "vs")
       );
-    }
+    },
   },
 
   watch: {
@@ -115,7 +123,7 @@ export default {
         if (this.editorContent !== n) {
           this.editorContent = n;
         }
-      }
+      },
     },
     originalValue: {
       immediate: true,
@@ -123,8 +131,8 @@ export default {
         if (this.originalEditorContent !== n) {
           this.originalEditorContent = n;
         }
-      }
-    }
+      },
+    },
   },
 
   methods: {
@@ -134,7 +142,7 @@ export default {
       editor.onDidBlurEditorText(() => {
         this.$emit("input", this.editorContent);
       });
-    }
-  }
+    },
+  },
 };
 </script>

package/vue-components/v2/editor/FilteredFileEditor.vue

@@ -48,70 +48,78 @@
   </div>
 </template>
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   components: {
-    Editor: () => import("./Editor.vue"),
+    Editor: {
+      component: () => import("./Editor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 20000,
+    },
     ResourceLoader: () => import("./../loaders/ResourceLoader.vue"),
-    SidebarLoader: () => import("./../loaders/SidebarLoader.vue")
+    SidebarLoader: () => import("./../loaders/SidebarLoader.vue"),
   },
   props: {
     searchText: {
       type: String,
-      default: ""
+      default: "",
     },
     toggleHideValue: {
       type: Boolean,
-      default: true
+      default: true,
     },
     isPreviewLoading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isEditorReadOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
     previewYamls: {
       type: Array,
       default: () => {
         [];
-      }
+      },
     },
     showMinimap: {
       type: Boolean,
-      default: false
+      default: false,
     },
     editorHeight: {
       type: Number,
-      default: 60
-    }
+      default: 60,
+    },
   },
   data() {
     return {
       activeKey: "",
-      hideValue: ""
+      hideValue: "",
     };
   },
   computed: {
     activeFile() {
       const activeFile = this.filteredYamls.find(
-        element => element.uid === this.activeKey
+        (element) => element.uid === this.activeKey
       );
       return activeFile || { content: "", format: "yaml" };
     },
     filteredYamls() {
       if (this.searchText) {
         return this.previewYamls.filter(
-          element => JSON.stringify(element).search(this.searchText) > -1
+          (element) => JSON.stringify(element).search(this.searchText) > -1
         );
       } else return this.previewYamls;
     },
     isKeyAvailable() {
-      const val = this.previewYamls.find(element => {
+      const val = this.previewYamls.find((element) => {
         return element.uid === this.activeKey;
       });
       return val === undefined ? false : true;
-    }
+    },
   },
   methods: {
     initActivePreview() {
@@ -125,7 +133,7 @@ export default {
       this.activeKey = uid;
       this.hideValue = this.activeFile.isSecret;
       this.$emit("setActiveKey", this.activeKey);
-    }
+    },
   },
   watch: {
     previewYamls: {
@@ -135,11 +143,11 @@ export default {
         if (n.length) {
           this.initActivePreview();
         }
-      }
+      },
     },
     toggleHideValue(n) {
       this.hideValue = n;
-    }
-  }
+    },
+  },
 };
 </script>

package/vue-components/v2/modals/JsonShowModal.vue

@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   props: {
     open: {
@@ -45,7 +47,13 @@ export default {
   },
   components: {
     Modal: () => import("../modal/Modal.vue"),
-    Editor: () => import("../editor/Editor.vue"),
+    Editor: () => ({
+      component: import("../editor/Editor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 20000,
+    }),
     AcButton: () => import("../button/Button.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
   },

package/vue-components/v2/preloader/Preloader.vue

@@ -19,7 +19,7 @@ export default {
     },
     message: {
       type: String,
-      default: "Fetching! Please wait for sometime..."
+      default: "Loading ..."
     }
   }
 };

package/vue-components/v3/editor/Editor.vue

@@ -46,6 +46,8 @@
 
 <script>
 import { defineComponent, defineAsyncComponent, h } from "vue";
+import Preloader from "../../v2/preloader/Preloader.vue";
+import Banner from "../../v2/banner/Banner.vue";
 export default defineComponent({
   props: {
     value: {
@@ -88,9 +90,15 @@ export default defineComponent({
     EditorTabs: defineAsyncComponent(() =>
       import("../tabs/EditorTabs.vue").then((module) => module.default)
     ),
-    MonacoEditor: defineAsyncComponent(() =>
-      import("monaco-editor-vue3").then((module) => module.default)
-    ),
+    MonacoEditor: defineAsyncComponent({
+      loader: () =>
+        import("monaco-editor-vue3").then((module) => module.default),
+
+      loadingComponent: Preloader,
+      delay: 200,
+      errorComponent: Banner,
+      timeout: 20000,
+    }),
   },
 
   data() {

package/vue-components/v3/modals/JsonShowModal.vue

@@ -30,6 +30,8 @@
 <script>
 import { defineComponent, defineAsyncComponent } from "vue";
 import { useToast } from "vue-toastification";
+import Preloader from "../../v2/preloader/Preloader.vue";
+import Banner from "../../v2/banner/Banner.vue";
 
 export default defineComponent({
   props: {
@@ -51,9 +53,14 @@ export default defineComponent({
     Modal: defineAsyncComponent(() =>
       import("../modal/Modal.vue").then((module) => module.default)
     ),
-    Editor: defineAsyncComponent(() =>
-      import("../editor/Editor.vue").then((module) => module.default)
-    ),
+    Editor: defineAsyncComponent({
+      loader: () =>
+        import("../editor/Editor.vue").then((module) => module.default),
+      loadingComponent: Preloader,
+      delay: 200,
+      errorComponent: Banner,
+      timeout: 20000,
+    }),
     AcButton: defineAsyncComponent(() =>
       import("../button/Button.vue").then((module) => module.default)
     ),