@appscode/design-system 1.1.0-beta.11 → 1.1.0-beta.14

package/components/_ac-terminal.scss

@@ -1,6 +1,17 @@
 // terminal scss start
 .ac-terminal {
   width: 100%;
+  border-top: 1px solid var(--ac-white-light);
+  padding: 0;
+  position: fixed;
+  width: calc(100% - 250px);
+  bottom: 0;
+  background-color: $primary-10;
+  color: $white-100;
+  font-size: 13px;
+  height: 360px;
+  z-index: 999;
+  transition: 0.3s ease-in-out;
 
   .terminal-body {
     font-family: "Inconsolata", monospace;
@@ -12,20 +23,6 @@
       color: $white-100;
     }
   }
-}
-
-.ac-terminal {
-  border-top: 1px solid var(--ac-white-light);
-  padding: 0;
-  position: fixed;
-  width: calc(100% - 250px);
-  bottom: 0;
-  background-color: $white-100;
-  color: $white-100;
-  font-size: 13px;
-  height: 360px;
-  z-index: 999;
-  transition: 0.3s ease-in-out;
 
   &.is-collapsed {
     height: 40px !important;
@@ -147,35 +144,53 @@
         }
       }
 
-      .options-items {
-        top: 15px;
-        left: 40px;
+      .ac-options {
+        position: relative;
 
-        .items-inner {
-          border: none;
+        .options-items {
+          top: 5px;
+          left: 35px;
+          position: absolute;
+          background: #333;
+          width: 150px;
+          border-radius: 4px;
+          box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
+          z-index: 99;
 
-          li {
+          .items-inner {
             border: none;
-            border-right: none !important;
-            border-bottom: 1px solid $white-100-lighter;
-            width: 100%;
 
-            &:last-child {
-              border-bottom: none;
-            }
+            li {
+              border: none;
+              border-right: none !important;
+              border-bottom: 1px solid $white-100-lighter;
+              width: 100%;
 
-            a {
-              font-size: 13px;
-              padding: 10px 20px;
+              &:last-child {
+                border-bottom: none;
+              }
+
+              a {
+                font-size: 13px;
+                padding: 10px 20px;
+                justify-content: flex-start;
+                border-bottom: 1px solid #444;
 
-              &:hover {
-                color: $primary !important;
+                &:last-child {
+                  border-bottom: none;
+                }
+
+                &:hover {
+                  color: $primary !important;
+                }
               }
             }
           }
         }
+
       }
 
+
       .right-control {
         .button {
           .fa {
@@ -204,7 +219,7 @@
 
         .multiselect .multiselect__tags .multiselect__input,
         .multiselect .multiselect__tags .multiselect__single {
-          background-color: #3b3030;
+          background-color: $primary-10;
         }
       }
     }
@@ -254,7 +269,7 @@
 
   .multiselect.multiselect--active {
     .multiselect__tags {
-      border: 1px solid $white-100 !important;
+      border: 1px solid $primary-30 !important;
 
       .multiselect__input {
         color: $white-100 !important;
@@ -272,6 +287,8 @@
   }
 }
 
+
+
 .notification-inner {
   h3 {
     color: $primary-97;

package/components/_all.scss

@@ -11,6 +11,7 @@
 // @import "ac-drag";
 // @import "left-sidebar-menu";
 @import "ac-input";
+@import "ac-report";
 // @import "ac-content-layout";
 // @import "ac-table";
 // @import "ac-tabs";

package/package.json

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

package/vue-components/v2/banner/Banner.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sign-up-notification mb-20">
-    <div class="notification-inner has-text-centered">
+    <div class="has-text-centered">
       <h3><slot name="banner-title">Error!</slot></h3>
       <slot><p>Oops!! There was an error while loading!</p></slot>
     </div>

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

@@ -11,7 +11,7 @@
       <div class="ac-modal-inner">
         <!-- modal header start  -->
         <div class="ac-modal-header">
-          <h6>{{ title }}</h6>
+          <h5>{{ title }}</h5>
           <header-items>
             <slot name="modal-header-controls" />
             <header-item>

package/vue-components/v3/banner/Banner.vue

@@ -2,8 +2,8 @@
 
 <template>
   <div class="sign-up-notification mb-20">
-    <div class="notification-inner has-text-centered">
-      <h3><slot name="banner-title">Error!</slot></h3>
+    <div class="has-text-centered">
+      <h3 class="has-text-danger"><slot name="banner-title">Error!</slot></h3>
       <slot><p>Oops!! There was an error while loading!</p></slot>
     </div>
   </div>

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/modal/Modal.vue

@@ -97,7 +97,7 @@ watch(
       <div class="ac-modal-inner">
         <!-- modal header start  -->
         <div class="ac-modal-header">
-          <h6>{{ title }}</h6>
+          <h5>{{ title }}</h5>
           <header-items>
             <slot name="modal-header-controls" />
             <header-item>

package/vue-components/v3/option-dots/Options.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Ref, onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref, type Ref } from "vue";
 
 interface Props {
   modifierClasses?: string;
@@ -131,6 +131,7 @@ const documentClick = (e: Event) => {
     opacity: 0;
     visibility: hidden;
     transition: 0.3s ease-in-out;
+    text-align: left;
 
     li {
       .list-button {

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>