@appscode/design-system 2.4.27-alpha1 → 2.4.27

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/pagination/Pagination.vue

@@ -170,7 +170,7 @@ watch(
         display: block;
         width: 20px;
         text-align: center;
-        font-size: 13px;
+        font-size: 1rem;
         font-weight: 500;
         border-radius: 4px;
         border: 1px solid $color-border;

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/table/InfoTable.vue

@@ -103,7 +103,7 @@ const isFullTableLoaderActive = computed(() => {
     tr {
       td {
         border: none;
-        font-size: 13px;
+        font-size: 1rem;
         color: $color-text;
         font-weight: 400;
         padding: 3px 0px;

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,
-};