@appscode/design-system 2.5.9 → 2.5.11

package/package.json

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

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

@@ -8,8 +8,10 @@ import HeroiconsPencilSquare from "~icons/heroicons/pencil-square";
 import HeroiconsTrash from "~icons/heroicons/trash";
 import HeroiconsChevronDownSolid from "~icons/heroicons/chevron-down-solid";
 import HeroiconsChevronUpSolid from "~icons/heroicons/chevron-up-solid";
+import AcButton from "../button/Button.vue";
 
 interface Props {
+  isButtonsDisabled?: boolean;
   disabled?: boolean;
   isCreateDisabled?: boolean;
   label: string;
@@ -25,9 +27,13 @@ interface Props {
   saveNewItem?: Function;
   onDeleteItem: Function;
   initiallyHidden?: boolean;
+  showCustomMessage?: boolean;
+  buttonLabel?: string;
+  formLabel?: string;
 }
 
 const prop = withDefaults(defineProps<Props>(), {
+  isButtonsDisabled: false,
   disabled: false,
   isCreateDisabled: false,
   label: "",
@@ -42,6 +48,9 @@ const prop = withDefaults(defineProps<Props>(), {
   saveEditedItem: () => () => ({}),
   onDeleteItem: () => () => ({}),
   initiallyHidden: false,
+  showCustomMessage: false,
+  buttonLabel: "Add New",
+  formLabel: "",
 });
 
 const Accordion = defineAsyncComponent(() => import("./Accordion.vue"));
@@ -98,12 +107,12 @@ function collapseForm() {
 </script>
 
 <template>
-  <div :class="{ 'ac-nested-elements': label }">
+  <div>
     <!-- Add New Form Start -->
     <template v-if="isSavingNewElement">
-      <div class="is-flex is-aligned-item-center is-justify-content-space-between">
+      <div class="is-flex is-align-items-center is-justify-content-space-between">
         <accordion
-          :label="`New ${label}`"
+          :label="formLabel || `New ${label}`"
           :isCollapsible="isCollapsible"
           :isRequired="isRequired"
           :errors="errors"
@@ -112,24 +121,25 @@ function collapseForm() {
         />
         <div class="buttons pb-5">
           <!-- save button start -->
-          <button
-            class="button ac-button is-small is-primary is-light"
+          <ac-button
+            modifier-classes="is-small is-primary"
             :disabled="disabled ? true : false"
             data-testid="single-step-form-array-item-save-button"
-            title="Save"
             @click.prevent="onSaveItem()"
+            title="Save"
+            icon-class="unplugin"
           >
-            <span class="icon"><FluentSave28Regular /></span>
-          </button>
+            <template #icon> <FluentSave28Regular /> </template>
+          </ac-button>
           <!-- save button end -->
           <!-- CLOSE button start -->
-          <button
-            class="button ac-button is-small is-danger is-light"
+          <ac-button
+            modifier-classes="is-small is-light is-danger"
             data-testid="single-step-form-array-item-close-button"
             @click.prevent="resetAllData()"
           >
             <span class="icon"><HeroiconsXMark20Solid /></span>
-          </button>
+          </ac-button>
           <!-- CLOSE button end -->
         </div>
       </div>
@@ -146,7 +156,7 @@ function collapseForm() {
 
     <!-- Label and Add New Button Start -->
     <template v-else>
-      <div class="is-flex is-aligned-item-center is-justify-content-space-between">
+      <div class="is-flex is-align-items-center is-justify-content-space-between">
         <accordion
           :label="label"
           :isCollapsible="isCollapsible"
@@ -155,14 +165,14 @@ function collapseForm() {
           :isFormHidden="isFormHidden"
           @click="collapseForm()"
         />
-        <button
-          v-if="!disabled && !isCreateDisabled"
-          class="button ac-button is-primary is-light is-outlined"
+        <ac-button
+          v-if="!isButtonsDisabled && !isCreateDisabled"
+          modifier-classes="is-primary is-small"
           data-testid="single-step-form-array-item-create-button"
           @click.prevent="onAddClick()"
         >
-          <span class="icon"><HeroiconsPlus /> </span><span>Add New</span>
-        </button>
+          <span class="icon"><HeroiconsPlus /> </span><span>{{ buttonLabel }}</span>
+        </ac-button>
       </div>
       <!-- Label and Add New Button End -->
 
@@ -175,8 +185,8 @@ function collapseForm() {
       >
         <!-- existing element start -->
 
-        <div v-if="dataForTable.length" class="ac-table-container table-container my-4">
-          <table class="table ac-table ac-striped is-fullwidth" data-testid="ac-table">
+        <div v-if="dataForTable.length" class="ac-table-container table-container my-2">
+          <table class="table ac-table ac-striped is-fullwidth b-1" data-testid="ac-table">
             <thead>
               <tr>
                 <th v-for="(item, idx) in tableHeaders" :key="idx + item.name">
@@ -199,37 +209,34 @@ function collapseForm() {
                   <!-- Action Buttons Start -->
                   <td>
                     <div class="buttons is-justify-content-flex-end">
-                      <button
-                        v-if="!disabled && isEditable"
-                        class="button ac-button has-text-primary is-small"
-                        title="Edit"
+                      <ac-button
+                        v-if="!isButtonsDisabled && isEditable"
+                        modifier-classes="is-small is-light is-primary"
                         data-testid="single-step-form-array-item-edit-button"
                         @click.prevent="onEditClick(idxRow)"
                       >
                         <span class="icon"> <HeroiconsPencilSquare /> </span>
-                      </button>
+                      </ac-button>
 
-                      <button
-                        v-if="!disabled"
-                        title="Delete"
-                        class="button ac-button has-text-danger is-small"
+                      <ac-button
+                        v-if="!isButtonsDisabled"
+                        modifier-classes="is-small is-light is-danger"
                         data-testid="single-step-form-array-item-delete-button"
                         @click.prevent="onDeleteItem(idxRow)"
                       >
                         <span class="icon"> <HeroiconsTrash /> </span>
-                      </button>
+                      </ac-button>
 
-                      <button
+                      <ac-button
                         v-if="isExpandable"
-                        class="button ac-button is-small"
-                        title="Expand"
+                        modifier-classes="is-small is-light"
                         data-testid="single-step-form-array-item-show-details-button"
                         @click.prevent="onDetailsClick(idxRow)"
                       >
                         <span v-if="expandableFieldIndex === idxRow" class="icon"><HeroiconsChevronUpSolid /></span>
 
                         <span v-else class="icon"><HeroiconsChevronDownSolid /></span>
-                      </button>
+                      </ac-button>
                     </div>
                   </td>
                   <!-- Action Button End -->
@@ -238,27 +245,29 @@ function collapseForm() {
                 <tr v-if="editFieldIndex === idxRow" style="background-color: #f8f8f8">
                   <td :colspan="itemRow.cells.length + 1">
                     <!-- nested elements start  -->
-                    <div class="mt-15 mb-15 is-flex is-aligned-item-center is-justify-content-space-between">
+                    <div class="mt-15 mb-15 is-flex is-align-items-center is-justify-content-space-between">
                       <accordion :label="`Edit ${label}`" :is-collapsible="false" />
                       <div class="buttons pb-5">
                         <!-- save button start -->
-                        <button
-                          class="button ac-button is-small is-outlined is-light is-primary"
+                        <ac-button
+                          modifier-classes="is-small is-primary"
                           :disabled="disabled ? true : false"
                           data-testid="single-step-form-array-item-save-button"
                           @click.prevent="onSaveEditedItem(idxRow)"
+                          icon-class="unplugin"
+                          title="Save"
                         >
-                          <span class="icon"> <FluentSave28Regular /> </span>
-                        </button>
+                          <template #icon> <FluentSave28Regular /> </template>
+                        </ac-button>
                         <!-- save button end -->
                         <!-- close button start -->
-                        <button
-                          class="button ac-button is-small is-outlined is-light is-danger"
+                        <ac-button
+                          modifier-classes="is-small is-danger is-light"
                           data-testid="single-step-form-array-item-close-button"
                           @click.prevent="resetAllData()"
                         >
                           <span class="icon"> <HeroiconsXMark20Solid /> </span>
-                        </button>
+                        </ac-button>
                         <!-- close button end -->
                       </div>
                     </div>
@@ -281,7 +290,8 @@ function collapseForm() {
           </table>
         </div>
         <div v-else class="label-action is-flex is-flex-wrap-wrap mb-5">
-          <strong> No Item Found. </strong>
+          <slot v-if="showCustomMessage" name="custom-message" />
+          <strong v-else> No Item Found. </strong>
         </div>
         <!-- existing element end -->
       </div>
@@ -289,3 +299,11 @@ function collapseForm() {
     </template>
   </div>
 </template>
+<style lang="scss">
+.ac-striped {
+  &.table thead td,
+  &.table thead th {
+    border-width: 0 0 1px;
+  }
+}
+</style>