@appscode/design-system 2.6.14 → 2.6.16-alpha

package/package.json

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

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

@@ -56,7 +56,7 @@
     // overflow: hidden;
     // transition: max-height 0.3s ease-in-out;
 
-    p {
+    p:not(.is-danger) {
       font-size: 1rem;
       color: $color-text;
       line-height: 1.6;

package/vue-components/types/cluster.ts

@@ -4,3 +4,11 @@ export interface SelectedClusterType {
   provider: string;
   location: string;
 }
+
+export interface SwitchCluster {
+  name: string;
+  displayName: string;
+  provider: string;
+  location?: string;
+  status?: string;
+}

package/vue-components/v3/form-fields/AcSelect.vue

@@ -26,6 +26,7 @@ interface Props {
   openDirection?: "top" | "bottom";
   groupLabel?: string;
   groupValues?: string;
+  htmlErrorMsg?: boolean;
   groupSelect?: boolean;
   onTagAdd?: Function;
 }
@@ -51,6 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
   groupLabel: "",
   groupValues: "",
   groupSelect: false,
+  htmlErrorMsg: false,
   taggable: false,
   tagPlaceholder: "",
   onTagAdd: () => "",
@@ -170,7 +172,8 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
         <slot name="option" v-bind="props" />
       </template>
     </multiselect>
-    <p v-show="errorMsg" class="is-danger">
+    <div v-if="htmlErrorMsg" class="invalid-error is-danger" v-html="errorMsg" />
+    <p v-else v-show="errorMsg" class="is-danger">
       {{ errorMsg }}
     </p>
   </div>

package/vue-components/v3/sidebar/ClusterSwitcher.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, watch } from "vue";
-import type { SelectedClusterType } from "../../types/cluster";
+import type { SwitchCluster } from "../../types/cluster";
+import Badge from "../badge-tags/Badge.vue";
 
 const Multiselect = defineAsyncComponent(() => import("vue-multiselect"));
 
 interface Props {
   sidebarCollapsed?: boolean;
   mouseHover?: boolean;
-  clusterOptions?: Array<SelectedClusterType>;
+  clusterOptions?: Array<SwitchCluster>;
   modelValue?: string;
 }
 
@@ -20,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["update:modelValue"]);
 
-const selectedCluster = ref<SelectedClusterType | null>(null);
+const selectedCluster = ref<SwitchCluster | null>(null);
 const selectedClusterName = ref<null | string>(null);
 
 const getProviderIcon = (provider: string) => {
@@ -100,15 +101,23 @@ watch(
       </div>
     </template>
     <template #option="props">
-      <div class="is-flex is-align-items-center">
+      <div class="is-flex is-align-items-center is-fullwidth" :class="{ 'is-disabled': props.option?.$isDisabled }">
         <img
           class="mr-15"
           :src="getProviderIcon(props.option.provider)"
           onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
           alt="No cluster selected"
         />
-        <div>
-          <p>{{ props.option.displayName }}</p>
+        <div class="is-fullwidth">
+          <p class="is-flex is-justify-content-space-between is-fullwidth">
+            <span>{{ props.option.displayName }}</span>
+            <badge
+              v-if="props.option?.$isDisabled"
+              modifierClasses="is-warning is-outlined"
+              :label="props.option?.status || 'Not Available'"
+            >
+            </badge>
+          </p>
           <p class="location">{{ props.option.location }}</p>
         </div>
       </div>

package/vue-components/v3/sidebar/SidebarItem.vue

@@ -49,7 +49,7 @@ watch(
         <img :src="icon" alt="icon" />
       </span>
       <strong>{{ title }}</strong>
-      <span v-if="id === 'claim'" class="badge is-primary whats-new-rel">NEW</span>
+      <span v-if="id === 'claim'" class="badge is-primary whats-new-rel ml-8">NEW</span>
     </router-link>
   </li>
 </template>