@appscode/design-system 1.0.3-alpha.7 → 1.0.43-alpha.4

package/layouts/_code-preview.scss

@@ -156,6 +156,7 @@
         pre {
           margin: 0;
           border-radius: 4px;
+          font-size: 12px;
 
           .token {
             &.tag {

package/package.json

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

package/plugins/vue-toaster.js

@@ -34,6 +34,7 @@ module.exports = {
       message: (payload) => {
         if (payload) {
           if (typeof payload === "string") return payload;
+          else if (payload.response && payload.response.data && payload.response.data.message) return payload.response.data.message;
           else if (payload.message) return payload.message;
           else return "Something Went Wrong";
         } else return "Something Went Wrong";

package/vue-components/v2/card/CardContent.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="ac-card-content b-1 b-t-n">
+    <slot />
+  </div>
+</template>

package/vue-components/v2/card/CardHeader.vue

@@ -0,0 +1,12 @@
+<template>
+  <div
+    class="is-flex is-justify-content-space-between pt-8 pb-8 pl-20 pr-20 b-1"
+  >
+    <div class="header-left-content">
+      <slot name="card-header-left" />
+    </div>
+    <div class="header-right-content">
+      <slot name="card-header-right" />
+    </div>
+  </div>
+</template>

package/vue-components/v2/card/OverviewCard.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="card-data">
+    <p>
+      <slot name="card-label" />
+    </p>
+    <h5>
+      <slot name="card-value" />
+    </h5>
+  </div>
+</template>

package/vue-components/v2/card/OverviewCards.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="overview-card">
+    <slot />
+  </div>
+</template>

package/vue-components/v2/card/PaymentCards.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- card start -->
   <div class="ac-payment-card-wrapper">
     <!-- loader start -->
     <div v-if="isLoaderActive" class="ac-payment-card is-transparent-bg p-0">
@@ -15,10 +14,8 @@
       <slot name="cards" />
     </template>
 
-    <div class="ac-payment-card add-card">
-      <!-- single payment methode start -->
-      <slot name="add-card" />
-    </div>
+    <!-- single payment method start -->
+    <slot name="add-card" />
   </div>
 </template>
 <script>
@@ -26,13 +23,13 @@ import { ContentLoader } from "vue-content-loader";
 
 export default {
   components: {
-    ContentLoader
+    ContentLoader,
   },
   props: {
     isLoaderActive: {
       type: Boolean,
-      default: false
-    }
-  }
+      default: false,
+    },
+  },
 };
 </script>

package/vue-components/v2/content/ContentHeader.vue

@@ -38,7 +38,7 @@ export default {
       default: ""
     },
     removeBorderBottom: {
-      type: String,
+      type: Boolean,
       default: false
     }
   },

package/vue-components/v2/header/Header.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- body header start -->
   <div class="inner-header">
     <div
       class="is-flex is-justify-content-space-between"

package/vue-components/v2/modal/Modal.vue

@@ -1,7 +1,7 @@
 <template>
-  <!-- for transition https://github.com/adamwathan/vue-tailwind-examples/blob/master/src/components/Modal.vue -->
-  <!-- modal start  -->
   <portal to="modal">
+    <!-- for transition https://github.com/adamwathan/vue-tailwind-examples/blob/master/src/components/Modal.vue -->
+    <!-- modal start  -->
     <div
       v-if="showModal"
       class="ac-modal is-middle-alignment"
@@ -45,7 +45,6 @@
       </div>
     </div>
   </portal>
-  <!-- modal end  -->
 </template>
 
 <script>

package/vue-components/v2/modals/JsonShowModal.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- modal start  -->
   <modal
     :title="editorTitle"
     :open="open"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-drawer-wrapper">
+  <div class="app-drawer-wrapper d-table-cell">
     <div class="drawer-icon">
       <svg
         class="gb_We"
@@ -20,14 +20,16 @@
             <article class="media">
               <figure class="media-left">
                 <p class="image">
-                  <img :src="app.icon_url" />
+                  <img
+                    :src="app.icon_url"
+                  />
                 </p>
               </figure>
               <div class="media-content">
                 <div class="content">
                   <p>
-                    <strong>{{ app.title }}</strong>
-                    <span>{{ app.sub_title }}</span>
+                    <strong>{{app.title}}</strong>
+                    <span>{{app.sub_title}}</span>
                   </p>
                 </div>
               </div>
@@ -44,8 +46,8 @@ export default {
   props: {
     apps: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
   components: {
     NavbarItemContent: () => import("./NavbarItemContent.vue"),

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

@@ -3,7 +3,10 @@
     <div class="pagination-filter level-left">
       <div
         class="level-item"
-        v-show="totalNoOfItems > preSelectedItemsCountPerPage"
+        v-show="
+          !hideRowsPerPageSelection &&
+          totalNoOfItems > preSelectedItemsCountPerPage
+        "
       >
         <label>Rows per page</label>
         <select v-model="selectedItemCountPerPage" name="page">
@@ -52,6 +55,10 @@
 <script>
 export default {
   props: {
+    hideRowsPerPageSelection: {
+      type: Boolean,
+      default: false,
+    },
     totalNoOfItems: {
       type: Number,
       default: 0,

package/vue-components/v2/sidebar/SidebarItem.vue

@@ -34,7 +34,7 @@ export default {
       default: false,
     },
     icon: {
-      type: String,
+      type: null,
       default: "@/assets/images/icons/basic.svg",
     },
   },

package/vue-components/v2/table/InfoTable.vue

@@ -1,6 +1,9 @@
 <template>
   <table-container>
-    <table class="table ac-info-table is-fullwidth">
+    <table
+      class="table ac-info-table is-fullwidth"
+      :class="{ 'pl-0 pr-0': removeContentPadding }"
+    >
       <tbody v-if="isFullTableLoaderActive">
         <!-- table loader -->
         <table-row v-for="i in loaderCols" :key="i">
@@ -15,7 +18,10 @@
       </tbody>
       <tbody
         v-else
-        :class="isTableEmpty ? 'no-data-available has-text-centered p-10' : ''"
+        :class="{
+          'no-data-available has-text-centered p-10': isTableEmpty,
+          'pl-0 pr-0': removeContentPadding
+        }"
       >
         <template v-if="!isTableEmpty">
           <!-- table rows -->
@@ -60,7 +66,11 @@ export default {
     },
     tableHeaders: {
       type: Array,
-      default: () => [],
+      default: () => []
+    },
+    removeContentPadding: {
+      type: Boolean,
+      default: false,
     },
   },
 

package/vue-components/v2/table/Table.vue

@@ -18,8 +18,17 @@
           </th>
         </table-row>
         <table-row v-else>
-          <th v-for="tableHeader in tableHeaders" :key="tableHeader">
-            {{ tableHeader }}
+          <th
+            v-for="(tableHeader, idx) in tableHeaders"
+            :key="idx"
+            :class="{
+              sorting: headerSortables[idx].enabled,
+              'sorting-desc': headerSortables[idx].mode === 'desc',
+              'sorting-asc': headerSortables[idx].mode === 'asc',
+            }"
+            @click.prevent="headerSortables[idx].enabled && emitSortEvent(idx)"
+          >
+            {{ headerLabels[idx] }}
           </th>
           <th
             ref="action-section"
@@ -41,8 +50,14 @@
           </th>
         </table-row>
         <table-row v-else>
-          <table-cell v-for="tableHeader in tableHeaders" :key="tableHeader">
-            <cell-value :is-loader-active="true" :cell-title="tableHeader" />
+          <table-cell
+            v-for="(tableHeader, idx) in tableHeaders"
+            :key="headerLabels[idx]"
+          >
+            <cell-value
+              :is-loader-active="true"
+              :cell-title="headerLabels[idx]"
+            />
           </table-cell>
         </table-row>
       </tbody>
@@ -112,12 +127,13 @@ export default {
   data() {
     return {
       fakeCellWidth: 0,
+      headerSortables: [],
     };
   },
 
   computed: {
     loaderCols() {
-      if (this.isFullLoaderActive) {
+      if (this.isFullTableLoaderActive) {
         return 5;
       } else if (this.isLoaderActive) {
         return Math.max(this.tableHeaders.length + 1, 5);
@@ -128,6 +144,41 @@ export default {
     isFullTableLoaderActive() {
       return !this.tableHeaders.length;
     },
+    headerLabels() {
+      return this.tableHeaders.map((th) =>
+        typeof th === "string" ? th : th?.label || "Label"
+      );
+    },
+  },
+
+  watch: {
+    tableHeaders: {
+      immediate: true,
+      handler(n) {
+        if (this.headerSortables.length === n.length) {
+          n.forEach((th, idx) => {
+            if (this.headerSortables[idx].enabled !== !!th?.sortable) {
+              this.headerSortables[idx].enabled = !!th?.sortable;
+              this.headerSortables[idx].mode = "";
+            }
+          });
+        } else {
+          this.headerSortables = n.map((th) => {
+            if (typeof th === "string") {
+              return {
+                enabled: false,
+                mode: "",
+              };
+            } else {
+              return {
+                enabled: !!th?.sortable,
+                mode: "",
+              };
+            }
+          });
+        }
+      },
+    },
   },
 
   updated() {
@@ -144,6 +195,25 @@ export default {
         this.fakeCellWidth = d;
       }
     },
+    emitSortEvent(index) {
+      const emitValue = {
+        index,
+        label: this.tableHeaders[index].label,
+        mode: "",
+      };
+
+      this.headerSortables.forEach((hs, idx) => {
+        if (idx !== index) hs.mode = "";
+        else {
+          if (hs.mode === "asc") hs.mode = "desc";
+          else hs.mode = "asc";
+
+          emitValue.mode = hs.mode;
+        }
+      });
+
+      this.$emit("sort", emitValue);
+    },
   },
 };
 </script>

package/vue-components/v3/button/Button.vue

@@ -0,0 +1,73 @@
+<template>
+  <button
+    class="button ac-button is-extra-small"
+    :class="`${modifierClasses}${isLoaderActive ? ' is-loading' : ''}`"
+    :disabled="disabled ? true : null"
+    @click="handleClick"
+  >
+    <span v-if="iconClass || iconImage" class="icon is-small">
+      <img
+        v-if="iconImage"
+        :src="iconImage"
+        alt="close-icon"
+        :width="iconImageWidth"
+      />
+      <i v-else :class="`fa fa-${iconClass}`" aria-hidden="true" />
+    </span>
+    <span v-if="title" :class="titleModifierClass">{{ title }}</span>
+    <slot />
+  </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    // button title
+    title: {
+      type: String,
+      default: "",
+    },
+    // for loader
+    isLoaderActive: {
+      type: Boolean,
+      default: false,
+    },
+    // for disability
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // for icon
+    iconClass: {
+      type: String,
+      default: "",
+    },
+    iconImage: {
+      type: String,
+      default: "",
+    },
+    iconImageWidth: {
+      type: Number,
+      default: undefined,
+    },
+    // modifier class
+    modifierClasses: {
+      type: String,
+      default: "is-primary",
+    },
+    titleModifierClass: {
+      type: String,
+      default: "",
+    },
+  },
+
+  emits: ["click"],
+
+  methods: {
+    handleClick(e) {
+      if (!this.disabled) this.$emit("click", e);
+    },
+  },
+});
+</script>