@appscode/design-system 1.1.0-beta.9 → 1.1.0-beta.91

package/vue-components/v3/loaders/InfoCardLoader.vue

@@ -1,65 +1,23 @@
-<script setup lang="ts">
+<script>
 import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: { ContentLoader },
+};
 </script>
 
 <template>
-  <div>
-    <svg
-      role="img"
-      width="230"
-      height="115"
-      aria-labelledby="loading-aria"
-      viewBox="0 0 230 115"
-      preserveAspectRatio="none"
-    >
-      <title id="loading-aria">Loading...</title>
-      <rect
-        x="0"
-        y="0"
-        width="100%"
-        height="100%"
-        clip-path="url(#clip-path)"
-        style="fill: url('#fill')"
-      ></rect>
-      <defs>
-        <clipPath id="clip-path">
-          <rect x="150" y="40" rx="3" ry="3" width="60" height="50" />
-          <rect x="10" y="70" rx="3" ry="3" width="120" height="11" />
-          <rect x="10" y="100" rx="3" ry="3" width="120" height="11" />
-          <rect x="150" y="100" rx="3" ry="3" width="60" height="11" />
-          <rect x="10" y="1" rx="3" ry="3" width="200" height="22" />
-          <rect x="10" y="40" rx="3" ry="3" width="120" height="11" />
-        </clipPath>
-        <linearGradient id="fill">
-          <stop offset="0.599964" stop-color="#cfcfcf" stop-opacity="1">
-            <animate
-              attributeName="offset"
-              values="-2; -2; 1"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            ></animate>
-          </stop>
-          <stop offset="1.59996" stop-color="#ecebeb" stop-opacity="1">
-            <animate
-              attributeName="offset"
-              values="-1; -1; 2"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            ></animate>
-          </stop>
-          <stop offset="2.59996" stop-color="#cfcfcf" stop-opacity="1">
-            <animate
-              attributeName="offset"
-              values="0; 0; 3"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            ></animate>
-          </stop>
-        </linearGradient>
-      </defs>
-    </svg>
-  </div>
+  <content-loader
+    viewBox="0 0 230 115"
+    :speed="2"
+    primaryColor="#f5f5f5"
+    secondaryColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="0" ry="0" />
+    <rect x="10" y="70" rx="3" ry="3" width="120" height="11" />
+    <rect x="10" y="100" rx="3" ry="3" width="120" height="11" />
+    <rect x="150" y="100" rx="3" ry="3" width="60" height="11" />
+    <rect x="10" y="1" rx="3" ry="3" width="216" height="22" />
+    <rect x="10" y="40" rx="3" ry="3" width="120" height="11" />
+  </content-loader>
 </template>

package/vue-components/v3/loaders/SingleInfoCardLoader.vue

@@ -0,0 +1,24 @@
+<script>
+import { ContentLoader } from "vue-content-loader";
+
+export default {
+  components: { ContentLoader },
+};
+</script>
+
+<template>
+  <content-loader
+    viewBox="0 0 1540 90"
+    :speed="2"
+    primaryColor="#f5f5f5"
+    secondaryColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="0" ry="0" />
+    <circle cx="47" cy="52" r="21" />
+    <rect x="86" y="64" rx="0" ry="0" width="95" height="11" />
+    <rect x="86" y="29" rx="0" ry="0" width="146" height="22" />
+    <rect x="1240" y="57" rx="0" ry="0" width="64" height="12" />
+    <rect x="1340" y="57" rx="0" ry="0" width="64" height="12" />
+    <rect x="1440" y="56" rx="0" ry="0" width="64" height="12" />
+  </content-loader>
+</template>

