@mantine-vue/core 3.0.0 → 3.1.0

package/lib/components/InputBase/InputBase.d.ts

@@ -1,478 +1,10 @@
-import { type MantineRadius, type MantineSize } from '../../core';
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import type { InputSlots } from '../Input/Input';
-import type { MantineNode } from '../../core';
-export type InputBaseStylesNames = 'input' | 'wrapper' | 'section' | 'bottomSection' | 'root' | 'label' | 'required' | 'description' | 'error';
-export interface InputBaseSlots extends InputSlots {
-    label?: () => VNodeChild;
-    description?: () => VNodeChild;
-    error?: () => VNodeChild;
-}
-export declare const InputBase: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    component: {
-        type: PropType<any>;
-        default: string;
-    };
-    modelValue: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    value: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    defaultValue: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: any) => void>;
-        default: undefined;
-    };
-    __staticSelector: {
-        type: StringConstructor;
-        default: string;
-    };
-    __stylesApiProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    label: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    description: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    error: {
-        type: PropType<MantineNode | boolean>;
-        default: undefined;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withAsterisk: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    labelProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    descriptionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    errorProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    inputContainer: {
-        type: PropType<(children: any) => any>;
-        default: undefined;
-    };
-    inputWrapperOrder: {
-        type: PropType<Array<"label" | "input" | "description" | "error">>;
-        default: undefined;
-    };
-    id: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    size: {
-        type: PropType<MantineSize | (string & {}) | number>;
-        default: string;
-    };
-    labelElement: {
-        type: PropType<"label" | "div">;
-        default: string;
-    };
-    variant: {
-        type: PropType<"default" | "filled" | "unstyled">;
-        default: string;
-    };
-    wrapperProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    multiline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withAria: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    leftSection: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    leftSectionWidth: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    leftSectionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    leftSectionPointerEvents: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    rightSection: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    rightSectionWidth: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    rightSectionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    rightSectionPointerEvents: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    __clearSection: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    __clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    __clearSectionMode: {
-        type: PropType<"both" | "rightSection" | "clear">;
-        default: undefined;
-    };
-    __defaultRightSection: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    pointer: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withErrorStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    inputSize: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loadingPosition: {
-        type: PropType<"left" | "right">;
-        default: undefined;
-    };
-    __bottomSection: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    __bottomSectionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    rootRef: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    mod: {
-        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<{
-    component: {
-        type: PropType<any>;
-        default: string;
-    };
-    modelValue: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    value: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    defaultValue: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: any) => void>;
-        default: undefined;
-    };
-    __staticSelector: {
-        type: StringConstructor;
-        default: string;
-    };
-    __stylesApiProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    label: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    description: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    error: {
-        type: PropType<MantineNode | boolean>;
-        default: undefined;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withAsterisk: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    labelProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    descriptionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    errorProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    inputContainer: {
-        type: PropType<(children: any) => any>;
-        default: undefined;
-    };
-    inputWrapperOrder: {
-        type: PropType<Array<"label" | "input" | "description" | "error">>;
-        default: undefined;
-    };
-    id: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    size: {
-        type: PropType<MantineSize | (string & {}) | number>;
-        default: string;
-    };
-    labelElement: {
-        type: PropType<"label" | "div">;
-        default: string;
-    };
-    variant: {
-        type: PropType<"default" | "filled" | "unstyled">;
-        default: string;
-    };
-    wrapperProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    multiline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withAria: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    leftSection: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    leftSectionWidth: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    leftSectionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    leftSectionPointerEvents: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    rightSection: {
-        type: PropType<MantineNode>;
-        default: undefined;
-    };
-    rightSectionWidth: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    rightSectionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    rightSectionPointerEvents: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    __clearSection: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    __clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    __clearSectionMode: {
-        type: PropType<"both" | "rightSection" | "clear">;
-        default: undefined;
-    };
-    __defaultRightSection: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    pointer: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withErrorStyles: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    inputSize: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loadingPosition: {
-        type: PropType<"left" | "right">;
-        default: undefined;
-    };
-    __bottomSection: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    __bottomSectionProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    rootRef: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    mod: {
-        type: PropType<any>;
-        default: undefined;
-    };
-}>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    size: number | MantineSize | (string & {});
-    label: MantineNode;
-    radius: MantineRadius;
-    pointer: boolean;
-    variant: "default" | "filled" | "unstyled";
-    error: MantineNode;
-    onChange: (value: any) => void;
-    value: any;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    required: boolean;
-    description: MantineNode;
-    multiline: boolean;
-    disabled: boolean;
-    defaultValue: any;
-    mod: any;
-    id: string;
-    component: any;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    __staticSelector: string;
-    modelValue: any;
-    leftSection: any;
-    rightSection: MantineNode;
-    loading: boolean;
-    withAria: boolean;
-    __clearable: boolean;
-    __clearSection: any;
-    __defaultRightSection: any;
-    __clearSectionMode: "clear" | "both" | "rightSection";
-    labelElement: "div" | "label";
-    withAsterisk: boolean;
-    labelProps: Record<string, any>;
-    descriptionProps: Record<string, any>;
-    errorProps: Record<string, any>;
-    inputContainer: (children: any) => any;
-    inputWrapperOrder: ("input" | "label" | "error" | "description")[];
-    __stylesApiProps: Record<string, any>;
-    leftSectionWidth: string | number;
-    leftSectionProps: Record<string, any>;
-    leftSectionPointerEvents: string;
-    rightSectionWidth: string | number;
-    rightSectionProps: Record<string, any>;
-    rightSectionPointerEvents: string;
-    withErrorStyles: boolean;
-    inputSize: string | number;
-    loadingPosition: "left" | "right";
-    __bottomSection: any;
-    __bottomSectionProps: Record<string, any>;
-    wrapperProps: Record<string, any>;
-    rootRef: any;
-}, SlotsType<InputBaseSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const InputBase: import("../..").MantinePolymorphicComponent<{
+    props: Omit<import("./InputBase.types").InputBaseProps, "component" | "rootRef">;
+    slots: import("./InputBase.types").InputBaseSlots;
+    ref: HTMLInputElement;
+    defaultComponent: "input";
+    defaultRef: HTMLInputElement;
+    stylesNames: import("./InputBase.types").InputBaseStylesNames;
+    variant: import("./InputBase.types").InputBaseVariant;
+}, "input">;
+export type { InputBaseFactory, InputBaseOwnProps, InputBaseProps, InputBaseSlots, InputBaseStylesNames, InputBaseVariant, } from './InputBase.types';

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

