@appscode/design-system 2.6.38 → 2.7.1

package/main.scss

@@ -16,6 +16,7 @@
 // COMPONENTS
 // @import "@/components/vue-components/styles/components/all";
 @import "@/components/vue-components/styles/components/button";
+@import "@/components/vue-components/styles/components/table";
 @import "@/components/vue-components/styles/components/avatar";
 @import "@/components/vue-components/styles/components/terminal";
 @import "@/components/vue-components/styles/components/steps";
@@ -28,5 +29,6 @@
 @import "@/components/vue-components/styles/components/ui-builder/ui-builder";
 @import "@/components/vue-components/styles/components/dropdown";
 @import "@/components/vue-components/styles/components/badge-tags";
+@import "@/components/vue-components/styles/components/platform-design";
 
 // @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

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

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

@@ -99,7 +99,7 @@ $spacing-values: (
   }
 }
 
-/* Deafult height & widht */
+/* Default height & width */
 @for $i from 0 through 300 {
   .height-#{$i} {
     height: #{$i}px !important;
@@ -108,6 +108,11 @@ $spacing-values: (
   .width-#{$i} {
     width: #{$i}px !important;
   }
+
+  .dimension-#{$i} {
+    height: #{$i}px !important;
+    width: #{$i}px !important;
+  }
 }
 
 .height-auto {

package/vue-components/styles/components/_all.scss

@@ -32,10 +32,12 @@
 @import "tfa";
 @import "transitions";
 @import "steps";
+@import "platform-design";
 
 // @import "pricing-table";
 // @import "overview-info";
 // @import "overview-page"
 // @import "nested-list";
+
 @import "ui-builder/ui-builder";
 @import "ui-builder/vue-open-api";

package/vue-components/styles/components/_avatar.scss

@@ -34,4 +34,15 @@
       border-radius: 50%;
     }
   }
+  img {
+    background-color: #ddd;
+    height: 100%;
+    width: 100%;
+    border: 1px solid $color-border;
+  }
+}
+.avatar-group {
+  .avatar:not(:first-child) {
+    margin-left: -8px;
+  }
 }

package/vue-components/styles/components/_button.scss

@@ -44,6 +44,9 @@
             border-color: transparent transparent $ac-primary $ac-primary !important;
           }
         }
+        &.is-soft:not(:hover) {
+          border-color: hsl(var(--primary-hue), 30%, 80%);
+        }
       }
     }
     &.is-warning {
@@ -56,6 +59,9 @@
           border-color: transparent;
         }
       }
+      &.is-soft:not(:hover) {
+        border-color: hsl($yellow-hue, 30%, 80%);
+      }
     }
     &.is-info {
       &.is-light {
@@ -67,6 +73,9 @@
           border-color: transparent;
         }
       }
+      &.is-soft:not(:hover) {
+        border-color: hsl($blue-hue, 30%, 80%);
+      }
     }
     &.is-danger {
       &.is-light {
@@ -78,6 +87,9 @@
           border-color: transparent;
         }
       }
+      &.is-soft:not(:hover) {
+        border-color: hsl($red-hue, 30%, 80%);
+      }
     }
 
     &.is-success {
@@ -90,6 +102,9 @@
           border-color: transparent;
         }
       }
