@appscode/design-system 1.0.43-alpha.115 → 1.0.43-alpha.118

package/package.json

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

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

@@ -23,10 +23,28 @@
             :key="idx"
             :class="{
               sorting: headerSortables[idx] && headerSortables[idx].enabled,
-              'sorting-desc': headerSortables[idx] && headerSortables[idx].mode === 'desc',
-              'sorting-asc': headerSortables[idx] && headerSortables[idx].mode === 'asc',
+              'sorting-desc':
+                headerSortables[idx] && headerSortables[idx].mode === 'desc',
+              'sorting-asc':
+                headerSortables[idx] && headerSortables[idx].mode === 'asc',
+              'has-text-centered':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'center',
+              'has-text-left':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'left',
+              'has-text-right':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'right',
             }"
-            @click.prevent="headerSortables[idx] && headerSortables[idx].enabled && emitSortEvent(idx)"
+            @click.prevent="
+              headerSortables[idx] &&
+                headerSortables[idx].enabled &&
+                emitSortEvent(idx)
+            "
           >
             {{ headerLabels[idx] }}
           </th>
@@ -146,7 +164,7 @@ export default {
     },
     headerLabels() {
       return this.tableHeaders.map((th) =>
-        typeof th === "string" ? th : th.label || "Label"
+        typeof th === "string" ? th : th.name || "Label"
       );
     },
   },
@@ -157,8 +175,15 @@ export default {
       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;
+            if (
+              this.headerSortables[idx].enabled !==
+              !!(th && th.sort && th.sort.enable)
+            ) {
+              this.headerSortables[idx].enabled = !!(
+                th &&
+                th.sort &&
+                th.sort.enable
+              );
               this.headerSortables[idx].mode = "";
             }
           });
@@ -171,7 +196,7 @@ export default {
               };
             } else {
               return {
-                enabled: !!th.sortable,
+                enabled: !!(th && th.sort && th.sort.enable),
                 mode: "",
               };
             }
@@ -198,7 +223,7 @@ export default {
     emitSortEvent(index) {
       const emitValue = {
         index,
-        label: this.tableHeaders[index].label,
+        label: this.tableHeaders[index].name,
         mode: "",
       };
 

package/vue-components/v2/table/table-cell/GenericCell.vue

@@ -0,0 +1,56 @@
+<template>
+  <span
+    :class="{
+      'is-flex': cellDescriptor.type !== 'object',
+      'is-align-items-center': cellValue.icon,
+      'is-justify-content-center': cellDescriptor.textAlign === 'center',
+      'is-justify-content-left': cellDescriptor.textAlign === 'left',
+      'is-justify-content-right': cellDescriptor.textAlign === 'right'
+    }"
+  >
+    <span v-if="cellValue.icon" class="icon p-0 mr-10">
+      <img width="15" :src="cellValue.icon" />
+    </span>
+    <router-link v-if="cellValue.link" :to="getCellLink(cellValue)">
+      {{ cellValue.data }}
+    </router-link>
+    <tag v-else-if="cellValue.color" :class="`is-${cellValue.color}`">
+      {{ cellValue.data }}
+    </tag>
+    <cell-value
+      v-else
+      :cell-title="cellDescriptor.name"
+      :value="cellValue.data || '-'"
+      :tooltip="cellValue.tooltip || JSON.stringify(cellValue.data)"
+    />
+  </span>
+</template>
+<script>
+export default {
+  components: {
+    Tag: () => import("../../tag/Tag.vue"),
+    CellValue: () => import("../table-cell/CellValue.vue")
+  },
+  props: {
+    cellDescriptor: {
+      type: Object,
+      default: () => ({})
+    },
+    cellValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    getCellLink(cell) {
+      const inject = (str, obj) => str.replace(/\${(.*?)}/g, (x, g) => obj[g]);
+      const { user, cluster } = this.$route.params;
+      const link = inject(cell.link || "", {
+        username: user,
+        clustername: cluster
+      });
+      return link;
+    }
+  }
+};
+</script>

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

@@ -25,6 +25,18 @@
               sorting: headerSortables[idx].enabled,
               'sorting-desc': headerSortables[idx].mode === 'desc',
               'sorting-asc': headerSortables[idx].mode === 'asc',
+              'has-text-centered':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'center',
+              'has-text-left':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'left',
+              'has-text-right':
+                typeof tableHeader === 'string'
+                  ? false
+                  : tableHeader.textAlign === 'right',
             }"
             @click.prevent="headerSortables[idx].enabled && emitSortEvent(idx)"
           >
@@ -165,7 +177,7 @@ export default defineComponent({
     },
     headerLabels() {
       return this.tableHeaders.map((th) =>
-        typeof th === "string" ? th : th?.label || "Label"
+        typeof th === "string" ? th : th?.name || "Label"
       );
     },
   },
@@ -176,8 +188,8 @@ export default defineComponent({
       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;
+            if (this.headerSortables[idx].enabled !== !!th?.sort?.enable) {
+              this.headerSortables[idx].enabled = !!th?.sort?.enable;
               this.headerSortables[idx].mode = "";
             }
           });
@@ -190,7 +202,7 @@ export default defineComponent({
               };
             } else {
               return {
-                enabled: !!th?.sortable,
+                enabled: !!th?.sort?.enable,
                 mode: "",
               };
             }
@@ -217,7 +229,7 @@ export default defineComponent({
     emitSortEvent(index) {
       const emitValue = {
         index,
-        label: this.tableHeaders[index].label,
+        label: this.tableHeaders[index].name,
         mode: "",
       };
 

package/vue-components/v3/table/table-cell/GenericCell.vue

@@ -0,0 +1,62 @@
+<template>
+  <span
+    :class="{
+      'is-flex': cellDescriptor.type !== 'object',
+      'is-align-items-center': cellValue.icon,
+      'is-justify-content-center': cellDescriptor.textAlign === 'center',
+      'is-justify-content-left': cellDescriptor.textAlign === 'left',
+      'is-justify-content-right': cellDescriptor.textAlign === 'right'
+    }"
+  >
+    <span v-if="cellValue.icon" class="icon p-0 mr-10">
+      <img width="15" :src="cellValue.icon" />
+    </span>
+    <router-link v-if="cellValue.link" :to="getCellLink(cellValue)">
+      {{ cellValue.data }}
+    </router-link>
+    <tag v-else-if="cellValue.color" :class="`is-${cellValue.color}`">
+      {{ cellValue.data }}
+    </tag>
+    <cell-value
+      v-else
+      :cell-title="cellDescriptor.name"
+      :value="cellValue.data || '-'"
+      :tooltip="cellValue.tooltip || JSON.stringify(cellValue.data)"
+    />
+  </span>
+</template>
+
+<script>
+import { defineAsyncComponent, defineComponent } from "vue";
+import { useRoute } from "vue-router";
+
+export default defineComponent({
+  components: {
+    Tag: defineAsyncComponent(() => import("../../tag/Tag.vue")),
+    CellValue: defineAsyncComponent(() => import("../table-cell/CellValue.vue"))
+  },
+  props: {
+    cellDescriptor: {
+      type: Object,
+      default: () => ({})
+    },
+    cellValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup() {
+    function getCellLink(cell) {
+      const route = useRoute();
+      const inject = (str, obj) => str.replace(/\${(.*?)}/g, (x, g) => obj[g]);
+      const { user, cluster } = route.params;
+      const link = inject(cell.link || "", {
+        username: user,
+        clustername: cluster
+      });
+      return link;
+    }
+    return { getCellLink };
+  }
+});
+</script>