@appscode/design-system 2.6.6 → 2.6.8-alpha-1

package/main.scss

@@ -26,7 +26,7 @@
 @import "@/components/vue-components/styles/components/inbox/all";
 @import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
 @import "@/components/vue-components/styles/components/ui-builder/ui-builder";
-@import "@/components/vue-components/styles/components/dropdown.scss";
+@import "@/components/vue-components/styles/components/dropdown";
 @import "@/components/vue-components/styles/components/badge-tags";
 
 // @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

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

package/vue-components/styles/components/_dropdown.scss

@@ -1,30 +1,30 @@
 .dropdown-group {
   margin-bottom: 8px;
-  .dropdown-content {
-    min-width: 220px;
-    max-width: 500px;
-    max-height: calc(100vh - 200px);
-    overflow-y: auto;
-    border: 1px solid $color-border;
+}
+.dropdown-content {
+  min-width: 220px;
+  max-width: 500px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+  border: 1px solid $color-border;
 
-    label {
-      padding: 8px 16px;
-      display: flex;
-      border-bottom: 1px solid $color-border-light;
-      color: $color-text;
-      font-weight: 500;
-    }
-    .dropdown-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 1rem;
-      padding: 8px 16px;
-      color: $color-text;
-      &:hover {
-        background-color: $primary-light-gray;
-        color: $color-heading;
-      }
+  label {
+    padding: 8px 16px;
+    display: flex;
+    border-bottom: 1px solid $color-border-light;
+    color: $color-text;
+    font-weight: 500;
+  }
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1rem;
+    padding: 8px 16px;
+    color: $color-text;
+    &:hover {
+      background-color: $primary-light-gray;
+      color: $color-heading;
     }
   }
 }

package/vue-components/styles/components/cards/_org.scss

@@ -44,9 +44,8 @@
     justify-content: space-between;
 
     .image {
-      border-radius: 50%;
-
-      &:has(.is-rounded) {
+      &.is-rounded {
+        border-radius: 50%;
         box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1);
       }
     }

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

@@ -15,7 +15,7 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   clusterData: () => ({
     name: "Cluster Name",
-    providerIcon: "https://via.placeholder.com/100/dddddd/808080",
+    providerIcon: "https://placehold.co/100x100",
     tags: [],
     details: [],
   }),

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

@@ -13,6 +13,7 @@ interface Props {
   cardLabel?: string;
   noDataAvailable?: boolean;
   hideCreateButton?: boolean;
+  noClusterAvailable?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -20,29 +21,40 @@ withDefaults(defineProps<Props>(), {
   type: "organization",
   modifierClasses: "",
   roundedThumbnail: true,
-  thumbnail: "https://via.placeholder.com/100/dddddd/808080",
+  thumbnail: "https://placehold.co/100x100",
   cardLabel: "",
   noDataAvailable: false,
   hideCreateButton: false,
+  noClusterAvailable: false,
 });
 </script>
 <template>
   <div
-    class="card-details has-hover-style"
-    :class="[modifierClasses, { 'no-data-available is-justify-content-center': noDataAvailable }]"
+    class="card-details"
+    :class="[
+      modifierClasses,
+      {
+        'has-hover-style': !noClusterAvailable,
+        'no-data-available is-justify-content-center': noDataAvailable || noClusterAvailable,
+      },
+    ]"
   >
-    <div class="left-content" :class="{ 'is-align-items-center': noDataAvailable }">
-      <figure class="image" :class="{ 'is-48x48': !noDataAvailable }">
-        <img :class="{ 'is-rounded': !noDataAvailable }" :src="thumbnail" />
+    <div class="left-content" :class="{ 'is-align-items-center': noDataAvailable || noClusterAvailable }">
+      <figure class="image is-clipped" :class="[noClusterAvailable ? 'is-96x96' : 'width-64']">
+        <img :src="thumbnail" />
       </figure>
-      <h5>{{ title }}</h5>
 
-      <AcButton v-if="noDataAvailable && !hideCreateButton" :title="cardLabel" icon-class="unplugin">
+      <h5>{{ noClusterAvailable ? "No Cluster Available" : title }}</h5>
+
+      <AcButton
+        v-if="noDataAvailable && !noClusterAvailable && !hideCreateButton"
+        :title="cardLabel"
+        icon-class="unplugin"
+      >
         <template #icon><HeroiconsPlus /></template>
       </AcButton>
-
       <AcButton
-        v-else
+        v-else-if="!noClusterAvailable"
         :title="cardLabel"
         modifier-classes="is-text px-0 is-flex-direction-row-reverse gap-8"
         icon-class="unplugin"
@@ -50,7 +62,7 @@ withDefaults(defineProps<Props>(), {
         <template #icon v-if="!hideCreateButton"><HeroiconsArrowSmallRight /></template>
       </AcButton>
     </div>
-    <div class="right-content" v-if="!noDataAvailable">
+    <div class="right-content" v-if="!noDataAvailable && !noClusterAvailable">
       <figure class="image is-48x48">
         <img v-if="type === 'organization'" src="../../images/icons/org-icon.svg" />
         <img v-else src="../../images/icons/cluster-icon.svg" />

package/vue-components/v3/inbox/Inbox.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import { defineAsyncComponent } from "vue";
 import MessageDetails from "./MessageDetails.vue";
-
-const MessageList = defineAsyncComponent(() => import("@/components/vue-components/v3/inbox/MessageList.vue"));
+import MessageList from "./MessageList.vue";
 </script>
 
 <template>

package/vue-components/v3/inbox/MessageDetails.vue

@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from "vue";
-const AlertMessage = defineAsyncComponent(() => import("@/components/vue-components/v3/alert/AlertMessage.vue"));
-const AcSingleInput = defineAsyncComponent(
-  () => import("@/components/vue-components/v3/form-fields/AcSingleInput.vue"),
-);
-
+const AlertMessage = defineAsyncComponent(() => import("../alert/AlertMessage.vue"));
+const AcSingleInput = defineAsyncComponent(() => import("../form-fields/AcSingleInput.vue"));
 const EllipsisVertical = defineAsyncComponent(() => import("../icons/EllipsisVertical.vue"));
 const StarIcon = defineAsyncComponent(() => import("../icons/StarIcon.vue"));
 const TrashIcon = defineAsyncComponent(() => import("../icons/TrashIcon.vue"));

package/vue-components/v3/inbox/MessageList.vue

@@ -6,7 +6,7 @@ import RefreshIcon from "../icons/RefreshIcon.vue";
 import EllipsisVertical from "../icons/EllipsisVertical.vue";
 import StarIcon from "../icons/StarIcon.vue";
 
-const Searchbar = defineAsyncComponent(() => import("@/components/vue-components/v3/form-fields/Searchbar.vue"));
+const Searchbar = defineAsyncComponent(() => import("../form-fields/Searchbar.vue"));
 </script>
 
 <template>