+      &.is-soft:not(:hover) {
+        border-color: hsl($green-hue, 30%, 80%);
+      }
     }
     &.is-light {
       &.is-loading {

package/vue-components/styles/components/_platform-design.scss

@@ -0,0 +1,188 @@
+.profile-banner {
+  background-color: #e3f0ea;
+  background-image: url("../../images/banners/banner-background.png");
+  padding-top: 16px;
+  min-height: 120px;
+  border-bottom: 1px solid $color-border;
+  overflow: hidden;
+  background-color: #eff9f3;
+  position: sticky;
+  top: 50px;
+  z-index: 999;
+
+  &::after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #e7f4ee;
+    background-image: url("../../images/banners/banner-overlay.png");
+    background-position: 0% 0%;
+    backdrop-filter: blur(142px);
+    z-index: -1;
+    background-repeat: round;
+  }
+}
+
+.solid-tab {
+  ul {
+    border-color: transparent !important;
+  }
+  li {
+    a {
+      padding: 16px 0px !important;
+      margin-right: 32px;
+      transition: 0.3s ease-in-out;
+      border-bottom-color: transparent;
+    }
+
+    &.is-active,
+    &:hover {
+      a {
+        border-bottom-color: transparent !important;
+        position: relative;
+
+        &::after {
+          position: absolute;
+          content: "";
+          left: 0;
+          bottom: -1px;
+          width: 100%;
+          height: 4px;
+          border-radius: 4px 4px 0 0;
+          z-index: 1;
+          background-color: $ac-primary;
+        }
+      }
+    }
+  }
+}
+
+.body-bottom {
+  .cluster {
+    background-color: $primary-light-gray;
+  }
+}
+
+.filterable-searchbar {
+  width: 100%;
+  position: relative;
+
+  .search-filter {
+    border: 1px solid $color-border;
+    background-color: #fff;
+    position: absolute;
+    z-index: 9;
+    right: 8px;
+    height: 36px;
+    top: 8px;
+    padding: 8px 16px;
+    border-radius: 4px;
+    &:focus {
+      outline: 1px solid $color-border-dark;
+    }
+  }
+
+  .searchbar {
+    width: 100%;
+  }
+
+  .ac-single-input {
+    input {
+      background-color: $primary-light-gray;
+      height: 52px !important;
+    }
+
+    label {
+      top: 16px !important;
+    }
+  }
+}
+
+// sidebar items
+.sidebar-style-2 {
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  box-shadow: 8px 4px 14px 0px rgba(0, 0, 0, 0.05);
+
+  .left-sidebar {
+    width: 250px;
+  }
+
+  .sidebar-items {
+    display: flex;
+    flex-direction: column;
+
+    .sidebar-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: $color-text;
+      padding: 8px 16px;
+      transition: 0.1s ease-in-out;
+
+      &:last-child {
+        margin-bottom: 8px;
+      }
+
+      &:hover {
+        background-color: $primary-light-gray;
+      }
+
+      &.is-active {
+        background-color: $ac-primary;
+        color: $white-100;
+      }
+    }
+
+    .label {
+      border-bottom: 1px solid $color-border;
+      font-weight: 400 !important;
+      color: $color-heading;
+    }
+  }
+}
+
+.section-card {
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  .section-heading {
+    border-bottom: 1px solid $color-border;
+    background-color: $secondary-light-grey;
+    padding: 8px 16px;
+  }
+}
+
+.more-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 1px solid $color-border;
+  border-radius: 50%;
+  font-size: 10px;
+  padding: 4px;
+  cursor: pointer;
+  background-color: $primary-light-gray;
+}
+.avatar-group {
+  display: flex;
+  gap: 4px;
+  .more-avatar {
+    margin-left: -8px;
+    z-index: 9;
+  }
+  .avatar-link {
+    display: inline-block;
+    &:hover {
+      z-index: 9;
+    }
+
+    &:not(:first-child) {
+      margin-left: -4px;
+    }
+  }
+}

package/vue-components/styles/components/form-fields/_file-upload.scss

@@ -26,7 +26,7 @@
       width: 100px;
       height: 100px;
       margin-bottom: 24px;
-      padding: 24px;
+      padding: 4px;
 
       svg {
         color: $primary-30;

package/vue-components/styles/components/form-fields/_input.scss

@@ -578,54 +578,3 @@
     }
   }
 }
-
-// file upload
-.file-upload {
-  border: 1px dashed $color-border-dark;
-  border-radius: 4px;
-
-  &:hover {
-    background-color: $secondary-light-gray;
-    border-color: $ac-primary;
-
-    label {
-      .upload-icon {
-        border: 1px solid $color-border-dark;
-
-        svg {
-          color: $color-heading;
-        }
-      }
-    }
-  }
-
-  label {
-    cursor: pointer;
-    padding: 32px;
-    display: block;
-
-    .upload-icon {
-      border: 1px solid $color-border;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      width: 100px;
-      height: 100px;
-      margin-bottom: 24px;
-      padding: 24px;
-
-      svg {
-        color: $primary-30;
-      }
-    }
-
-    p {
-      color: $color-heading;
-
-      strong {
-        font-weight: 600;
-      }
-    }
-  }
-}

