@xleddyl/443-components-vue 0.11.0 → 0.12.0

package/dist/components/templates/SettingsModal.vue

@@ -53,7 +53,7 @@
                            v-if="item.to !== void 0"
                            v-bind="resolveLink({ to: item.to })?.attrs"
                            class="k-settings-modal-tab"
-                           @click="close"
+                           @click="syncing ? void 0 : close()"
                         >
                            <Icon v-if="item.icon" :name="item.icon" />
                            <span class="k-settings-modal-tab-label">{{ item.label }}</span>
@@ -199,11 +199,13 @@
 </template>
 
 <script setup>
-import { computed, useId, useTemplateRef, watch } from "vue";
+import { computed, nextTick, onMounted, useId, useTemplateRef, watch } from "vue";
 import { THEME_PRESETS } from "../../composables/usePreset";
 import { useLocale } from "../../composables/useLocale";
 import { useLinkResolver } from "../../internal/core/link";
 import { useScrollEdges } from "../../internal/core/scroll-edges";
+import { useQueryValue, writeQueryValue } from "../../internal/layout/query";
+import { useRouterLike } from "../../internal/layout/route";
 import Button from "../core/Button.vue";
 import Icon from "../core/Icon.vue";
 import Avatar from "../data/Avatar.vue";
@@ -232,7 +234,9 @@ const props = defineProps({
   presetText: { type: String, required: false, default: void 0 },
   onSignOut: { type: Function, required: false },
   hideSession: { type: Boolean, required: false },
-  beforeClose: { type: Function, required: false }
+  beforeClose: { type: Function, required: false },
+  route: { type: [String, Boolean], required: false, default: false },
+  resolvePage: { type: Function, required: false }
 });
 defineSlots();
 const emit = defineEmits(["open", "close", "afterLeave"]);
