@mantine-vue/core 3.0.0 → 3.2.0

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

@@ -0,0 +1,31 @@
+import type { VNodeChild } from 'vue';
+import type { BoxProps, MantineColor, StylesApiProps, Factory } from '../../core';
+export type MarkStylesNames = 'root';
+export type MarkCssVariables = {
+    root: '--mark-bg-dark' | '--mark-bg-light';
+};
+export interface MarkSlots {
+    /** Highlighted content. */
+    default?: () => VNodeChild;
+}
+/** Props declared by `Mark` itself. See `MarkProps` for the full public type. */
+export interface MarkOwnProps extends StylesApiProps<MarkFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Key of `theme.colors` or any valid CSS color.
+     * @default 'yellow'
+     */
+    color?: MantineColor;
+}
+export interface MarkProps extends Omit<BoxProps, keyof MarkOwnProps>, MarkOwnProps {
+}
+export type MarkFactory = Factory<{
+    props: Omit<MarkProps, 'rootRef'>;
+    ref: HTMLElement;
+    slots: MarkSlots;
+    element: 'mark';
+    stylesNames: MarkStylesNames;
+    vars: MarkCssVariables;
+}>;
+import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -0,0 +1,17 @@
+import type { MarkOwnProps, MarkSlots } from './Mark.types';
+declare const defaultProps: {
+    color: string;
+};
+/** Module scope: created once, not per component instance. */
+declare const varsResolver: (theme: import("../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+export { defaultProps, varsResolver };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MarkOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarkOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarkSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/Marquee/Marquee.d.ts

@@ -1,135 +1,9 @@
-import { type PropType } from 'vue';
-import { type MantineSpacing } from '../../core';
-export type MarqueeStylesNames = 'root' | 'content' | 'group';
-export declare const Marquee: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    reverse: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    pauseOnHover: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    orientation: {
-        type: PropType<"horizontal" | "vertical">;
-        default: undefined;
-    };
-    repeat: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    duration: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    gap: {
-        type: PropType<MantineSpacing>;
-        default: undefined;
-    };
-    fadeEdges: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    fadeEdgeColor: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    fadeEdgeSize: {
-        type: StringConstructor;
-        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<{
-    reverse: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    pauseOnHover: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    orientation: {
-        type: PropType<"horizontal" | "vertical">;
-        default: undefined;
-    };
-    repeat: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    duration: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    gap: {
-        type: PropType<MantineSpacing>;
-        default: undefined;
-    };
-    fadeEdges: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    fadeEdgeColor: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    fadeEdgeSize: {
-        type: StringConstructor;
-        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<{}>, {
-    repeat: number;
-    orientation: "vertical" | "horizontal";
-    reverse: boolean;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    duration: number;
-    mod: any;
-    gap: MantineSpacing;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    fadeEdgeColor: string;
-    fadeEdgeSize: string;
-    pauseOnHover: boolean;
-    fadeEdges: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const Marquee: import("../..").MantineComponent<{
+    props: Omit<import("./Marquee.types").MarqueeProps, "rootRef">;
+    ref: HTMLDivElement;
+    slots: import("./Marquee.types").MarqueeSlots;
+    element: "div";
+    stylesNames: import("./Marquee.types").MarqueeStylesNames;
+    vars: import("./Marquee.types").MarqueeCssVariables;
+}>;
+export type { MarqueeCssVariables, MarqueeOwnProps, MarqueeProps, MarqueeSlots, MarqueeStylesNames, MarqueeFactory, } from './Marquee.types';

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

@@ -0,0 +1,82 @@
+import type { VNodeChild } from 'vue';
+import type { BoxMod, BoxProps, MantineSpacing, StylesApiProps, Factory } from '../../core';
+/** Props declared by `Marquee` itself. See `MarqueeProps` for the full public type. */
+export interface MarqueeOwnProps extends StylesApiProps<MarqueeFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Reverses animation direction
+     *
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Pauses animation on hover
+     *
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Scroll orientation
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Number of times children are repeated inline for seamless scrolling
+     *
+     * @default 4
+     */
+    repeat?: number;
+    /**
+     * Animation duration in ms
+     *
+     * @default 100000
+     */
+    duration?: number;
+    /**
+     * Gap between repeated children, key of `theme.spacing` or any valid CSS value
+     *
+     * @default 'md'
+     */
+    gap?: MantineSpacing;
+    /**
+     * Whether to show gradient fade on edges,
+     *
+     * @default true
+     */
+    fadeEdges?: boolean;
+    /**
+     * Color of the fade gradient,
+     *
+     * @default 'var(--mantine-color-body)'
+     */
+    fadeEdgeColor?: string;
+    /**
+     * Size of the fade gradient,
+     *
+     * @default '5%'
+     */
+    fadeEdgeSize?: string;
+    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    mod?: BoxMod;
+}
+export interface MarqueeProps extends Omit<BoxProps, keyof MarqueeOwnProps>, MarqueeOwnProps {
+}
+export interface MarqueeSlots {
+    /** Content repeated inside the scrolling track. */
+    default?: () => VNodeChild;
+}
+export type MarqueeStylesNames = 'root' | 'content' | 'group';
+export type MarqueeCssVariables = {
+    root: '--marquee-duration' | '--marquee-gap' | '--marquee-repeat' | '--marquee-fade-color' | '--marquee-fade-size';
+};
+export type MarqueeFactory = Factory<{
+    props: Omit<MarqueeProps, 'rootRef'>;
+    ref: HTMLDivElement;
+    slots: MarqueeSlots;
+    element: 'div';
+    stylesNames: MarqueeStylesNames;
+    vars: MarqueeCssVariables;
+}>;
+import type { VueRefTarget } from '@mantine-vue/hooks';

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

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

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

@@ -1,2 +1 @@
-export { Marquee } from './Marquee';
-export type { MarqueeStylesNames } from './Marquee';
+export * from './Marquee';

package/lib/components/MaskInput/MaskInput.d.ts

@@ -1,190 +1,43 @@
-import { type PropType } from 'vue';
-import { type MaskInputMask, type MaskInputState } from './use-mask-input';
-export interface MaskInputProps {
-    mask: MaskInputMask;
-    modelValue?: string;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-    tokens?: Record<string, RegExp>;
-    modify?: (value: string) => Partial<Pick<MaskInputProps, 'mask' | 'tokens' | 'slotChar' | 'separate'>> | undefined;
-    separate?: boolean;
-    slotChar?: string | null;
-    alwaysShowMask?: boolean;
-    showMaskOnFocus?: boolean;
-    transform?: (char: string) => string;
-    autoClear?: boolean;
-    onChangeRaw?: (rawValue: string, maskedValue: string) => void;
-    onComplete?: (maskedValue: string, rawValue: string) => void;
-    beforeMaskedStateChange?: (states: {
-        previousState: MaskInputState;
-        currentState: MaskInputState;
-        nextState: MaskInputState;
-    }) => MaskInputState;
-    resetRef?: any;
-}
-export declare const MaskInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    mask: {
-        type: PropType<MaskInputMask>;
-        required: true;
-    };
-    modelValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    value: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: string) => void>;
-        default: undefined;
-    };
-    tokens: {
-        type: PropType<Record<string, RegExp>>;
-        default: undefined;
-    };
-    modify: {
-        type: PropType<MaskInputProps["modify"]>;
-        default: undefined;
-    };
-    separate: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    slotChar: {
-        type: PropType<string | null>;
-        default: string;
-    };
-    alwaysShowMask: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showMaskOnFocus: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    transform: {
-        type: PropType<(char: string) => string>;
-        default: undefined;
-    };
-    autoClear: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onChangeRaw: {
-        type: PropType<(raw: string, masked: string) => void>;
-        default: undefined;
-    };
-    onComplete: {
-        type: PropType<(masked: string, raw: string) => void>;
-        default: undefined;
-    };
-    beforeMaskedStateChange: {
-        type: PropType<MaskInputProps["beforeMaskedStateChange"]>;
-        default: undefined;
-    };
-    resetRef: {
-        type: PropType<any>;
-        default: undefined;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    mask: {
-        type: PropType<MaskInputMask>;
-        required: true;
-    };
-    modelValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    value: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: string) => void>;
-        default: undefined;
-    };
-    tokens: {
-        type: PropType<Record<string, RegExp>>;
-        default: undefined;
-    };
-    modify: {
-        type: PropType<MaskInputProps["modify"]>;
-        default: undefined;
-    };
-    separate: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    slotChar: {
-        type: PropType<string | null>;
-        default: string;
-    };
-    alwaysShowMask: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showMaskOnFocus: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    transform: {
-        type: PropType<(char: string) => string>;
-        default: undefined;
-    };
-    autoClear: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onChangeRaw: {
-        type: PropType<(raw: string, masked: string) => void>;
-        default: undefined;
-    };
-    onComplete: {
-        type: PropType<(masked: string, raw: string) => void>;
-        default: undefined;
-    };
-    beforeMaskedStateChange: {
-        type: PropType<MaskInputProps["beforeMaskedStateChange"]>;
-        default: undefined;
-    };
-    resetRef: {
-        type: PropType<any>;
-        default: undefined;
-    };
-}>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    onChange: (value: string) => void;
-    value: string;
-    defaultValue: string;
-    separate: boolean;
-    transform: (char: string) => string;
-    tokens: Record<string, RegExp>;
-    slotChar: string | null;
-    modify: ((value: string) => Partial<Pick<MaskInputProps, "mask" | "tokens" | "slotChar" | "separate">> | undefined) | undefined;
-    alwaysShowMask: boolean;
-    showMaskOnFocus: boolean;
-    autoClear: boolean;
-    onChangeRaw: (raw: string, masked: string) => void;
-    onComplete: (masked: string, raw: string) => void;
-    beforeMaskedStateChange: ((states: {
-        previousState: MaskInputState;
-        currentState: MaskInputState;
-        nextState: MaskInputState;
-    }) => MaskInputState) | undefined;
-    modelValue: string;
-    resetRef: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const MaskInput: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onComplete?: ((display: string, raw: string) => any) | undefined;
+        "onChange-raw"?: ((raw: string, display: string) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (value: string) => any;
+        "update:modelValue": (value: string) => any;
+        complete: (display: string, raw: string) => any;
+        "change-raw": (raw: string, display: string) => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onComplete?: ((display: string, raw: string) => any) | undefined;
+        "onChange-raw"?: ((raw: string, display: string) => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((display: string, raw: string) => any) | undefined;
+    "onChange-raw"?: ((raw: string, display: string) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    complete: (display: string, raw: string) => any;
+    "change-raw": (raw: string, display: string) => any;
+}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./MaskInput.types").MaskInputSlots;
+}) & {
+    classes: Record<import("..").InputBaseStylesNames, string>;
+};
+export type { MaskInputProps, MaskInputSlots, MaskInputStylesNames } from './MaskInput.types';

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

@@ -0,0 +1,82 @@
+import type { VNodeChild } from 'vue';
+import type { InputBaseStylesNames } from '../InputBase';
+import type { MaskInputMask, MaskInputState } from './use-mask-input';
+export type MaskInputStylesNames = InputBaseStylesNames;
+export interface MaskInputSlots {
+    /** Input label. */
+    label?: () => VNodeChild;
+    /** Description rendered below the label. */
+    description?: () => VNodeChild;
+    /** Error message rendered below the input. */
+    error?: () => VNodeChild;
+    /** Content rendered on the left side of the input. */
+    leftSection?: () => VNodeChild;
+    /** Content rendered on the right side of the input. */
+    rightSection?: () => VNodeChild;
+}
+/**
+ * Props declared by `MaskInput` itself.
+ *
+ * Every prop of `InputBase` is also accepted and forwarded to the underlying input.
+ */
+export interface MaskInputProps {
+    /** Mask pattern, or a list of patterns the best match is picked from. */
+    mask: MaskInputMask;
+    /** Masked value, bound with `v-model`. */
+    modelValue?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    /** Extra mask tokens, merged with the built-in ones. */
+    tokens?: Record<string, RegExp>;
+    /**
+     * Adjusts the mask configuration based on the current raw value, for example to switch
+     * between phone number formats as the user types.
+     */
+    modify?: (value: string) => Partial<Pick<MaskInputProps, 'mask' | 'tokens' | 'slotChar' | 'separate'>> | undefined;
+    /**
+     * If set, the literal mask characters are kept in the value rather than stripped from it.
+     *
+     * @default false
+     */
+    separate?: boolean;
+    /**
+     * Character rendered in place of an unfilled token. `null` renders nothing.
+     *
+     * @default '_'
+     */
+    slotChar?: string | null;
+    /**
+     * If set, the mask is always visible, even while the input is empty and unfocused.
+     *
+     * @default false
+     */
+    alwaysShowMask?: boolean;
+    /**
+     * If set, the mask becomes visible while the input has focus.
+     *
+     * @default true
+     */
+    showMaskOnFocus?: boolean;
+    /** Transforms each entered character, for example to upper case it. */
+    transform?: (char: string) => string;
+    /**
+     * If set, an incomplete value is cleared when the input loses focus.
+     *
+     * @default false
+     */
+    autoClear?: boolean;
+    /**
+     * Intercepts every value and selection change, for the cases the mask itself cannot
+     * express. Receives the previous, current and proposed states and returns the state to
+     * apply.
+     */
+    beforeMaskedStateChange?: (states: {
+        previousState: MaskInputState;
+        currentState: MaskInputState;
+        nextState: MaskInputState;
+    }) => MaskInputState;
+    /** Ref assigned a function that clears the input. */
+    resetRef?: any;
+    /** Any other prop is forwarded to the underlying `InputBase`. */
+    [key: string]: any;
+}

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

@@ -0,0 +1,22 @@
+import type { MaskInputSlots } from './MaskInput.types';
+/** A cloned child may already carry an array of handlers for the same event. */
+declare function callHandler(handler: unknown, event: Event): void;
+export { callHandler };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    complete: (display: string, raw: string) => any;
+    "change-raw": (raw: string, display: string) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((display: string, raw: string) => any) | undefined;
+    "onChange-raw"?: ((raw: string, display: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MaskInputSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,3 +1,3 @@
 export { MaskInput } from './MaskInput';
-export type { MaskInputProps } from './MaskInput';
+export type { MaskInputProps, MaskInputSlots, MaskInputStylesNames } from './MaskInput';
 export type { MaskInputMask, MaskInputState } from './use-mask-input';