@mantine-vue/core 2.3.1 → 3.0.0

package/lib/components/Accordion/Accordion.d.ts

@@ -1,8 +1,13 @@
-import { type PropType } from 'vue';
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
 import { type MantineRadius } from '../../core';
 import { type AccordionChevronPosition, type AccordionHeadingOrder, type AccordionValue } from './Accordion.context';
 export type AccordionStylesNames = 'root' | 'content' | 'item' | 'panel' | 'icon' | 'chevron' | 'label' | 'itemTitle' | 'control';
 export type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';
+export interface AccordionSlots {
+    default?: () => VNodeChild;
+    /** Custom chevron used by all Accordion.Control components, alternative to the `chevron` prop */
+    chevron?: () => VNodeChild;
+}
 export declare const Accordion: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
         multiple: {
@@ -37,6 +42,10 @@ export declare const Accordion: {
             type: BooleanConstructor;
             default: undefined;
         };
+        disableCollapse: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
         chevronPosition: {
             type: PropType<AccordionChevronPosition>;
             default: undefined;
@@ -107,8 +116,9 @@ export declare const Accordion: {
         chevronPosition: AccordionChevronPosition;
         chevronSize: string | number;
         disableChevronRotation: boolean;
+        disableCollapse: boolean;
         chevronIconSize: string | number;
-    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+    }, true, {}, SlotsType<AccordionSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -148,6 +158,10 @@ export declare const Accordion: {
             type: BooleanConstructor;
             default: undefined;
         };
+        disableCollapse: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
         chevronPosition: {
             type: PropType<AccordionChevronPosition>;
             default: undefined;
@@ -218,6 +232,7 @@ export declare const Accordion: {
         chevronPosition: AccordionChevronPosition;
         chevronSize: string | number;
         disableChevronRotation: boolean;
+        disableCollapse: boolean;
         chevronIconSize: string | number;
     }>;
     __isFragment?: never;
@@ -256,6 +271,10 @@ export declare const Accordion: {
         type: BooleanConstructor;
         default: undefined;
     };
+    disableCollapse: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     chevronPosition: {
         type: PropType<AccordionChevronPosition>;
         default: undefined;
@@ -326,8 +345,9 @@ export declare const Accordion: {
     chevronPosition: AccordionChevronPosition;
     chevronSize: string | number;
     disableChevronRotation: boolean;
+    disableCollapse: boolean;
     chevronIconSize: string | number;
-}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+}, {}, string, SlotsType<AccordionSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     classes: Record<string, string>;
     varsResolver: (theme: import("../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
     Item: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -508,7 +528,7 @@ export declare const Accordion: {
         icon: import("../..").MantineNode;
         onKeyDown: (event: KeyboardEvent) => void;
         chevron: import("../..").MantineNode;
-    }, import("vue").SlotsType<import("./AccordionControl/AccordionControl").AccordionControlSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+    }, SlotsType<import("./AccordionControl/AccordionControl").AccordionControlSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
     Chevron: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         size: {
             type: PropType<number | string>;

package/lib/components/Accordion/index.d.ts

@@ -1,5 +1,5 @@
 export { Accordion } from './Accordion';
-export type { AccordionStylesNames, AccordionVariant } from './Accordion';
+export type { AccordionSlots, AccordionStylesNames, AccordionVariant } from './Accordion';
 export { AccordionChevron } from './AccordionChevron';
 export { AccordionControl } from './AccordionControl/AccordionControl';
 export type { AccordionControlStylesNames } from './AccordionControl/AccordionControl';

package/lib/components/AngleSlider/AngleSlider.d.ts

@@ -9,6 +9,7 @@ export interface AngleSliderMark {
 }
 export interface AngleSliderProps {
     step?: number;
+    modelValue?: number;
     value?: number;
     defaultValue?: number;
     onChange?: (value: number) => void;
@@ -34,6 +35,10 @@ export declare const AngleSlider: import("../..").WithBoxProps<import("vue").Def
         type: NumberConstructor;
         default: undefined;
     };
+    modelValue: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     value: {
         type: NumberConstructor;
         default: undefined;
@@ -112,11 +117,15 @@ export declare const AngleSlider: import("../..").WithBoxProps<import("vue").Def
     };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     step: {
         type: NumberConstructor;
         default: undefined;
     };
+    modelValue: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     value: {
         type: NumberConstructor;
         default: undefined;
@@ -193,7 +202,10 @@ export declare const AngleSlider: import("../..").WithBoxProps<import("vue").Def
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
     size: number;
     name: string;
     onChange: (value: number) => void;
@@ -211,6 +223,7 @@ export declare const AngleSlider: import("../..").WithBoxProps<import("vue").Def
     withLabel: boolean;
     marks: AngleSliderMark[];
     thumbSize: number;
+    modelValue: number;
     formatLabel: (value: number) => any;
     restrictToMarks: boolean;
     hiddenInputProps: Record<string, any>;

package/lib/components/Autocomplete/Autocomplete.d.ts

@@ -92,6 +92,7 @@ export declare const Autocomplete: import("vue").DefineComponent<import("vue").E
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:modelValue': (value: string) => boolean;
+    change: (value: string) => boolean;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
@@ -138,13 +139,14 @@ export declare const Autocomplete: import("vue").DefineComponent<import("vue").E
         default: boolean;
     };
 }>> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     data: ComboboxGenericData;
     value: string;
     defaultValue: string;
-    clearable: boolean;
     modelValue: string;
+    clearable: boolean;
     withScrollArea: boolean;
     dropdownOpened: boolean;
     defaultDropdownOpened: boolean;

package/lib/components/Cascader/Cascader.d.ts

@@ -0,0 +1,315 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type MantineNode } from '../../core';
+export interface CascaderOption {
+    value: string;
+    label?: VNodeChild;
+    children?: CascaderOption[];
+    disabled?: boolean;
+}
+export interface CascaderFormatValueInput {
+    value: string[];
+    options: CascaderOption[];
+}
+export type CascaderFormatValue = (input: CascaderFormatValueInput) => string;
+export interface CascaderSlots {
+    label?: () => VNodeChild;
+    description?: () => VNodeChild;
+    error?: () => VNodeChild;
+    leftSection?: () => VNodeChild;
+    rightSection?: () => VNodeChild;
+    separator?: () => VNodeChild;
+    nothingFoundMessage?: () => VNodeChild;
+    /** Alias used by other Combobox-based components. */
+    nothingFound?: () => VNodeChild;
+    renderSearchOption?: (input: {
+        query: string;
+        options: CascaderOption[];
+    }) => VNodeChild;
+    renderOption?: (input: {
+        option: CascaderOption;
+        level: number;
+    }) => VNodeChild;
+}
+export interface CascaderProps {
+    data: CascaderOption[];
+    modelValue?: string[] | null;
+    value?: string[] | null;
+    defaultValue?: string[] | null;
+    onChange?: (value: string[] | null, options: CascaderOption[]) => void;
+    changeOnSelect?: boolean;
+    closeOnSelect?: boolean;
+    allowDeselect?: boolean;
+    withCheckIcon?: boolean;
+    checkIconPosition?: 'left' | 'right';
+    withColumns?: boolean;
+    expandTrigger?: 'click' | 'hover';
+    searchable?: boolean;
+    searchValue?: string;
+    defaultSearchValue?: string;
+    onSearchChange?: (value: string) => void;
+    filter?: (query: string, options: CascaderOption[]) => boolean;
+    renderSearchOption?: (query: string, options: CascaderOption[]) => VNodeChild;
+    formatValue?: CascaderFormatValue;
+    renderOption?: (option: CascaderOption, level: number) => VNodeChild;
+    separator?: MantineNode;
+    columnWidth?: number | string;
+    maxDisplayedLevels?: number;
+    previousLevelsControlLabel?: string;
+    nextLevelsControlLabel?: string;
+    maxDropdownHeight?: number | string;
+    nothingFoundMessage?: MantineNode;
+    clearable?: boolean;
+    clearSectionMode?: 'both' | 'rightSection' | 'clear';
+    clearButtonProps?: Record<string, unknown>;
+    onClear?: () => void;
+    dropdownOpened?: boolean;
+    defaultDropdownOpened?: boolean;
+    onDropdownOpen?: () => void;
+    onDropdownClose?: () => void;
+    comboboxProps?: Record<string, unknown>;
+    scrollAreaProps?: Record<string, unknown>;
+    chevronColor?: string;
+    hiddenInputProps?: Record<string, unknown>;
+    openOnFocus?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    size?: string | number;
+    classNames?: Record<string, unknown> | ((...args: any[]) => Record<string, unknown>);
+    styles?: Record<string, unknown> | ((...args: any[]) => Record<string, unknown>);
+    unstyled?: boolean;
+    [key: string]: unknown;
+}
+export declare const Cascader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<CascaderOption[]>;
+        required: true;
+    };
+    modelValue: PropType<string[] | null>;
+    value: PropType<string[] | null>;
+    defaultValue: PropType<string[] | null>;
+    onChange: PropType<CascaderProps["onChange"]>;
+    changeOnSelect: BooleanConstructor;
+    closeOnSelect: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    allowDeselect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    withCheckIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkIconPosition: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    withColumns: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandTrigger: {
+        type: PropType<"click" | "hover">;
+        default: string;
+    };
+    searchable: BooleanConstructor;
+    searchValue: StringConstructor;
+    defaultSearchValue: StringConstructor;
+    onSearchChange: PropType<(value: string) => void>;
+    filter: PropType<CascaderProps["filter"]>;
+    renderSearchOption: PropType<CascaderProps["renderSearchOption"]>;
+    formatValue: PropType<CascaderFormatValue>;
+    renderOption: PropType<CascaderProps["renderOption"]>;
+    separator: {
+        type: PropType<MantineNode>;
+        default: undefined;
+    };
+    columnWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxDisplayedLevels: {
+        type: NumberConstructor;
+        default: number;
+    };
+    previousLevelsControlLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    nextLevelsControlLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxDropdownHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    nothingFoundMessage: {
+        type: PropType<MantineNode>;
+        default: undefined;
+    };
+    clearable: BooleanConstructor;
+    clearSectionMode: {
+        type: PropType<"both" | "rightSection" | "clear">;
+        default: string;
+    };
+    clearButtonProps: ObjectConstructor;
+    onClear: PropType<() => void>;
+    dropdownOpened: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    defaultDropdownOpened: BooleanConstructor;
+    onDropdownOpen: PropType<() => void>;
+    onDropdownClose: PropType<() => void>;
+    comboboxProps: ObjectConstructor;
+    scrollAreaProps: ObjectConstructor;
+    chevronColor: StringConstructor;
+    hiddenInputProps: ObjectConstructor;
+    openOnFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readOnly: BooleanConstructor;
+    disabled: BooleanConstructor;
+    size: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    classNames: (ObjectConstructor | FunctionConstructor)[];
+    styles: (ObjectConstructor | FunctionConstructor)[];
+    unstyled: BooleanConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:searchValue")[], "change" | "update:modelValue" | "update:searchValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<CascaderOption[]>;
+        required: true;
+    };
+    modelValue: PropType<string[] | null>;
+    value: PropType<string[] | null>;
+    defaultValue: PropType<string[] | null>;
+    onChange: PropType<CascaderProps["onChange"]>;
+    changeOnSelect: BooleanConstructor;
+    closeOnSelect: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    allowDeselect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    withCheckIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkIconPosition: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    withColumns: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandTrigger: {
+        type: PropType<"click" | "hover">;
+        default: string;
+    };
+    searchable: BooleanConstructor;
+    searchValue: StringConstructor;
+    defaultSearchValue: StringConstructor;
+    onSearchChange: PropType<(value: string) => void>;
+    filter: PropType<CascaderProps["filter"]>;
+    renderSearchOption: PropType<CascaderProps["renderSearchOption"]>;
+    formatValue: PropType<CascaderFormatValue>;
+    renderOption: PropType<CascaderProps["renderOption"]>;
+    separator: {
+        type: PropType<MantineNode>;
+        default: undefined;
+    };
+    columnWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxDisplayedLevels: {
+        type: NumberConstructor;
+        default: number;
+    };
+    previousLevelsControlLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    nextLevelsControlLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxDropdownHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    nothingFoundMessage: {
+        type: PropType<MantineNode>;
+        default: undefined;
+    };
+    clearable: BooleanConstructor;
+    clearSectionMode: {
+        type: PropType<"both" | "rightSection" | "clear">;
+        default: string;
+    };
+    clearButtonProps: ObjectConstructor;
+    onClear: PropType<() => void>;
+    dropdownOpened: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    defaultDropdownOpened: BooleanConstructor;
+    onDropdownOpen: PropType<() => void>;
+    onDropdownClose: PropType<() => void>;
+    comboboxProps: ObjectConstructor;
+    scrollAreaProps: ObjectConstructor;
+    chevronColor: StringConstructor;
+    hiddenInputProps: ObjectConstructor;
+    openOnFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readOnly: BooleanConstructor;
+    disabled: BooleanConstructor;
+    size: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    classNames: (ObjectConstructor | FunctionConstructor)[];
+    styles: (ObjectConstructor | FunctionConstructor)[];
+    unstyled: BooleanConstructor;
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:searchValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: string | number;
+    disabled: boolean;
+    separator: MantineNode;
+    columnWidth: string | number;
+    unstyled: boolean;
+    clearable: boolean;
+    clearSectionMode: "clear" | "both" | "rightSection";
+    readOnly: boolean;
+    withCheckIcon: boolean;
+    maxDropdownHeight: string | number;
+    checkIconPosition: "left" | "right";
+    nothingFoundMessage: MantineNode;
+    dropdownOpened: boolean | undefined;
+    defaultDropdownOpened: boolean;
+    searchable: boolean;
+    allowDeselect: boolean;
+    openOnFocus: boolean;
+    changeOnSelect: boolean;
+    closeOnSelect: boolean | undefined;
+    withColumns: boolean;
+    expandTrigger: "click" | "hover";
+    maxDisplayedLevels: number;
+    previousLevelsControlLabel: string;
+    nextLevelsControlLabel: string;
+}, SlotsType<CascaderSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/components/Cascader/cascader-utils.d.ts

@@ -0,0 +1,11 @@
+import type { CascaderOption } from './Cascader';
+export interface CascaderFlatPath {
+    path: string[];
+    options: CascaderOption[];
+    leaf: boolean;
+    disabled: boolean;
+}
+export declare function cascaderOptionHasChildren(option: CascaderOption): boolean;
+export declare function getCascaderColumns(data: CascaderOption[], activePath: string[]): CascaderOption[][];
+export declare function getCascaderPathOptions(data: CascaderOption[], value: string[] | null | undefined): CascaderOption[];
+export declare function flattenCascaderPaths(data: CascaderOption[]): CascaderFlatPath[];

package/lib/components/Cascader/index.d.ts

@@ -0,0 +1,4 @@
+export { Cascader } from './Cascader';
+export type { CascaderProps, CascaderOption, CascaderFormatValue, CascaderFormatValueInput, CascaderSlots, } from './Cascader';
+export type { CascaderFlatPath } from './cascader-utils';
+export { cascaderOptionHasChildren, flattenCascaderPaths, getCascaderColumns, getCascaderPathOptions, } from './cascader-utils';