@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/ui/separator.vue

@@ -0,0 +1,60 @@
+<template>
+  <Separator
+    :role="role"
+    :aria-orientation="orientation"
+    :aria-hidden="decorative"
+    :orientation="orientation"
+    :decorative="decorative"
+    :class="[
+      'relative shrink-0 bg-border',
+      orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+      $attrs.class || '',
+    ]"
+    v-bind="$attrs"
+  >
+    <template v-if="text">
+      <div class="absolute inset-0 flex items-center">
+        <div :class="['relative flex w-full', alignClass]">
+          <span class="bg-background px-2 text-xs uppercase text-muted-foreground">{{ text }}</span>
+        </div>
+      </div>
+    </template>
+  </Separator>
+</template>
+
+<script setup>
+import { computed, defineProps, useAttrs } from 'vue';
+import { Separator } from '@/shadcn/separator';
+
+const props = defineProps({
+  orientation: {
+    type: String,
+    default: 'horizontal',
+    validator: v => ['horizontal', 'vertical'].includes(v),
+  },
+  role: {
+    type: String,
+    default: 'separator',
+  },
+  decorative: {
+    type: Boolean,
+    default: true,
+  },
+  text: String,
+  align: {
+    type: String,
+    default: 'center',
+    validator: v => ['start', 'center', 'end'].includes(v),
+  },
+});
+
+const $attrs = useAttrs();
+
+const alignClass = computed(() => {
+  return props.align === 'start'
+    ? 'justify-start'
+    : props.align === 'end'
+    ? 'justify-end'
+    : 'justify-center';
+});
+</script>

package/src/ui/sheet.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { cn } from '@/lib/utils';
+
+defineProps({
+  open: Boolean,
+  side: { type: String, default: 'right' },
+  class: String,
+});
+
+defineEmits(['update:open']);
+</script>
+<template>
+  <Teleport to="body">
+    <transition name="fade">
+      <div v-if="open" class="fixed inset-0 z-50 bg-black/50" data-slot="sheet-overlay" />
+    </transition>
+    <transition name="slide">
+      <div
+        v-if="open"
+        :data-slot="'sheet-content'"
+        :class="[
+          'bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out',
+          side === 'right' && 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' && 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' && 'inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' && 'inset-x-0 bottom-0 h-auto border-t',
+          $props.class,
+        ]"
+      >
+        <slot />
+        <button
+          class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+          @click="$emit('update:open', false)"
+        >
+          <span class="sr-only">Close</span>
+          <!-- Replace with your icon component -->
+          <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+<style scoped>
+.fade-enter-active, .fade-leave-active { transition: opacity .2s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+.slide-enter-active, .slide-leave-active { transition: all .3s cubic-bezier(.4,0,.2,1); }
+.slide-enter-from { transform: translateX(100%); }
+.slide-leave-to { transform: translateX(100%); }
+</style>

package/src/ui/sidebar/BaseSidebar.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import Sheet from '@/ui/sheet.vue';
+import SheetContent from '@/ui/SheetContent.vue';
+import SheetHeader from '@/ui/SheetHeader.vue';
+import SheetTitle from '@/ui/SheetTitle.vue';
+import SheetDescription from '@/ui/SheetDescription.vue';
+import { inject } from 'vue';
+
+const SIDEBAR_WIDTH_MOBILE = '260px';
+
+const props = defineProps({
+  side: { type: String, default: 'left' },
+  variant: { type: String, default: 'sidebar' },
+  collapsible: { type: String, default: 'icon' },
+  class: { type: String, default: '' },
+});
+
+const sidebar = inject('sidebarContext');
+</script>
+<template>
+  <div
+    v-if="props.collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+  <Sheet
+    v-else-if="sidebar.isMobile"
+    :open="sidebar.openMobile"
+    @update:open="sidebar.setOpenMobile"
+    v-bind="$attrs"
+  >
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE }"
+      :side="props.side"
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+  <div
+    v-else
+    class="group peer text-sidebar-foreground hidden md:block h-full"
+    :data-state="sidebar.state"
+    :data-collapsible="sidebar.state === 'collapsed' ? props.collapsible : ''"
+    :data-variant="props.variant"
+    :data-side="props.side"
+    data-slot="sidebar"
+  >
+    <!-- Sidebar gap for desktop -->
+    <div
+      data-slot="sidebar-gap"
+      :class="cn(
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+        'group-data-[collapsible=offcanvas]:w-0',
+        'group-data-[side=right]:rotate-180',
+        props.variant === 'floating' || props.variant === 'inset'
+          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+var(--spacing-4))]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+      )"
+    />
+    <div
+      data-slot="sidebar-container"
+      :class="cn(
+        'fixed inset-y-0 z-10 hidden h-full w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+        props.side === 'left'
+          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+        props.variant === 'floating' || props.variant === 'inset'
+          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-autocollapse)+var(--spacing-4)+2px)]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        data-slot="sidebar-inner"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/ui/sidebar/BasicSearch.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next';
+const props = defineProps({
+  class: String,
+  placeholder: { type: String, default: 'Search...' },
+  value: String,
+  onChange: Function,
+});
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  props.onChange && props.onChange(target.value);
+}
+</script>
+<template>
+  <div :class="['mb-4 px-1', props.class]">
+    <div class="relative">
+      <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <input
+        type="text"
+        :placeholder="props.placeholder"
+        :value="props.value"
+        @input="handleInput"
+        class="w-full pl-9 pr-3 py-2 text-sm bg-muted/50 border border-border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+      />
+    </div>
+  </div>
+</template>

