@appscode/design-system 1.0.43-alpha.13 → 1.0.43-alpha.130

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

@@ -0,0 +1,120 @@
+<template>
+  <li :class="`is-${dropDownStatus}`">
+    <a class="ac-dropdown-button" :title="title" @click="toggleDropDownStatus">
+      <span>
+        <img :src="icon" alt="icon" />
+      </span>
+      <strong>{{ title || "-" }}</strong>
+      <span class="ac-arrow-down">
+        <i class="fa fa-angle-down" aria-hidden="true"> </i>
+      </span>
+    </a>
+
+    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight }">
+      <slot />
+    </ul>
+  </li>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    isDropDownOpen: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "Sidebar Item",
+    },
+    icon: {
+      type: String,
+      default: "@/assets/images/icons/basic.svg",
+    },
+  },
+
+  emits: ["dropDownItemChange"],
+
+  data() {
+    return {
+      dropDownStatus: "close",
+      dropDownSectionHeight: null,
+      isCompMounted: false,
+    };
+  },
+
+  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.isCompMounted) {
+        this.$nextTick(() => {
+          // for expanding dropdown
+          this.setDropdownMaxHeight("open");
+        });
+      }
+
+      if (o && this.isCompMounted) {
+        this.$nextTick(() => {
+          // for expanding dropdown
+          this.setDropdownMaxHeight("close");
+        });
+      }
+    },
+    isDropDownOpen: {
+      immediate: true,
+      handler(n) {
+        if (n) {
+          this.dropDownStatus = "open";
+        } else this.dropDownStatus = "close";
+      },
+    },
+    dropDownStatus: {
+      immediate: true,
+      handler(n) {
+        if (n === "open") {
+          // emit event to close other drop down items
+          this.$emit("dropDownItemChange");
+
+          this.$nextTick(() => {
+            const dropDownUl = this.$refs["sectionItems"];
+            // debugger;
+            if (dropDownUl)
+              this.dropDownSectionHeight = `${dropDownUl.scrollHeight}px`;
+          });
+        } else {
+          // emit event to close other drop down items
+          this.dropDownSectionHeight = null;
+        }
+      },
+    },
+  },
+
+  methods: {
+    setDropdownMaxHeight(mode) {
+      if (mode === "open") {
+        this.dropDownSectionHeight = `${this.$refs["sectionItems"].scrollHeight}px`;
+      } else {
+        this.dropDownSectionHeight = null;
+      }
+    },
+    toggleDropDownStatus() {
+      if (this.dropDownStatus === "open") {
+        this.dropDownStatus = "close";
+      } else this.dropDownStatus = "open";
+    },
+  },
+});
+</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/TableRow.vue

@@ -6,7 +6,7 @@
     custom
     v-slot="{ navigate }"
   >
-    <tr @click="navigate" v-bind="$attrs">
+    <tr class="is-link" @click="navigate" v-bind="$attrs">
       <slot />
       <fake-table-cell
         v-if="fakeCellWidth > 0"

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

@@ -4,9 +4,11 @@
       :view-box="`0 0 ${computedCellWidth || 300} 10`"
       :speed="2"
       :key="computedCellWidth"
+      :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"
@@ -20,7 +22,7 @@
       :max-character-length="maxCharacterLength"
     />
     <template v-else>
-      <span class="is-ellipsis-1" :title="value">{{
+      <span class="is-ellipsis-1" :title="tooltip">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>
@@ -29,6 +31,12 @@
 
 <script>
 import { defineComponent, defineAsyncComponent } from "vue";
+import {
+  loaderLightThemePrimaryColor,
+  loaderDarkThemePrimaryColor,
+  loaderLightThemeSecondaryColor,
+  loaderDarkThemeSecondaryColor,
+} from "@appscode/design-system/plugins/theme";
 
 export default defineComponent({
   props: {
@@ -44,6 +52,10 @@ export default defineComponent({
       type: null,
       default: "",
     },
+    tooltip: {
+      type: String,
+      defualt: "",
+    },
   },
   components: {
     ContentLoader: defineAsyncComponent(() =>
@@ -60,13 +72,24 @@ export default defineComponent({
   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/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>

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

@@ -79,7 +79,10 @@ export default defineComponent({
     },
     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;
@@ -103,3 +106,4 @@ export default defineComponent({
   },
 });
 </script>
+

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

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