@appscode/design-system 2.6.22-alpha → 2.6.22-alpha-0.0.3

package/package.json

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

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { defineAsyncComponent, defineProps } from "vue";
-import BuildingIcon from "@/components/vue-components/v3/icons/BuildingIcon.vue";
+import BuildingIcon from "../icons/BuildingIcon.vue";
+import LinkIcon from "../icons/LinkIcon.vue";
+import MapIcon from "../icons/MapIcon.vue";
 
 interface TabItem {
   label: string;
@@ -37,9 +39,6 @@ const Avatar = defineAsyncComponent(() => import("@/components/vue-components/v3
 // Tabs
 const Tabs = defineAsyncComponent(() => import("@/components/vue-components/v3/tab/Tabs.vue"));
 const TabItem = defineAsyncComponent(() => import("@/components/vue-components/v3/tab/TabItem.vue"));
-
-import LinkIcon from "@/components/vue-components/v3/icons/LinkIcon.vue";
-import MapIcon from "@/components/vue-components/v3/icons/MapIcon.vue";
 </script>
 
 <template>

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

@@ -16,7 +16,6 @@ withDefaults(defineProps<Props>(), {
 const emit = defineEmits(["handleSearch"]);
 
 const searchText = ref("");
-console.log(searchText);
 
 watch(searchText, (n) => {
   emit("handleSearch", n.trim());

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

@@ -1,26 +1,43 @@
 <script setup>
-import { defineAsyncComponent, defineProps } from "vue";
+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"]);
+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("@/components/vue-components/v3/form-fields/Searchbar.vue"));
 </script>
 <template>
   <div class="filterable-searchbar is-flex">
     <Searchbar :placeholder="props.placeholder" @handleSearch="handleSearch" />
-    <select class="select search-filter">
-      <option value="all-cluster">All Cluster</option>
-      <option value="active">Active</option>
-      <option value="pending">Pending</option>
+    <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/sidebar/basic-sidebar/Sidebar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import CogIcon from "@/components/vue-components/v3/icons/CogIcon.vue";
+import CogIcon from "../../icons/CogIcon.vue";
 
 // Define the props to accept the data structure
 const props = defineProps({
@@ -22,17 +22,8 @@ const props = defineProps({
         <label class="label">{{ data.label }}</label>
 
         <!-- Iterate through the items inside each section -->
-        <slot
-          name="sidebar-item"
-          v-for="(item, idx) in data.items"
-          :key="idx"
-          :item="item"
-        >
-          <a
-            :href="item.link || '#'"
-            class="sidebar-item"
-            :class="{ 'is-active': item.isActive }"
-          >
+        <slot name="sidebar-item" v-for="(item, idx) in data.items" :key="idx" :item="item">
+          <a :href="item.link || '#'" class="sidebar-item" :class="{ 'is-active': item.isActive }">
             <span class="icon"><component :is="item.icon || CogIcon" /></span>
             <span>{{ item.text }}</span>
           </a>