@appscode/design-system 1.1.0-beta.10 → 1.1.0-beta.13

package/package.json

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

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

@@ -65,7 +65,7 @@ const OptionDots = defineAsyncComponent(
   transition: 0.3s ease-in-out;
   position: relative;
   z-index: 1;
-  width: calc(33% - 3px);
+  width: calc(33% - 7px);
   min-width: 430px;
   max-width: 530px;
 

package/vue-components/v3/footer/Info.vue

@@ -1,20 +1,22 @@
 <script lang="ts" setup>
-import { ref, defineAsyncComponent } from "vue";
+import { defineAsyncComponent } from "vue";
 
 const FooterItems = defineAsyncComponent(() => import("./FooterItems.vue"));
 const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
 
-const dataObj = ref([
-  { key: "VERSION:", value: "10.5.8" },
-  { key: "NAMESPACE:", value: "demo" },
-  { key: "MODE:", value: "Standalone" },
-]);
+interface Props {
+  infoData?: Array<Record<string, string>>;
+}
+
+withDefaults(defineProps<Props>(), {
+  infoData: () => [],
+});
 </script>
 
 <template>
   <footer-items>
-    <footer-item v-for="(data, idx) in dataObj" :key="idx">
-      <span class="">{{ data.key }}</span>
+    <footer-item v-for="(data, idx) in infoData" :key="idx + data.key">
+      <span class="">{{ data.key }}:</span>
       <span>{{ data.value }}</span>
     </footer-item>
   </footer-items>

package/vue-components/v3/footer/Status.vue

@@ -5,36 +5,40 @@ const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
 const HeroiconsCheckBadge = defineAsyncComponent(
   () => import("~icons/heroicons/check-badge")
 );
+const HeroiconsCrossBadge = defineAsyncComponent(
+  () => import("~icons/heroicons/x-circle")
+);
+const HeroiconsLoadingBadge = defineAsyncComponent(
+  () => import("~icons/heroicons/arrow-path")
+);
+interface Props {
+  statusInfo?: Array<Record<string, string>>;
+}
 
-const status = ref([
-  {
-    icon: "HeroiconsCheckCircle",
-    label: "Not Exposed",
-    classType: "has-text-warning",
-  },
-  { icon: "HeroiconsXCircle", label: "TLS", classType: "has-text-danger" },
-  {
-    icon: "HeroiconsCheckBadge",
-    label: "Backup",
-    classType: "has-text-success",
-  },
-  {
-    icon: "HeroiconsXCircle",
-    label: "Monitoring",
-    classType: "has-text-danger",
-  },
-]);
+withDefaults(defineProps<Props>(), {
+  statusInfo: () => [],
+});
 </script>
 
 <template>
   <footer-items>
     <footer-item
-      v-for="(item, idx) in status"
-      :key="idx"
-      :modifier-classes="item.classType"
+      v-for="(item, idx) in statusInfo"
+      :key="idx + item.label"
+      :modifier-classes="item.color"
     >
-      <span class="icon"><HeroiconsCheckBadge :size="20" /></span
-      ><span>{{ item.label }}</span>
+      <span class="icon">
+        <HeroiconsCheckBadge
+          v-if="item.color === `has-text-success`"
+          :size="20"
+        />
+        <HeroiconsLoadingBadge
+          v-else-if="item.color === `has-text-warning`"
+          :size="20"
+        />
+        <HeroiconsCrossBadge v-else :size="20" />
+      </span>
+      <span>{{ item.label }}</span>
     </footer-item>
   </footer-items>
 </template>

package/vue-components/v3/footer/Usage.vue

@@ -1,42 +1,32 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from "vue";
+import { defineAsyncComponent } from "vue";
 const FooterItems = defineAsyncComponent(() => import("./FooterItems.vue"));
 const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
 
-const HeroiconsCpuChip = defineAsyncComponent(
-  () => import("~icons/heroicons/cpu-chip")
-);
+interface Props {
+  usages?: Array<{
+    icon?: string;
+    useData?: {
+      limit?: string;
+      request?: string;
+    };
+  }>;
+}
 
-const usages = ref([
-  {
-    icon: "HeroiconsCpuChip",
-    useData: {
-      limit: "500m",
-      usage: "500m",
-    },
-  },
-  {
-    icon: "HeroiconsCpuChip",
-    useData: {
-      limit: "1G",
-      usage: "1G",
-    },
-  },
-  {
-    icon: "HeroiconsCpuChip",
-    useData: {
-      limit: "10Gi",
-      usage: "10Gi",
-    },
-  },
-]);
+withDefaults(defineProps<Props>(), {
+  usages: () => [],
+});
 </script>
 
 <template>
   <footer-items>
-    <footer-item v-for="(type, idx) in usages" :key="idx">
-      <span class="icon"><HeroiconsCpuChip :size="20" /></span
-      ><span>{{ type.useData.limit }}/{{ type.useData.usage }}</span>
+    <footer-item v-for="(info, idx) in usages" :key="idx">
+      <span class="icon"><img :src="info.icon" /></span
+      ><span
+        >{{ info.useData?.limit || "N" }}/{{
+          info.useData?.request || "A"
+        }}</span
+      >
     </footer-item>
   </footer-items>
 </template>

package/vue-components/v3/preloader/Preloader.vue

@@ -12,7 +12,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div
-    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader"
+    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader page-loader"
     style="height: calc(100vh - 200px)"
   >
     <span v-if="showSpinner" class="spinner"></span>