@appscode/design-system 1.0.43-alpha.3 → 1.0.43-alpha.4

package/package.json

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

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,6 +127,7 @@ export default {
   data() {
     return {
       fakeCellWidth: 0,
+      headerSortables: [],
     };
   },
 
@@ -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/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>
@@ -102,6 +117,7 @@ export default defineComponent({
       default: 1920,
     },
   },
+  emits: ["sort"],
   components: {
     TableContainer: defineAsyncComponent(() =>
       import("../../v2/table/TableContainer.vue").then(
@@ -130,6 +146,7 @@ export default defineComponent({
   data() {
     return {
       fakeCellWidth: 0,
+      headerSortables: [],
     };
   },
 
@@ -146,6 +163,41 @@ export default defineComponent({
     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() {
@@ -162,6 +214,25 @@ export default defineComponent({
         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>