package/vue-components/v3/modal/Modal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, watch } from "vue";
+import { onClickOutside } from "@vueuse/core";
 
 interface Props {
   open?: boolean;
@@ -31,19 +32,15 @@ const Buttons = defineAsyncComponent(() => import("./../button/Buttons.vue"));
 const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
 
 //TODO: need to update not a currect way to import the file
-const modalCloseIcon = import.meta.glob(
-  "/src/assets/icons/modal/close-icon.svg",
-  { eager: true }
-);
+const modalCloseIcon = import.meta.glob("../../../icons/close-icon.svg", {
+  eager: true,
+});
 
+const modal = ref();
 const showModal = ref(false);
 const crossIcon = ref(
-  (
-    modalCloseIcon["/src/assets/icons/modal/close-icon.svg"] as Record<
-      string,
-      unknown
-    >
-  ).default as string
+  (modalCloseIcon["../../../icons/close-icon.svg"] as Record<string, unknown>)
+    ?.default as string
 );
 
 const onKeyDown = (e: KeyboardEvent) => {
@@ -63,6 +60,8 @@ const onModalOutsideClick = () => {
   destroyModal();
 };
 
+onClickOutside(modal, onModalOutsideClick);
+
 const destroyModal = () => {
   if (props.isCloseOptionDisabled) return;
   showModal.value = false;
@@ -92,18 +91,17 @@ watch(
       v-if="showModal"
       class="ac-modal is-middle-alignment"
       :class="modifierClasses"
-      @click.self="onModalOutsideClick"
     >
-      <div class="ac-modal-inner">
+      <div ref="modal" class="ac-modal-inner">
         <!-- modal header start  -->
         <div class="ac-modal-header">
-          <h6>{{ title }}</h6>
+          <h5>{{ title }}</h5>
           <header-items>
             <slot name="modal-header-controls" />
             <header-item>
               <ac-button
+                v-if="!isCloseOptionDisabled"
                 modifier-classes="is-square is-transparent"
-                :disabled="isCloseOptionDisabled"
                 :icon-image="crossIcon"
                 @click.stop="destroyModal"
                 data-testid="modal-generic-close-icon"

package/vue-components/v3/modals/JsonShowModal.vue

@@ -85,6 +85,7 @@ const closeModal = () => {
       :read-only="true"
       language="json"
       :show-minimap="false"
+      word-wrap="on"
     />
   </modal>
 </template>

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

@@ -63,7 +63,7 @@ const NavbarItemContent = defineAsyncComponent(
     </template>
     <template #navbar-content>
       <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
-        <ul>
+        <ul class="ac-scrollbar p-0">
           <li v-for="app in apps" :key="app.url">
             <a :href="app.url">
               <article class="media">
@@ -103,6 +103,8 @@ const NavbarItemContent = defineAsyncComponent(
     background-color: $white-100;
     border: 1px solid $primary-90;
     // box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.16);
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
 
     li {
       display: block;

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

@@ -98,75 +98,9 @@ withDefaults(defineProps<Props>(), {
       align-items: center;
       justify-content: flex-end;
 
-      // .ac-organizations {
-      //   margin: 0;
-
-      //   .ac-nav-button {
-      //     border: none;
-      //     margin: 0;
-      //     padding: 0;
-      //     margin-right: 15px;
-      //     width: 26px;
-      //     height: 26px;
-      //     border-radius: 50%;
-      //     overflow: hidden;
-      //     border: 2px solid $white-100;
-
-      //     &:last-child {
-      //       margin-right: 0;
-      //       position: relative;
-      //       z-index: 1;
-
-      //       .more-items {
-      //         text-align: center;
-      //         color: $white-100;
-      //         z-index: 99;
-      //         position: absolute;
-      //         font-size: 11px;
-      //         font-weight: 500;
-      //       }
-
-      //       &::after {
-      //         position: absolute;
-      //         content: "";
-      //         left: 0;
-      //         top: 0;
-      //         width: 100%;
-      //         height: 100%;
-      //         background-color: $primary-5;
-      //         opacity: 0.2;
-      //         z-index: 1;
-      //       }
-      //     }
-      //   }
-      // }
-
       .ac-menu-item {
         position: relative;
         z-index: 1;
-
-        // width: 30px;
-        // height: 30px;
-        // border-radius: 50%;
-        // .ac-nav-button:not(.ac-profile-button) {
-        //   &:after {
-        //     content: "";
-        //     border-radius: 50%;
-        //     width: 30px;
-        //     height: 30px;
-        //     position: absolute;
-        //     z-index: -1;
-        //     left: 50%;
-        //     transition: 0.3s ease-in-out;
-        //     margin-left: -15px;
-        //   }
-
-        //   &:hover {
-        //     &:after {
-        //       background-color: rgba(255, 255, 255, 0.2) !important;
-        //     }
-        //   }
-        // }
       }
     }
   }
@@ -179,95 +113,12 @@ withDefaults(defineProps<Props>(), {
     }
   }
 }
-// start dark theme
-.is-dark-theme {
-  body {
-    .ac-navbar-area {
-      background-color: var(--dark-bg-light);
-      --ac-white: #ffffff;
-      --ac-white-lighter: #f1f1f1;
-
-      .ac-navbar {
-        .search-item {
-          background-color: rgba(0, 0, 0, 0.2);
-        }
-
-        .ac-navbar-menu {
-          .ac-menu-item {
-            .quick-access {
-              --ac-white: var(--dark-bg-light);
-            }
-
-            .ac-menu-content {
-              // &.theme-choice {
-              //   background-color: var(--dark-bg-light);
-              // }
-
-              background-color: var(--dark-bg-light);
-
-              ul {
-                background-color: var(--dark-bg-light);
-              }
-
-              &::after {
-                --ac-white: var(--dark-bg-light);
-              }
-
-              .user-profile-wrapper {
-                --ac-white: var(--dark-bg-light);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// end dark theme code
 
 /****************************************
 Responsive Classes
 *****************************************/
 // Extra small devices (portrait phones, less than 576px)
 @media (max-width: 575.98px) {
-  // .ac-navbar-area {
-  //   .ac-navbar {
-  //     grid-template-columns: 60px 30px auto;
-
-  //     .ac-navbar-brand {
-  //       max-width: 40px;
-
-  //       a {
-  //         display: block;
-  //       }
-  //     }
-
-  //     .search-item {
-  //       display: inline-block;
-
-  //       input {
-  //         display: none;
-  //       }
-  //     }
-
-  //     .ac-navbar-menu {
-  //       .ac-menu-item {
-  //         .ac-nav-button {
-  //           margin-left: 0px;
-
-  //           &.ac-profile-button {
-  //             margin-left: 0px;
-
-  //             strong {
-  //               display: none;
-  //             }
-  //           }
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
 }
 
 // Small devices (landscape phones, 576px and up)
@@ -276,20 +127,10 @@ Responsive Classes
 
 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) and (max-width: 991.98px) {
-  // .ac-navbar-area {
-  //   .ac-navbar {
-  //     grid-template-columns: 250px auto auto;
-  //   }
-  // }
 }
 
 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) and (max-width: 1199.98px) {
-  // .ac-navbar-area {
-  //   .ac-navbar {
-  //     grid-template-columns: 270px auto auto;
-  //   }
-  // }
 }
 
 // Extra large devices (large desktops, 1200px and up)

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

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import { onClickOutside } from "@vueuse/core";
+
 interface Props {
   modifierClasses?: string;
 }
@@ -6,11 +9,28 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   modifierClasses: "",
 });
+
+const emit = defineEmits(["isActive"]);
+
+const navbarItem = ref(null);
+
+const isActive = ref("");
+function clickEvent() {
+  if (isActive.value) isActive.value = "";
+  else isActive.value = " is-active";
+  emit("isActive", isActive.value);
+}
+
+onClickOutside(navbarItem, () => (isActive.value = ""));
 </script>
 
 <template>
-  <div class="ac-menu-item" :class="modifierClasses">
-    <button class="button ac-nav-button">
+  <div
+    ref="navbarItem"
+    class="ac-menu-item"
+    :class="modifierClasses + isActive"
+  >
+    <button class="button ac-nav-button" @click="clickEvent()">
       <slot name="navbar-item" />
     </button>
     <slot name="navbar-content" />
@@ -22,6 +42,14 @@ withDefaults(defineProps<Props>(), {
   margin-left: 12px;
   position: relative;
 
+  &.is-active {
+    .ac-nav-button {
+      &::after {
+        background-color: $primary-90;
+      }
+    }
+  }
+
   &:first-child {
     margin-left: 0;
   }
@@ -32,13 +60,6 @@ withDefaults(defineProps<Props>(), {
       border-radius: 0;
       font-weight: 500;
       border: none;
-      // .ac-user-profile {
-      //   img {
-      //     border-radius: 50%;
-      //     width: 32px;
-      //     height: 32px;
-      //   }
-      // }
       &::after {
         border-radius: 0;
         border: none;
@@ -55,25 +76,26 @@ withDefaults(defineProps<Props>(), {
     position: relative;
     z-index: 99;
     user-select: none;
+    border: 1px solid $primary-80;
     cursor: pointer;
     &:after {
       position: absolute;
       content: "";
       left: 0;
       top: 0;
-
-      background-color: $primary-80;
-      opacity: 0.2;
+      opacity: 1;
+      z-index: -1;
       width: 100%;
       height: 100%;
       border-radius: 50%;
       transition: 0.3s ease-in-out;
     }
-
+    &:focus {
+      box-shadow: none;
+    }
     &:hover {
       &:after {
-        background-color: $primary-70;
-        opacity: 0.4;
+        background-color: $primary-90;
       }
     }
   }

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

@@ -11,16 +11,13 @@
   position: absolute;
   right: 0;
   top: 80px;
-  // box-shadow: $ac-shadow-1;
   min-width: 180px;
   opacity: 0;
   visibility: hidden;
   transition: 0.3s ease-in;
   width: 260px;
-
-  // &.theme-choice {
-  //   left: 0;
-  // }
+  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
+    0 0px 0 1px rgba(10, 10, 10, 0.02);
 
   &.quick-access {
     background-color: $white-100;
@@ -80,7 +77,7 @@
             border: none;
             padding: 0;
             font-size: 11px;
-            color: #eb5757;
+            color: $danger;
             background-color: transparent;
           }
         }
@@ -260,11 +257,12 @@
 }
 
 .ac-menu-item {
-  &:hover {
+  &.is-active {
     .ac-menu-content {
       opacity: 1;
       visibility: visible;
-      top: 40px;
+      top: 35px;
+      z-index: 99;
 
       &::after {
         position: absolute;

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

@@ -6,16 +6,23 @@ const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
 const NavbarItemContent = defineAsyncComponent(
   () => import("./NavbarItemContent.vue")
 );
-defineProps<{
-  notifications: Notification[];
-}>();
-
+withDefaults(
+  defineProps<{
+    notifications?: Array<Notification>;
+    unreadNotification?: number;
+  }>(),
+  {
+    notifications: () => [],
+    unreadNotification: 0,
+  }
+);
+defineEmits(["isActive"]);
 function notificationTime(time: number) {
   return TimeConvert.getDayDifferences({ past: time });
 }
 </script>
 <template>
-  <navbar-item v-if="true">
+  <navbar-item ref="notificationItem" @is-active="$emit('isActive', $event)">
     <template #navbar-item>
       <svg
         width="16"
@@ -39,6 +46,13 @@ function notificationTime(time: number) {
           </clipPath>
         </defs>
       </svg>
+
+      <span v-if="unreadNotification > 999" class="notification-count"
+        >999+</span
+      >
+      <span v-else-if="unreadNotification !== 0" class="notification-count">{{
+        unreadNotification
+      }}</span>
     </template>
 
     <template #navbar-content>
@@ -52,7 +66,7 @@ function notificationTime(time: number) {
             <span>{{ notifications.length }}</span>
           </div>
 
-          <div class="notification-body">
+          <div class="notification-body ac-scrollbar p-0">
             <a
               v-for="data in notifications"
               href="#"
@@ -80,10 +94,6 @@ function notificationTime(time: number) {
               <span> </span>
             </a>
           </div>
-
-          <div class="notification-footer">
-            <button class="">See More</button>
-          </div>
         </div>
       </navbar-item-content>
     </template>
@@ -91,6 +101,22 @@ function notificationTime(time: number) {
 </template>
 
 <style lang="scss" scoped>
+.notification-count {
+  position: absolute;
+  background-color: $primary;
+  color: $white-100;
+  padding: 4px;
+  font-size: 11px;
+  line-height: 1;
+  border-radius: 50px;
+  min-width: 20px;
+  height: 20px;
+  right: -10px;
+  top: -8px;
+  border: 1px solid $primary-97;
+  opacity: 1;
+  z-index: 9;
+}
 .dropdown-inner {
   border-radius: 4px;
   overflow: hidden;
@@ -115,6 +141,8 @@ function notificationTime(time: number) {
   }
 }
 .notification-body {
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
   a {
     display: flex;
     color: $primary-20;