@appscode/design-system 0.0.21-alpha.2 → 0.4.27

package/vue-components/v2/sidebar/SidebarItemWithDropDown.vue

@@ -10,7 +10,7 @@
       </span>
     </a>
 
-    <ul :ref="title" :style="{ maxHeight: dropDownSectionHeight }">
+    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight }">
       <slot />
     </ul>
   </li>
@@ -23,10 +23,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
     title: {
       type: String,
       default: "Sidebar Item",
@@ -41,27 +37,32 @@ export default {
     return {
       dropDownStatus: "close",
       dropDownSectionHeight: null,
+      isCompMounted: false,
     };
   },
 
-  watch: {
-    isLoaderActive(n) {
-      if (!n) {
-        this.$nextTick(() => {
-          // for expanding dropdown
-          this.setDropdownMaxHeight("open");
-        });
+  mounted() {
+    this.isCompMounted = true;
+    setTimeout(() => {
+      // for expanding dropdown
+      if (this.isDropDownOpen) {
+        this.setDropdownMaxHeight("open");
+      } else {
+        this.setDropdownMaxHeight("close");
       }
-    },
+    }, 700);
+  },
+
+  watch: {
     title(n, o) {
-      if (n && !this.isLoaderActive) {
+      if (n && this.isCompMounted) {
         this.$nextTick(() => {
           // for expanding dropdown
           this.setDropdownMaxHeight("open");
         });
       }
 
-      if (o && !this.isLoaderActive) {
+      if (o && this.isCompMounted) {
         this.$nextTick(() => {
           // for expanding dropdown
           this.setDropdownMaxHeight("close");
@@ -84,7 +85,7 @@ export default {
           this.$emit("dropDownItemChange");
 
           this.$nextTick(() => {
-            const dropDownUl = this.$refs[this.title];
+            const dropDownUl = this.$refs["sectionItems"];
             if (dropDownUl)
               this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
           });
@@ -99,11 +100,9 @@ export default {
   methods: {
     setDropdownMaxHeight(mode) {
       if (mode === "open") {
-        this.$refs[this.title][0].style.maxHeight = `${
-          this.$refs[this.title][0].scrollHeight
-        }px`;
+        this.dropDownSectionHeight = `${this.$refs["sectionItems"]?.scrollHeight}px`;
       } else {
-        this.$refs[this.title][0].style.maxHeight = null;
+        this.dropDownSectionHeight = null;
       }
     },
     toggleDropDownStatus() {

package/vue-components/v2/tab/TabItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li :class="{ 'is-active': isActive }">
+  <li :class="{ 'is-active': isActive }" data-testid="tab-item">
     <slot />
   </li>
 </template>

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

@@ -0,0 +1,36 @@
+<template>
+  <th v-if="isHeaderCell" class="increase-width">
+    <div class="increase-innner" :style="dynamicColumnStyle" />
+  </th>
+  <table-cell v-else class="increase-width">
+    <div class="increase-innner" :style="dynamicColumnStyle" />
+  </table-cell>
+</template>
+
+<script>
+export default {
+  props: {
+    isHeaderCell: {
+      type: Boolean,
+      default: false,
+    },
+    fakeCellWidth: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  components: {
+    TableCell: () =>
+      import("@appscode/design-system/vue-components/v2/table/TableCell.vue"),
+  },
+
+  computed: {
+    dynamicColumnStyle() {
+      return {
+        right: `-${this.fakeCellWidth}px`,
+      };
+    },
+  },
+};
+</script>

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

@@ -1,6 +1,9 @@
 <template>
   <table-container>
-    <table class="table ac-info-table is-fullwidth">
+    <table
+      class="table ac-info-table is-fullwidth"
+      :class="{ 'pl-0 pr-0': removeContentPadding }"
+    >
       <tbody v-if="isFullTableLoaderActive">
         <!-- table loader -->
         <table-row v-for="i in loaderCols" :key="i">
@@ -15,7 +18,10 @@
       </tbody>
       <tbody
         v-else
-        :class="isTableEmpty ? 'no-data-available has-text-centered p-10' : ''"
+        :class="{
+          'no-data-available has-text-centered p-10': isTableEmpty,
+          'pl-0 pr-0': removeContentPadding
+        }"
       >
         <template v-if="!isTableEmpty">
           <!-- table rows -->
@@ -60,7 +66,11 @@ export default {
     },
     tableHeaders: {
       type: Array,
-      default: () => [],
+      default: () => []
+    },
+    removeContentPadding: {
+      type: Boolean,
+      default: false,
     },
   },
 

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

@@ -15,5 +15,3 @@ export default {
   },
 };
 </script>
-
-TableContainer

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

@@ -1,6 +1,16 @@
 <template>
   <table-container>
-    <table class="table ac-table ac-striped is-fullwidth">
+    <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">
@@ -8,10 +18,57 @@
           </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] && 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 v-if="actionable" style="min-width: 100px;"></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 -->
@@ -22,8 +79,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>
@@ -31,13 +94,14 @@
       <template v-else>
         <tbody v-if="!isTableEmpty">
           <!-- table rows -->
-          <slot />
-          <!-- table rows -->
+          <slot :fake-cell-width="fakeCellWidth" />
         </tbody>
         <tbody v-else>
           <table-row class="is-hoverless">
             <table-cell
-              :colspan="tableHeaders.length"
+              :colspan="
+                actionable ? tableHeaders.length + 1 : tableHeaders.length
+              "
               class="no-data-available has-text-centered"
             >
               <empty-table-info />
@@ -71,6 +135,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    isDynamicWidthTable: {
+      type: Boolean,
+      default: false,
+    },
+    fullWidth: {
+      type: Number,
+      default: 1920,
+    },
   },
   components: {
     TableContainer: () => import("./TableContainer.vue"),
@@ -78,18 +150,106 @@ export default {
     TableCell: () => import("./TableCell.vue"),
     CellValue: () => import("./table-cell/CellValue.vue"),
     EmptyTableInfo: () => import("./EmptyTableInfo.vue"),
+    FakeTableCell: () => import("./FakeTableCell.vue"),
   },
 
   data() {
     return {
-      loaderCols: 5,
+      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/TableRow.vue

@@ -6,16 +6,30 @@
     custom
     v-slot="{ navigate }"
   >
-    <tr @click="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 }"
+    :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>
 
@@ -30,6 +44,19 @@ export default {
       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/CellValue.vue

@@ -1,22 +1,29 @@
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
-    <content-loader :height="10" :width="computedCellWidth || 300" />
+    <content-loader
+      :height="10"
+      :width="computedCellWidth || 300"
+      :primaryColor="primaryColor"
+      :secondaryColor="secondaryColor"
+    />
   </div>
-  <div v-else class="haha" ref="cellDiv">
+  <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="value">{{
+      <span class="is-ellipsis-1" :title="tooltip" data-testid="cell-value">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>
@@ -24,6 +31,13 @@
 </template>
 
 <script>
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
+
 export default {
   props: {
     isLoaderActive: {
@@ -38,6 +52,10 @@ export default {
       type: null,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: "",
+    },
   },
   components: {
     ContentLoader: () =>
@@ -49,13 +67,24 @@ export default {
   computed: {
     valueType() {
       if (typeof this.value === "object") {
-        if (Array.isArray(this.value)) return "array";
+        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() {

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/v2/table/table-cell/ObjectCell.vue

@@ -68,7 +68,10 @@ export default {
     },
     printableStringObjs() {
       return this.objKeys.map((key) => {
-        const value = this.obj[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;

package/vue-components/v2/tabs/EditorTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <tabs-body class="mt-20">
+  <tabs-body>
     <tabs class="is-line">
       <tab-item :is-active="activeTab === 'edit'">
         <a @click.prevent="$emit('tabchange', 'edit')">Edit</a>

package/vue-components/v3/button/Button.vue

@@ -0,0 +1,78 @@
+<template>
+  <button
+    class="button ac-button is-extra-small"
+    :class="`${modifierClasses}${isLoaderActive ? ' is-loading' : ''}`"
+    :disabled="disabled ? true : null"
+    @click="handleClick"
+    :title="tooltip"
+  >
+    <span v-if="iconClass || iconImage" class="icon is-small">
+      <img
+        v-if="iconImage"
+        :src="iconImage"
+        alt="icon"
+        :width="iconImageWidth"
+      />
+      <i v-else :class="`fa fa-${iconClass}`" aria-hidden="true" />
+    </span>
+    <span v-if="title" :class="titleModifierClass">{{ title }}</span>
+    <slot />
+  </button>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    // button title
+    title: {
+      type: String,
+      default: "",
+    },
+    tooltip: {
+      type: String,
+      defualt: undefined
+    },
+    // for loader
+    isLoaderActive: {
+      type: Boolean,
+      default: false,
+    },
+    // for disability
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // for icon
+    iconClass: {
+      type: String,
+      default: "",
+    },
+    iconImage: {
+      type: String,
+      default: "",
+    },
+    iconImageWidth: {
+      type: Number,
+      default: undefined,
+    },
+    // modifier class
+    modifierClasses: {
+      type: String,
+      default: "is-primary",
+    },
+    titleModifierClass: {
+      type: String,
+      default: "",
+    },
+  },
+
+  emits: ["click"],
+
+  methods: {
+    handleClick(e) {
+      if (!this.disabled) this.$emit("click", e);
+    },
+  },
+});
+</script>