@appscode/design-system 2.0.59 → 2.0.61

package/vue-components/styles/layouts/_code-preview.scss

@@ -58,13 +58,13 @@
 
       /* Handle */
       &::-webkit-scrollbar-thumb {
-        background-color: $black-50;
+        background-color: $gray-50;
         border-radius: 10px;
       }
 
       /* Handle on hover */
       &::-webkit-scrollbar-thumb:hover {
-        background-color: $black-50;
+        background-color: $gray-50;
       }
 
       .number {

package/vue-components/v2/breadcrumbs/Breadcrumb.vue

@@ -2,15 +2,8 @@
   <div class="ac-breadcrumb">
     <nav aria-label="breadcrumbs" class="breadcrumb">
       <ul>
-        <li
-          v-for="(item, idx) in list"
-          :key="idx"
-          :class="{ 'is-active': idx === list.length - 1 }"
-        >
-          <router-link
-            class="router-link-active"
-            :class="{ 'is-active': idx === list.length - 1 }"
-            :to="item.path"
+        <li v-for="(item, idx) in list" :key="idx" :class="{ 'is-active': idx === list.length - 1 }">
+          <router-link class="router-link-active" :class="{ 'is-active': idx === list.length - 1 }" :to="item.path"
             >{{ item.name }}
           </router-link>
         </li>
@@ -22,15 +15,13 @@
 export default {
   data() {
     return {
-      list: []
+      list: [],
     };
   },
   methods: {
     createBreadcrumbs(n) {
       //Adding dynamic path to the route
-      const listPaths = this.$route.matched.map(element =>
-        this.pathReplaceWithParam(element.path)
-      );
+      const listPaths = this.$route.matched.map((element) => this.pathReplaceWithParam(element.path));
 
       //Removing the last duplicate value from the listpaths array
       listPaths.pop();
@@ -42,37 +33,33 @@ export default {
       this.list = listName.map((element, index) => {
         return {
           name: element,
-          path: listPaths[index]
+          path: listPaths[index],
         };
       });
     },
     pathReplaceWithParam(path) {
       //Split the path and remove the first and last empty block
-      let splitPath = path.split("/").filter(element => element !== "");
+      let splitPath = path.split("/").filter((element) => element !== "");
 
       //Replace all element with query params where the element start with ":"
       // Then again add them wthi "/" and return the path value
       return splitPath.reduce((pval, cval) => {
         if (cval[0] === ":") {
-          const cutIndex =
-            cval.indexOf("?") !== -1 ? cval.indexOf("?") : cval.length;
+          const cutIndex = cval.indexOf("?") !== -1 ? cval.indexOf("?") : cval.length;
           return (pval += this.$route.params[cval.slice(1, cutIndex)] + "/");
         } else return (pval += cval + "/");
       }, "/");
     },
     createList(paths) {
       //Split all the path and remove all empty block
-      let spath = paths.map(element => {
-        return element.split("/").filter(word => word !== "");
+      let spath = paths.map((element) => {
+        return element.split("/").filter((word) => word !== "");
       });
 
       // Convert all the path arry in one arry where each element is the  different fo previous element
       return spath.reduce((prev, curr, currentIdx) => {
         if (currentIdx === 0) return prev.concat([this.createVal(0, curr)]);
-        else
-          return prev.concat([
-            this.createVal(spath[currentIdx - 1].length, curr)
-          ]);
+        else return prev.concat([this.createVal(spath[currentIdx - 1].length, curr)]);
       }, []);
     },
     createVal(startIdx, paths) {
@@ -82,7 +69,7 @@ export default {
           else return (prev += curr + " / ");
         } else return prev + "";
       }, "");
-    }
+    },
   },
   watch: {
     "$route.path": {
@@ -90,8 +77,8 @@ export default {
       immediate: true,
       handler(n) {
         this.createBreadcrumbs(n);
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>

package/vue-components/v2/button/Button.vue

@@ -7,12 +7,7 @@
     :title="tooltip"
   >
     <span v-if="iconClass || iconImage" class="icon is-small">
-      <img
-        v-if="iconImage"
-        :src="iconImage"
-        alt="close-icon"
-        :width="iconImageWidth"
-      />
+      <img v-if="iconImage" :src="iconImage" alt="close-icon" :width="iconImageWidth" />
       <i v-else :class="`fa fa-${iconClass}`" aria-hidden="true" />
     </span>
     <span v-if="title" :class="titleModifierClass">{{ title }}</span>
@@ -30,7 +25,7 @@ export default {
     },
     tooltip: {
       type: String,
-      defualt: undefined
+      defualt: undefined,
     },
     // for loader
     isLoaderActive: {

package/vue-components/v2/button/DownloadBtn.vue

@@ -12,34 +12,34 @@ import downloadFunc from "downloadjs";
 
 export default {
   components: {
-    AcButton: () => import("./../button/Button.vue")
+    AcButton: () => import("./../button/Button.vue"),
   },
   props: {
     fileData: {
       type: String,
-      default: ""
+      default: "",
     },
     fileName: {
       type: String,
-      default: ""
+      default: "",
     },
     isFetching: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
-      downloadIcon: "fa fa-cloud-download"
+      downloadIcon: "fa fa-cloud-download",
     };
   },
   component: {
-    downloadFunc
+    downloadFunc,
   },
   methods: {
     download() {
       downloadFunc(this.fileData, this.fileName);
-    }
-  }
+    },
+  },
 };
 </script>

package/vue-components/v2/card/CardContent.vue

@@ -2,4 +2,4 @@
   <div class="ac-card-content b-1 b-t-n">
     <slot />
   </div>
-</template>
+</template>

package/vue-components/v2/card/CardHeader.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="is-flex is-justify-content-space-between pt-8 pb-8 pl-20 pr-20 b-1"
-  >
+  <div class="is-flex is-justify-content-space-between pt-8 pb-8 pl-20 pr-20 b-1">
     <div class="header-left-content">
       <slot name="card-header-left" />
     </div>
@@ -9,4 +7,4 @@
       <slot name="card-header-right" />
     </div>
   </div>
-</template>
+</template>

package/vue-components/v2/card/PaymentCard.vue

@@ -66,4 +66,4 @@ export default {
     },
   },
 };
-</script>
+</script>

package/vue-components/v2/card/PaymentCardOptionButtons.vue

@@ -32,4 +32,4 @@ export default {
     },
   },
 };
