@makolabs/ripple 1.2.22 → 1.2.23

package/dist/index.d.ts

@@ -306,6 +306,12 @@ export interface Activatable {
 export interface LinkItem extends BaseNavigationItem, WithIcon, Activatable {
     href: string;
     meta?: string;
+    /**
+     * When true, the link will be active if the current route starts with this href.
+     * Example: href="/tushar" will be active for "/tushar/overview" and "/tushar/profile"
+     * @default false
+     */
+    matchPartial?: boolean;
 }
 export interface ParentItem extends BaseNavigationItem, Activatable {
     children: LinkItem[];

package/dist/layout/sidebar/Sidebar.svelte

@@ -3,7 +3,6 @@
 	import type { MenuBar, NavigationItem, SidebarProps, ParentItem, LinkItem } from '../../index.js';
 	import clsx from 'clsx';
 	import { isRouteActive } from '../../helper/nav.svelte.js';
-	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
 
 	let { items = [], logo }: SidebarProps = $props();
@@ -47,7 +46,9 @@
 			let anyChildActive = parentItem.active;
 
 			const updatedChildren = parentItem.children.map((child) => {
-				const childActive = isRouteActive(child.href, true);
+				// Use exact matching for child items by default, unless matchPartial is set
+				const exact = !child.matchPartial;
+				const childActive = isRouteActive(child.href, exact);
 				if (childActive) {
 					anyChildActive = true;
 				}
@@ -58,7 +59,9 @@
 
 		if ('href' in item) {
 			const linkItem = item as LinkItem;
-			return { ...linkItem, active: isRouteActive(linkItem.href) };
+			// Use exact matching by default, unless matchPartial is set
+			const exact = !linkItem.matchPartial;
+			return { ...linkItem, active: isRouteActive(linkItem.href, exact) };
 		}
 
 		return item;
@@ -115,7 +118,7 @@
 		<nav class="flex-1 space-y-6 px-2 py-4">
 			{#each navigationItems as item, index (index)}
 				{#if 'type' in item && item.type === 'horizontal-divider'}
-					<li class="my-2 border-t border-white/10"></li>
+					<div class="border-t border-white/10"></div>
 				{:else if 'children' in item}
 					<div>
 						{#if !menubar.collapsed}
@@ -125,13 +128,13 @@
 						{/if}
 						<div class={menubar.collapsed ? '' : 'mt-2 space-y-1'}>
 							{#each item.children as child (child.label)}
-								<button
+								<a
+									href={resolve(child.href as `/`)}
 									class="group hover:bg-default-500/10 flex w-full cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-150 ease-in-out hover:text-white {child.active
 										? 'bg-default-500/20'
 										: ''} {menubar.collapsed ? 'justify-center' : ''}"
 									class:text-white={child.active}
 									class:text-default-300={!child.active}
-									onclick={() => goto(resolve(child.href as `/`))}
 									title={menubar.collapsed ? child.label : ''}
 								>
 									{#if child.Icon}
@@ -145,18 +148,18 @@
 									{#if !menubar.collapsed}
 										<span class="truncate">{child.label}</span>
 									{/if}
-								</button>
+								</a>
 							{/each}
 						</div>
 					</div>
 				{:else if 'href' in item}
-					<button
+					<a
+						href={resolve(item.href as `/`)}
 						class="group hover:bg-default-500/10 flex w-full cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-150 ease-in-out hover:text-white {item.active
 							? 'bg-default-500/20'
 							: ''} {menubar.collapsed ? 'justify-center' : ''}"
 						class:text-white={item.active}
 						class:text-default-300={!item.active}
-						onclick={() => (window.location.href = item.href)}
 						title={menubar.collapsed ? item.label : ''}
 					>
 						{#if item.Icon}
@@ -170,7 +173,7 @@
 						{#if !menubar.collapsed}
 							<span class="truncate">{item.label}</span>
 						{/if}
-					</button>
+					</a>
 				{/if}
 			{/each}
 		</nav>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.2.22",
+	"version": "1.2.23",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {

package/dist/user-management/types.d.ts

@@ -1,23 +0,0 @@
-/**
- * User Management Types
- *
- * Shared types for user management remote functions.
- */
-import type { User } from '../index.js';
-/**
- * Options for fetching users
- */
-export interface GetUsersOptions {
-    page: number;
-    pageSize: number;
-    sortBy?: string;
-    sortOrder?: 'asc' | 'desc';
-    query?: string;
-}
-/**
- * Result of fetching users
- */
-export interface GetUsersResult {
-    users: User[];
-    totalUsers: number;
-}

package/dist/user-management/types.js

@@ -1,6 +0,0 @@
-/**
- * User Management Types
- *
- * Shared types for user management remote functions.
- */
-export {};