@omnitend/dashboard-for-laravel 0.41.2 → 0.42.1

package/resources/fonts/maven-pro/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2011 The Maven Pro Project Authors (http://www.vissol.co.uk/mavenpro/), with Reserved Font Name "Maven Pro".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/resources/fonts/poppins/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/resources/js/components/base/DAutocomplete.vue

@@ -9,7 +9,7 @@
  * searchable single-select can always reach "none" in-list (#138).
  */
 <script setup lang="ts">
-import { computed, useAttrs } from "vue";
+import { computed, ref, useAttrs, watch } from "vue";
 import { BAutocomplete } from "bootstrap-vue-next";
 import type { SelectOption } from "bootstrap-vue-next";
 
@@ -127,6 +127,75 @@ const hasValue = computed(() => {
 const noClearButton = computed(
   () => attr("noClearButton", "no-clear-button") === true || !hasValue.value,
 );
+
+/*
+ * Late options (0.42.1). bvn's BAutocomplete writes the input's text from the
+ * model value through reka-ui's ComboboxInput, which does so on mount and
+ * again only when the MODEL changes. A value set before its options load (a
+ * DXTable select filter seeded from the URL while the option list is still
+ * being fetched) therefore kept showing the raw value ("78") after its label
+ * ("Alcopop") arrived. bvn exposes no "resync" method, but the input's text
+ * is its `search` v-model, so this wrapper owns that model and, whenever the
+ * options change, puts the matching option's label in it.
+ *
+ * It never overwrites a search the user is typing: while the input has
+ * focus, it relabels only text that is still exactly the raw value. Multiple
+ * mode needs nothing (bvn derives the chips from the options on every
+ * render). A consumer that binds its own `search` owns the text, so it is
+ * left alone. A `:key` remount would also work but drops focus and the open
+ * menu, so the `search` model is the cleaner hook.
+ */
+const rootElement = ref<HTMLElement | null>(null);
+const searchText = ref("");
+const consumerOwnsSearch = computed(() => attr("search", "search") !== undefined);
+const boundSearch = computed<string>(() =>
+  consumerOwnsSearch.value ? String(attr("search", "search")) : searchText.value,
+);
+
+const optionValueAndText = (option: unknown): { value: unknown; text: unknown } => {
+  if (option === null || typeof option !== "object") return { value: option, text: option };
+  const valueField = (attr("valueField", "value-field") as string | undefined) ?? "value";
+  const textField = (attr("textField", "text-field") as string | undefined) ?? "text";
+  const record = option as Record<string, unknown>;
+  return { value: record[valueField], text: record[textField] };
+};
+
+// The same equality bvn uses to find the selected option (strict, or by key).
+const sameValue = (optionValue: unknown, modelValue: unknown) => {
+  const by = attr("by", "by");
+  if (typeof by === "string") {
+    return (
+      (optionValue as Record<string, unknown> | null)?.[by] ===
+      (modelValue as Record<string, unknown> | null)?.[by]
+    );
+  }
+  return optionValue === modelValue;
+};
+
+// A bare `multiple` in a template arrives as "" (it is not a declared prop).
+const isMultiple = computed(() => {
+  const multiple = attr("multiple", "multiple");
+  return multiple !== undefined && multiple !== null && multiple !== false;
+});
+
+const relabelFromOptions = () => {
+  if (isMultiple.value || consumerOwnsSearch.value) return;
+  const modelValue = attr("modelValue", "model-value");
+  if (modelValue === null || modelValue === undefined || modelValue === "") return;
+  const match = computedOptions.value
+    .map(optionValueAndText)
+    .find((option) => sameValue(option.value, modelValue));
+  if (!match) return;
+  const label = String(match.text ?? "");
+  if (searchText.value === label) return;
+  const input = rootElement.value?.querySelector("input");
+  const userIsTyping =
+    input !== null && input !== undefined && document.activeElement === input;
+  if (userIsTyping && searchText.value !== String(modelValue)) return;
+  searchText.value = label;
+};
+
+watch(computedOptions, relabelFromOptions);
 </script>
 
 <template>
@@ -138,12 +207,14 @@ const noClearButton = computed(
     root, so `[data-v-x] .input-group` matches nothing in a consumer build
     (#53). A plain element root makes it deterministic.
   -->
-  <div class="d-autocomplete">
+  <div ref="rootElement" class="d-autocomplete">
     <BAutocomplete
       v-bind="$attrs"
+      :search="boundSearch"
       :options="computedOptions"
       :filter-function="effectiveFilterFunction"
       :no-clear-button="noClearButton"
+      @update:search="searchText = $event"
     >
       <!-- Dynamically pass through all named slots with their props -->
       <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">

package/resources/js/components/charts/DXBarChart.vue

@@ -1,7 +1,8 @@
 <!--
   @component
   A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the
-  theme's dedicated chart palette (--dx-chart-1..8) applied and dashboard-friendly defaults (no x gridlines,
+  theme's dedicated chart palette (--dx-chart-1..8 fills, a 1px --dx-chart-edge outline) applied
+  and dashboard-friendly defaults (no x gridlines,
   formatted value ticks, responsive, legend hidden for a single series). Pass
   `labels` + `datasets`; `options` deep-merges over the defaults.
 

package/resources/js/components/charts/DXDoughnutChart.vue

@@ -1,7 +1,8 @@
 <!--
   @component
   A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one
-  chart-palette colour (--dx-chart-1..8) per slice and dashboard-friendly defaults. Pass
+  chart-palette colour (--dx-chart-1..8) per slice, a 1px --dx-chart-edge outline, and
+  dashboard-friendly defaults. Pass
   `labels` + either `data` (a number array) or full `datasets`; `options`
   deep-merges over the defaults.
 

package/resources/js/components/charts/DXLineChart.vue

@@ -1,7 +1,8 @@
 <!--
   @component
   A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the
-  theme's dedicated chart palette applied (--dx-chart-1..8 stroke + translucent fill, smoothed line)
+  theme's dedicated chart palette applied (--dx-chart-line-1..8 stroke and point outline,
+  --dx-chart-1..8 point centre and translucent area fill, smoothed line)
   and dashboard-friendly defaults. Pass `labels` + `datasets`; `options`
   deep-merges over the defaults.
 

package/resources/js/components/charts/chartTheme.ts

@@ -42,24 +42,42 @@ export function registerCharts(): void {
 }
 
 // The dedicated data-viz palette (`$dx-chart-palette` in theme.scss) — eight
-// vivid hues in a fixed, CVD-validated order, published as --dx-chart-1..8.
-// Deliberately NOT the semantic --bs-* colours (#141): the base theme colours
-// are dark AA "emphasis" shades (too muted for series), and status colours
-// shouldn't impersonate "series 2". Fallbacks mirror the shipped theme so
-// charts still render without the CSS (SSR / tests / a consumer who didn't
-// import it). Sync with theme.scss's $dx-chart-palette is enforced by a test
-// that parses the Sass source (charts.test.ts), which is why this is exported.
+// light, vivid fills in a fixed, CVD-validated order, published as
+// --dx-chart-1..8. Deliberately NOT read from the semantic --bs-* colours
+// (#141). Fallbacks mirror the shipped theme so charts still render without
+// the CSS (SSR / tests / a consumer who didn't import it). Sync with
+// theme.scss is enforced by a test that parses the Sass source
+// (charts.test.ts), which is why these lists are exported.
 export const PALETTE_VARS: Array<[string, string]> = [
-    ["--dx-chart-1", "#2563eb"], // blue
-    ["--dx-chart-2", "#65a30d"], // lime
-    ["--dx-chart-3", "#7c3aed"], // violet
-    ["--dx-chart-4", "#0d9488"], // teal
-    ["--dx-chart-5", "#ea580c"], // orange
-    ["--dx-chart-6", "#0891b2"], // cyan
-    ["--dx-chart-7", "#d97706"], // amber
-    ["--dx-chart-8", "#db2777"], // pink
+    ["--dx-chart-1", "#7fd7fd"], // sky
+    ["--dx-chart-2", "#7bf25a"], // lime
+    ["--dx-chart-3", "#e46ab9"], // magenta
+    ["--dx-chart-4", "#d6e86a"], // lime-yellow
+    ["--dx-chart-5", "#b9a3f0"], // lavender
+    ["--dx-chart-6", "#efd574"], // butter
+    ["--dx-chart-7", "#9fb4ff"], // periwinkle
+    ["--dx-chart-8", "#f7a072"], // peach
 ];
 
+// The line/point shade for each slot (`$dx-chart-line-palette`): the fill
+// darkened to 3.5:1 on white, so a line stroke or point outline clears WCAG
+// 1.4.11 non-text contrast where the light fill alone would not. Same order.
+export const LINE_PALETTE_VARS: Array<[string, string]> = [
+    ["--dx-chart-line-1", "#5590aa"],
+    ["--dx-chart-line-2", "#4d9839"],
+    ["--dx-chart-line-3", "#d161a9"],
+    ["--dx-chart-line-4", "#848f41"],
+    ["--dx-chart-line-5", "#907fbb"],
+    ["--dx-chart-line-6", "#99884a"],
+    ["--dx-chart-line-7", "#7686be"],
+    ["--dx-chart-line-8", "#ba7956"],
+];
+
+// The 1px outline on bars and doughnut segments (`$dx-chart-edge`): it carries
+// the non-text contrast for the light fills. Dark mode remaps it to the dark
+// body colour.
+export const EDGE_VAR: [string, string] = ["--dx-chart-edge", "#121419"];
+
 /**
  * The element whose computed style the theme variables are read from.
  *
@@ -86,12 +104,29 @@ function themeScope(scope?: Element | null): Element | null {
  *   backward compatible.
  */
 export function getPalette(scope?: Element | null): string[] {
+    return resolveVars(PALETTE_VARS, scope);
+}
+
+/**
+ * Resolve the themed line/point shades (`--dx-chart-line-1..8`), slot for slot
+ * with getPalette(). Same scope rules as getPalette().
+ */
+export function getLinePalette(scope?: Element | null): string[] {
+    return resolveVars(LINE_PALETTE_VARS, scope);
+}
+
+/** Resolve the bar/segment edge colour (`--dx-chart-edge`). */
+export function getEdgeColor(scope?: Element | null): string {
+    return resolveVars([EDGE_VAR], scope)[0];
+}
+
+function resolveVars(vars: Array<[string, string]>, scope?: Element | null): string[] {
     const host = themeScope(scope);
     if (host === null) {
-        return PALETTE_VARS.map(([, fallback]) => fallback);
+        return vars.map(([, fallback]) => fallback);
     }
     const styles = getComputedStyle(host);
-    return PALETTE_VARS.map(([name, fallback]) => {
+    return vars.map(([name, fallback]) => {
         const value = styles.getPropertyValue(name).trim();
         return value || fallback;
     });
@@ -273,8 +308,11 @@ export function baseOptions(args: BaseOptionArgs): Record<string, any> {
 
 /**
  * Apply the themed palette to any dataset that doesn't set its own colours.
- * Bar: one colour per dataset (or per bar for a single dataset). Line: a themed
- * stroke + translucent fill. Doughnut/pie: one colour per slice.
+ * Each property is filled in only when the caller left it undefined.
+ * Bar: one fill per dataset (or per bar for a single dataset), with a 1px
+ * edge outline. Line: the slot's darker line shade for the stroke and point
+ * outlines, the fill for point centres, and a 35% fill wash under the line.
+ * Doughnut/pie: one fill per slice, with a 1px edge outline.
  *
  * `scope` is the chart's container element; the palette is resolved from its
  * computed style so a nested `data-bs-theme` container themes correctly (#161).
@@ -287,11 +325,14 @@ export function applyPalette(
     scope?: Element | null,
 ): any[] {
     const palette = getPalette(scope);
+    const linePalette = getLinePalette(scope);
+    const edge = getEdgeColor(scope);
     const single = datasets.length === 1;
 
     return datasets.map((dataset, index) => {
         const next = { ...dataset };
         const color = palette[index % palette.length];
+        const lineColor = linePalette[index % linePalette.length];
 
         if (kind === "doughnut") {
             if (next.backgroundColor === undefined) {
@@ -300,14 +341,18 @@ export function applyPalette(
                     (_, i) => palette[i % palette.length],
                 );
             }
+            if (next.borderColor === undefined) next.borderColor = edge;
+            if (next.borderWidth === undefined) next.borderWidth = 1;
             return next;
         }
 
         if (kind === "line") {
-            if (next.borderColor === undefined) next.borderColor = color;
+            if (next.borderColor === undefined) next.borderColor = lineColor;
             if (next.backgroundColor === undefined) {
-                next.backgroundColor = withAlpha(color, 0.15);
+                next.backgroundColor = withAlpha(color, 0.35);
             }
+            if (next.pointBackgroundColor === undefined) next.pointBackgroundColor = color;
+            if (next.pointBorderColor === undefined) next.pointBorderColor = lineColor;
             if (next.tension === undefined) next.tension = 0.3;
             if (next.fill === undefined) next.fill = true;
             if (next.pointRadius === undefined) next.pointRadius = 2;
@@ -321,6 +366,8 @@ export function applyPalette(
                     ? Array.from({ length: labelsCount }, () => color)
                     : color;
         }
+        if (next.borderColor === undefined) next.borderColor = edge;
+        if (next.borderWidth === undefined) next.borderWidth = 1;
         if (next.borderRadius === undefined) next.borderRadius = 4;
         return next;
     });

package/resources/js/components/extended/DXDashboard.vue

@@ -70,8 +70,10 @@
         </template>
       </DXDashboardNavbar>
 
-      <!-- Page Content -->
-      <main class="dashboard-main p-4">
+      <!-- Page Content. Vertical padding only: the horizontal edge is the
+           shared dashboard gutter, applied to the container inside (see
+           `$dashboard-gutter-x` in theme.scss) so it matches the navbar's. -->
+      <main class="dashboard-main py-4">
         <!-- Fluid: full-width, left-aligned content (for wide tables / admin
              pages). Default: a centred reading-width column. -->
         <DContainer v-if="fluid" fluid :class="contentClass">

package/resources/js/components/extended/DXDashboardSidebar.vue

@@ -213,34 +213,66 @@ const brandInitial = computed(() => {
 const normalizeUrl = (url: string): string =>
   url.toLowerCase().replace(/[?#].*$/, '').replace(/\/$/, '');
 
+// An item's query parameters, lowercased, as [name, value] pairs.
+const queryParams = (url: string): [string, string][] => {
+  const query = url.toLowerCase().split('#')[0].split('?')[1] ?? '';
+  return Array.from(new URLSearchParams(query).entries());
+};
+
+// Identity of a nav item for matching: its path plus its query, so items that
+// differ only by query string (`/tasks?business_unit_id=1`, `...=2`) are told
+// apart.
+const itemKey = (url: string): string =>
+  normalizeUrl(url) + '?' + queryParams(url).map(([name, value]) => `${name}=${value}`).sort().join('&');
+
 /**
- * The single best-matching nav item URL for the current route. Prefers an exact
- * match; otherwise the longest ancestor path, so a detail page like
- * `/rotas/507` activates the `/rotas` item. Root `/` only matches exactly — it
- * is a prefix of every path, so it is never treated as an ancestor.
- * Returns the normalized URL of the winning item, or null if nothing matches.
+ * The single best-matching nav item for the current route, as an `itemKey`.
+ * Paths first: an exact match, otherwise the longest ancestor path, so a detail
+ * page like `/rotas/507` activates the `/rotas` item. Root `/` only matches
+ * exactly — it is a prefix of every path, so it is never treated as an
+ * ancestor. Then, among items on that winning path, queries: an item whose
+ * query names parameters only matches when the current URL carries every one of
+ * them with the same value (extra current parameters such as `page` are fine),
+ * and the item naming the most such parameters wins. An item with no query
+ * matches whatever the current query is. If every item on the path names a
+ * query the current URL doesn't carry, nothing is active.
+ * Returns null if nothing matches.
  */
-const activeUrl = computed<string | null>(() => {
+const activeKey = computed<string | null>(() => {
   const current = normalizeUrl(props.currentUrl);
-  let best: string | null = null;
-  for (const group of props.navigation) {
-    if (group.visible === false) continue;
-    for (const item of group.items) {
-      if (item.visible === false) continue;
-      const candidate = normalizeUrl(item.url);
-      const matches =
-        candidate === current ||
-        (candidate !== '' && current.startsWith(candidate + '/'));
-      if (matches && (best === null || candidate.length > best.length)) {
-        best = candidate;
-      }
+  const currentParams = new URLSearchParams(
+    props.currentUrl.toLowerCase().split('#')[0].split('?')[1] ?? '',
+  );
+  const items = props.navigation
+    .filter((group) => group.visible !== false)
+    .flatMap((group) => group.items.filter((item) => item.visible !== false));
+
+  let bestPath: string | null = null;
+  for (const item of items) {
+    const candidate = normalizeUrl(item.url);
+    const matches =
+      candidate === current ||
+      (candidate !== '' && current.startsWith(candidate + '/'));
+    if (matches && (bestPath === null || candidate.length > bestPath.length)) {
+      bestPath = candidate;
+    }
+  }
+  if (bestPath === null) return null;
+
+  let best: { key: string; score: number } | null = null;
+  for (const item of items) {
+    if (normalizeUrl(item.url) !== bestPath) continue;
+    const params = queryParams(item.url);
+    const carried = params.every(([name, value]) => currentParams.getAll(name).includes(value));
+    if (carried && (best === null || params.length > best.score)) {
+      best = { key: itemKey(item.url), score: params.length };
     }
   }
-  return best;
+  return best?.key ?? null;
 });
 
 const isActive = (url: string): boolean =>
-  activeUrl.value !== null && normalizeUrl(url) === activeUrl.value;
+  activeKey.value !== null && itemKey(url) === activeKey.value;
 
 // Index of the group containing the active route (-1 if none).
 const activeGroupIndex = computed(() =>