@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
1,482 lines • 607 kB
TypeScript
import { PropType, Ref } from 'vue';
import { MtPopoverItemType } from '../../overlay/mt-popover-item/mt-popover-item';
import { DropConfig, DragConfig } from '../../../directives/dragdrop.directive';
import { TextColumnDefinition } from './renderer/mt-data-table-text-renderer';
import { NumberColumnDefinition } from './renderer/mt-data-table-number-renderer';
import { BadgeColumnDefinition } from './renderer/mt-data-table-badge-renderer';
import { PriceColumnDefinition } from './renderer/mt-data-table-price-renderer';
import { SegmentedControlActionsProp } from '../../navigation/mt-segmented-control/mt-segmented-control';
import { Filter } from './mt-data-table.interfaces';
export interface BaseColumnDefinition {
label: string;
property: string;
position: number;
sortable?: boolean;
width?: number;
allowResize?: boolean;
cellWrap?: "nowrap" | "normal";
visible?: boolean;
}
export type ColumnDefinition = BadgeColumnDefinition | TextColumnDefinition | NumberColumnDefinition | PriceColumnDefinition;
export interface ColumnChanges {
property?: ColumnDefinition["property"];
position?: ColumnDefinition["position"];
width?: ColumnDefinition["width"];
visible?: ColumnDefinition["visible"];
}
type DataSourcePropType = {
id: string;
[key: string]: unknown;
}[];
type ColumnProperty = ColumnDefinition[];
/**
* @experimental - This component can be used but there are no guarantees for API stability yet.
*/
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* The data source which contains the data for the current
* state of the table.
*/
dataSource: {
type: PropType<DataSourcePropType>;
required: true;
};
/**
* The defintions for the columns which should be displayed in the table.
*/
columns: {
type: PropType<ColumnProperty>;
required: true;
validator: (columnsValue: Record<string, unknown>[]) => boolean;
};
/**
* Optional property. When you want to override the current column
* information with the given changes, you can pass them here.
* The changes will be applied to the current column information.
* This is useful for saving and loading the current column configuration
* when the user customizes the table.
*/
columnChanges: {
type: PropType<Record<string, ColumnChanges>>;
required: false;
default: () => {};
};
/**
* Define the title of the table.
*/
title: {
type: StringConstructor;
required: false;
default: string;
};
/**
* Define the subtitle of the table.
*/
subtitle: {
type: StringConstructor;
required: false;
default: string;
};
/**
* The layout of the data table.
* @values default, full
*/
layout: {
type: PropType<"default" | "full">;
required: false;
default: string;
};
/**
* Activate the reload button at the top right corner of the table.
*/
enableReload: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Define the current page of the table.
*/
currentPage: {
type: NumberConstructor;
required: true;
};
/**
* Define the limit of items per page.
*/
paginationLimit: {
type: NumberConstructor;
required: true;
};
/**
* Define the total amount of items.
*/
paginationTotalItems: {
type: NumberConstructor;
required: true;
};
/**
* Define the available pagination limits.
*/
paginationOptions: {
type: PropType<number[]>;
required: false;
default: () => number[];
};
/**
* Define the current sort by property.
*/
sortBy: {
type: StringConstructor;
required: false;
default: string;
};
/**
* Define the current sort direction.
*/
sortDirection: {
type: PropType<"ASC" | "DESC">;
required: false;
default: string;
};
/**
* If active then the search input will be disabled.
*/
disableSearch: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Define the current search value.
*/
searchValue: {
type: StringConstructor;
required: false;
default: string;
};
/**
* If active then the table will be in loading state.
*/
isLoading: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* If active user can select rows and can perform actions on them.
*/
allowRowSelection: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disableRowSelect: {
type: PropType<string[]>;
required: false;
default: () => never[];
};
selectedRows: {
type: PropType<string[]>;
required: false;
default: () => never[];
};
/**
* If active user can do bulk edit by selecting items
*/
allowBulkEdit: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* If active user can do bulk delete by selecting items
*/
allowBulkDelete: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Add more custom bulk edit actions
*/
bulkEditMoreActions: {
type: PropType<{
id: string;
label: string;
onClick: () => void;
icon?: "default" | "critical" | "active" | string;
type?: MtPopoverItemType;
metaCopy?: string;
contextualDetail?: string;
}[]>;
required: false;
default: () => never[];
};
/***
* Enable numbered rows
*/
enableRowNumbering: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Enable or disable the stripe design for the table.
*/
showStripes: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Enable or disable outlines for the table.
*/
showOutlines: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Enable or disable outline framing on hover
*/
enableOutlineFraming: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Disable the possibility to delete items
*/
disableDelete: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Disable the possibility to edit items
*/
disableEdit: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Disable the possibility to settings table
*/
disableSettingsTable: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Caption for accessibility
*/
caption: {
type: StringConstructor;
required: false;
default: string;
};
/**
* All available filters
*/
filters: {
type: PropType<Filter[]>;
required: false;
default: () => never[];
};
/**
* Filters in use by the user
*/
appliedFilters: {
type: PropType<Filter[]>;
required: false;
default: () => never[];
};
/**
* Displays how many results are found
*/
numberOfResults: {
type: NumberConstructor;
required: false;
default: undefined;
};
/**
* Additional context buttons to show in the context menu
*/
additionalContextButtons: {
type: PropType<Array<{
type?: "default" | "active" | "critical";
label: string;
key: string;
}>>;
required: false;
default: () => never[];
};
}>, {
t: import('vue-i18n').ComposerTranslation<{
en: {
itemsPerPage: string;
filter: {
numberOfResults: string;
addFilter: string;
fetchingFilteredResults: string;
};
columnSettings: {
sortAscending: string;
sortDescending: string;
hideColumn: string;
};
addColumnIndicator: {
popoverTitle: string;
tooltipMessage: string;
};
contextButtons: {
edit: string;
delete: string;
};
emptyState: {
headline: string;
description: string;
};
bulkEdit: {
itemsSelected: string;
edit: string;
delete: string;
more: string;
};
reload: {
tooltip: string;
};
};
de: {
itemsPerPage: string;
filter: {
numberOfResults: string;
addFilter: string;
fetchingFilteredResults: string;
};
columnSettings: {
sortAscending: string;
sortDescending: string;
hideColumn: string;
};
addColumnIndicator: {
popoverTitle: string;
tooltipMessage: string;
};
contextButtons: {
edit: string;
delete: string;
};
emptyState: {
headline: string;
description: string;
};
bulkEdit: {
itemsSelected: string;
edit: string;
delete: string;
more: string;
};
reload: {
tooltip: string;
};
};
}, "en" | "de", import('@intlify/core-base').RemoveIndexSignature<{
[x: string]: import('vue-i18n').LocaleMessageValue<import('vue-i18n').VueMessageType>;
}>, never, "filter" | "reload" | "itemsPerPage" | "columnSettings" | "addColumnIndicator" | "contextButtons" | "emptyState" | "bulkEdit" | "filter.numberOfResults" | "filter.addFilter" | "filter.fetchingFilteredResults" | "reload.tooltip" | "columnSettings.sortAscending" | "columnSettings.sortDescending" | "columnSettings.hideColumn" | "addColumnIndicator.popoverTitle" | "addColumnIndicator.tooltipMessage" | "contextButtons.delete" | "contextButtons.edit" | "emptyState.description" | "emptyState.headline" | "bulkEdit.delete" | "bulkEdit.edit" | "bulkEdit.itemsSelected" | "bulkEdit.more", "filter" | "reload" | "itemsPerPage" | "columnSettings" | "addColumnIndicator" | "contextButtons" | "emptyState" | "bulkEdit" | "filter.numberOfResults" | "filter.addFilter" | "filter.fetchingFilteredResults" | "reload.tooltip" | "columnSettings.sortAscending" | "columnSettings.sortDescending" | "columnSettings.hideColumn" | "addColumnIndicator.popoverTitle" | "addColumnIndicator.tooltipMessage" | "contextButtons.delete" | "contextButtons.edit" | "emptyState.description" | "emptyState.headline" | "bulkEdit.delete" | "bulkEdit.edit" | "bulkEdit.itemsSelected" | "bulkEdit.more">;
sortedColumns: import('vue').ComputedRef<ColumnDefinition[]>;
isFirstVisibleColumn: (column: ColumnDefinition) => boolean;
addColumnOptions: import('vue').ComputedRef<{
id: string;
label: string;
parentGroup: undefined;
position: number;
isVisible: boolean;
isClickable: boolean;
isSortable: boolean;
isHidable: boolean;
disabled: boolean;
}[]>;
renderColumnDataCellStyle: (column: ColumnDefinition) => {
width: string;
"min-width": string;
"max-width": string;
"white-space": "normal" | "nowrap";
};
renderColumnHeaderStyle: (column: ColumnDefinition) => {
"max-width": string;
width: string;
"min-width": string;
"white-space": "normal" | "nowrap";
};
tableWrapper: Ref<any, any>;
emitReload: () => void;
emitPaginationLimitChange: (limitValue: number) => void;
emitPaginationCurrentPageChange: (currentPage: number) => void;
emitSearchValueChange: (searchValue: string) => void;
paginationOptionsConverted: import('vue').ComputedRef<{
id: number;
label: string;
value: number;
}[]>;
startColumnResizing: (column: ColumnDefinition | null) => void;
columnHeaderRefs: Ref<Record<string, HTMLElement>, Record<string, HTMLElement>>;
columnDataCellRefs: Ref<Record<string, HTMLElement[]>, Record<string, HTMLElement[]>>;
setColumnDataCellRefs: ({ el, column, index, }: {
el?: HTMLElement;
column: ColumnDefinition;
index: number;
}) => void;
dataTable: Ref<HTMLElement | null>;
dragConfig: Partial<DragConfig<ColumnDefinition & {
dropZone?: "before" | "after";
}>>;
dropConfig: Partial<DropConfig<unknown> & {
dropZone?: "before" | "after";
}>;
resetAllChanges: () => void;
changeColumnPosition: (columnId: string, targetColumnId: string, insertPosition?: "before" | "after") => void;
isColumnVisible: (column: ColumnDefinition) => boolean;
changeColumnVisibility: (columnProperty: string, visibility: boolean) => void;
emitSortChange: (property: string, direction: "ASC" | "DESC") => void;
onColumnSettingsSortChange: (property: string, direction: "ASC" | "DESC", chainMethod?: () => void) => void;
MtDataTableClasses: import('vue').ComputedRef<{
"mt-data-table__layout-default": boolean;
"mt-data-table__layout-full": boolean;
"mt-data-table__first-column-fixed": boolean;
"mt-data-table__last-column-fixed": boolean;
"mt-data-table__stripes": boolean;
"mt-data-table__outlines": boolean;
"mt-data-table__column-outline-framing-active": boolean;
}>;
tableStylingVariables: import('vue').ComputedRef<{
"--fixed-left-column-width": string;
"--fixed-right-column-width": string;
}>;
getSelectionValue: (dataId: string) => boolean;
onRowSelect: (dataId: string) => void;
somethingSelected: import('vue').ComputedRef<boolean>;
bulkEditSegmentedControlActions: import('vue').ComputedRef<SegmentedControlActionsProp>;
handleSelectAll: () => void;
highlightedColumn: Ref<string | null, string | null>;
setHighlightedColumn: (column: ColumnDefinition | null) => void;
getColumnDataCellClasses: (column: ColumnDefinition) => string[];
getColumnHeaderClasses: (column: ColumnDefinition) => string[];
getPreviousVisibleColumn: (column: ColumnDefinition) => ColumnDefinition | null;
getColumnDataRowClasses: (rowId: string) => string[];
getColumnHeaderInnerWrapperClasses: (column: ColumnDefinition) => string[];
forceHighlightedColumn: Ref<boolean, boolean>;
addColumnOptionsSearch: Ref<string, string>;
onAddColumnOptionClick: (columnProperty: string, previousColumnProperty: string) => void;
onAddColumnSearch: (value: string) => void;
currentHoveredColumn: Ref<string | null, string | null>;
currentHoveredRow: Ref<string | null, string | null>;
setCurrentHoveredCell: (columnProperty: string | null, rowId: string) => void;
isPrimaryColumn: (column: ColumnDefinition) => boolean;
emptyData: import('vue').ComputedRef<{}[]>;
getRealIndex: (index: number) => number;
isDragging: Ref<boolean, boolean>;
filterChildViews: import('vue').ComputedRef<{
name: string;
title: string;
}[]>;
removeFilter: (id: string) => void;
addOption: (filterId: string, optionId: string) => void;
removeOption: (filterId: string, optionId: string) => void;
isOptionSelected: (filterId: string, optionId: string) => boolean;
handleSearchUpdate: (value: string) => void;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change-show-outlines" | "change-show-stripes" | "change-outline-framing" | "change-enable-row-numbering" | "reload" | "pagination-limit-change" | "pagination-current-page-change" | "search-value-change" | "sort-change" | "open-details" | "selection-change" | "multiple-selection-change" | "bulk-edit" | "bulk-delete" | "item-delete" | "update:appliedFilters" | "context-select")[], "change-show-outlines" | "change-show-stripes" | "change-outline-framing" | "change-enable-row-numbering" | "reload" | "pagination-limit-change" | "pagination-current-page-change" | "search-value-change" | "sort-change" | "open-details" | "selection-change" | "multiple-selection-change" | "bulk-edit" | "bulk-delete" | "item-delete" | "update:appliedFilters" | "context-select", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* The data source which contains the data for the current
* state of the table.
*/
dataSource: {
type: PropType<DataSourcePropType>;
required: true;
};
/**
* The defintions for the columns which should be displayed in the table.
*/
columns: {
type: PropType<ColumnProperty>;
required: true;
validator: (columnsValue: Record<string, unknown>[]) => boolean;
};
/**
* Optional property. When you want to override the current column
* information with the given changes, you can pass them here.
* The changes will be applied to the current column information.
* This is useful for saving and loading the current column configuration
* when the user customizes the table.
*/
columnChanges: {
type: PropType<Record<string, ColumnChanges>>;
required: false;
default: () => {};
};
/**
* Define the title of the table.
*/
title: {
type: StringConstructor;
required: false;
default: string;
};
/**
* Define the subtitle of the table.
*/
subtitle: {
type: StringConstructor;
required: false;
default: string;
};
/**
* The layout of the data table.
* @values default, full
*/
layout: {
type: PropType<"default" | "full">;
required: false;
default: string;
};
/**
* Activate the reload button at the top right corner of the table.
*/
enableReload: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Define the current page of the table.
*/
currentPage: {
type: NumberConstructor;
required: true;
};
/**
* Define the limit of items per page.
*/
paginationLimit: {
type: NumberConstructor;
required: true;
};
/**
* Define the total amount of items.
*/
paginationTotalItems: {
type: NumberConstructor;
required: true;
};
/**
* Define the available pagination limits.
*/
paginationOptions: {
type: PropType<number[]>;
required: false;
default: () => number[];
};
/**
* Define the current sort by property.
*/
sortBy: {
type: StringConstructor;
required: false;
default: string;
};
/**
* Define the current sort direction.
*/
sortDirection: {
type: PropType<"ASC" | "DESC">;
required: false;
default: string;
};
/**
* If active then the search input will be disabled.
*/
disableSearch: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Define the current search value.
*/
searchValue: {
type: StringConstructor;
required: false;
default: string;
};
/**
* If active then the table will be in loading state.
*/
isLoading: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* If active user can select rows and can perform actions on them.
*/
allowRowSelection: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disableRowSelect: {
type: PropType<string[]>;
required: false;
default: () => never[];
};
selectedRows: {
type: PropType<string[]>;
required: false;
default: () => never[];
};
/**
* If active user can do bulk edit by selecting items
*/
allowBulkEdit: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* If active user can do bulk delete by selecting items
*/
allowBulkDelete: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Add more custom bulk edit actions
*/
bulkEditMoreActions: {
type: PropType<{
id: string;
label: string;
onClick: () => void;
icon?: "default" | "critical" | "active" | string;
type?: MtPopoverItemType;
metaCopy?: string;
contextualDetail?: string;
}[]>;
required: false;
default: () => never[];
};
/***
* Enable numbered rows
*/
enableRowNumbering: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Enable or disable the stripe design for the table.
*/
showStripes: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Enable or disable outlines for the table.
*/
showOutlines: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Enable or disable outline framing on hover
*/
enableOutlineFraming: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Disable the possibility to delete items
*/
disableDelete: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Disable the possibility to edit items
*/
disableEdit: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Disable the possibility to settings table
*/
disableSettingsTable: {
type: BooleanConstructor;
required: false;
default: boolean;
};
/**
* Caption for accessibility
*/
caption: {
type: StringConstructor;
required: false;
default: string;
};
/**
* All available filters
*/
filters: {
type: PropType<Filter[]>;
required: false;
default: () => never[];
};
/**
* Filters in use by the user
*/
appliedFilters: {
type: PropType<Filter[]>;
required: false;
default: () => never[];
};
/**
* Displays how many results are found
*/
numberOfResults: {
type: NumberConstructor;
required: false;
default: undefined;
};
/**
* Additional context buttons to show in the context menu
*/
additionalContextButtons: {
type: PropType<Array<{
type?: "default" | "active" | "critical";
label: string;
key: string;
}>>;
required: false;
default: () => never[];
};
}>> & Readonly<{
"onChange-show-outlines"?: ((...args: any[]) => any) | undefined;
"onChange-show-stripes"?: ((...args: any[]) => any) | undefined;
"onChange-outline-framing"?: ((...args: any[]) => any) | undefined;
"onChange-enable-row-numbering"?: ((...args: any[]) => any) | undefined;
onReload?: ((...args: any[]) => any) | undefined;
"onPagination-limit-change"?: ((...args: any[]) => any) | undefined;
"onPagination-current-page-change"?: ((...args: any[]) => any) | undefined;
"onSearch-value-change"?: ((...args: any[]) => any) | undefined;
"onSort-change"?: ((...args: any[]) => any) | undefined;
"onOpen-details"?: ((...args: any[]) => any) | undefined;
"onSelection-change"?: ((...args: any[]) => any) | undefined;
"onMultiple-selection-change"?: ((...args: any[]) => any) | undefined;
"onBulk-edit"?: ((...args: any[]) => any) | undefined;
"onBulk-delete"?: ((...args: any[]) => any) | undefined;
"onItem-delete"?: ((...args: any[]) => any) | undefined;
"onUpdate:appliedFilters"?: ((...args: any[]) => any) | undefined;
"onContext-select"?: ((...args: any[]) => any) | undefined;
}>, {
caption: string;
title: string;
filters: Filter[];
isLoading: boolean;
subtitle: string;
showOutlines: boolean;
showStripes: boolean;
enableOutlineFraming: boolean;
enableRowNumbering: boolean;
columnChanges: Record<string, ColumnChanges>;
layout: "default" | "full";
enableReload: boolean;
paginationOptions: number[];
sortBy: string;
sortDirection: "ASC" | "DESC";
disableSearch: boolean;
searchValue: string;
allowRowSelection: boolean;
disableRowSelect: string[];
selectedRows: string[];
allowBulkEdit: boolean;
allowBulkDelete: boolean;
bulkEditMoreActions: {
id: string;
label: string;
onClick: () => void;
icon?: "default" | "critical" | "active" | string;
type?: MtPopoverItemType;
metaCopy?: string;
contextualDetail?: string;
}[];
disableDelete: boolean;
disableEdit: boolean;
disableSettingsTable: boolean;
appliedFilters: Filter[];
numberOfResults: number;
additionalContextButtons: {
type?: "default" | "active" | "critical";
label: string;
key: string;
}[];
}, {}, {
"mt-card": {
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
title?: string;
subtitle?: string;
isLoading?: boolean;
large?: boolean;
inheritance?: boolean;
}> & Readonly<{
"onUpdate:inheritance"?: ((value: boolean) => any) | undefined;
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
"update:inheritance": (value: boolean) => any;
}, import('vue').PublicProps, {
inheritance: boolean;
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{
title?: string;
subtitle?: string;
isLoading?: boolean;
large?: boolean;
inheritance?: boolean;
}> & Readonly<{
"onUpdate:inheritance"?: ((value: boolean) => any) | undefined;
}>, {}, {}, {}, {}, {
inheritance: boolean;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & import('vue').ComponentOptionsBase<Readonly<{
title?: string;
subtitle?: string;
isLoading?: boolean;
large?: boolean;
inheritance?: boolean;
}> & Readonly<{
"onUpdate:inheritance"?: ((value: boolean) => any) | undefined;
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
"update:inheritance": (value: boolean) => any;
}, string, {
inheritance: boolean;
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
$slots: Readonly<{
title(): void;
subtitle(): void;
avatar(): void;
grid(): void;
footer(): void;
default(): void;
toolbar(): void;
tabs(): void;
"before-card"(): void;
"after-card"(): void;
headerRight(): void;
"context-actions"(): void;
}> & {
title(): void;
subtitle(): void;
avatar(): void;
grid(): void;
footer(): void;
default(): void;
toolbar(): void;
tabs(): void;
"before-card"(): void;
"after-card"(): void;
headerRight(): void;
"context-actions"(): void;
};
});
"mt-button": {
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
is?: import('vue').Component | string;
disabled?: boolean;
variant?: "primary" | "secondary" | "tertiary" | "critical" | "action";
ghost?: boolean;
size?: "x-small" | "small" | "default" | "large";
square?: boolean;
block?: boolean;
link?: string;
isLoading?: boolean;
}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
size: "x-small" | "small" | "default" | "large";
link: string;
variant: "primary" | "secondary" | "tertiary" | "critical" | "action";
is: import('vue').Component | string;
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{
is?: import('vue').Component | string;
disabled?: boolean;
variant?: "primary" | "secondary" | "tertiary" | "critical" | "action";
ghost?: boolean;
size?: "x-small" | "small" | "default" | "large";
square?: boolean;
block?: boolean;
link?: string;
isLoading?: boolean;
}> & Readonly<{}>, {}, {}, {}, {}, {
size: "x-small" | "small" | "default" | "large";
link: string;
variant: "primary" | "secondary" | "tertiary" | "critical" | "action";
is: import('vue').Component | string;
}>;
__isFragment?: never;
__isTeleport?: never;
__isSuspense?: never;
} & import('vue').ComponentOptionsBase<Readonly<{
is?: import('vue').Component | string;
disabled?: boolean;
variant?: "primary" | "secondary" | "tertiary" | "critical" | "action";
ghost?: boolean;
size?: "x-small" | "small" | "default" | "large";
square?: boolean;
block?: boolean;
link?: string;
isLoading?: boolean;
}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
size: "x-small" | "small" | "default" | "large";
link: string;
variant: "primary" | "secondary" | "tertiary" | "critical" | "action";
is: import('vue').Component | string;
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
$slots: Readonly<{
default: null;
iconFront: {
size: number;
};
iconBack: {
size: number;
};
}> & {
default: null;
iconFront: {
size: number;
};
iconBack: {
size: number;
};
};
});
"mt-select": import('vue').DefineComponent<import('vue').ExtractPropTypes<{
options: {
type: ArrayConstructor;
required: true;
};
enableMultiSelection: {
type: BooleanConstructor;
default: boolean;
};
modelValue: {
type: PropType<string | number | boolean | unknown[] | null | object | undefined>;
required: false;
default: null;
};
labelProperty: {
type: PropType<string | string[]>;
required: false;
default: string;
};
valueProperty: {
type: StringConstructor;
required: false;
default: string;
};
valueLimit: {
type: NumberConstructor;
required: false;
default: number;
};
label: {
type: StringConstructor;
required: false;
default: string;
};
placeholder: {
type: StringConstructor;
required: false;
default: string;
};
alwaysShowPlaceholder: {
type: BooleanConstructor;
required: false;
default: boolean;
};
isLoading: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disabled: {
type: BooleanConstructor;
required: false;
default: boolean;
};
hideClearableButton: {
type: BooleanConstructor;
required: false;
default: boolean;
};
highlightSearchTerm: {
type: BooleanConstructor;
required: false;
default: boolean;
};
searchFunction: {
type: FunctionConstructor;
required: false;
default: ({ options, labelProperty, searchTerm, }: {
options: any;
labelProperty: string | string[];
searchTerm: string;
}) => any;
};
error: {
type: ObjectConstructor;
required: false;
default: null;
};
isInherited: {
type: BooleanConstructor;
required: false;
default: boolean;
};
isInheritanceField: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disableInheritanceToggle: {
type: BooleanConstructor;
required: false;
default: boolean;
};
small: {
type: BooleanConstructor;
required: false;
default: boolean;
};
}>, {
t: import('vue-i18n').ComposerTranslation<{
en: {
messageNoResults: string;
};
de: {
messageNoResults: string;
};
}, "en" | "de", import('@intlify/core-base').RemoveIndexSignature<{
[x: string]: import('vue-i18n').LocaleMessageValue<import('vue-i18n').VueMessageType>;
}>, never, "messageNoResults", "messageNoResults">;
getKey: typeof import('../../../utils/object').getPropertyValue;
}, {
searchTerm: string;
limit: number;
searchResults: never[];
isSearchResultsLoading: boolean;
}, {
visibleValues(): any[];
totalValuesCount(): number;
invisibleValueCount(): number;
currentValue: {
get(): string | number | boolean | unknown[] | object | null | undefined;
set(newValue: string | number | boolean | unknown[] | null | undefined): void;
};
visibleResults(): any[];
componentClasses(): Record<string, boolean>;
}, {
isSelected(item: any): any;
addItem(item: any): void;
remove(item: any): void;
removeLastItem(): void;
expandValueLimit(): void;
onSearchTermChange(term: string): void;
searchTermDebounced: (...args: any[]) => void;
resetActiveItem(): void;
onSelectExpanded(): void;
onSelectCollapsed(): void;
onClearSelection(): void;
getFocusElement(): HTMLElement;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("inheritance-remove" | "inheritance-restore" | "update:modelValue" | "change" | "paginate" | "search-term-change" | "item-remove" | "item-add" | "display-values-expand")[], "inheritance-remove" | "inheritance-restore" | "update:modelValue" | "change" | "paginate" | "search-term-change" | "item-remove" | "item-add" | "display-values-expand", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
options: {
type: ArrayConstructor;
required: true;
};
enableMultiSelection: {
type: BooleanConstructor;
default: boolean;
};
modelValue: {
type: PropType<string | number | boolean | unknown[] | null | object | undefined>;
required: false;
default: null;
};
labelProperty: {
type: PropType<string | string[]>;
required: false;
default: string;
};
valueProperty: {
type: StringConstructor;
required: false;
default: string;
};
valueLimit: {
type: NumberConstructor;
required: false;
default: number;
};
label: {
type: StringConstructor;
required: false;
default: string;
};
placeholder: {
type: StringConstructor;
required: false;
default: string;
};
alwaysShowPlaceholder: {
type: BooleanConstructor;
required: false;
default: boolean;
};
isLoading: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disabled: {
type: BooleanConstructor;
required: false;
default: boolean;
};
hideClearableButton: {
type: BooleanConstructor;
required: false;
default: boolean;
};
highlightSearchTerm: {
type: BooleanConstructor;
required: false;
default: boolean;
};
searchFunction: {
type: FunctionConstructor;
required: false;
default: ({ options, labelProperty, searchTerm, }: {
options: any;
labelProperty: string | string[];
searchTerm: string;
}) => any;
};
error: {
type: ObjectConstructor;
required: false;
default: null;
};
isInherited: {
type: BooleanConstructor;
required: false;
default: boolean;
};
isInheritanceField: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disableInheritanceToggle: {
type: BooleanConstructor;
required: false;
default: boolean;
};
small: {
type: BooleanConstructor;
required: false;
default: boolean;
};
}>> & Readonly<{
onChange?: ((...args: any[]) => any) | undefined;
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
"onInheritance-remove"?: ((...args: any[]) => any) | undefined;
"onInheritance-restore"?: ((...args: any[]) => any) | undefined;
onPaginate?: ((...args: any[]) => any) | undefined;
"onSearch-term-change"?: ((...args: any[]) => any) | undefined;
"onItem-remove"?: ((...args: any[]) => any) | undefined;
"onItem-add"?: ((...args: any[]) => any) | undefined;
"onDisplay-values-expand"?: ((...args: any[]) => any) | undefined;
}>, {
small: boolean;
label: string;
disabled: boolean;
isInherited: boolean;
error: Record<string, any>;
modelValue: string | number | boolean | object | unknown[] | null | undefined;
placeholder: string;
isLoading: boolean;
isInheritanceField: boolean;
disableInheritanceToggle: boolean;
labelProperty: string | string[];
valueProperty: string;
alwaysShowPlaceholder: boolean;
enableMultiSelection: boolean;
valueLimit: number;
hideClearableButton: boolean;
highlightSearchTerm: boolean;
searchFunction: Function;
}, {}, {
"mt-select-base": import('vue').DefineComponent<import('vue').ExtractPropTypes<{
label: {
type: StringConstructor;
required: true;
};
isLoading: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disabled: {
type: BooleanConstructor;
required: false;
default: boolean;
};
showClearableButton: {
type: BooleanConstructor;
required: false;
default: boolean;
};
error: {
type: ObjectConstructor;
required: false;
default: null;
};
isInherited: {
type: BooleanConstructor;
required: false;
default: boolean;
};
isInheritanceField: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disableInheritanceToggle: {
type: BooleanConstructor;
required: false;
default: boolean;
};
}>, {}, {
expanded: boolean;
suffixWidth: number;
}, {
mtFieldClasses(): {
"has--focus": boolean;
};
selectionIndicatorsRight(): string;
}, {
updateSuffixWidth(): void;
toggleExpand(): void;
expand(): void;
collapse(event?: Event): void;
focusPreviousFormElement(): void;
listenToClickOutside(event: Event): void;
computePath(event: Event): EventTarget[];
emitClear(): void;
focusParentSelect(event: KeyboardEvent): void;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("inheritance-remove" | "inheritance-restore" | "clear" | "select-expanded" | "select-collapsed")[], "inheritance-remove" | "inheritance-restore" | "clear" | "select-expanded" | "select-collapsed", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
label: {
type: StringConstructor;
required: true;
};
isLoading: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disabled: {
type: BooleanConstructor;
required: false;
default: boolean;
};
showClearableButton: {
type: BooleanConstructor;
required: false;
default: boolean;
};
error: {
type: ObjectConstructor;
required: false;
default: null;
};
isInherited: {
type: BooleanConstructor;
required: false;
default: boolean;
};
isInheritanceField: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disableInheritanceToggle: {
type: BooleanConstructor;
required: false;
default: boolean;
};
}>> & Readonly<{
"onInheritance-remove"?: ((...args: any[]) => any) | undefined;
"onInheritance-restore"?: ((...args: any[]) => any) | undefined;
onClear?: ((...args: any[]) => any) | undefined;
"onSelect-expanded"?: ((...args: any[]) => any) | undefined;
"onSelect-collapsed"?: ((...args: any[]) => any) | undefined;
}>, {
disabled: boolean;
isInherited: boolean;
error: Record<string, any>;
isLoading: boolean;
isInheritanceField: boolean;
disableInheritanceToggle: boolean;
showClearableButton: boolean;
}, {}, {
"mt-base-field": import('vue').DefineComponent<import('vue').ExtractPropTypes<{
disabled: {
type: BooleanConstructor;
required: false;
default: boolean;
};
required: {
type: BooleanConstructor;
required: false;
default: boolean;
};
isInherited: {
type: BooleanConstructor;
required: false;
default: boolean;
};
isInheritanceField: {
type: BooleanConstructor;
required: false;
default: boolean;
};
disableInheritanceToggle: {
type: BooleanConstructor;
required: false;
default: boolean;
};
copyable: {
type: BooleanConstructor;
required: false;
default: boolean;
};
copyableTooltip: {
type: BooleanConstructor;
required: false;
default: boolean;
};
hasFocus: {
type: BooleanConstructor;
required: true;
};
helpText: {
type: StringConstructor;
required: false;
default: string;
};
copyableText: {
type: StringConstructor;
required: false;
default: string;
};
size: {
type: StringConstructor;
required: false;
default: string;
validator(value: string): boolean;
};
name: {
type: StringConstructor;
required: false;
default: null;
};
}>, {
hasSlotContent: (slot: import('vue').Slot | undefined | null, props?: any) => boolean;
future: {
removeCardWidth: boolean;
removeDefaultMargin: boolean;
};
}, {
id: string | undefined;
}, {
identification(): string;
showLabel(): boolean;
mtFieldLabelClasses(): {
"is--required": boolean;
};
mtBlockSize(): string;
hasError(): boolean;
}, {}, import('vue').DefineComponent<import('vue').ExtractPropTypes<{
validation: {
type: (BooleanConstructor | ObjectConstructor | StringConstructor | ArrayConstructor)[];
required: false;
default: null;
};
}>, {}, {}, {
isValid(): boolean;
}, {
validate(value: unknown): boolean;
validateRule(value: unknown, rule: string): boolean;
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
validation: {
type: (BooleanConstructor | ObjectConstructor | StringConstructor | ArrayConstructor)[];
required: false;
default: null;
};
}>> & Readonly<{}>, {
validation: string | boolean | Record<string, any> | unknown[];
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<import('vue').ExtractPropTypes<{
mapInheritance: {
type: ObjectConstructor;
required: false;
default: null;
};
name: {
type: StringConstructor;
required: false;
default: null;
};
}>, {}, {}, {
formFieldName(): string | undefined;
}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
mapInheritance: {
type: ObjectConstructor;
required: false;
default: null;
};
name: {
type: StringConstructor;
required: false;
default: null;
};
}>> & Reado