@dcodegroup-au/dsg-vue
Version:
Front-end Vue/Tailwind DSG for UntitledUI.
198 lines (197 loc) • 7.84 kB
TypeScript
import { AxiosResponse } from 'axios';
import { DsgTooltipProps } from '../Elements/DsgTooltip.vue';
/**
* ------------------------------------------------
* # Setup: Props/Variables
* ------------------------------------------------
*/
export interface DsgTableComponentQueryParams {
sort: string;
order: string;
page: string;
perPage: string;
}
export interface DsgTableCustomCss {
tableWrapper?: string;
thead?: string;
tbody?: string;
table?: string;
}
export interface DsgTableField {
field?: string;
title?: string;
name?: string;
titleClass?: string;
dataClass?: string;
visible?: boolean;
width?: string | null;
sortField?: string | null;
formatter?: Function | null;
selected?: boolean;
$_index?: number;
headerComponent?: string | Object;
/** Optional tooltip displayed next to the column header title */
tooltip?: DsgTooltipProps | null;
[key: string]: any;
}
export interface DsgTableHttpOptions {
params?: {
[key: string]: any;
};
signal?: AbortSignal;
}
export interface DsgTableComponentProp {
fields: Array<any>;
isDraggable?: boolean;
dragApi?: string;
loadOnStart?: boolean;
apiUrl?: string;
httpMethod?: "get" | "post";
reactiveApiUrl?: boolean;
apiMode?: boolean;
data?: Array<any> | null;
dataManager?: Function | null;
dataPath?: string;
tableLayout?: "fixed" | "auto";
paginationPath?: string;
queryParams?: DsgTableComponentQueryParams;
httpOptions?: {
[key: string]: any;
} | undefined;
hasDetailRow?: boolean;
showExpandDetail?: boolean;
/**
* Whether detail rows are expandable (toggled per row). When true, each row gets an
* expand/collapse toggle button and the detail row is only visible when expanded.
* When false (default), all detail rows are always visible if hasDetailRow is true.
*/
expandableRows?: boolean;
/**
* Whether to allow multiple rows to be expanded simultaneously.
* When false (default), expanding a row collapses the previously expanded row (accordion mode).
* When true, any number of rows can be expanded at the same time.
*/
expandMultiple?: boolean;
initialPage?: number;
firstPage?: number;
sortOrder?: Array<any>;
multiSort?: boolean;
tableHeight?: string | null;
multiSortKey?: string;
/**
* Row class - can be a string of CSS classes or a function that returns classes based on row data
* Function signature: (rowData: any, rowIndex: number) => string | string[] | Record<string, boolean>
* Examples:
* - String: "my-class another-class"
* - Function: (rowData, index) => rowData.held ? 'held-row' : 'normal-row'
* - Function: (rowData, index) => ({ 'held-row': rowData.held, 'urgent': rowData.priority === 'high' })
*/
rowClass?: string | Function;
detailRowComponent?: string | Object;
detailRowTransition?: string;
detailRowClass?: string | Function;
detailRowOptions?: Object;
trackBy?: string;
css?: DsgTableCustomCss;
minRows?: number;
noDataTemplate?: string;
showSortIcons?: boolean;
headerRows?: Array<any>;
transform?: Function | null;
sortParams?: Function | null;
fieldPrefix?: string;
eventPrefix?: string;
selectable?: boolean;
/** Custom CSS colour for the Shift+Hover range highlight background. Defaults to `var(--color-primary-50)`. */
shiftSelectHighlight?: string;
/** Custom CSS colour for the selected row background. Defaults to `var(--color-gray-50)`. */
selectedRowHighlight?: string;
replaceState?: boolean;
replaceStrategy?: "window" | "inertia";
}
type __VLS_Props = DsgTableComponentProp;
type __VLS_PublicProps = {
"filterParams"?: any;
"perPage"?: any;
} & __VLS_Props;
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: Partial<Record<string, (_: {
rowData: any;
rowIndex: number;
rowField: DsgTableField;
}) => any>> & {
tableHeader?(_: {
fields: DsgTableField[];
}): any;
'dsg-table-loading'?(_: {}): any;
'dsg-table-detail-row'?(_: {
rowData: any;
rowIndex: number;
options: Object;
isExpanded: boolean;
}): any;
'dsg-table-empty-result'?(_: {}): any;
'dsg-table-footer'?(_: {
fields: DsgTableField[];
data: any[] | null;
}): any;
};
refs: {
dsgTableBodyWrapper: HTMLDivElement;
};
rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
changePage: (page: "next" | "prev" | number) => void;
reload: () => void;
getData: () => any[] | null;
setData: (rows: any[] | null) => void;
setLoading: (loadingState: boolean) => void;
expandRow: (item: any) => void;
collapseRow: (item: any) => void;
toggleRowExpand: (item: any, itemIndex: number) => void;
expandAllRows: () => void;
collapseAllRows: () => void;
getExpandedRows: () => Set<any>;
isRowExpanded: (item: any) => boolean;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
"update:filterParams": (value: any) => any;
"update:perPage": (value: any) => any;
} & {
"dsg-table:loading": (loading: boolean) => any;
"dsg-table:loaded": () => any;
"dsg-table:load-success": (response: AxiosResponse<any, any, {}>) => any;
"dsg-table:load-error": (response: AxiosResponse<any, any, {}>) => any;
"dsg-table:pagination-data": (paginationData: any) => any;
"dsg-table:rows-selected": (rows: any) => any;
"dsg-table:row-clicked": (ev: Event, rowIndex: number, rowData: Record<string, any>) => any;
"dsg-table:row-hover": (ev: Event, rowIndex: number, rowData: Record<string, any>) => any;
"dsg-table:row-dblclick": (ev: Event, rowIndex: number, rowData: Record<string, any>) => any;
"dsg-table:row-expanded": (rowData: Record<string, any>, rowIndex: number) => any;
"dsg-table:row-collapsed": (rowData: Record<string, any>, rowIndex: number) => any;
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
"onDsg-table:loading"?: ((loading: boolean) => any) | undefined;
"onDsg-table:loaded"?: (() => any) | undefined;
"onDsg-table:load-success"?: ((response: AxiosResponse<any, any, {}>) => any) | undefined;
"onDsg-table:load-error"?: ((response: AxiosResponse<any, any, {}>) => any) | undefined;
"onDsg-table:pagination-data"?: ((paginationData: any) => any) | undefined;
"onDsg-table:rows-selected"?: ((rows: any) => any) | undefined;
"onDsg-table:row-clicked"?: ((ev: Event, rowIndex: number, rowData: Record<string, any>) => any) | undefined;
"onDsg-table:row-hover"?: ((ev: Event, rowIndex: number, rowData: Record<string, any>) => any) | undefined;
"onDsg-table:row-dblclick"?: ((ev: Event, rowIndex: number, rowData: Record<string, any>) => any) | undefined;
"onDsg-table:row-expanded"?: ((rowData: Record<string, any>, rowIndex: number) => any) | undefined;
"onDsg-table:row-collapsed"?: ((rowData: Record<string, any>, rowIndex: number) => any) | undefined;
"onUpdate:filterParams"?: ((value: any) => any) | undefined;
"onUpdate:perPage"?: ((value: any) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
dsgTableBodyWrapper: HTMLDivElement;
}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};