@mantine-vue/core 3.0.0 → 3.1.0

package/lib/components/NavLink/NavLink.d.ts

@@ -1,213 +1,15 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import { type MantineColor, type MantineNode, type MantineSpacing, type SectionSlots } from '../../core';
-export type NavLinkStylesNames = 'root' | 'section' | 'body' | 'label' | 'description' | 'chevron' | 'collapse' | 'children';
-export type NavLinkVariant = 'filled' | 'light' | 'subtle';
-export interface NavLinkSlots extends SectionSlots {
-    default?: () => VNodeChild;
-    label?: () => VNodeChild;
-    description?: () => VNodeChild;
-}
-export declare const NavLink: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    component: {
-        type: StringConstructor;
-        default: string;
-    };
-    label: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    description: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    leftSection: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    rightSection: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    active: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    noWrap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    opened: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    defaultOpened: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(opened: boolean) => void>;
-        default: undefined;
-    };
-    disableRightSectionRotation: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    childrenOffset: {
-        type: PropType<MantineSpacing>;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autoContrast: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    keepMounted: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    variant: {
-        type: PropType<NavLinkVariant>;
-        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;
-    };
-}>, () => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> | null)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    component: {
-        type: StringConstructor;
-        default: string;
-    };
-    label: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    description: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    leftSection: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    rightSection: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    active: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    noWrap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    opened: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    defaultOpened: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(opened: boolean) => void>;
-        default: undefined;
-    };
-    disableRightSectionRotation: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    childrenOffset: {
-        type: PropType<MantineSpacing>;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    autoContrast: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    keepMounted: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    variant: {
-        type: PropType<NavLinkVariant>;
-        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<{}>, {
-    label: any;
-    color: MantineColor;
-    autoContrast: boolean;
-    variant: NavLinkVariant;
-    onChange: (opened: boolean) => void;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    description: MantineNode;
-    opened: boolean;
-    disabled: boolean;
-    active: boolean;
-    mod: any;
-    keepMounted: boolean;
-    component: string;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    leftSection: any;
-    rightSection: MantineNode;
-    childrenOffset: MantineSpacing;
-    noWrap: boolean;
-    defaultOpened: boolean;
-    disableRightSectionRotation: boolean;
-}, SlotsType<NavLinkSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const NavLink: import("../..").MantinePolymorphicComponent<{
+    props: Omit<import("./NavLink.types").NavLinkProps, "component" | "rootRef">;
+    slots: import("./NavLink.types").NavLinkSlots;
+    emits: import("./NavLink.types").NavLinkEmits;
+    ref: HTMLAnchorElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: "a";
+    defaultRef: HTMLAnchorElement;
+    stylesNames: import("./NavLink.types").NavLinkStylesNames;
+    vars: import("./NavLink.types").NavLinkCssVariables;
+    variant: import("./NavLink.types").NavLinkVariant;
+}, "a">;
+export type { NavLinkCssVariables, NavLinkEmits, NavLinkFactory, NavLinkOwnProps, NavLinkProps, NavLinkSlots, NavLinkStylesNames, NavLinkVariant, } from './NavLink.types';

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

@@ -0,0 +1,118 @@
+import type { VNodeChild } from 'vue';
+import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { BoxMod, BoxProps, MantineColor, MantineNode, MantineSpacing, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
+export type NavLinkStylesNames = 'root' | 'section' | 'body' | 'label' | 'description' | 'chevron' | 'collapse' | 'children';
+export type NavLinkVariant = 'filled' | 'light' | 'subtle';
+/** Props declared by `NavLink` itself. See `NavLinkProps` for the full public type. */
+export interface NavLinkOwnProps extends StylesApiProps<NavLinkProps> {
+    /** 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 `NavLink`.
+     *
+     * @default 'a'
+     */
+    component?: MantineElementType;
+    /** Main link label. Can also be set with the `label` slot – the slot takes precedence over the prop. */
+    label?: MantineNode;
+    /**
+     * Link description, displayed below the label.
+     * Can also be set with the `description` slot – the slot takes precedence over the prop.
+     */
+    description?: MantineNode;
+    /**
+     * Section displayed on the left side of the label.
+     * Can also be set with the `leftSection` slot – the slot takes precedence over the prop.
+     */
+    leftSection?: MantineNode;
+    /**
+     * Section displayed on the right side of the label.
+     * Can also be set with the `rightSection` slot – the slot takes precedence over the prop.
+     */
+    rightSection?: MantineNode;
+    /**
+     * Determines whether the link should have active styles
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Key of `theme.colors` or any valid CSS color to control active styles
+     *
+     * @default theme.primaryColor
+     */
+    color?: MantineColor;
+    /**
+     * If set, label and description are truncated with ellipsis instead of wrapping
+     *
+     * @default false
+     */
+    noWrap?: boolean;
+    /** Controlled nested items collapse state. Bound with `v-model:opened`. */
+    opened?: boolean;
+    /** Uncontrolled nested items collapse initial state */
+    defaultOpened?: boolean;
+    /**
+     * If set, right section will not be rotated when collapse is opened
+     *
+     * @default false
+     */
+    disableRightSectionRotation?: boolean;
+    /**
+     * Controls indentation of nested NavLink components, key of `theme.spacing` or any valid CSS value
+     *
+     * @default 'lg'
+     */
+    childrenOffset?: MantineSpacing;
+    /**
+     * If set, disabled styles will be added to the root element
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /** If set, adjusts text color based on background color for `filled` variant */
+    autoContrast?: boolean;
+    /** If set to `false`, child `NavLinks` are unmounted when collapsed */
+    keepMounted?: boolean;
+    /** Controls visual representation of the component. Rendered as the `data-variant` attribute and passed to the Styles API. */
+    variant?: NavLinkVariant;
+    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    mod?: BoxMod;
+}
+export interface NavLinkSlots {
+    /** Nested `NavLink` components. */
+    default?: () => VNodeChild;
+    /** Main link label. Takes precedence over the `label` prop. */
+    label?: () => VNodeChild;
+    /** Link description. Takes precedence over the `description` prop. */
+    description?: () => VNodeChild;
+    /** Left section. Takes precedence over the `leftSection` prop. */
+    leftSection?: () => VNodeChild;
+    /** Right section. Takes precedence over the `rightSection` prop. */
+    rightSection?: () => VNodeChild;
+}
+export interface NavLinkProps extends Omit<BoxProps, keyof NavLinkOwnProps>, NavLinkOwnProps {
+}
+export type NavLinkCssVariables = {
+    root: '--nl-color' | '--nl-bg' | '--nl-hover';
+    children: '--nl-offset';
+};
+export interface NavLinkEmits {
+    /** Emitted when the collapsible section is opened or closed. */
+    'update:opened': [opened: boolean];
+}
+/** Public contract of `NavLink`. `component` and `rootRef` come from the factory. */
+export type NavLinkFactory = PolymorphicFactory<{
+    props: Omit<NavLinkProps, 'component' | 'rootRef'>;
+    slots: NavLinkSlots;
+    emits: NavLinkEmits;
+    ref: HTMLAnchorElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: 'a';
+    defaultRef: HTMLAnchorElement;
+    stylesNames: NavLinkStylesNames;
+    vars: NavLinkCssVariables;
+    variant: NavLinkVariant;
+}>;

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

@@ -0,0 +1,17 @@
+import type { NavLinkOwnProps, NavLinkSlots } from './NavLink.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<NavLinkOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:opened": (opened: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<NavLinkOwnProps> & Readonly<{
+    "onUpdate:opened"?: ((opened: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NavLinkSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,2 +1,2 @@
 export { NavLink } from './NavLink';
-export type { NavLinkStylesNames, NavLinkVariant } from './NavLink';
+export type { NavLinkCssVariables, NavLinkEmits, NavLinkFactory, NavLinkOwnProps, NavLinkProps, NavLinkSlots, NavLinkStylesNames, NavLinkVariant, } from './NavLink';

package/lib/components/Notification/Notification.d.ts

@@ -1,149 +1,9 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import { type MantineColor, type MantineNode, type MantineRadius } from '../../core';
-export type NotificationStylesNames = 'root' | 'icon' | 'loader' | 'body' | 'title' | 'description' | 'closeButton';
-export interface NotificationSlots {
-    default?: () => VNodeChild;
-    icon?: () => VNodeChild;
-    title?: () => VNodeChild;
-}
-export declare const Notification: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    onClose: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    icon: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    title: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withBorder: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withCloseButton: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    closeButtonProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    loaderProps: {
-        type: PropType<Record<string, any>>;
-        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;
-    };
-}>, () => 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<{
-    onClose: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    color: {
-        type: PropType<MantineColor>;
-        default: undefined;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    icon: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    title: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withBorder: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withCloseButton: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    closeButtonProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    loaderProps: {
-        type: PropType<Record<string, any>>;
-        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<{}>, {
-    title: MantineNode;
-    radius: MantineRadius;
-    color: MantineColor;
-    onClose: () => void;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    mod: any;
-    icon: MantineNode;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    withBorder: boolean;
-    loading: boolean;
-    loaderProps: Record<string, any>;
-    withCloseButton: boolean;
-    closeButtonProps: Record<string, any>;
-}, SlotsType<NotificationSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const Notification: import("../..").MantineComponent<{
+    props: Omit<import("./Notification.types").NotificationProps, "rootRef">;
+    ref: HTMLDivElement;
+    slots: import("./Notification.types").NotificationSlots;
+    element: "div";
+    stylesNames: import("./Notification.types").NotificationStylesNames;
+    vars: import("./Notification.types").NotificationCssVariables;
+}>;
+export type { NotificationCssVariables, NotificationFactory, NotificationOwnProps, NotificationProps, NotificationSlots, NotificationStylesNames, } from './Notification.types';

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

@@ -0,0 +1,70 @@
+import type { VNodeChild } from 'vue';
+import type { BoxMod, BoxProps, MantineColor, MantineNode, MantineRadius, StylesApiProps, Factory } from '../../core';
+export type NotificationStylesNames = 'root' | 'icon' | 'loader' | 'body' | 'title' | 'description' | 'closeButton';
+/** Props declared by `Notification` itself. See `NotificationProps` for the full public type. */
+export interface NotificationOwnProps extends StylesApiProps<NotificationFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Controls icon background color or notification accent line color, key of `theme.colors` or any valid CSS color. When `icon` is provided, sets the icon background color. When no icon is provided, sets the colored accent line on the left.
+     *
+     * @default theme.primaryColor
+     */
+    color?: MantineColor;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`
+     *
+     * @default theme.defaultRadius
+     */
+    radius?: MantineRadius;
+    /** Notification icon, replaces color line */
+    icon?: MantineNode;
+    /** Notification title, displayed above the message body */
+    title?: MantineNode;
+    /**
+     * If set, displays a `Loader` component instead of the icon. Takes precedence over the `icon` prop if both are provided.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Adds border to the root element
+     *
+     * @default false
+     */
+    withBorder?: boolean;
+    /**
+     * If set, the close button is visible
+     *
+     * @default true
+     */
+    withCloseButton?: boolean;
+    /** Props passed down to the close button */
+    closeButtonProps?: Record<string, any>;
+    /** Props passed down to the `Loader` component */
+    loaderProps?: Record<string, any>;
+    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    mod?: BoxMod;
+}
+export interface NotificationSlots {
+    /** Notification description. */
+    default?: () => VNodeChild;
+    /** Notification icon. Takes precedence over the `icon` prop. */
+    icon?: () => VNodeChild;
+    /** Notification title. Takes precedence over the `title` prop. */
+    title?: () => VNodeChild;
+}
+export interface NotificationProps extends Omit<BoxProps, keyof NotificationOwnProps>, NotificationOwnProps {
+}
+export type NotificationCssVariables = {
+    root: '--notification-radius' | '--notification-color';
+};
+export type NotificationFactory = Factory<{
+    props: Omit<NotificationProps, 'rootRef'>;
+    ref: HTMLDivElement;
+    slots: NotificationSlots;
+    element: 'div';
+    stylesNames: NotificationStylesNames;
+    vars: NotificationCssVariables;
+}>;
+import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -0,0 +1,17 @@
+import type { NotificationOwnProps, NotificationSlots } from './Notification.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<NotificationOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<NotificationOwnProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, NotificationSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,2 +1,2 @@
 export { Notification } from './Notification';
-export type { NotificationStylesNames } from './Notification';
+export type { NotificationFactory, NotificationOwnProps, NotificationProps, NotificationSlots, NotificationStylesNames, } from './Notification';