@mantine-vue/core 3.0.0 → 3.2.0

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

@@ -1,547 +1,59 @@
-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: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        value: {
-            type: PropType<string | string[] | null>;
-            default: undefined;
-        };
-        defaultValue: {
-            type: PropType<string | string[] | null>;
-            default: undefined;
-        };
-        onChange: {
-            type: PropType<(value: AccordionValue<any>) => void>;
-            default: undefined;
-        };
-        id: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        loop: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        transitionDuration: {
-            type: NumberConstructor;
-            default: undefined;
-        };
-        disableChevronRotation: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        disableCollapse: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        chevronPosition: {
-            type: PropType<AccordionChevronPosition>;
-            default: undefined;
-        };
-        chevronSize: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        chevronIconSize: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        order: {
-            type: PropType<AccordionHeadingOrder>;
-            default: undefined;
-        };
-        chevron: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        variant: {
-            type: PropType<AccordionVariant>;
-            default: undefined;
-        };
-        radius: {
-            type: PropType<MantineRadius>;
-            default: undefined;
-        };
-        keepMounted: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        vars: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        unstyled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        loop: boolean;
-        radius: MantineRadius;
-        variant: AccordionVariant;
-        onChange: (value: AccordionValue<any>) => void;
-        value: string | string[] | null;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        defaultValue: string | string[] | null;
-        id: string;
-        transitionDuration: number;
-        keepMounted: boolean;
-        multiple: boolean;
-        order: AccordionHeadingOrder;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-        chevron: any;
-        chevronPosition: AccordionChevronPosition;
-        chevronSize: string | number;
-        disableChevronRotation: boolean;
-        disableCollapse: boolean;
-        chevronIconSize: string | number;
-    }, true, {}, SlotsType<AccordionSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./Accordion.types").AccordionOwnProps> & Readonly<{
+        onChange?: ((value: string | string[] | null) => any) | undefined;
+        "onUpdate:value"?: ((value: string | string[] | null) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (value: string | string[] | null) => any;
+        "update:value": (value: string | string[] | null) => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import("vue").ExtractPropTypes<{
-        multiple: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        value: {
-            type: PropType<string | string[] | null>;
-            default: undefined;
-        };
-        defaultValue: {
-            type: PropType<string | string[] | null>;
-            default: undefined;
-        };
-        onChange: {
-            type: PropType<(value: AccordionValue<any>) => void>;
-            default: undefined;
-        };
-        id: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        loop: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        transitionDuration: {
-            type: NumberConstructor;
-            default: undefined;
-        };
-        disableChevronRotation: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        disableCollapse: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        chevronPosition: {
-            type: PropType<AccordionChevronPosition>;
-            default: undefined;
-        };
-        chevronSize: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        chevronIconSize: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        order: {
-            type: PropType<AccordionHeadingOrder>;
-            default: undefined;
-        };
-        chevron: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        variant: {
-            type: PropType<AccordionVariant>;
-            default: undefined;
-        };
-        radius: {
-            type: PropType<MantineRadius>;
-            default: undefined;
-        };
-        keepMounted: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        vars: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        unstyled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>, {}, {}, {}, {
-        loop: boolean;
-        radius: MantineRadius;
-        variant: AccordionVariant;
-        onChange: (value: AccordionValue<any>) => void;
-        value: string | string[] | null;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        defaultValue: string | string[] | null;
-        id: string;
-        transitionDuration: number;
-        keepMounted: boolean;
-        multiple: boolean;
-        order: AccordionHeadingOrder;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-        chevron: any;
-        chevronPosition: AccordionChevronPosition;
-        chevronSize: string | number;
-        disableChevronRotation: boolean;
-        disableCollapse: boolean;
-        chevronIconSize: string | number;
-    }>;
+    }, Readonly<import("./Accordion.types").AccordionOwnProps> & Readonly<{
+        onChange?: ((value: string | string[] | null) => any) | undefined;
+        "onUpdate:value"?: ((value: string | string[] | null) => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    multiple: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    value: {
-        type: PropType<string | string[] | null>;
-        default: undefined;
-    };
-    defaultValue: {
-        type: PropType<string | string[] | null>;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: AccordionValue<any>) => void>;
-        default: undefined;
-    };
-    id: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    loop: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    transitionDuration: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    disableChevronRotation: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    disableCollapse: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    chevronPosition: {
-        type: PropType<AccordionChevronPosition>;
-        default: undefined;
-    };
-    chevronSize: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    chevronIconSize: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    order: {
-        type: PropType<AccordionHeadingOrder>;
-        default: undefined;
-    };
-    chevron: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    variant: {
-        type: PropType<AccordionVariant>;
-        default: undefined;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    keepMounted: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    loop: boolean;
-    radius: MantineRadius;
-    variant: AccordionVariant;
-    onChange: (value: AccordionValue<any>) => void;
-    value: string | string[] | null;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    defaultValue: string | string[] | null;
-    id: string;
-    transitionDuration: number;
-    keepMounted: boolean;
-    multiple: boolean;
-    order: AccordionHeadingOrder;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    chevron: any;
-    chevronPosition: AccordionChevronPosition;
-    chevronSize: string | number;
-    disableChevronRotation: boolean;
-    disableCollapse: boolean;
-    chevronIconSize: string | number;
-}, {}, string, SlotsType<AccordionSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+} & import("vue").ComponentOptionsBase<Readonly<import("./Accordion.types").AccordionOwnProps> & Readonly<{
+    onChange?: ((value: string | string[] | null) => any) | undefined;
+    "onUpdate:value"?: ((value: string | string[] | null) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string | string[] | null) => any;
+    "update:value": (value: string | string[] | null) => 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("./Accordion.types").AccordionSlots;
+}) & {
     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<{
-        value: {
-            type: StringConstructor;
-            required: true;
-        };
-        mod: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            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<{
-        value: {
-            type: StringConstructor;
-            required: true;
-        };
-        mod: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-    }>> & Readonly<{}>, {
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        mod: any;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
-    Panel: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        onTransitionEnd: {
-            type: PropType<() => void>;
-            default: undefined;
-        };
-        onTransitionStart: {
-            type: PropType<() => void>;
-            default: undefined;
-        };
-        keepMounted: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            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<{
-        onTransitionEnd: {
-            type: PropType<() => void>;
-            default: undefined;
-        };
-        onTransitionStart: {
-            type: PropType<() => void>;
-            default: undefined;
-        };
-        keepMounted: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-    }>> & Readonly<{}>, {
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        onTransitionEnd: () => void;
-        onTransitionStart: () => void;
-        keepMounted: boolean;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
-    Control: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        chevron: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        icon: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        onClick: {
-            type: PropType<(event: MouseEvent) => void>;
-            default: undefined;
-        };
-        onKeydown: {
-            type: PropType<(event: KeyboardEvent) => void>;
-            default: undefined;
-        };
-        onKeyDown: {
-            type: PropType<(event: KeyboardEvent) => void>;
-            default: undefined;
-        };
-        mod: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            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<{
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        chevron: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        icon: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        onClick: {
-            type: PropType<(event: MouseEvent) => void>;
-            default: undefined;
-        };
-        onKeydown: {
-            type: PropType<(event: KeyboardEvent) => void>;
-            default: undefined;
-        };
-        onKeyDown: {
-            type: PropType<(event: KeyboardEvent) => void>;
-            default: undefined;
-        };
-        mod: {
-            type: PropType<any>;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-    }>> & Readonly<{}>, {
-        onKeydown: (event: KeyboardEvent) => void;
-        onClick: (event: MouseEvent) => void;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        disabled: boolean;
-        mod: any;
-        icon: import("../..").MantineNode;
-        onKeyDown: (event: KeyboardEvent) => void;
-        chevron: import("../..").MantineNode;
-    }, SlotsType<import("./AccordionControl/AccordionControl").AccordionControlSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
-    Chevron: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        size: {
-            type: PropType<number | string>;
-            default: number;
-        };
-    }>, () => 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<{
-        size: {
-            type: PropType<number | string>;
-            default: number;
-        };
-    }>> & Readonly<{}>, {
-        size: string | number;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    varsResolver: (theme: import("../../index.js").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+    Item: import("../../index.js").MantineComponent<{
+        props: Omit<import("./index.js").AccordionItemProps, "rootRef">;
+        ref: HTMLDivElement;
+        slots: import("./index.js").AccordionItemSlots;
+        element: "div";
+    }>;
+    Panel: import("../../index.js").MantineComponent<{
+        props: Omit<import("./index.js").AccordionPanelProps, "rootRef">;
+        slots: import("./index.js").AccordionPanelSlots;
+        ref: HTMLDivElement;
+        exposed: {
+            rootElement: Element | null;
+        };
+        element: "div";
+        stylesNames: import("./index.js").AccordionPanelStylesNames;
+        compound: true;
+    }>;
+    Control: import("../../index.js").MantineComponent<{
+        props: Omit<import("./index.js").AccordionControlProps, "rootRef">;
+        ref: HTMLButtonElement;
+        slots: import("./index.js").AccordionControlSlots;
+        element: "button";
+        stylesNames: import("./index.js").AccordionControlStylesNames;
+    }>;
+    Chevron: import("vue").DefineComponent<import("./AccordionChevron.types.js").AccordionChevronOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./AccordionChevron.types.js").AccordionChevronOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 };
+export type { AccordionCssVariables, AccordionOwnProps, AccordionProps, AccordionSlots, AccordionStylesNames, AccordionVariant, } from './Accordion.types';

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

@@ -0,0 +1,86 @@
+import type { VNodeChild } from 'vue';
+import type { BoxProps, MantineRadius, StylesApiProps } from '../../core';
+import type { AccordionChevronPosition, AccordionHeadingOrder } from './Accordion.context';
+export type AccordionStylesNames = 'root' | 'content' | 'item' | 'panel' | 'icon' | 'chevron' | 'label' | 'itemTitle' | 'control';
+export type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';
+export type AccordionCssVariables = {
+    root: '--accordion-transition-duration' | '--accordion-chevron-size' | '--accordion-radius';
+};
+export interface AccordionSlots {
+    /** `Accordion.Item` children. */
+    default?: () => VNodeChild;
+    /** Chevron used by every `Accordion.Control`. Alternative to the `chevron` prop. */
+    chevron?: () => VNodeChild;
+}
+/** Props declared by `Accordion` itself. See `AccordionProps` for the full public type. */
+export interface AccordionOwnProps extends StylesApiProps<AccordionProps> {
+    /**
+     * If set, more than one item can be open at a time and the value is an array.
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /** Value of the open item, or items in `multiple` mode. Bound with `v-model:value`. */
+    value?: string | string[] | null;
+    /** Uncontrolled initial open item, or items in `multiple` mode. */
+    defaultValue?: string | string[] | null;
+    /** Base `id` used to connect each control with its panel. Generated when not set. */
+    id?: string;
+    /**
+     * If set, arrow key navigation wraps from the last control to the first and back.
+     *
+     * @default true
+     */
+    loop?: boolean;
+    /** Duration of the open and close transition in ms. */
+    transitionDuration?: number;
+    /**
+     * If set, the chevron does not rotate when its item opens.
+     *
+     * @default false
+     */
+    disableChevronRotation?: boolean;
+    /**
+     * If set, clicking the open item does not close it. Ignored in `multiple` mode.
+     *
+     * @default false
+     */
+    disableCollapse?: boolean;
+    /**
+     * Side the chevron is rendered on.
+     *
+     * @default 'right'
+     */
+    chevronPosition?: AccordionChevronPosition;
+    /**
+     * Size of the chevron container.
+     *
+     * @default 'auto'
+     */
+    chevronSize?: string | number;
+    /**
+     * Size of the default chevron icon.
+     *
+     * @default 16
+     */
+    chevronIconSize?: string | number;
+    /** Heading level each control is wrapped in. No heading is rendered when not set. */
+    order?: AccordionHeadingOrder;
+    /**
+     * Chevron used by every control. `null` removes it.
+     * Can also be set with the `chevron` slot – the slot takes precedence over the prop.
+     */
+    chevron?: any;
+    /**
+     * Controls the visual representation of the accordion.
+     *
+     * @default 'default'
+     */
+    variant?: AccordionVariant;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`. */
+    radius?: MantineRadius;
+    /** If set, the content of closed items stays mounted. */
+    keepMounted?: boolean;
+}
+export interface AccordionProps extends Omit<BoxProps, keyof AccordionOwnProps>, AccordionOwnProps {
+}