@appscode/design-system 2.4.27-alpha-9 → 2.4.27-alpha-11

package/package.json

@@ -1,25 +1,23 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.4.27-alpha-9",
+  "version": "2.4.27-alpha-11",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@appscode/design-system-images": "^0.0.13",
-    "crypto-js": "^4.1.1",
-    "fast-json-stable-stringify": "^2.1.0"
+    "@appscode/design-system-images": "^0.0.13"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/appscode/design-system.git"
   },
   "keywords": [
+    "appscode",
     "design-system",
-    "fluent-ui",
+    "material-ui",
     "ui",
-    "appscode",
     "bulma"
   ],
   "author": "AppsCode Design Team",

package/vue-components/styles/base/utilities/_customize-bulma.scss

@@ -33,7 +33,7 @@ $size-2: 2rem !default; //26px
 $size-3: 1.692rem !default; //22px
 $size-4: 1.385rem !default; //18px
 $size-5: 1.213rem !default; //16px
-$size-6: 1rem !default; //14px
+$size-6: 1rem !default; //13px
 $size-7: 0.846rem !default; //11px
 
 $weight-light: 300 !default;

package/vue-components/styles/base/utilities/_global.scss

@@ -85,7 +85,7 @@ $positions: (
   background-color: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.3);
   font-weight: 600;
-  font-size: 1rem;
+  font-size: 14px;
   border-radius: 2px;
   margin-left: 4px;
   padding: 4px;

package/vue-components/styles/components/_ac-code-highlight.scss

@@ -15,7 +15,7 @@
 
 code[class*="language-"],
 pre[class*="language-"] {
-  font-size: 1rem !important;
+  font-size: 14px !important;
 }
 
 .editor-writable {

package/vue-components/styles/components/_overview-page.scss

@@ -18,7 +18,7 @@
     }
 
     p {
-      font-size: 1rem;
+      font-size: 14px;
     }
   }
 
@@ -37,7 +37,7 @@
     }
 
     span.meta-data {
-      font-size: 1rem;
+      font-size: 14px;
     }
 
     .view-details-button {
@@ -65,7 +65,7 @@
     }
 
     .title-meta {
-      font-size: 1rem;
+      font-size: 14px;
       color: #4a4a4a;
     }
 

package/vue-components/styles/components/_preview-modal.scss

@@ -137,7 +137,7 @@
                 font-family: $font-paragraph;
                 font-style: normal;
                 font-weight: 500;
-                font-size: 1rem;
+                font-size: 14px;
                 line-height: 100%;
                 color: $color-heading;
                 border-top: 1px solid $color-border;
@@ -145,7 +145,7 @@
                 span {
                   img {
                     margin-right: 5px;
-                    height: 14px;
+                    height: 13px;
                   }
                 }
               }

package/vue-components/styles/components/_pricing-table.scss

@@ -93,7 +93,7 @@
         z-index: 1;
 
         h5 {
-          font-size: 1rem;
+          font-size: 14px;
           margin-bottom: 10px;
           font-weight: 500;
           overflow: hidden;

package/vue-components/styles/components/_progress-bar.scss

@@ -37,7 +37,7 @@
       border: 7px solid transparent;
       border-top-color: $gray-60;
       position: absolute;
-      bottom: -14px;
+      bottom: -13px;
       left: 50%;
       transform: translateX(-50%);
       border-width: 8px;
@@ -52,7 +52,7 @@
       border: 7px solid transparent;
       border-top-color: $gray-60;
       position: absolute;
-      bottom: -14px;
+      bottom: -13px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 1;

package/vue-components/styles/components/alert/_alert.scss

@@ -40,7 +40,7 @@
     position: absolute;
     box-shadow: none;
     border: none;
-    font-size: 1rem;
+    font-size: 14px;
     color: $danger;
     width: 40px;
     height: 100%;

package/vue-components/styles/components/bbum/_post.scss

@@ -9,7 +9,7 @@
     border: 1px solid $color-border;
     border-radius: 4px;
     padding: 30px 170px 30px 30px;
-    font-size: 1rem;
+    font-size: 14px;
     overflow: hidden;
     font-weight: 500;
 

package/vue-components/styles/components/bbum/_single-post-preview.scss

@@ -89,7 +89,7 @@
         padding-left: 10px;
 
         li {
-          font-size: 1rem;
+          font-size: 14px;
           color: $color-text;
         }
       }

