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

package/package.json

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

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

@@ -4,22 +4,22 @@ import BuildingIcon from "../icons/BuildingIcon.vue";
 import LinkIcon from "../icons/LinkIcon.vue";
 import MapIcon from "../icons/MapIcon.vue";
 
-interface TabItem {
+interface TabItemType {
   label: string;
   href: string;
   icon: any;
 }
 
-interface Props {
+interface PropsType {
   profileThumbnail?: string;
   displayName?: string;
   username?: string;
   location?: string;
   webURL?: string;
-  tabs?: TabItem[];
+  tabs?: TabItemType[];
 }
 
-withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<PropsType>(), {
   profileThumbnail: "https://placehold.co/100x100",
   displayName: "John Doe",
   username: "@mohintest1",
@@ -35,10 +35,10 @@ withDefaults(defineProps<Props>(), {
 });
 
 // Avatar
-const Avatar = defineAsyncComponent(() => import("@/components/vue-components/v3/avatar/Avatar.vue"));
+const Avatar = defineAsyncComponent(() => import("../avatar/Avatar.vue"));
 // Tabs
-const Tabs = defineAsyncComponent(() => import("@/components/vue-components/v3/tab/Tabs.vue"));
-const TabItem = defineAsyncComponent(() => import("@/components/vue-components/v3/tab/TabItem.vue"));
+const TabsComponent = defineAsyncComponent(() => import("../tab/Tabs.vue"));
+const TabItemComponent = defineAsyncComponent(() => import("../tab/TabItem.vue"));
 </script>
 
 <template>
@@ -49,9 +49,9 @@ const TabItem = defineAsyncComponent(() => import("@/components/vue-components/v
           <!-- 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>
+              <!-- <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>
@@ -73,20 +73,20 @@ const TabItem = defineAsyncComponent(() => import("@/components/vue-components/v
           <!-- user profile start  -->
         </div>
 
-        <slot name="tabs-menu">
-          <!-- tabs area start  -->
-          <div class="column is-12">
-            <tabs class="solid-tab px-3">
-              <tab-item 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>
-            </tabs>
-          </div>
-          <!-- tabs area end  -->
-        </slot>
+        <!-- <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>

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

@@ -29,7 +29,7 @@ watch(selectedFilter, (n) => {
   emit("handleFilter", n);
 });
 
-const Searchbar = defineAsyncComponent(() => import("@/components/vue-components/v3/form-fields/Searchbar.vue"));
+const Searchbar = defineAsyncComponent(() => import("../form-fields/Searchbar.vue"));
 </script>
 <template>
   <div class="filterable-searchbar is-flex">