@appscode/design-system 2.4.26 → 2.4.27-alpha-3

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

@@ -170,7 +170,7 @@
     &.borderless-input {
       input {
         border: none;
-        font-size: 13px;
+        font-size: 14px;
         padding: 4px 7px;
         height: 30px;
         background-color: $white-100;
@@ -222,8 +222,8 @@
       }
 
       label {
-        top: 13px;
-        font-size: 13px;
+        top: 14px;
+        font-size: 14px;
 
         &.show-label {
           font-size: 12px;
@@ -239,7 +239,7 @@
           .icon {
             height: 45px;
             width: 30px;
-            font-size: 13px;
+            font-size: 14px;
           }
         }
       }
@@ -248,7 +248,7 @@
     &.is-small {
       input {
         height: 36px;
-        font-size: 13px;
+        font-size: 14px;
         font-weight: 400;
       }
 
@@ -271,7 +271,7 @@
 
       label {
         top: 8px;
-        font-size: 13px;
+        font-size: 14px;
 
         &.switch-label {
           top: 0;
@@ -296,7 +296,7 @@
           .icon {
             height: 36px;
             width: 25px;
-            font-size: 13px;
+            font-size: 14px;
           }
         }
       }
@@ -305,7 +305,7 @@
     &.is-extra-small {
       input {
         height: 32px;
-        font-size: 13px;
+        font-size: 14px;
         font-weight: 400;
       }
 
@@ -336,7 +336,7 @@
 
       label {
         top: 8px;
-        font-size: 13px;
+        font-size: 14px;
 
         &.switch-label {
           top: 0;
@@ -353,7 +353,7 @@
           .icon {
             height: 32px;
             width: 25px;
-            font-size: 13px;
+            font-size: 14px;
           }
         }
       }
@@ -382,7 +382,7 @@
     }
 
     label {
-      font-size: 13px;
+      font-size: 14px;
       left: 15px;
       top: 11px;
       cursor: text;
@@ -405,7 +405,7 @@
         top: -9px;
         left: 10px;
         padding: 0 5px;
-        font-size: 13px;
+        font-size: 14px;
         color: $gray-40;
 
         &:after {
@@ -474,7 +474,7 @@
           a {
             color: $color-heading;
             display: block;
-            font-size: 13px;
+            font-size: 14px;
             padding: 8px 20px;
             transition: 0.3s;
 
@@ -520,7 +520,7 @@
 
     b.isRequired {
       color: $danger;
-      font-size: 13px;
+      font-size: 14px;
       position: absolute;
       right: 5px;
       z-index: 9;

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

@@ -26,7 +26,7 @@ const model = defineModel({ type: Array });
       <span>{{ option.label }}</span>
     </label>
   </div>
-  <p v-show="errorMsg" class="is-danger mb-16">
+  <p v-show="errorMsg" class="has-text-danger mb-16">
     {{ errorMsg }}
   </p>
 </template>

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

@@ -28,14 +28,13 @@ const model = defineModel();
         :id="name + option.label"
         type="radio"
         :name="name"
-        l
         :value="option.value"
       />
       <label :for="name + option.label">{{ option.label }}</label>
-      <p v-show="errorMsg" class="is-danger">
+      <p v-show="errorMsg" class="has-text-danger">
         <slot name="message" />
       </p>
-      <p v-show="errorMsg" class="is-danger mb-16">
+      <p v-show="errorMsg" class="has-text-danger mb-16">
         {{ errorMsg }}
       </p>
     </div>

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

@@ -1,35 +1,37 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+interface Props {
+  placeholder?: string;
+  size?: string;
+  loading?: boolean;
+  withResult?: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  placeholder: "Search what you are looking for",
+  size: "is-small",
+  loading: false,
+  withResult: false,
+});
+
+const SearchIcon = defineAsyncComponent(() => import("./../icons/SearchIcon.vue"));
+const RefreshIcon = defineAsyncComponent(() => import("./../icons/RefreshIcon.vue"));
+</script>
 <template>
   <!-- searchbar  -->
   <div class="searchbar ac-single-input is-small is-relative">
     <label for="search">
       <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="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-          />
-        </svg>
+        <RefreshIcon v-if="loading" class="is-spin" />
+        <SearchIcon v-else />
       </span>
     </label>
-    <input id="search" type="text" placeholder="Search what you are looking for" class="pl-48" />
+    <input id="search" type="text" :placeholder="placeholder" class="pl-40" />
 
     <!-- use .is-absolute  -->
-    <div id="meilisearch-hideid" class="search-result-box panel is-fullwidth">
-      <div class="search-content" id="meilisearch-hits" style="max-height: 350px; overflow-y: auto">
-        <a class="panel-block is-flex-direction-column is-align-items-flex-start px-5 py-4" v-for="i in 6" :key="i">
-          <h2 class="is-size-5 has-text-primary">Changelog | <em>Kube</em>DB</h2>
-          <p class="is-ellipsis-2">
-            <em>Kube</em>DB v2020.07.10-beta.1 (2020-07-10) kubedb/apimachinery v0.14.0-beta.1 157a8724 Update for…
-          </p>
-        </a>
+    <div v-if="withResult" class="search-result-box panel is-fullwidth z-900">
+      <div class="search-content ac-vscrollbar p-0" style="max-height: 350px; overflow-y: auto">
+        <slot name="search-result" />
       </div>
     </div>
   </div>

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

@@ -8,14 +8,14 @@ withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    width="16px"
     height="16px"
+    width="16px"
     viewBox="0 0 24 24"
     stroke-width="1.5"
     stroke="currentColor"
     class="size-6"
     :style="direction === 'up' ? 'transform: rotate(0deg)' : 'transform: rotate(-180deg)'"
   >
-    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
   </svg>
 </template>

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

@@ -1,21 +1,14 @@
-<script setup lang="ts">
-withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
-  direction: "up",
-});
-</script>
-
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    height="16px"
     width="16px"
+    height="16px"
     viewBox="0 0 24 24"
     stroke-width="1.5"
     stroke="currentColor"
     class="size-6"
-    :style="direction === 'up' ? 'transform: rotate(0deg)' : 'transform: rotate(-180deg)'"
   >
-    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
   </svg>
 </template>

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

@@ -0,0 +1,16 @@
+<template>
+  <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="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="width-32">
+    <path
+      fill-rule="evenodd"
+      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,16 @@
+<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="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+interface Props {
+  fill?: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  fill: false,
+});
+</script>
+
+<template>
+  <svg v-if="fill" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+    <path
+      fill-rule="evenodd"
+      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+  <svg
+    v-else
+    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="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,16 @@
+<template>
+  <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="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { defineAsyncComponent } from "vue";
+import MessageDetails from "./MessageDetails.vue";
+
+const MessageList = defineAsyncComponent(() => import("@/components/vue-components/v3/inbox/MessageList.vue"));
+</script>
+
+<template>
+  <div class="is-flex">
+    <MessageList />
+    <MessageDetails />
+  </div>
+</template>

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

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { defineAsyncComponent } from "vue";
+const AlertMessage = defineAsyncComponent(() => import("@/components/vue-components/v3/alert/AlertMessage.vue"));
+const AcSingleInput = defineAsyncComponent(
+  () => import("@/components/vue-components/v3/form-fields/AcSingleInput.vue"),
+);
+
+const EllipsisVertical = defineAsyncComponent(() => import("../icons/EllipsisVertical.vue"));
+const StarIcon = defineAsyncComponent(() => import("../icons/StarIcon.vue"));
+const TrashIcon = defineAsyncComponent(() => import("../icons/TrashIcon.vue"));
+const InfoIcon = defineAsyncComponent(() => import("../icons/InfoIcon.vue"));
+</script>
+<template>
+  <div class="message-details">
+    <div class="is-flex is-justify-content-space-between">
+      <div class="is-flex gap-16">
+        <figure class="avatar image is-48x48">
+          <!-- <span class="dots"></span> -->
+          <div class="is-initial is-rounded is-size-2 has-text-weight-bold">S</div>
+        </figure>
+        <div class="is-flex is-flex-direction-column">
+          <h5>Support @AppsCode.com</h5>
+          <p>@appscode</p>
+        </div>
+      </div>
+
+      <div class="is-flex">
+        <button class="button ac-button is-white is-small" title="Star">
+          <span class="icon">
+            <StarIcon :fill="true" />
+          </span>
+        </button>
+
+        <button class="button ac-button is-white is-small" title="Trash">
+          <span class="icon">
+            <TrashIcon />
+          </span>
+        </button>
+
+        <button class="button ac-button is-white is-small" title="More Options">
+          <span class="icon">
+            <EllipsisVertical />
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div class="message-content mt-24">
+      <h2 class="mb-4">Update scanner addons</h2>
+      <p>
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the Lorem Ipsum
+        is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the...Lorem Ipsum is simply
+        dummy text of the printing and typesetting industry. Lorem Ipsum has been the...
+      </p>
+
+      <alert-message class="is-info mt-24 mb-24">
+        <template #icon>
+          <InfoIcon />
+        </template>
+        <template #custom-text>
+          Flux CD is not installed. We are going to install it. By default, we are going to enable Helm Controller and
+          Source controller feature of Flux CD. You will be able to configure Flux CD options from Settings > Flux CD of
+          your cluster dashboard.
+        </template>
+      </alert-message>
+
+      <!-- recommended actions  -->
+      <div class="recommended-actions mb-16">
+        <div class="recommended-heading">
+          <h4>Recommend Actions</h4>
+        </div>
+
+        <div class="recommended-body">
+          <div class="single-action" :class="{ 'mb-16': i === 1 }" v-for="i in 2" :key="i">
+            <h5 class="mb-4">Remedy Actions {{ i }}</h5>
+            <p>
+              Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the Lorem Ipsum is simply
+              dummy text of the printing and typesetting industry.
+            </p>
+
+            <div class="grid grid-cols-2 mt-16">
+              <ac-single-input modifier-classes="is-primary mr-16" v-for="i in 4" :key="i">
+                <label for="email" class="ac-label is-required show-label"
+                  >Email {{ i }}
+                  <!-- <span class="has-text-danger">*</span> -->
+                </label>
+
+                <input id="email" name="email" type="email" class="ac-input bg-white" value="user@appscode.com" />
+              </ac-single-input>
+            </div>
+
+            <div class="buttons">
+              <button class="button ac-button is-primary">Execute</button>
+              <button class="button ac-button">Ignore</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- recommended actions  -->
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,95 @@
+<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"));
+</script>
+
+<template>
+  <div class="inbox-sidebar">
+    <div class="head">
+      <!-- search  -->
+      <Searchbar placeholder="Search..." />
+      <!-- search  -->
+
+      <!-- filter  -->
+      <div class="is-flex is-justify-content-space-between">
+        <div class="is-flex gap-8">
+          <label class="ac-checkbox" for="checkbox16">
+            <input class="is-danger" id="checkbox16" type="checkbox" /><span class="checkmark"></span>
+          </label>
+          <button class="button ac-button is-white is-small" title="Filter">
+            <span class="icon">
+              <ArrowDownIcon />
+            </span>
+          </button>
+        </div>
+
+        <div class="is-flex gap-4">
+          <button class="button ac-button is-white is-small" title="Refresh">
+            <span class="icon">
+              <RefreshIcon />
+            </span>
+          </button>
+          <!-- is-active  -->
+          <div class="dropdown-action dropdown">
+            <button class="button ac-button is-white is-small" title="More">
+              <span class="icon">
+                <EllipsisVertical />
+              </span>
+            </button>
+            <!-- dropdown  -->
+            <div class="dropdown-menu" id="dropdown-menu3" role="menu" style="left: auto; right: 0">
+              <div class="dropdown-content ac-scrollbar p-0">
+                <div class="dropdown-group">
+                  <label>Options</label>
+                  <a href="#" class="dropdown-item">
+                    <span class="icon">
+                      <RefreshIcon />
+                    </span>
+                    <span>Read</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <!-- dropdown  -->
+          </div>
+        </div>
+      </div>
+      <!-- filter  -->
+    </div>
+
+    <div class="message-list ac-vscrollbar pt-0 pb-0">
+      <!-- messages '.is-unread' -->
+      <div
+        class="is-flex gap-16 is-clickable single-message"
+        v-for="i in 10"
+        :key="i"
+        :class="{ 'is-unread': i % 2 !== 0 }"
+      >
+        <label class="ac-checkbox is-align-items-flex-start" :for="'check' + i">
+          <input class="is-danger" :id="'check' + i" type="checkbox" /><span class="checkmark"></span>
+        </label>
+        <div class="is-flex gap-4 is-flex-direction-column">
+          <div class="is-flex is-flex-direction-column">
+            <span>Category</span>
+            <h6 class="has-text-weight-medium is-size-5">Update scanner addons</h6>
+          </div>
+          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
+        </div>
+        <div class="is-flex is-flex-direction-column is-justify-content-space-between">
+          <p class="is-size-7">2mins</p>
+          <button class="button ac-button is-transparent is-small">
+            <span class="icon">
+              <StarIcon />
+            </span>
+          </button>
+        </div>
+      </div>
+      <!-- messages  -->
+    </div>
+  </div>
+</template>

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

@@ -3,10 +3,10 @@ import { setCookie } from "tiny-cookie";
 import { computed, defineAsyncComponent, ref } from "vue";
 
 interface Props {
-  currentApp: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
-  baseUrl: string;
-  activeOrganization: string;
-  rootDomain: string;
+  currentApp?: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
+  baseUrl?: string;
+  activeOrganization?: string;
+  rootDomain?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -102,9 +102,8 @@ const filteredAppList = appListWithUrl.filter((element) => {
   return true;
 });
 
-const handleClick = (url: string) => {
-  setCookie("gorg", props.activeOrganization, { domain: props.rootDomain });
-  window.open(url, "_blank");
+const handleClick = (name: string) => {
+  if (name === "grafana") setCookie("gorg", props.activeOrganization, { domain: props.rootDomain });
 };
 </script>
 
@@ -148,7 +147,7 @@ const handleClick = (url: string) => {
           <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
             <ul class="ac-scrollbar p-0 app-drawer">
               <li v-for="app in filteredAppList" :key="app.url">
-                <a @click.prevent.stop="handleClick(app.url)">
+                <a :href="app.url" target="_blank" @click="handleClick(app.name)">
                   <article class="media">
                     <figure class="media-left">
                       <p class="image">

package/vue-components/v3/pagination/Pagination.vue

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

package/vue-components/v3/table/InfoTable.vue

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