package/vue-components/styles/components/cards/_vendor.scss

@@ -1,7 +1,7 @@
 // vendor cards start
 .ac-single-card.vendor-card {
-  border: 1px solid $color-border;
-  transition: 0.3s ease-in-out;
+  outline: 1px solid $color-border;
+  transition: 0s ease-in-out;
   border-radius: 2px;
   display: flex;
   flex-direction: column;
@@ -52,10 +52,10 @@
     }
   }
   &.is-selected {
-    border: 1px solid $ac-primary !important;
+    outline: 2px solid $ac-primary !important;
   }
   &:hover {
-    border: 1px solid $ac-primary;
+    outline: 2px solid $ac-primary;
 
     .ac-card-title {
       h4 {

package/vue-components/styles/components/editor/_filtered-file-editor.scss

@@ -139,7 +139,7 @@
                 display: flex;
                 font-style: normal;
                 font-weight: 500;
-                font-size: 1rem;
+                font-size: 14px;
                 line-height: 100%;
                 color: $color-heading;
                 border-top: 1px solid $color-border;
@@ -147,7 +147,7 @@
                 span {
                   img {
                     margin-right: 5px;
-                    height: 14px;
+                    height: 13px;
                   }
                 }
               }

package/vue-components/styles/components/navbar/_notification.scss

@@ -59,7 +59,7 @@
       height: 36px;
       background-color: $primary-95;
       color: $ac-primary;
-      font-size: 1rem;
+      font-size: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -72,7 +72,7 @@
     .notification-content {
       width: calc(100% - 60px);
       h6 {
-        font-size: 1rem;
+        font-size: 14px;
         font-weight: 500;
         transition: 0.3s ease-in-out;
       }

package/vue-components/styles/components/ui-builder/_ui-builder.scss

@@ -354,7 +354,7 @@
     h5 {
       font-style: normal;
       font-weight: 500;
-      font-size: 1rem;
+      font-size: 14px;
       line-height: 19px;
       color: $color-heading;
     }

package/vue-components/styles/components/ui-builder/_vue-open-api.scss

@@ -222,7 +222,7 @@
       }
 
       label {
-        top: 14px;
+        top: 13px;
         font-size: 1rem;
 
         &.show-label {

package/vue-components/styles/layouts/_code-preview.scss

@@ -167,7 +167,7 @@
         pre {
           margin: 0;
           border-radius: 4px;
-          font-size: 1rem;
+          font-size: 14px;
 
           .token {
             &.tag {

package/vue-components/v3/accordion/Accordion.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import ArrowIcon from "../icons/ArrowIcon.vue";
+
 withDefaults(defineProps<{ isActive?: boolean; bodyInside?: boolean }>(), {
   isActive: false,
   bodyInside: false,
@@ -19,17 +21,7 @@ defineEmits(["onClick"]);
           <slot name="description" />
         </div>
         <button class="icon">
-          <svg
-            :style="{ transform: isActive ? 'rotate(-180deg)' : 'rotate(0deg)' }"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="size-6"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-          </svg>
+          <ArrowIcon :direction="isActive ? 'down' : 'up'" />
         </button>
       </div>
     </div>

package/vue-components/v3/alert/AlertMessage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import CrossIcon from "../icons/CrossIcon.vue";
 
 interface Props {
   modifierClasses?: string;
@@ -34,17 +35,8 @@ function hideAlert() {
       </div>
 
       <button v-if="hasCrossIcon" class="button is-text" @click="hideAlert">
-        <span class="icon"
-          ><svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-6 h-6"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-          </svg>
+        <span class="icon">
+          <CrossIcon />
         </span>
       </button>
     </div>

package/vue-components/v3/alert/Toast.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import CrossIcon from "../icons/CrossIcon.vue";
+
 interface Props {
   modifierClasses?: string;
 }
@@ -15,16 +17,7 @@ withDefaults(defineProps<Props>(), {
       <small>2 hours ago</small>
       <button type="button" class="button ac-button is-white ml-8">
         <span class="icon">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-6 h-6"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-          </svg>
+          <CrossIcon />
         </span>
       </button>
     </div>

package/vue-components/v3/breadcrumbs/Breadcrumb.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { watch, ref } from "vue";
 import { useRoute } from "vue-router";
+import HomeIcon from "../icons/HomeIcon.vue";
 
 interface BreadCrumbType {
   name: string;
@@ -86,22 +87,7 @@ watch(
         <li v-for="(item, idx) in list" :key="idx" :class="{ 'is-active': idx === list.length - 1 }">
           <router-link class="router-link-active" :class="{ 'is-active': idx === list.length - 1 }" :to="item.path">
             <span v-if="idx === 0" class="icon is-flex-start p-0 m-0">
-              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="M1 4.5L5.5 1L10 4.5V10C10 10.2652 9.89464 10.5196 9.70711 10.7071C9.51957 10.8946 9.26522 11 9 11H2C1.73478 11 1.48043 10.8946 1.29289 10.7071C1.10536 10.5196 1 10.2652 1 10V4.5Z"
-                  stroke="#666666"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M4 11V6H7V11"
-                  stroke="#666666"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
+              <HomeIcon />
             </span>
             {{ item.name }}
           </router-link>

package/vue-components/v3/cards/InfoCard.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from "vue";
 import type { AcTableRow } from "../../types/table";
+import CpuIcon from "../icons/CpuIcon.vue";
+import MemoryIcon from "../icons/MemoryIcon.vue";
+import StorageIcon from "../icons/StorageIcon.vue";
 interface Props {
   title?: string;
   modifierClasses?: string;
@@ -33,15 +36,7 @@ const OptionDots = defineAsyncComponent(() => import("../option-dots/Options.vue
       <div class="left-content">
         <p title="CPU (request/limit)">
           <span class="icon">
-            <svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M6.63471 1V2.45659M2.60992 6.09807H1M20.319 6.09807H18.7091M2.60992 9.73955H1M20.319 9.73955H18.7091M2.60992 13.381H1M20.319 13.381H18.7091M6.63471 17.0225V18.4791M10.6595 1V2.45659M10.6595 17.0225V18.4791M14.6843 1V2.45659M14.6843 17.0225V18.4791M5.02479 17.0225H16.2942C16.9347 17.0225 17.5489 16.7923 18.0018 16.3826C18.4547 15.9728 18.7091 15.4171 18.7091 14.8376V4.64148C18.7091 4.06201 18.4547 3.50628 18.0018 3.09653C17.5489 2.68679 16.9347 2.45659 16.2942 2.45659H5.02479C4.38433 2.45659 3.7701 2.68679 3.31722 3.09653C2.86434 3.50628 2.60992 4.06201 2.60992 4.64148V14.8376C2.60992 15.4171 2.86434 15.9728 3.31722 16.3826C3.7701 16.7923 4.38433 17.0225 5.02479 17.0225ZM5.82975 5.36978H15.4893V14.1093H5.82975V5.36978Z"
-                stroke="#5C5C5C"
-                stroke-width="0.979443"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
+            <CpuIcon />
           </span>
           <strong>
             {{ rowData?.cells[2]?.data ? rowData?.cells[2]?.data : "-" }}
@@ -49,44 +44,7 @@ const OptionDots = defineAsyncComponent(() => import("../option-dots/Options.vue
         </p>
         <p title="Memory (request/limit)">
           <span class="icon">
-            <svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect
-                x="0.489721"
-                y="0.489721"
-                width="18.6094"
-                height="11.7533"
-                rx="1.46916"
-                stroke="#5C5C5C"
-                stroke-width="0.979443"
-              />
-              <rect
-                x="3.10105"
-                y="2.91453"
-                width="2.50302"
-                height="7.2059"
-                rx="1.25151"
-                stroke="#5C5C5C"
-                stroke-width="0.979443"
-              />
-              <rect
-                x="8.54246"
-                y="2.91453"
-                width="2.50302"
-                height="7.2059"
-                rx="1.25151"
-                stroke="#5C5C5C"
-                stroke-width="0.979443"
-              />
-              <rect
-                x="13.9839"
-                y="2.91453"
-                width="2.50302"
-                height="7.2059"
-                rx="1.25151"
-                stroke="#5C5C5C"
-                stroke-width="0.979443"
-              />
-            </svg>
+            <MemoryIcon />
           </span>
           <strong>
             {{ rowData.cells[3]?.data ? rowData?.cells[3]?.data : "-" }}
@@ -94,36 +52,7 @@ const OptionDots = defineAsyncComponent(() => import("../option-dots/Options.vue
         </p>
         <p title="Storage (request/limit)">
           <span class="icon">
-            <svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M20.3189 7.76208H1"
-                stroke="#5C5C5C"
-                stroke-width="0.979443"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M4.3325 1.93817L1 7.76161V12.8328C1 13.2811 1.20354 13.7111 1.56584 14.0281C1.92814 14.3451 2.41952 14.5232 2.93189 14.5232H18.387C18.8994 14.5232 19.3907 14.3451 19.753 14.0281C20.1153 13.7111 20.3189 13.2811 20.3189 12.8328V7.76161L16.9864 1.93817C16.8264 1.65654 16.5799 1.41953 16.2744 1.2538C15.969 1.08806 15.6167 1.00017 15.2573 1H6.06154C5.70213 1.00017 5.3499 1.08806 5.04445 1.2538C4.739 1.41953 4.49244 1.65654 4.3325 1.93817Z"
-                stroke="#5C5C5C"
-                stroke-width="0.979443"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M4.86426 11.1421H4.87333"
-                stroke="#5C5C5C"
-                stroke-width="1.27328"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M8.72754 11.1421H8.73661"
-                stroke="#5C5C5C"
-                stroke-width="1.27328"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
+            <StorageIcon />
           </span>
           <strong>
             {{ rowData?.cells[4]?.data ? rowData?.cells[4]?.data : "-" }}

package/vue-components/v3/cards/Monitoring.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import MonitorIcon from "../icons/MonitorIcon.vue";
+
 interface Props {
   title?: string;
   modifierClasses?: string;
@@ -16,29 +18,7 @@ withDefaults(defineProps<Props>(), {
       <div class="tag has-background-danger-light has-text-danger is-rounded required">REQUIRED</div>
       <div class="c-title is-flex gap-8 is-fullwidth is-align-items-center">
         <div class="icon">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M20 3H4C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H20C21.1046 17 22 16.1046 22 15V5C22 3.89543 21.1046 3 20 3Z"
-              stroke="#808080"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            ></path>
-            <path
-              d="M8 21H16"
-              stroke="#808080"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            ></path>
-            <path
-              d="M12 17V21"
-              stroke="#808080"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            ></path>
-          </svg>
+          <MonitorIcon />
         </div>
         <h5>{{ title }}</h5>
       </div>

package/vue-components/v3/cards/OverviewCard.vue

@@ -22,7 +22,7 @@
   border-radius: 2px;
   strong {
     min-width: 30px;
-    font-size: 1rem;
+    font-size: 14px;
   }
 }
 </style>

package/vue-components/v3/form-fields/AcSelect.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from "vue";
 import type { ComponentPublicInstance } from "vue";
 import Multiselect from "vue-multiselect";
+import CrossIcon from "../icons/CrossIcon.vue";
 
 interface Props {
   errorMsg?: string;
@@ -116,16 +117,7 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
     </label>
     <button v-if="allowEmpty && model" class="button ac-button is-clear is-transparent" @click.prevent="model = ''">
       <span class="icon width-16">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="size-6"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-        </svg>
+        <CrossIcon />
       </span>
     </button>
     <button

package/vue-components/v3/form-fields/Accordion.vue

@@ -2,10 +2,10 @@
 interface Props {
   label: string;
   customClass?: string;
-  isCollapsible: boolean;
-  isRequired: boolean;
-  errors: Array<string>;
-  isFormHidden: boolean;
+  isCollapsible?: boolean;
+  isRequired?: boolean;
+  errors?: Array<string>;
+  isFormHidden?: boolean;
 }
 withDefaults(defineProps<Props>(), {
   label: "",

package/vue-components/v3/form-fields/CustomSelect.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import ArrowIcon from "../icons/ArrowIcon.vue";
+import RefreshIcon from "../icons/RefreshIcon.vue";
+import CloseIcon from "../icons/CloseIcon.vue";
+import AcButton from "../button/Button.vue";
+import AcButtons from "../button/Buttons.vue";
 
 interface prop {
   multiselect?: boolean;
@@ -13,13 +17,6 @@ withDefaults(defineProps<prop>(), {
   custom: false,
   isOpen: false,
 });
-
-const AcButtons = defineAsyncComponent(() => import("../button/Buttons.vue"));
-const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
-
-const ArrowDownIcon = defineAsyncComponent(() => import("../icons/ArrowDownIcon.vue"));
-const RefreshIcon = defineAsyncComponent(() => import("../icons/RefreshIcon.vue"));
-const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
 </script>
 
 <template>
@@ -30,9 +27,7 @@ const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
 
     <!-- <input type="text" value="Select" /> -->
     <p class="custom-select-placeholder">
-      <span class="is-ellipsis-1">
-        Select Value Select ValueSelect ValueSelect ValueSelect ValueSelect ValueSelect Value
-      </span>
+      <span class="is-ellipsis-1"> Select Value </span>
     </p>
 
     <div v-if="multiselect" class="ac-field field is-grouped is-clipped">
@@ -66,7 +61,7 @@ const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
 
     <ac-buttons>
       <button class="button ac-button is-white">
-        <ArrowDownIcon />
+        <ArrowIcon />
       </button>
 
       <ac-button modifier-classes="is-white">

package/vue-components/v3/form-fields/FileUpload.vue

@@ -1,22 +1,13 @@
+<script setup lang="ts">
+import UploadIcon from "../icons/UploadIcon.vue";
+</script>
+
 <template>
   <div class="file-upload" data-testid="image-upload-drag-section">
     <label for="image-upload-with-cropping" class="has-text-centered" title="Click to upload new avatar">
       <div class="ms-upload-logo" title="Click to upload new avatar">
         <div class="upload-icon">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1"
-            stroke="currentColor"
-            class="w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
-            />
-          </svg>
+          <UploadIcon />
         </div>
       </div>
       <div class="ms-upload-description">

package/vue-components/v3/icons/BellIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <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)">
+      <path
+        d="M9.15331 14C9.03611 14.2021 8.86787 14.3698 8.66546 14.4864C8.46305 14.603 8.23357 14.6643 7.99998 14.6643C7.76639 14.6643 7.53691 14.603 7.3345 14.4864C7.13208 14.3698 6.96385 14.2021 6.84665 14M14.6666 11.3334H1.33331C1.86375 11.3334 2.37245 11.1227 2.74753 10.7476C3.1226 10.3725 3.33331 9.86381 3.33331 9.33337V6.00004C3.33331 4.76236 3.82498 3.57538 4.70015 2.70021C5.57532 1.82504 6.7623 1.33337 7.99998 1.33337C9.23766 1.33337 10.4246 1.82504 11.2998 2.70021C12.175 3.57538 12.6666 4.76236 12.6666 6.00004V9.33337C12.6666 9.86381 12.8774 10.3725 13.2524 10.7476C13.6275 11.1227 14.1362 11.3334 14.6666 11.3334Z"
+        stroke="#061B2D"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_534_14009">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

package/vue-components/v3/icons/CrossIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6"
+  >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+</template>

package/vue-components/v3/icons/GridIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.66667 2H2V6.66667H6.66667V2Z"
+      stroke="#061B2D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14 2H9.33337V6.66667H14V2Z"
+      stroke="#061B2D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14 9.33334H9.33337V14H14V9.33334Z"
+      stroke="#061B2D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.66667 9.33334H2V14H6.66667V9.33334Z"
+      stroke="#061B2D"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/vue-components/v3/icons/HomeIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1 4.5L5.5 1L10 4.5V10C10 10.2652 9.89464 10.5196 9.70711 10.7071C9.51957 10.8946 9.26522 11 9 11H2C1.73478 11 1.48043 10.8946 1.29289 10.7071C1.10536 10.5196 1 10.2652 1 10V4.5Z"
+      stroke="#666666"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path d="M4 11V6H7V11" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+</template>

package/vue-components/v3/icons/MemoryIcon.vue

@@ -1,8 +1,40 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
-    <path
-      fill="currentColor"
-      d="M232 56H24A16 16 0 0 0 8 72v128a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0v-16h16v16a8 8 0 0 0 16 0V72a16 16 0 0 0-16-16M24 72h208v96H24Zm88 80a8 8 0 0 0 8-8V96a8 8 0 0 0-8-8H48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8Zm-56-48h48v32H56Zm88 48h64a8 8 0 0 0 8-8V96a8 8 0 0 0-8-8h-64a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8m8-48h48v32h-48Z"
+  <svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      x="0.489721"
+      y="0.489721"
+      width="18.6094"
+      height="11.7533"
+      rx="1.46916"
+      stroke="#5C5C5C"
+      stroke-width="0.979443"
+    />
+    <rect
+      x="3.10105"
+      y="2.91453"
+      width="2.50302"
+      height="7.2059"
+      rx="1.25151"
+      stroke="#5C5C5C"
+      stroke-width="0.979443"
+    />
+    <rect
+      x="8.54246"
+      y="2.91453"
+      width="2.50302"
+      height="7.2059"
+      rx="1.25151"
+      stroke="#5C5C5C"
+      stroke-width="0.979443"
+    />
+    <rect
+      x="13.9839"
+      y="2.91453"
+      width="2.50302"
+      height="7.2059"
+      rx="1.25151"
+      stroke="#5C5C5C"
+      stroke-width="0.979443"
     />
   </svg>
 </template>

package/vue-components/v3/icons/MonitorIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M20 3H4C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H20C21.1046 17 22 16.1046 22 15V5C22 3.89543 21.1046 3 20 3Z"
+      stroke="#808080"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    ></path>
+    <path d="M8 21H16" stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M12 17V21" stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+  </svg>
+</template>

package/vue-components/v3/icons/StorageIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M20.3189 7.76208H1"
+      stroke="#5C5C5C"
+      stroke-width="0.979443"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.3325 1.93817L1 7.76161V12.8328C1 13.2811 1.20354 13.7111 1.56584 14.0281C1.92814 14.3451 2.41952 14.5232 2.93189 14.5232H18.387C18.8994 14.5232 19.3907 14.3451 19.753 14.0281C20.1153 13.7111 20.3189 13.2811 20.3189 12.8328V7.76161L16.9864 1.93817C16.8264 1.65654 16.5799 1.41953 16.2744 1.2538C15.969 1.08806 15.6167 1.00017 15.2573 1H6.06154C5.70213 1.00017 5.3499 1.08806 5.04445 1.2538C4.739 1.41953 4.49244 1.65654 4.3325 1.93817Z"
+      stroke="#5C5C5C"
+      stroke-width="0.979443"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.86426 11.1421H4.87333"
+      stroke="#5C5C5C"
+      stroke-width="1.27328"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.72754 11.1421H8.73661"
+      stroke="#5C5C5C"
+      stroke-width="1.27328"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/vue-components/v3/icons/UploadIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1"
+    stroke="currentColor"
+    class="w-6 h-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+    />
+  </svg>
+</template>

package/vue-components/v3/inbox/MessageList.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from "vue";
-const Searchbar = defineAsyncComponent(() => import("@/components/vue-components/v3/form-fields/Searchbar.vue"));
 
-const ArrowDownIcon = defineAsyncComponent(() => import("../icons/ArrowDownIcon.vue"));
-const RefreshIcon = defineAsyncComponent(() => import("../icons/RefreshIcon.vue"));
-const StarIcon = defineAsyncComponent(() => import("../icons/StarIcon.vue"));
-const EllipsisVertical = defineAsyncComponent(() => import("../icons/EllipsisVertical.vue"));
+import ArrowIcon from "../icons/ArrowIcon.vue";
+import RefreshIcon from "../icons/RefreshIcon.vue";
+import EllipsisVertical from "../icons/EllipsisVertical.vue";
+import StarIcon from "../icons/StarIcon.vue";
+
+const Searchbar = defineAsyncComponent(() => import("@/components/vue-components/v3/form-fields/Searchbar.vue"));
 </script>
 
 <template>
@@ -23,7 +24,7 @@ const EllipsisVertical = defineAsyncComponent(() => import("../icons/EllipsisVer
           </label>
           <button class="button ac-button is-white is-small" title="Filter">
             <span class="icon">
-              <ArrowDownIcon />
+              <ArrowIcon />
             </span>
           </button>
         </div>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, watch, nextTick } from "vue";
+import CrossIcon from "../icons/CrossIcon.vue";
 
 interface Props {
   title?: string;
@@ -89,16 +90,7 @@ const handleCancel = (event: Event) => {
               :disabled="disableModalClose"
             >
               <span class="icon">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                  stroke="currentColor"
-                  class="size-6"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-                </svg>
+                <CrossIcon />
               </span>
             </button>
           </div>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { setCookie } from "tiny-cookie";
 import { computed, defineAsyncComponent, ref } from "vue";
+import GridIcon from "../icons/GridIcon.vue";
 
 interface Props {
   currentApp?: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
@@ -110,36 +111,7 @@ const handleClick = (name: string) => {
 <template>
   <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
-          d="M6.66667 2H2V6.66667H6.66667V2Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M14 2H9.33337V6.66667H14V2Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M14 9.33334H9.33337V14H14V9.33334Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M6.66667 9.33334H2V14H6.66667V9.33334Z"
-          stroke="#061B2D"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
+      <GridIcon />
     </template>
     <template #navbar-content>
       <transition>

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref } from "vue";
-import TimeConvert from "../../plugins/time-convert";
 import type { Notification } from "../../types/notification";
+import { useTimeAgo } from "@vueuse/core";
+
+import BellIcon from "../icons/BellIcon.vue";
 const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
 const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
 withDefaults(
@@ -14,9 +16,7 @@ withDefaults(
     unreadNotification: 0,
   },
 );
-function notificationTime(time: number) {
-  return TimeConvert.getDayDifferences({ past: time });
-}
+
 const emit = defineEmits(["isActive"]);
 const showNotification = ref(false);
 function handleIsActiveChange(isActive: string | any[]) {
@@ -27,23 +27,7 @@ function handleIsActiveChange(isActive: string | any[]) {
 <template>
   <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)">
-          <path
-            d="M9.15331 14C9.03611 14.2021 8.86787 14.3698 8.66546 14.4864C8.46305 14.603 8.23357 14.6643 7.99998 14.6643C7.76639 14.6643 7.53691 14.603 7.3345 14.4864C7.13208 14.3698 6.96385 14.2021 6.84665 14M14.6666 11.3334H1.33331C1.86375 11.3334 2.37245 11.1227 2.74753 10.7476C3.1226 10.3725 3.33331 9.86381 3.33331 9.33337V6.00004C3.33331 4.76236 3.82498 3.57538 4.70015 2.70021C5.57532 1.82504 6.7623 1.33337 7.99998 1.33337C9.23766 1.33337 10.4246 1.82504 11.2998 2.70021C12.175 3.57538 12.6666 4.76236 12.6666 6.00004V9.33337C12.6666 9.86381 12.8774 10.3725 13.2524 10.7476C13.6275 11.1227 14.1362 11.3334 14.6666 11.3334Z"
-            stroke="#061B2D"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_534_14009">
-            <rect width="16" height="16" fill="white" />
-          </clipPath>
-        </defs>
-      </svg>
-
+      <BellIcon />
       <span v-if="unreadNotification > 999" class="notification-count">999+</span>
       <span v-else-if="unreadNotification !== 0" class="notification-count">{{ unreadNotification }}</span>
     </template>
@@ -65,7 +49,7 @@ function handleIsActiveChange(isActive: string | any[]) {
                     <h6>{{ data.msg }}</h6>
                     <p>{{ data.status }}</p>
                   </div>
-                  <span>{{ notificationTime(data.time) }}</span>
+                  <span>{{ useTimeAgo(data.time) }}</span>
                 </a>
 
                 <a v-if="!notifications.length" href="#" class="single-notification">

package/vue-components/v3/searchbars/SearchBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, watch } from "vue";
+import SearchIcon from "../icons/SearchIcon.vue";
 
 const AcSingleInput = defineAsyncComponent(() => import("../form-fields/AcSingleInput.vue"));
 
@@ -26,13 +27,7 @@ watch(searchText, (n) => {
   <ac-single-input modifier-classes="is-extra-small width-auto">
     <template #button>
       <label class="ac-search-button" :for="acInputId">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-          <path
-            fill-rule="evenodd"
-            d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-            clip-rule="evenodd"
-          />
-        </svg>
+        <SearchIcon />
       </label>
     </template>
     <ac-input name="search" placeholder="Search" type="search" class="ac-search" :id="acInputId" v-model="searchText" />

package/vue-components/v3/upcoming/SimpleSelect.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed, defineAsyncComponent, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { onClickOutside, useFocus } from "@vueuse/core";
 
 import AcButton from "../button/Button.vue";
 import AcButtons from "../button/Buttons.vue";
 
-const ArrowDownIcon = defineAsyncComponent(() => import("../icons/ArrowDownIcon.vue"));
-const RefreshIcon = defineAsyncComponent(() => import("../icons/RefreshIcon.vue"));
-const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
+import ArrowIcon from "../icons/ArrowIcon.vue";
+import RefreshIcon from "../icons/RefreshIcon.vue";
+import CloseIcon from "../icons/CloseIcon.vue";
 
 type Option = { text: string; value: string };
 interface prop {
@@ -104,7 +104,7 @@ watch(isOpen, (n) => {
 
     <ac-buttons>
       <button class="button ac-button is-white" @click="handleClear">
-        <ArrowDownIcon />
+        <ArrowIcon />
       </button>
 
       <ac-button modifier-classes="is-white" @click="$emit('onRefreshClick')">

package/vue-components/plugins/time-convert.js

@@ -1,45 +0,0 @@
-import moment from "moment";
-// import { useNow, useThrottleFn } from '@vueuse/core'
-
-const getTime = (option) => {
-  if (parseInt(option.time, 10) < 0 || !option.time) {
-    return undefined;
-  }
-  let time = option.time;
-
-  // moment(option.time).valueOf('x') needs to convert pharmer's api date to epoch time
-  time = moment(option.time).valueOf("x") ? moment(option.time).valueOf("x") : time * 1000;
-
-  return moment(time).format("MMM DD YYYY, h:mm A");
-};
-const getDayDifferences = (options) => {
-  const past = moment(options.past).isValid() ? moment(options.past).valueOf("x") / 1000 : options.past;
-  const now = Date.now() / 1000;
-  const diff = now - past;
-  if (parseInt(options.past, 10) > 10) {
-    let ret = Math.floor(diff / 86400);
-    let unit = "";
-    if (diff < 60) {
-      ret = parseInt(diff, 10);
-      unit = " Second";
-    } else if (diff < 3600) {
-      ret = parseInt(diff / 60, 10);
-      unit = " Minute";
-    } else if (diff < 86400) {
-      ret = parseInt(diff / 3600, 10);
-      unit = " Hour";
-    } else {
-      ret = parseInt(diff / 86400, 10);
-      unit = " Day";
-    }
-    unit += ret > 1 ? "s" : "";
-    return ret + unit;
-  }
-  return undefined;
-};
-
-export default {
-  getTime,
-  // formatMoment,
-  getDayDifferences,
-};