@@ -0,0 +1,210 @@
+import type { VNodeChild } from 'vue';
+import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { BoxMod, BoxProps, MantineElementType, MantineNode, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
+import type { InputSlots } from '../Input/Input';
+export type InputBaseStylesNames = 'input' | 'wrapper' | 'section' | 'bottomSection' | 'root' | 'label' | 'required' | 'description' | 'error';
+export type InputBaseVariant = 'default' | 'filled' | 'unstyled';
+export interface InputBaseSlots extends InputSlots {
+    /** Input label. Takes precedence over the `label` prop. */
+    label?: () => VNodeChild;
+    /** Description rendered below the label. Takes precedence over the `description` prop. */
+    description?: () => VNodeChild;
+    /** Error message rendered below the input. Takes precedence over the `error` prop. */
+    error?: () => VNodeChild;
+}
+/** Props declared by `InputBase` itself. See `InputBaseProps` for the full public type. */
+export interface InputBaseOwnProps extends StylesApiProps<InputBaseFactory> {
+    /**
+     * Element or component rendered as the input.
+     *
+     * @default 'input'
+     */
+    component?: MantineElementType;
+    /** Controlled value, bound with `v-model`. */
+    modelValue?: any;
+    /** Uncontrolled initial value. */
+    defaultValue?: any;
+    /**
+     * Static selector used as the base of the generated class names.
+     *
+     * @default 'InputBase'
+     */
+    __staticSelector?: string;
+    /** Props object passed to the Styles API callbacks instead of the resolved props. */
+    __stylesApiProps?: Record<string, any>;
+    /**
+     * Input label.
+     * Can also be set with the `label` slot – the slot takes precedence.
+     */
+    label?: MantineNode;
+    /**
+     * Description rendered below the label.
+     * Can also be set with the `description` slot – the slot takes precedence.
+     */
+    description?: MantineNode;
+    /**
+     * Error message rendered below the input. `true` applies error styles without a message.
+     * Can also be set with the `error` slot – the slot takes precedence.
+     */
+    error?: MantineNode | boolean;
+    /**
+     * Adds the required attribute to the input and a red asterisk to the label.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Adds the red asterisk to the label without setting the input `required` attribute.
+     * Inherits `required` when not set.
+     */
+    withAsterisk?: boolean;
+    /** Props passed down to the `Input.Label` component. */
+    labelProps?: Record<string, any>;
+    /** Props passed down to the `Input.Description` component. */
+    descriptionProps?: Record<string, any>;
+    /** Props passed down to the `Input.Error` component. */
+    errorProps?: Record<string, any>;
+    /** Function that renders the input around the given children. */
+    inputContainer?: (children: any) => any;
+    /**
+     * Order of the elements inside the wrapper.
+     *
+     * @default ['label', 'description', 'input', 'error']
+     */
+    inputWrapperOrder?: Array<'label' | 'input' | 'description' | 'error'>;
+    /** `id` shared by the input, label, description and error elements. Generated when not set. */
+    id?: string;
+    /**
+     * Controls input height and horizontal padding.
+     *
+     * @default 'sm'
+     */
+    size?: MantineSize | (string & {}) | number;
+    /**
+     * Element rendered as the label.
+     *
+     * @default 'label'
+     */
+    labelElement?: 'label' | 'div';
+    /**
+     * Controls the visual representation of the input.
+     *
+     * @default 'default'
+     */
+    variant?: InputBaseVariant;
+    /** Props passed down to the root element (`Input.Wrapper` component). */
+    wrapperProps?: Record<string, any>;
+    /**
+     * If set, the input can have multiple lines, for example when `component="textarea"`.
+     *
+     * @default false
+     */
+    multiline?: boolean;
+    /**
+     * If set, `aria-` and other accessibility attributes are added to the input.
+     *
+     * @default true
+     */
+    withAria?: boolean;
+    /**
+     * Content rendered on the left side of the input.
+     * Can also be set with the `leftSection` slot – the slot takes precedence over the prop.
+     */
+    leftSection?: MantineNode;
+    /** Width of the left section. */
+    leftSectionWidth?: string | number;
+    /** Props passed down to the left section element. */
+    leftSectionProps?: Record<string, any>;
+    /**
+     * Sets `pointer-events` on the left section.
+     *
+     * @default 'none'
+     */
+    leftSectionPointerEvents?: string;
+    /**
+     * Content rendered on the right side of the input.
+     * Can also be set with the `rightSection` slot – the slot takes precedence over the prop.
+     */
+    rightSection?: MantineNode;
+    /** Width of the right section. */
+    rightSectionWidth?: string | number;
+    /** Props passed down to the right section element. */
+    rightSectionProps?: Record<string, any>;
+    /**
+     * Sets `pointer-events` on the right section.
+     *
+     * @default 'none'
+     */
+    rightSectionPointerEvents?: string;
+    /** Clear button rendered in the right section when the input is clearable. */
+    __clearSection?: MantineNode;
+    /**
+     * If set, the clear section replaces or joins the right section.
+     *
+     * @default false
+     */
+    __clearable?: boolean;
+    /** Controls how the clear section and right section are combined. */
+    __clearSectionMode?: 'both' | 'rightSection' | 'clear';
+    /** Right section rendered when no `rightSection` is provided. */
+    __defaultRightSection?: MantineNode;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`.
+     *
+     * @default theme.defaultRadius
+     */
+    radius?: MantineRadius;
+    /**
+     * Sets the `disabled` attribute on the input.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sets `cursor: pointer` on the input, useful for read-only comboboxes.
+     *
+     * @default false
+     */
+    pointer?: boolean;
+    /**
+     * If set, error styles are applied to the input when `error` is set.
+     *
+     * @default true
+     */
+    withErrorStyles?: boolean;
+    /** `size` attribute of the native input element. */
+    inputSize?: string | number;
+    /**
+     * If set, a loader is displayed in one of the input sections.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Section the loader is displayed in when `loading` is set.
+     *
+     * @default 'right'
+     */
+    loadingPosition?: 'left' | 'right';
+    /** Content rendered at the bottom of the input, inside the border. */
+    __bottomSection?: MantineNode;
+    /** Props passed down to the `__bottomSection` element. */
+    __bottomSectionProps?: Record<string, any>;
+    /**
+     * Receives the input element
+     */
+    rootRef?: VueRefTarget<Element>;
+    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    mod?: BoxMod;
+}
+export interface InputBaseProps extends Omit<BoxProps, keyof InputBaseOwnProps>, InputBaseOwnProps {
+}
+export type InputBaseFactory = PolymorphicFactory<{
+    props: Omit<InputBaseProps, 'component' | 'rootRef'>;
+    slots: InputBaseSlots;
+    ref: HTMLInputElement;
+    defaultComponent: 'input';
+    defaultRef: HTMLInputElement;
+    stylesNames: InputBaseStylesNames;
+    variant: InputBaseVariant;
+}>;