@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.6 → 1.0.9

package/src/ui/sidebar/ResponsiveSearch.vue

@@ -1,54 +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>
+<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

@@ -1,227 +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>
+<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

@@ -1,10 +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>
+<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

@@ -1,31 +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>
+<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>