@appscode/design-system 1.0.3-alpha.8 → 1.0.43-alpha.101

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

@@ -0,0 +1,238 @@
+<template>
+  <table-container>
+    <table
+      ref="ac-table"
+      class="table ac-table ac-striped"
+      :class="{
+        'is-fullwidth':
+          !isDynamicWidthTable ||
+          isFullTableLoaderActive ||
+          isTableEmpty ||
+          isLoaderActive,
+      }"
+    >
+      <thead>
+        <table-row v-if="isFullTableLoaderActive">
+          <th v-for="i in loaderCols" :key="i">
+            <cell-value :is-loader-active="true" />
+          </th>
+        </table-row>
+        <table-row v-else>
+          <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"
+            v-if="actionable"
+            style="min-width: 100px"
+          ></th>
+          <fake-table-cell
+            v-if="fakeCellWidth > 0"
+            :is-header-cell="true"
+            :fake-cell-width="fakeCellWidth"
+          />
+        </table-row>
+      </thead>
+      <!-- table row loaders -->
+      <tbody v-if="isFullTableLoaderActive || isLoaderActive">
+        <table-row v-if="isFullTableLoaderActive">
+          <th v-for="i in loaderCols" :key="i">
+            <cell-value :is-loader-active="true" />
+          </th>
+        </table-row>
+        <table-row v-else>
+          <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>
+      <!-- table row loaders -->
+      <template v-else>
+        <tbody v-if="!isTableEmpty">
+          <!-- table rows -->
+          <slot :fake-cell-width="fakeCellWidth" />
+        </tbody>
+        <tbody v-else>
+          <table-row class="is-hoverless">
+            <table-cell
+              :colspan="
+                actionable ? tableHeaders.length + 1 : tableHeaders.length
+              "
+              class="no-data-available has-text-centered"
+            >
+              <empty-table-info />
+            </table-cell>
+          </table-row>
+        </tbody>
+      </template>
+    </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: () => [],
+    },
+    actionable: {
+      type: Boolean,
+      default: false,
+    },
+    isDynamicWidthTable: {
+      type: Boolean,
+      default: false,
+    },
+    fullWidth: {
+      type: Number,
+      default: 1920,
+    },
+  },
+  emits: ["sort"],
+  components: {
+    TableContainer: defineAsyncComponent(() =>
+      import("../../v2/table/TableContainer.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)
+    ),
+    EmptyTableInfo: defineAsyncComponent(() =>
+      import("../../v2/table/EmptyTableInfo.vue").then(
+        (module) => module.default
+      )
+    ),
+    FakeTableCell: defineAsyncComponent(() =>
+      import("./FakeTableCell.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      fakeCellWidth: 0,
+      headerSortables: [],
+    };
+  },
+
+  computed: {
+    loaderCols() {
+      if (this.isFullTableLoaderActive) {
+        return 5;
+      } else if (this.isLoaderActive) {
+        return Math.max(this.tableHeaders.length + 1, 5);
+      } else {
+        return this.tableHeaders.length || 5;
+      }
+    },
+    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() {
+    this.$nextTick(() => {
+      this.onWindowResize();
+    });
+  },
+
+  methods: {
+    onWindowResize() {
+      if (this.$refs["ac-table"] && this.isDynamicWidthTable) {
+        const tableWidth = this.$refs["ac-table"].clientWidth;
+        const d = this.fullWidth - tableWidth;
+        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/TableCell.vue

@@ -0,0 +1,28 @@
+<template>
+  <td :style="styleOb">
+    <slot />
+  </td>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    cellWidth: {
+      type: Number,
+      default: null,
+    },
+  },
+
+  computed: {
+    styleOb() {
+      const ob = {};
+      if (this.cellWidth) {
+        ob.width = `${this.cellWidth}px`;
+      }
+      return ob || {};
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <router-link
+    v-if="link"
+    event="click"
+    :to="link"
+    custom
+    v-slot="{ navigate }"
+  >
+    <tr class="is-link" @click="navigate" v-bind="$attrs">
+      <slot />
+      <fake-table-cell
+        v-if="fakeCellWidth > 0"
+        :fake-cell-width="fakeCellWidth"
+      />
+    </tr>
+  </router-link>
+  <tr
+    v-else
+    :class="{ 'is-selected': isSelected, 'is-hoverless': !isSelected }"
+    @click.prevent="$emit('rowselect', true)"
+  >
+    <slot />
+    <fake-table-cell
+      v-if="fakeCellWidth > 0"
+      :fake-cell-width="fakeCellWidth"
+    />
+  </tr>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    link: {
+      type: String,
+      default: "",
+    },
+    isSelected: {
+      type: Boolean,
+      default: false,
+    },
+    fakeCellWidth: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  emits: ["rowselect"],
+
+  components: {
+    TableCell: defineAsyncComponent(() =>
+      import("./TableCell.vue").then((module) => module.default)
+    ),
+    FakeTableCell: defineAsyncComponent(() =>
+      import("./FakeTableCell.vue").then((module) => module.default)
+    ),
+  },
+});
+</script>

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

@@ -0,0 +1,111 @@
+<template>
+  <tags v-if="printableStringObjs.length">
+    <tag
+      v-for="(printableStringOb, idx) in printableStringObjs.slice(
+        0,
+        indexOfCharacterLengthExceed
+      )"
+      :key="`${printableStringOb.print}-${idx}`"
+    >
+      <value-with-modal
+        v-if="printableStringOb.exceededLength"
+        :title="`${cellTitle}: ${idx}`"
+        :value="printableStringOb.value"
+        :print="printableStringOb.print"
+      />
+      <template v-else> {{ printableStringOb.print }} </template>
+    </tag>
+
+    <tag v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
+      <a @click.prevent.stop="showFullData = true">
+        <ellipsis-icon />
+        <json-show-modal
+          :open="showFullData"
+          @closemodal="showFullData = false"
+          :editor-title="cellTitle"
+          :editor-content="items"
+        />
+      </a>
+    </tag>
+  </tags>
+  <p v-else>-</p>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    cellTitle: {
+      type: String,
+      default: "Array",
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    maxCharacterLength: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  components: {
+    Tags: defineAsyncComponent(() =>
+      import("../../../v2/tag/Tags.vue").then((module) => module.default)
+    ),
+    Tag: defineAsyncComponent(() =>
+      import("../../tag/Tag.vue").then((module) => module.default)
+    ),
+    EllipsisIcon: defineAsyncComponent(() =>
+      import("../../../v2/icons/Ellipsis.vue").then((module) => module.default)
+    ),
+    JsonShowModal: defineAsyncComponent(() =>
+      import("../../modals/JsonShowModal.vue").then((module) => module.default)
+    ),
+    ValueWithModal: defineAsyncComponent(() =>
+      import("./ValueWithModal.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      showFullData: false,
+    };
+  },
+
+  computed: {
+    printableStringObjs() {
+      return this.items.map((item) => {
+        const value = item;
+        let exceededLength = false;
+        let print = item;
+        if (typeof item === "object") {
+          exceededLength = true;
+          print = item["Name"] || item["name"] || item[Object.keys(item)[0]];
+        } else {
+          const stringifiedValue = JSON.stringify(item);
+          exceededLength = stringifiedValue.length > 27;
+          print = exceededLength
+            ? `${stringifiedValue.slice(0, 27)}...`
+            : stringifiedValue;
+        }
+        return { value, exceededLength, print };
+      });
+    },
+    indexOfCharacterLengthExceed() {
+      let idx = -1;
+      let cumulativeLen = 0;
+      for (const [index, po] of this.printableStringObjs.entries()) {
+        const newLen = cumulativeLen + po.print.length;
+        if (newLen > this.maxCharacterLength) {
+          idx = index;
+          break;
+        }
+        cumulativeLen = newLen;
+      }
+
+      return idx === -1 ? this.printableStringObjs.length : idx;
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,117 @@
+<template>
+  <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
+    <content-loader
+      :view-box="`0 0 ${computedCellWidth || 300} 10`"
+      :speed="2"
+      :key="computedCellWidth"
+      :primaryColor="primaryColor"
+      :secondaryColor="secondaryColor"
+    />
+  </div>
+  <div v-else class="haha" ref="cellDiv">
+    <object-cell
+      v-if="valueType === 'object'"
+      :obj="value"
+      :cell-title="cellTitle"
+      :max-character-length="maxCharacterLength"
+    />
+    <array-cell
+      v-else-if="valueType === 'array'"
+      :items="value"
+      :cell-title="cellTitle"
+      :max-character-length="maxCharacterLength"
+    />
+    <template v-else>
+      <span class="is-ellipsis-1" :title="value">{{
+        value || (value === 0 ? 0 : "-")
+      }}</span>
+    </template>
+  </div>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+import { loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor } from "@appscode/design-system/plugins/theme";
+
+export default defineComponent({
+  props: {
+    isLoaderActive: {
+      type: Boolean,
+      default: false,
+    },
+    cellTitle: {
+      type: String,
+      default: "Cell",
+    },
+    value: {
+      type: null,
+      default: "",
+    },
+  },
+  components: {
+    ContentLoader: defineAsyncComponent(() =>
+      import("vue-content-loader").then(({ ContentLoader }) => ContentLoader)
+    ),
+    ObjectCell: defineAsyncComponent(() =>
+      import("./ObjectCell.vue").then((module) => module.default)
+    ),
+    ArrayCell: defineAsyncComponent(() =>
+      import("./ArrayCell.vue").then((module) => module.default)
+    ),
+  },
+
+  computed: {
+    valueType() {
+      if (typeof this.value === "object") {
+        if (Array.isArray(this.value)) return "array";
+        else return "object";
+      } else return typeof this.value;
+    },
+    maxCharacterLength() {
+      return Math.ceil(this.computedCellWidth / 8);
+    },
+    primaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+    },
+    secondaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
+    }
+  },
+
+  data() {
+    return {
+      computedCellWidth: null,
+    };
+  },
+
+  mounted() {
+    this.calcCellWidth();
+  },
+
+  watch: {
+    isLoaderActive() {
+      this.calcCellWidth();
+    },
+  },
+
+  methods: {
+    calcCellWidth() {
+      if (this.isLoaderActive) {
+        this.$nextTick(() => {
+          const cellLoaderDiv = this.$refs.cellLoaderDiv;
+          if (cellLoaderDiv) {
+            this.computedCellWidth = cellLoaderDiv.offsetWidth;
+          }
+        });
+      } else {
+        this.$nextTick(() => {
+          const cellDiv = this.$refs.cellDiv;
+          if (cellDiv) {
+            this.computedCellWidth = cellDiv.offsetWidth;
+          }
+        });
+      }
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,105 @@
+<template>
+  <tags v-if="printableStringObjs.length">
+    <tag
+      v-for="printableStringOb in printableStringObjs.slice(
+        0,
+        indexOfCharacterLengthExceed
+      )"
+      :key="printableStringOb.key"
+    >
+      <value-with-modal
+        v-if="printableStringOb.exceededLength"
+        :title="printableStringOb.key"
+        :value="printableStringOb.value"
+        :print="printableStringOb.print"
+      />
+      <template v-else> {{ printableStringOb.print }} </template>
+    </tag>
+
+    <tag v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
+      <a @click.prevent.stop="showFullData = true">
+        <ellipsis-icon />
+        <json-show-modal
+          :open="showFullData"
+          @closemodal="showFullData = false"
+          :editor-title="cellTitle"
+          :editor-content="obj"
+        />
+      </a>
+    </tag>
+  </tags>
+  <p v-else>-</p>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    cellTitle: {
+      type: String,
+      default: "Object",
+    },
+    obj: {
+      type: Object,
+      default: () => ({}),
+    },
+    maxCharacterLength: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  components: {
+    Tags: defineAsyncComponent(() =>
+      import("../../../v2/tag/Tags.vue").then((module) => module.default)
+    ),
+    Tag: defineAsyncComponent(() =>
+      import("../../tag/Tag.vue").then((module) => module.default)
+    ),
+    EllipsisIcon: defineAsyncComponent(() =>
+      import("../../../v2/icons/Ellipsis.vue").then((module) => module.default)
+    ),
+    JsonShowModal: defineAsyncComponent(() =>
+      import("../../modals/JsonShowModal.vue").then((module) => module.default)
+    ),
+    ValueWithModal: defineAsyncComponent(() =>
+      import("./ValueWithModal.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      showFullData: false,
+    };
+  },
+
+  computed: {
+    objKeys() {
+      return Object.keys(this.obj) || [];
+    },
+    printableStringObjs() {
+      return this.objKeys.map((key) => {
+        const value = this.obj[key];
+        const keyValue = `${key}: ${value}`;
+        const exceededLength = keyValue.length > 30;
+        const print = exceededLength ? key : keyValue;
+        return { key, value, keyValue, exceededLength, print };
+      });
+    },
+    indexOfCharacterLengthExceed() {
+      let idx = -1;
+      let cumulativeLen = 0;
+      for (const [index, po] of this.printableStringObjs.entries()) {
+        const newLen = cumulativeLen + po.print.length;
+        if (newLen > this.maxCharacterLength) {
+          idx = index;
+          break;
+        }
+        cumulativeLen = newLen;
+      }
+
+      return idx === -1 ? this.printableStringObjs.length : idx;
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <a @click.prevent.stop="showModal = true">
+    {{ print }}
+
+    <json-show-modal
+      :open="showModal"
+      @closemodal="showModal = false"
+      :editor-title="title"
+      :editor-content="value"
+    />
+  </a>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: null,
+      default: "",
+    },
+    print: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    JsonShowModal: defineAsyncComponent(() =>
+      import("../../modals/JsonShowModal.vue").then((module) => module.default)
+    ),
+  },
+  data() {
+    return {
+      showModal: false,
+    };
+  },
+});
+</script>