@mantine-vue/core 3.0.0 → 3.2.0

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

@@ -0,0 +1,80 @@
+import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { BoxProps, MantineColor, MantineRadius, MantineSize, StylesApiProps, Factory } from '../../core';
+import type { UseScrollSpyHeadingData, UseScrollSpyOptions } from '@mantine-vue/hooks';
+import type { Ref } from 'vue';
+/** Props declared by `TableOfContents` itself. See `TableOfContentsProps` for the full public type. */
+export interface TableOfContentsOwnProps extends StylesApiProps<TableOfContentsFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Key of `theme.colors` or any valid CSS color value
+     *
+     * @default theme.primaryColor
+     */
+    color?: MantineColor;
+    /**
+     * Controls font-size and padding of all elements
+     *
+     * @default 'md'
+     */
+    size?: MantineSize | (string & {}) | number;
+    /** If set, adjusts text color based on background color for `filled` variant */
+    autoContrast?: boolean;
+    /** Options passed down to `use-scroll-spy` hook */
+    scrollSpyOptions?: UseScrollSpyOptions;
+    /** Data used to render content until actual values are retrieved from the DOM */
+    initialData?: InitialTableOfContentsData[];
+    /**
+     * A function to pass props down to controls, accepts values from `use-scroll-spy` hook as an argument and active state.
+     *
+     * @default ({ data }: any) => ({ children: data.value })
+     */
+    getControlProps?: (payload: {
+        active: boolean;
+        data: UseScrollSpyHeadingData;
+    }) => Record<string, any>;
+    /** Minimum `depth` value that requires offset, `1` by default */
+    minDepthToOffset?: number;
+    /** Controls padding on the left side of control, multiplied by (`depth` - `minDepthToOffset`), `20px` by default */
+    depthOffset?: string | number;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`
+     *
+     * @default theme.defaultRadius
+     */
+    radius?: MantineRadius;
+    /** A function to reinitialize headings from `use-scroll-spy` hook */
+    reinitializeRef?: Ref<(() => void) | null>;
+    /**
+     * Controls visual representation of the component. Rendered as the `data-variant` attribute and passed to the Styles API.
+     *
+     * @default 'filled'
+     */
+    variant?: TableOfContentsVariant;
+}
+export interface TableOfContentsProps extends Omit<BoxProps, keyof TableOfContentsOwnProps>, TableOfContentsOwnProps {
+}
+export type TableOfContentsStylesNames = 'root' | 'control';
+export type TableOfContentsVariant = 'filled' | 'light' | 'none';
+export type TableOfContentsCssVariables = {
+    root: '--toc-bg' | '--toc-color' | '--toc-size' | '--toc-depth-offset' | '--toc-radius';
+};
+export interface InitialTableOfContentsData {
+    /** Heading depth from 1 to 6. */
+    depth: number;
+    /** Heading text content. */
+    value: string;
+    /** Unique heading id. */
+    id?: string;
+}
+export type TableOfContentsFactory = Factory<{
+    props: Omit<TableOfContentsProps, 'rootRef'>;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    element: 'div';
+    stylesNames: TableOfContentsStylesNames;
+    vars: TableOfContentsCssVariables;
+    variant: TableOfContentsVariant;
+}>;

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

@@ -0,0 +1,7 @@
+import type { TableOfContentsOwnProps } from './TableOfContents.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: import("vue").DefineComponent<TableOfContentsOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableOfContentsOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,2 +1 @@
-export { TableOfContents } from './TableOfContents';
-export type { InitialTableOfContentsData, TableOfContentsStylesNames, TableOfContentsVariant, } from './TableOfContents';
+export * from './TableOfContents';

package/lib/components/Tabs/Tabs.d.ts

@@ -1,546 +1,55 @@
-import { type PropType } from 'vue';
-import { type MantineColor, type MantineRadius } from '../../core';
-export type TabsStylesNames = 'root' | 'list' | 'panel' | 'tab' | 'tabSection' | 'tabLabel';
-export type TabsVariant = 'default' | 'outline' | 'pills';
 export declare const Tabs: {
-    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-        defaultValue: {
-            type: PropType<string | null>;
-            default: undefined;
-        };
-        value: {
-            type: PropType<string | null>;
-            default: undefined;
-        };
-        onChange: {
-            type: PropType<(value: string | null) => void>;
-            default: undefined;
-        };
-        orientation: {
-            type: PropType<"vertical" | "horizontal">;
-            default: undefined;
-        };
-        placement: {
-            type: PropType<"left" | "right">;
-            default: undefined;
-        };
-        id: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        loop: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        activateTabWithKeyboard: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        allowTabDeactivation: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        variant: {
-            type: PropType<TabsVariant>;
-            default: undefined;
-        };
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        radius: {
-            type: PropType<MantineRadius>;
-            default: undefined;
-        };
-        inverted: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        keepMounted: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        autoContrast: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        mod: {
-            type: PropType<any>;
-            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;
-        orientation: "vertical" | "horizontal";
-        radius: MantineRadius;
-        color: MantineColor;
-        autoContrast: boolean;
-        variant: TabsVariant;
-        onChange: (value: string | null) => void;
-        value: string | null;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        defaultValue: string | null;
-        mod: any;
-        id: string;
-        keepMounted: boolean;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-        placement: "left" | "right";
-        inverted: boolean;
-        activateTabWithKeyboard: boolean;
-        allowTabDeactivation: boolean;
-    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./Tabs.types").TabsOwnProps> & Readonly<{
+        onChange?: ((value: string | null) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (value: string | null) => any;
+        "update:modelValue": (value: 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<{
-        defaultValue: {
-            type: PropType<string | null>;
-            default: undefined;
-        };
-        value: {
-            type: PropType<string | null>;
-            default: undefined;
-        };
-        onChange: {
-            type: PropType<(value: string | null) => void>;
-            default: undefined;
-        };
-        orientation: {
-            type: PropType<"vertical" | "horizontal">;
-            default: undefined;
-        };
-        placement: {
-            type: PropType<"left" | "right">;
-            default: undefined;
-        };
-        id: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        loop: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        activateTabWithKeyboard: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        allowTabDeactivation: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        variant: {
-            type: PropType<TabsVariant>;
-            default: undefined;
-        };
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        radius: {
-            type: PropType<MantineRadius>;
-            default: undefined;
-        };
-        inverted: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        keepMounted: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        autoContrast: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        mod: {
-            type: PropType<any>;
-            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;
-        orientation: "vertical" | "horizontal";
-        radius: MantineRadius;
-        color: MantineColor;
-        autoContrast: boolean;
-        variant: TabsVariant;
-        onChange: (value: string | null) => void;
-        value: string | null;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        defaultValue: string | null;
-        mod: any;
-        id: string;
-        keepMounted: boolean;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-        placement: "left" | "right";
-        inverted: boolean;
-        activateTabWithKeyboard: boolean;
-        allowTabDeactivation: boolean;
-    }>;
+    }, Readonly<import("./Tabs.types").TabsOwnProps> & Readonly<{
+        onChange?: ((value: string | null) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    defaultValue: {
-        type: PropType<string | null>;
-        default: undefined;
-    };
-    value: {
-        type: PropType<string | null>;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: string | null) => void>;
-        default: undefined;
-    };
-    orientation: {
-        type: PropType<"vertical" | "horizontal">;
-        default: undefined;
-    };
-    placement: {
-        type: PropType<"left" | "right">;
-        default: undefined;
-    };
-    id: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    loop: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    activateTabWithKeyboard: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    allowTabDeactivation: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    variant: {
-        type: PropType<TabsVariant>;
-        default: undefined;
-    };
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    inverted: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    keepMounted: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    autoContrast: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    mod: {
-        type: PropType<any>;
-        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;
-    orientation: "vertical" | "horizontal";
-    radius: MantineRadius;
-    color: MantineColor;
-    autoContrast: boolean;
-    variant: TabsVariant;
-    onChange: (value: string | null) => void;
-    value: string | null;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    defaultValue: string | null;
-    mod: any;
-    id: string;
-    keepMounted: boolean;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    placement: "left" | "right";
-    inverted: boolean;
-    activateTabWithKeyboard: boolean;
-    allowTabDeactivation: boolean;
-}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+} & import("vue").ComponentOptionsBase<Readonly<import("./Tabs.types").TabsOwnProps> & Readonly<{
+    onChange?: ((value: string | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string | null) => any;
+    "update:modelValue": (value: 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("./Tabs.types").TabsSlots;
+}) & {
     classes: Record<string, string>;
-    varsResolver: (theme: import("../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
-    Tab: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        value: {
-            type: StringConstructor;
-            required: true;
-        };
-        rightSection: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        leftSection: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        tabIndex: {
-            type: NumberConstructor;
-            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<{
-        value: {
-            type: StringConstructor;
-            required: true;
-        };
-        rightSection: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        leftSection: {
-            type: PropType<import("../..").MantineNode>;
-            default: undefined;
-        };
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        tabIndex: {
-            type: NumberConstructor;
-            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;
-        color: MantineColor;
-        onClick: (event: MouseEvent) => void;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        disabled: boolean;
-        mod: any;
-        onKeyDown: (event: KeyboardEvent) => void;
-        leftSection: import("../..").MantineNode;
-        rightSection: import("../..").MantineNode;
-        tabIndex: number;
-    }, import("vue").SlotsType<import("./TabsTab/TabsTab").TabsTabSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-    Panel: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        value: {
-            type: StringConstructor;
-            required: true;
-        };
-        keepMounted: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        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;
-        };
-        keepMounted: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        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;
-        keepMounted: boolean;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
-    List: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        grow: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        justify: {
-            type: PropType<import("../..").JustifyContent>;
-            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<{
-        grow: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        justify: {
-            type: PropType<import("../..").JustifyContent>;
-            default: undefined;
-        };
-        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;
-        justify: import("csstype").Property.JustifyContent | undefined;
-        grow: boolean;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+    varsResolver: (theme: import("../../index.js").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+    Tab: import("../../index.js").MantineComponent<{
+        props: Omit<import("./index.js").TabsTabProps, "rootRef">;
+        ref: HTMLButtonElement;
+        slots: import("./index.js").TabsTabSlots;
+        emits: import("./TabsTab/TabsTab.types.js").TabsTabEmits;
+        element: "button";
+        stylesNames: import("./index.js").TabsTabStylesNames;
+    }>;
+    Panel: import("../../index.js").MantineComponent<{
+        props: Omit<import("./index.js").TabsPanelProps, "rootRef">;
+        ref: HTMLDivElement;
+        slots: import("./index.js").TabsPanelSlots;
+        element: "div";
+        stylesNames: import("./index.js").TabsPanelStylesNames;
+    }>;
+    List: import("../../index.js").MantineComponent<{
+        props: Omit<import("./index.js").TabsListProps, "rootRef">;
+        ref: HTMLDivElement;
+        slots: import("./index.js").TabsListSlots;
+        element: "div";
+    }>;
 };
+export type { TabsCssVariables, TabsEmits, TabsOwnProps, TabsProps, TabsSlots, TabsStylesNames, TabsVariant, } from './Tabs.types';