maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
325 lines (324 loc) • 9.58 kB
TypeScript
import { HTMLAttributes, InjectionKey, Ref, ThHTMLAttributes } from 'vue';
import { MazColor, MazSize } from './types';
import { MazUiTranslationsNestedSchema } from '@maz-ui/translations';
import { DeepPartial } from '@maz-ui/utils/ts-helpers/DeepPartial';
export interface MazTableHeadersEnriched {
label: string;
key?: string;
sortable?: boolean;
hidden?: boolean;
srOnly?: boolean;
width?: string;
maxWidth?: string;
classes?: ThHTMLAttributes['class'];
scope?: ThHTMLAttributes['scope'];
align?: ThHTMLAttributes['align'];
rowspan?: ThHTMLAttributes['rowspan'];
colspan?: ThHTMLAttributes['colspan'];
headers?: ThHTMLAttributes['headers'];
}
export type MazTableRow<T extends MazTableRow<T>> = Record<string, any> & {
selected?: boolean;
action?: (row: T) => unknown;
classes?: HTMLAttributes['class'];
};
export type MazTableHeader = string | MazTableHeadersEnriched;
export interface MazTableProps<T extends MazTableRow<T>> {
/**
* CSS class of the table element
* @type {HTMLAttributes['class']}
*/
tableClass?: HTMLAttributes['class'];
/**
* CSS style of the table element
* @type {HTMLAttributes['style']}
*/
tableStyle?: HTMLAttributes['style'];
/**
* List of selected rows
* @type {(string | boolean | number)[]}
* @model
*/
modelValue?: (string | boolean | number)[];
/**
* Size of the table
* @type {MazSize}
* @values xl, lg, md, sm, xs, mini
* @default md
*/
size?: MazSize;
/**
* Size of the search inputs
* @type {MazSize}
* @values xl, lg, md, sm, xs, mini
*/
inputSize?: MazSize;
/**
* Title of the table
* @type {string}
*/
title?: string;
/**
* Headers of the table
* @type {MazTableHeader[]}
*/
headers?: MazTableHeader[];
/**
* Enable sort feature on all columns
* @type {boolean}
* @default false
*/
sortable?: boolean;
/**
* Align all headers
* @type {string}
* @default left
*/
headersAlign?: ThHTMLAttributes['align'];
/**
* Rows of the table
* @type {T[]}
*/
rows?: T[];
/**
* Add hover effect on rows
* @type {boolean}
* @default false
*/
hoverable?: boolean;
/**
* Enable search feature in table header
* @type {boolean}
* @default false
*/
search?: boolean;
/**
* Disable search in rows - useful to filter data yourself or make search request to server
* @type {boolean}
* @default false
*/
hideSearchInRow?: boolean;
/**
* Disable search by column (remove select input "search by")
* @type {boolean}
* @default false
*/
hideSearchBy?: boolean;
/**
* Search query in input
* @type {string}
* @model
*/
searchQuery?: string;
/**
* Add background color to odd rows
* @type {boolean}
* @default false
*/
backgroundOdd?: boolean;
/**
* Add background color to even rows
* @type {boolean}
* @default false
*/
backgroundEven?: boolean;
/**
* Add shadow to the table
* @type {boolean}
* @default false
*/
elevation?: boolean;
/**
* add divider between rows
* @type {boolean}
* @default false
*/
divider?: boolean;
/**
* Caption of the table
* @type {string}
*/
caption?: string;
/**
* Caption side
* @type {string}
* @values top, bottom
* @default bottom
*/
captionSide?: 'top' | 'bottom';
/**
* Add pagination in table footer
* @type {boolean}
* @default false
*/
pagination?: boolean;
/**
* Current page of pagination
* @type {number}
* @model
* @default 1
*/
page?: number;
/**
* Number of items per page
* @type {number}
* @model
* @default 20
*/
pageSize?: number;
/**
* Total number of pages
* @type {number}
*/
totalPages?: number;
/**
* Don't paginate rows - useful to make pagination request with your server
* @type {boolean}
* @default true
*/
paginateRows?: boolean;
/**
* Total number of items
* @type {number}
*/
totalItems?: number;
/**
* Loading state
* @type {boolean}
* @default false
*/
loading?: boolean;
/**
* Enable selection of rows
* @type {boolean}
* @default false
*/
selectable?: boolean;
/**
* Enable selection of rows - key of the selected row
* @type {string}
*/
selectedKey?: string;
/**
* Table layout
* @type {string}
* @values auto, fixed
*/
tableLayout?: 'auto' | 'fixed';
/**
* Color of the component
* @type {MazColor}
* @default primary
*/
color?: MazColor;
/**
* Translations of the table
* @type {DeepPartial<MazUiTranslationsNestedSchema['table']>}
* @default Translations from @maz-ui/translations
*/
translations?: DeepPartial<MazUiTranslationsNestedSchema['table']>;
/**
* Size radius of the component's border
* @type {string}
* @values none, sm, md, lg, xl, full
* @default lg
*/
roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
/**
* Enable scrollable on table
* @type {boolean}
* @default false
*/
scrollable?: boolean;
}
export interface MazTableProvide {
size: Ref<MazSize>;
hoverable: Ref<boolean>;
backgroundEven: Ref<boolean>;
backgroundOdd: Ref<boolean>;
}
export declare const mazTableKey: InjectionKey<MazTableProvide>;
declare const _default: <T extends MazTableRow<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
readonly "onUpdate:model-value"?: ((value: (string | number | boolean | MazTableRow<T>)[] | undefined) => any) | undefined;
readonly "onUpdate:search-query"?: ((searchQuery: string | undefined) => any) | undefined;
readonly "onUpdate:page"?: ((page: number) => any) | undefined;
readonly "onUpdate:page-size"?: ((pageSize: number) => any) | undefined;
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:model-value" | "onUpdate:search-query" | "onUpdate:page" | "onUpdate:page-size"> & MazTableProps<T> & Partial<{}>> & import('vue').PublicProps;
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
attrs: any;
slots: Partial<Record<`header-label-${string}`, (_: {
header: {
label: string;
key?: string | undefined;
sortable?: boolean | undefined;
hidden?: boolean | undefined;
srOnly?: boolean | undefined;
width?: string | undefined;
maxWidth?: string | undefined;
classes?: ThHTMLAttributes["class"];
scope?: string | undefined;
align?: "justify" | "center" | "left" | "right" | "char" | undefined;
rowspan?: (string | number) | undefined;
colspan?: (string | number) | undefined;
headers?: string | undefined;
thHeaders?: string | undefined;
sorted?: "ASC" | "DESC" | undefined;
};
label: string;
}) => any>> & Partial<Record<`cell-${string}`, (_: {
row: T;
value: any;
}) => any>> & {
title?(_: {}): any;
caption?(_: {}): any;
thead?(_: {}): any;
header?(_: {
header: {
label: string;
key?: string | undefined;
sortable?: boolean | undefined;
hidden?: boolean | undefined;
srOnly?: boolean | undefined;
width?: string | undefined;
maxWidth?: string | undefined;
classes?: ThHTMLAttributes["class"];
scope?: string | undefined;
align?: "justify" | "center" | "left" | "right" | "char" | undefined;
rowspan?: (string | number) | undefined;
colspan?: (string | number) | undefined;
headers?: string | undefined;
thHeaders?: string | undefined;
sorted?: "ASC" | "DESC" | undefined;
};
label: string;
}): any;
'actions-header'?(_: {}): any;
default?(_: {}): any;
select?(_: {
row: T;
selected: boolean | undefined;
}): any;
cell?(_: {
row: T;
value: any;
}): any;
actions?(_: {
row: T;
}): any;
'no-results'?(_: {}): any;
'no-results-text'?(_: {}): any;
};
emit: {
(event: "update:model-value", value: (MazTableRow<T> | string | number | boolean)[] | undefined): void;
(event: "update:search-query", searchQuery: string | undefined): void;
(event: "update:page", page: number): void;
(event: "update:page-size", pageSize: number): void;
};
}>) => import('vue').VNode & {
__ctx?: Awaited<typeof __VLS_setup>;
};
export default _default;
type __VLS_PrettifyLocal<T> = {
[K in keyof T]: T[K];
} & {};