@appscode/design-system 1.0.43-alpha.111 → 1.0.43-alpha.114

package/base/utilities/_default.scss

@@ -565,6 +565,11 @@ button {
   &.is-warning {
     background-color: $ac-warning;
     color: $ac-white !important;
+
+    &.is-light {
+      background-color: #f7ac2a75;
+      color: $ac-warning;
+    }
   }
 
   &.is-danger {
@@ -950,8 +955,6 @@ $border_color_4: transparent transparent #585d6e transparent;
 // Status css
 // ac-footer sticky end
 
-
-
 // terminal scss end
 .is-dark-theme {
   a {

package/package.json

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

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

@@ -93,7 +93,7 @@ export default {
       const activeFile = this.filteredYamls.find(
         element => element.uid === this.activeKey
       );
-      return activeFile || { content: "No resource available", format: "yaml" };
+      return activeFile || { content: "", format: "yaml" };
     },
     filteredYamls() {
       if (this.searchText) {
@@ -101,13 +101,21 @@ export default {
           element => JSON.stringify(element).search(this.searchText) > -1
         );
       } else return this.previewYamls;
+    },
+    isKeyAvailable() {
+      const val = this.previewYamls.find(element => {
+        return element.uid === this.activeKey;
+      });
+      return val === undefined ? false : true;
     }
   },
   methods: {
     initActivePreview() {
-      this.activeKey = this.previewYamls[0].uid;
-      this.hideValue = this.activeFile.isSecret;
-      this.$emit("setActiveKey", this.activeKey);
+      if (!this.isKeyAvailable) {
+        this.activeKey = this.previewYamls[0].uid;
+        this.hideValue = this.activeFile.isSecret;
+        this.$emit("setActiveKey", this.activeKey);
+      }
     },
     setActivePreview(uid) {
       this.activeKey = uid;

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

@@ -1,7 +1,11 @@
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
-    <content-loader :height="10" :width="computedCellWidth || 300" :primaryColor="primaryColor"
-    :secondaryColor="secondaryColor" />
+    <content-loader
+      :height="10"
+      :width="computedCellWidth || 300"
+      :primaryColor="primaryColor"
+      :secondaryColor="secondaryColor"
+    />
   </div>
   <div v-else class="haha" ref="cellDiv">
     <object-cell
@@ -17,7 +21,7 @@
       :max-character-length="maxCharacterLength"
     />
     <template v-else>
-      <span class="is-ellipsis-1" :title="value">{{
+      <span class="is-ellipsis-1" :title="tooltip">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>
@@ -25,7 +29,12 @@
 </template>
 
 <script>
-import {loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor} from "@appscode/design-system/plugins/theme";
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
 
 export default {
   props: {
@@ -41,6 +50,10 @@ export default {
       type: null,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: "",
+    },
   },
   components: {
     ContentLoader: () =>
@@ -60,11 +73,15 @@ export default {
       return Math.ceil(this.computedCellWidth / 8);
     },
     primaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemePrimaryColor
+        : loaderLightThemePrimaryColor;
     },
     secondaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
-    }
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemeSecondaryColor
+        : loaderLightThemeSecondaryColor;
+    },
   },
 
   data() {

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

@@ -22,7 +22,7 @@
       :max-character-length="maxCharacterLength"
     />
     <template v-else>
-      <span class="is-ellipsis-1" :title="value">{{
+      <span class="is-ellipsis-1" :title="tooltip">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>
@@ -31,7 +31,12 @@
 
 <script>
 import { defineComponent, defineAsyncComponent } from "vue";
-import { loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor } from "@appscode/design-system/plugins/theme";
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
 
 export default defineComponent({
   props: {
@@ -47,6 +52,10 @@ export default defineComponent({
       type: null,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: "",
+    },
   },
   components: {
     ContentLoader: defineAsyncComponent(() =>
@@ -71,11 +80,15 @@ export default defineComponent({
       return Math.ceil(this.computedCellWidth / 8);
     },
     primaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemePrimaryColor
+        : loaderLightThemePrimaryColor;
     },
     secondaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
-    }
+      return document.documentElement.classList.contains("is-dark-theme")
+        ? loaderDarkThemeSecondaryColor
+        : loaderLightThemeSecondaryColor;
+    },
   },
 
   data() {