@appscode/design-system 1.0.43-alpha.10 → 1.0.43-alpha.103

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/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,6 +4,8 @@
       :view-box="`0 0 ${computedCellWidth || 300} 10`"
       :speed="2"
       :key="computedCellWidth"
+      :primaryColor="primaryColor"
+      :secondaryColor="secondaryColor"
     />
   </div>
   <div v-else class="haha" ref="cellDiv">
@@ -29,6 +31,7 @@
 
 <script>
 import { defineComponent, defineAsyncComponent } from "vue";
+import { loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor } from "@appscode/design-system/plugins/theme";
 
 export default defineComponent({
   props: {
@@ -67,6 +70,12 @@ export default defineComponent({
     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/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>