@agendize/design-system
Version:
Agendize web design system
376 lines • 15 kB
TypeScript
import { ListItemAppearAnimationType, ListItemBackgroundType, ListItemHoverAnimationType, ListItemProperties } from "../list-item/viewModel";
import { ButtonColor } from "../../action/button/viewModel";
import { Ref } from "vue";
export interface ListItemRow extends ListItemProperties {
checked: boolean;
}
export interface ListCustomAction {
title?: string;
ariaLabel: string;
icon?: string;
action: Function;
color?: ButtonColor;
}
export declare const BasicSearchModeValues: string[];
export type BasicSearchMode = typeof BasicSearchModeValues[number];
export interface ListItemSearchOptions {
basicSearch?: {
filter?: ListItemFilter;
placeholder: string;
ariaLabel: string;
button?: {
icon?: string;
label?: string;
ariaLabel: string;
};
mode?: BasicSearchMode;
};
quickFilters?: {
exclusive?: boolean;
defaultAllFilter?: boolean;
allFilterLabel?: string;
filters: {
id: string;
title: string;
ariaLabel: string;
iconLeft?: string;
iconRight?: string;
default?: boolean;
visible?: boolean;
filter?: ListItemFilter;
}[];
};
advancedFilters?: {
filter: ListItemFilter;
};
emptyState?: {
icon?: string;
subTitle?: string;
};
}
export interface ListItemSearchFilterData {
basic?: string;
quickFilters?: Map<string, boolean>;
orderBy?: string;
pageSize?: number;
pageNumber?: number;
}
export declare const PageSizeValues: number[];
export type PageSize = typeof PageSizeValues[number];
export declare const PaginationModeValues: string[];
export type PaginationMode = typeof PaginationModeValues[number];
export declare const BodyOverflowValues: string[];
export type BodyOverflow = typeof BodyOverflowValues[number];
export declare enum Selectable {
SIMPLE = 0,
MULTIPLE = 1,
SELECT = 2,
NONE = 3
}
export interface ListProperties {
id?: string;
items?: ListItemProperties[];
fetchMoreItems?: ListItemFetch;
fetchItems?: ListItemFetch;
bodyOverflow?: BodyOverflow;
selectable?: Selectable;
stopCheckBoxPropagation?: boolean;
itemBordered?: boolean;
itemDivider?: boolean;
hoverItemAnimation?: ListItemHoverAnimationType;
persistence?: boolean;
searchOption?: ListItemSearchOptions;
customAction?: ListCustomAction;
deleteLabel?: string;
deleteIcon?: string;
pageSize?: PageSize;
paginationMode?: PaginationMode;
itemBackground?: ListItemBackgroundType;
title?: string;
orderByDefault?: string;
}
export declare class ListDefaultProperties implements ListProperties {
selectable: Selectable;
itemBordered: boolean;
itemDivider: boolean;
hoverItemAnimation: string;
persistence: boolean;
paginationMode: string;
bodyOverflow: string;
}
export interface ListItemFetchResponse {
items?: ListItemProperties[];
totalItems?: number;
}
export declare type ListItemFetch = (data?: ListItemSearchFilterData, page?: number, callback?: Function) => Promise<ListItemProperties[] | ListItemFetchResponse>;
export type ListItemFilter = (item: ListItemProperties, data?: ListItemSearchFilterData, callback?: Function) => boolean;
export declare function StructuredListViewModel(props: ListProperties, emits: any, searchInput: Ref, localList: Ref, overload?: {
filterFunction?: (items: ListItemProperties[]) => ListItemProperties[];
}): {
loading: Ref<boolean, boolean>;
scrollLoading: Ref<boolean, boolean>;
page: Ref<number, number>;
pageSize: Ref<number | undefined, number | undefined>;
totalItems: Ref<number, number>;
changePage: (newPage: number) => void;
searchBarInput: Ref<string | undefined, string | undefined>;
quickFilters: Ref<Map<string, boolean> & Omit<Map<string, boolean>, keyof Map<any, any>>, Map<string, boolean> | (Map<string, boolean> & Omit<Map<string, boolean>, keyof Map<any, any>>)>;
allItems: Ref<{
id?: string | undefined;
title?: string | undefined;
subTitle?: string | undefined;
ariaLabel: string;
secondSubTitle?: string | undefined;
hasBorder?: boolean | undefined;
hasPadding?: boolean | undefined;
selectable?: Selectable | undefined;
checked?: boolean | undefined;
clickable?: boolean | undefined;
object?: any;
type?: string | undefined;
hoverAnimation?: ListItemHoverAnimationType | undefined;
appearAnimation?: ListItemAppearAnimationType | undefined;
background?: ListItemBackgroundType | undefined;
endSlotPosition?: "center" | "start" | "end" | undefined;
disabled?: boolean | undefined;
loading?: boolean | undefined;
index?: number | undefined;
titleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
subtitleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
secondSubtitleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
tags?: {
title: string;
}[] | undefined;
applyTittleAttribute?: boolean | undefined;
applyTitleAsTooltip?: boolean | undefined;
}[], ListItemProperties[] | {
id?: string | undefined;
title?: string | undefined;
subTitle?: string | undefined;
ariaLabel: string;
secondSubTitle?: string | undefined;
hasBorder?: boolean | undefined;
hasPadding?: boolean | undefined;
selectable?: Selectable | undefined;
checked?: boolean | undefined;
clickable?: boolean | undefined;
object?: any;
type?: string | undefined;
hoverAnimation?: ListItemHoverAnimationType | undefined;
appearAnimation?: ListItemAppearAnimationType | undefined;
background?: ListItemBackgroundType | undefined;
endSlotPosition?: "center" | "start" | "end" | undefined;
disabled?: boolean | undefined;
loading?: boolean | undefined;
index?: number | undefined;
titleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
subtitleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
secondSubtitleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
tags?: {
title: string;
}[] | undefined;
applyTittleAttribute?: boolean | undefined;
applyTitleAsTooltip?: boolean | undefined;
}[]>;
selectAll: Ref<boolean, boolean>;
filteredItemsRow: Ref<{
checked: boolean;
id?: string | undefined;
title?: string | undefined;
subTitle?: string | undefined;
ariaLabel: string;
secondSubTitle?: string | undefined;
hasBorder?: boolean | undefined;
hasPadding?: boolean | undefined;
selectable?: Selectable | undefined;
clickable?: boolean | undefined;
object?: any;
type?: string | undefined;
hoverAnimation?: ListItemHoverAnimationType | undefined;
appearAnimation?: ListItemAppearAnimationType | undefined;
background?: ListItemBackgroundType | undefined;
endSlotPosition?: "center" | "start" | "end" | undefined;
disabled?: boolean | undefined;
loading?: boolean | undefined;
index?: number | undefined;
titleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
subtitleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
secondSubtitleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
tags?: {
title: string;
}[] | undefined;
applyTittleAttribute?: boolean | undefined;
applyTitleAsTooltip?: boolean | undefined;
}[], ListItemRow[] | {
checked: boolean;
id?: string | undefined;
title?: string | undefined;
subTitle?: string | undefined;
ariaLabel: string;
secondSubTitle?: string | undefined;
hasBorder?: boolean | undefined;
hasPadding?: boolean | undefined;
selectable?: Selectable | undefined;
clickable?: boolean | undefined;
object?: any;
type?: string | undefined;
hoverAnimation?: ListItemHoverAnimationType | undefined;
appearAnimation?: ListItemAppearAnimationType | undefined;
background?: ListItemBackgroundType | undefined;
endSlotPosition?: "center" | "start" | "end" | undefined;
disabled?: boolean | undefined;
loading?: boolean | undefined;
index?: number | undefined;
titleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
subtitleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
secondSubtitleProperties?: {
title?: string | undefined;
type?: ("primary" | "secondary") | undefined;
tooltipLabel?: string | undefined;
icon?: string | undefined;
nowrap?: boolean | undefined;
through?: boolean | undefined;
tooltip?: boolean | undefined;
twoLines?: boolean | undefined;
} | undefined;
tags?: {
title: string;
}[] | undefined;
applyTittleAttribute?: boolean | undefined;
applyTitleAsTooltip?: boolean | undefined;
}[]>;
hasStartSlot: import("vue").ComputedRef<boolean>;
hasEndSlot: import("vue").ComputedRef<boolean>;
hasCustomAction: import("vue").ComputedRef<boolean>;
hasBulkActionSlot: import("vue").ComputedRef<boolean>;
selectedCount: import("vue").ComputedRef<number>;
visibleSelectedCount: import("vue").ComputedRef<number>;
searchContext: import("vue").ComputedRef<ListItemSearchFilterData>;
searched: import("vue").ComputedRef<boolean>;
appearItemAnimation: import("vue").ComputedRef<string>;
hoverItemAnimation: import("vue").ComputedRef<string>;
hasQuickFilter: import("vue").ComputedRef<boolean>;
orderBy: Ref<string | undefined, string | undefined>;
triggerItemClicked: (e: MouseEvent | KeyboardEvent, item: ListItemRow) => void;
initDefaultQuickFilters: () => Map<string, boolean>;
quickFilterAction: (filterId: string, disabledIfAlreadyActive?: boolean) => void;
triggerFilter: () => void;
onBasicSearch: () => void;
onBasicSearchEnter: () => void;
onBasicSearchButton: () => void;
filter: () => void;
applyBasicFilter: (items: ListItemProperties[]) => ListItemProperties[];
applyQuickFilters: (items: ListItemProperties[]) => ListItemProperties[];
applyFiltersFunction: (item: ListItemProperties, filters?: (ListItemFilter | undefined)[]) => boolean;
applyFilters: (items?: ListItemProperties[]) => ListItemProperties[];
convertItemsAndFilter: (items?: ListItemProperties[], initialisation?: boolean) => ListItemRow[];
clearSelection: () => void;
checkAllUpdate: (value: boolean) => void;
loadAndFetch: (pageParam?: number) => void;
fetchOnScroll: () => void;
updateSelection: () => void;
focus: () => void;
changePageSize: (newPageSize: number) => void;
selectedRadioId: import("vue").WritableComputedRef<string, string>;
isLoading: (isLoading: boolean) => void;
};
//# sourceMappingURL=viewModel.d.ts.map