@mantine-vue/core 3.0.0 → 3.2.0

package/lib/components/ActionIcon/ActionIcon.d.ts

@@ -1,365 +1,20 @@
-import { type PropType } from 'vue';
-import { type MantineColor, type MantineGradient, type MantineRadius, type MantineSize } from '../../core';
-export type ActionIconVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle' | 'default' | 'gradient';
-export declare const ActionIcon: import("../..").WithBoxProps<{
-    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-        component: {
-            type: StringConstructor;
-            default: string;
-        };
-        loading: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        loaderProps: {
-            type: PropType<Record<string, any>>;
-            default: undefined;
-        };
-        size: PropType<MantineSize | `input-${MantineSize}` | (string & {}) | number>;
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        radius: PropType<MantineRadius>;
-        gradient: {
-            type: PropType<MantineGradient>;
-            default: undefined;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        autoContrast: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        variant: {
-            type: PropType<ActionIconVariant>;
-            default: undefined;
-        };
-        __staticSelector: {
-            type: StringConstructor;
-            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, {
-        color: MantineColor;
-        autoContrast: boolean;
-        variant: ActionIconVariant;
-        gradient: MantineGradient;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        disabled: boolean;
-        component: string;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-        __staticSelector: string;
-        loading: boolean;
-        loaderProps: Record<string, any>;
-    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, Readonly<import("vue").ExtractPropTypes<{
-        component: {
-            type: StringConstructor;
-            default: string;
-        };
-        loading: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        loaderProps: {
-            type: PropType<Record<string, any>>;
-            default: undefined;
-        };
-        size: PropType<MantineSize | `input-${MantineSize}` | (string & {}) | number>;
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        radius: PropType<MantineRadius>;
-        gradient: {
-            type: PropType<MantineGradient>;
-            default: undefined;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        autoContrast: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        variant: {
-            type: PropType<ActionIconVariant>;
-            default: undefined;
-        };
-        __staticSelector: {
-            type: StringConstructor;
-            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;
-    }>, {}, {}, {}, {
-        color: MantineColor;
-        autoContrast: boolean;
-        variant: ActionIconVariant;
-        gradient: MantineGradient;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        disabled: boolean;
-        component: string;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-        __staticSelector: string;
-        loading: boolean;
-        loaderProps: Record<string, any>;
-    }>;
-    __isFragment?: never;
-    __isTeleport?: never;
-    __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    component: {
-        type: StringConstructor;
-        default: string;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loaderProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    size: PropType<MantineSize | `input-${MantineSize}` | (string & {}) | number>;
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    radius: PropType<MantineRadius>;
-    gradient: {
-        type: PropType<MantineGradient>;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autoContrast: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    variant: {
-        type: PropType<ActionIconVariant>;
-        default: undefined;
-    };
-    __staticSelector: {
-        type: StringConstructor;
-        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, {
-    color: MantineColor;
-    autoContrast: boolean;
-    variant: ActionIconVariant;
-    gradient: MantineGradient;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    disabled: boolean;
-    component: string;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    __staticSelector: string;
-    loading: boolean;
-    loaderProps: Record<string, any>;
-}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
-    Group: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        orientation: {
-            type: PropType<"horizontal" | "vertical">;
-            default: undefined;
-        };
-        borderWidth: PropType<string | number>;
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        vars: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        unstyled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>, () => 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<{
-        orientation: {
-            type: PropType<"horizontal" | "vertical">;
-            default: undefined;
-        };
-        borderWidth: PropType<string | number>;
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        vars: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        unstyled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, {
-        orientation: "vertical" | "horizontal";
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
-    GroupSection: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        size: PropType<MantineSize | (string & {}) | number>;
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        radius: PropType<MantineRadius>;
-        gradient: {
-            type: PropType<MantineGradient>;
-            default: undefined;
-        };
-        autoContrast: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        variant: {
-            type: PropType<ActionIconVariant>;
-            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;
-        };
-    }>, () => 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: PropType<MantineSize | (string & {}) | number>;
-        color: {
-            type: PropType<MantineColor>;
-            default: undefined;
-        };
-        radius: PropType<MantineRadius>;
-        gradient: {
-            type: PropType<MantineGradient>;
-            default: undefined;
-        };
-        autoContrast: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        variant: {
-            type: PropType<ActionIconVariant>;
-            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<{}>, {
-        color: MantineColor;
-        autoContrast: boolean;
-        variant: ActionIconVariant;
-        gradient: MantineGradient;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
-}>;
+import { ActionIconGroup } from './ActionIconGroup/ActionIconGroup';
+import { ActionIconGroupSection } from './ActionIconGroupSection/ActionIconGroupSection';
+export declare const ActionIcon: import("../..").MantinePolymorphicComponent<{
+    props: Omit<import("./ActionIcon.types").ActionIconProps, "component" | "rootRef">;
+    slots: import("./ActionIcon.types").ActionIconSlots;
+    ref: HTMLButtonElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: "button";
+    defaultRef: HTMLButtonElement;
+    stylesNames: import("./ActionIcon.types").ActionIconStylesNames;
+    vars: import("./ActionIcon.types").ActionIconCssVariables;
+    variant: import("./ActionIcon.types").ActionIconVariant;
+    staticComponents: {
+        Group: typeof ActionIconGroup;
+        GroupSection: typeof ActionIconGroupSection;
+    };
+}, "button">;
+export type { ActionIconCssVariables, ActionIconFactory, ActionIconOwnProps, ActionIconProps, ActionIconSlots, ActionIconStylesNames, ActionIconVariant, } from './ActionIcon.types';

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

@@ -0,0 +1,92 @@
+import type { VNodeChild } from 'vue';
+import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
+import type { ActionIconGroup } from './ActionIconGroup/ActionIconGroup';
+import type { ActionIconGroupSection } from './ActionIconGroupSection/ActionIconGroupSection';
+export type ActionIconVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle' | 'default' | 'gradient';
+/** Props declared by `ActionIcon` itself. See `ActionIconProps` for the full public type. */
+export interface ActionIconOwnProps extends StylesApiProps<ActionIconProps> {
+    /** 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 `ActionIcon`.
+     *
+     * @default 'button'
+     */
+    component?: MantineElementType;
+    /**
+     * If set, `Loader` component is displayed instead of the `children`
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /** Props passed down to the `Loader` component. Ignored when `loading` prop is not set. */
+    loaderProps?: Record<string, any>;
+    /**
+     * Controls width and height of the button. Numbers are converted to rem.
+     *
+     * @default 'md'
+     */
+    size?: MantineSize | `input-${MantineSize}` | (string & {}) | number;
+    /**
+     * Key of `theme.colors` or any valid CSS color.
+     *
+     * @default theme.primaryColor
+     */
+    color?: MantineColor;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem.
+     *
+     * @default theme.defaultRadius
+     */
+    radius?: MantineRadius;
+    /**
+     * Gradient values used with `variant="gradient"`.
+     *
+     * @default theme.defaultGradient
+     */
+    gradient?: MantineGradient;
+    /**
+     * Sets `disabled` attribute, prevents interactions
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /** If set, adjusts text color based on background color for `filled` variant */
+    autoContrast?: boolean;
+    /** Controls visual representation of the component. Rendered as the `data-variant` attribute and passed to the Styles API. */
+    variant?: ActionIconVariant;
+    /**
+     * Static selector used to build the component classes. Internal prop, not part of the public API.
+     *
+     * @internal
+     */
+    __staticSelector?: string;
+}
+export interface ActionIconProps extends Omit<BoxProps, keyof ActionIconOwnProps>, ActionIconOwnProps {
+}
+export interface ActionIconSlots {
+    default?: () => VNodeChild;
+}
+export type ActionIconStylesNames = 'root' | 'loader' | 'icon';
+export type ActionIconCssVariables = {
+    root: '--ai-radius' | '--ai-size' | '--ai-bg' | '--ai-hover' | '--ai-hover-color' | '--ai-color' | '--ai-bd';
+};
+/** Public contract of `ActionIcon`. `component` and `rootRef` come from the factory. */
+export type ActionIconFactory = PolymorphicFactory<{
+    props: Omit<ActionIconProps, 'component' | 'rootRef'>;
+    slots: ActionIconSlots;
+    ref: HTMLButtonElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: 'button';
+    defaultRef: HTMLButtonElement;
+    stylesNames: ActionIconStylesNames;
+    vars: ActionIconCssVariables;
+    variant: ActionIconVariant;
+    staticComponents: {
+        Group: typeof ActionIconGroup;
+        GroupSection: typeof ActionIconGroupSection;
+    };
+}>;

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

@@ -0,0 +1,12 @@
+import type { ActionIconOwnProps, ActionIconSlots } from './ActionIcon.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<ActionIconOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ActionIconSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/ActionIcon/ActionIconGroup/ActionIconGroup.d.ts

@@ -1,54 +1,9 @@
-import { type PropType } from 'vue';
-export declare const ActionIconGroup: import("../../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    orientation: {
-        type: PropType<"horizontal" | "vertical">;
-        default: undefined;
-    };
-    borderWidth: PropType<string | number>;
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => 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<{
-    orientation: {
-        type: PropType<"horizontal" | "vertical">;
-        default: undefined;
-    };
-    borderWidth: PropType<string | number>;
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    orientation: "vertical" | "horizontal";
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const ActionIconGroup: import("../../..").MantineComponent<{
+    props: Omit<import("./ActionIconGroup.types").ActionIconGroupProps, "rootRef">;
+    ref: HTMLDivElement;
+    slots: import("./ActionIconGroup.types").ActionIconGroupSlots;
+    element: "div";
+    stylesNames: import("./ActionIconGroup.types").ActionIconGroupStylesNames;
+    vars: import("./ActionIconGroup.types").ActionIconGroupCssVariables;
+}>;
+export type { ActionIconGroupOwnProps, ActionIconGroupProps, ActionIconGroupSlots, ActionIconGroupFactory, } from './ActionIconGroup.types';

package/lib/components/ActionIcon/ActionIconGroup/ActionIconGroup.types.d.ts

@@ -0,0 +1,38 @@
+import type { VNodeChild } from 'vue';
+import type { BoxProps, StylesApiProps, Factory } from '../../../core';
+/** Props declared by `ActionIconGroup` itself. See `ActionIconGroupProps` for the full public type. */
+export interface ActionIconGroupOwnProps extends StylesApiProps<ActionIconGroupFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Group orientation
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * `border-width` of the child components.
+     *
+     * @default 1
+     */
+    borderWidth?: string | number;
+}
+export interface ActionIconGroupProps extends Omit<BoxProps, keyof ActionIconGroupOwnProps>, ActionIconGroupOwnProps {
+}
+export interface ActionIconGroupSlots {
+    /** Grouped action icons. */
+    default?: () => VNodeChild;
+}
+export type ActionIconGroupStylesNames = 'group';
+export type ActionIconGroupCssVariables = {
+    group: '--ai-border-width';
+};
+export type ActionIconGroupFactory = Factory<{
+    props: Omit<ActionIconGroupProps, 'rootRef'>;
+    ref: HTMLDivElement;
+    slots: ActionIconGroupSlots;
+    element: 'div';
+    stylesNames: ActionIconGroupStylesNames;
+    vars: ActionIconGroupCssVariables;
+}>;
+import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/ActionIcon/ActionIconGroup/ActionIconGroup.vue.d.ts

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