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

package/package.json

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

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/sidebar/SidebarItemWithDropDown.vue

@@ -10,7 +10,7 @@
       </span>
     </a>
 
-    <ul :ref="title" :style="{ maxHeight: dropDownSectionHeight }">
+    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight }">
       <slot />
     </ul>
   </li>
@@ -23,10 +23,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
     title: {
       type: String,
       default: "Sidebar Item",
@@ -41,27 +37,32 @@ export default {
     return {
       dropDownStatus: "close",
       dropDownSectionHeight: null,
+      isCompMounted: false,
     };
   },
 
-  watch: {
-    isLoaderActive(n) {
-      if (!n) {
-        this.$nextTick(() => {
-          // for expanding dropdown
-          this.setDropdownMaxHeight("open");
-        });
+  mounted() {
+    this.isCompMounted = true;
+    setTimeout(() => {
+      // for expanding dropdown
+      if (this.isDropDownOpen) {
+        this.setDropdownMaxHeight("open");
+      } else {
+        this.setDropdownMaxHeight("close");
       }
-    },
+    }, 700);
+  },
+
+  watch: {
     title(n, o) {
-      if (n && !this.isLoaderActive) {
+      if (n && this.isCompMounted) {
         this.$nextTick(() => {
           // for expanding dropdown
           this.setDropdownMaxHeight("open");
         });
       }
 
-      if (o && !this.isLoaderActive) {
+      if (o && this.isCompMounted) {
         this.$nextTick(() => {
           // for expanding dropdown
           this.setDropdownMaxHeight("close");
@@ -84,7 +85,7 @@ export default {
           this.$emit("dropDownItemChange");
 
           this.$nextTick(() => {
-            const dropDownUl = this.$refs[this.title];
+            const dropDownUl = this.$refs["sectionItems"];
             if (dropDownUl)
               this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
           });
@@ -99,11 +100,9 @@ export default {
   methods: {
     setDropdownMaxHeight(mode) {
       if (mode === "open") {
-        this.$refs[this.title][0].style.maxHeight = `${
-          this.$refs[this.title][0].scrollHeight
-        }px`;
+        this.dropDownSectionHeight = `${this.$refs["sectionItems"].scrollHeight}px`;
       } else {
-        this.$refs[this.title][0].style.maxHeight = null;
+        this.dropDownSectionHeight = null;
       }
     },
     toggleDropDownStatus() {

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

@@ -7,7 +7,6 @@
     />
     <monaco-editor
       v-if="activeTab === 'edit'"
-      ref="monacoEditor"
       @editorDidMount="onEditorMount"
       key="edit"
       :class="`vh-${editorHeight} is-clipped`"
@@ -16,12 +15,12 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap
+          enabled: calcShowMinimap,
         },
         theme: theme,
         readOnly: readOnly,
         wordWrap: wordWrap,
-        scrollBeyondLastLine: false
+        scrollBeyondLastLine: false,
       }"
     />
     <monaco-editor
@@ -32,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"
@@ -51,35 +50,35 @@ export default defineComponent({
   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",
     },
   },
 
@@ -87,23 +86,18 @@ export default defineComponent({
 
   components: {
     EditorTabs: defineAsyncComponent(() =>
-      import("../tabs/EditorTabs.vue").then(module => module.default)
+      import("../tabs/EditorTabs.vue").then((module) => module.default)
     ),
     MonacoEditor: defineAsyncComponent(() =>
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      import("vue-monaco").then(module => {
-        module.default.render = () => h("div");
-        return module.default;
-      })
-    )
+      import("monaco-editor-vue3").then((module) => module.default)
+    ),
   },
 
   data() {
     return {
       activeTab: "edit",
       editorContent: "",
-      originalEditorContent: ""
+      originalEditorContent: "",
     };
   },
 
@@ -119,7 +113,7 @@ export default defineComponent({
           ? "vs-dark"
           : "vs")
       );
-    }
+    },
   },
 
   watch: {
@@ -129,7 +123,7 @@ export default defineComponent({
         if (this.editorContent !== n) {
           this.editorContent = n;
         }
-      }
+      },
     },
     originalValue: {
       immediate: true,
@@ -137,21 +131,20 @@ export default defineComponent({
         if (this.originalEditorContent !== n) {
           this.originalEditorContent = n;
         }
-      }
-    }
+      },
+    },
   },
 
   methods: {
     onChange(e) {
       if (typeof e === "string") this.editorContent = e;
     },
-    onEditorMount() {
-      const editor = this.$refs.monacoEditor.getEditor();
+    onEditorMount(editor) {
       // add event listeners
       editor.onDidBlurEditorText(() => {
         this.$emit("update:modelValue", this.editorContent);
       });
-    }
-  }
+    },
+  },
 });
 </script>

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>
+