Add docs and further stress tests to the demo

packages/preset-native/src/index.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, type PropType } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
+import type { RouteLocationNormalizedLoaded, RouteLocationRaw } from 'vue-router'
 import { useNativeRouter } from '@native-vue-router/core'
 import './style.css'
 
@@ -30,6 +30,7 @@ export interface NativeTabItem {
   label: string
   to: RouteLocationRaw
   icon?: string
+  activeWhen?: (current: RouteLocationNormalizedLoaded) => boolean
 }
 
 export const NativeTabBar = defineComponent({
@@ -41,7 +42,9 @@ export const NativeTabBar = defineComponent({
     const native = useNativeRouter()
     return () => h('nav', { class: 'nvr-native-tabs', 'aria-label': 'Primary navigation' },
       props.items.map((item) => {
-        const active = native.router.currentRoute.value.path === native.router.resolve(item.to).path
+        const current = native.router.currentRoute.value
+        const exact = current.path === native.router.resolve(item.to).path
+        const active = exact || Boolean(item.activeWhen?.(current))
         const href = native.router.resolve(item.to).href
         return h('a', {
           href,
@@ -50,7 +53,7 @@ export const NativeTabBar = defineComponent({
           onClick: (event: MouseEvent) => {
             if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
             event.preventDefault()
-            if (active) return
+            if (exact) return
             void native.sibling(item.to, { replace: true })
           },
         }, [