@rkosafo/cai.components
Version:
This package is under development and not ready for public use.
955 lines (954 loc) • 30 kB
TypeScript
import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLDialogAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLTextareaAttributes, SVGAttributes } from 'svelte/elements';
import type { Middleware, Placement, Strategy } from '@floating-ui/dom';
import type { Component, Snippet } from 'svelte';
import type { BlurParams, FadeParams, FlyParams, ScaleParams, SlideParams, TransitionConfig } from 'svelte/transition';
import type { AlertVariants } from '../ui/alert/theme.js';
import type { AvatarVariants } from '../ui/avatar/theme.js';
import type { ButtonVariants, GradientButtonVariantes } from '../ui/buttons/theme.js';
import type { ClassValue } from 'clsx';
import type { DropdownItemVariants } from '../ui/dropdown/theme.js';
import type { FooterCopyrightVariants, FooterLinkVariants } from '../ui/footer/theme.js';
import type { IndicatorVariants } from '../ui/indicator/theme.js';
import type { ModalVariants } from '../ui/modal/theme.js';
import type { CloseButtonVariants } from '../utils/closeButton/theme.js';
import type { InputVariants } from '../forms/input/theme.js';
import type { LabelVariants } from '../forms/label/theme.js';
import type { ToolbarButtonVariants, ToolbarGroupVariants, ToolbarVariants } from '../ui/toolbar/theme.js';
import type { DatepickerVariants } from '../forms/datepicker/theme.js';
import type { Day } from 'date-fns';
import type { DrawerVariants } from '../ui/drawer/theme.js';
import type { TextareaVariants } from '../forms/textarea/theme.js';
import type { RadioVariants } from '../forms/radio/theme.js';
import type { CheckboxVariants } from '../forms/checkbox/theme.js';
import type { AccordionItemVariants, AccordionVariants } from '../ui/accordion/theme.js';
import type { TabsVaraints } from '../ui/tab/theme.js';
import type { ACTION_BUTTON_KINDS } from '../ui/buttons/ActionButton.svelte';
import type { TooltipVariants } from '../ui/tooltip/theme.js';
import type { ButtonToggleVariants } from '../forms/button-toggle/theme.js';
import type { SpeedDialButtonVariants, SpeedDialVariants } from '../ui/speedDial/theme.js';
export interface TFSidebarProps {
homeUrl: string;
logoUrl: string;
appShortName: string;
appName: string;
hideSidebar?: boolean;
menuItems: IMenuItem[];
logo?: Snippet;
isActiveFunction?: (val: IMenuItem) => boolean;
}
export interface IMenuItem {
title: string;
icon?: string;
path?: string;
items?: IMenuItem[] | null;
description?: string;
iconBg?: string;
iconColor?: string;
iconSize?: number;
}
export type ParamsType = FadeParams | BlurParams | FlyParams | SlideParams | ScaleParams | undefined;
export type TransitionFunc = (node: HTMLElement, params: ParamsType) => TransitionConfig;
export interface TriggeredToggleEvent extends ToggleEvent {
trigger: HTMLElement;
}
export interface PopperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onbeforetoggle' | 'ontoggle'> {
triggeredBy?: string;
triggerDelay?: number;
trigger?: 'hover' | 'click';
placement?: Placement;
arrow?: boolean;
arrowClass?: string;
offset?: number;
yOnly?: boolean;
strategy?: Strategy;
reference?: string;
middlewares?: Middleware[];
children: Snippet;
onbeforetoggle?: (ev: TriggeredToggleEvent) => void;
ontoggle?: (ev: TriggeredToggleEvent) => void;
transition?: TransitionFunc;
transitionParams?: ParamsType;
isOpen?: boolean;
}
export interface LinkType {
name: string;
href?: string;
rel?: string;
active?: boolean;
[propName: string]: any;
}
export type AnchorButtonAttributes = ({
href: string;
} & HTMLAnchorAttributes) | ({
href?: undefined;
} & HTMLButtonAttributes);
export type AnchorDivAttributes = ({
href: string;
} & HTMLAnchorAttributes) | ({
href?: undefined;
} & HTMLAttributes<HTMLDivElement>);
export type AnchorButtonDivAttributes = ({
href: string;
} & HTMLAnchorAttributes) | ({
href?: undefined;
onclick: Function;
} & HTMLButtonAttributes) | ({
href?: undefined;
onclick?: undefined;
} & HTMLAttributes<HTMLDivElement>);
export declare const xs = "xs";
export declare const sm = "sm";
export declare const md = "md";
export declare const lg = "lg";
export declare const xl = "xl";
export declare type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
export type HTMLButtonOrAnchorAttributes = Omit<HTMLButtonAttributes & HTMLAnchorAttributes, 'color'>;
export interface AlertProps extends Omit<AlertVariants, 'icon'>, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
children: Snippet;
icon?: Snippet;
alertStatus?: boolean;
closeIcon?: Component;
transition?: TransitionFunc;
params?: ParamsType;
onclick?: () => void;
}
export interface AvatarProps extends AvatarVariants, HTMLAttributes<HTMLDivElement> {
children?: Snippet;
indicator?: Snippet;
href?: HTMLAnchorAttributes['href'];
target?: HTMLAnchorAttributes['target'];
src?: string;
dot?: object;
alt?: string;
onclick?: () => void;
}
export type ButtonProps = ButtonVariants & AnchorButtonAttributes & {
tag?: string;
disabled?: boolean;
outline?: boolean;
shadow?: boolean;
loading?: boolean;
leadingIcon?: Snippet;
trailingIcon?: Snippet;
ripple?: boolean;
};
export interface GradientButtonProps extends GradientButtonVariantes, HTMLButtonOrAnchorAttributes {
tag?: string;
disabled?: boolean;
href?: string;
btnClass?: ClassValue;
leadingIcon?: Snippet;
trailingIcon?: Snippet;
}
export interface DropdownProps extends PopperProps {
simple?: boolean;
activeUrl?: string;
isOpen?: boolean;
}
export interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {
}
export interface DropdownGroupProps extends HTMLAttributes<HTMLUListElement> {
children: Snippet;
}
export interface DropdownHeaderProps extends HTMLAttributes<HTMLDivElement> {
children: Snippet;
}
export type DropdownItemAnchorButtonAttributes = HTMLAnchorAttributes & Omit<HTMLButtonAttributes, keyof HTMLAnchorAttributes | 'type'>;
export type DropdownItemProps = DropdownItemVariants & AnchorButtonDivAttributes & {
children: Snippet;
aClass?: ClassValue;
activeClass?: ClassValue;
liClass?: ClassValue;
};
export type FooterType = 'default' | 'sticky' | 'sitemap' | 'socialmedia' | 'logo' | undefined;
export interface FooterProps extends HTMLAttributes<HTMLElement> {
children: Snippet;
footerType?: FooterType;
}
export interface FooterBrandProps extends HTMLAnchorAttributes {
children?: Snippet;
aClass?: ClassValue;
spanClass?: ClassValue;
imgClass?: ClassValue;
href?: string;
src?: string;
alt?: string;
name?: string;
}
export interface FooterCopyrightProps extends FooterCopyrightVariants, HTMLAnchorAttributes {
spanClass?: ClassValue;
aClass?: ClassValue;
href?: string;
by?: string;
copyrightMessage?: string;
year?: number;
bySpanClass?: ClassValue;
}
export interface FooterIconProps extends HTMLAnchorAttributes {
children: Snippet;
href?: string;
ariaLabel?: string;
}
export interface FooterLinkProps extends FooterLinkVariants, HTMLAnchorAttributes {
children: Snippet;
liClass?: ClassValue;
aClass?: ClassValue;
href?: string;
}
export interface FooterLinkGroupProps extends HTMLAttributes<HTMLUListElement> {
children: Snippet;
}
export interface IndicatorProps extends HTMLAttributes<HTMLDivElement> {
children?: Snippet;
color?: IndicatorVariants['color'];
cornerStyle?: IndicatorVariants['cornerStyle'];
size?: IndicatorVariants['size'];
border?: boolean;
placement?: IndicatorVariants['placement'];
offset?: boolean;
}
export interface ModalProps extends ModalVariants, HTMLDialogAttributes {
onaction?: ({ action, data }: {
action: string;
data: FormData;
}) => any;
modal?: boolean;
form?: boolean;
autoclose?: boolean;
outsideclose?: boolean;
dismissable?: boolean;
permanent?: boolean;
focustrap?: boolean;
transition?: TransitionFunc;
params?: ParamsType;
header?: Snippet;
footer?: Snippet;
headerClass?: ClassValue;
bodyClass?: ClassValue;
footerClass?: ClassValue;
closeBtnClass?: ClassValue;
fullscreen?: boolean;
}
export interface NotificationItem {
id?: string | number;
icon?: string;
isRead?: boolean;
time?: string;
content?: string;
sender?: string;
}
export interface NotificationListProps<T extends NotificationItem> {
open?: boolean;
onClearNotifications?: () => void;
header?: Snippet;
busy?: boolean;
data?: T[];
onclick?: (item: T) => void;
footer?: Snippet;
read?: () => Promise<T[]> | T[];
}
export interface PageLoaderProps {
size?: number;
iconColor?: string;
}
export type InputValue = string | number | string[] | undefined;
export interface InputProps<T extends InputValue = string> extends InputVariants, Omit<HTMLInputAttributes, 'size' | 'children' | 'value'> {
children?: Snippet<[
{
class: string;
} & Omit<InputProps<T>, 'children' | 'left' | 'right' | 'size'>
]>;
left?: Snippet;
right?: Snippet;
size?: InputVariants['size'];
value?: T;
elementRef?: HTMLInputElement;
color?: InputVariants['color'];
leftClass?: ClassValue;
rightClass?: ClassValue;
divClass?: ClassValue;
wrapperClass?: ClassValue;
clearable?: boolean;
clearableSvgClass?: ClassValue;
clearableColor?: CloseButtonVariants['color'];
clearableClass?: ClassValue;
clearableOnClick?: () => void;
data?: string[];
maxSuggestions?: number;
onSelect?: (item: string) => void;
comboClass?: ClassValue;
comboItemClass?: ClassValue;
oninput?: (event: Event) => void;
onfocus?: (event: FocusEvent) => void;
onblur?: (event: FocusEvent) => void;
onkeydown?: (event: KeyboardEvent) => void;
}
export interface LabelProps extends HTMLLabelAttributes {
children: Snippet;
color?: LabelVariants['color'];
show?: boolean;
}
export interface ToolbarProps extends ToolbarVariants, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
end?: Snippet;
}
export interface ToolbarGroupProps extends ToolbarGroupVariants, HTMLAttributes<HTMLDivElement> {
}
export type ToolbarButtonProps = ToolbarButtonVariants & AnchorButtonAttributes & {
name?: string;
};
export type DateOrRange = Date | {
from?: Date;
to?: Date;
};
export interface DatepickerProps extends DatepickerVariants, Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
value?: Date;
defaultDate?: Date | null;
range?: boolean;
rangeFrom?: Date;
rangeTo?: Date;
availableFrom?: Date | null;
availableTo?: Date | null;
locale?: string;
firstDayOfWeek?: Day;
dateFormat?: Intl.DateTimeFormatOptions;
placeholder?: string;
disabled?: boolean;
required?: boolean;
color?: ButtonProps['color'];
inline?: boolean;
autohide?: boolean;
showActionButtons?: boolean;
title?: string;
onselect?: (x: DateOrRange) => void;
onclear?: () => void;
onapply?: (x: DateOrRange) => void;
inputmode?: HTMLInputAttributes['inputmode'];
monthColor?: ButtonProps['color'];
btnClass?: ClassValue;
inputClass?: ClassValue;
monthBtnSelected?: ClassValue;
monthBtn?: ClassValue;
translationLocale?: string;
elementRef?: HTMLInputElement;
name?: string | undefined | null;
placement?: 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end';
}
export interface DrawerProps extends DrawerVariants, HTMLAttributes<HTMLDivElement> {
hidden: boolean;
closeDrawer?: () => void;
activateClickOutside?: boolean;
backdrop?: boolean;
backdropClass?: ClassValue;
transitionParams?: ParamsType;
transitionType?: TransitionFunc;
bodyScrolling?: boolean;
onaction?: ({ action, data }: {
action: string;
data: FormData;
}) => any;
form?: boolean;
dismissable?: boolean;
closeBtnClass?: ClassValue;
headerClass?: ClassValue;
bodyClass?: ClassValue;
footerClass?: ClassValue;
header?: Snippet;
footer?: Snippet;
permanent?: boolean;
autoclose?: boolean;
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
}
export interface TextareaProps extends TextareaVariants, HTMLTextareaAttributes {
header?: Snippet;
footer?: Snippet;
addon?: Snippet;
value?: string;
elementRef?: HTMLTextAreaElement;
wrapped?: boolean;
divClass?: ClassValue;
innerClass?: ClassValue;
headerClass?: ClassValue;
footerClass?: ClassValue;
addonClass?: ClassValue;
clearable?: boolean;
clearableSvgClass?: ClassValue;
clearableColor?: CloseButtonVariants['color'];
clearableClass?: ClassValue;
clearableOnClick?: () => void;
textareaClass?: ClassValue;
}
export interface SelectProps {
hasError?: boolean;
hasSuccess?: boolean;
minHeight?: number;
placeholder?: string;
valueAsObject?: boolean;
creatable?: boolean;
multiple?: boolean;
searchable?: boolean;
labelAsValue?: boolean;
disabled?: boolean;
clearable?: boolean;
name?: string;
inputId?: string;
required?: boolean;
options?: Array<any> | object;
valueField?: string | null;
labelField?: string | null;
groupLabelField?: string;
groupItemsField?: string;
disabledField?: string;
renderer?: ((item: object, selectionSection?: boolean, inputValue?: string) => string) | string;
disableHighlight?: boolean;
highlightFirstItem?: boolean;
selectOnTab?: boolean | 'select-navigate';
resetOnBlur?: boolean;
resetOnSelect?: boolean;
closeAfterSelect?: string | boolean;
deselectMode?: 'native' | 'toggle' | 'none';
dndzone?: Function;
strictMode?: boolean;
max?: number;
collapseSelection?: 'blur' | 'always' | null;
keepSelectionInList?: boolean | 'auto';
creatablePrefix?: string;
allowEditing?: boolean;
keepCreated?: boolean;
delimiter?: string;
createFilter?: (inputValue: string) => boolean;
createHandler?: (prop: {
inputValue: string;
valueField: string;
labelField: string;
prefix: string;
}) => Promise<object> | object;
fetch?: string | null;
fetchProps?: object | Function;
fetchMode?: 'auto' | 'init';
fetchCallback?: Function;
fetchResetOnBlur?: boolean;
fetchDebounceTime?: number;
minQuery?: number;
lazyDropdown?: boolean;
virtualList?: boolean;
vlItemSize?: number;
i18n?: object;
value?: any[] | string | number | object | null;
readSelection?: object | object[] | null;
parentValue?: string | number | null | undefined;
emitValues?: boolean;
onChange?: Function;
onFocus?: Function;
onBlur?: Function;
onCreateOption?: Function;
onCreateFail?: Function;
onEnterKey?: Function;
onFetch?: Function;
onFetchError?: Function;
onInvalidValue?: Function;
prepend?: Snippet | undefined;
selection?: Snippet<[selectedOptions: object[], bindItem: Function]>;
clearIcon?: Snippet<[selectedOptions: object[], input_value: string]>;
toggleIcon?: Snippet<[dropdownShow: boolean]>;
append?: Snippet | undefined;
listHeader?: Snippet | undefined;
option?: Snippet<[option: object, inputValue: string]>;
positionResolver?: Function;
anchor_element?: string | null;
controlClass?: string | null;
dropdownClass?: string | null;
optionClass?: string | null;
loading?: boolean;
}
export interface RadioProps<T> extends RadioVariants, Omit<HTMLInputAttributes, 'color'> {
group?: T;
value?: T;
inputClass?: ClassValue;
labelClass?: ClassValue;
}
export interface RadioButtonProps<T> extends Omit<HTMLInputAttributes, 'size'> {
group?: T;
value?: T;
inline?: boolean;
pill?: boolean;
outline?: boolean;
size?: ButtonProps['size'];
color?: ButtonProps['color'];
shadow?: boolean;
checkedClass?: ClassValue;
}
export interface CheckboxItem {
value: string | number;
label?: string;
checked?: boolean | null;
[key: string]: any;
}
export interface CheckboxProps extends CheckboxVariants, Omit<HTMLInputAttributes, 'children' | 'color' | 'disabled'> {
children?: Snippet<[{
value?: string | number;
checked: boolean;
} | CheckboxItem]>;
custom?: boolean;
inline?: boolean;
tinted?: boolean;
rounded?: boolean;
group?: (string | number)[];
choices?: CheckboxItem[];
indeterminate?: boolean;
divClass?: ClassValue;
labelProps?: Record<string, any>;
}
export interface CheckboxButtonProps extends Omit<HTMLInputAttributes, 'size'> {
group?: (string | number)[];
value?: string | number;
checked?: boolean;
inline?: boolean;
pill?: boolean;
outline?: boolean;
size?: ButtonProps['size'];
color?: ButtonProps['color'];
shadow?: boolean;
}
export interface IFormChangeProp<T> {
values: T;
isValid: boolean;
form: any;
}
export interface IFormSubmitProp<T> {
values: T;
context: any;
}
export interface FormProps {
transform?: (values: any) => any;
initialValues?: Record<string, any>;
validators?: any;
onChange?: (values: IFormChangeProp<any>) => any;
onSubmit?: (values: IFormSubmitProp<any>) => any;
contextKey?: any;
class?: ClassValue;
children: Snippet<[
initialValues?: Record<string, any>,
isValid?: boolean,
values?: Record<string, any>
]>;
schema?: any;
}
export interface IFormProps {
label?: string;
contextKey?: symbol | null;
name: string;
}
export interface FormInputProps extends Omit<InputProps, 'name'>, IFormProps {
}
export interface FormDatepickerProps extends Omit<DatepickerProps, 'name'>, IFormProps {
}
export interface FormSelectProps extends Omit<SelectProps, 'name'>, IFormProps {
}
export interface FormTextareaProps extends Omit<TextareaProps, 'name'>, IFormProps {
}
export interface FormRadioProps<T> extends Omit<RadioProps<T>, 'name'>, IFormProps {
}
export interface FormClEditorProps extends Omit<InputProps, 'name'>, IFormProps {
height?: string;
}
export interface FormCheckboxProps extends Omit<CheckboxProps, 'name'>, IFormProps {
onChange?: (val: any) => void;
}
export interface TableColumn {
header: string;
id?: string;
plugins?: any;
accessor?: string | string[] | ((row: any) => unknown);
cell?: (ctx: {
value: unknown;
row: any;
}) => unknown;
renderComponent?: Component<any>;
renderProps?: (ctx: {
value: unknown;
row: any;
column: TableColumn;
}) => Record<string, unknown>;
}
export interface TableActionList {
name: string;
icon?: string;
otherClasses?: string;
visible?: (row: any) => boolean;
onClick?: (row: any) => void;
}
export interface TableSortInfo {
id: string;
order: 'asc' | 'desc';
}
export type TableColor = 'green' | 'orange' | 'white' | 'purple' | 'sky' | 'blue' | 'red' | 'pink';
export type HeaderTextColor = 'black' | 'white' | 'gray';
export interface TableProps {
data?: any[];
headerColor?: TableColor;
height?: number;
bgWhite?: boolean;
headerTextColor?: HeaderTextColor;
tableColumns: TableColumn[];
showActions?: boolean;
showCheckBox?: boolean;
showViewDetails?: boolean;
showEdit?: boolean;
showMiniWidth?: boolean;
rowClickable?: boolean;
hideWhiteSpace?: boolean;
hiddenColumns?: string[];
sortedColumns?: TableSortInfo[];
initialSortKeys?: TableSortInfo[];
allColumns?: any;
actionLists?: TableActionList[];
showIndex?: boolean;
selectedRows?: any[];
selectAllChecked?: boolean;
showDelete?: boolean;
handleCheckbox?: (val: any[]) => void;
onView?: (val: any) => void;
onRowClicked?: (val: any) => void;
onEdit?: (val: any) => void;
onDelete?: (val: any) => void;
onActionClicked?: ({ name, row }: {
name: string;
row: any;
}) => void;
tableBottomContent?: Snippet;
showTableBottomPadding?: boolean;
}
export interface PaginateProps {
currentPage: number;
hasNextPage: boolean;
hasPreviousPage: boolean;
onNextPage: () => void;
onPreviousPage: () => void;
refresh?: (() => void) | null;
totalPages: number;
hideLabel?: boolean;
textSmall?: boolean;
hiddenColumns?: string[];
tableColumns?: any[];
recordCount?: number;
pageSize?: number;
}
export interface PageInfo {
hasNextPage: boolean;
hasPreviousPage: boolean;
}
export interface PaginatedResult<T> {
success: boolean;
message: string;
data: {
pageInfo: PageInfo;
totalCount: number;
items: T[];
};
}
export interface CrudResult<T> {
success: boolean;
message: string;
data?: T;
}
export interface TableFilter<T = Record<string, unknown>> {
search?: string;
startDate?: Date | string | null;
endDate?: Date | string | null;
dateRange?: string;
filter?: Partial<T>;
order?: Array<{
field: keyof T;
direction: 'asc' | 'desc';
}>;
actions?: Record<string, string>;
pageSize?: number;
currentPage?: number;
}
export interface DatatableProps<T = any> extends TableProps {
read?: (skip?: number, take?: number, filter?: TableFilter<T>) => Promise<PaginatedResult<T>> | PaginatedResult<T> | null;
createEntry?: (entry: T) => Promise<CrudResult<T>> | CrudResult<T> | null;
updateEntry?: (entry: Partial<T> & {
id: string | number;
}) => Promise<CrudResult<T>> | CrudResult<T> | null;
deleteEntry?: (id: string | number) => Promise<CrudResult<T>> | CrudResult<T> | null;
onAfterAction?: (params: {
type: 'create' | 'update' | 'delete' | 'custom';
values?: Partial<T>;
data?: T;
}) => void;
onAddNew?: () => void;
persitFiltersToUrl?: boolean;
fillSpace?: boolean;
showTopActionsBackground?: boolean;
hideSearchBox?: boolean;
addButtonLabel?: string;
showAdd?: boolean;
searchPlaceholder?: string;
addNewHeading?: string;
newRecord?: Record<string, any>;
query?: string;
busy?: boolean;
showFilterDateRange?: boolean;
loadingBodySize?: number;
loadingHeaderSize?: number;
updateHeading?: string;
customFilterValues?: Record<string, any>;
modalSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
allowLoadAfterCreate?: boolean;
allowDispatchAfterAction?: boolean;
take?: number;
editor?: Snippet<[DatatableEditorFormProps]>;
customFilter?: Snippet<[TableFilter]>;
modalFooter?: Snippet;
showModalButtons?: boolean;
customAddAction?: Snippet;
}
export interface DatatableEditorFormProps {
recordId?: number | string | null;
data?: Record<string, any> | null;
onChange: IFormChangeProp<any>;
onDone?: Function;
readonly: boolean;
}
export interface AlertDialogProps {
open: boolean;
message?: string;
icon?: string;
disableYes?: boolean;
busy?: boolean;
iconColor?: string;
confirmText?: string;
buttonType?: 'submit' | 'button' | 'reset';
dismissable?: boolean;
onCancel: () => void;
onYes: () => void;
}
export interface AccordionCtxType {
flush?: boolean;
activeClass?: string | null;
inactiveClass?: string | null;
transitionType?: TransitionFunc | 'none';
}
export interface AccordionProps extends AccordionVariants, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
children: Snippet;
multiple?: boolean;
activeClass?: string;
inactiveClass?: string;
transitionType?: TransitionFunc | 'none';
}
export interface AccordionItemProps extends AccordionItemVariants, HTMLAttributes<HTMLDivElement> {
children: Snippet;
header?: Snippet;
arrowup?: Snippet;
arrowdown?: Snippet;
activeClass?: string;
inactiveClass?: string;
transitionType?: TransitionFunc | 'none';
transitionParams?: ParamsType;
headerClass?: string;
contentClass?: string;
}
export interface FilterBuilderColumnConfig {
name: string;
label: string;
type: 'string' | 'number' | 'date' | 'boolean';
}
export interface FilterBuilderItem {
id: string;
column: string;
operator: string;
value: string | number | boolean | null;
logicalOperator?: 'AND' | 'OR';
label?: string;
}
export interface FilterBuilderExport {
sqlBuild: string;
jsonBuild: any[];
}
export interface FilterBuilderProps {
columns?: FilterBuilderColumnConfig[];
filters?: FilterBuilderItem[];
onRunQuery?: (val: FilterBuilderExport) => void;
}
export interface ITab {
id: number | string;
title: string;
children: Component<TabChildrenProps> | Component;
icon?: string;
isClosable?: boolean;
props?: Record<string, any>;
state?: Record<string, any>;
}
export interface RemoveTabEvent {
tabId: string | number;
tabData?: any;
refresh?: boolean;
}
export interface TabChildrenProps extends ITab {
onTabChange?: (tabId: number | string) => void;
onTabAdd?: (val: any) => void;
onRemoveTab?: (val: RemoveTabEvent) => void;
}
export interface TabProps {
tabs: ITab[];
activeTab: number | string;
tabClass?: ClassValue;
tabActiveClass?: ClassValue;
tabInactiveClass?: ClassValue;
tabContentClass?: ClassValue;
tabContentActiveClass?: ClassValue;
tabContentInactiveClass?: ClassValue;
tabColor?: ClassValue;
onTabChange?: (tabId: number | string) => void;
onTabAdd?: (val: any) => void;
onRemoveTab?: (val: RemoveTabEvent) => void;
tabStyle?: TabsVaraints['tabStyle'];
divider?: boolean;
hideTabs?: boolean;
}
export interface BoxProps extends svelteHTML.HTMLAttributes<HTMLDivElement> {
children: any;
otherClasses?: string;
bgWhite?: boolean;
rounded?: boolean;
padding?: boolean;
shadow?: boolean;
}
export interface IBreadcrumb {
title: string;
component?: any;
props?: any;
path?: string;
}
export interface BreadcrumbProps {
options: IBreadcrumb[];
activeBreadCrumb: string;
onclik?: (val: IBreadcrumbClick) => void;
activeClass?: 'pink' | 'blue' | 'red' | 'indigo' | 'purple' | 'black' | 'amber' | 'orange';
}
export interface IBreadcrumbClick {
title: string;
path?: string;
index: number;
}
export interface IButtonConfig {
kind: string;
label: string;
subLabel: string;
}
export type IActionButtonKind = keyof typeof ACTION_BUTTON_KINDS;
export interface ActionButtonProps {
icon?: string;
iconBgColor?: string;
iconSize?: number;
iconColor?: string;
label?: string;
subLabel?: string;
showBg?: boolean | null;
showArrow?: boolean;
showIconHover?: boolean;
moreHeight?: boolean;
href?: string | null;
kind?: IActionButtonKind;
moreShadow?: boolean;
onclick?: () => void;
}
export interface IComponentDescriptor {
type: string;
title?: string;
collapsible?: boolean;
collapsed?: boolean;
closable?: boolean;
props?: unknown;
id?: string;
}
export interface IDocumentCanvasClose {
id: string;
data: any;
}
export interface IDocumentRendererProps {
descriptor: IComponentDescriptor;
showTitle?: boolean;
contextKey?: object;
toggleCollapse: (id: string) => void;
close: (val: IDocumentCanvasClose) => void;
}
export interface IDocumentCanvasProps {
children: IComponentDescriptor[];
showBackground?: boolean;
contextKey?: object;
close: (val: IDocumentCanvasClose) => void;
toggleCollapse: (id: string) => void;
}
export interface FormFileUploadProps {
title: string;
subTitle?: string;
url?: string;
name: string;
allowMultiple?: boolean;
acceptedFileTypes?: string[];
files?: any[];
label: string;
required?: boolean;
showError?: boolean;
imageOnly?: boolean;
contextKey?: any;
onChange?: (val: any) => void;
}
export type CheckIconProps = SVGAttributes<SVGSVGElement>;
export type ButtonToggleProps = ButtonToggleVariants & HTMLButtonAttributes & {
value: string;
selected?: boolean;
children: Snippet;
iconSlot?: Snippet;
color?: ButtonToggleVariants['color'];
iconClass?: ClassValue;
contentClass?: ClassValue;
txtClass?: ClassValue;
};
export interface TooltipProps extends TooltipVariants, PopperProps {
}
export interface SpeedCtxType {
pill: boolean;
tooltip: Placement | 'none';
textOutside: boolean;
}
type BaseSpeedDialTriggerProps = {
children?: any;
name?: string;
pill?: boolean;
icon?: Snippet;
class?: string;
[key: string]: any;
};
export type RegularSpeedDialTriggerProps = BaseSpeedDialTriggerProps & {
gradient?: false;
color?: ButtonVariants['color'];
};
export type GradientSpeedDialTriggerProps = BaseSpeedDialTriggerProps & {
gradient: true;
color?: GradientButtonColor;
};
export type SpeedDialTriggerProps = RegularSpeedDialTriggerProps | GradientSpeedDialTriggerProps;
export type SpeedDialProps = PopperProps & SpeedDialVariants & {
children: Snippet;
button?: Snippet;
popperClass?: ClassValue;
placement?: Placement;
tooltip?: Placement | 'none';
trigger?: PopperProps['trigger'];
textOutside?: boolean;
pill?: boolean;
ontoggle?: PopperProps['ontoggle'];
onbeforetoggle?: PopperProps['onbeforetoggle'];
isOpen?: boolean;
};
export type SpeedDialButtonProps = ButtonProps & SpeedDialButtonVariants & {
name?: string;
tooltip?: Placement | 'none';
pill?: boolean;
textOutside?: boolean;
textClass?: ClassValue;
};
export {};