maz-ui

import type { Color, Size } from './types'; import { type HTMLAttributes, type Ref, type StyleValue, type ThHTMLAttributes } from 'vue'; export type { Color, Size } from './types'; export interface HeadersEnriched { 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 Row<T extends Row<T>> = Record<string, any> & { selected?: boolean; action?: (row: T) => unknown; classes?: HTMLAttributes['class']; }; export type Header = string | HeadersEnriched; export interface Translations { searchByAllLabel?: string; searchByPlaceholder?: string; searchPlaceholder?: string; paginationAllLabel?: string; noResults?: string; actionHeader?: string; paginationRowsPerPage?: string; paginationOf?: string; } export interface MazTableProps<T extends Row<T>> { /** class of the table element */ tableClass?: HTMLAttributes['class']; /** style of the table element */ tableStyle?: StyleValue; /** v-model of the table - list of selected rows */ modelValue?: (string | boolean | number)[]; /** * size of the table * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'` * @default `'md'` */ size?: Size; /** * Size of the search inputs * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'` */ inputSize?: Size; /** title of the table */ title?: string; /** headers of the table */ headers?: Header[]; /** allow sort feature to all columns */ sortable?: boolean; /** align all headers */ headersAlign?: ThHTMLAttributes['align']; /** rows of the table - type: `Record<string, string | boolean | number>[]` ; */ rows?: T[]; /** add hover effect on rows */ hoverable?: boolean; /** enable search feature into the table header */ search?: boolean; /** disabled search in rows - useful to filtering data yourself or make search request to server */ noSearchInRow?: boolean; /** placeholder of the search input */ searchPlaceholder?: string; /** Disabled search by column (remove select input "search by") */ noSearchBy?: boolean; /** placeholder of the search by select */ searchByPlaceholder?: string; /** label of the search by of all options */ searchByAllLabel?: string; /** search query in input */ searchQuery?: string; /** add background color to odd rows */ backgroundOdd?: boolean; /** add background color to even rows */ backgroundEven?: boolean; /** add shodow to the table */ elevation?: boolean; /** no divider between rows */ divider?: boolean; /** caption of the table */ caption?: string; /** * caption side * @values `'top' | 'bottom'` */ captionSide?: 'top' | 'bottom'; /** add pagination into the table footer */ pagination?: boolean; /** current page of pagination */ page?: number; /** number of items per page */ pageSize?: number; /** pages count */ totalPages?: number; /** label of the pagination all option */ paginationAllLabel?: string; /** no paginate rows - useful to make paginate request with your server */ noPaginateRows?: boolean; /** total number of items */ totalItems?: number; /** loading state */ loading?: boolean; /** Enable selection of rows */ selectable?: boolean; /** Enable selection of rows - key of the selected row */ selectedKey?: string; /** * table layout * @values `'auto' | 'fixed'` */ tableLayout?: 'auto' | 'fixed'; /** color of the loading bar */ color?: Color; /** * translations * @default `{ searchByAllLabel: 'All', searchByPlaceholder: 'Search by', searchPlaceholder: 'Search', paginationAllLabel: 'All', noResults: 'No results' }` * @type {Translations} */ translations?: Translations; /** * Size radius of the component's border * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'` * @default 'lg' */ roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'; /** * Enable scrollable on table * @default `false` */ scrollable?: boolean; } export interface MazTableProvide { size: Ref<Size>; hoverable: Ref<boolean>; backgroundEven: Ref<boolean>; backgroundOdd: Ref<boolean>; } export declare const mazTableKey = "maz-table"; declare const _default: <T extends Row<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 | Row<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"> & Partial<{}> & MazTableProps<T>> & 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?: ThHTMLAttributes["scope"]; align?: ThHTMLAttributes["align"]; rowspan?: ThHTMLAttributes["rowspan"]; colspan?: ThHTMLAttributes["colspan"]; headers?: ThHTMLAttributes["headers"]; thHeaders?: ThHTMLAttributes["headers"]; 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?: ThHTMLAttributes["scope"]; align?: ThHTMLAttributes["align"]; rowspan?: ThHTMLAttributes["rowspan"]; colspan?: ThHTMLAttributes["colspan"]; headers?: ThHTMLAttributes["headers"]; thHeaders?: ThHTMLAttributes["headers"]; 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: (Row<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<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }> & { __ctx?: Awaited<typeof __VLS_setup>; }; export default _default; type __VLS_PrettifyLocal<T> = { [K in keyof T]: T[K]; } & {};