@appscode/design-system 0.0.21-alpha.2 → 0.4.27

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/breadcrumbs/Breadcrumb.vue

@@ -0,0 +1,97 @@
+<template>
+  <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"
+            >{{ item.name }}
+          </router-link>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: []
+    };
+  },
+  methods: {
+    createBreadcrumbs(n) {
+      //Adding dynamic path to the route
+      const listPaths = this.$route.matched.map(element =>
+        this.pathReplaceWithParam(element.path)
+      );
+
+      //Removing the last duplicate value from the listpaths array
+      listPaths.pop();
+
+      //Createing the breadcrumb name
+      const listName = this.createList(listPaths);
+
+      //Set the new breadcrumb name and path value to list
+      this.list = listName.map((element, index) => {
+        return {
+          name: element,
+          path: listPaths[index]
+        };
+      });
+    },
+    pathReplaceWithParam(path) {
+      //Split the path and remove the first and last empty block
+      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;
+          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 !== "");
+      });
+
+      // 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)
+          ]);
+      }, []);
+    },
+    createVal(startIdx, paths) {
+      return paths.reduce((prev, curr, idx) => {
+        if (idx >= startIdx) {
+          if (idx + 1 === paths.length) return (prev += curr);
+          else return (prev += curr + " / ");
+        } else return prev + "";
+      }, "");
+    }
+  },
+  watch: {
+    "$route.path": {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        this.createBreadcrumbs(n);
+      }
+    }
+  }
+};
+</script>

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

@@ -4,6 +4,7 @@
     :class="`${modifierClasses}${isLoaderActive ? ' is-loading' : ''}`"
     :disabled="disabled"
     @click="handleClick"
+    :title="tooltip"
   >
     <span v-if="iconClass || iconImage" class="icon is-small">
       <img
@@ -14,7 +15,7 @@
       />
       <i v-else :class="`fa fa-${iconClass}`" aria-hidden="true" />
     </span>
-    <span v-if="title">{{ title }}</span>
+    <span v-if="title" :class="titleModifierClass">{{ title }}</span>
     <slot />
   </button>
 </template>
@@ -27,6 +28,10 @@ export default {
       type: String,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: undefined
+    },
     // for loader
     isLoaderActive: {
       type: Boolean,
@@ -55,6 +60,10 @@ export default {
       type: String,
       default: "is-primary",
     },
+    titleModifierClass: {
+      type: String,
+      default: "",
+    },
   },
 
   methods: {

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

@@ -0,0 +1,45 @@
+<template>
+  <ac-button
+    modifier-classes="is-primary is-square"
+    icon-class="download"
+    :is-loader-active="isFetching"
+    @click="download()"
+  />
+</template>
+
+<script>
+import downloadFunc from "downloadjs";
+
+export default {
+  components: {
+    AcButton: () => import("./../button/Button.vue")
+  },
+  props: {
+    fileData: {
+      type: String,
+      default: ""
+    },
+    fileName: {
+      type: String,
+      default: ""
+    },
+    isFetching: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      downloadIcon: "fa fa-cloud-download"
+    };
+  },
+  component: {
+    downloadFunc
+  },
+  methods: {
+    download() {
+      downloadFunc(this.fileData, this.fileName);
+    }
+  }
+};
+</script>

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

@@ -3,6 +3,7 @@
     class="ac-single-card has-text-centered style-three"
     :class="{ 'is-selected': isSelected }"
     @click="$emit('click', $event)"
+    data-testid="card-list-item"
   >
     <div class="ac-card-logo" v-if="hasLogo">
       <slot name="card-logo" />

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

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

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

@@ -0,0 +1,12 @@
+<template>
+  <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>
+    <div class="header-right-content">
+      <slot name="card-header-right" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,10 @@
+<template>
+  <div class="card-data">
+    <p>
+      <slot name="card-label" />
+    </p>
+    <h5>
+      <slot name="card-value" />
+    </h5>
+  </div>
+</template>

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="overview-card">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,69 @@
+<template>
+  <div class="ac-payment-card" :class="bgClass">
+    <div class="payment-card-inner">
+      <!-- card header start  -->
+      <div class="payment-card-header">
+        <div class="card-left">
+          <slot name="expire-section" />
+        </div>
+        <!-- header-right start -->
+        <div class="card-right">
+          <template v-if="showRightSection">
+            <p v-if="isDefaultCard" class="default-status">
+              <span>
+                <i class="fa fa-check-circle" aria-hidden="true" />
+                Default
+              </span>
+            </p>
+            <slot v-else name="option-button" />
+          </template>
+        </div>
+        <!-- header-right end -->
+      </div>
+      <!-- card header end -->
+      <!-- card body start  -->
+      <div class="payment-card-body">
+        <p class="p-card-number is-star">****</p>
+        <p class="p-card-number is-star">****</p>
+        <p class="p-card-number is-star">****</p>
+        <p class="p-card-number"><slot name="card-number" /></p>
+      </div>
+      <!-- card body end -->
+      <!-- card footer start  -->
+      <div class="payment-card-footer">
+        <div class="left-content">
+          <div class="p-card-expiry">
+            <p>
+              <slot name="card-expiry-date" />
+            </p>
+          </div>
+          <p class="user-name">
+            <slot name="card-holder-name" />
+          </p>
+        </div>
+        <div class="p-card-logo">
+          <slot name="card-logo" />
+        </div>
+      </div>
+      <!-- card footer end -->
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    bgClass: {
+      type: String,
+      default: "payment-bg-2",
+    },
+    isDefaultCard: {
+      type: Boolean,
+      default: false,
+    },
+    showRightSection: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="ac-options is-right" @click="handleClick">
+    <div class="option-dots">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+    <!-- dropdown Item start  -->
+    <!-- use "is-hidden" class in the line below for hide dropdown element  -->
+    <ul class="options-items" :class="{ 'is-hidden': isOptionButtonHidden }">
+      <li>
+        <slot name="make-default-button" />
+      </li>
+      <li>
+        <slot name="delete-card-button" />
+      </li>
+    </ul>
+    <!-- dropdown Item end -->
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isOptionButtonHidden: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    handleClick(e) {
+      if (!this.disabled) this.$emit("click", e);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <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"
+      />
+    </div>
+    <!-- loader end -->
+    <template v-else>
+      <slot name="cards" />
+    </template>
+
+    <!-- single payment method start -->
+    <slot name="add-card" />
+  </div>
+</template>
+<script>
+import { ContentLoader } from "vue-content-loader";
+import {loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor} from "@appscode/design-system/plugins/theme";
+
+export default {
+  components: {
+    ContentLoader,
+  },
+  props: {
+    isLoaderActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    primaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+    },
+    secondaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
+    }  
+  }
+};
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="ac-content-header b-b-1">
+  <div class="ac-content-header" :class="{ 'b-b-1': !removeBorderBottom }">
     <!-- header left start  -->
     <div class="ac-cheader-left">
       <!-- title  -->