@@ -307,7 +311,94 @@ const trail = computed(() => [
 function slotProps(item, close) {
   return { section: item, close, page: currentPage.value, pages: pages.value, openPage, back };
 }
-watch(activeId, () => goTo(0));
+const router = useRouterLike();
+const routeKey = computed(() => props.route === true ? "settings" : props.route || void 0);
+const routeParam = useQueryValue(router, routeKey);
+const syncing = computed(() => Boolean(router && routeKey.value));
+let applying = false;
+let resolution = 0;
+const routeValue = computed(() => {
+  if (!open.value || !activeId.value) return void 0;
+  return [activeId.value, ...pages.value.map((page) => page.id)].map(encodeURIComponent).join("/");
+});
+function decodeSegment(segment) {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}
+function writeRoute(value, history) {
+  const key = routeKey.value;
+  if (!router || !key || value === routeParam.value) return;
+  void writeQueryValue(router, key, value, history);
+}
+async function settle() {
+  await nextTick();
+  applying = false;
+  writeRoute(routeValue.value, "replace");
+}
+function resolvedPage(token, sectionId, index, id, label) {
+  if (token !== resolution || activeId.value !== sectionId || pages.value[index]?.id !== id) return;
+  if (label === void 0) {
+    applying = true;
+    pages.value = pages.value.slice(0, index);
+    void settle();
+    return;
+  }
+  pages.value = pages.value.map((page, position) => position === index ? { id, label } : page);
+}
+function applyRoute(value) {
+  if (value === routeValue.value) return;
+  const token = ++resolution;
+  applying = true;
+  const [sectionId, ...pageIds] = (value ?? "").split("/").filter(Boolean).map(decodeSegment);
+  if (!sectionId) {
+    open.value = false;
+    void settle();
+    return;
+  }
+  const reuse = activeId.value === sectionId;
+  open.value = true;
+  section.value = sectionId;
+  const next = [];
+  if (selectable.value.some((item) => item.id === sectionId)) {
+    for (const [index, id] of pageIds.entries()) {
+      const known = pages.value[index];
+      if (reuse && known?.id === id && next.every((page, i) => pages.value[i] === page)) {
+        next.push(known);
+        continue;
+      }
+      const result = props.resolvePage ? props.resolvePage(sectionId, id, next.slice()) : id;
+      if (result === void 0) break;
+      if (typeof result === "string") {
+        next.push({ id, label: result });
+        continue;
+      }
+      next.push({ id, label: "" });
+      void Promise.resolve(result).then(
+        (label) => resolvedPage(token, sectionId, index, id, label),
+        () => resolvedPage(token, sectionId, index, id, void 0)
+      );
+    }
+  }
+  pages.value = next;
+  void settle();
+}
+watch(activeId, () => {
+  if (!applying) goTo(0);
+});
+watch(routeValue, (value) => {
+  if (!applying) writeRoute(value, "push");
+});
+watch(routeParam, (value) => {
+  if (syncing.value) applyRoute(value);
+});
+onMounted(() => {
+  if (!syncing.value) return;
+  if (routeParam.value !== void 0) applyRoute(routeParam.value);
+  else writeRoute(routeValue.value, "replace");
+});
 watch(
   () => pages.value.length,
   () => contentBody.value?.scrollTo({ top: 0 })

package/dist/components/templates/SettingsModal.vue.d.ts

@@ -1,6 +1,6 @@
 import type { ThemePreset } from '../../composables/usePreset';
 import type { DialogBeforeClose } from '../overlays/types';
-import type { SettingsModalAccount, SettingsModalPage, SettingsModalSection, SettingsSectionSlotProps } from './types';
+import type { SettingsModalAccount, SettingsModalPage, SettingsModalSection, SettingsPageResolver, SettingsSectionSlotProps } from './types';
 type __VLS_Slots = {
     'account-fields'?: (props: {
         account: SettingsModalAccount;
@@ -32,6 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onSignOut?: () => void;
     hideSession?: boolean;
     beforeClose?: DialogBeforeClose;
+    route?: string | boolean;
+    resolvePage?: SettingsPageResolver;
     open?: boolean | undefined;
     section?: string;
     pages?: SettingsModalPage[];
@@ -274,6 +276,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onSignOut?: () => void;
     hideSession?: boolean;
     beforeClose?: DialogBeforeClose;
+    route?: string | boolean;
+    resolvePage?: SettingsPageResolver;
     open?: boolean | undefined;
     section?: string;
     pages?: SettingsModalPage[];
@@ -501,6 +505,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     themeText: string;
     presetLabel: string;
     presetText: string;
+    route: string | boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/templates/types.d.ts

@@ -34,6 +34,7 @@ export interface SettingsModalPage {
     id: string;
     label: string;
 }
+export type SettingsPageResolver = (section: string, id: string, parents: SettingsModalPage[]) => string | undefined | Promise<string | undefined>;
 export interface SettingsSectionSlotProps {
     section: SettingsModalSection;
     close: () => void;
@@ -129,6 +130,7 @@ export interface KAppConfig {
         sections?: SettingsModalSection[];
         presets?: ThemePreset[] | false;
         signOutTo?: LinkTarget | false;
+        route?: string | boolean;
     };
     dashboard?: {
         variant?: DashboardVariant;

package/dist/composables/layout.d.ts

@@ -1 +1,2 @@
 export * from './useAppShell';
+export * from './useRouteState';

package/dist/composables/layout.mjs

@@ -1 +1,2 @@
 export * from "./useAppShell.mjs";
+export * from "./useRouteState.mjs";

package/dist/composables/useRouteState.d.ts

@@ -0,0 +1,13 @@
+import type { Ref } from 'vue';
+import type { RouteHistory } from '../internal/layout/query';
+export type { RouteHistory };
+export interface RouteStateOptions<T> {
+    parse?: (value: string) => T | undefined;
+    serialize?: (value: T) => string | undefined;
+    history?: RouteHistory;
+    default?: T;
+}
+export declare function useRouteState<T = string>(key: string, options: RouteStateOptions<T> & {
+    default: T;
+}): Ref<T>;
+export declare function useRouteState<T = string>(key: string, options?: RouteStateOptions<T>): Ref<T | undefined>;

package/dist/composables/useRouteState.mjs

@@ -0,0 +1,37 @@
+import { computed, shallowRef, watch } from "vue";
+import { useQueryValue, writeQueryValue } from "../internal/layout/query.mjs";
+import { useRouterLike } from "../internal/layout/route.mjs";
+export function useRouteState(key, options = {}) {
+  const router = useRouterLike();
+  const raw = useQueryValue(router, key);
+  const fallback = options.default;
+  const parse = options.parse ?? ((value) => value);
+  const serialize = options.serialize ?? ((value) => String(value));
+  function fromRaw(value) {
+    if (value === void 0 || value === "") return fallback;
+    return parse(value) ?? fallback;
+  }
+  function toRaw(value) {
+    if (value === void 0 || value === null) return void 0;
+    const text = serialize(value);
+    if (text === void 0 || text === "") return void 0;
+    if (fallback !== void 0 && text === serialize(fallback)) return void 0;
+    return text;
+  }
+  const state = shallowRef(fromRaw(raw.value));
+  let version = 0;
+  watch(raw, (value) => {
+    state.value = fromRaw(value);
+  });
+  return computed({
+    get: () => state.value,
+    set(value) {
+      state.value = value;
+      if (!router) return;
+      const current = ++version;
+      void writeQueryValue(router, key, toRaw(value), options.history ?? "push").then((ok) => {
+        if (!ok && current === version) state.value = fromRaw(raw.value);
+      });
+    }
+  });
+}

package/dist/grid/DataGrid.vue

@@ -22,9 +22,14 @@
          :exportable="exportable"
          :export-file-name="exportFileName"
          :debounce="searchDebounce"
+         :filter-count="filterCount"
          @reset-columns="clearStoredState"
+         @filters-reset="emit('filtersReset')"
       >
          <slot name="actions" :api="api" v-bind="sheetSlot" />
+         <template v-if="$slots.filters" #filters="scope">
+            <slot name="filters" v-bind="scope" />
+         </template>
       </GridToolbar>
 
       <div
@@ -152,6 +157,7 @@ const props = defineProps({
   exportable: { type: Boolean, required: false, default: true },
   exportFileName: { type: String, required: false, default: "export" },
   searchDebounce: { type: Number, required: false, default: 0 },
+  filterCount: { type: Number, required: false, default: 0 },
   serverSort: { type: Boolean, required: false },
   pagination: { type: Boolean, required: false },
   showEdges: { type: Boolean, required: false },
@@ -169,7 +175,7 @@ const props = defineProps({
   editable: { type: Boolean, required: false },
   spreadsheet: { type: Boolean, required: false }
 });
-const emit = defineEmits(["rowClick", "selectionChange", "sortChange", "filterChange", "copy", "cellsChange", "cellsInvalid", "dirtyChange", "rangeChange"]);
+const emit = defineEmits(["rowClick", "selectionChange", "sortChange", "filterChange", "copy", "cellsChange", "cellsInvalid", "dirtyChange", "rangeChange", "filtersReset"]);
 const query = defineModel("query", { type: String, ...{ default: "" } });
 const page = defineModel("page", { type: Number, ...{ default: 1 } });
 const pageSize = defineModel("pageSize", { type: Number, ...{ default: 25 } });

package/dist/grid/DataGrid.vue.d.ts

@@ -20,6 +20,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         exportable?: boolean;
         exportFileName?: string;
         searchDebounce?: number;
+        filterCount?: number;
         serverSort?: boolean;
         pagination?: boolean;
         showEdges?: boolean;
@@ -48,6 +49,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         onRowClick?: ((event: RowClickedEvent<T, any>) => any) | undefined;
         "onUpdate:sort"?: ((value: GridSortChange | null | undefined) => any) | undefined;
         "onUpdate:query"?: ((value: string) => any) | undefined;
+        onFiltersReset?: (() => any) | undefined;
         onSelectionChange?: ((rows: T[]) => any) | undefined;
         onSortChange?: ((change: GridSortChange | null) => any) | undefined;
         onFilterChange?: ((model: FilterModel, event: FilterChangedEvent<T, any>) => any) | undefined;
@@ -106,8 +108,13 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             clearDirty: (rowIds?: string[]) => void;
             api: GridApi<T> | null;
         }) => any;
+    } & {
+        filters?: (props: {
+            close: () => void;
+            count: number;
+        }) => any;
     };
-    emit: (((evt: "copy", text: string) => void) & ((evt: "rowClick", event: RowClickedEvent<T, any>) => void) & ((evt: "selectionChange", rows: T[]) => void) & ((evt: "sortChange", change: GridSortChange | null) => void) & ((evt: "filterChange", model: FilterModel, event: FilterChangedEvent<T, any>) => void) & ((evt: "cellsChange", event: GridCellsChange) => void) & ((evt: "cellsInvalid", event: GridCellsInvalid) => void) & ((evt: "dirtyChange", count: number) => void) & ((evt: "rangeChange", range: GridCellRange | null) => void)) & (((event: "update:page", value: number) => void) & ((event: "update:pageSize", value: number) => void) & ((event: "update:sort", value: GridSortChange | null | undefined) => void) & ((event: "update:query", value: string) => void));
+    emit: (((evt: "copy", text: string) => void) & ((evt: "rowClick", event: RowClickedEvent<T, any>) => void) & ((evt: "filtersReset") => void) & ((evt: "selectionChange", rows: T[]) => void) & ((evt: "sortChange", change: GridSortChange | null) => void) & ((evt: "filterChange", model: FilterModel, event: FilterChangedEvent<T, any>) => void) & ((evt: "cellsChange", event: GridCellsChange) => void) & ((evt: "cellsInvalid", event: GridCellsInvalid) => void) & ((evt: "dirtyChange", count: number) => void) & ((evt: "rangeChange", range: GridCellRange | null) => void)) & (((event: "update:page", value: number) => void) & ((event: "update:pageSize", value: number) => void) & ((event: "update:sort", value: GridSortChange | null | undefined) => void) & ((event: "update:query", value: string) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/grid/GridToolbar.vue

@@ -12,6 +12,46 @@
             :aria-label="text.search"
          />
       </div>
+      <span v-if="$slots.filters" class="k-data-grid-filters">
+         <Button
+            variant="outline"
+            tone="neutral"
+            size="sm"
+            icon="funnel"
+            square
+            :aria-label="filtersLabel"
+            aria-haspopup="dialog"
+            :aria-expanded="filtersOpen ? 'true' : 'false'"
+            :class="{ 'is-active': activeFilters > 0 }"
+            @click="filtersOpen = true"
+         />
+         <Badge
+            v-if="activeFilters > 0"
+            class="k-data-grid-filters-count"
+            tone="accent"
+            variant="solid"
+            size="sm"
+            :label="activeFilters"
+            aria-hidden="true"
+         />
+      </span>
+      <Modal v-if="$slots.filters" v-model:open="filtersOpen" :title="text.filters" size="sm">
+         <div class="k-data-grid-filters-body">
+            <slot name="filters" :close="closeFilters" :count="activeFilters" />
+         </div>
+         <template #footer="{ close }">
+            <Button
+               class="k-data-grid-filters-reset"
+               variant="ghost"
+               tone="neutral"
+               icon="arrow-path"
+               :label="text.resetFilters"
+               :aria-disabled="activeFilters === 0 ? 'true' : void 0"
+               @click="resetFilters"
+            />
+            <Button :label="text.showResults" @click="close" />
+         </template>
+      </Modal>
       <div class="k-data-grid-toolbar-actions">
          <slot />
          <DropdownMenu
@@ -47,8 +87,11 @@
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 import Button from "../components/core/Button.vue";
 import Input from "../components/core/Input.vue";
+import Badge from "../components/data/Badge.vue";
 import DropdownMenu from "../components/overlays/DropdownMenu.vue";
+import Modal from "../components/overlays/Modal.vue";
 import { useLocale } from "../composables/useLocale";
+import { formatLocaleMessage } from "../locale";
 const props = defineProps({
   api: { type: [Object, null], required: false },
   messages: { type: Object, required: false },
@@ -56,15 +99,21 @@ const props = defineProps({
   columnMenu: { type: Boolean, required: false, default: true },
   exportable: { type: Boolean, required: false, default: true },
   exportFileName: { type: String, required: false, default: "export" },
-  debounce: { type: Number, required: false, default: 0 }
+  debounce: { type: Number, required: false, default: 0 },
+  filterCount: { type: Number, required: false, default: 0 }
 });
-const emit = defineEmits(["resetColumns"]);
+const emit = defineEmits(["resetColumns", "filtersReset"]);
 const query = defineModel({ type: String, ...{ default: "" } });
 const { locale } = useLocale();
+const filtersOpen = ref(false);
+const activeFilters = computed(() => Math.max(0, Math.floor(props.filterCount)));
 const text = computed(() => ({
   ...locale.value.messages.grid,
   ...props.messages
 }));
+const filtersLabel = computed(
+  () => formatLocaleMessage(locale.value.code, text.value.filtersActive, { count: activeFilters.value })
+);
 const draft = ref(query.value);
 const columns = ref([]);
 const visibleCount = computed(() => columns.value.filter((column) => column.visible).length);
@@ -130,6 +179,12 @@ function resetColumns() {
   props.api?.resetColumnState();
   emit("resetColumns");
 }
+function resetFilters() {
+  if (activeFilters.value > 0) emit("filtersReset");
+}
+function closeFilters() {
+  filtersOpen.value = false;
+}
 function exportCsv() {
   props.api?.exportDataAsCsv({ fileName: props.exportFileName });
 }

package/dist/grid/GridToolbar.vue.d.ts

@@ -1,7 +1,13 @@
 import type { GridMessages } from './types';
-declare var __VLS_8: {};
+declare function closeFilters(): void;
+declare var __VLS_28: {
+    close: typeof closeFilters;
+    count: number;
+}, __VLS_45: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    filters?: (props: typeof __VLS_28) => any;
+} & {
+    default?: (props: typeof __VLS_45) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     api?: import("ag-grid-community").GridApi | null;
@@ -11,6 +17,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     exportable?: boolean;
     exportFileName?: string;
     debounce?: number;
+    filterCount?: number;
     modelValue?: string;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
@@ -207,6 +214,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     resetColumns: () => any;
     "update:modelValue": (value: string) => any;
+    filtersReset: () => any;
 }, string, import("vue").PublicProps, Readonly<{
     api?: import("ag-grid-community").GridApi | null;
     messages?: Partial<GridMessages>;
@@ -215,6 +223,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     exportable?: boolean;
     exportFileName?: string;
     debounce?: number;
+    filterCount?: number;
     modelValue?: string;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
@@ -411,12 +420,14 @@ declare const __VLS_base: import("vue").DefineComponent<{
 }> & Readonly<{
     onResetColumns?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onFiltersReset?: (() => any) | undefined;
 }>, {
     debounce: number;
     searchable: boolean;
     columnMenu: boolean;
     exportable: boolean;
     exportFileName: string;
+    filterCount: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/grid/data-grid.css

@@ -20,6 +20,39 @@
    max-width: 22rem;
 }
 
+.k-data-grid-filters {
+   position: relative;
+   display: inline-flex;
+   flex: none;
+}
+
+.k-data-grid-filters > .k-btn.is-active {
+   color: var(--k-accent-text);
+}
+
+.k-data-grid-filters > .k-data-grid-filters-count {
+   position: absolute;
+   inset-block-start: -0.4375rem;
+   inset-inline-end: -0.4375rem;
+   min-width: 1.125rem;
+   height: 1.125rem;
+   padding-inline: 0.25rem;
+   justify-content: center;
+   font-size: 0.75rem;
+   line-height: 1;
+   pointer-events: none;
+}
+
+.k-data-grid-filters-body {
+   display: flex;
+   flex-direction: column;
+   gap: 0.875rem;
+}
+
+.k-data-grid-filters-reset {
+   margin-inline-end: auto;
+}
+
 .k-data-grid-toolbar-actions {
    display: flex;
    flex-wrap: wrap;

package/dist/grid/types.d.ts

@@ -31,6 +31,7 @@ export interface GridToolbarProps {
     exportable?: boolean;
     exportFileName?: string;
     debounce?: number;
+    filterCount?: number;
 }
 export interface BooleanCellParams {
     trueLabel?: string;

package/dist/icons/builtin.d.ts

@@ -7,6 +7,8 @@ export declare const builtinIcons: {
     readonly 'chevron-up': readonly ["m4.5 15.75 7.5-7.5 7.5 7.5"];
     readonly 'chevron-left': readonly ["M15.75 19.5 8.25 12l7.5-7.5"];
     readonly 'chevron-right': readonly ["m8.25 4.5 7.5 7.5-7.5 7.5"];
+    readonly 'sidebar-collapse': readonly ["M15.75 19.5 8.25 12l7.5-7.5"];
+    readonly 'sidebar-expand': readonly ["m8.25 4.5 7.5 7.5-7.5 7.5"];
     readonly 'chevron-up-down': readonly ["M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"];
     readonly 'chevron-double-left': readonly ["m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"];
     readonly 'chevron-double-right': readonly ["m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"];

package/dist/icons/builtin.mjs

@@ -7,6 +7,8 @@ export const builtinIcons = {
   "chevron-up": ["m4.5 15.75 7.5-7.5 7.5 7.5"],
   "chevron-left": ["M15.75 19.5 8.25 12l7.5-7.5"],
   "chevron-right": ["m8.25 4.5 7.5 7.5-7.5 7.5"],
+  "sidebar-collapse": ["M15.75 19.5 8.25 12l7.5-7.5"],
+  "sidebar-expand": ["m8.25 4.5 7.5 7.5-7.5 7.5"],
   "chevron-up-down": ["M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"],
   "chevron-double-left": ["m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"],
   "chevron-double-right": ["m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"],

package/dist/internal/layout/query.d.ts

@@ -0,0 +1,6 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type { RouterLike } from './route';
+export type RouteHistory = 'push' | 'replace';
+export declare function firstQueryValue(value: unknown): string | undefined;
+export declare function useQueryValue(router: RouterLike | undefined, key: MaybeRefOrGetter<string | undefined>): import("vue").ComputedRef<string | undefined>;
+export declare function writeQueryValue(router: RouterLike, key: string, value: string | undefined, history: RouteHistory): Promise<boolean>;

package/dist/internal/layout/query.mjs

@@ -0,0 +1,64 @@
+import { computed, toValue } from "vue";
+import { isClient } from "../core/env.mjs";
+const batches = /* @__PURE__ */ new WeakMap();
+export function firstQueryValue(value) {
+  if (Array.isArray(value)) return firstQueryValue(value[0]);
+  return typeof value === "string" ? value : void 0;
+}
+export function useQueryValue(router, key) {
+  return computed(() => {
+    const name = toValue(key);
+    if (!router || !name) return void 0;
+    return firstQueryValue(router.currentRoute?.value?.query?.[name]);
+  });
+}
+function isPreviousEntry(router, location) {
+  if (!router.back || !router.resolve) return false;
+  const back = window.history.state?.back;
+  if (typeof back !== "string") return false;
+  return router.resolve(location).fullPath === back;
+}
+async function flush(router, batch) {
+  batches.delete(router);
+  const route = router.currentRoute?.value;
+  const query = { ...route?.query };
+  let changed = false;
+  for (const [key, value] of batch.changes) {
+    if (value === void 0) {
+      if (!(key in query)) continue;
+      delete query[key];
+      changed = true;
+    } else if (query[key] !== value) {
+      query[key] = value;
+      changed = true;
+    }
+  }
+  if (!changed) return true;
+  const location = { path: route?.path, query, hash: route?.hash };
+  try {
+    if (batch.history === "push" && isPreviousEntry(router, location)) {
+      router.back?.();
+      return true;
+    }
+    const failure = batch.history === "replace" && router.replace ? await router.replace(location) : await router.push(location);
+    return !failure;
+  } catch {
+    return false;
+  }
+}
+export function writeQueryValue(router, key, value, history) {
+  if (!isClient()) return Promise.resolve(true);
+  let batch = batches.get(router);
+  if (!batch) {
+    const created = {
+      changes: /* @__PURE__ */ new Map(),
+      history,
+      promise: Promise.resolve().then(() => flush(router, created))
+    };
+    batch = created;
+    batches.set(router, batch);
+  }
+  batch.changes.set(key, value === "" ? void 0 : value);
+  if (history === "push") batch.history = "push";
+  return batch.promise;
+}

package/dist/internal/layout/route.d.ts

@@ -1,9 +1,17 @@
 import type { MaybeRefOrGetter } from 'vue';
-interface RouteLike {
+export interface RouteLike {
     path?: string;
+    fullPath?: string;
+    hash?: string;
+    query?: Record<string, unknown>;
 }
 export interface RouterLike {
     push: (to: unknown) => unknown;
+    replace?: (to: unknown) => unknown;
+    back?: () => unknown;
+    resolve?: (to: unknown) => {
+        fullPath?: string;
+    };
     beforeEach: (guard: (to: RouteLike, from: RouteLike) => boolean | void | Promise<boolean | void>) => () => void;
     currentRoute?: {
         value?: RouteLike;
@@ -13,4 +21,3 @@ export declare function useRouterLike(): RouterLike | undefined;
 export declare function useCurrentPath(override?: MaybeRefOrGetter<string | undefined>): import("vue").ComputedRef<string | undefined>;
 export declare function targetPath(target: unknown): string | undefined;
 export declare function matchesPath(current: string, target: string, exact: boolean): boolean;
-export {};

package/dist/locale/de.mjs

@@ -82,6 +82,10 @@ export const de = {
       columns: "Spalten",
       resetColumns: "Spalten zur\xFCcksetzen",
       exportCsv: "CSV exportieren",
+      filters: "Filter",
+      filtersActive: "Filter | Filter, {count} aktiv | Filter, {count} aktiv",
+      resetFilters: "Filter zur\xFCcksetzen",
+      showResults: "Ergebnisse anzeigen",
       rowsPerPage: "Zeilen pro Seite",
       previousPage: "Vorherige Seite",
       nextPage: "N\xE4chste Seite",

package/dist/locale/en.mjs

@@ -82,6 +82,10 @@ export const en = {
       columns: "Columns",
       resetColumns: "Reset columns",
       exportCsv: "Export CSV",
+      filters: "Filters",
+      filtersActive: "Filters | Filters, {count} active | Filters, {count} active",
+      resetFilters: "Reset filters",
+      showResults: "Show results",
       rowsPerPage: "Rows per page",
       previousPage: "Previous page",
       nextPage: "Next page",

package/dist/locale/it.mjs

@@ -82,6 +82,10 @@ export const it = {
       columns: "Colonne",
       resetColumns: "Ripristina colonne",
       exportCsv: "Esporta CSV",
+      filters: "Filtri",
+      filtersActive: "Filtri | Filtri, {count} attivo | Filtri, {count} attivi",
+      resetFilters: "Azzera filtri",
+      showResults: "Mostra risultati",
       rowsPerPage: "Righe per pagina",
       previousPage: "Pagina precedente",
       nextPage: "Pagina successiva",