@stachelock/ui 0.6.18 → 0.8.0

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

@@ -0,0 +1,80 @@
+export type BadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'neutral';
+interface Props {
+    /** Badge text above title (e.g., "Member Registration", "Event RSVP") */
+    badge?: string;
+    /** Badge color variant */
+    badgeVariant?: BadgeVariant;
+    /** Main title (e.g., project name) */
+    title?: string;
+    /** Subtitle or message below title */
+    subtitle?: string;
+    /** Description text */
+    description?: string;
+    /** Whether the header is in loading state */
+    loading?: boolean;
+    /** Image URL for the project logo */
+    imageUrl?: string;
+    /** Alt text for the image */
+    imageAlt?: string;
+    /** Whether to show image placeholder when no image */
+    showPlaceholder?: boolean;
+    /** Placeholder text when no image */
+    placeholderText?: string;
+    /** Image size variant */
+    imageSize?: 'sm' | 'md' | 'lg';
+    /** Show badge skeleton during loading */
+    showBadgeSkeleton?: boolean;
+    /** Show description skeleton during loading */
+    showDescriptionSkeleton?: boolean;
+}
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    badgeVariant: string;
+    imageAlt: string;
+    showPlaceholder: boolean;
+    placeholderText: string;
+    imageSize: string;
+    showBadgeSkeleton: boolean;
+    showDescriptionSkeleton: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    badgeVariant: string;
+    imageAlt: string;
+    showPlaceholder: boolean;
+    placeholderText: string;
+    imageSize: string;
+    showBadgeSkeleton: boolean;
+    showDescriptionSkeleton: boolean;
+}>>> & Readonly<{}>, {
+    imageSize: "sm" | "md" | "lg";
+    badgeVariant: BadgeVariant;
+    imageAlt: string;
+    showPlaceholder: boolean;
+    placeholderText: string;
+    showBadgeSkeleton: boolean;
+    showDescriptionSkeleton: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    content?(_: {}): any;
+    image?(_: {}): 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/StatusPageLayout.d.ts

@@ -0,0 +1,75 @@
+export type StatusPageStatus = 'loading' | 'success' | 'error' | 'info' | null;
+interface Props {
+    /** Badge text displayed above the title */
+    badge?: string;
+    /** Main title */
+    title: string;
+    /** Current status state */
+    status?: StatusPageStatus;
+    /** Status message below the title */
+    statusMessage?: string;
+    /** Error message (used when status is 'error') */
+    errorMessage?: string;
+    /** Success message (used when status is 'success') */
+    successMessage?: string;
+    /** Action button label for error state */
+    actionLabel?: string;
+    /** Maximum width size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Background style variant */
+    background?: 'gray' | 'white' | 'transparent';
+    /** Badge color variant based on status */
+    badgeVariant?: 'primary' | 'success' | 'error' | 'warning' | 'neutral';
+}
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    status: null;
+    size: string;
+    background: string;
+    badgeVariant: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    action: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    status: null;
+    size: string;
+    background: string;
+    badgeVariant: string;
+}>>> & Readonly<{
+    onAction?: (() => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    background: "white" | "transparent" | "gray";
+    status: StatusPageStatus;
+    badgeVariant: "primary" | "success" | "warning" | "error" | "neutral";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    loading?(_: {}): any;
+    success?(_: {}): any;
+    "error-icon"?(_: {}): any;
+    "error-actions"?(_: {}): any;
+    info?(_: {}): any;
+    default?(_: {}): any;
+    footer?(_: {}): any;
+    "below-card"?(_: {}): 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,12 +5,16 @@ 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 ProjectInfoHeader } from './ProjectInfoHeader';
 export { default as ProjectLogo } from './ProjectLogo';
 export { default as PropsTable } from './PropsTable';
 export { default as ShowcaseCard } from './ShowcaseCard';
 export { default as ShowcaseLayout } from './ShowcaseLayout';
 export { default as SidebarLayout } from './SidebarLayout';
 export { default as StateDisplay } from './StateDisplay';
+export { default as StatusPageLayout } from './StatusPageLayout';
 export { default as DetailPanel } from './UiDetailPanel';
 export { default as SplitPanelLayout } from './UiSplitPanelLayout';

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';