package/vue-components/v3/banner/ProfileBanner.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { defineAsyncComponent, defineProps } from "vue";
+import BuildingIcon from "../icons/BuildingIcon.vue";
+import LinkIcon from "../icons/LinkIcon.vue";
+import MapIcon from "../icons/MapIcon.vue";
+
+interface TabItemType {
+  label: string;
+  href: string;
+  icon: any;
+}
+
+interface PropsType {
+  profileThumbnail?: string;
+  displayName?: string;
+  username?: string;
+  location?: string;
+  webURL?: string;
+  tabs?: TabItemType[];
+}
+
+withDefaults(defineProps<PropsType>(), {
+  profileThumbnail: "https://placehold.co/100x100",
+  displayName: "John Doe",
+  username: "@mohintest1",
+  location: "Dhaka",
+  webURL: "https://appscode.com",
+  tabs: () => [
+    { label: "Overview", href: "#", icon: BuildingIcon },
+    { label: "Organizations", href: "#", icon: BuildingIcon },
+    { label: "Activities", href: "#", icon: BuildingIcon },
+    { label: "Settings", href: "#", icon: BuildingIcon },
+    { label: "Site Administration", href: "#", icon: BuildingIcon },
+  ],
+});
+
+// Avatar
+const Avatar = defineAsyncComponent(() => import("../avatar/Avatar.vue"));
+// Tabs
+const TabsComponent = defineAsyncComponent(() => import("../tab/Tabs.vue"));
+const TabItemComponent = defineAsyncComponent(() => import("../tab/TabItem.vue"));
+</script>
+
+<template>
+  <div class="profile-banner">
+    <div class="container">
+      <div class="columns is-multiline">
+        <div class="column is-12">
+          <!-- user profile start  -->
+          <div class="user-profile">
+            <div class="avatar is-flex gap-16">
+              <!-- <slot name="avatar"> -->
+              <Avatar size="48x48" :imgUrl="profileThumbnail" roundedClass="is-rounded-4" />
+              <!-- </slot> -->
+              <!-- <Avatar size="48x48" roundedClass="is-rounded-4" /> -->
+              <div class="is-flex is-flex-direction-column">
+                <h5 class="mb-0">{{ displayName }}</h5>
+                <div class="is-flex is-align-items-center gap-24">
+                  <p>{{ username }}</p>
+                  <p class="is-flex is-align-items-center gap-4">
+                    <span class="icon"><MapIcon /></span>
+                    <span>{{ location }}</span>
+                  </p>
+
+                  <a :href="`${webURL}`" target="_blank" class="is-flex is-align-items-center gap-4">
+                    <span class="icon"><LinkIcon /></span>
+                    <span class="is-underlined">{{ webURL }}</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- user profile start  -->
+        </div>
+
+        <!-- <slot name="tabs-menu"> -->
+        <!-- tabs area start  -->
+        <div class="column is-12">
+          <tabs-component class="solid-tab px-3">
+            <tab-item-component v-for="(tab, index) in tabs" :key="index" :class="{ 'is-active': index === 0 }">
+              <a :href="tab.href">
+                <span class="icon"><component :is="tab.icon" /></span>
+                <span>{{ tab.label }}</span>
+              </a>
+            </tab-item-component>
+          </tabs-component>
+        </div>
+        <!-- tabs area end  -->
+        <!-- </slot> -->
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -48,8 +48,8 @@ const OptionDots = defineAsyncComponent(() => import("../option-dots/Options.vue
               :key="idx + tag.value"
               :class="tag.class"
               :data-testid="idx === 0 ? 'cluster-status-text' : undefined"
-              class="is-flex is-align-center gap-4"
-              ><span v-if="tag?.isSpinner || false" class="is-flex gap-4"><SvgSpinners270Ring /></span
+              class="is-flex is-align-center gap-6"
+              ><span v-if="tag?.isSpinner || false" class="is-flex gap-6"><SvgSpinners270Ring /></span
               >{{ tag.value }}</span
             >
           </div>

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

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import Avatar from "../avatar/Avatar.vue";
+
+interface RightSidebar {
+  title?: string;
+  logo?: string;
+  url?: string;
+  viewType?: string;
+  members?: Array<{
+    name: string;
+    avatar: string;
+    profileUrl: string;
+  }>;
+  teams?: Array<{
+    name: string;
+    color: string;
+  }>;
+}
+
+withDefaults(defineProps<RightSidebar>(), {
+  title: "Appscodelabs",
+  logo: "https://placehold.co/100x100",
+  url: "#",
+  viewType: "",
+  members: () => [
+    { name: "Alice", avatar: "https://randomuser.me/api/portraits/women/1.jpg", profileUrl: "#" },
+    { name: "Bob", avatar: "https://randomuser.me/api/portraits/men/1.jpg", profileUrl: "#" },
+    { name: "Charlie", avatar: "https://randomuser.me/api/portraits/women/2.jpg", profileUrl: "#" },
+    { name: "Dave", avatar: "https://randomuser.me/api/portraits/men/2.jpg", profileUrl: "#" },
+    { name: "Emma", avatar: "https://randomuser.me/api/portraits/women/3.jpg", profileUrl: "#" },
+    { name: "Frank", avatar: "https://randomuser.me/api/portraits/men/3.jpg", profileUrl: "#" },
+    { name: "Grace", avatar: "https://randomuser.me/api/portraits/women/4.jpg", profileUrl: "#" },
+  ],
+  teams: () => [
+    { name: "Frontend", color: "green" },
+    { name: "Backend", color: "purple" },
+    { name: "UI", color: "green-light" },
+    { name: "Database", color: "blue" },
+    { name: "Socialmedia", color: "gray" },
+  ],
+});
+</script>
+
+<template>
+  <div class="teams-members-container">
+    <!-- Organization Thumbnail -->
+    <div v-if="viewType === 'organization'" class="org-section">
+      <h5>Organizations</h5>
+      <ul class="org-list">
+        <li v-for="i in 8" :key="i">
+          <a :href="url" class="org-thumb" :title="title">
+            <img :src="logo" :alt="title" />
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Teams Section -->
+    <div v-if="viewType === 'team-member'" class="teams-section">
+      <h5>Teams ({{ teams.length }})</h5>
+      <div class="teams-list">
+        <span v-for="(team, index) in teams" :key="index" :class="['team-tag', team.color]">
+          <a :href="url" :title="title" class="team-name">
+            {{ team.name }}
+          </a>
+        </span>
+      </div>
+    </div>
+
+    <!-- Members Section -->
+    <div v-if="viewType === 'team-member'" class="members-section">
+      <h5>Members ({{ members.length }})</h5>
+      <div class="members-list">
+        <a v-for="(member, idx) in members" :key="idx" :href="member.profileUrl" target="_blank" class="member-link">
+          <Avatar :rounded="true" size="24x24" :imgUrl="member.avatar" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.teams-members-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Organization Thumbnail */
+.org-list {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.org-thumb {
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  padding: 6px;
+  height: 48px;
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  img {
+    height: 32px;
+    width: auto;
+    background-color: #ddd;
+  }
+}
+
+/* Teams Section */
+h5 {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.teams-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.team-tag {
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: white;
+  a {
+    color: white;
+    text-decoration: none;
+  }
+}
+
+/* Team Colors */
+.green {
+  background-color: #28a745;
+}
+.purple {
+  background-color: #6f42c1;
+}
+.green-light {
+  background-color: #17a2b8;
+}
+.blue {
+  background-color: #007bff;
+}
+.gray {
+  background-color: #6c757d;
+}
+
+/* Members Section */
+.members-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.member-link {
+  text-decoration: none;
+}
+
+.member-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, watch } from "vue";
 
 interface Props {
   placeholder?: string;
@@ -13,7 +13,13 @@ withDefaults(defineProps<Props>(), {
   loading: false,
   withResult: false,
 });
+const emit = defineEmits(["handleSearch"]);
 
+const searchText = ref("");
+
+watch(searchText, (n) => {
+  emit("handleSearch", n.trim());
+});
 const SearchIcon = defineAsyncComponent(() => import("./../icons/SearchIcon.vue"));
 const RefreshIcon = defineAsyncComponent(() => import("./../icons/RefreshIcon.vue"));
 </script>
@@ -26,7 +32,7 @@ const RefreshIcon = defineAsyncComponent(() => import("./../icons/RefreshIcon.vu
         <SearchIcon v-else />
       </span>
     </label>
-    <input id="search" type="text" :placeholder="placeholder" class="pl-40" />
+    <input id="search" type="text" :placeholder="placeholder" class="pl-40" v-model="searchText" />
 
     <!-- use .is-absolute  -->
     <div v-if="withResult" class="search-result-box panel is-fullwidth z-900">

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

@@ -15,6 +15,7 @@ interface prop {
   options?: Array<Option>;
   isLoading?: boolean;
   optionType?: "simple" | "custom";
+  placeholderText?: string;
 }
 
 const props = withDefaults(defineProps<prop>(), {
@@ -22,6 +23,7 @@ const props = withDefaults(defineProps<prop>(), {
   options: () => [],
   isLoading: false,
   optionType: "simple",
+  placeholderText: "Select Option",
 });
 
 const emit = defineEmits(["select", "remove", "onRefreshClick"]);
@@ -88,7 +90,7 @@ watch(isOpen, (n) => {
     :style="[isOpen ? { 'z-index': 2 } : '']"
   >
     <label for="custom-select" class="ac-label" :class="{ 'show-label': labelHoisted || isOpen }" @click="selectClick">
-      Select Option
+      {{ placeholderText }}
     </label>
 
     <input

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

@@ -13,7 +13,6 @@ withDefaults(defineProps<{ direction?: "up" | "down" }>(), {
     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" />

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

@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008zm0 3h.008v.008h-.008zm0 3h.008v.008h-.008z"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+      <path
+        d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87q.11.06.22.127c.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a8 8 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a7 7 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a7 7 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a7 7 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124q.108-.066.22-.128c.332-.183.582-.495.644-.869z"
+      />
+      <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0" />
+    </g>
+  </svg>
+</template>

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

@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+      <path d="M15 10.5a3 3 0 1 1-6 0a3 3 0 0 1 6 0" />
+      <path d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0" />
+    </g>
+  </svg>
+</template>

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

@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M12 4.5v15m7.5-7.5h-15"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,43 @@
+<script setup>
+import { defineAsyncComponent, defineProps, ref, watch } from "vue";
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: "Search what you are looking for...",
+  },
+  isFilter: {
+    type: Boolean,
+    default: false,
+  },
+  filterOptions: {
+    type: Array,
+    default: () => [
+      { value: "all-cluster", text: "All Cluster" },
+      { value: "active", text: "Active" },
+      { value: "pending", text: "Pending" },
+    ],
+  },
+});
+const emit = defineEmits(["handleSearch", "handleFilter"]);
+function handleSearch(searchText) {
+  emit("handleSearch", searchText);
+}
+
+const selectedFilter = ref("all-cluster");
+
+watch(selectedFilter, (n) => {
+  emit("handleFilter", n);
+});
+
+const Searchbar = defineAsyncComponent(() => import("../form-fields/Searchbar.vue"));
+</script>
+<template>
+  <div class="filterable-searchbar is-flex">
+    <Searchbar :placeholder="props.placeholder" @handleSearch="handleSearch" />
+    <select class="select search-filter" v-show="props.isFilter" v-model="selectedFilter">
+      <option v-for="option in filterOptions" :key="option.value" :value="option.value">
+        {{ option.text }}
+      </option>
+    </select>
+  </div>
+</template>

package/vue-components/v3/section/SectionContent.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import ArrowIcon from "../icons/ArrowIcon.vue";
+import AcButton from "../button/Button.vue";
+import HeaderItem from "../header/HeaderItem.vue";
+import HeaderItems from "../header/HeaderItems.vue";
+
+interface Props {
+  title?: string;
+  isExpandable?: boolean;
+  custom?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "",
+  isExpandable: false,
+  custom: false,
+});
+
+const isOpen = ref(true);
+</script>
+
+<template>
+  <div class="content-body">
+    <div class="section-card is-fullwidth">
+      <div class="section-heading is-fullwidth is-flex is-align-items-center is-justify-content-space-between">
+        <header-items>
+          <header-item>
+            <div v-if="custom">
+              <slot name="custom-header" />
+            </div>
+            <div v-else>
+              <h4 :key="title">{{ title }}</h4>
+            </div>
+          </header-item>
+        </header-items>
+        <!-- Add buttons here -->
+        <div class="buttons is-right">
+          <slot name="header-buttons" />
+          <AcButton modifier-classes="is-white" v-if="isExpandable" @click="isOpen = !isOpen">
+            <ArrowIcon :direction="isOpen ? 'down' : 'up'" />
+          </AcButton>
+        </div>
+      </div>
+
+      <div v-show="isOpen" class="section-body">
+        <slot name="section-body" />
+      </div>
+    </div>
+  </div>
+</template>

package/vue-components/v3/sidebar/basic-sidebar/DropDownItems.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import HeroiconsChevronDown20Solid from "~icons/heroicons/chevron-down-20-solid";
+
+interface Props {
+  title: string;
+  isOpen?: boolean;
+  hasIcon?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isOpen: false,
+  hasIcon: false,
+});
+
+const dropDownStatus = ref<"close" | "open">("close");
+
+const toggleDropDownStatus = () => {
+  if (dropDownStatus.value === "open") dropDownStatus.value = "close";
+  else dropDownStatus.value = "open";
+};
+
+watch(
+  () => props.isOpen,
+  (n) => {
+    if (n) {
+      dropDownStatus.value = "open";
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div
+    class="label pt-10 pb-10 pl-16 pr-16 b-b-1 is-flex is-align-items-center is-justify-content-space-between is-fullwidth is-clickable"
+    @click="toggleDropDownStatus"
+  >
+    <div class="is-flex gap-8">
+      <span v-if="hasIcon" class="icon"> <slot name="drop-down-icon" /> </span>{{ title }}
+    </div>
+    <HeroiconsChevronDown20Solid
+      :style="{ transform: dropDownStatus === 'open' ? 'rotate(180deg)' : 'none', transition: '0.2s' }"
+    />
+  </div>
+  <slot v-if="dropDownStatus === 'open'" name="drop-down-items" />
+</template>

package/vue-components/v3/sidebar/basic-sidebar/Items.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+  title: string;
+  id: string;
+  url?: string;
+  isActive?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isActive: false,
+  url: "",
+});
+</script>
+
+<template>
+  <div class="sidebar-item is-clickable" :class="{ 'is-active': isActive }">
+    <span class="icon">
+      <slot name="item-icon" />
+    </span>
+    <span>{{ title }}</span>
+  </div>
+</template>

package/vue-components/v3/sidebar/basic-sidebar/Sidebar.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="sidebar-style-2">
+    <div class="left-sidebar">
+      <div class="sidebar-items">
+        <slot name="items-with-drop-down" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-style-2 {
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  box-shadow: 8px 4px 14px 0px rgba(0, 0, 0, 0.05);
+
+  .left-sidebar {
+    width: 250px;
+  }
+
+  .sidebar-items {
+    display: flex;
+    flex-direction: column;
+
+    .sidebar-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: $color-text;
+      padding: 8px 16px;
+      transition: 0.1s ease-in-out;
+
+      &:last-child {
+        margin-bottom: 8px;
+      }
+
+      &:hover {
+        background-color: $primary-light-gray;
+      }
+
+      &.is-active {
+        background-color: $ac-primary;
+        color: $white-100;
+      }
+    }
+
+    label {
+      padding: 8px 16px;
+      border-bottom: 1px solid $color-border;
+      text-transform: uppercase;
+      font-weight: 400;
+      color: #616161;
+    }
+  }
+}
+</style>

package/vue-components/v3/table/basic-table/Table.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import Avatar from "../../avatar/Avatar.vue";
+
+interface Organization {
+  name: string;
+  logo: string;
+  description: string;
+  clusters: number;
+  members: Array<{
+    name: string;
+    avatar: string;
+  }>;
+}
+
+defineProps<{ organizations: Organization[] }>();
+</script>
+
+<template>
+  <table class="table ac-table is-fullwidth b-1 is-middle">
+    <thead>
+      <tr>
+        <th>Organizations</th>
+        <th class="has-text-right">Clusters</th>
+        <th class="has-text-right">Members</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="(org, index) in organizations" :key="index" class="is-clickable">
+        <td>
+          <div class="is-flex gap-8">
+            <div class="org-thumb">
+              <img :src="org.logo" :alt="org.name" />
+            </div>
+            <div class="is-flex is-flex-direction-column">
+              <h5>{{ org.name }}</h5>
+              <p>{{ org.description }}</p>
+            </div>
+          </div>
+        </td>
+
+        <td class="has-text-right">{{ org.clusters }}</td>
+        <td class="has-text-right">
+          <div class="is-flex is-justify-content-flex-end avatar-group">
+            <Avatar
+              v-for="(member, idx) in org.members"
+              :key="idx"
+              :rounded="true"
+              size="24x24"
+              :src="member.avatar"
+              :alt="member.name"
+            />
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>