-</script>
+</script>

package/vue-components/v2/card/PaymentCards.vue

@@ -2,12 +2,7 @@
   <div class="ac-payment-card-wrapper">
     <!-- loader start -->
     <div v-if="isLoaderActive" class="ac-payment-card is-transparent-bg p-0">
-      <content-loader
-        :height="235"
-        :speed="2"
-        :primaryColor="primaryColor"
-        :secondaryColor="secondaryColor"
-      />
+      <content-loader :height="235" :speed="2" :primaryColor="primaryColor" :secondaryColor="secondaryColor" />
     </div>
     <!-- loader end -->
     <template v-else>
@@ -20,7 +15,12 @@
 </template>
 <script>
 import { ContentLoader } from "vue-content-loader";
-import {loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor} from "@appscode/design-system/plugins/theme";
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
 
 export default {
   components: {
@@ -34,11 +34,15 @@ export default {
   },
   computed: {
     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;
+    },
+  },
 };
 </script>

package/vue-components/v2/content/ContentHeader.vue

@@ -31,20 +31,20 @@ export default {
   props: {
     headerTitle: {
       type: String,
-      default: "Content Header"
+      default: "Content Header",
     },
     headerSubTitle: {
       type: String,
-      default: ""
+      default: "",
     },
     removeBorderBottom: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
 
   components: {
-    HeaderItems: () => import("../header/HeaderItems.vue")
-  }
+    HeaderItems: () => import("../header/HeaderItems.vue"),
+  },
 };
 </script>

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

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <editor-tabs
-      v-if="!readOnly"
-      @tabchange="activeTab = $event"
-      :active-tab="activeTab"
-    />
+    <editor-tabs v-if="!readOnly" @tabchange="activeTab = $event" :active-tab="activeTab" />
     <monaco-editor
       v-if="activeTab === 'edit'"
       @editorDidMount="onEditorMount"
