@mantine-vue/core 3.0.0 → 3.2.0

package/lib/core/styles-api/styles-api.types.d.ts

@@ -1,12 +1,62 @@
 import type { CSSProperties } from 'vue';
+import type { FactoryPayload } from '../factory/factory-payload';
+import type { FactoryClassNames, FactoryPartialVarsResolver, FactoryStyles } from '../factory/factory-styles-api';
 import type { MantineTheme } from '../MantineProvider';
-export type ClassNames<Payload = any> = Record<string, string> | ((theme: MantineTheme, payload: Payload) => Record<string, string>);
-export type Styles<Payload = any> = Record<string, CSSProperties> | ((theme: MantineTheme, payload: Payload) => Record<string, CSSProperties>);
-export type Vars<Payload = any> = Record<string, Record<string, string | undefined>> | ((theme: MantineTheme, payload: Payload) => Record<string, Record<string, string | undefined>>);
+/**
+ * Pre-payload form, where the type argument is a component's *props* interface and the record is
+ * unkeyed.
+ *
+ * Kept so components can move to payloads one at a time: the types below select this form unless
+ * the argument is an actual `FactoryPayload`. Only payload interfaces declare a `props` member,
+ * which is what makes that discrimination reliable.
+ *
+ * @deprecated Pass a `*Factory` payload instead, which keys these records by `stylesNames`.
+ */
+export type LegacyClassNames<Payload = any> = Record<string, string> | ((theme: MantineTheme, payload: Payload) => Record<string, string>);
+/** @deprecated See {@link LegacyClassNames}. */
+export type LegacyStyles<Payload = any> = Record<string, CSSProperties> | ((theme: MantineTheme, payload: Payload) => Record<string, CSSProperties>);
+/** @deprecated See {@link LegacyClassNames}. */
+export type LegacyVars<Payload = any> = Record<string, Record<string, string | undefined>> | ((theme: MantineTheme, payload: Payload) => Record<string, Record<string, string | undefined>>);
+/**
+ * Selects the payload-keyed form for a `FactoryPayload` and the legacy form otherwise.
+ *
+ * `any` is special-cased first, and the check is wrapped in a tuple, because a naked conditional
+ * distributes over `any` and would yield *both* branches as a union -- which is not assignable to
+ * either one, breaking every component that forwards `classNames` to a child.
+ */
+type IsAnyType<T> = 0 extends 1 & T ? true : false;
+type SelectStylesApi<Payload, Keyed, Legacy> = IsAnyType<Payload> extends true ? Legacy : [Payload] extends [FactoryPayload] ? Keyed : Legacy;
+export type ClassNames<Payload = any> = SelectStylesApi<Payload, FactoryClassNames<Payload & FactoryPayload>, LegacyClassNames<Payload>>;
+export type Styles<Payload = any> = SelectStylesApi<Payload, FactoryStyles<Payload & FactoryPayload>, LegacyStyles<Payload>>;
+export type Vars<Payload = any> = SelectStylesApi<Payload, FactoryPartialVarsResolver<Payload & FactoryPayload>, LegacyVars<Payload>>;
+/**
+ * Styles API props shared by every Mantine Vue component.
+ *
+ */
 export interface StylesApiProps<Payload = any> {
+    /**
+     * Classes added to the component elements, key is a style name, value is a
+     * class name. Can be a function that receives the theme and the component
+     * props and returns the record.
+     */
     classNames?: ClassNames<Payload>;
+    /**
+     * Inline styles added to the component elements, key is a style name, value
+     * is a style object. Can be a function that receives the theme and the
+     * component props and returns the record.
+     */
     styles?: Styles<Payload>;
+    /**
+     * CSS variables added to the component elements, key is a style name, value
+     * is a record of CSS variables. Can be a function that receives the theme and
+     * the component props and returns the record.
+     */
     vars?: Vars<Payload>;
+    /**
+     * If set, all Mantine classes are removed from the component elements. Static
+     * classes, class names from `classNames` and CSS variables are still applied.
+     * @default false
+     */
     unstyled?: boolean;
 }
 export interface UseStylesInput<Payload = any> {
@@ -16,12 +66,13 @@ export interface UseStylesInput<Payload = any> {
     stylesCtx?: Record<string, any>;
     className?: any;
     style?: CSSProperties | CSSProperties[];
-    classNames?: ClassNames<Payload>;
-    styles?: Styles<Payload>;
-    vars?: Vars<Payload>;
+    classNames?: LegacyClassNames<Payload>;
+    styles?: LegacyStyles<Payload>;
+    vars?: LegacyVars<Payload>;
     varsResolver?: (theme: MantineTheme, props: Record<string, any>, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
     rootSelector?: string;
     selector?: string;
     unstyled?: boolean;
     attributes?: Record<string, Record<string, any>>;
 }
+export {};

package/lib/core/utils/index.d.ts

@@ -1,5 +1,6 @@
 import { type InjectionKey } from 'vue';
 export * from '@mantine-vue/utils';
 export * from './create-scoped-keydown-handler';
+export * from './omit-attrs';
 export declare function createSafeInjectionContext<T>(errorMessage: string): readonly [(value: T) => void, () => T & ({} | undefined), InjectionKey<T>];
 export declare const createSafeContext: typeof createSafeInjectionContext;

package/lib/core/utils/omit-attrs.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns `attrs` without the given keys.
+ *
+ * @example
+ * const forwardedAttrs = computed(() => omitAttrs(attrs, ['onClick', 'onKeydown']))
+ */
+export declare function omitAttrs(attrs: Record<string, unknown>, keys: readonly string[]): Record<string, unknown>;

package/lib/utils/Floating/FloatingArrow/FloatingArrow.d.ts

@@ -1,55 +1,3 @@
-import { type PropType } from 'vue';
-import type { ArrowPosition, FloatingPosition } from '../types';
-export declare const FloatingArrow: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    position: {
-        type: PropType<FloatingPosition>;
-        required: true;
-    };
-    arrowSize: {
-        type: NumberConstructor;
-        required: true;
-    };
-    arrowOffset: {
-        type: NumberConstructor;
-        required: true;
-    };
-    arrowRadius: {
-        type: NumberConstructor;
-        required: true;
-    };
-    arrowPosition: {
-        type: PropType<ArrowPosition>;
-        required: true;
-    };
-    arrowX: NumberConstructor;
-    arrowY: NumberConstructor;
-    visible: BooleanConstructor;
-}>, () => 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<{
-    position: {
-        type: PropType<FloatingPosition>;
-        required: true;
-    };
-    arrowSize: {
-        type: NumberConstructor;
-        required: true;
-    };
-    arrowOffset: {
-        type: NumberConstructor;
-        required: true;
-    };
-    arrowRadius: {
-        type: NumberConstructor;
-        required: true;
-    };
-    arrowPosition: {
-        type: PropType<ArrowPosition>;
-        required: true;
-    };
-    arrowX: NumberConstructor;
-    arrowY: NumberConstructor;
-    visible: BooleanConstructor;
-}>> & Readonly<{}>, {
-    visible: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Arrow rendered by the floating components (Popover, Tooltip, HoverCard, Menu). */
+export declare const FloatingArrow: import("vue").DefineComponent<import("./FloatingArrow.types").FloatingArrowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./FloatingArrow.types").FloatingArrowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export type { FloatingArrowProps } from './FloatingArrow.types';

package/lib/utils/Floating/FloatingArrow/FloatingArrow.types.d.ts

@@ -0,0 +1,24 @@
+import type { ArrowPosition, FloatingPosition } from '../types';
+/** Props declared by `FloatingArrow` itself. */
+export interface FloatingArrowProps {
+    /** Position of the floating element the arrow points away from. */
+    position: FloatingPosition;
+    /** Width and height of the arrow in px. */
+    arrowSize: number;
+    /** Distance between the arrow and the edge of the floating element in px. */
+    arrowOffset: number;
+    /** Border radius of the arrow in px. */
+    arrowRadius: number;
+    /** Alignment of the arrow along the floating element's edge. */
+    arrowPosition: ArrowPosition;
+    /** Horizontal offset reported by the floating middleware. */
+    arrowX?: number;
+    /** Vertical offset reported by the floating middleware. */
+    arrowY?: number;
+    /**
+     * If set, the arrow is rendered. Nothing is rendered otherwise.
+     *
+     * @default false
+     */
+    visible?: boolean;
+}

package/lib/utils/Floating/FloatingArrow/FloatingArrow.vue.d.ts

@@ -0,0 +1,4 @@
+import type { FloatingArrowProps } from './FloatingArrow.types';
+declare const __VLS_export: import("vue").DefineComponent<FloatingArrowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FloatingArrowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/lib/utils/InlineInput/InlineInput.d.ts

@@ -134,15 +134,15 @@ export declare const InlineInput: import("vue").DefineComponent<import("vue").Ex
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    size: string | number;
     label: any;
-    variant: string;
+    disabled: boolean;
+    description: any;
     error: any;
+    size: string | number;
+    mod: any;
+    variant: string;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
-    description: any;
-    disabled: boolean;
-    mod: any;
     unstyled: boolean;
     labelPosition: "left" | "right";
     labelElement: string;

package/lib/utils/InputsGroupFieldset.d.ts

@@ -1,3 +1,10 @@
-export declare const InputsGroupFieldset: 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>;
+/**
+ * Resets the browser's default `fieldset` styling. Used by the selection group
+ * components to associate a group of inputs with its label.
+ */
+export declare const InputsGroupFieldset: import("..").MantineComponent<{
+    props: import("./InputsGroupFieldset.types").InputsGroupFieldsetProps;
+    slots: import("./InputsGroupFieldset.types").InputsGroupFieldsetSlots;
+    element: "fieldset";
+}>;
+export type { InputsGroupFieldsetProps, InputsGroupFieldsetSlots, InputsGroupFieldsetFactory, } from './InputsGroupFieldset.types';

package/lib/utils/InputsGroupFieldset.types.d.ts

@@ -0,0 +1,17 @@
+import type { Factory } from '../core';
+import type { VNodeChild } from 'vue';
+import type { BoxProps } from '../core';
+export interface InputsGroupFieldsetSlots {
+    /** Group content. */
+    default?: () => VNodeChild;
+}
+/**
+ * `InputsGroupFieldset` declares no runtime props – every attribute falls through to
+ * the `fieldset` element – so its public type is `BoxProps`.
+ */
+export type InputsGroupFieldsetProps = BoxProps;
+export type InputsGroupFieldsetFactory = Factory<{
+    props: InputsGroupFieldsetProps;
+    slots: InputsGroupFieldsetSlots;
+    element: 'fieldset';
+}>;

package/lib/utils/InputsGroupFieldset.vue.d.ts

@@ -0,0 +1,11 @@
+import type { InputsGroupFieldsetSlots } from './InputsGroupFieldset.types';
+type __VLS_Slots = InputsGroupFieldsetSlots;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/utils/use-slot-revision.d.ts

@@ -0,0 +1,13 @@
+import { type Ref } from 'vue';
+/**
+ *
+ * Some components cannot render their default slot with a plain `<slot />` the
+ * children need to be walked, cloned or wrapped first so the work happens in a
+ * function rendered through `<component :is="renderChildren" />`. That function runs
+ * inside its own render effect, which Vue only re-runs when something reactive it read
+ * has changed.
+ *
+ * Reading the returned ref inside such a function subscribes that render effect to it,
+ * and the ref is bumped whenever the owning component is about to re-render
+ */
+export declare function useSlotRevision(): Ref<number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/core",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "Vue component foundation architecturally equivalent to @mantine/core",
   "license": "MIT",
   "files": [
@@ -28,6 +28,16 @@
         "default": "./cjs/index.cjs"
       }
     },
+    "./styles-api": {
+      "import": {
+        "types": "./lib/core/styles-api/index.d.ts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/core/styles-api/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    },
     "./styles.css": "./styles.css",
     "./styles.layer.css": "./styles.layer.css",
     "./styles/*": "./styles/*"
@@ -44,8 +54,8 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/hooks": "3.0.0",
-    "@mantine-vue/utils": "3.0.0",
+    "@mantine-vue/hooks": "3.2.0",
+    "@mantine-vue/utils": "3.2.0",
     "vue": "^3.5.0"
   }
 }

package/lib/core/factory/with-box-props.d.ts

@@ -1,18 +0,0 @@
-import type { BoxProps } from '../Box';
-/**
- * Additively widens a Vue component's template `$props` with `BoxProps` so that
- * Mantine style props (m, mt, p, w, h, bg, c, …) and Box layout props
- * (hiddenFrom, visibleFrom, mod, …) are available for autocomplete/IntelliSense
- * and type-checking.
- */
-type InstanceOf<C> = C extends new (...args: any[]) => infer I ? I : object;
-type OwnProps<C> = InstanceOf<C> extends {
-    $props: infer P;
-} ? P : object;
-export type WithBoxProps<C> = C & {
-    new (): InstanceOf<C> & {
-        $props: OwnProps<C> & Omit<BoxProps, keyof OwnProps<C>>;
-    };
-};
-export declare function withBoxProps<C>(component: C): WithBoxProps<C>;
-export {};