@stachelock/ui 0.6.18 → 0.7.0

package/dist/src/components/layouts/NestedNavigationItem.d.ts

@@ -0,0 +1,112 @@
+import { Component } from 'vue';
+
+export interface NestedNavItem {
+    id: string;
+    name: string;
+    path: string;
+    icon?: Component;
+    badge?: string;
+    badgeTheme?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    disabled?: boolean;
+    children?: NestedNavItem[];
+    /** Custom metadata */
+    meta?: Record<string, unknown>;
+}
+export type NavigationTier = 0 | 1 | 2;
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Route path or URL */
+    href: string;
+    /** Icon component */
+    icon?: Component | undefined;
+    /** Current tier level (0, 1, or 2) */
+    tier?: NavigationTier | undefined;
+    /** Child navigation items */
+    children?: NestedNavItem[] | undefined;
+    /** Whether this item is currently active */
+    isActive?: boolean | undefined;
+    /** Show only icons (collapsed mode) */
+    iconOnly?: boolean | undefined;
+    /** Badge text */
+    badge?: string | undefined;
+    /** Badge color theme */
+    badgeTheme?: "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+    /** Whether item is disabled */
+    disabled?: boolean | undefined;
+    /** Set of expanded item IDs (for controlled state) */
+    expandedItems?: Set<string> | undefined;
+    /** Current route path (for active state detection) */
+    currentPath?: string | undefined;
+}>, {
+    tier: number;
+    isActive: boolean;
+    iconOnly: boolean;
+    badgeTheme: string;
+    disabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    toggle: (itemId: string, isExpanded: boolean) => void;
+    navigate: (path: string, item: NestedNavItem) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Route path or URL */
+    href: string;
+    /** Icon component */
+    icon?: Component | undefined;
+    /** Current tier level (0, 1, or 2) */
+    tier?: NavigationTier | undefined;
+    /** Child navigation items */
+    children?: NestedNavItem[] | undefined;
+    /** Whether this item is currently active */
+    isActive?: boolean | undefined;
+    /** Show only icons (collapsed mode) */
+    iconOnly?: boolean | undefined;
+    /** Badge text */
+    badge?: string | undefined;
+    /** Badge color theme */
+    badgeTheme?: "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
+    /** Whether item is disabled */
+    disabled?: boolean | undefined;
+    /** Set of expanded item IDs (for controlled state) */
+    expandedItems?: Set<string> | undefined;
+    /** Current route path (for active state detection) */
+    currentPath?: string | undefined;
+}>, {
+    tier: number;
+    isActive: boolean;
+    iconOnly: boolean;
+    badgeTheme: string;
+    disabled: boolean;
+}>>> & Readonly<{
+    onToggle?: ((itemId: string, isExpanded: boolean) => any) | undefined;
+    onNavigate?: ((path: string, item: NestedNavItem) => any) | undefined;
+}>, {
+    disabled: boolean;
+    isActive: boolean;
+    iconOnly: boolean;
+    badgeTheme: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    tier: NavigationTier;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/src/components/layouts/NestedSidebar.d.ts

@@ -0,0 +1,162 @@
+import { Component } from 'vue';
+
+export interface NavigationGroup {
+    /** Group title (optional) */
+    title?: string;
+    /** Items in this group */
+    items: SidebarNavigationItem[];
+}
+export interface SidebarNavigationItem {
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Route path */
+    path: string;
+    /** Icon component */
+    icon?: Component;
+    /** Badge configuration */
+    badge?: {
+        text: string;
+        theme?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    };
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Child items for nesting */
+    children?: SidebarNavigationItem[];
+    /** Group this item belongs to */
+    group?: string;
+    /** Custom metadata */
+    meta?: Record<string, unknown>;
+}
+declare function openMobile(): void;
+declare function closeMobile(): void;
+declare function toggleCollapsed(): void;
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** Navigation items */
+    items: SidebarNavigationItem[];
+    /** Optional navigation groups (if not using item.group) */
+    groups?: NavigationGroup[] | undefined;
+    /** Current route path */
+    currentPath?: string | undefined;
+    /** Background color for sidebar */
+    backgroundColor?: string | undefined;
+    /** Whether sidebar is collapsible */
+    collapsible?: boolean | undefined;
+    /** Initial collapsed state */
+    initialCollapsed?: boolean | undefined;
+    /** Wide sidebar width (expanded) */
+    wideWidth?: string | undefined;
+    /** Narrow sidebar width (collapsed) */
+    narrowWidth?: string | undefined;
+    /** Show mobile menu button */
+    showMobileMenuButton?: boolean | undefined;
+    /** Persist expanded items to localStorage */
+    persistExpanded?: boolean | undefined;
+    /** Storage key for persistence */
+    storageKey?: string | undefined;
+    /** Auto-expand parents of active item */
+    autoExpandActive?: boolean | undefined;
+}>, {
+    currentPath: string;
+    backgroundColor: string;
+    collapsible: boolean;
+    initialCollapsed: boolean;
+    wideWidth: string;
+    narrowWidth: string;
+    showMobileMenuButton: boolean;
+    persistExpanded: boolean;
+    storageKey: string;
+    autoExpandActive: boolean;
+}>>, {
+    openMobile: typeof openMobile;
+    closeMobile: typeof closeMobile;
+    toggleCollapsed: typeof toggleCollapsed;
+    expandAll: () => void;
+    collapseAll: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    navigate: (path: string, item: SidebarNavigationItem) => void;
+    "update:collapsed": (isCollapsed: boolean) => void;
+    "update:mobileOpen": (isOpen: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** Navigation items */
+    items: SidebarNavigationItem[];
+    /** Optional navigation groups (if not using item.group) */
+    groups?: NavigationGroup[] | undefined;
+    /** Current route path */
+    currentPath?: string | undefined;
+    /** Background color for sidebar */
+    backgroundColor?: string | undefined;
+    /** Whether sidebar is collapsible */
+    collapsible?: boolean | undefined;
+    /** Initial collapsed state */
+    initialCollapsed?: boolean | undefined;
+    /** Wide sidebar width (expanded) */
+    wideWidth?: string | undefined;
+    /** Narrow sidebar width (collapsed) */
+    narrowWidth?: string | undefined;
+    /** Show mobile menu button */
+    showMobileMenuButton?: boolean | undefined;
+    /** Persist expanded items to localStorage */
+    persistExpanded?: boolean | undefined;
+    /** Storage key for persistence */
+    storageKey?: string | undefined;
+    /** Auto-expand parents of active item */
+    autoExpandActive?: boolean | undefined;
+}>, {
+    currentPath: string;
+    backgroundColor: string;
+    collapsible: boolean;
+    initialCollapsed: boolean;
+    wideWidth: string;
+    narrowWidth: string;
+    showMobileMenuButton: boolean;
+    persistExpanded: boolean;
+    storageKey: string;
+    autoExpandActive: boolean;
+}>>> & Readonly<{
+    onNavigate?: ((path: string, item: SidebarNavigationItem) => any) | undefined;
+    "onUpdate:collapsed"?: ((isCollapsed: boolean) => any) | undefined;
+    "onUpdate:mobileOpen"?: ((isOpen: boolean) => any) | undefined;
+}>, {
+    backgroundColor: string;
+    collapsible: boolean;
+    currentPath: string;
+    initialCollapsed: boolean;
+    wideWidth: string;
+    narrowWidth: string;
+    showMobileMenuButton: boolean;
+    persistExpanded: boolean;
+    storageKey: string;
+    autoExpandActive: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    logo?(_: {}): any;
+    footer?(_: {
+        isCollapsed: boolean;
+    }): any;
+    header?(_: {}): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/layouts/index.d.ts

@@ -5,6 +5,8 @@ export { default as HeaderLayout } from './HeaderLayout';
 export { default as InfoCard } from './InfoCard';
 export { default as NavigationGroup } from './NavigationGroup';
 export { default as NavigationItem } from './NavigationItem';
+export { default as NestedNavigationItem } from './NestedNavigationItem';
+export { default as NestedSidebar } from './NestedSidebar';
 export { default as ProfileHeaderAvatar } from './ProfileHeaderAvatar';
 export { default as ProjectLogo } from './ProjectLogo';
 export { default as PropsTable } from './PropsTable';

package/dist/src/composables/index.d.ts

@@ -6,6 +6,7 @@ export * from './useMap';
 export * from './useModal';
 export * from './useNotifications';
 export * from './useScreenSize';
+export * from './useSidebarNavigation';
 export * from './useSimpleTabs';
 export * from './useStringTransform';
 export * from './useTabs';

package/dist/src/composables/useSidebarNavigation.d.ts

@@ -0,0 +1,129 @@
+import { Ref, ComputedRef } from 'vue';
+
+/**
+ * Navigation item structure for nested sidebar
+ */
+export interface SidebarNavItem {
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Route path or URL */
+    path: string;
+    /** Icon component (Vue component) */
+    icon?: unknown;
+    /** Badge text */
+    badge?: string;
+    /** Badge color theme */
+    badgeTheme?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Child navigation items (for nesting) */
+    children?: SidebarNavItem[];
+    /** Custom metadata */
+    meta?: Record<string, unknown>;
+}
+/**
+ * Navigation tier levels
+ */
+export type NavigationTier = 0 | 1 | 2;
+/**
+ * Options for useSidebarNavigation composable
+ */
+export interface UseSidebarNavigationOptions {
+    /** Navigation items */
+    items: SidebarNavItem[];
+    /** Initial route path */
+    initialPath?: string;
+    /** Auto-expand parents of active item */
+    autoExpandActive?: boolean;
+    /** Allow multiple sections to be expanded */
+    allowMultipleExpanded?: boolean;
+    /** Persist expanded state to localStorage */
+    persistExpanded?: boolean;
+    /** Storage key for persisted state */
+    storageKey?: string;
+    /** Callback when navigation occurs */
+    onNavigate?: (path: string, item: SidebarNavItem) => void;
+}
+/**
+ * Return type for useSidebarNavigation composable
+ */
+export interface UseSidebarNavigationReturn {
+    /** Current navigation items */
+    items: ComputedRef<SidebarNavItem[]>;
+    /** Set of expanded item IDs */
+    expandedItems: Ref<Set<string>>;
+    /** Current active path */
+    currentPath: Ref<string>;
+    /** Whether mobile sidebar is open */
+    isMobileOpen: Ref<boolean>;
+    /** Whether sidebar is collapsed (icon only) */
+    isCollapsed: Ref<boolean>;
+    /** Toggle an item's expanded state */
+    toggleItem: (itemId: string) => void;
+    /** Expand an item */
+    expandItem: (itemId: string) => void;
+    /** Collapse an item */
+    collapseItem: (itemId: string) => void;
+    /** Expand all items */
+    expandAll: () => void;
+    /** Collapse all items */
+    collapseAll: () => void;
+    /** Set current path and auto-expand parents */
+    setCurrentPath: (path: string) => void;
+    /** Navigate to a path */
+    navigate: (path: string, item: SidebarNavItem) => void;
+    /** Open mobile sidebar */
+    openMobile: () => void;
+    /** Close mobile sidebar */
+    closeMobile: () => void;
+    /** Toggle mobile sidebar */
+    toggleMobile: () => void;
+    /** Toggle collapsed state */
+    toggleCollapsed: () => void;
+    /** Check if an item is active */
+    isItemActive: (item: SidebarNavItem) => boolean;
+    /** Check if an item has an active child */
+    hasActiveChild: (item: SidebarNavItem) => boolean;
+    /** Get all parent IDs for a given path */
+    getParentIds: (path: string) => string[];
+    /** Find an item by path */
+    findItemByPath: (path: string) => SidebarNavItem | undefined;
+    /** Get flat list of all items */
+    flatItems: ComputedRef<SidebarNavItem[]>;
+}
+/**
+ * Composable for managing nested sidebar navigation
+ *
+ * @example
+ * ```ts
+ * const {
+ *   items,
+ *   expandedItems,
+ *   currentPath,
+ *   toggleItem,
+ *   navigate,
+ * } = useSidebarNavigation({
+ *   items: navigationItems,
+ *   initialPath: route.path,
+ *   autoExpandActive: true,
+ * });
+ * ```
+ */
+export declare function useSidebarNavigation(options: UseSidebarNavigationOptions): UseSidebarNavigationReturn;
+/**
+ * Build navigation tree from flat items with parent references
+ */
+export declare function buildNavigationTree(items: Array<SidebarNavItem & {
+    parent?: string;
+}>): SidebarNavItem[];
+/**
+ * Create a navigation item with defaults
+ */
+export declare function createNavItem(id: string, name: string, path: string, options?: Partial<SidebarNavItem>): SidebarNavItem;
+/**
+ * Sort navigation items by a key
+ */
+export declare function sortNavItems(items: SidebarNavItem[], key?: keyof SidebarNavItem, direction?: 'asc' | 'desc'): SidebarNavItem[];
+export default useSidebarNavigation;

package/dist/src/views/layouts/index.d.ts

@@ -3,4 +3,5 @@ export { default as DashboardLayoutPage } from './DashboardLayoutPage';
 export { default as HeaderLayoutPage } from './HeaderLayoutPage';
 export { default as NavigationGroupPage } from './NavigationGroupPage';
 export { default as NavigationItemPage } from './NavigationItemPage';
+export { default as NestedSidebarPage } from './NestedSidebarPage';
 export { default as SplitPanelLayoutPage } from './SplitPanelLayoutPage';