@appscode/design-system 2.4.27 → 2.4.28

package/package.json

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

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

@@ -6,13 +6,12 @@
     // gap: 48px;
     &.is-column {
       flex-direction: column;
-      align-items: self-start;
       li {
         --line: 2px;
         flex-direction: row;
         gap: 8px;
         text-align: left;
-        align-items: baseline;
+        align-items: flex-start;
         padding-bottom: 24px;
         .step-header {
           margin: 0;
@@ -44,6 +43,17 @@
         }
       }
     }
+    &.is-row {
+      li {
+        &.is-active {
+          &:not(&:first-child) {
+            &::before {
+              background-color: $ac-primary;
+            }
+          }
+        }
+      }
+    }
     li {
       display: flex;
       flex: 1 1 0%;

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

@@ -99,9 +99,9 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
     :class="[
       wrapperDivCustomClass,
       {
-        'has-refresh-button': hasRefreshBtn,
+        'has-refresh-button': !disabled && (hasRefreshBtn || isLoaderActive),
         'is-disable': disabled || isLoaderActive,
-        'has-clear-button': allowEmpty && model,
+        'has-clear-button': !disabled && allowEmpty && model,
       },
     ]"
     data-testid="cluster-status-select-header"
@@ -115,13 +115,17 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
       {{ isLabelHoisted ? label : `Select ${label}` }}
       <span v-if="showStar" class="is-required has-text-danger"> * </span>
     </label>
-    <button v-if="allowEmpty && model" class="button ac-button is-clear is-transparent" @click.prevent="model = ''">
+    <button
+      v-if="!disabled && allowEmpty && model"
+      class="button ac-button is-clear is-transparent"
+      @click.prevent="model = ''"
+    >
       <span class="icon width-16">
         <CrossIcon />
       </span>
     </button>
     <button
-      v-if="hasRefreshBtn"
+      v-if="!disabled && (hasRefreshBtn || isLoaderActive)"
       class="button ac-button is-primary is-refresh is-transparent"
       :class="{ spin: isLoaderActive }"
       @click.prevent="$emit('refresh-btn-click')"

package/vue-components/v3/steps/Steps.vue

@@ -1,22 +1,16 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
-const CheckIcon = defineAsyncComponent(() => import("../icons/CheckIcon.vue"));
+import CheckIcon from "../icons/CheckIcon.vue";
+
 interface Props {
   direction?: string;
-  active?: boolean;
-  complete?: boolean;
-  title?: string;
-  description?: string;
-  count?: string;
+  active?: number;
+  options?: { title: string; description: string; id: number }[];
 }
 
 withDefaults(defineProps<Props>(), {
   direction: "is-row",
-  active: false,
-  complete: false,
-  title: "Title",
-  description: "Description",
-  count: "1",
+  active: 0,
+  options: () => [],
 });
 </script>
 
@@ -24,14 +18,19 @@ withDefaults(defineProps<Props>(), {
   <div class="steps-wrapper">
     <ol class="steps" :class="direction">
       <!-- 'is-active': if active, 'is-complete':  if complete -->
-      <li class="step" :class="{ 'is-active': active, 'is-complete': complete }" v-for="i in 4" :key="i">
+      <li
+        v-for="op in options"
+        class="step"
+        :key="op.id"
+        :class="{ 'is-active': active === op.id, 'is-complete is-active': active > op.id }"
+      >
         <div class="step-header">
-          <span class="icon" v-if="complete"><CheckIcon /></span>
-          <span v-else>{{ count }}</span>
+          <span class="icon" v-if="active > op.id"><CheckIcon /></span>
+          <span v-else>{{ op.id }}</span>
         </div>
         <div class="is-flex is-flex-direction-column">
-          <h5>{{ title }}</h5>
-          <p>{{ description }}</p>
+          <h5>{{ op.title }}</h5>
+          <p>{{ op.description }}</p>
         </div>
       </li>
     </ol>