@appscode/design-system 1.0.43-alpha.144 → 1.0.43-alpha.145

package/package.json

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

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

@@ -0,0 +1,143 @@
+<template>
+  <table-container>
+    <table
+      class="table ac-info-table is-fullwidth"
+      :class="{ 'pl-0 pr-0': removeContentPadding }"
+    >
+      <tbody v-if="isFullTableLoaderActive">
+        <table-row v-for="i in loaderCols" :key="i">
+          <table-cell>
+            <cell-value :is-loader-active="true" />
+          </table-cell>
+          <table-cell>
+            <cell-value :is-loader-active="true" />
+          </table-cell>
+        </table-row>
+      </tbody>
+      <tbody
+        v-else
+        :class="{
+          'no-data-available has-text-centered p-10': isTableEmpty,
+          'pl-0 pr-0': removeContentPadding,
+        }"
+      >
+        <template v-if="!isTableEmpty">
+          <table-row
+            v-for="(tableHeader, idx) in tableHeaders"
+            :key="headerLabels[idx]"
+          >
+            <table-cell>
+              <slot :name="`table-cell-icon-${idx}`" />
+              {{ headerLabels[idx] }}
+            </table-cell>
+            <table-cell v-if="isLoaderActive">
+              <cell-value :is-loader-active="true" />
+            </table-cell>
+            <slot v-else :name="`slot-${idx}`" />
+          </table-row>
+        </template>
+
+        <empty-table-info v-else />
+      </tbody>
+    </table>
+
+    <!-- pagination start -->
+    <slot name="table-pagination" />
+    <!-- pagination end -->
+  </table-container>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    isLoaderActive: {
+      type: Boolean,
+      default: false,
+    },
+    isTableEmpty: {
+      type: Boolean,
+      default: true,
+    },
+    tableHeaders: {
+      type: Array,
+      default: () => [],
+    },
+    removeContentPadding: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  components: {
+    TableContainer: defineAsyncComponent(() =>
+      import("../../v2/table/TableContainer.vue").then(
+        (module) => module.default
+      )
+    ),
+    EmptyTableInfo: defineAsyncComponent(() =>
+      import("../../v2/table/EmptyTableInfo.vue").then(
+        (module) => module.default
+      )
+    ),
+    TableRow: defineAsyncComponent(() =>
+      import("./TableRow.vue").then((module) => module.default)
+    ),
+    TableCell: defineAsyncComponent(() =>
+      import("./TableCell.vue").then((module) => module.default)
+    ),
+    CellValue: defineAsyncComponent(() =>
+      import("./table-cell/CellValue.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      loaderCols: 5,
+      headerSortables: [],
+    };
+  },
+
+  computed: {
+    isFullTableLoaderActive() {
+      return !this.tableHeaders.length;
+    },
+    headerLabels() {
+      return this.tableHeaders.map((th) =>
+        typeof th === "string" ? th : th?.name || "Label"
+      );
+    },
+  },
+
+  watch: {
+    tableHeaders: {
+      immediate: true,
+      handler(n) {
+        if (this.headerSortables.length === n.length) {
+          n.forEach((th, idx) => {
+            if (this.headerSortables[idx].enabled !== !!th?.sort?.enable) {
+              this.headerSortables[idx].enabled = !!th?.sort?.enable;
+              this.headerSortables[idx].mode = "";
+            }
+          });
+        } else {
+          this.headerSortables = n.map((th) => {
+            if (typeof th === "string") {
+              return {
+                enabled: false,
+                mode: "",
+              };
+            } else {
+              return {
+                enabled: !!th?.sort?.enable,
+                mode: "",
+              };
+            }
+          });
+        }
+      },
+    },
+  },
+});
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <table-container>
+  <table-container ref="ac-table-container" @scroller="handleScroller">
     <table
       ref="ac-table"
       class="table ac-table ac-striped"
@@ -140,12 +140,10 @@ export default defineComponent({
       default: 1920,
     },
   },
-  emits: ["sort"],
+  emits: ["sort", "scroller"],
   components: {
     TableContainer: defineAsyncComponent(() =>
-      import("../../v2/table/TableContainer.vue").then(
-        (module) => module.default
-      )
+      import("./TableContainer.vue").then((module) => module.default)
     ),
     TableRow: defineAsyncComponent(() =>
       import("./TableRow.vue").then((module) => module.default)
@@ -222,7 +220,6 @@ export default defineComponent({
       },
     },
   },
-
   updated() {
     this.$nextTick(() => {
       this.onWindowResize();
@@ -230,6 +227,9 @@ export default defineComponent({
   },
 
   methods: {
+    handleScroller(value) {
+      this.$emit("scroller", value);
+    },
     onWindowResize() {
       if (this.$refs["ac-table"] && this.isDynamicWidthTable) {
         const tableWidth = this.$refs["ac-table"].clientWidth;

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

@@ -0,0 +1,35 @@
+<template>
+  <div class="ac-table-container table-container" ref="tableContainer">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+  import { emit } from 'process'
+  import { defineComponent, ref, onMounted, nextTick } from 'vue'
+
+  export default defineComponent({
+    emits: ['scroller'],
+
+    setup(props, { emit }) {
+      const tableContainer = ref(null)
+
+      function isScrollerShowing() {
+        return tableContainer.value.scrollWidth > tableContainer.value.clientWidth
+      }
+
+      onMounted(() => {
+        setTimeout(() => {
+          nextTick(() => {
+            console.log({ tableContainer: tableContainer.value })
+            emit('scroller', isScrollerShowing())
+          })
+        }, 50)
+      })
+
+      return {
+        tableContainer,
+      }
+    },
+  })
+</script>