@xleddyl/443-components-vue 0.10.2 → 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

@@ -1,7 +1,7 @@
 import type { Component } from 'vue';
 import type { LinkTarget, Tone } from '../core/types';
 import type { DescriptionItem, StatTrend } from '../data/types';
-import type { BreadcrumbItem, NavItem, NavSection } from '../layout/types';
+import type { BreadcrumbItem, NavItem, NavSection, ShellContent } from '../layout/types';
 import type { CommandEmptyText, CommandGroup, MenuItems } from '../overlays/types';
 import type { ThemePreset } from '../../internal/core/preset-data';
 export type DashboardVariant = 'inset' | 'sidebar' | 'floating';
@@ -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;
@@ -138,6 +140,7 @@ export interface KAppConfig {
         storageKey?: string | false;
         fluid?: boolean;
         fill?: boolean;
+        content?: ShellContent;
         breadcrumbs?: boolean;
     };
     auth?: {

package/dist/composables/data.d.ts

@@ -1 +1,2 @@
 export * from './useTableSort';
+export * from './useSortable';

package/dist/composables/data.mjs

@@ -1 +1,2 @@
 export * from "./useTableSort.mjs";
+export * from "./useSortable.mjs";

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/composables/useSortable.d.ts

@@ -0,0 +1,38 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type { SortableAxis } from '../internal/data/sortable';
+import { SORTABLE_ATTR } from '../internal/data/sortable';
+export type SortableOrientation = SortableAxis;
+export interface SortableMove<T> {
+    item: T;
+    from: number;
+    to: number;
+    items: T[];
+    source: 'pointer' | 'keyboard' | 'api';
+}
+export interface UseSortableOptions<T> {
+    items: MaybeRefOrGetter<readonly T[]>;
+    orientation?: MaybeRefOrGetter<SortableOrientation | undefined>;
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+    handle?: string;
+    canMove?: (item: T, index: number) => boolean;
+    label?: (item: T) => string;
+    movedText?: (move: SortableMove<T>) => string;
+    onMove: (items: T[], move: SortableMove<T>) => void;
+}
+export interface SortableItemProps {
+    [SORTABLE_ATTR]: number;
+    'aria-keyshortcuts'?: string;
+    onPointerdown: (event: PointerEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+}
+export interface SortableMoveOptions {
+    announce?: boolean;
+    source?: SortableMove<unknown>['source'];
+}
+export declare function useSortable<T>(container: MaybeRefOrGetter<HTMLElement | null | undefined>, options: UseSortableOptions<T>): {
+    dragging: Readonly<import("vue").Ref<number | null, number | null>>;
+    announcement: import("vue").Ref<string, string>;
+    itemProps: (index: number) => SortableItemProps;
+    move: (from: number, to: number, moveOptions?: SortableMoveOptions) => boolean;
+    canMove: (index: number) => boolean;
+};

package/dist/composables/useSortable.mjs

@@ -0,0 +1,215 @@
+import { nextTick, onScopeDispose, readonly, ref, toValue } from "vue";
+import { useLocale } from "./useLocale.mjs";
+import { useLiveMessage } from "../internal/core/live.mjs";
+import { isClient } from "../internal/core/env.mjs";
+import { SORTABLE_ATTR, insertionIndex, isRtl, sortableElements } from "../internal/data/sortable.mjs";
+const THRESHOLD = 4;
+const INTERACTIVE = "button, a[href], input, textarea, select, [contenteditable]";
+export function useSortable(container, options) {
+  const { t } = useLocale();
+  const live = useLiveMessage();
+  const dragging = ref(null);
+  let drag = null;
+  const axis = () => toValue(options.orientation) ?? "vertical";
+  const isDisabled = () => Boolean(toValue(options.disabled));
+  const list = () => toValue(options.items);
+  function movable(index) {
+    const item = list()[index];
+    if (item === void 0 || isDisabled()) return false;
+    return options.canMove ? options.canMove(item, index) : true;
+  }
+  function labelOf(item) {
+    return options.label ? options.label(item) : String(item);
+  }
+  function announceMove(move2) {
+    live.announce(
+      options.movedText ? options.movedText(move2) : t("sortable.moved", {
+        label: labelOf(move2.item),
+        position: move2.to + 1,
+        count: move2.items.length
+      })
+    );
+  }
+  function move(from, to, moveOptions = {}) {
+    const items = list();
+    const target = Math.max(0, Math.min(items.length - 1, to));
+    if (from === target || !movable(from)) return false;
+    const next = [...items];
+    const [item] = next.splice(from, 1);
+    next.splice(target, 0, item);
+    const entry = {
+      item,
+      from,
+      to: target,
+      items: next,
+      source: moveOptions.source ?? "api"
+    };
+    const focused = isClient() ? document.activeElement : null;
+    options.onMove(next, entry);
+    if (moveOptions.announce) announceMove(entry);
+    if (focused && focused !== document.body)
+      nextTick(() => {
+        if (focused.isConnected && document.activeElement !== focused)
+          focused.focus({ preventScroll: true });
+      });
+    return true;
+  }
+  function keyDelta(event) {
+    const rtl = isRtl(event.currentTarget);
+    switch (event.key) {
+      case "ArrowUp":
+        return -1;
+      case "ArrowDown":
+        return 1;
+      case "ArrowLeft":
+        return rtl ? 1 : -1;
+      case "ArrowRight":
+        return rtl ? -1 : 1;
+      case "Home":
+        return -Infinity;
+      case "End":
+        return Infinity;
+      default:
+        return 0;
+    }
+  }
+  function onKeydown(event, index) {
+    if (!event.altKey || event.ctrlKey || event.metaKey) return;
+    const delta = keyDelta(event);
+    if (!delta) return;
+    event.preventDefault();
+    const to = delta === -Infinity ? 0 : delta === Infinity ? list().length - 1 : index + delta;
+    move(index, to, { announce: true, source: "keyboard" });
+  }
+  function preventSelection(event) {
+    event.preventDefault();
+  }
+  function suppressClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  function listen(enable) {
+    if (enable) {
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", onPointerUp);
+      window.addEventListener("pointercancel", onPointerCancel);
+      window.addEventListener("keydown", onDragKeydown, true);
+      document.addEventListener("selectstart", preventSelection);
+      return;
+    }
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", onPointerUp);
+    window.removeEventListener("pointercancel", onPointerCancel);
+    window.removeEventListener("keydown", onDragKeydown, true);
+    document.removeEventListener("selectstart", preventSelection);
+  }
+  function follow(event) {
+    if (!drag) return;
+    const element = drag.element;
+    const current = element.style.translate.split(" ").map((value) => parseFloat(value) || 0);
+    const rect = element.getBoundingClientRect();
+    const layoutX = rect.left - (current[0] ?? 0);
+    const layoutY = rect.top - (current[1] ?? 0);
+    const x = event.clientX - drag.startX - (layoutX - drag.layoutX);
+    const y = event.clientY - drag.startY - (layoutY - drag.layoutY);
+    element.style.translate = `${x}px ${y}px`;
+  }
+  function onPointerDown(event, index) {
+    if (event.button !== 0 || !event.isPrimary || drag) return;
+    const element = event.currentTarget;
+    const target = event.target;
+    if (options.handle) {
+      if (!target.closest(options.handle)) return;
+    } else if (target !== element && target.closest(INTERACTIVE)) return;
+    if (!movable(index)) return;
+    const rect = element.getBoundingClientRect();
+    drag = {
+      pointerId: event.pointerId,
+      element,
+      origin: index,
+      index,
+      startX: event.clientX,
+      startY: event.clientY,
+      layoutX: rect.left,
+      layoutY: rect.top,
+      active: false
+    };
+    listen(true);
+  }
+  function onPointerMove(event) {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    if (!drag.active) {
+      if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < THRESHOLD)
+        return;
+      drag.active = true;
+      dragging.value = drag.index;
+      window.getSelection()?.removeAllRanges();
+    }
+    event.preventDefault();
+    const root = toValue(container);
+    const others = sortableElements(root).filter((element) => element !== drag.element);
+    const target = insertionIndex(others, event.clientX, event.clientY, axis(), isRtl(root));
+    if (target !== drag.index && move(drag.index, target, { source: "pointer" })) {
+      drag.index = target;
+      dragging.value = target;
+      nextTick(() => follow(event));
+    }
+    follow(event);
+  }
+  function finish(cancelled) {
+    const state = drag;
+    drag = null;
+    listen(false);
+    if (!state) return;
+    state.element.style.translate = "";
+    dragging.value = null;
+    if (!state.active) return;
+    window.addEventListener("click", suppressClick, { capture: true, once: true });
+    setTimeout(() => window.removeEventListener("click", suppressClick, { capture: true }), 0);
+    if (cancelled) {
+      if (state.index !== state.origin) move(state.index, state.origin, { source: "pointer" });
+      return;
+    }
+    if (state.index !== state.origin) {
+      const items = list();
+      const item = items[state.index];
+      announceMove({
+        item,
+        from: state.origin,
+        to: state.index,
+        items: [...items],
+        source: "pointer"
+      });
+    }
+  }
+  function onPointerUp(event) {
+    if (drag && event.pointerId === drag.pointerId) finish(false);
+  }
+  function onPointerCancel(event) {
+    if (drag && event.pointerId === drag.pointerId) finish(true);
+  }
+  function onDragKeydown(event) {
+    if (event.key !== "Escape" || !drag?.active) return;
+    event.preventDefault();
+    event.stopPropagation();
+    finish(true);
+  }
+  function itemProps(index) {
+    return {
+      [SORTABLE_ATTR]: index,
+      "aria-keyshortcuts": movable(index) ? "Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown Alt+Home Alt+End" : void 0,
+      onPointerdown: (event) => onPointerDown(event, index),
+      onKeydown: (event) => onKeydown(event, index)
+    };
+  }
+  onScopeDispose(() => {
+    if (drag) finish(true);
+  });
+  return {
+    dragging: readonly(dragging),
+    announcement: live.message,
+    itemProps,
+    move,
+    canMove: movable
+  };
+}

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