@appscode/design-system 2.0.74 → 2.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.0.74",
+  "version": "2.0.75",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/components/sidebar/_left-sidebar.scss

@@ -179,8 +179,6 @@
         }
 
         ul {
-          max-height: 0;
-          transition: max-height 0.2s ease-out;
           margin: 0;
           padding: 0;
           border-left: none;

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, onMounted, ref, watch } from "vue";
+import { ref } from "vue";
 
 interface Props {
   isDropDownOpen?: boolean;
@@ -13,85 +13,12 @@ const props = withDefaults(defineProps<Props>(), {
   icon: "https://cdn.appscode.com/k8s/icons/apiextensions.k8s.io/customresourcedefinitions.svg",
 });
 
-const emit = defineEmits(["dropDownItemChange"]);
-
-const dropDownStatus = ref("close");
-const dropDownSectionHeight = ref<string | null>(null);
-const isCompMounted = ref(false);
-const sectionItems = ref(null as HTMLElement | null);
-
-const setDropdownMaxHeight = (mode: string) => {
-  if (mode === "open" && sectionItems.value) {
-    dropDownSectionHeight.value = `${sectionItems.value.scrollHeight}px`;
-  } else {
-    dropDownSectionHeight.value = null;
-  }
-};
+const dropDownStatus = ref<"close" | "open">(`${props.isDropDownOpen ? "open" : "close"}`);
 
 const toggleDropDownStatus = () => {
-  if (dropDownStatus.value === "open") {
-    dropDownStatus.value = "close";
-  } else dropDownStatus.value = "open";
+  if (dropDownStatus.value === "open") dropDownStatus.value = "close";
+  else dropDownStatus.value = "open";
 };
-
-onMounted(() => {
-  isCompMounted.value = true;
-  setTimeout(() => {
-    // for expanding dropdown
-    if (props.isDropDownOpen) {
-      setDropdownMaxHeight("open");
-    } else {
-      setDropdownMaxHeight("close");
-    }
-  }, 200);
-});
-
-watch(
-  () => props.title,
-  (n, o) => {
-    if (n && isCompMounted.value) {
-      nextTick(() => {
-        // for expanding dropdown
-        setDropdownMaxHeight("open");
-      });
-    }
-
-    if (o && isCompMounted.value) {
-      nextTick(() => {
-        // for expanding dropdown
-        setDropdownMaxHeight("close");
-      });
-    }
-  }
-);
-
-watch(
-  () => props.isDropDownOpen,
-  (n) => {
-    if (n) {
-      dropDownStatus.value = "open";
-    } else dropDownStatus.value = "close";
-  },
-  {
-    immediate: true,
-  }
-);
-
-watch(dropDownStatus, (n) => {
-  if (n === "open") {
-    // emit event to close other drop down items
-    emit("dropDownItemChange");
-
-    nextTick(() => {
-      const dropDownUl = sectionItems.value;
-      // debugger;
-      if (dropDownUl) dropDownSectionHeight.value = `${dropDownUl.scrollHeight}px`;
-    });
-  } else {
-    // emit event to close other drop down items
-    dropDownSectionHeight.value = null;
-  }
-});
 </script>
 
 <template>
@@ -106,7 +33,7 @@ watch(dropDownStatus, (n) => {
       </span>
     </a>
 
-    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight || undefined }">
+    <ul v-if="dropDownStatus == 'open'">
       <slot />
     </ul>
   </li>