package/src/ui/sidebar/ResponsiveSearch.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Search } from 'lucide-vue-next';
+
+const props = defineProps({
+  isExpanded: Boolean,
+  isLocked: { type: Boolean, default: false },
+  onSearchClick: Function,
+  placeholder: { type: String, default: 'Search...' },
+  value: String,
+  onChange: Function,
+  class: String,
+});
+
+const inputRef = ref<HTMLInputElement | null>(null);
+
+function handleSearchIconClick() {
+  props.onSearchClick && props.onSearchClick();
+}
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  props.onChange && props.onChange(target.value);
+}
+</script>
+<template>
+  <div :class="['mb-4 px-1 relative z-10', props.class]">
+    <div class="h-10 flex items-center opacity-100 visible">
+      <template v-if="props.isExpanded || props.isLocked">
+        <div class="relative w-full">
+          <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <input
+            ref="inputRef"
+            type="text"
+            :placeholder="props.placeholder"
+            :value="props.value"
+            @input="handleInput"
+            class="w-full h-10 pl-9 pr-3 text-sm bg-muted/50 border border-border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <button
+          @click="handleSearchIconClick"
+          :title="props.isLocked ? 'Search' : 'Search (Click to expand)'"
+          class="w-10 h-10 min-w-10 flex items-center justify-center rounded-lg transition-all duration-200 group hover:bg-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset text-muted-foreground hover:text-foreground opacity-100 relative z-20"
+        >
+          <div class="w-6 h-6 rounded-md flex items-center justify-center transition-colors duration-200 bg-transparent">
+            <Search class="w-4 h-4" />
+          </div>
+        </button>
+      </template>
+    </div>
+  </div>
+</template>

