@mantine-vue/core 3.0.0 → 3.2.0

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

@@ -0,0 +1,127 @@
+import type { VNodeChild } from 'vue';
+import type { MantineNode, MantineSize, StylesApiProps, MantineElementType } from '../../core';
+import type { ClearSectionMode } from '../Input';
+import type { InputBaseStylesNames } from '../InputBase';
+export type FileInputStylesNames = InputBaseStylesNames;
+export interface FileInputSlots {
+    /** Input label. */
+    label?: () => VNodeChild;
+    /** Description rendered below the label. */
+    description?: () => VNodeChild;
+    /** Error message rendered below the input. */
+    error?: () => VNodeChild;
+    /** Content rendered while no file is selected. */
+    placeholder?: () => VNodeChild;
+    /** Content rendered on the left side of the input. */
+    leftSection?: () => VNodeChild;
+    /** Content rendered on the right side of the input. */
+    rightSection?: () => VNodeChild;
+    /**
+     * Renders the selected file or files. Preferred alternative to the `valueComponent`
+     * prop, takes precedence over it when provided.
+     */
+    value?: (payload: {
+        value: File | File[] | null;
+    }) => VNodeChild;
+}
+/** Props declared by `FileInput` itself. */
+export interface FileInputProps extends StylesApiProps<FileInputProps> {
+    /**
+     * Element or component rendered as the input.
+     *
+     * @default 'button'
+     */
+    component?: MantineElementType;
+    /** Selected file, or files in `multiple` mode, bound with `v-model`. */
+    modelValue?: File | File[] | null;
+    /** Uncontrolled initial file or files. */
+    defaultValue?: File | File[] | null;
+    /**
+     * If set, more than one file can be picked and the value is an array.
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /** `accept` attribute of the underlying file input, for example `image/png,image/jpeg`. */
+    accept?: string;
+    /** `name` of the underlying file input, used when the input is part of a form. */
+    name?: string;
+    /** `form` of the underlying file input. */
+    form?: string;
+    /**
+     * Renders the selected file or files. Lower-priority fallback kept for back-compat –
+     * prefer the `value` slot, which takes precedence over this prop. Renders a comma
+     * separated, truncated list of file names when neither is set.
+     */
+    valueComponent?: (value: File | File[] | null) => any;
+    /**
+     * If set, a clear button is rendered while a file is selected.
+     *
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * How the clear button and the right section share the right side of the input.
+     *
+     * @default 'both'
+     */
+    clearSectionMode?: ClearSectionMode;
+    /** Props passed down to the clear button. */
+    clearButtonProps?: Record<string, any>;
+    /**
+     * If set, the file picker cannot be opened.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /** `capture` attribute of the underlying file input, used to request a camera on mobile. */
+    capture?: boolean | 'user' | 'environment';
+    /** Props passed down to the underlying file input. */
+    fileInputProps?: Record<string, any>;
+    /**
+     * Content rendered while no file is selected.
+     * Can also be set with the `placeholder` slot – the slot takes precedence over the prop.
+     */
+    placeholder?: MantineNode;
+    /** Ref assigned a function that clears the underlying file input. */
+    resetRef?: any;
+    /** Content rendered on the right side of the input. */
+    rightSection?: MantineNode;
+    /**
+     * Controls the size of the input.
+     *
+     * @default 'sm'
+     */
+    size?: MantineSize | (string & {}) | number;
+    /**
+     * Input label.
+     * Can also be set with the `label` slot.
+     */
+    label?: MantineNode;
+    /**
+     * Description rendered below the label.
+     * Can also be set with the `description` slot.
+     */
+    description?: MantineNode;
+    /**
+     * Error message rendered below the input. `true` applies error styles without a message.
+     * Can also be set with the `error` slot.
+     */
+    error?: MantineNode | boolean;
+    /**
+     * If set, the input is marked required and the asterisk is shown.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /** If set, the asterisk is shown without setting the `required` attribute. */
+    withAsterisk?: boolean;
+    /** Props passed down to the root element. */
+    wrapperProps?: Record<string, any>;
+    /**
+     * If set, all Mantine classes are removed.
+     *
+     * @default false
+     */
+    unstyled?: boolean;
+}

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

