@appscode/design-system 2.1.8 → 2.2.0

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

@@ -1,212 +0,0 @@
-<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] && headerSortables[idx].enabled,
-              '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)"
-          >
-            {{ headerLabels[idx] }}
-            <span
-              v-if="tableHeader.dashboard && tableHeader.dashboard.status && tableHeader.dashboard.status !== 'Success'"
-              class="icon has-text-danger"
-              :title="tableHeader.dashboard && tableHeader.dashboard.message"
-            >
-              <i class="fa fa-exclamation-triangle" />
-            </span>
-          </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>
-
-    <!-- table footer info start -->
-    <slot name="table-footer-info" />
-    <!-- table footer info end -->
-
-    <!-- pagination start -->
-    <slot name="table-pagination" />
-    <!-- pagination end -->
-  </table-container>
-</template>
-
-<script>
-export default {
-  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,
-    },
-  },
-  components: {
-    TableContainer: () => import("./TableContainer.vue"),
-    TableRow: () => import("./TableRow.vue"),
-    TableCell: () => import("./TableCell.vue"),
-    CellValue: () => import("./table-cell/CellValue.vue"),
-    EmptyTableInfo: () => import("./EmptyTableInfo.vue"),
-    FakeTableCell: () => import("./FakeTableCell.vue"),
-  },
-
-  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.name || "Label"));
-    },
-  },
-
-  watch: {
-    tableHeaders: {
-      immediate: true,
-      handler(n) {
-        if (this.headerSortables.length === n.length) {
-          n.forEach((th, idx) => {
-            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 = "";
-            }
-          });
-        } else {
-          this.headerSortables = n.map((th) => {
-            if (typeof th === "string") {
-              return {
-                enabled: false,
-                mode: "",
-              };
-            } else {
-              return {
-                enabled: !!(th && th.sort && th.sort.enable),
-                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].name,
-        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/v2/table/TableCell.vue

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

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

@@ -1,5 +0,0 @@
-<template>
-  <div class="ac-table-container table-container">
-    <slot />
-  </div>
-</template>

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

@@ -1,50 +0,0 @@
-<template>
-  <router-link v-if="link" :event="link !== '' ? 'click' : ''" :to="link" custom v-slot="{ navigate }">
-    <tr class="is-link" @click="navigate" data-testid="ac-table-row">
-      <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,
-      'is-disabled': isDisabled,
-    }"
-    data-testid="ac-table-row"
-    @click.prevent="$emit('rowselect', true)"
-  >
-    <slot />
-    <fake-table-cell v-if="fakeCellWidth > 0" :fake-cell-width="fakeCellWidth" />
-  </tr>
-</template>
-
-<script>
-export default {
-  props: {
-    link: {
-      type: String,
-      default: "",
-    },
-    isSelected: {
-      type: Boolean,
-      default: false,
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    fakeCellWidth: {
-      type: Number,
-      default: 0,
-    },
-  },
-
-  components: {
-    TableCell: () => import("./TableCell.vue"),
-    FakeTableCell: () => import("./FakeTableCell.vue"),
-  },
-};
-</script>

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

@@ -1,94 +0,0 @@
-<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>
-export default {
-  props: {
-    cellTitle: {
-      type: String,
-      default: "Array",
-    },
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    maxCharacterLength: {
-      type: Number,
-      default: undefined,
-    },
-  },
-  components: {
-    Tags: () => import("../../tag/Tags.vue"),
-    Tag: () => import("../../tag/Tag.vue"),
-    EllipsisIcon: () => import("../../icons/Ellipsis.vue"),
-    JsonShowModal: () => import("../../modals/JsonShowModal.vue"),
-    ValueWithModal: () => import("./ValueWithModal.vue"),
-  },
-
-  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/v2/table/table-cell/CellValue.vue

@@ -1,125 +0,0 @@
-<template>
-  <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
-    <content-loader
-      :height="10"
-      :width="computedCellWidth || 300"
-      :primaryColor="primaryColor"
-      :secondaryColor="secondaryColor"
-    />
-  </div>
-  <div v-else ref="cellDiv">
-    <object-cell
-      v-if="valueType === 'object'"
-      :obj="value"
-      :cell-title="cellTitle"
-      :max-character-length="maxCharacterLength"
-      data-testid="object-cell-value"
-    />
-    <array-cell
-      v-else-if="valueType === 'array'"
-      :items="value"
-      :cell-title="cellTitle"
-      :max-character-length="maxCharacterLength"
-      data-testid="array-cell-value"
-    />
-    <template v-else>
-      <span class="is-ellipsis-1" :title="tooltip" data-testid="cell-value">{{
-        value || (value === 0 ? 0 : "-")
-      }}</span>
-    </template>
-  </div>
-</template>
-
-<script>
-import {
-  loaderLightThemePrimaryColor,
-  loaderDarkThemePrimaryColor,
-  loaderLightThemeSecondaryColor,
-  loaderDarkThemeSecondaryColor,
-} from "@appscode/design-system/plugins/theme";
-
-export default {
-  props: {
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
-    cellTitle: {
-      type: String,
-      default: "Cell",
-    },
-    value: {
-      type: null,
-      default: "",
-    },
-    tooltip: {
-      type: String,
-      defualt: "",
-    },
-  },
-  components: {
-    ContentLoader: () => import("vue-content-loader").then(({ ContentLoader }) => ContentLoader),
-    ObjectCell: () => import("./ObjectCell.vue"),
-    ArrayCell: () => import("./ArrayCell.vue"),
-  },
-
-  computed: {
-    valueType() {
-      if (typeof this.value === "object") {
-        if (this.value === null) return "null";
-        else 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/v2/table/table-cell/GenericCell.vue

@@ -1,56 +0,0 @@
-<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/v2/table/table-cell/ObjectCell.vue

@@ -1,93 +0,0 @@
-<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>
-export default {
-  props: {
-    cellTitle: {
-      type: String,
-      default: "Object",
-    },
-    obj: {
-      type: Object,
-      default: () => ({}),
-    },
-    maxCharacterLength: {
-      type: Number,
-      default: undefined,
-    },
-  },
-  components: {
-    Tags: () => import("../../tag/Tags.vue"),
-    Tag: () => import("../../tag/Tag.vue"),
-    EllipsisIcon: () => import("../../icons/Ellipsis.vue"),
-    JsonShowModal: () => import("../../modals/JsonShowModal.vue"),
-    ValueWithModal: () => import("./ValueWithModal.vue"),
-  },
-
-  data() {
-    return {
-      showFullData: false,
-    };
-  },
-
-  computed: {
-    objKeys() {
-      return Object.keys(this.obj) || [];
-    },
-    printableStringObjs() {
-      return this.objKeys.map((key) => {
-        let value = this.obj[key];
-        if (typeof value === "object" && value !== null) {
-          value = JSON.stringify(value);
-        }
-        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/v2/table/table-cell/ValueWithModal.vue

@@ -1,34 +0,0 @@
-<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>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    value: {
-      type: null,
-      default: "",
-    },
-    print: {
-      type: String,
-      default: "",
-    },
-  },
-  components: {
-    JsonShowModal: () => import("../../modals/JsonShowModal.vue"),
-  },
-  data() {
-    return {
-      showModal: false,
-    };
-  },
-};
-</script>