@appscode/design-system 2.5.10 → 2.6.0-node22

package/package.json

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

package/vue-components/v3/breadcrumbs/Breadcrumb.vue

@@ -14,7 +14,7 @@ const route = useRoute();
 
 const pathReplaceWithParam = (path: string) => {
   //Split the path and remove the first and last empty block
-  let splitPath = path.split("/").filter((element) => element !== "");
+  const splitPath = path.split("/").filter((element) => element !== "");
 
   //Replace all element with query params where the element start with ":"
   // Then again add them wthi "/" and return the path value
@@ -37,7 +37,7 @@ const createVal = (startIdx: number, paths: Array<string>) => {
 
 const createList = (paths: Array<string>) => {
   //Split all the path and remove all empty block
-  let spath = paths.map((element) => {
+  const spath = paths.map((element) => {
     return element.split("/").filter((word) => word !== "");
   });
 

package/vue-components/v3/editor/MonacoEditor.vue

@@ -186,11 +186,11 @@ export default defineComponent({
       this.$emit("editorDidMount", this.editor);
     },
     _setValue(value) {
-      let editor = this._getEditor();
+      const editor = this._getEditor();
       if (editor) return editor.setValue(value);
     },
     _getValue() {
-      let editor = this._getEditor();
+      const editor = this._getEditor();
       if (!editor) return "";
       return editor.getValue();
     },

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>

package/vue-components/v3/navbar/Appdrawer.vue

@@ -102,7 +102,7 @@ const filteredAppList = appListWithUrl.filter((element) => {
   if (element.name === props.currentApp) return false;
 
   // remove billing selfhost & learn from selfhost mode
-  let selfHostList = ["billing", "selfhost", "learn"];
+  const selfHostList = ["billing", "selfhost", "learn"];
   if (isSelfHosted.value && selfHostList.includes(element.name)) return false;
 
   return true;

package/vue-components/v3/pagination/Pagination.vue

@@ -43,7 +43,7 @@ const noOfPageNos = computed(() => {
 });
 
 const pageRange = computed(() => {
-  let o = { start: 1, end: 0 };
+  const o = { start: 1, end: 0 };
   if (noOfPageNos.value < 5) {
     o.start = 1;
     o.end = noOfPageNos.value;
@@ -63,9 +63,9 @@ const pageRange = computed(() => {
 });
 
 const pages = computed(() => {
-  let ar = [];
-  let start = pageRange.value.start;
-  let end = pageRange.value.end;
+  const ar = [];
+  const start = pageRange.value.start;
+  const end = pageRange.value.end;
   for (let i = start; i <= end; i++) {
     ar.push(i);
   }
@@ -73,8 +73,8 @@ const pages = computed(() => {
 });
 
 const itemsRange = computed(() => {
-  let start = (activePageNo.value - 1) * selectedItemCountPerPage.value;
-  let end = Math.min(activePageNo.value * selectedItemCountPerPage.value, props.totalNoOfItems);
+  const start = (activePageNo.value - 1) * selectedItemCountPerPage.value;
+  const end = Math.min(activePageNo.value * selectedItemCountPerPage.value, props.totalNoOfItems);
 
   return { start, end };
 });