@appscode/design-system 2.2.13 → 2.2.14

package/package.json

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

package/vue-components/v3/navbar/Appdrawer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 interface app {
   url: string;
   icon_url: string;
@@ -17,10 +17,15 @@ withDefaults(defineProps<Props>(), {
 
 const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
 const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
+const showDrawer = ref(false);
+
+function handleIsActiveChange(isActive: string) {
+  showDrawer.value = !!isActive?.length;
+}
 </script>
 
 <template>
-  <navbar-item>
+  <navbar-item @on-is-active-change="handleIsActiveChange">
     <template #navbar-item>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
@@ -54,7 +59,7 @@ const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent
       </svg>
     </template>
     <template #navbar-content>
-      <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
+      <navbar-item-content v-if="showDrawer" class="navbar-dropdown-wrapper" style="right: -30px">
         <ul class="ac-scrollbar p-0 app-drawer">
           <li v-for="app in apps" :key="app.url">
             <a :href="app.url">

package/vue-components/v3/navbar/NavbarItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useRoute } from "vue-router";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
 
 interface Props {
@@ -11,15 +11,15 @@ withDefaults(defineProps<Props>(), {
   modifierClasses: "",
 });
 
-const emit = defineEmits(["isActive", "onRouteChange"]);
+const emit = defineEmits(["onIsActiveChange", "onRouteChange"]);
 
 const navbarItem = ref(null);
 
 const isActive = ref("");
 function clickEvent() {
   if (isActive.value) isActive.value = "";
-  else isActive.value = " is-active";
-  emit("isActive", isActive.value);
+  else isActive.value = "is-active";
+  emit("onIsActiveChange", isActive.value);
 }
 
 const route = useRoute();
@@ -32,12 +32,14 @@ watch(
 );
 onClickOutside(navbarItem, () => {
   isActive.value = "";
-  emit("isActive", isActive.value);
+  emit("onIsActiveChange", isActive.value);
 });
+
+const isActiveClass = computed(() => (isActive.value.length ? ` ${isActive.value}` : ""));
 </script>
 
 <template>
-  <div ref="navbarItem" class="ac-menu-item" :class="modifierClasses + isActive">
+  <div ref="navbarItem" class="ac-menu-item" :class="modifierClasses + isActiveClass">
     <button class="button ac-nav-button" @click="clickEvent()">
       <slot name="navbar-item" />
     </button>

package/vue-components/v3/navbar/Notification.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import TimeConvert from "../../plugins/time-convert";
 import type { Notification } from "../../types/notification";
 const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
@@ -14,13 +14,17 @@ withDefaults(
     unreadNotification: 0,
   }
 );
-defineEmits(["isActive"]);
 function notificationTime(time: number) {
   return TimeConvert.getDayDifferences({ past: time });
 }
+
+const showNotification = ref(false);
+function handleIsActiveChange(isActive: string | any[]) {
+  showNotification.value = !!isActive?.length;
+}
 </script>
 <template>
-  <navbar-item ref="notificationItem" @is-active="$emit('isActive', $event)">
+  <navbar-item ref="notificationItem" @on-is-active-change="handleIsActiveChange">
     <template #navbar-item>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g clip-path="url(#clip0_534_14009)">
@@ -44,7 +48,7 @@ function notificationTime(time: number) {
     </template>
 
     <template #navbar-content>
-      <navbar-item-content class="navbar-dropdown-wrapper" style="width: 320px; right: -30px">
+      <navbar-item-content v-if="showNotification" class="navbar-dropdown-wrapper" style="width: 320px; right: -30px">
         <div class="dropdown-inner">
           <div class="notification-header">
             <h5>Notification</h5>

package/vue-components/v3/navbar/User.vue

@@ -68,7 +68,7 @@ const toggleList = () => {
 const onOrganizationClick = (orgName: string) => {
   dropdownItems.value?.$el.scrollTo(0, 0);
   emit("activeorg$set", orgName);
-  closeDropdown();
+  handleIsActiveChange("");
 };
 
 const locationOrigin = window.location.origin;
@@ -85,13 +85,20 @@ watch(dropDownStatus, (n) => {
   }
 });
 
-function closeDropdown() {
+const showUserDropdown = ref(false);
+
+function handleIsActiveChange(isActive: string) {
   dropDownStatus.value = "close";
+  showUserDropdown.value = !!isActive?.length;
 }
 </script>
 
 <template>
-  <navbar-item :modifierClasses="'ac-profile-button'" @on-route-change="closeDropdown" @is-active="closeDropdown">
+  <navbar-item
+    :modifierClasses="'ac-profile-button'"
+    @on-route-change="handleIsActiveChange"
+    @on-is-active-change="handleIsActiveChange"
+  >
     <template #navbar-item>
       <div class="ac-user-profile mr-8">
         <img :src="user.avatar_url" alt="User Photo" />
@@ -104,7 +111,7 @@ function closeDropdown() {
     </button> -->
 
     <template #navbar-content>
-      <navbar-item-content class="navbar-dropdown-wrapper">
+      <navbar-item-content v-if="showUserDropdown" class="navbar-dropdown-wrapper">
         <div v-if="user.username" class="user-profile-wrapper">
           <a
             :href="`${serverDomain}/${user.username}`"