UNPKG

vuetify

Version:

Vue Material Component Framework

1,234 lines (1,216 loc) 149 kB
import * as vue from 'vue'; import { ComponentPropsOptions, ExtractPropTypes, VNodeChild, VNode, PropType, JSXComponent, Ref, UnwrapRef } from 'vue'; type SlotsToProps<U extends RawSlots, T = MakeInternalSlots<U>> = { $children?: (VNodeChild | (T extends { default: infer V; } ? V : {}) | { [K in keyof T]?: T[K]; }); 'v-slots'?: { [K in keyof T]?: T[K] | false; }; } & { [K in keyof T as `v-slot:${K & string}`]?: T[K] | false; }; type RawSlots = Record<string, unknown>; type Slot<T> = [T] extends [never] ? () => VNodeChild : (arg: T) => VNodeChild; type VueSlot<T> = [T] extends [never] ? () => VNode[] : (arg: T) => VNode[]; type MakeInternalSlots<T extends RawSlots> = { [K in keyof T]: Slot<T[K]>; }; type MakeSlots<T extends RawSlots> = { [K in keyof T]: VueSlot<T[K]>; }; type GenericProps<Props, Slots extends Record<string, unknown>> = { $props: Props & SlotsToProps<Slots>; $slots: MakeSlots<Slots>; }; interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> { filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): Partial<Pick<T, U>>; } declare function deepEqual(a: any, b: any): boolean; type SelectItemKey<T = Record<string, any>> = boolean | null | undefined | string | readonly (string | number)[] | ((item: T, fallback?: any) => any); type EventProp<T extends any[] = any[], F = (...args: T) => void> = F; declare const EventProp: <T extends any[] = any[]>() => PropType<(...args: T) => void>; interface LoaderSlotProps { color: string | undefined; isActive: boolean; } type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent; declare const IconValue: PropType<IconValue>; type ExpandProps = { expandOnClick: boolean; expanded: readonly string[]; 'onUpdate:expanded': ((value: any[]) => void) | undefined; }; declare function provideExpanded(props: ExpandProps): { expand: (item: DataTableItem, value: boolean) => void; expanded: Ref<Set<string>> & { readonly externalValue: readonly string[]; }; expandOnClick: Ref<boolean>; isExpanded: (item: DataTableItem) => boolean; toggleExpand: (item: DataTableItem) => void; }; type SortItem = { key: string; order?: boolean | 'asc' | 'desc'; }; declare function provideSort(options: { sortBy: Ref<readonly SortItem[]>; mustSort: Ref<boolean>; multiSort: Ref<boolean>; page?: Ref<number>; }): { sortBy: Ref<readonly SortItem[]>; toggleSort: (column: InternalDataTableHeader) => void; isSorted: (column: InternalDataTableHeader) => boolean; }; interface GroupableItem<T = any> { type: 'item'; raw: T; } interface Group<T = any> { type: 'group'; depth: number; id: string; key: string; value: any; items: readonly (T | Group<T>)[]; } declare function provideGroupBy(options: { groupBy: Ref<readonly SortItem[]>; sortBy: Ref<readonly SortItem[]>; }): { sortByWithGroups: vue.ComputedRef<SortItem[]>; toggleGroup: (group: Group) => void; opened: Ref<Set<string> & Omit<Set<string>, keyof Set<any>>>; groupBy: Ref<readonly SortItem[]>; extractRows: <T extends GroupableItem<any>>(items: readonly (T | Group<T>)[]) => T[]; isGroupOpen: (group: Group) => boolean; }; /** * - match without highlight * - single match (index), length already known * - single match (start, end) * - multiple matches (start, end), probably shouldn't overlap */ type FilterMatch = boolean | number | [number, number] | [number, number][]; type FilterFunction = (value: string, query: string, item?: InternalItem) => FilterMatch; type FilterKeyFunctions = Record<string, FilterFunction>; type FilterKeys = string | string[]; type FilterMode = 'some' | 'every' | 'union' | 'intersection'; interface InternalItem<T = any> { value: any; raw: T; } type DataTableCompareFunction<T = any> = (a: T, b: T) => number; type DataTableHeader = { key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {}); value?: SelectItemKey; title?: string; fixed?: boolean; align?: 'start' | 'end' | 'center'; width?: number | string; minWidth?: string; maxWidth?: string; headerProps?: Record<string, any>; cellProps?: HeaderCellProps; sortable?: boolean; sort?: DataTableCompareFunction; sortRaw?: DataTableCompareFunction; filter?: FilterFunction; children?: DataTableHeader[]; }; type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'children'> & { key: string | null; value: SelectItemKey | null; sortable: boolean; fixedOffset?: number; lastFixed?: boolean; colspan?: number; rowspan?: number; children?: InternalDataTableHeader[]; }; interface DataTableItem<T = any> extends InternalItem<T>, GroupableItem<T>, SelectableItem { key: any; index: number; columns: { [key: string]: any; }; } type GroupHeaderSlot = { index: number; item: Group; columns: InternalDataTableHeader[]; isExpanded: ReturnType<typeof provideExpanded>['isExpanded']; toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']; isSelected: ReturnType<typeof provideSelection>['isSelected']; toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']; toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']; isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']; }; type ItemSlotBase<T> = { index: number; item: T; internalItem: DataTableItem<T>; isExpanded: ReturnType<typeof provideExpanded>['isExpanded']; toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']; isSelected: ReturnType<typeof provideSelection>['isSelected']; toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']; }; type ItemSlot<T> = ItemSlotBase<T> & { columns: InternalDataTableHeader[]; }; type ItemKeySlot<T> = ItemSlotBase<T> & { value: any; column: InternalDataTableHeader; }; type RowProps<T> = Record<string, any> | ((data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem'>) => Record<string, any>); type CellProps<T> = Record<string, any> | ((data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem' | 'value' | 'column'>) => Record<string, any>); type HeaderCellProps = Record<string, any> | ((data: Pick<ItemKeySlot<any>, 'index' | 'item' | 'internalItem' | 'value'>) => Record<string, any>); interface DataTableItemProps { items: any[]; itemValue: SelectItemKey; itemSelectable: SelectItemKey; returnObject: boolean; } interface SelectableItem { value: any; selectable: boolean; } type SelectionProps = Pick<DataTableItemProps, 'itemValue'> & { modelValue: readonly any[]; selectStrategy: 'single' | 'page' | 'all'; valueComparator: typeof deepEqual; 'onUpdate:modelValue': EventProp<[any[]]> | undefined; }; declare function provideSelection(props: SelectionProps, { allItems, currentPage }: { allItems: Ref<SelectableItem[]>; currentPage: Ref<SelectableItem[]>; }): { toggleSelect: (item: SelectableItem) => void; select: (items: SelectableItem[], value: boolean) => void; selectAll: (value: boolean) => void; isSelected: (items: SelectableItem | SelectableItem[]) => boolean; isSomeSelected: (items: SelectableItem | SelectableItem[]) => boolean; someSelected: vue.ComputedRef<boolean>; allSelected: vue.ComputedRef<boolean>; showSelectAll: boolean; }; type HeadersSlotProps = { headers: InternalDataTableHeader[][]; columns: InternalDataTableHeader[]; sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>; someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>; allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>; toggleSort: ReturnType<typeof provideSort>['toggleSort']; selectAll: ReturnType<typeof provideSelection>['selectAll']; getSortIcon: (column: InternalDataTableHeader) => IconValue; isSorted: ReturnType<typeof provideSort>['isSorted']; }; type VDataTableHeaderCellColumnSlotProps = { column: InternalDataTableHeader; selectAll: ReturnType<typeof provideSelection>['selectAll']; isSorted: ReturnType<typeof provideSort>['isSorted']; toggleSort: ReturnType<typeof provideSort>['toggleSort']; sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>; someSelected: UnwrapRef<ReturnType<typeof provideSelection>['someSelected']>; allSelected: UnwrapRef<ReturnType<typeof provideSelection>['allSelected']>; getSortIcon: (column: InternalDataTableHeader) => IconValue; }; type VDataTableHeadersSlots = { headers: HeadersSlotProps; loader: LoaderSlotProps; 'header.data-table-select': VDataTableHeaderCellColumnSlotProps; 'header.data-table-expand': VDataTableHeaderCellColumnSlotProps; } & { [key: `header.${string}`]: VDataTableHeaderCellColumnSlotProps; }; type Density = null | 'default' | 'comfortable' | 'compact'; declare function providePagination(options: { page: Ref<number>; itemsPerPage: Ref<number>; itemsLength: Ref<number>; }): { page: Ref<number>; itemsPerPage: Ref<number>; startIndex: vue.ComputedRef<number>; stopIndex: vue.ComputedRef<number>; pageCount: vue.ComputedRef<number>; itemsLength: Ref<number>; nextPage: () => void; prevPage: () => void; setPage: (value: number) => void; setItemsPerPage: (value: number) => void; }; type VDataTableGroupHeaderRowSlots = { 'data-table-group': { item: Group; count: number; props: Record<string, unknown>; }; 'data-table-select': { props: Record<string, unknown>; }; }; type VDataTableRowSlots<T> = { 'item.data-table-select': Omit<ItemKeySlot<T>, 'value'>; 'item.data-table-expand': Omit<ItemKeySlot<T>, 'value'>; } & { [key: `item.${string}`]: ItemKeySlot<T>; }; declare const VDataTableRow: { new (...args: any[]): vue.CreateComponentPublicInstance<{} & { index?: number | undefined; onClick?: ((args_0: MouseEvent) => void) | undefined; onContextmenu?: ((args_0: MouseEvent) => void) | undefined; onDblclick?: ((args_0: MouseEvent) => void) | undefined; }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "item" | "$children" | "v-slots" | "cellProps" | `v-slot:item.${string}`>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {} & { index?: number | undefined; onClick?: ((args_0: MouseEvent) => void) | undefined; onContextmenu?: ((args_0: MouseEvent) => void) | undefined; onDblclick?: ((args_0: MouseEvent) => void) | undefined; }, {}, true, {}, vue.SlotsType<Partial<{ [x: `item.${string}`]: (arg: ItemKeySlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'item.data-table-select': (arg: Omit<ItemKeySlot<unknown>, "value">) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'item.data-table-expand': (arg: Omit<ItemKeySlot<unknown>, "value">) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; }>>, { P: {}; B: {}; D: {}; C: {}; M: {}; Defaults: {}; }, {} & { index?: number | undefined; onClick?: ((args_0: MouseEvent) => void) | undefined; onContextmenu?: ((args_0: MouseEvent) => void) | undefined; onDblclick?: ((args_0: MouseEvent) => void) | undefined; }, {}, {}, {}, {}, {}>; __isFragment?: undefined; __isTeleport?: undefined; __isSuspense?: undefined; } & vue.ComponentOptionsBase<{} & { index?: number | undefined; onClick?: ((args_0: MouseEvent) => void) | undefined; onContextmenu?: ((args_0: MouseEvent) => void) | undefined; onDblclick?: ((args_0: MouseEvent) => void) | undefined; }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "item" | "$children" | "v-slots" | "cellProps" | `v-slot:item.${string}`>, string, {}, {}, string, vue.SlotsType<Partial<{ [x: `item.${string}`]: (arg: ItemKeySlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'item.data-table-select': (arg: Omit<ItemKeySlot<unknown>, "value">) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'item.data-table-expand': (arg: Omit<ItemKeySlot<unknown>, "value">) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: { item?: DataTableItem<T> | undefined; cellProps?: CellProps<T> | undefined; }, slots: VDataTableRowSlots<T>) => GenericProps<{ item?: DataTableItem<T> | undefined; cellProps?: CellProps<T> | undefined; }, VDataTableRowSlots<T>>) & FilterPropsOptions<{ index: NumberConstructor; item: PropType<DataTableItem<any>>; cellProps: PropType<CellProps<any>>; onClick: PropType<(args_0: MouseEvent) => void>; onContextmenu: PropType<(args_0: MouseEvent) => void>; onDblclick: PropType<(args_0: MouseEvent) => void>; }, vue.ExtractPropTypes<{ index: NumberConstructor; item: PropType<DataTableItem<any>>; cellProps: PropType<CellProps<any>>; onClick: PropType<(args_0: MouseEvent) => void>; onContextmenu: PropType<(args_0: MouseEvent) => void>; onDblclick: PropType<(args_0: MouseEvent) => void>; }>>; type VDataTableRow = InstanceType<typeof VDataTableRow>; type VDataTableRowsSlots<T> = VDataTableGroupHeaderRowSlots & VDataTableRowSlots<T> & { item: ItemSlot<T> & { props: Record<string, any>; }; loading: never; 'group-header': GroupHeaderSlot; 'no-data': never; 'expanded-row': ItemSlot<T>; }; declare const VDataTableRows: { new (...args: any[]): vue.CreateComponentPublicInstance<{ noDataText: string; loadingText: string; hideNoData: boolean; } & { loading?: string | boolean | undefined; cellProps?: CellProps<any> | undefined; rowProps?: RowProps<any> | undefined; }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slots" | "items" | "v-slot:item" | "v-slot:no-data" | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & { noDataText: string; loadingText: string; hideNoData: boolean; } & { loading?: string | boolean | undefined; cellProps?: CellProps<any> | undefined; rowProps?: RowProps<any> | undefined; }, { noDataText: string; loadingText: string; hideNoData: boolean; }, true, {}, vue.SlotsType<Partial<{ [x: `item.${string}`]: (arg: ItemKeySlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'data-table-group': (arg: { item: Group<any>; count: number; props: Record<string, unknown>; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'data-table-select': (arg: { props: Record<string, unknown>; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'item.data-table-select': (arg: Omit<ItemKeySlot<unknown>, "value">) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'item.data-table-expand': (arg: Omit<ItemKeySlot<unknown>, "value">) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; item: (arg: { index: number; item: unknown; internalItem: DataTableItem<unknown>; isExpanded: (item: DataTableItem<any>) => boolean; toggleExpand: (item: DataTableItem<any>) => void; isSelected: (items: SelectableItem | SelectableItem[]) => boolean; toggleSelect: (item: SelectableItem) => void; } & { columns: InternalDataTableHeader[]; } & { props: Record<string, any>; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; loading: () => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'group-header': (arg: GroupHeaderSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'no-data': () => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'expanded-row': (arg: ItemSlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; }>>, { P: {}; B: {}; D: {}; C: {}; M: {}; Defaults: {}; }, { noDataText: string; loadingText: string; hideNoData: boolean; } & { loading?: string | boolean | undefined; cellProps?: CellProps<any> | undefined; rowProps?: RowProps<any> | undefined; }, {}, {}, {}, {}, { noDataText: string; loadingText: string; hideNoData: boolean; }>; __isFragment?: undefined; __isTeleport?: undefined; __isSuspense?: undefined; } & vue.ComponentOptionsBase<{ noDataText: string; loadingText: string; hideNoData: boolean; } & { loading?: string | boolean | undefined; cellProps?: CellProps<any> | undefined; rowProps?: RowProps<any> | undefined; }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "v-slots" | "items" | "v-slot:item" | "v-slot:no-data" | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row">, string, { noDataText: string; loadingText: string; hideNoData: boolean; }, {}, string, vue.SlotsType<Partial<{ [x: `item.${string}`]: (arg: ItemKeySlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'data-table-group': (arg: { item: Group<any>; count: number; props: Record<string, unknown>; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'data-table-select': (arg: { props: Record<string, unknown>; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'item.data-table-select': (arg: Omit<ItemKeySlot<unknown>, "value">) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'item.data-table-expand': (arg: Omit<ItemKeySlot<unknown>, "value">) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; item: (arg: { index: number; item: unknown; internalItem: DataTableItem<unknown>; isExpanded: (item: DataTableItem<any>) => boolean; toggleExpand: (item: DataTableItem<any>) => void; isSelected: (items: SelectableItem | SelectableItem[]) => boolean; toggleSelect: (item: SelectableItem) => void; } & { columns: InternalDataTableHeader[]; } & { props: Record<string, any>; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; loading: () => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'group-header': (arg: GroupHeaderSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'no-data': () => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'expanded-row': (arg: ItemSlot<unknown>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; }>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: { items?: readonly (DataTableItem<T> | Group<T>)[] | undefined; }, slots: VDataTableRowsSlots<T>) => GenericProps<{ items?: readonly (DataTableItem<T> | Group<T>)[] | undefined; }, VDataTableRowsSlots<T>>) & FilterPropsOptions<{ loading: (StringConstructor | BooleanConstructor)[]; loadingText: { type: StringConstructor; default: string; }; hideNoData: BooleanConstructor; items: { type: PropType<readonly (Group<any> | DataTableItem<any>)[]>; default: () => never[]; }; noDataText: { type: StringConstructor; default: string; }; rowProps: PropType<RowProps<any>>; cellProps: PropType<CellProps<any>>; }, vue.ExtractPropTypes<{ loading: (StringConstructor | BooleanConstructor)[]; loadingText: { type: StringConstructor; default: string; }; hideNoData: BooleanConstructor; items: { type: PropType<readonly (Group<any> | DataTableItem<any>)[]>; default: () => never[]; }; noDataText: { type: StringConstructor; default: string; }; rowProps: PropType<RowProps<any>>; cellProps: PropType<CellProps<any>>; }>>; type VDataTableRows = InstanceType<typeof VDataTableRows>; type VDataTableSlotProps<T> = { page: number; itemsPerPage: number; sortBy: UnwrapRef<ReturnType<typeof provideSort>['sortBy']>; pageCount: number; toggleSort: ReturnType<typeof provideSort>['toggleSort']; setItemsPerPage: ReturnType<typeof providePagination>['setItemsPerPage']; someSelected: boolean; allSelected: boolean; isSelected: ReturnType<typeof provideSelection>['isSelected']; select: ReturnType<typeof provideSelection>['select']; selectAll: ReturnType<typeof provideSelection>['selectAll']; toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']; isExpanded: ReturnType<typeof provideExpanded>['isExpanded']; toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']; isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']; toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']; items: readonly T[]; internalItems: readonly DataTableItem[]; groupedItems: readonly (DataTableItem<T> | Group<DataTableItem<T>>)[]; columns: InternalDataTableHeader[]; headers: InternalDataTableHeader[][]; }; type VDataTableSlots<T> = VDataTableRowsSlots<T> & VDataTableHeadersSlots & { default: VDataTableSlotProps<T>; colgroup: VDataTableSlotProps<T>; top: VDataTableSlotProps<T>; body: VDataTableSlotProps<T>; tbody: VDataTableSlotProps<T>; thead: VDataTableSlotProps<T>; tfoot: VDataTableSlotProps<T>; bottom: VDataTableSlotProps<T>; 'body.prepend': VDataTableSlotProps<T>; 'body.append': VDataTableSlotProps<T>; 'footer.prepend': never; }; type ItemType$2<T> = T extends readonly (infer U)[] ? U : never; declare const VDataTable: { new (...args: any[]): vue.CreateComponentPublicInstance<{ page: string | number; style: vue.StyleValue; expanded: readonly string[]; tag: string; sticky: boolean; noDataText: string; loadingText: string; itemsPerPageText: string; sortBy: readonly SortItem[]; pageText: string; density: Density; valueComparator: typeof deepEqual; nextIcon: string; prevIcon: string; selectStrategy: "all" | "page" | "single"; returnObject: boolean; filterMode: FilterMode; noFilter: boolean; hideNoData: boolean; hover: boolean; multiSort: boolean; mustSort: boolean; groupBy: readonly SortItem[]; showSelect: boolean; expandOnClick: boolean; showExpand: boolean; itemsPerPage: string | number; firstIcon: string; lastIcon: string; firstPageLabel: string; prevPageLabel: string; nextPageLabel: string; lastPageLabel: string; itemsPerPageOptions: readonly (number | { title: string; value: number; })[]; showCurrentPage: boolean; sortAscIcon: IconValue; sortDescIcon: IconValue; fixedHeader: boolean; fixedFooter: boolean; } & { search?: string | undefined; height?: string | number | undefined; width?: string | number | undefined; color?: string | undefined; loading?: string | boolean | undefined; class?: any; headers?: readonly { readonly key?: (string & {}) | "data-table-group" | "data-table-select" | "data-table-expand" | undefined; readonly value?: SelectItemKey; readonly title?: string | undefined; readonly fixed?: boolean | undefined; readonly align?: "center" | "end" | "start" | undefined; readonly width?: string | number | undefined; readonly minWidth?: string | undefined; readonly maxWidth?: string | undefined; readonly headerProps?: { readonly [x: string]: any; } | undefined; readonly cellProps?: ((data: Pick<ItemKeySlot<any>, "index" | "item" | "value" | "internalItem">) => Record<string, any>) | { readonly [x: string]: any; } | undefined; readonly sortable?: boolean | undefined; readonly sort?: DataTableCompareFunction<any> | undefined; readonly sortRaw?: DataTableCompareFunction<any> | undefined; readonly filter?: FilterFunction | undefined; readonly children?: readonly any[] | undefined; }[] | undefined; theme?: string | undefined; customFilter?: FilterFunction | undefined; customKeyFilter?: FilterKeyFunctions | undefined; filterKeys?: FilterKeys | undefined; customKeySort?: Record<string, DataTableCompareFunction> | undefined; headerProps?: Record<string, any> | undefined; } & { "onUpdate:sortBy"?: ((value: any) => any) | undefined; "onUpdate:groupBy"?: ((value: any) => any) | undefined; "onUpdate:expanded"?: ((value: any) => any) | undefined; "onUpdate:page"?: ((value: number) => any) | undefined; "onUpdate:itemsPerPage"?: ((value: number) => any) | undefined; "onUpdate:options"?: ((value: any) => any) | undefined; "onUpdate:currentItems"?: ((value: any) => any) | undefined; }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{ 'update:modelValue': (value: any[]) => boolean; 'update:page': (value: number) => boolean; 'update:itemsPerPage': (value: number) => boolean; 'update:sortBy': (value: any) => boolean; 'update:options': (value: any) => boolean; 'update:groupBy': (value: any) => boolean; 'update:expanded': (value: any) => boolean; 'update:currentItems': (value: any) => boolean; }, "$children" | "v-slot:default" | "v-slots" | "items" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:item" | "itemValue" | "v-slot:no-data" | "cellProps" | "itemSelectable" | "rowProps" | "v-slot:headers" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row" | "v-slot:top" | "v-slot:bottom" | "v-slot:body" | "v-slot:colgroup" | "v-slot:tbody" | "v-slot:tfoot" | "v-slot:thead" | "v-slot:body.prepend" | "v-slot:body.append" | "v-slot:footer.prepend">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & { page: string | number; style: vue.StyleValue; expanded: readonly string[]; tag: string; sticky: boolean; noDataText: string; loadingText: string; itemsPerPageText: string; sortBy: readonly SortItem[]; pageText: string; density: Density; valueComparator: typeof deepEqual; nextIcon: string; prevIcon: string; selectStrategy: "all" | "page" | "single"; returnObject: boolean; filterMode: FilterMode; noFilter: boolean; hideNoData: boolean; hover: boolean; multiSort: boolean; mustSort: boolean; groupBy: readonly SortItem[]; showSelect: boolean; expandOnClick: boolean; showExpand: boolean; itemsPerPage: string | number; firstIcon: string; lastIcon: string; firstPageLabel: string; prevPageLabel: string; nextPageLabel: string; lastPageLabel: string; itemsPerPageOptions: readonly (number | { title: string; value: number; })[]; showCurrentPage: boolean; sortAscIcon: IconValue; sortDescIcon: IconValue; fixedHeader: boolean; fixedFooter: boolean; } & { search?: string | undefined; height?: string | number | undefined; width?: string | number | undefined; color?: string | undefined; loading?: string | boolean | undefined; class?: any; headers?: readonly { readonly key?: (string & {}) | "data-table-group" | "data-table-select" | "data-table-expand" | undefined; readonly value?: SelectItemKey; readonly title?: string | undefined; readonly fixed?: boolean | undefined; readonly align?: "center" | "end" | "start" | undefined; readonly width?: string | number | undefined; readonly minWidth?: string | undefined; readonly maxWidth?: string | undefined; readonly headerProps?: { readonly [x: string]: any; } | undefined; readonly cellProps?: ((data: Pick<ItemKeySlot<any>, "index" | "item" | "value" | "internalItem">) => Record<string, any>) | { readonly [x: string]: any; } | undefined; readonly sortable?: boolean | undefined; readonly sort?: DataTableCompareFunction<any> | undefined; readonly sortRaw?: DataTableCompareFunction<any> | undefined; readonly filter?: FilterFunction | undefined; readonly children?: readonly any[] | undefined; }[] | undefined; theme?: string | undefined; customFilter?: FilterFunction | undefined; customKeyFilter?: FilterKeyFunctions | undefined; filterKeys?: FilterKeys | undefined; customKeySort?: Record<string, DataTableCompareFunction> | undefined; headerProps?: Record<string, any> | undefined; } & { "onUpdate:sortBy"?: ((value: any) => any) | undefined; "onUpdate:groupBy"?: ((value: any) => any) | undefined; "onUpdate:expanded"?: ((value: any) => any) | undefined; "onUpdate:page"?: ((value: number) => any) | undefined; "onUpdate:itemsPerPage"?: ((value: number) => any) | undefined; "onUpdate:options"?: ((value: any) => any) | undefined; "onUpdate:currentItems"?: ((value: any) => any) | undefined; }, { page: string | number; style: vue.StyleValue; expanded: readonly string[]; tag: string; sticky: boolean; noDataText: string; loadingText: string; itemsPerPageText: string; sortBy: readonly SortItem[]; pageText: string; density: Density; valueComparator: typeof deepEqual; nextIcon: string; prevIcon: string; selectStrategy: "all" | "page" | "single"; returnObject: boolean; filterMode: FilterMode; noFilter: boolean; hideNoData: boolean; hover: boolean; multiSort: boolean; mustSort: boolean; groupBy: readonly SortItem[]; showSelect: boolean; expandOnClick: boolean; showExpand: boolean; itemsPerPage: string | number; firstIcon: string; lastIcon: string; firstPageLabel: string; prevPageLabel: string; nextPageLabel: string; lastPageLabel: string; itemsPerPageOptions: readonly (number | { title: string; value: number; })[]; showCurrentPage: boolean; sortAscIcon: IconValue; sortDescIcon: IconValue; fixedHeader: boolean; fixedFooter: boolean; }, true, {}, vue.SlotsType<Partial<{ [x: `item.${string}`]: (arg: ItemKeySlot<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; [x: `header.${string}`]: (arg: { column: InternalDataTableHeader; selectAll: (value: boolean) => void; isSorted: (column: InternalDataTableHeader) => boolean; toggleSort: (column: InternalDataTableHeader) => void; sortBy: readonly SortItem[]; someSelected: boolean; allSelected: boolean; getSortIcon: (column: InternalDataTableHeader) => IconValue; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'data-table-group': (arg: { item: Group<any>; count: number; props: Record<string, unknown>; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'data-table-select': (arg: { props: Record<string, unknown>; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'item.data-table-select': (arg: Omit<ItemKeySlot<any>, "value">) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'item.data-table-expand': (arg: Omit<ItemKeySlot<any>, "value">) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; item: (arg: { index: number; item: any; internalItem: DataTableItem<any>; isExpanded: (item: DataTableItem<any>) => boolean; toggleExpand: (item: DataTableItem<any>) => void; isSelected: (items: SelectableItem | SelectableItem[]) => boolean; toggleSelect: (item: SelectableItem) => void; } & { columns: InternalDataTableHeader[]; } & { props: Record<string, any>; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; loading: () => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'group-header': (arg: GroupHeaderSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'no-data': () => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'expanded-row': (arg: ItemSlot<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; headers: (arg: HeadersSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; loader: (arg: LoaderSlotProps) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'header.data-table-select': (arg: { column: InternalDataTableHeader; selectAll: (value: boolean) => void; isSorted: (column: InternalDataTableHeader) => boolean; toggleSort: (column: InternalDataTableHeader) => void; sortBy: readonly SortItem[]; someSelected: boolean; allSelected: boolean; getSortIcon: (column: InternalDataTableHeader) => IconValue; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'header.data-table-expand': (arg: { column: InternalDataTableHeader; selectAll: (value: boolean) => void; isSorted: (column: InternalDataTableHeader) => boolean; toggleSort: (column: InternalDataTableHeader) => void; sortBy: readonly SortItem[]; someSelected: boolean; allSelected: boolean; getSortIcon: (column: InternalDataTableHeader) => IconValue; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; default: (arg: VDataTableSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; colgroup: (arg: VDataTableSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; top: (arg: VDataTableSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; body: (arg: VDataTableSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; tbody: (arg: VDataTableSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; thead: (arg: VDataTableSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; tfoot: (arg: VDataTableSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; bottom: (arg: VDataTableSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'body.prepend': (arg: VDataTableSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'body.append': (arg: VDataTableSlotProps<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'footer.prepend': () => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; }>>, { P: {}; B: {}; D: {}; C: {}; M: {}; Defaults: {}; }, { page: string | number; style: vue.StyleValue; expanded: readonly string[]; tag: string; sticky: boolean; noDataText: string; loadingText: string; itemsPerPageText: string; sortBy: readonly SortItem[]; pageText: string; density: Density; valueComparator: typeof deepEqual; nextIcon: string; prevIcon: string; selectStrategy: "all" | "page" | "single"; returnObject: boolean; filterMode: FilterMode; noFilter: boolean; hideNoData: boolean; hover: boolean; multiSort: boolean; mustSort: boolean; groupBy: readonly SortItem[]; showSelect: boolean; expandOnClick: boolean; showExpand: boolean; itemsPerPage: string | number; firstIcon: string; lastIcon: string; firstPageLabel: string; prevPageLabel: string; nextPageLabel: string; lastPageLabel: string; itemsPerPageOptions: readonly (number | { title: string; value: number; })[]; showCurrentPage: boolean; sortAscIcon: IconValue; sortDescIcon: IconValue; fixedHeader: boolean; fixedFooter: boolean; } & { search?: string | undefined; height?: string | number | undefined; width?: string | number | undefined; color?: string | undefined; loading?: string | boolean | undefined; class?: any; headers?: readonly { readonly key?: (string & {}) | "data-table-group" | "data-table-select" | "data-table-expand" | undefined; readonly value?: SelectItemKey; readonly title?: string | undefined; readonly fixed?: boolean | undefined; readonly align?: "center" | "end" | "start" | undefined; readonly width?: string | number | undefined; readonly minWidth?: string | undefined; readonly maxWidth?: string | undefined; readonly headerProps?: { readonly [x: string]: any; } | undefined; readonly cellProps?: ((data: Pick<ItemKeySlot<any>, "index" | "item" | "value" | "internalItem">) => Record<string, any>) | { readonly [x: string]: any; } | undefined; readonly sortable?: boolean | undefined; readonly sort?: DataTableCompareFunction<any> | undefined; readonly sortRaw?: DataTableCompareFunction<any> | undefined; readonly filter?: FilterFunction | undefined; readonly children?: readonly any[] | undefined; }[] | undefined; theme?: string | undefined; customFilter?: FilterFunction | undefined; customKeyFilter?: FilterKeyFunctions | undefined; filterKeys?: FilterKeys | undefined; customKeySort?: Record<string, DataTableCompareFunction> | undefined; headerProps?: Record<string, any> | undefined; } & { "onUpdate:sortBy"?: ((value: any) => any) | undefined; "onUpdate:groupBy"?: ((value: any) => any) | undefined; "onUpdate:expanded"?: ((value: any) => any) | undefined; "onUpdate:page"?: ((value: number) => any) | undefined; "onUpdate:itemsPerPage"?: ((value: number) => any) | undefined; "onUpdate:options"?: ((value: any) => any) | undefined; "onUpdate:currentItems"?: ((value: any) => any) | undefined; }, {}, {}, {}, {}, { page: string | number; style: vue.StyleValue; expanded: readonly string[]; tag: string; sticky: boolean; noDataText: string; loadingText: string; itemsPerPageText: string; sortBy: readonly SortItem[]; pageText: string; density: Density; valueComparator: typeof deepEqual; nextIcon: string; prevIcon: string; selectStrategy: "all" | "page" | "single"; returnObject: boolean; filterMode: FilterMode; noFilter: boolean; hideNoData: boolean; hover: boolean; multiSort: boolean; mustSort: boolean; groupBy: readonly SortItem[]; showSelect: boolean; expandOnClick: boolean; showExpand: boolean; itemsPerPage: string | number; firstIcon: string; lastIcon: string; firstPageLabel: string; prevPageLabel: string; nextPageLabel: string; lastPageLabel: string; itemsPerPageOptions: readonly (number | { title: string; value: number; })[]; showCurrentPage: boolean; sortAscIcon: IconValue; sortDescIcon: IconValue; fixedHeader: boolean; fixedFooter: boolean; }>; __isFragment?: undefined; __isTeleport?: undefined; __isSuspense?: undefined; } & vue.ComponentOptionsBase<{ page: string | number; style: vue.StyleValue; expanded: readonly string[]; tag: string; sticky: boolean; noDataText: string; loadingText: string; itemsPerPageText: string; sortBy: readonly SortItem[]; pageText: string; density: Density; valueComparator: typeof deepEqual; nextIcon: string; prevIcon: string; selectStrategy: "all" | "page" | "single"; returnObject: boolean; filterMode: FilterMode; noFilter: boolean; hideNoData: boolean; hover: boolean; multiSort: boolean; mustSort: boolean; groupBy: readonly SortItem[]; showSelect: boolean; expandOnClick: boolean; showExpand: boolean; itemsPerPage: string | number; firstIcon: string; lastIcon: string; firstPageLabel: string; prevPageLabel: string; nextPageLabel: string; lastPageLabel: string; itemsPerPageOptions: readonly (number | { title: string; value: number; })[]; showCurrentPage: boolean; sortAscIcon: IconValue; sortDescIcon: IconValue; fixedHeader: boolean; fixedFooter: boolean; } & { search?: string | undefined; height?: string | number | undefined; width?: string | number | undefined; color?: string | undefined; loading?: string | boolean | undefined; class?: any; headers?: readonly { readonly key?: (string & {}) | "data-table-group" | "data-table-select" | "data-table-expand" | undefined; readonly value?: SelectItemKey; readonly title?: string | undefined; readonly fixed?: boolean | undefined; readonly align?: "center" | "end" | "start" | undefined; readonly width?: string | number | undefined; readonly minWidth?: string | undefined; readonly maxWidth?: string | undefined; readonly headerProps?: { readonly [x: string]: any; } | undefined; readonly cellProps?: ((data: Pick<ItemKeySlot<any>, "index" | "item" | "value" | "internalItem">) => Record<string, any>) | { readonly [x: string]: any; } | undefined; readonly sortable?: boolean | undefined; readonly sort?: DataTableCompareFunction<any> | undefined; readonly sortRaw?: DataTableCompareFunction<any> | undefined; readonly filter?: FilterFunction | undefined; readonly children?: readonly any[] | undefined; }[] | undefined; theme?: string | undefined; customFilter?: FilterFunction | undefined; customKeyFilter?: FilterKeyFunctions | undefined; filterKeys?: FilterKeys | undefined; customKeySort?: Record<string, DataTableCompareFunction> | undefined; headerProps?: Record<string, any> | undefined; } & { "onUpdate:sortBy"?: ((value: any) => any) | undefined; "onUpdate:groupBy"?: ((value: any) => any) | undefined; "onUpdate:expanded"?: ((value: any) => any) | undefined; "onUpdate:page"?: ((value: number) => any) | undefined; "onUpdate:itemsPerPage"?: ((value: number) => any) | undefined; "onUpdate:options"?: ((value: any) => any) | undefined; "onUpdate:currentItems"?: ((value: any) => any) | undefined; }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{ 'update:modelValue': (value: any[]) => boolean; 'update:page': (value: number) => boolean; 'update:itemsPerPage': (value: number) => boolean; 'update:sortBy': (value: any) => boolean; 'update:options': (value: any) => boolean; 'update:groupBy': (value: any) => boolean; 'update:expanded': (value: any) => boolean; 'update:currentItems': (value: any) => boolean; }, "$children" | "v-slot:default" | "v-slots" | "items" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:item" | "itemValue" | "v-slot:no-data" | "cellProps" | "itemSelectable" | "rowProps" | "v-slot:headers" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row" | "v-slot:top" | "v-slot:bottom" | "v-slot:body" | "v-slot:colgroup" | "v-slot:tbody" | "v-slot:tfoot" | "v-slot:thead" | "v-slot:body.prepend" | "v-slot:body.append" | "v-slot:footer.prepend">, string, { page: string | number; style: vue.StyleValue; expanded: readonly string[]; tag: string; sticky: boolean; noDataText: string; loadingText: string; itemsPerPageText: string; sortBy: readonly SortItem[]; pageText: string; density: Density; valueComparator: typeof deepEqual; nextIcon: string; prevIcon: string; selectStrategy: "all" | "page" | "single"; returnObject: boolean; filterMode: FilterMode; noFilter: boolean; hideNoData: boolean; hover: boolean; multiSort: boolean; mustSort: boolean; groupBy: readonly SortItem[]; showSelect: boolean; expandOnClick: boolean; showExpand: boolean; itemsPerPage: string | number; firstIcon: string; lastIcon: string; firstPageLabel: string; prevPageLabel: string; nextPageLabel: string; lastPageLabel: string; itemsPerPageOptions: readonly (number | { title: string; value: number; })[]; showCurrentPage: boolean; sortAscIcon: IconValue; sortDescIcon: IconValue; fixedHeader: boolean; fixedFooter: boolean; }, {}, string, vue.SlotsType<Partial<{ [x: `item.${string}`]: (arg: ItemKeySlot<any>) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; [x: `header.${string}`]: (arg: { column: InternalDataTableHeader; selectAll: (value: boolean) => void; isSorted: (column: InternalDataTableHeader) => boolean; toggleSort: (column: InternalDataTableHeader) => void; sortBy: readonly SortItem[]; someSelected: boolean; allSelected: boolean; getSortIcon: (column: InternalDataTableHeader) => IconValue; }) => vue.VNode<vue.RendererNode, vue.RendererElement, { [key: string]: any; }>[]; 'data-tab