@appscode/design-system 1.0.43-alpha.140 → 1.0.43-alpha.141

package/package.json

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

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

@@ -7,7 +7,7 @@
           v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
           class="left-content"
         >
-          <div class="ac-files">
+          <div class="ac-files pt-0">
             <ul v-if="!isPreviewLoading">
               <li
                 v-for="(previewYaml, idx) in filteredYamls"
@@ -25,12 +25,20 @@
                 </a>
               </li>
             </ul>
-            <sidebar-loader v-else />
+            <sidebar-loader
+              v-else
+              :primaryLoaderColor="primaryLoaderColor"
+              :secondaryLoaderColor="secondaryLoaderColor"
+            />
           </div>
         </div>
         <div class="right-content">
           <div class="right-content">
-            <resource-loader v-if="isPreviewLoading" />
+            <resource-loader
+              v-if="isPreviewLoading"
+              :primaryLoaderColor="primaryLoaderColor"
+              :secondaryLoaderColor="secondaryLoaderColor"
+            />
             <editor
               v-else-if="!isPreviewLoading && !hideValue"
               v-model="activeFile.content"
@@ -39,6 +47,8 @@
               :read-only="isEditorReadOnly"
               :editor-height="editorHeight"
               :show-minimap="showMinimap"
+              :editor-theme="editorTheme"
+              :key="editorTheme"
             />
             <span v-else> *************** </span>
           </div>
@@ -92,6 +102,16 @@ export default {
     editorHeight: {
       type: Number,
       default: 60
+    },
+    loaderColor: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    theme: {
+      type: String,
+      default: "light"
     }
   },
   data() {
@@ -107,12 +127,21 @@ export default {
       );
       return activeFile || { content: "", format: "yaml" };
     },
-    originalValue(){
+    originalValue() {
       const activeFile = this.filteredYamls.find(
         element => element.uid === this.activeKey
       );
       return (activeFile && activeFile.initContent) || "";
     },
+    editorTheme() {
+      return this.theme === "dark" ? "vs-dark" : "vs";
+    },
+    primaryLoaderColor() {
+      return this.loaderColor.primaryLoaderColor;
+    },
+    secondaryLoaderColor() {
+      return this.loaderColor.secondaryLoaderColor;
+    },
     filteredYamls() {
       if (this.searchText) {
         return this.previewYamls.filter(

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

@@ -62,6 +62,9 @@
         :preview-yamls="previewYamls"
         :show-minimap="showMinimap"
         :editor-height="editorHeight"
+        :loader-color="loaderColor"
+        :theme="theme"
+        :key="theme"
         @setActiveKey="setActiveKey"
       />
     </template>
@@ -127,6 +130,16 @@ export default {
     hideHeader: {
       type: Boolean,
       default: false
+    },
+    loaderColor: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    theme: {
+      type: String,
+      default: "light"
     }
   },
   data() {

package/vue-components/v2/loaders/ResourceLoader.vue

@@ -4,7 +4,8 @@
       :width="100"
       :height="40"
       :speed="2"
-      :primaryColor="'#f5f7f9'"
+      :primaryColor="primaryLoaderColor"
+      :secondaryColor="secondaryLoaderColor"
     >
       <rect x="1" y="1" rx="1" ry="1" width="14" height="1" />
       <rect x="17" y="1" rx="1" ry="1" width="13" height="1" />
@@ -84,7 +85,17 @@ import { ContentLoader } from "vue-content-loader";
 
 export default {
   components: {
-    ContentLoader,
+    ContentLoader
   },
+  props: {
+    primaryLoaderColor: {
+      type: String,
+      default: "#f5f7f9"
+    },
+    secondaryLoaderColor: {
+      type: String,
+      default: "#ecebeb"
+    }
+  }
 };
 </script>

package/vue-components/v2/loaders/SidebarLoader.vue

@@ -4,7 +4,8 @@
       :width="100"
       :height="175"
       :speed="2"
-      :primaryColor="'#dcdee6'"
+      :primaryColor="primaryLoaderColor"
+      :secondaryColor="secondaryLoaderColor"
     >
       <rect x="2" y="1" rx="3" ry="3" width="96" height="20" />
       <rect x="15" y="23" rx="3" ry="3" width="83" height="15" />
@@ -26,7 +27,17 @@ import { ContentLoader } from "vue-content-loader";
 
 export default {
   components: {
-    ContentLoader,
+    ContentLoader
   },
+  props: {
+    primaryLoaderColor: {
+      type: String,
+      default: "#f5f7f9"
+    },
+    secondaryLoaderColor: {
+      type: String,
+      default: "#ecebeb"
+    }
+  }
 };
 </script>

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

@@ -7,7 +7,7 @@
           v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
           class="left-content"
         >
-          <div class="ac-files">
+          <div class="ac-files pt-0">
             <ul v-if="!isPreviewLoading">
               <li
                 v-for="(previewYaml, idx) in filteredYamls"
@@ -114,7 +114,7 @@ export default defineComponent({
       );
       return activeFile || { content: "", format: "yaml" };
     },
-    originalValue(){
+    originalValue() {
       const activeFile = this.filteredYamls.find(
         element => element.uid === this.activeKey
       );