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

package/package.json

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

@@ -10,7 +10,9 @@
         <ac-button
           modifier-classes="is-square is-primary"
           icon-class="copy"
-          v-clipboard:copy="`${editorTitle}: &quot;${editorContent}&quot;`"
+          v-clipboard:copy="
+            `${editorTitle}: ${JSON.stringify(parsedContent, null, 4)}`
+          "
           v-clipboard:success="onCopy"
           v-clipboard:error="onError"
         />

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/v2/table/table-cell/CellValue.vue

@@ -7,7 +7,7 @@
       :secondaryColor="secondaryColor"
     />
   </div>
-  <div v-else class="haha" ref="cellDiv">
+  <div v-else ref="cellDiv">
     <object-cell
       v-if="valueType === 'object'"
       :obj="value"
@@ -65,7 +65,8 @@ export default {
   computed: {
     valueType() {
       if (typeof this.value === "object") {
-        if (Array.isArray(this.value)) return "array";
+        if (this.value === null) return "null";
+        else if (Array.isArray(this.value)) return "array";
         else return "object";
       } else return typeof this.value;
     },

package/vue-components/v2/table/table-cell/ObjectCell.vue

@@ -68,7 +68,10 @@ export default {
     },
     printableStringObjs() {
       return this.objKeys.map((key) => {
-        const value = this.obj[key];
+        let value = this.obj[key];
+        if (typeof value === "object" && value !== null) {
+          value = JSON.stringify(value);
+        }
         const keyValue = `${key}: ${value}`;
         const exceededLength = keyValue.length > 30;
         const print = exceededLength ? key : keyValue;

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

@@ -10,7 +10,9 @@
         <ac-button
           modifier-classes="is-square is-primary"
           icon-class="copy"
-          v-clipboard:copy="`${editorTitle}: &quot;${editorContent}&quot;`"
+          v-clipboard:copy="
+            `${editorTitle}: ${JSON.stringify(parsedContent, null, 4)}`
+          "
           v-clipboard:success="onCopy"
           v-clipboard:error="onError"
         />

package/vue-components/v3/table/table-cell/CellValue.vue

@@ -8,7 +8,7 @@
       :secondaryColor="secondaryColor"
     />
   </div>
-  <div v-else class="haha" ref="cellDiv">
+  <div v-else ref="cellDiv">
     <object-cell
       v-if="valueType === 'object'"
       :obj="value"
@@ -72,7 +72,8 @@ export default defineComponent({
   computed: {
     valueType() {
       if (typeof this.value === "object") {
-        if (Array.isArray(this.value)) return "array";
+        if (this.value === null) return "null";
+        else if (Array.isArray(this.value)) return "array";
         else return "object";
       } else return typeof this.value;
     },

package/vue-components/v3/table/table-cell/ObjectCell.vue

@@ -79,7 +79,10 @@ export default defineComponent({
     },
     printableStringObjs() {
       return this.objKeys.map((key) => {
-        const value = this.obj[key];
+        let value = this.obj[key];
+        if (typeof value === "object" && value !== null) {
+          value = JSON.stringify(value);
+        }
         const keyValue = `${key}: ${value}`;
         const exceededLength = keyValue.length > 30;
         const print = exceededLength ? key : keyValue;
@@ -103,3 +106,4 @@ export default defineComponent({
   },
 });
 </script>
+