@mantine-vue/core 3.0.0 → 3.2.0

package/lib/components/ColorInput/ColorInput.d.ts

@@ -1,125 +1,48 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import { type ColorFormat } from '../ColorPicker';
-import { type InputBaseSlots } from '../InputBase';
-export interface ColorInputProps {
-    modelValue?: string;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-    onChangeEnd?: (value: string) => void;
-    format?: ColorFormat;
-    disallowInput?: boolean;
-    fixOnBlur?: boolean;
-    withPreview?: boolean;
-    withEyeDropper?: boolean;
-    popoverProps?: Record<string, any>;
-    closeOnColorSwatchClick?: boolean;
-    eyeDropperButtonProps?: Record<string, any>;
-    eyeDropperIcon?: any;
-    [key: string]: any;
-}
-export interface ColorInputSlots extends InputBaseSlots {
-    /** Custom eye dropper button icon, alternative to the `eyeDropperIcon` prop */
-    eyeDropperIcon?: () => VNodeChild;
-}
-export declare const ColorInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    modelValue: StringConstructor;
-    value: StringConstructor;
-    defaultValue: {
-        type: StringConstructor;
-        default: string;
-    };
-    onChange: PropType<(value: string) => void>;
-    onChangeEnd: PropType<(value: string) => void>;
-    format: {
-        type: PropType<ColorFormat>;
-        default: string;
-    };
-    disallowInput: BooleanConstructor;
-    fixOnBlur: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withPreview: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withEyeDropper: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    popoverProps: ObjectConstructor;
-    closeOnColorSwatchClick: BooleanConstructor;
-    eyeDropperButtonProps: ObjectConstructor;
-    eyeDropperIcon: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    withPicker: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    swatches: PropType<string[]>;
-    swatchesPerRow: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>, () => 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<{
-    modelValue: StringConstructor;
-    value: StringConstructor;
-    defaultValue: {
-        type: StringConstructor;
-        default: string;
-    };
-    onChange: PropType<(value: string) => void>;
-    onChangeEnd: PropType<(value: string) => void>;
-    format: {
-        type: PropType<ColorFormat>;
-        default: string;
-    };
-    disallowInput: BooleanConstructor;
-    fixOnBlur: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withPreview: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withEyeDropper: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    popoverProps: ObjectConstructor;
-    closeOnColorSwatchClick: BooleanConstructor;
-    eyeDropperButtonProps: ObjectConstructor;
-    eyeDropperIcon: {
-        type: PropType<any>;
-        default: undefined;
-    };
-    withPicker: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    swatches: PropType<string[]>;
-    swatchesPerRow: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    defaultValue: string;
-    format: ColorFormat;
-    swatchesPerRow: number;
-    withPicker: boolean;
-    disallowInput: boolean;
-    fixOnBlur: boolean;
-    withPreview: boolean;
-    withEyeDropper: boolean;
-    closeOnColorSwatchClick: boolean;
-    eyeDropperIcon: any;
-}, SlotsType<ColorInputSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const ColorInput: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        "onChange-end"?: ((value: string) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (value: string) => any;
+        "update:modelValue": (value: string) => any;
+        "change-end": (value: 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;
+        "onChange-end"?: ((value: 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;
+    "onChange-end"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    "change-end": (value: 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("./ColorInput.types").ColorInputSlots;
+}) & {
+    classes: {
+        label: string;
+        root: string;
+        wrapper: string;
+        section: string;
+        input: string;
+        bottomSection: string;
+        required: string;
+        description: string;
+        error: string;
+    };
+};
+export type { ColorInputProps, ColorInputSlots, ColorInputStylesNames } from './ColorInput.types';

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

@@ -0,0 +1,85 @@
+import type { VNodeChild } from 'vue';
+import type { ColorFormat } from '../ColorPicker';
+import type { InputBaseSlots } from '../InputBase';
+export type ColorInputStylesNames = string;
+export interface ColorInputSlots extends InputBaseSlots {
+    /** Icon of the eye dropper button. Alternative to the `eyeDropperIcon` prop. */
+    eyeDropperIcon?: () => VNodeChild;
+}
+/**
+ * Props declared by `ColorInput` itself.
+ *
+ * Every prop of `InputBase` is also accepted and forwarded to the underlying input.
+ */
+export interface ColorInputProps {
+    /** Color value, bound with `v-model`. */
+    modelValue?: string;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default ''
+     */
+    defaultValue?: string;
+    /**
+     * Format the value is stored in.
+     *
+     * @default 'hex'
+     */
+    format?: ColorFormat;
+    /**
+     * If set, the value cannot be typed and only the picker can change it.
+     *
+     * @default false
+     */
+    disallowInput?: boolean;
+    /**
+     * If set, an invalid value is reverted to the last valid one when the input loses focus.
+     *
+     * @default true
+     */
+    fixOnBlur?: boolean;
+    /**
+     * If set, a swatch of the current color is rendered in the left section.
+     *
+     * @default true
+     */
+    withPreview?: boolean;
+    /**
+     * If set, an eye dropper button is rendered in the right section. Only shown in
+     * browsers that support the EyeDropper API.
+     *
+     * @default true
+     */
+    withEyeDropper?: boolean;
+    /** Props passed down to the `Popover` that holds the picker. */
+    popoverProps?: Record<string, any>;
+    /**
+     * If set, the dropdown closes when a swatch is clicked.
+     *
+     * @default false
+     */
+    closeOnColorSwatchClick?: boolean;
+    /** Props passed down to the eye dropper `ActionIcon`. */
+    eyeDropperButtonProps?: Record<string, any>;
+    /**
+     * Icon of the eye dropper button.
+     * Can also be set with the `eyeDropperIcon` slot – the slot takes precedence over the prop.
+     */
+    eyeDropperIcon?: any;
+    /**
+     * If set, the saturation and hue picker is rendered in the dropdown.
+     *
+     * @default true
+     */
+    withPicker?: boolean;
+    /** Predefined colors rendered as swatches in the dropdown. */
+    swatches?: string[];
+    /**
+     * Number of swatches per row.
+     *
+     * @default 7
+     */
+    swatchesPerRow?: number;
+    /** Any other prop is forwarded to the underlying `InputBase`. */
+    [key: string]: any;
+}

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

@@ -0,0 +1,19 @@
+import type { ColorInputSlots } from './ColorInput.types';
+type __VLS_Slots = ColorInputSlots;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    "change-end": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onChange-end"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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/ColorInput/EyeDropperIcon.d.ts

@@ -1,3 +1,2 @@
-export declare const EyeDropperIcon: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const EyeDropperIcon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export type { EyeDropperIconProps } from './EyeDropperIcon.types';

package/lib/components/ColorInput/EyeDropperIcon.types.d.ts

@@ -0,0 +1,6 @@
+import type { SVGAttributes } from 'vue';
+/** Native SVG attributes accepted by the color input eye-dropper icon. */
+export interface EyeDropperIconProps extends SVGAttributes {
+    /** Unique identifier assigned to the SVG element. */
+    id?: string;
+}

package/lib/components/ColorInput/EyeDropperIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,2 +1,2 @@
 export { ColorInput } from './ColorInput';
-export type { ColorInputProps, ColorInputSlots } from './ColorInput';
+export type { ColorInputProps, ColorInputSlots, ColorInputStylesNames } from './ColorInput';

package/lib/components/ColorPicker/AlphaSlider/AlphaSlider.d.ts

@@ -1,99 +1,47 @@
-import { type PropType } from 'vue';
-export declare const AlphaSlider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    value: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    defaultValue: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    color: {
-        type: StringConstructor;
-        required: true;
-    };
-    onChange: {
-        type: PropType<(value: number) => void>;
-        default: undefined;
-    };
-    onChangeEnd: {
-        type: PropType<(value: number) => void>;
-        default: undefined;
-    };
-    onScrubStart: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    onScrubEnd: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    size: {
-        type: StringConstructor;
-        default: string;
-    };
-    focusable: {
-        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<{
-    modelValue: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    value: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    defaultValue: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    color: {
-        type: StringConstructor;
-        required: true;
-    };
-    onChange: {
-        type: PropType<(value: number) => void>;
-        default: undefined;
-    };
-    onChangeEnd: {
-        type: PropType<(value: number) => void>;
-        default: undefined;
-    };
-    onScrubStart: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    onScrubEnd: {
-        type: PropType<() => void>;
-        default: undefined;
-    };
-    size: {
-        type: StringConstructor;
-        default: string;
-    };
-    focusable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    size: string;
-    onChange: (value: number) => void;
-    value: number;
-    defaultValue: number;
-    onChangeEnd: (value: number) => void;
-    onScrubStart: () => void;
-    onScrubEnd: () => void;
-    focusable: boolean;
-    modelValue: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Horizontal slider that selects the alpha channel, `0` to `1`. */
+export declare const AlphaSlider: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./AlphaSlider.types").AlphaSliderOwnProps> & Readonly<{
+        onChange?: ((value: number) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+        "onChange-end"?: ((value: number) => any) | undefined;
+        "onScrub-start"?: (() => any) | undefined;
+        "onScrub-end"?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (value: number) => any;
+        "update:modelValue": (value: number) => any;
+        "change-end": (value: number) => any;
+        "scrub-start": () => any;
+        "scrub-end": () => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./AlphaSlider.types").AlphaSliderOwnProps> & Readonly<{
+        onChange?: ((value: number) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+        "onChange-end"?: ((value: number) => any) | undefined;
+        "onScrub-start"?: (() => any) | undefined;
+        "onScrub-end"?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./AlphaSlider.types").AlphaSliderOwnProps> & Readonly<{
+    onChange?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    "onChange-end"?: ((value: number) => any) | undefined;
+    "onScrub-start"?: (() => any) | undefined;
+    "onScrub-end"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: number) => any;
+    "update:modelValue": (value: number) => any;
+    "change-end": (value: number) => any;
+    "scrub-start": () => any;
+    "scrub-end": () => any;
+}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    classes: Record<string, string>;
+};
+export type { AlphaSliderOwnProps, AlphaSliderProps } from './AlphaSlider.types';

package/lib/components/ColorPicker/AlphaSlider/AlphaSlider.types.d.ts

@@ -0,0 +1,9 @@
+import type { BoxProps } from '../../../core';
+import type { ColorSliderBaseProps } from '../ColorSlider/ColorSlider';
+/** Props declared by `AlphaSlider` itself. See `AlphaSliderProps` for the full public type. */
+export interface AlphaSliderOwnProps extends ColorSliderBaseProps {
+    /** Colour the alpha gradient fades into, in any valid CSS format. */
+    color: string;
+}
+export interface AlphaSliderProps extends Omit<BoxProps, keyof AlphaSliderOwnProps>, AlphaSliderOwnProps {
+}

package/lib/components/ColorPicker/AlphaSlider/AlphaSlider.vue.d.ts

@@ -0,0 +1,25 @@
+import type { AlphaSliderOwnProps } from './AlphaSlider.types';
+/** Checkerboard drawn under the gradient so transparency is visible. */
+declare const CHECKERS: {
+    backgroundImage: string;
+    backgroundSize: string;
+};
+declare const INSET_SHADOW: {
+    boxShadow: string;
+};
+export { CHECKERS, INSET_SHADOW };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<AlphaSliderOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: number) => any;
+    "update:modelValue": (value: number) => any;
+    "change-end": (value: number) => any;
+    "scrub-start": () => any;
+    "scrub-end": () => any;
+}, string, import("vue").PublicProps, Readonly<AlphaSliderOwnProps> & Readonly<{
+    onChange?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    "onChange-end"?: ((value: number) => any) | undefined;
+    "onScrub-start"?: (() => any) | undefined;
+    "onScrub-end"?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;