package/src/ui/sidebar/Sidebar.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { ref, computed, defineProps, useSlots } from 'vue';
+import Wrapper from './Wrapper.vue';
+import SidebarProvider from './SidebarProvider.vue';
+import SidebarContent from './SidebarContent.vue';
+import SidebarInset from './SidebarInset.vue';
+import ResponsiveSearch from './ResponsiveSearch.vue';
+import BaseSidebar from './BaseSidebar.vue';
+import SidebarHeader from './SidebarHeader.vue';
+import SidebarFooter from './SidebarFooter.vue';
+import SidebarGroup from './SidebarGroup.vue';
+import SidebarGroupContent from './SidebarGroupContent.vue';
+import SidebarGroupLabel from './SidebarGroupLabel.vue';
+import { Lock, Unlock } from 'lucide-vue-next';
+import { BasicSearch } from './index';
+import { useAutoCollapse } from './useAutoCollapse';
+
+const props = defineProps({
+  variant: { type: String, default: 'basic' },
+  data: Object,
+  children: null,
+  className: String,
+  onMenuItemClick: Function,
+  searchValue: { type: String, default: '' },
+  onSearchChange: Function,
+  side: { type: String, default: 'left' },
+  sidebarVariant: { type: String, default: 'sidebar' },
+  defaultOpen: { type: Boolean, default: true },
+  open: { type: Boolean, default: undefined },
+  onOpenChange: Function,
+  navigationItems: Array,
+  recentItems: Array,
+  initialActiveItem: { type: String, default: 'settings' },
+  initialActiveSubItem: { type: String, default: 'security' },
+  showFooter: { type: Boolean, default: true },
+  footerUser: { type: String, default: 'John Doe' },
+  height: { type: String, default: 'h-screen' },
+  activeContent: null,
+  onLockToggle: Function,
+});
+
+const slots = useSlots();
+
+function useSidebarState(initialItem: string, initialSubItem: string) {
+  const activeItem = ref(initialItem);
+  const activeSubItem = ref(initialSubItem);
+  return {
+    activeItem,
+    activeSubItem,
+    setActiveItem: (id: string) => (activeItem.value = id),
+    setActiveSubItem: (id: string) => (activeSubItem.value = id),
+  };
+}
+
+// Basic variant
+if (props.variant === 'basic') {
+  const state = useSidebarState(props.initialActiveItem, props.initialActiveSubItem);
+}
+
+// Advanced state
+const internalOpen = ref(props.defaultOpen);
+const internalSearchValue = ref('');
+
+const open = computed(() => props.open !== undefined ? props.open : internalOpen.value);
+const setOpen = (val: boolean) => {
+  if (props.onOpenChange) props.onOpenChange(val);
+  else internalOpen.value = val;
+};
+const currentSearchValue = computed(() => props.searchValue || internalSearchValue.value);
+const setSearchValue = (val: string) => {
+  if (props.onSearchChange) props.onSearchChange(val);
+  else internalSearchValue.value = val;
+};
+
+
+const {
+  isLocked,
+  isExpanded,
+  isLockButtonHovered,
+  handleLockButtonMouseEnter,
+  handleLockButtonMouseLeave,
+  handleMouseEnter,
+  handleMouseLeave,
+  toggleLock,
+  handleSearchClick,
+} = useAutoCollapse(
+  props.variant,
+  currentSearchValue.value,
+  open.value,
+  setOpen,
+  props.onLockToggle
+);
+
+const getCollapsibleMode = () => {
+  if (props.variant === 'collapsible') return 'icon';
+  if (props.variant === 'autocollapse') return 'icon';
+  return 'none';
+};
+
+const sidebarClass = computed(() => [
+  'transition-all duration-300 ease-in-out',
+  props.variant === 'autocollapse' && !isExpanded.value && 'overflow-hidden',
+  props.className
+].filter(Boolean).join(' '));
+</script>
+<template>
+  <div v-if="props.variant === 'basic'"
+    :class="['w-64 border bg-card p-3 flex flex-col', props.height, props.className].filter(Boolean).join(' ')"
+  >
+    <BasicSearch />
+    <SidebarContent
+      :navigationItems="props.navigationItems"
+      :recentItems="props.recentItems"
+      :activeItem="props.initialActiveItem"
+      :activeSubItem="props.initialActiveSubItem"
+      :onItemClick="() => {}"
+      :onSubItemClick="() => {}"
+      :showFooter="props.showFooter"
+      :footerUser="props.footerUser"
+    >
+      <slot />
+    </SidebarContent>
+  </div>
+  <Wrapper v-else-if="props.variant === 'autocollapse'" :height="'h-[500px]'">
+    <div class="relative isolate">
+      <SidebarProvider :open="isExpanded" :onOpenChange="() => {}">
+        <div
+          :class="['group relative z-10 transition-all duration-300 overflow-visible', isLockButtonHovered ? 'border-r-2 border-r-primary' : 'border-r border-r-border']"
+          @mouseenter="handleMouseEnter"
+          @mouseleave="handleMouseLeave"
+        >
+          <button
+            @click="toggleLock"
+            @mouseenter="handleLockButtonMouseEnter"
+            @mouseleave="handleLockButtonMouseLeave"
+            :class="[
+              'absolute top-4 z-20 w-7 h-7 rounded-full bg-card border',
+              'flex items-center justify-center text-primary hover:text-primary-foreground',
+              'transition-all duration-300 hover:bg-primary shadow-sm',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+              'opacity-0 group-hover:opacity-100 transition-opacity duration-200',
+              isExpanded ? '-right-3.5' : '-right-3.5',
+            ]"
+            :title="isLocked ? 'Click to enable auto-collapse' : 'Click to lock sidebar open'"
+          >
+            <Lock v-if="isLocked" class="w-3.5 h-3.5" />
+            <Unlock v-else class="w-3.5 h-3.5" />
+          </button>
+          <BaseSidebar collapsible="icon" class="relative bg-card py-2 overflow-visible">
+            <div
+              class="flex flex-col h-full"
+              :style="{
+                paddingLeft: isExpanded ? '8px' : '4px',
+                paddingRight: isExpanded ? '16px' : '4px',
+                width: '100%',
+                minWidth: 0,
+                overflow: 'visible',
+              }"
+            >
+              <ResponsiveSearch
+                :isExpanded="isExpanded"
+                :isLocked="isLocked"
+                :onSearchClick="handleSearchClick"
+                :value="currentSearchValue"
+                :onChange="setSearchValue"
+                :placeholder="props.data?.searchPlaceholder || 'Search...'"
+              />
+              <SidebarContent
+                :navigationItems="props.navigationItems"
+                :recentItems="props.recentItems"
+                :activeItem="props.initialActiveItem"
+                :activeSubItem="props.initialActiveSubItem"
+                :onItemClick="props.onMenuItemClick"
+                :onSubItemClick="props.onMenuItemClick"
+                :showFooter="props.showFooter"
+                :footerUser="props.footerUser"
+              >
+                <slot />
+              </SidebarContent>
+            </div>
+          </BaseSidebar>
+        </div>
+      </SidebarProvider>
+    </div>
+    <SidebarInset class="bg-background z-[-1]">
+      <div class="p-4">
+        <slot name="activeContent" />
+      </div>
+    </SidebarInset>
+  </Wrapper>
+  <div v-else-if="props.variant === 'collapsible'" class="relative isolate">
+    <SidebarProvider :open="open" :onOpenChange="setOpen">
+      <Wrapper :height="'h-[500px]'">
+        <BaseSidebar collapsible="icon" class="relative bg-card px-1 py-2">
+          <ResponsiveSearch :isExpanded="open" :onSearchClick="() => setOpen(true)" />
+          <SidebarContent
+            :navigationItems="props.navigationItems"
+            :recentItems="props.recentItems"
+            :activeItem="props.initialActiveItem"
+            :activeSubItem="props.initialActiveSubItem"
+            :onItemClick="() => {}"
+            :onSubItemClick="() => {}"
+            :showFooter="props.showFooter"
+            :footerUser="props.footerUser"
+          >
+            <slot />
+          </SidebarContent>
+        </BaseSidebar>
+        <SidebarInset class="bg-background">
+          <div class="p-4">
+            <slot name="activeContent" />
+          </div>
+        </SidebarInset>
+      </Wrapper>
+    </SidebarProvider>
+  </div>
+  <BaseSidebar
+    v-else
+    :side="props.side"
+    :variant="props.sidebarVariant"
+    :collapsible="getCollapsibleMode()"
+    :class="sidebarClass"
+    v-bind="$attrs"
+  >
+    <slot />
+  </BaseSidebar>
+</template>

