@mantine-vue/core 3.0.0 → 3.1.0

package/lib/components/PillsInput/PillsInputField/PillsInputField.types.d.ts

@@ -0,0 +1,49 @@
+import type { BoxMod, BoxProps, StylesApiProps, Factory } from '../../../core';
+export type PillsInputFieldStylesNames = 'field';
+/**
+ * Props declared by `PillsInputField` itself.
+ * See `PillsInputFieldProps` for the full public type.
+ */
+export interface PillsInputFieldOwnProps extends StylesApiProps<PillsInputFieldFactory> {
+    /** Receives the root DOM node. */
+    rootRef?: VueRefTarget<Element>;
+    /** Controlled value, bound with `v-model`. */
+    modelValue?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    /**
+     * Controls how the field is displayed: always visible, hidden, or sized to its
+     * content.
+     *
+     * @default 'visible'
+     */
+    type?: 'auto' | 'visible' | 'hidden';
+    /**
+     * Sets `cursor: pointer` on the field, used when the input is read-only.
+     *
+     * @default false
+     */
+    pointer?: boolean;
+    /**
+     * Sets the `disabled` attribute. The parent `PillsInput` `disabled` prop is applied
+     * on top of this one.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /** `id` of the field. Falls back to the id generated by the enclosing `Input.Wrapper`. */
+    id?: string;
+    /** Ref assigned to the underlying `input` element. */
+    inputRef?: any;
+    /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
+    mod?: BoxMod;
+}
+export interface PillsInputFieldProps extends Omit<BoxProps, keyof PillsInputFieldOwnProps>, PillsInputFieldOwnProps {
+}
+export type PillsInputFieldFactory = Factory<{
+    props: Omit<PillsInputFieldProps, 'rootRef'>;
+    ref: HTMLInputElement;
+    element: 'input';
+    stylesNames: PillsInputFieldStylesNames;
+}>;
+import type { VueRefTarget } from '@mantine-vue/hooks';

package/lib/components/PillsInput/PillsInputField/PillsInputField.vue.d.ts

@@ -0,0 +1,12 @@
+import type { PillsInputFieldOwnProps } from './PillsInputField.types';
+declare const __VLS_export: import("vue").DefineComponent<PillsInputFieldOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<PillsInputFieldOwnProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,5 +1,6 @@
 export { PillsInput } from './PillsInput';
+export type { PillsInputFactory, PillsInputOwnProps, PillsInputProps, PillsInputSlots, PillsInputStylesNames, } from './PillsInput';
 export { PillsInputField } from './PillsInputField/PillsInputField';
 export type { PillsInputContextValue } from './PillsInput.context';
 export { providePillsInputContext, usePillsInputContext } from './PillsInput.context';
-export type { PillsInputFieldStylesNames } from './PillsInputField/PillsInputField';
+export type { PillsInputFieldOwnProps, PillsInputFieldProps, PillsInputFieldStylesNames, } from './PillsInputField/PillsInputField';

package/lib/components/PinInput/PinInput.d.ts