@@ -31,16 +31,20 @@ export default {
   props: {
     headerTitle: {
       type: String,
-      default: "Content Header",
+      default: "Content Header"
     },
     headerSubTitle: {
       type: String,
-      default: "",
+      default: ""
     },
+    removeBorderBottom: {
+      type: Boolean,
+      default: false
+    }
   },
 
   components: {
-    HeaderItems: () => import("../header/HeaderItems.vue"),
-  },
+    HeaderItems: () => import("../header/HeaderItems.vue")
+  }
 };
 </script>

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

@@ -2,6 +2,7 @@
   <content-layout>
     <template #content-header>
       <content-header
+        v-if="!hideHeader"
         :header-title="tableTitle"
         :header-sub-title="tableSubTitle"
         :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
@@ -21,32 +22,36 @@ export default {
   props: {
     removeTableHeaderPadding: {
       type: Boolean,
-      default: false,
+      default: false
     },
     tableTitle: {
       type: String,
-      default: "Table",
+      default: "Table"
     },
     tableSubTitle: {
       type: String,
-      default: "",
+      default: ""
     },
     searchable: {
       type: Boolean,
-      default: true,
+      default: true
     },
+    hideHeader: {
+      type: Boolean,
+      default: false
+    }
   },
   components: {
     ContentLayout: () => import("./ContentLayout.vue"),
     ContentHeader: () => import("./ContentHeader.vue"),
     HeaderItem: () => import("../header/HeaderItem.vue"),
-    SearchBar: () => import("../searchbars/SearchBar.vue"),
+    SearchBar: () => import("../searchbars/SearchBar.vue")
   },
 
   data() {
     return {
-      searchText: "",
+      searchText: ""
     };
-  },
+  }
 };
 </script>

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

@@ -7,19 +7,22 @@
     />
     <monaco-editor
       v-if="activeTab === 'edit'"
-      ref="monacoEditor"
       @editorDidMount="onEditorMount"
       key="edit"
       :class="`vh-${editorHeight} is-clipped`"
-      v-model="editorContent"
+      :value="editorContent"
+      @change="onChange"
       :language="language"
       :options="{
         minimap: {
           enabled: calcShowMinimap,
         },
+        theme: theme,
         readOnly: readOnly,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false,
       }"
+      data-testid="monaco-editor-edit-section"
     />
     <monaco-editor
       v-if="activeTab === 'preview'"
@@ -31,16 +34,21 @@
         minimap: {
           enabled: calcShowMinimap,
         },
+        theme: theme,
         readOnly: true,
+        wordWrap: wordWrap,
         scrollBeyondLastLine: false,
       }"
       :original="originalEditorContent"
       :diff-editor="true"
+      data-testid="monaco-editor-preview-section"
     />
   </div>
 </template>
 
 <script>
+import Preloader from "../preloader/Preloader.vue";
+import Banner from "../banner/Banner.vue";
 export default {
   props: {
     value: {
@@ -67,10 +75,25 @@ export default {
       type: Number,
       default: 40,
     },
+    editorTheme: {
+      type: String,
+      default: "",
+    },
+    wordWrap: {
+      type: String,
+      default: "off",
+    },
   },
+
   components: {
     EditorTabs: () => import("../tabs/EditorTabs.vue"),
-    MonacoEditor: () => import("vue-monaco"),
+    MonacoEditor: () => ({
+      component: import("./MonacoEditor.vue"),
+      loading: Preloader,
+      delay: 200,
+      error: Banner,
+      timeout: 100000,
+    }),
   },
 
   data() {
@@ -86,6 +109,14 @@ export default {
       const noOfLines = this.editorContent.split("\n").length;
       return this.showMinimap && noOfLines * 2 > this.editorHeight;
     },
+    theme() {
+      return (
+        this.editorTheme ||
+        (document.documentElement.classList.contains("is-dark-theme")
+          ? "vs-dark"
+          : "vs")
+      );
+    },
   },
 
   watch: {
@@ -108,8 +139,10 @@ export default {
   },
 
   methods: {
-    onEditorMount() {
-      const editor = this.$refs.monacoEditor.getEditor();
+    onChange(e) {
+      if (typeof e === "string") this.editorContent = e;
+    },
+    onEditorMount(editor) {
       // add event listeners
       editor.onDidBlurEditorText(() => {
         this.$emit("input", this.editorContent);