@@ -110,12 +106,7 @@ export default {
       return this.showMinimap && noOfLines * 2 > this.editorHeight;
     },
     theme() {
-      return (
-        this.editorTheme ||
-        (document.documentElement.classList.contains("is-dark-theme")
-          ? "vs-dark"
-          : "vs")
-      );
+      return this.editorTheme || (document.documentElement.classList.contains("is-dark-theme") ? "vs-dark" : "vs");
     },
   },
 

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

@@ -3,10 +3,7 @@
     <div class="ac-preview-inner">
       <!-- preview body start  -->
       <div class="ac-preview-body mt-0 pt-15 pl-20">
-        <div
-          v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)"
-          class="left-content"
-        >
+        <div v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)" class="left-content">
           <div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
             <ul v-if="!isPreviewLoading">
               <li
@@ -17,10 +14,7 @@
               >
                 <a @click.prevent="setActivePreview(previewYaml.uid)">
                   <span>
-                    <img
-                      src="~@appscode/design-system-images/icons/file-icon.svg"
-                      alt=""
-                    />
+                    <img src="~@appscode/design-system-images/icons/file-icon.svg" alt="" />
                   </span>
                   <span>{{ previewYaml.name }}</span>
                 </a>
@@ -123,15 +117,11 @@ export default {
   },
   computed: {
     activeFile() {
-      const activeFile = this.filteredYamls.find(
-        (element) => element.uid === this.activeKey
-      );
+      const activeFile = this.filteredYamls.find((element) => element.uid === this.activeKey);
       return activeFile || { content: "", format: "yaml" };
     },
     originalValue() {
-      const activeFile = this.filteredYamls.find(
-        (element) => element.uid === this.activeKey
-      );
+      const activeFile = this.filteredYamls.find((element) => element.uid === this.activeKey);
       return (activeFile && activeFile.initContent) || "";
     },
     editorTheme() {
@@ -145,9 +135,7 @@ export default {
     },
     filteredYamls() {
       if (this.searchText) {
-        return this.previewYamls.filter(
-          (element) => JSON.stringify(element).search(this.searchText) > -1
-        );
+        return this.previewYamls.filter((element) => JSON.stringify(element).search(this.searchText) > -1);
       } else return this.previewYamls;
     },
     isKeyAvailable() {

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

@@ -24,12 +24,8 @@ export default {
   },
   computed: {
     style() {
-      const fixedWidth = this.width.toString().includes("%")
-        ? this.width
-        : `${this.width}px`;
-      const fixedHeight = this.height.toString().includes("%")
-        ? this.height
-        : `${this.height}px`;
+      const fixedWidth = this.width.toString().includes("%") ? this.width : `${this.width}px`;
+      const fixedHeight = this.height.toString().includes("%") ? this.height : `${this.height}px`;
       return {
         width: fixedWidth,
         height: fixedHeight,
@@ -47,9 +43,7 @@ export default {
     initMonaco() {
       this.$emit("editorWillMount", this.monaco);
       const { value, language, theme, options } = this;
-      this.editor = monaco.editor[
-        this.diffEditor ? "createDiffEditor" : "create"
-      ](this.$el, {
+      this.editor = monaco.editor[this.diffEditor ? "createDiffEditor" : "create"](this.$el, {
         value: value,
         language: language,
         theme: theme,
@@ -114,12 +108,11 @@ export default {
         const { original, modified } = this.editor.getModel();
         monaco.editor.setModelLanguage(original, this.language);
         monaco.editor.setModelLanguage(modified, this.language);
-      } else
-        monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
+      } else monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
     },
     theme() {
       monaco.editor.setTheme(this.theme);
     },
   },
 };
-</script>
+</script>

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

@@ -1,9 +1,5 @@
 <template>
-  <content-table
-    :table-title="title"
-    :searchable="isSearchable"
-    :hide-header="hideHeader"
-  >
+  <content-table :table-title="title" :searchable="isSearchable" :hide-header="hideHeader">
     <template #content-controls>
       <header-item v-if="showHideBtn">
         <ac-button
@@ -22,10 +18,7 @@
         />
       </header-item>
       <header-item v-if="showDownloadBtn">
-        <download-btn
-          :file-data="decode(activeFile)"
-          :file-name="activeFile.name"
-        />
+        <download-btn :file-data="decode(activeFile)" :file-name="activeFile.name" />
       </header-item>
       <header-item v-if="showUpdateBtn && !isEditorReadOnly">
         <ac-button
@@ -78,8 +71,7 @@ export default {
     ContentTable: () => import("./../content/ContentTable.vue"),
     HeaderItem: () => import("./../header/HeaderItem.vue"),
     DownloadBtn: () => import("./../button/DownloadBtn.vue"),
-    DeleteConfirmationModal: () =>
-      import("./../modals/DeleteConfirmationModal.vue"),
+    DeleteConfirmationModal: () => import("./../modals/DeleteConfirmationModal.vue"),
     FilteredFileEditor: () => import("./FilteredFileEditor.vue"),
   },
   props: {
@@ -151,9 +143,7 @@ export default {
   },
   computed: {
     activeFile() {
-      const activeFile = this.previewYamls.find(
-        (element) => element.uid === this.activeKey
-      );
+      const activeFile = this.previewYamls.find((element) => element.uid === this.activeKey);
       return activeFile || { content: "", format: "yaml" };
     },
     showCopyBtn() {

package/vue-components/v2/form/Form.vue

@@ -6,20 +6,17 @@
         'pt-10': reducePaddingTop,
         'pl-20': !isContainer,
         'form-content': !isContainer,
-        container: isContainer
+        container: isContainer,
       }"
     >
       <slot />
     </div>
-    <div
-      class="form-footer b-t-1 pt-10 pb-10 pl-20 pr-20 mt-15"
-      v-if="hasFooter"
-    >
+    <div class="form-footer b-t-1 pt-10 pb-10 pl-20 pr-20 mt-15" v-if="hasFooter">
       <div
         class="ac-vcentered"
         :class="{
           'form-content': !isContainer,
-          container: isContainer
+          container: isContainer,
         }"
       >
         <form-footer-controls>
@@ -38,20 +35,20 @@ export default {
   props: {
     isContainer: {
       type: Boolean,
-      default: false
+      default: false,
     },
     hasFooter: {
       type: Boolean,
-      default: true
+      default: true,
     },
     reducePaddingTop: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
 
   components: {
-    FormFooterControls: () => import("./FormFooterControls.vue")
-  }
+    FormFooterControls: () => import("./FormFooterControls.vue"),
+  },
 };
 </script>

package/vue-components/v2/header/Header.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="inner-header">
-    <div
-      class="is-flex is-justify-content-space-between"
-      :class="{ container: isContainer }"
-    >
+    <div class="is-flex is-justify-content-space-between" :class="{ container: isContainer }">
       <header-items>
         <header-item>
           <h5>{{ title }}</h5>

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

@@ -85,17 +85,17 @@ import { ContentLoader } from "vue-content-loader";
 
 export default {
   components: {
-    ContentLoader
+    ContentLoader,
   },
   props: {
     primaryLoaderColor: {
       type: String,
-      default: "#f5f7f9"
+      default: "#f5f7f9",
     },
     secondaryLoaderColor: {
       type: String,
-      default: "#ecebeb"
-    }
-  }
+      default: "#ecebeb",
+    },
+  },
 };
 </script>

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

@@ -27,17 +27,17 @@ import { ContentLoader } from "vue-content-loader";
 
 export default {
   components: {
-    ContentLoader
+    ContentLoader,
   },
   props: {
     primaryLoaderColor: {
       type: String,
-      default: "#f5f7f9"
+      default: "#f5f7f9",
     },
     secondaryLoaderColor: {
       type: String,
-      default: "#ecebeb"
-    }
-  }
+      default: "#ecebeb",
+    },
+  },
 };
 </script>

package/vue-components/v2/modal/Modal.vue

@@ -18,9 +18,7 @@
               <ac-button
                 modifier-classes="is-square is-transparent"
                 :disabled="isCloseOptionDisabled"
-                :icon-image="
-                  require('@appscode/design-system-images/icons/close-icon.svg')
-                "
+                :icon-image="require('@appscode/design-system-images/icons/close-icon.svg')"
                 data-testid="delete-confirmation-modal-close-icon"
                 @click.stop="destroyModal"
               />
@@ -30,10 +28,7 @@
         <!-- modal header end -->
 
         <!-- modal body start  -->
-        <div
-          class="ac-modal-body ac-vscrollbar"
-          data-testid="ac-modal-content-with-scroll"
-        >
+        <div class="ac-modal-body ac-vscrollbar" data-testid="ac-modal-content-with-scroll">
           <div class="ac-modal-content">
             <!-- freedom content start  -->
             <slot />

package/vue-components/v2/modals/DeleteConfirmationModal.vue

@@ -1,11 +1,6 @@
 <template>
   <!-- modal start  -->
-  <modal
-    :title="title"
-    modifier-classes="is-normal"
-    :open="open"
-    @closemodal="closeModal"
-  >
+  <modal :title="title" modifier-classes="is-normal" :open="open" @closemodal="closeModal">
     <!-- freedom content start  -->
     <div class="action-message pt-35 pb-35 has-text-centered">
       <h5 class="is-message">{{ message }} {{ itemName ? "" : "?" }}</h5>

package/vue-components/v2/modals/JsonShowModal.vue

@@ -1,29 +1,17 @@
 <template>
-  <modal
-    :title="editorTitle"
-    :open="open"
-    @closemodal="closeModal"
-    modifier-classes="is-medium"
-  >
+  <modal :title="editorTitle" :open="open" @closemodal="closeModal" modifier-classes="is-medium">
     <template #modal-header-controls>
       <header-item>
         <ac-button
           modifier-classes="is-square is-primary"
           icon-class="copy"
-          v-clipboard:copy="
-            `${editorTitle}: ${JSON.stringify(parsedContent, null, 4)}`
-          "
+          v-clipboard:copy="`${editorTitle}: ${JSON.stringify(parsedContent, null, 4)}`"
           v-clipboard:success="onCopy"
           v-clipboard:error="onError"
         />
       </header-item>
     </template>
-    <editor
-      :value="JSON.stringify(parsedContent, null, 4)"
-      :read-only="true"
-      language="json"
-      :show-minimap="false"
-    />
+    <editor :value="JSON.stringify(parsedContent, null, 4)" :read-only="true" language="json" :show-minimap="false" />
   </modal>
 </template>
 

package/vue-components/v2/navbar/Appdrawer.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="app-drawer-wrapper is-flex">
-    <div
-      class="drawer-icon is-flex is-justify-content-center is-align-items-center"
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+    <div class="drawer-icon is-flex is-justify-content-center is-align-items-center">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M6.66667 2H2V6.66667H6.66667V2Z"
           stroke="#061B2D"