import { ComponentOptionsMixin } from 'vue'; import { ComponentProvideOptions } from 'vue'; import { ComputedRef } from 'vue'; import { DefineComponent } from 'vue'; import { ExtractPropTypes } from 'vue'; import { InjectionKey } from 'vue'; import { PropType } from 'vue'; import { PublicProps } from 'vue'; import { Ref } from 'vue'; declare type __VLS_NonUndefinedable = T extends undefined ? never : T; declare type __VLS_Prettify = { [K in keyof T]: T[K]; } & {}; declare type __VLS_TypePropsToRuntimeProps = { [K in keyof T]-?: {} extends Pick ? { type: PropType<__VLS_NonUndefinedable>; } : { type: PropType; required: true; }; }; declare type __VLS_WithDefaults = { [K in keyof Pick]: K extends keyof D ? __VLS_Prettify : P[K]; }; declare type __VLS_WithTemplateSlots = T & { new (): { $slots: S; }; }; /** * Miscellaneous data that is not related to pagination, sorting, or searching. * TODO: merge all DataView injections into one. https://leaflink.atlassian.net/browse/STASH-507 */ export declare const DATA_VIEW_INJECTION: InjectionWithDefaults; export declare interface DataViewInjection { currentPage: ComputedRef; /** Optional override for the next button disabled state */ isPaginateNextDisabled: ComputedRef; isPaginationEnabled: ComputedRef; pageCount: ComputedRef; pageSize: ComputedRef; totalDataCount: ComputedRef; /** Updates the DataView internal state with the given page */ setPage: SetPage; /** Updates the DataView internal state with the previous page */ goPrevPage: GoPrevPage; /** Updates the DataView internal state with the next page */ goNextPage: GoNextPage; currentSortId: ComputedRef; currentSortOrder: ComputedRef; /** Updates the DataView internal state with the given sortId */ updateCurrentSort: UpdateCurrentSort; currentSearch: ComputedRef; /** Updates the DataView internal state with the given searchTerm */ updateCurrentSearch: UpdateCurrentSearch; /** * The DataView's padding; the default value is "comfortable". On small screens, the density will always be "compact". */ density: ComputedRef; /** * Defines if a DataView has a Toolbar rendered. This prop is updated when DataViewToolbar exists and is mounted. */ hasToolbar?: Ref; /** * Enables certain loading indicators to be displayed within the DataView. */ isLoading?: ComputedRef; /** * Enables certain empty states to be displayed within the DataView. */ isEmpty?: ComputedRef; /** * Allows Table to control whether or not a DataViewToolbar should show a checkmark */ isSelectable?: Ref; /** * Whether or not the DataView is rendered within a Module; the value is inferred based on being * able to inject details from Module. * * Note: This is sent to DataView child components so they only need to worry about interfacing * with the DataViewInjection API. */ isWithinModule: ComputedRef; /** * The DataView's variant; the default value is undefined. */ variant: ComputedRef; } export declare interface DataViewProps { /** * Can be used to provide the initial page. * Also, it can be used to control the active page with `v-model:current-page="myPage"`. */ currentPage?: number; /** * Can be used to set the initial search term. * Also, it can be used to control the active search term with `v-model:current-search="mySearchTerm"`. */ currentSearch?: string; /** * Can be used to provide the initial sort order. * Also, it can be used to control the active sort order with `v-model:current-sort="mySortOrder"`. */ currentSort?: SortValue; /** * A list of records. If pagination is enabled, `data` must be only the current page of records. */ data?: object[]; /** * Controls the DataView's padding; the default value is "comfortable". On small screens, "compact" density is applied regardless of this prop's value. */ density?: SpacingDensities; /** * The number of records to display per page. */ pageSize?: number; /** * Opt-out of displaying pagination. Hides the pagination buttons and page stats. */ disablePagination?: boolean; /** * Hides the bottom pagination without disabling the pagination from the toolbar */ hideBottomPagination?: boolean; /** * The total number of records available. * Used to auto-enable pagination when results exist. * Use `Infinity` for activating 'n of many' pagination * DataView does not paginate data for you; instead, `props.data` should always show * the current page of results. */ totalDataCount?: number; /** * Whether there is a next page of data or not as informed by the server. * This only applies when`totalDataCount="Infinity"` to determine if the "Next" pagination button should be disabled. */ hasNextPage?: boolean; /** * DataView variant. The default value is `undefined`. Will default to `table` when used within * a ``. */ variant?: DataViewVariants; isLoading?: boolean; } export declare enum DataViewVariant { Table = "table" } export declare type DataViewVariants = `${DataViewVariant}`; declare const _default: __VLS_WithTemplateSlots, { currentPage: number; currentSearch: undefined; currentSort: undefined; data: () => never[]; density: string; pageSize: number; disablePagination: boolean; totalDataCount: number; hasNextPage: undefined; hideBottomPagination: boolean; variant: undefined; }>>, { page: ComputedRef; pageSize: ComputedRef; setPage: SetPage; goPrevPage: GoPrevPage; goNextPage: GoNextPage; ordering: ComputedRef; updateCurrentSort: UpdateCurrentSort; search: ComputedRef; updateCurrentSearch: UpdateCurrentSearch; filters: ComputedRef; updateCurrentFilters: UpdateCurrentFilters; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, { update: (state: UpdateEvent) => void; "update:currentFilters": (newFilters: object) => void; "update:currentPage": (page: number, pageSize: number) => void; "update:currentSearch": (searchTerm?: string | undefined) => void; "update:currentSort": (payload?: string | undefined) => void; }, string, PublicProps, Readonly, { currentPage: number; currentSearch: undefined; currentSort: undefined; data: () => never[]; density: string; pageSize: number; disablePagination: boolean; totalDataCount: number; hasNextPage: undefined; hideBottomPagination: boolean; variant: undefined; }>>> & Readonly<{ onUpdate?: ((state: UpdateEvent) => any) | undefined; "onUpdate:currentFilters"?: ((newFilters: object) => any) | undefined; "onUpdate:currentPage"?: ((page: number, pageSize: number) => any) | undefined; "onUpdate:currentSearch"?: ((searchTerm?: string | undefined) => any) | undefined; "onUpdate:currentSort"?: ((payload?: string | undefined) => any) | undefined; }>, { data: object[]; variant: "table"; currentPage: number; pageSize: number; totalDataCount: number; currentSearch: string; density: "compact" | "comfortable"; currentSort: string; disablePagination: boolean; hideBottomPagination: boolean; hasNextPage: boolean; }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, { default?(_: { currentPage: number; currentSortId: string | undefined; currentSortOrder: SortOrder | undefined; data: object[]; goPrevPage: GoPrevPage; goNextPage: GoNextPage; pageCount: number; setPage: SetPage; totalDataCount: number; updateCurrentSort: UpdateCurrentSort; updateCurrentSearch: UpdateCurrentSearch; }): any; }>; export default _default; export declare const DEFAULT_PAGE_SIZE = 12; /** * Receives a SortValue (ex: `'-product_name'`) and returns an object with a `id` and an `order`. */ export declare function deserializeSortValue(sort: SortValue): SortValueDeserialized; /** * Given new and old sorting data, it returns the next sorting value using the following sorting cycle: * * "unsorted --> ascending --> descending --> unsorted" */ export declare function getNextSort({ newId, newOrder, oldId, oldOrder }: GetNextSortArgs): SortValue | undefined; declare interface GetNextSortArgs { newId: SortId | undefined; newOrder?: SortOrder; oldId?: SortId; oldOrder?: SortOrder; } /** Updates the DataView internal state with the next page */ export declare type GoNextPage = (options?: { /** If true, emits the `update:currentPage` and `update` events from DataView */ shouldEmit?: boolean; }) => void; /** Updates the DataView internal state with the previous page */ export declare type GoPrevPage = (options?: { /** If true, emits the `update:currentPage` and `update` events from DataView */ shouldEmit?: boolean; }) => void; declare interface Injection { key: InjectionKey; } declare interface InjectionWithDefaults extends Injection { defaults: T; } /** * Receives an object with a `id` and an `order` and returns a SortValue (ex: `'-product_name'`). */ export declare function serializeSortValue({ id, order }: SortValueDeserialized): SortValue; /** Updates the DataView internal state with the given page */ export declare type SetPage = (page: number, options?: { /** If true, emits the `update:currentPage` and `update` events from DataView */ shouldEmit?: boolean; }) => void; /** * The SortValue with its leading hyphen/dash removed */ export declare type SortId = string; /** * Determined by whether or not there is a leading hyphen/dash in the SortValue */ export declare type SortOrder = 'asc' | 'desc'; /** * A unique id for a sorting strategy. If the order is descending, it must begin with "-" (a hyphen/dash). * * Ex: `'product_name'` if ascending or `'-product_name'` if descending */ export declare type SortValue = string; /** * A deserialized instance of a `SortValue`. */ export declare type SortValueDeserialized = { id: SortId; order: SortOrder; }; declare type SpacingDensities = `${SpacingDensity}`; /** * For controlling properties like "padding" and "margin" within and between components. */ declare enum SpacingDensity { Compact = "compact", Comfortable = "comfortable" } /** Updates the DataView internal state with the given filter values */ export declare type UpdateCurrentFilters = (newFilters: FilterValues, options?: { /** If true, emits the `update:currentSearch` and `update` events from DataView */ shouldEmit?: boolean; }) => void; /** Updates the DataView internal state with the given searchTerm */ export declare type UpdateCurrentSearch = (searchTerm?: string, options?: { /** If true, emits the `update:currentSearch` and `update` events from DataView */ shouldEmit?: boolean; }) => void; /** Updates the DataView internal state with the given sortId */ export declare type UpdateCurrentSort = (sortId: SortId | undefined, options?: { sortOrder?: SortOrder; /** If true, emits the `update:currentSort` and `update` events from DataView */ shouldEmit?: boolean; }) => void; export declare interface UpdateEvent { page?: number; pageSize?: number; ordering?: string; search?: string; filters?: FilterValues; } export { }