@appscode/design-system 1.0.3-alpha.8 → 1.0.43-alpha.101

package/plugins/theme.js

@@ -0,0 +1,142 @@
+export function HSLToHex(h, s, l) {
+  s /= 100;
+  l /= 100;
+
+  const c = (1 - Math.abs(2 * l - 1)) * s,
+    x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
+    m = l - c / 2;
+
+  let r = 0,
+    g = 0,
+    b = 0;
+
+  if (0 <= h && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= h && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= h && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= h && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  // Having obtained RGB, convert channels to hex
+  r = Math.round((r + m) * 255).toString(16);
+  g = Math.round((g + m) * 255).toString(16);
+  b = Math.round((b + m) * 255).toString(16);
+
+  // Prepend 0s, if necessary
+  if (r.length == 1) r = "0" + r;
+  if (g.length == 1) g = "0" + g;
+  if (b.length == 1) b = "0" + b;
+
+  return "#" + r + g + b;
+}
+export function HexToHSL(H) {
+  // Convert hex to RGB first
+  let r = 0,
+    g = 0,
+    b = 0;
+  if (H.length == 4) {
+    r = parseInt("0x" + H[1] + H[1]);
+    g = parseInt("0x" + H[2] + H[2]);
+    b = parseInt("0x" + H[3] + H[3]);
+  } else if (H.length == 7) {
+    r = parseInt("0x" + H[1] + H[2]);
+    g = parseInt("0x" + H[3] + H[4]);
+    b = parseInt("0x" + H[5] + H[6]);
+  }
+  // Then to HSL
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const cmin = Math.min(r, g, b),
+    cmax = Math.max(r, g, b),
+    delta = cmax - cmin;
+  let h = 0,
+    s = 0,
+    l = 0;
+
+  if (delta == 0) h = 0;
+  else if (cmax == r) h = ((g - b) / delta) % 6;
+  else if (cmax == g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+
+  h = Math.round(h * 60);
+
+  if (h < 0) h += 360;
+
+  l = (cmax + cmin) / 2;
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return {
+    hue: `${h}`,
+    saturation: `${s}%`,
+    lightness: `${l}%`,
+  };
+}
+export function getThemeHSL() {
+  const hue = getComputedStyle(document.documentElement).getPropertyValue(
+    "--hsl-hue"
+  );
+  const saturation = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--hsl-saturation");
+  const lightness = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--hsl-lightness");
+
+  return {
+    hue,
+    saturation,
+    lightness,
+  };
+}
+export function setThemeHSL(h, s, l) {
+  document.documentElement.style.setProperty("--hsl-hue", h);
+  document.documentElement.style.setProperty("--hsl-saturation", s);
+  document.documentElement.style.setProperty("--hsl-lightness", l);
+}
+export function setFontHSL(h, s, l) {
+document.documentElement.style.setProperty("--font-hsl-hue", h);
+document.documentElement.style.setProperty("--font-hsl-saturation", s);
+document.documentElement.style.setProperty("--font-hsl-lightness", l);
+}
+export function getFontHSL() {
+  const hue = getComputedStyle(document.documentElement).getPropertyValue(
+    "--font-hsl-hue"
+  );
+  const saturation = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--font-hsl-saturation");
+  const lightness = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--font-hsl-lightness");
+
+  return {
+    hue,
+    saturation,
+    lightness,
+  };
+}
+export const loaderLightThemePrimaryColor = "#f5f7f9";
+export const loaderDarkThemePrimaryColor = "#2e323c";
+export const loaderLightThemeSecondaryColor = "#ecebeb";
+export const loaderDarkThemeSecondaryColor = "#21272e";

package/plugins/vue-toaster.js

@@ -2,9 +2,9 @@ module.exports = {
   position: "top-center",
   theme: "toasted-primary",
   iconPack: "fontawesome",
-  className: "ac-toasted",
+  className: "ac-toast",
   action: {
-    text: "Close",
+    icon: "close",
     class: "ac-toast-action",
     onClick: (e, toastObject) => {
       toastObject.goAway(0);
@@ -26,7 +26,7 @@ module.exports = {
         icon: "fa-check",
         duration: 2500,
         type: "success",
-        className: "ac-toasted is-success",
+        className: "ac-toast is-success",
       },
     },
     {
@@ -34,6 +34,7 @@ module.exports = {
       message: (payload) => {
         if (payload) {
           if (typeof payload === "string") return payload;
+          else if (payload.response && payload.response.data && payload.response.data.message) return payload.response.data.message;
           else if (payload.message) return payload.message;
           else return "Something Went Wrong";
         } else return "Something Went Wrong";
@@ -41,7 +42,7 @@ module.exports = {
       options: {
         icon: "fa-warning",
         type: "error",
-        className: "ac-toasted is-error",
+        className: "ac-toast is-error",
       },
     },
     {
@@ -56,7 +57,7 @@ module.exports = {
       options: {
         icon: "fa-info",
         type: "info",
-        className: "ac-toasted is-info",
+        className: "ac-toast is-info",
       },
     },
     {
@@ -73,7 +74,7 @@ module.exports = {
       options: {
         icon: "fa-warning",
         type: "error",
-        className: "ac-toasted is-warning",
+        className: "ac-toast is-warning",
       },
     },
   ],

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

@@ -0,0 +1,95 @@
+<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] === ":")
+          return (pval += this.$route.params[cval.slice(1, cval.length)] + "/");
+        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/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/PaymentCards.vue

@@ -1,13 +1,12 @@
 <template>
-  <!-- card start -->
   <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"
-        :primary-color="'#f3f3fa'"
-        :secondary-color="'#ffffff'"
+        :primaryColor="primaryColor"
+        :secondaryColor="secondaryColor"
       />
     </div>
     <!-- loader end -->
@@ -15,24 +14,31 @@
       <slot name="cards" />
     </template>
 
-    <div class="ac-payment-card add-card">
-      <!-- single payment methode start -->
-      <slot name="add-card" />
-    </div>
+    <!-- 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
+    ContentLoader,
   },
   props: {
     isLoaderActive: {
       type: Boolean,
-      default: false
-    }
+      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

@@ -38,7 +38,7 @@ export default {
       default: ""
     },
     removeBorderBottom: {
-      type: String,
+      type: Boolean,
       default: false
     }
   },

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

@@ -15,10 +15,12 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap,
+          enabled: calcShowMinimap
         },
+        theme: theme,
         readOnly: readOnly,
-        scrollBeyondLastLine: false,
+        wordWrap: wordWrap,
+        scrollBeyondLastLine: false
       }"
     />
     <monaco-editor
@@ -29,10 +31,12 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap,
+          enabled: calcShowMinimap
         },
+        theme: theme,
         readOnly: true,
-        scrollBeyondLastLine: false,
+        wordWrap: wordWrap,
+        scrollBeyondLastLine: false
       }"
       :original="originalEditorContent"
       :diff-editor="true"
@@ -45,39 +49,47 @@ export default {
   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: ""
+    },
+    wordWrap: {
+      type: String,
+      default: "off"
     },
   },
   components: {
     EditorTabs: () => import("../tabs/EditorTabs.vue"),
-    MonacoEditor: () => import("vue-monaco"),
+    MonacoEditor: () => import("vue-monaco")
   },
 
   data() {
     return {
       activeTab: "edit",
       editorContent: "",
-      originalEditorContent: "",
+      originalEditorContent: ""
     };
   },
 
@@ -86,6 +98,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: {
@@ -95,7 +115,7 @@ export default {
         if (this.editorContent !== n) {
           this.editorContent = n;
         }
-      },
+      }
     },
     originalValue: {
       immediate: true,
@@ -103,8 +123,8 @@ export default {
         if (this.originalEditorContent !== n) {
           this.originalEditorContent = n;
         }
-      },
-    },
+      }
+    }
   },
 
   methods: {
@@ -114,7 +134,7 @@ export default {
       editor.onDidBlurEditorText(() => {
         this.$emit("input", this.editorContent);
       });
-    },
-  },
+    }
+  }
 };
 </script>