@appscode/design-system 2.6.22-alpha-0.0.17 → 2.6.22-alpha-0.0.18

package/package.json

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

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import HeroiconsChevronDown20Solid from "~icons/heroicons/chevron-down-20-solid";
+
+interface Props {
+  title: string;
+  isOpen?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isOpen: 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 p-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 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>
+  <router-link :to="url" class="sidebar-item" :class="{ 'is-active': isActive }">
+    <span class="icon">
+      <slot name="item-icon" />
+    </span>
+    <span>{{ title }}</span>
+  </router-link>
+</template>

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

@@ -1,93 +1,10 @@
-<script setup lang="ts">
-import { nextTick, watch, ref, computed } from "vue";
-import { useRoute } from "vue-router";
-import CogIcon from "../../icons/CogIcon.vue";
-
-interface SidebarEntry {
-  id: string;
-  name: string;
-  icon?: any;
-  url: string;
-}
-
-interface SidebarSection {
-  id: string;
-  name: string;
-  icon?: any;
-  entries: SidebarEntry[];
-}
-
-interface Props {
-  items: SidebarSection[];
-  isActive: boolean;
-}
-
-// Props
-const props = withDefaults(defineProps<Props>(), {
-  items: () => [],
-  isActive: false
-});
-
-const sidebarItem = ref<HTMLElement | null>(null);
-
-const route = useRoute();
-
-const updatedItems = computed(() => {
-  return props.items.map((section) => {
-    const updatedEntries = section.entries.map((entry) => ({
-      ...entry,
-      isActive: route.path === entry.url,
-    }));
-    return { ...section, entries: updatedEntries };
-  });
-});
-
-// Scroll active item into view
-watch(
-  () => props.isActive,
-  (n) => {
-    if (n) {
-      nextTick(() => {
-        setTimeout(() => {
-          const top = (sidebarItem.value && sidebarItem.value.getBoundingClientRect().top) || 0;
-          if (top > window.innerHeight - 200) {
-            sidebarItem.value?.scrollIntoView({
-              behavior: "smooth",
-              block: "center",
-            });
-          }
-        }, 300);
-      });
-    }
-  },
-  { immediate: true },
-);
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="sidebar-style-2">
     <div class="left-sidebar">
-      <div class="sidebar-items" v-for="(section, sIdx) in updatedItems" :key="section.id">
-        <label class="label">{{ section.name }}</label>
-
-        <slot
-          name="sidebar-item"
-          v-for="(entry, iIdx) in section.entries"
-          :key="entry.id"
-          :item="entry"
-        >
-          <router-link
-            :to="entry.url"
-            class="sidebar-item"
-            :class="{ 'is-active': entry.isActive }"
-            :ref="entry.isActive ? sidebarItem : null"
-          >
-            <span class="icon">
-              <img :src="entry.icon || CogIcon" alt="icon" />
-            </span>
-            <span>{{ entry.name }}</span>
-          </router-link>
-        </slot>
+      <div class="sidebar-items">
+        <slot name="items-with-drop-down" />
       </div>
     </div>
   </div>