@appscode/design-system 2.6.0 → 2.6.1

package/package.json

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

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

@@ -13,6 +13,12 @@
   .card-details-inner {
     width: 100%;
   }
+  .top-right {
+    top: 12px;
+    right: 12px;
+    position: absolute;
+    z-index: 1;
+  }
 
   .ac-options {
     position: absolute;

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

@@ -31,6 +31,8 @@ const OptionDots = defineAsyncComponent(() => import("../option-dots/Options.vue
     <option-dots v-if="showOptions" :position="'is-right'">
       <slot name="options" />
     </option-dots>
+
+    <div v-else class="top-right"><slot name="custom-option" /></div>
     <div class="card-details-inner" :class="modifierClasses">
       <div class="c-header">
         <div class="c-logo">

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

@@ -12,6 +12,7 @@ import AcButton from "../button/Button.vue";
 
 interface Props {
   isButtonsDisabled?: boolean;
+  isButtonLoaderActive?: boolean;
   disabled?: boolean;
   isCreateDisabled?: boolean;
   label: string;
@@ -51,6 +52,7 @@ const prop = withDefaults(defineProps<Props>(), {
   showCustomMessage: false,
   buttonLabel: "Add New",
   formLabel: "",
+  isButtonLoaderActive: false,
 });
 
 const Accordion = defineAsyncComponent(() => import("./Accordion.vue"));
@@ -126,6 +128,7 @@ function collapseForm() {
             :disabled="disabled ? true : false"
             data-testid="single-step-form-array-item-save-button"
             @click.prevent="onSaveItem()"
+            :is-loader-active="isButtonLoaderActive"
             title="Save"
             icon-class="unplugin"
           >
@@ -136,6 +139,7 @@ function collapseForm() {
           <ac-button
             modifier-classes="is-small is-light is-danger"
             data-testid="single-step-form-array-item-close-button"
+            :disabled="isButtonLoaderActive"
             @click.prevent="resetAllData()"
           >
             <span class="icon"><HeroiconsXMark20Solid /></span>
@@ -213,6 +217,7 @@ function collapseForm() {
                         v-if="!isButtonsDisabled && isEditable"
                         modifier-classes="is-small is-light is-primary"
                         data-testid="single-step-form-array-item-edit-button"
+                        :disabled="isButtonLoaderActive"
                         @click.prevent="onEditClick(idxRow)"
                       >
                         <span class="icon"> <HeroiconsPencilSquare /> </span>
@@ -222,6 +227,7 @@ function collapseForm() {
                         v-if="!isButtonsDisabled"
                         modifier-classes="is-small is-light is-danger"
                         data-testid="single-step-form-array-item-delete-button"
+                        :disabled="isButtonLoaderActive"
                         @click.prevent="onDeleteItem(idxRow)"
                       >
                         <span class="icon"> <HeroiconsTrash /> </span>
@@ -231,6 +237,7 @@ function collapseForm() {
                         v-if="isExpandable"
                         modifier-classes="is-small is-light"
                         data-testid="single-step-form-array-item-show-details-button"
+                        :disabled="isButtonLoaderActive"
                         @click.prevent="onDetailsClick(idxRow)"
                       >
                         <span v-if="expandableFieldIndex === idxRow" class="icon"><HeroiconsChevronUpSolid /></span>
@@ -254,6 +261,7 @@ function collapseForm() {
                           :disabled="disabled ? true : false"
                           data-testid="single-step-form-array-item-save-button"
                           @click.prevent="onSaveEditedItem(idxRow)"
+                          :is-loader-active="isButtonLoaderActive"
                           icon-class="unplugin"
                           title="Save"
                         >
@@ -263,6 +271,7 @@ function collapseForm() {
                         <!-- close button start -->
                         <ac-button
                           modifier-classes="is-small is-danger is-light"
+                          :disabled="isButtonLoaderActive"
                           data-testid="single-step-form-array-item-close-button"
                           @click.prevent="resetAllData()"
                         >