@mantine-vue/core 3.0.0 → 3.1.0

package/lib/components/Card/Card.types.d.ts

@@ -0,0 +1,66 @@
+import type { VNodeChild } from 'vue';
+import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { BoxProps, MantineRadius, MantineSpacing, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
+import type { CardSection } from './CardSection/CardSection';
+/** Props declared by `Card` itself. See `CardProps` for the full public type. */
+export interface CardOwnProps extends StylesApiProps<CardProps> {
+    /** Receives the root DOM node. The factory narrows this to the element the selected root renders. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Root element or component rendered by `Card`.
+     *
+     * @default 'div'
+     */
+    component?: MantineElementType;
+    /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */
+    shadow?: string;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem
+     *
+     * @default theme.defaultRadius
+     */
+    radius?: MantineRadius;
+    /**
+     * Adds border to the card
+     *
+     * @default false
+     */
+    withBorder?: boolean;
+    /**
+     * Key of `theme.spacing` or any valid CSS value to set padding
+     *
+     * @default 'md'
+     */
+    padding?: MantineSpacing;
+    /**
+     * Card orientation
+     *
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+export interface CardProps extends Omit<BoxProps, keyof CardOwnProps>, CardOwnProps {
+}
+export interface CardSlots {
+    default?: () => VNodeChild;
+}
+export type CardStylesNames = 'root' | 'section';
+export type CardCssVariables = {
+    root: '--card-padding';
+};
+/** Public contract of `Card`. `component` and `rootRef` come from the factory. */
+export type CardFactory = PolymorphicFactory<{
+    props: Omit<CardProps, 'component' | 'rootRef'>;
+    slots: CardSlots;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: 'div';
+    defaultRef: HTMLDivElement;
+    stylesNames: CardStylesNames;
+    vars: CardCssVariables;
+    staticComponents: {
+        Section: typeof CardSection;
+    };
+}>;

package/lib/components/Card/Card.vue.d.ts

@@ -0,0 +1,12 @@
+import type { CardOwnProps, CardSlots } from './Card.types';
+export declare const varsResolver: (theme: import("../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/Card/CardSection/CardSection.d.ts

@@ -1,70 +1,13 @@
-import { type PropType } from 'vue';
-export declare const CardSection: import("../../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    component: {
-        type: StringConstructor;
-        default: string;
-    };
-    withBorder: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    inheritPadding: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    mod: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-}>, () => 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<{
-    component: {
-        type: StringConstructor;
-        default: string;
-    };
-    withBorder: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    inheritPadding: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    mod: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    mod: any;
-    component: string;
-    vars: Function | Record<string, any>;
-    withBorder: boolean;
-    inheritPadding: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const CardSection: import("../../..").MantinePolymorphicComponent<{
+    props: Omit<import("./CardSection.types").CardSectionProps, "component" | "rootRef">;
+    slots: import("./CardSection.types").CardSectionSlots;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: import("./CardSection.types").CardSectionStylesNames;
+    compound: true;
+}, "div">;
+export type { CardSectionFactory, CardSectionOwnProps, CardSectionProps, CardSectionSlots, CardSectionStylesNames, } from './CardSection.types';

package/lib/components/Card/CardSection/CardSection.types.d.ts

@@ -0,0 +1,50 @@
+import type { VNodeChild } from 'vue';
+import type { BoxMod, BoxProps, StylesApiProps, MantineElementType, PolymorphicFactory } from '../../../core';
+/** Props declared by `CardSection` itself. See `CardSectionProps` for the full public type. */
+export interface CardSectionOwnProps {
+    /**
+     * Root element or component rendered by `CardSection`.
+     *
+     * @default 'div'
+     */
+    component?: MantineElementType;
+    /**
+     * Adds border to the root element
+     *
+     * @default false
+     */
+    withBorder?: boolean;
+    /**
+     * If set, the section inherits padding from the parent `Card`
+     *
+     * @default false
+     */
+    inheritPadding?: boolean;
+    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    mod?: BoxMod;
+    /** Class names applied to Card elements. */
+    classNames?: StylesApiProps<CardSectionFactory>['classNames'];
+    /** Inline styles applied to Card elements. */
+    styles?: StylesApiProps<CardSectionFactory>['styles'];
+    /** CSS variables applied to Card elements. */
+    vars?: StylesApiProps<CardSectionFactory>['vars'];
+}
+export interface CardSectionSlots {
+    /** Section content. */
+    default?: () => VNodeChild;
+}
+export interface CardSectionProps extends Omit<BoxProps, keyof CardSectionOwnProps>, CardSectionOwnProps {
+}
+export type CardSectionStylesNames = 'section';
+export type CardSectionFactory = PolymorphicFactory<{
+    props: Omit<CardSectionProps, 'component' | 'rootRef'>;
+    slots: CardSectionSlots;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: 'div';
+    defaultRef: HTMLDivElement;
+    stylesNames: CardSectionStylesNames;
+    compound: true;
+}>;

package/lib/components/Card/CardSection/CardSection.vue.d.ts

@@ -0,0 +1,11 @@
+import type { CardSectionOwnProps, CardSectionSlots } from './CardSection.types';
+type __VLS_Slots = CardSectionSlots;
+declare const __VLS_base: import("vue").DefineComponent<CardSectionOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardSectionOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,315 +1,68 @@
-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>;
+export declare const Cascader: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{
+        onClear?: (() => any) | undefined;
+        onChange?: ((value: string[] | null, options: import("./Cascader.types").CascaderOption[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string[] | null) => any) | undefined;
+        "onDropdown-open"?: (() => any) | undefined;
+        "onDropdown-close"?: (() => any) | undefined;
+        "onSearch-change"?: ((value: string) => any) | undefined;
+        "onUpdate:searchValue"?: ((value: string) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        clear: () => any;
+        change: (value: string[] | null, options: import("./Cascader.types").CascaderOption[]) => any;
+        "update:modelValue": (value: string[] | null) => any;
+        "dropdown-open": () => any;
+        "dropdown-close": () => any;
+        "search-change": (value: string) => any;
+        "update:searchValue": (value: string) => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{
+        onClear?: (() => any) | undefined;
+        onChange?: ((value: string[] | null, options: import("./Cascader.types").CascaderOption[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string[] | null) => any) | undefined;
+        "onDropdown-open"?: (() => any) | undefined;
+        "onDropdown-close"?: (() => any) | undefined;
+        "onSearch-change"?: ((value: string) => any) | undefined;
+        "onUpdate:searchValue"?: ((value: string) => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onChange?: ((value: string[] | null, options: import("./Cascader.types").CascaderOption[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[] | null) => any) | undefined;
+    "onDropdown-open"?: (() => any) | undefined;
+    "onDropdown-close"?: (() => any) | undefined;
+    "onSearch-change"?: ((value: string) => any) | undefined;
+    "onUpdate:searchValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    change: (value: string[] | null, options: import("./Cascader.types").CascaderOption[]) => any;
+    "update:modelValue": (value: string[] | null) => any;
+    "dropdown-open": () => any;
+    "dropdown-close": () => any;
+    "search-change": (value: string) => any;
+    "update:searchValue": (value: string) => any;
+}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./Cascader.types").CascaderSlots;
+}) & {
+    classes: {
+        label: string;
+        root: string;
+        wrapper: string;
+        section: string;
+        input: string;
+        bottomSection: string;
+        required: string;
+        description: string;
+        error: string;
+    };
+};
+export type { CascaderFormatValue, CascaderFormatValueInput, CascaderOption, CascaderProps, CascaderSlots, } from './Cascader.types';