package/src/ui/sidebar/SidebarCollapseButton.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <button :class="['sidebar-collapse-button', props.class]">
+    <slot />
+  </button>
+</template>

package/src/ui/sidebar/SidebarContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { User } from 'lucide-vue-next';
+import SidebarMenuItemWithIcon from '@/shadcn/sidebar/SidebarMenuItemWithIcon.vue';
+
+const props = defineProps<{
+  navigationItems?: any[];
+  recentItems?: any[];
+  activeItem?: string;
+  activeSubItem?: string;
+  onItemClick?: (id: string) => void;
+  onSubItemClick?: (id: string) => void;
+  showFooter?: boolean;
+  footerUser?: string;
+}>();
+</script>
+<template>
+  <!-- Scrollable Content -->
+  <div class="flex-1 overflow-y-auto">
+    <slot />
+  </div>
+
+  <!-- Fixed Footer -->
+  <div v-if="props.showFooter !== false" class="pt-3 border-t border-border px-2 flex justify-center">
+    <SidebarMenuItemWithIcon
+      :icon="User"
+      :label="props.footerUser ?? 'John Doe'"
+      :isActive="props.activeItem === 'profile'"
+      :onClick="() => props.onItemClick && props.onItemClick('profile')"
+    />
+  </div>
+</template>

package/src/ui/sidebar/SidebarDescription.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <div :class="['sidebar-description', props.class]">
+    <slot />
+  </div>
+</template>

package/src/ui/sidebar/SidebarExpandButton.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <button :class="['sidebar-expand-button', props.class]">
+    <slot />
+  </button>
+</template>

package/src/ui/sidebar/SidebarFooter.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <footer :class="['sidebar-footer', props.class]">
+    <slot />
+  </footer>
+</template>

package/src/ui/sidebar/SidebarGroup.vue

@@ -0,0 +1,11 @@
+<template>
+  <div :class="['sidebar-group', props.class]">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>

package/src/ui/sidebar/SidebarGroupContent.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <div :class="['sidebar-group-content', props.class]">
+    <slot />
+  </div>
+</template>

package/src/ui/sidebar/SidebarGroupLabel.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+</script>
+<template>
+  <div class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">
+    <slot />
+  </div>
+</template>

package/src/ui/sidebar/SidebarHeader.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <header :class="['sidebar-header', props.class]">
+    <slot />
+  </header>
+</template>

package/src/ui/sidebar/SidebarInset.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+const classes = computed(() =>
+  cn(
+    'bg-background relative flex w-full flex-1 flex-col',
+    'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+    props.class
+  )
+);
+</script>
+<template>
+  <main data-slot="sidebar-inset" :class="classes">
+    <slot />
+  </main>
+</template>

package/src/ui/sidebar/SidebarMenu.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+</script>
+<template>
+  <ul class="sidebar-menu">
+    <slot />
+  </ul>
+</template>