@appscode/design-system 2.5.10 → 2.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.5.10",
+  "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

@@ -27,6 +27,9 @@ interface Props {
   saveNewItem?: Function;
   onDeleteItem: Function;
   initiallyHidden?: boolean;
+  showCustomMessage?: boolean;
+  buttonLabel?: string;
+  formLabel?: string;
 }
 
 const prop = withDefaults(defineProps<Props>(), {
@@ -45,6 +48,9 @@ const prop = withDefaults(defineProps<Props>(), {
   saveEditedItem: () => () => ({}),
   onDeleteItem: () => () => ({}),
   initiallyHidden: false,
+  showCustomMessage: false,
+  buttonLabel: "Add New",
+  formLabel: "",
 });
 
 const Accordion = defineAsyncComponent(() => import("./Accordion.vue"));
@@ -101,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"
@@ -116,12 +122,14 @@ function collapseForm() {
         <div class="buttons pb-5">
           <!-- save button start -->
           <ac-button
-            modifier-classes="is-small is-primary is-light"
+            modifier-classes="is-small is-primary"
             :disabled="disabled ? true : false"
             data-testid="single-step-form-array-item-save-button"
             @click.prevent="onSaveItem()"
+            title="Save"
+            icon-class="unplugin"
           >
-            <span class="icon"><FluentSave28Regular /></span>
+            <template #icon> <FluentSave28Regular /> </template>
           </ac-button>
           <!-- save button end -->
           <!-- CLOSE button start -->
@@ -148,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"
@@ -159,11 +167,11 @@ function collapseForm() {
         />
         <ac-button
           v-if="!isButtonsDisabled && !isCreateDisabled"
-          modifier-classes="is-primary is-light is-outlined"
+          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>
+          <span class="icon"><HeroiconsPlus /> </span><span>{{ buttonLabel }}</span>
         </ac-button>
       </div>
       <!-- Label and Add New Button End -->
@@ -177,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">
@@ -237,17 +245,19 @@ 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 -->
                         <ac-button
-                          modifier-classes="is-small is-primary is-light"
+                          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>
+                          <template #icon> <FluentSave28Regular /> </template>
                         </ac-button>
                         <!-- save button end -->
                         <!-- close button start -->
@@ -280,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>
@@ -288,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>