@@ -0,0 +1,24 @@
+import type { FileInputProps, FileInputSlots } from './FileInput.types';
+/**
+ * Default renderer for the selected file or files: a single truncated line of names.
+ * A file name can be arbitrarily long, so it has to be clipped rather than wrapped —
+ * the input is a single-line control.
+ */
+declare function defaultValueComponent(value: File | File[] | null): import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;
+export { defaultValueComponent };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FileInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: File | File[] | null) => any;
+    "update:modelValue": (value: File | File[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<FileInputProps> & Readonly<{
+    onChange?: ((value: File | File[] | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: File | File[] | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FileInputSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1 +1,2 @@
 export { FileInput } from './FileInput';
+export type { FileInputProps, FileInputSlots, FileInputStylesNames } from './FileInput';

package/lib/components/Flex/Flex.d.ts

@@ -1,67 +1,12 @@
-import { type PropType } from 'vue';
-import { type AlignItems, type FlexDirection, type FlexWrap, type JustifyContent, type MantineSpacing, type StyleProp } from '../../core';
-export declare const Flex: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    component: {
-        type: StringConstructor;
-        default: string;
-    };
-    gap: PropType<StyleProp<MantineSpacing>>;
-    rowGap: PropType<StyleProp<MantineSpacing>>;
-    columnGap: PropType<StyleProp<MantineSpacing>>;
-    align: PropType<StyleProp<AlignItems>>;
-    justify: PropType<StyleProp<JustifyContent>>;
-    wrap: PropType<StyleProp<FlexWrap>>;
-    direction: PropType<StyleProp<FlexDirection>>;
-    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;
-    };
-    gap: PropType<StyleProp<MantineSpacing>>;
-    rowGap: PropType<StyleProp<MantineSpacing>>;
-    columnGap: PropType<StyleProp<MantineSpacing>>;
-    align: PropType<StyleProp<AlignItems>>;
-    justify: PropType<StyleProp<JustifyContent>>;
-    wrap: PropType<StyleProp<FlexWrap>>;
-    direction: PropType<StyleProp<FlexDirection>>;
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    component: string;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const Flex: import("../..").MantinePolymorphicComponent<{
+    props: Omit<import("./Flex.types").FlexProps, "component" | "rootRef">;
+    slots: import("./Flex.types").FlexSlots;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: "div";
+    defaultRef: HTMLDivElement;
+    stylesNames: import("./Flex.types").FlexStylesNames;
+}, "div">;
+export type { FlexFactory, FlexOwnProps, FlexProps, FlexSlots, FlexStylesNames } from './Flex.types';

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

@@ -0,0 +1,47 @@
+import type { VNodeChild } from 'vue';
+import type { AlignItems, BoxProps, FlexDirection, FlexWrap, JustifyContent, MantineSpacing, StyleProp, StylesApiProps, PolymorphicFactory, MantineElementType } from '../../core';
+import type { VueRefTarget } from '@mantine-vue/hooks';
+/** Props declared by `Flex` itself. See `FlexProps` for the full public type. */
+export interface FlexOwnProps extends StylesApiProps<FlexProps> {
+    /** 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 `Flex`.
+     *
+     * @default 'div'
+     */
+    component?: MantineElementType;
+    /** `gap` CSS property */
+    gap?: StyleProp<MantineSpacing>;
+    /** `row-gap` CSS property */
+    rowGap?: StyleProp<MantineSpacing>;
+    /** `column-gap` CSS property */
+    columnGap?: StyleProp<MantineSpacing>;
+    /** `align-items` CSS property */
+    align?: StyleProp<AlignItems>;
+    /** `justify-content` CSS property */
+    justify?: StyleProp<JustifyContent>;
+    /** `flex-wrap` CSS property */
+    wrap?: StyleProp<FlexWrap>;
+    /** `flex-direction` CSS property */
+    direction?: StyleProp<FlexDirection>;
+}
+export interface FlexProps extends Omit<BoxProps, keyof FlexOwnProps>, FlexOwnProps {
+}
+export type FlexStylesNames = 'root';
+export interface FlexSlots {
+    /** Flex container content. */
+    default?: () => VNodeChild;
+}
+/** Public contract of `Flex`. `component` and `rootRef` come from the factory. */
+export type FlexFactory = PolymorphicFactory<{
+    props: Omit<FlexProps, 'component' | 'rootRef'>;
+    slots: FlexSlots;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    defaultComponent: 'div';
+    defaultRef: HTMLDivElement;
+    stylesNames: FlexStylesNames;
+}>;

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

@@ -0,0 +1,16 @@
+import type { FlexOwnProps } from './Flex.types';
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FlexOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlexOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/FloatingIndicator/FloatingIndicator.d.ts

@@ -1,116 +1,11 @@
-import { type PropType } from 'vue';
-export type FloatingIndicatorStylesNames = 'root';
-export declare const FloatingIndicator: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    target: {
-        type: PropType<HTMLElement | null | undefined>;
-        default: undefined;
-    };
-    parent: {
-        type: PropType<HTMLElement | null | undefined>;
-        default: undefined;
-    };
-    transitionDuration: {
-        type: PropType<number | string>;
-        default: undefined;
-    };
-    displayAfterTransitionEnd: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onTransitionStart: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    onTransitionEnd: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    component: {
-        type: StringConstructor;
-        default: string;
-    };
-    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<{
-    target: {
-        type: PropType<HTMLElement | null | undefined>;
-        default: undefined;
-    };
-    parent: {
-        type: PropType<HTMLElement | null | undefined>;
-        default: undefined;
-    };
-    transitionDuration: {
-        type: PropType<number | string>;
-        default: undefined;
-    };
-    displayAfterTransitionEnd: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onTransitionStart: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    onTransitionEnd: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    component: {
-        type: StringConstructor;
-        default: string;
-    };
-    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<{}>, {
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    target: HTMLElement | null | undefined;
-    parent: HTMLElement | null | undefined;
-    mod: any;
-    transitionDuration: string | number;
-    onTransitionEnd: () => void;
-    onTransitionStart: () => void;
-    component: string;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    displayAfterTransitionEnd: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const FloatingIndicator: import("../..").MantineComponent<{
+    props: Omit<import("./FloatingIndicator.types").FloatingIndicatorProps, "rootRef">;
+    ref: HTMLDivElement;
+    slots: import("./FloatingIndicator.types").FloatingIndicatorSlots;
+    element: "div";
+    stylesNames: import("./FloatingIndicator.types").FloatingIndicatorStylesNames;
+    vars: import("./FloatingIndicator.types").FloatingIndicatorCssVariables;
+}>;
+export type { FloatingIndicatorCssVariables, FloatingIndicatorOwnProps, FloatingIndicatorProps, FloatingIndicatorSlots, FloatingIndicatorStylesNames, FloatingIndicatorFactory, } from './FloatingIndicator.types';
+export { useFloatingIndicator } from './use-floating-indicator';
+export type { UseFloatingIndicatorInput } from './use-floating-indicator';

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

@@ -0,0 +1,58 @@
+import type { VNodeChild } from 'vue';
+import type { BoxMod, BoxProps, StylesApiProps, MantineElementType, Factory } from '../../core';
+/** Props declared by `FloatingIndicator` itself. See `FloatingIndicatorProps` for the full public type. */
+export interface FloatingIndicatorOwnProps extends StylesApiProps<FloatingIndicatorFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /**
+     * Target element over which the indicator is displayed.
+     * The indicator will be positioned to match the target's size and position.
+     */
+    target?: HTMLElement | null | undefined;
+    /**
+     * Parent container element that must have `position: relative`.
+     * The indicator's position is calculated relative to this element.
+     */
+    parent?: HTMLElement | null | undefined;
+    /**
+     * Transition duration in ms
+     *
+     * @default 150
+     */
+    transitionDuration?: number | string;
+    /**
+     * Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.
+     * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent
+     * the indicator from appearing at the wrong position during the parent's animation.
+     *
+     * @default false
+     */
+    displayAfterTransitionEnd?: boolean;
+    /**
+     * Root element or component rendered by `FloatingIndicator`.
+     *
+     * @default 'div'
+     */
+    component?: MantineElementType;
+    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    mod?: BoxMod;
+}
+export interface FloatingIndicatorProps extends Omit<BoxProps, keyof FloatingIndicatorOwnProps>, FloatingIndicatorOwnProps {
+}
+export interface FloatingIndicatorSlots {
+    /** Optional indicator content. */
+    default?: () => VNodeChild;
+}
+export type FloatingIndicatorStylesNames = 'root';
+export type FloatingIndicatorCssVariables = {
+    root: '--transition-duration';
+};
+export type FloatingIndicatorFactory = Factory<{
+    props: Omit<FloatingIndicatorProps, 'rootRef'>;
+    ref: HTMLDivElement;
+    slots: FloatingIndicatorSlots;
+    element: 'div';
+    stylesNames: FloatingIndicatorStylesNames;
+    vars: FloatingIndicatorCssVariables;
+}>;
+import type { VueRefTarget } from '@mantine-vue/hooks';

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

@@ -0,0 +1,18 @@
+import type { FloatingIndicatorOwnProps, FloatingIndicatorSlots } from './FloatingIndicator.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<FloatingIndicatorOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "transition-end": () => any;
+    "transition-start": () => any;
+}, string, import("vue").PublicProps, Readonly<FloatingIndicatorOwnProps> & Readonly<{
+    "onTransition-end"?: (() => any) | undefined;
+    "onTransition-start"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FloatingIndicatorSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,4 +1 @@
-export { FloatingIndicator } from './FloatingIndicator';
-export type { FloatingIndicatorStylesNames } from './FloatingIndicator';
-export { useFloatingIndicator } from './use-floating-indicator';
-export type { UseFloatingIndicatorInput } from './use-floating-indicator';
+export * from './FloatingIndicator';

package/lib/components/FloatingWindow/FloatingWindow.context.d.ts

@@ -16,8 +16,8 @@ export interface FloatingWindowContextValue {
     dimensions?: FloatingWindowDimensions;
     constrainToViewport?: boolean;
     constrainOffset?: number;
-    onResizeStart?: () => void;
-    onResizeEnd?: () => void;
-    onSizeChange?: (size: FloatingWindowSize) => void;
+    onResizeStart: () => void;
+    onResizeEnd: () => void;
+    onSizeChange: (size: FloatingWindowSize) => void;
 }
 export declare const provideFloatingWindowContext: (value: FloatingWindowContextValue) => void, useFloatingWindowContext: () => FloatingWindowContextValue;