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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.126",
+  "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/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/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)
     ),