@@ -1,350 +1,12 @@
-import { type PropType } from 'vue';
-import { type VueRefTarget } from '@mantine-vue/hooks';
-import { type MantineRadius, type MantineSize, type MantineSpacing } from '../../core';
-export type PinInputStylesNames = 'root' | 'pinInput' | 'input';
-export type PinInputCssVariables = {
-    root: '--pin-input-size';
-};
-export type PinInputTypeAttribute = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | (string & {});
-export type PinInputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-export interface PinInputProps {
-    name?: string;
-    form?: string;
-    gap?: string | number;
-    radius?: string | number;
-    size?: string | number;
-    autoFocus?: boolean;
-    modelValue?: string;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-    onComplete?: (value: string) => void;
-    placeholder?: string;
-    manageFocus?: boolean;
-    oneTimeCode?: boolean;
-    id?: string;
-    disabled?: boolean;
-    error?: boolean;
-    type?: 'alphanumeric' | 'number' | RegExp;
-    mask?: boolean;
-    length?: number;
-    readOnly?: boolean;
-    inputType?: PinInputTypeAttribute;
-    inputMode?: PinInputMode;
-    ariaLabel?: string;
-    hiddenInputProps?: Record<string, any>;
-    rootRef?: VueRefTarget<HTMLDivElement>;
-    inputRef?: VueRefTarget<HTMLInputElement>;
-    getInputProps?: (index: number) => Record<string, any>;
-    variant?: string;
-    classNames?: Record<string, string> | ((theme: any, props: any) => Record<string, string>);
-    styles?: Record<string, any> | ((theme: any, props: any) => Record<string, any>);
-    vars?: Record<string, Record<string, string | undefined>> | ((theme: any, props: any) => Record<string, Record<string, string | undefined>>);
-    unstyled?: boolean;
-}
-export declare const PinInput: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    name: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    form: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    gap: {
-        type: PropType<MantineSpacing>;
-        default: undefined;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    size: {
-        type: PropType<MantineSize>;
-        default: undefined;
-    };
-    autoFocus: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    modelValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    value: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: string) => void>;
-        default: undefined;
-    };
-    onComplete: {
-        type: PropType<(value: string) => void>;
-        default: undefined;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    manageFocus: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    oneTimeCode: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    id: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    type: {
-        type: PropType<"alphanumeric" | "number" | RegExp>;
-        default: undefined;
-    };
-    mask: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    length: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    readOnly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    inputType: {
-        type: PropType<PinInputTypeAttribute>;
-        default: undefined;
-    };
-    inputMode: {
-        type: PropType<PinInputMode>;
-        default: undefined;
-    };
-    ariaLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    hiddenInputProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    rootRef: {
-        type: PropType<VueRefTarget<HTMLDivElement>>;
-        default: undefined;
-    };
-    inputRef: {
-        type: PropType<VueRefTarget<HTMLInputElement>>;
-        default: undefined;
-    };
-    getInputProps: {
-        type: PropType<(index: number) => Record<string, any>>;
-        default: undefined;
-    };
-    variant: {
-        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;
-    };
-}>, () => 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<{
-    name: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    form: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    gap: {
-        type: PropType<MantineSpacing>;
-        default: undefined;
-    };
-    radius: {
-        type: PropType<MantineRadius>;
-        default: undefined;
-    };
-    size: {
-        type: PropType<MantineSize>;
-        default: undefined;
-    };
-    autoFocus: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    modelValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    value: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultValue: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    onChange: {
-        type: PropType<(value: string) => void>;
-        default: undefined;
-    };
-    onComplete: {
-        type: PropType<(value: string) => void>;
-        default: undefined;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    manageFocus: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    oneTimeCode: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    id: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    error: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    type: {
-        type: PropType<"alphanumeric" | "number" | RegExp>;
-        default: undefined;
-    };
-    mask: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    length: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    readOnly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    inputType: {
-        type: PropType<PinInputTypeAttribute>;
-        default: undefined;
-    };
-    inputMode: {
-        type: PropType<PinInputMode>;
-        default: undefined;
-    };
-    ariaLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    hiddenInputProps: {
-        type: PropType<Record<string, any>>;
-        default: undefined;
-    };
-    rootRef: {
-        type: PropType<VueRefTarget<HTMLDivElement>>;
-        default: undefined;
-    };
-    inputRef: {
-        type: PropType<VueRefTarget<HTMLInputElement>>;
-        default: undefined;
-    };
-    getInputProps: {
-        type: PropType<(index: number) => Record<string, any>>;
-        default: undefined;
-    };
-    variant: {
-        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<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    size: MantineSize;
-    length: number;
-    form: string;
-    mask: boolean;
-    radius: MantineRadius;
-    name: string;
-    variant: string;
-    type: "number" | RegExp | "alphanumeric";
-    error: boolean;
-    onChange: (value: string) => void;
-    value: string;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    disabled: boolean;
-    defaultValue: string;
-    id: string;
-    gap: MantineSpacing;
-    onComplete: (value: string) => void;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    modelValue: string;
-    hiddenInputProps: Record<string, any>;
-    placeholder: string;
-    inputRef: VueRefTarget<HTMLInputElement>;
-    rootRef: VueRefTarget<HTMLDivElement>;
-    readOnly: boolean;
-    inputMode: PinInputMode;
-    autoFocus: boolean;
-    manageFocus: boolean;
-    oneTimeCode: boolean;
-    inputType: PinInputTypeAttribute;
-    ariaLabel: string;
-    getInputProps: (index: number) => Record<string, any>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export declare const PinInput: import("../..").MantineComponent<{
+    props: Omit<import("./PinInput.types").PinInputProps, "rootRef">;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    emits: import("./PinInput.types").PinInputEmits;
+    element: "div";
+    stylesNames: import("./PinInput.types").PinInputStylesNames;
+    vars: import("./PinInput.types").PinInputCssVariables;
+}>;
+export type { PinInputCssVariables, PinInputEmits, PinInputMode, PinInputOwnProps, PinInputProps, PinInputStylesNames, PinInputTypeAttribute, PinInputFactory, } from './PinInput.types';

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

@@ -0,0 +1,137 @@
+import type { VueRefTarget } from '@mantine-vue/hooks';
+import type { BoxProps, MantineRadius, MantineSize, MantineSpacing, StylesApiProps, Factory } from '../../core';
+export type PinInputStylesNames = 'root' | 'pinInput' | 'input';
+export type PinInputCssVariables = {
+    root: '--pin-input-size';
+};
+export type PinInputTypeAttribute = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | (string & {});
+export type PinInputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+/** Props declared by `PinInput` itself. See `PinInputProps` for the full public type. */
+export interface PinInputOwnProps extends StylesApiProps<PinInputFactory> {
+    /** `name` of the hidden input, used when the input is part of a form. */
+    name?: string;
+    /** `form` of the hidden input. */
+    form?: string;
+    /**
+     * Key of `theme.spacing` or any valid CSS value to set the gap between the fields.
+     *
+     * @default 'sm'
+     */
+    gap?: MantineSpacing;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`. */
+    radius?: MantineRadius;
+    /**
+     * Controls the size of the fields.
+     *
+     * @default 'sm'
+     */
+    size?: MantineSize;
+    /**
+     * If set, the first field is focused on mount.
+     *
+     * @default false
+     */
+    autoFocus?: boolean;
+    /** Entered code, bound with `v-model`. */
+    modelValue?: string;
+    /** Uncontrolled initial code. */
+    defaultValue?: string;
+    /**
+     * Placeholder of an empty field.
+     *
+     * @default '\u25cb'
+     */
+    placeholder?: string;
+    /**
+     * If set, focus moves to the next field as characters are entered.
+     *
+     * @default true
+     */
+    manageFocus?: boolean;
+    /**
+     * If set, the fields advertise themselves as one-time-code inputs so the browser can
+     * offer an SMS code.
+     *
+     * @default true
+     */
+    oneTimeCode?: boolean;
+    /** Base `id` of the fields. Generated automatically when not set. */
+    id?: string;
+    /**
+     * Sets the `disabled` attribute on every field.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If set, error styles are applied to every field.
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Characters the fields accept. A `RegExp` is tested against the entered value.
+     *
+     * @default 'alphanumeric'
+     */
+    type?: 'alphanumeric' | 'number' | RegExp;
+    /**
+     * If set, the entered characters are masked.
+     *
+     * @default false
+     */
+    mask?: boolean;
+    /**
+     * Number of fields.
+     *
+     * @default 4
+     */
+    length?: number;
+    /**
+     * If set, the code cannot be changed by the user.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /** `type` attribute of the fields. Derived from `mask` and `type` when not set. */
+    inputType?: PinInputTypeAttribute;
+    /** `inputmode` attribute of the fields. Derived from `type` when not set. */
+    inputMode?: PinInputMode;
+    /**
+     * `aria-label` of each field.
+     *
+     * @default 'PinInput'
+     */
+    ariaLabel?: string;
+    /** Props passed down to the hidden input that carries the code in a form. */
+    hiddenInputProps?: Record<string, any>;
+    /** Ref assigned to the root element. */
+    rootRef?: VueRefTarget<HTMLDivElement>;
+    /** Ref assigned to the first field. */
+    inputRef?: VueRefTarget<HTMLInputElement>;
+    /** Returns extra props for the field at the given index. */
+    getInputProps?: (index: number) => Record<string, any>;
+    /** Controls the visual representation of the fields. */
+    variant?: string;
+}
+export interface PinInputProps extends Omit<BoxProps, keyof PinInputOwnProps>, PinInputOwnProps {
+}
+export interface PinInputEmits {
+    /** Called with the combined value whenever any field changes. */
+    'update:modelValue': [value: string];
+    /** Called with the combined value whenever any field changes. */
+    change: [value: string];
+    /** Called with the combined value once every field is filled. */
+    complete: [value: string];
+}
+export type PinInputFactory = Factory<{
+    props: Omit<PinInputProps, 'rootRef'>;
+    ref: HTMLDivElement;
+    exposed: {
+        rootElement: Element | null;
+    };
+    emits: PinInputEmits;
+    element: 'div';
+    stylesNames: PinInputStylesNames;
+    vars: PinInputCssVariables;
+}>;

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

@@ -0,0 +1,37 @@
+import type { PinInputOwnProps } from './PinInput.types';
+/** Character classes the fields can be restricted to. */
+declare const regex: {
+    number: RegExp;
+    alphanumeric: RegExp;
+};
+declare const defaultProps: {
+    readonly gap: "sm";
+    readonly length: 4;
+    readonly manageFocus: true;
+    readonly oneTimeCode: true;
+    readonly placeholder: "○";
+    readonly type: "alphanumeric";
+    readonly ariaLabel: "PinInput";
+    readonly size: "sm";
+};
+/** 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>>;
+/**
+ * `Input` renders a wrapper around the real field, so a ref to it is not the input
+ * element. Both shapes are handled because the ref may already be the element.
+ */
+declare function getInputElement(node: any): HTMLInputElement | null;
+export { regex, defaultProps, varsResolver, getInputElement };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<PinInputOwnProps, {
+    rootElement: import("vue").Ref<Element | null, Element | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<PinInputOwnProps> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,2 +1,2 @@
 export { PinInput } from './PinInput';
-export type { PinInputCssVariables, PinInputProps, PinInputStylesNames } from './PinInput';
+export type { PinInputCssVariables, PinInputEmits, PinInputFactory, PinInputMode, PinInputOwnProps, PinInputProps, PinInputStylesNames, PinInputTypeAttribute, } from './PinInput';