@appscode/design-system 2.0.10 → 2.0.11

package/package.json

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

package/vue-components/v3/cards/OrgClusterCard.vue

@@ -1,4 +1,13 @@
 <script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
+const HeroiconsArrowSmallRight = defineAsyncComponent(
+  () => import("~icons/heroicons/arrow-small-right")
+);
+const HeroiconsPlus = defineAsyncComponent(
+  () => import("~icons/heroicons/plus")
+);
+
 interface Props {
   title?: string;
   type?: string;
@@ -7,6 +16,7 @@ interface Props {
   thumbnail?: string;
   url?: string;
   urlLabel?: string;
+  noDataAvailable?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -14,23 +24,43 @@ withDefaults(defineProps<Props>(), {
   type: "organization",
   modifierClasses: "",
   roundedThumbnail: true,
-  thumbnail: "https://via.placeholder.com/80/dddddd/808080",
+  thumbnail: "//via.placeholder.com/100/dddddd/808080",
   url: "#",
   urlLabel: "Details",
+  noDataAvailable: false,
 });
 </script>
 <template>
-  <div class="card-details is-clickable" :class="modifierClasses">
-    <div class="left-content">
-      <figure class="image is-64x64">
-        <img :class="{ 'is-rounded': roundedThumbnail }" :src="thumbnail" />
+  <div
+    class="card-details"
+    :class="[
+      modifierClasses,
+      { 'no-data-available is-justify-content-center': noDataAvailable },
+    ]"
+  >
+    <div
+      class="left-content"
+      :class="{ 'is-align-items-center': noDataAvailable }"
+    >
+      <figure class="image" :class="{ 'is-64x64': !noDataAvailable }">
+        <img :class="{ 'is-rounded': !noDataAvailable }" :src="thumbnail" />
       </figure>
       <h5>{{ title }}</h5>
-      <a :href="url" class="is-underlined has-text-weight-medium">
-        {{ urlLabel }}
-      </a>
+
+      <AcButton v-if="noDataAvailable" :title="urlLabel" icon-class="unplugin">
+        <template #icon><HeroiconsPlus /></template>
+      </AcButton>
+
+      <AcButton
+        v-else
+        :title="urlLabel"
+        modifier-classes="is-text px-0 is-flex-direction-row-reverse gap-8"
+        icon-class="unplugin"
+      >
+        <template #icon><HeroiconsArrowSmallRight /></template>
+      </AcButton>
     </div>
-    <div class="right-content">
+    <div class="right-content" v-if="!noDataAvailable">
       <figure class="image is-64x64">
         <img
           v-if="type === 'organization'"
@@ -51,8 +81,19 @@ withDefaults(defineProps<Props>(), {
   border-radius: 4px;
   transition: 0.3s ease-in-out;
 
-  &:hover {
+  button.ac-button.is-text {
+    color: $primary;
+    transition: 0.3s ease-in-out;
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  &:hover:not(.no-data-available) {
     border: 1px solid $primary;
+    button.ac-button.is-text {
+      gap: 16px;
+    }
 
     .right-content {
       img {

package/plugins/theme.js

@@ -1,144 +0,0 @@
-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";
-export const sidebarLoaderLightThemePrimaryColor = "#0F4371";
-export const sidebarLoaderLightThemeSecondaryColor = "#0C365A";