@mantine-vue/core 2.0.0 → 2.1.0

package/lib/components/Switch/SwitchGroup/SwitchGroup.d.ts

@@ -1,10 +1,17 @@
-import { type PropType } from 'vue';
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type MantineNode } from '../../../core';
 export interface SwitchGroupContextValue {
     value: string[];
     onChange: (event: Event) => void;
     size?: string | number;
     isDisabled?: (value: string) => boolean;
 }
+export interface SwitchGroupSlots {
+    default?: () => VNodeChild;
+    label?: () => VNodeChild;
+    description?: () => VNodeChild;
+    error?: () => VNodeChild;
+}
 export declare function useSwitchGroupContext(): SwitchGroupContextValue | null;
 export declare const SwitchGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
@@ -52,15 +59,15 @@ export declare const SwitchGroup: import("vue").DefineComponent<import("vue").Ex
         default: boolean;
     };
     label: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     description: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     error: {
-        type: PropType<any>;
+        type: PropType<MantineNode | boolean>;
         default: undefined;
     };
     classNames: {
@@ -127,15 +134,15 @@ export declare const SwitchGroup: import("vue").DefineComponent<import("vue").Ex
         default: boolean;
     };
     label: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     description: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     error: {
-        type: PropType<any>;
+        type: PropType<MantineNode | boolean>;
         default: undefined;
     };
     classNames: {
@@ -156,14 +163,14 @@ export declare const SwitchGroup: import("vue").DefineComponent<import("vue").Ex
     };
 }>> & Readonly<{}>, {
     size: string | number;
+    label: MantineNode;
     name: string;
-    error: any;
+    error: MantineNode;
     onChange: (value: string[]) => void;
-    label: any;
     value: string[] | undefined;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
-    description: any;
+    description: MantineNode;
     disabled: boolean;
     defaultValue: string[] | undefined;
     vars: Function | Record<string, any>;
@@ -173,4 +180,4 @@ export declare const SwitchGroup: import("vue").DefineComponent<import("vue").Ex
     readOnly: boolean;
     hiddenInputValuesSeparator: string;
     maxSelectedValues: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, SlotsType<SwitchGroupSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/components/Table/Table.d.ts

@@ -100,8 +100,8 @@ export declare const Table: import("../..").WithBoxProps<{
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        variant: TableVariant;
         data: TableData;
+        variant: TableVariant;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         mod: any;
@@ -221,8 +221,8 @@ export declare const Table: import("../..").WithBoxProps<{
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, {}, {}, {}, {
-        variant: TableVariant;
         data: TableData;
+        variant: TableVariant;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         mod: any;
@@ -339,8 +339,8 @@ export declare const Table: import("../..").WithBoxProps<{
 }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    variant: TableVariant;
     data: TableData;
+    variant: TableVariant;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     mod: any;

package/lib/components/Tabs/Tabs.d.ts

@@ -90,6 +90,8 @@ export declare const Tabs: {
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        loop: boolean;
+        orientation: "vertical" | "horizontal";
         radius: string | number;
         color: string;
         autoContrast: boolean;
@@ -102,8 +104,6 @@ export declare const Tabs: {
         mod: any;
         id: string;
         keepMounted: boolean;
-        orientation: "horizontal" | "vertical";
-        loop: boolean;
         vars: Function | Record<string, any>;
         unstyled: boolean;
         placement: "left" | "right";
@@ -206,6 +206,8 @@ export declare const Tabs: {
     }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, {}, {}, {}, {
+        loop: boolean;
+        orientation: "vertical" | "horizontal";
         radius: string | number;
         color: string;
         autoContrast: boolean;
@@ -218,8 +220,6 @@ export declare const Tabs: {
         mod: any;
         id: string;
         keepMounted: boolean;
-        orientation: "horizontal" | "vertical";
-        loop: boolean;
         vars: Function | Record<string, any>;
         unstyled: boolean;
         placement: "left" | "right";
@@ -319,6 +319,8 @@ export declare const Tabs: {
 }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    loop: boolean;
+    orientation: "vertical" | "horizontal";
     radius: string | number;
     color: string;
     autoContrast: boolean;
@@ -331,8 +333,6 @@ export declare const Tabs: {
     mod: any;
     id: string;
     keepMounted: boolean;
-    orientation: "horizontal" | "vertical";
-    loop: boolean;
     vars: Function | Record<string, any>;
     unstyled: boolean;
     placement: "left" | "right";
@@ -349,11 +349,11 @@ export declare const Tabs: {
             required: true;
         };
         rightSection: {
-            type: PropType<any>;
+            type: PropType<import("../..").MantineNode>;
             default: undefined;
         };
         leftSection: {
-            type: PropType<any>;
+            type: PropType<import("../..").MantineNode>;
             default: undefined;
         };
         color: {
@@ -400,11 +400,11 @@ export declare const Tabs: {
             required: true;
         };
         rightSection: {
-            type: PropType<any>;
+            type: PropType<import("../..").MantineNode>;
             default: undefined;
         };
         leftSection: {
-            type: PropType<any>;
+            type: PropType<import("../..").MantineNode>;
             default: undefined;
         };
         color: {
@@ -444,18 +444,18 @@ export declare const Tabs: {
             default: undefined;
         };
     }>> & Readonly<{}>, {
+        onKeydown: (event: KeyboardEvent) => void;
         color: string;
         onClick: (event: MouseEvent) => void;
-        onKeydown: (event: KeyboardEvent) => void;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         disabled: boolean;
         mod: any;
         onKeyDown: (event: KeyboardEvent) => void;
-        leftSection: any;
-        rightSection: any;
+        leftSection: import("../..").MantineNode;
+        rightSection: import("../..").MantineNode;
         tabIndex: number;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    }, import("vue").SlotsType<import("./TabsTab/TabsTab").TabsTabSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     Panel: import("../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         value: {
             type: StringConstructor;

package/lib/components/Tabs/TabsTab/TabsTab.d.ts

@@ -1,16 +1,20 @@
-import { type PropType } from 'vue';
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type MantineNode, type SectionSlots } from '../../../core';
 export type TabsTabStylesNames = 'tab' | 'tabSection' | 'tabLabel';
+export interface TabsTabSlots extends SectionSlots {
+    default?: () => VNodeChild;
+}
 export declare const TabsTab: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {
         type: StringConstructor;
         required: true;
     };
     rightSection: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     leftSection: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     color: {
@@ -57,11 +61,11 @@ export declare const TabsTab: import("vue").DefineComponent<import("vue").Extrac
         required: true;
     };
     rightSection: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     leftSection: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     color: {
@@ -101,15 +105,15 @@ export declare const TabsTab: import("vue").DefineComponent<import("vue").Extrac
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    onKeydown: (event: KeyboardEvent) => void;
     color: string;
     onClick: (event: MouseEvent) => void;
-    onKeydown: (event: KeyboardEvent) => void;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     disabled: boolean;
     mod: any;
     onKeyDown: (event: KeyboardEvent) => void;
-    leftSection: any;
-    rightSection: any;
+    leftSection: MantineNode;
+    rightSection: MantineNode;
     tabIndex: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, SlotsType<TabsTabSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/components/TagsInput/TagsInput.d.ts

@@ -1,5 +1,17 @@
-import { type PropType } from 'vue';
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
 import { type ComboboxData } from '../Combobox';
+export interface TagsInputSlots {
+    label?: () => VNodeChild;
+    description?: () => VNodeChild;
+    error?: () => VNodeChild;
+    leftSection?: () => VNodeChild;
+    rightSection?: () => VNodeChild;
+    renderOption?: (input: {
+        option: any;
+        checked?: boolean;
+    }) => VNodeChild;
+    nothingFound?: () => VNodeChild;
+}
 export interface TagsInputProps {
     modelValue?: string[];
     value?: string[];
@@ -166,10 +178,10 @@ export declare const TagsInput: import("vue").DefineComponent<import("vue").Extr
     dropdownOpened: boolean;
     defaultDropdownOpened: boolean;
     selectFirstOptionOnDropdownOpen: boolean;
-    openOnFocus: boolean;
     hiddenInputValuesDivider: string;
+    openOnFocus: boolean;
     maxTags: number;
     allowDuplicates: boolean;
     splitChars: string[];
     acceptValueOnBlur: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, SlotsType<TagsInputSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/components/Text/Text.d.ts

@@ -136,6 +136,7 @@ export declare const Text: import("../..").WithBoxProps<import("vue").DefineComp
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    span: boolean;
     variant: TextVariant;
     gradient: {
         from: string;
@@ -144,7 +145,6 @@ export declare const Text: import("../..").WithBoxProps<import("vue").DefineComp
     };
     inherit: boolean;
     textWrap: "wrap" | "nowrap" | "balance" | "pretty" | "stable";
-    span: boolean;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     mod: any;

package/lib/components/Textarea/Textarea.d.ts

@@ -60,7 +60,7 @@ export declare const Textarea: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    resize: "none" | "both" | "horizontal" | "vertical";
+    resize: "vertical" | "horizontal" | "none" | "both";
     __staticSelector: string;
     autosize: boolean;
     bottomSection: any;

package/lib/components/Timeline/Timeline.d.ts

@@ -244,11 +244,11 @@ export declare const Timeline: import("../..").WithBoxProps<{
             default: undefined;
         };
         title: {
-            type: PropType<any>;
+            type: PropType<import("../..").MantineNode>;
             default: undefined;
         };
         bullet: {
-            type: PropType<any>;
+            type: PropType<import("../..").MantineNode>;
             default: undefined;
         };
         radius: {
@@ -307,11 +307,11 @@ export declare const Timeline: import("../..").WithBoxProps<{
             default: undefined;
         };
         title: {
-            type: PropType<any>;
+            type: PropType<import("../..").MantineNode>;
             default: undefined;
         };
         bullet: {
-            type: PropType<any>;
+            type: PropType<import("../..").MantineNode>;
             default: undefined;
         };
         radius: {
@@ -347,10 +347,10 @@ export declare const Timeline: import("../..").WithBoxProps<{
             default: undefined;
         };
     }>> & Readonly<{}>, {
+        style: any;
+        title: import("../..").MantineNode;
         radius: string | number;
         color: string;
-        style: any;
-        title: any;
         classNames: Function | Record<string, any>;
         styles: Function | Record<string, any>;
         active: boolean;
@@ -360,7 +360,7 @@ export declare const Timeline: import("../..").WithBoxProps<{
         __lineActive: boolean;
         __align: "left" | "right";
         lineActive: boolean;
-        bullet: any;
+        bullet: import("../..").MantineNode;
         lineVariant: "dashed" | "dotted" | "solid";
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+    }, import("vue").SlotsType<import("./TimelineItem/TimelineItem").TimelineItemSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
 }>;

package/lib/components/Timeline/TimelineItem/TimelineItem.d.ts

@@ -1,5 +1,11 @@
-import { type PropType } from 'vue';
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type MantineNode } from '../../../core';
 export type TimelineItemStylesNames = 'itemBody' | 'itemContent' | 'itemBullet' | 'item' | 'itemTitle';
+export interface TimelineItemSlots {
+    default?: () => VNodeChild;
+    title?: () => VNodeChild;
+    bullet?: () => VNodeChild;
+}
 export declare const TimelineItem: import("../../..").WithBoxProps<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     __active: {
         type: BooleanConstructor;
@@ -22,11 +28,11 @@ export declare const TimelineItem: import("../../..").WithBoxProps<import("vue")
         default: undefined;
     };
     title: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     bullet: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     radius: {
@@ -85,11 +91,11 @@ export declare const TimelineItem: import("../../..").WithBoxProps<import("vue")
         default: undefined;
     };
     title: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     bullet: {
-        type: PropType<any>;
+        type: PropType<MantineNode>;
         default: undefined;
     };
     radius: {
@@ -125,10 +131,10 @@ export declare const TimelineItem: import("../../..").WithBoxProps<import("vue")
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    style: any;
+    title: MantineNode;
     radius: string | number;
     color: string;
-    style: any;
-    title: any;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     active: boolean;
@@ -138,6 +144,6 @@ export declare const TimelineItem: import("../../..").WithBoxProps<import("vue")
     __lineActive: boolean;
     __align: "left" | "right";
     lineActive: boolean;
-    bullet: any;
+    bullet: MantineNode;
     lineVariant: "dashed" | "dotted" | "solid";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+}, SlotsType<TimelineItemSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;

package/lib/components/TreeSelect/TreeSelect.d.ts

@@ -1,4 +1,4 @@
-import { type PropType, type VNodeChild } from 'vue';
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
 import type { TreeNodeData } from '../Tree';
 export type TreeSelectMode = 'single' | 'multiple' | 'checkbox';
 export type TreeSelectValue<Mode extends TreeSelectMode> = Mode extends 'single' ? string | null : string[];
@@ -144,6 +144,15 @@ export declare const TreeSelectOption: import("vue").DefineComponent<import("vue
     isLastChild: boolean;
     lineGuides: boolean[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export interface TreeSelectSlots {
+    label?: () => VNodeChild;
+    description?: () => VNodeChild;
+    error?: () => VNodeChild;
+    leftSection?: () => VNodeChild;
+    rightSection?: () => VNodeChild;
+    renderNode?: (payload: TreeSelectRenderNodePayload) => VNodeChild;
+    nothingFound?: () => VNodeChild;
+}
 export declare const TreeSelect: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {
         type: PropType<TreeNodeData[]>;
@@ -338,15 +347,15 @@ export declare const TreeSelect: import("vue").DefineComponent<import("vue").Ext
     modelValue: any;
     maxDropdownHeight: string | number;
     nothingFoundMessage: any;
-    searchable: boolean;
-    allowDeselect: boolean;
     dropdownOpened: boolean;
     defaultDropdownOpened: boolean;
+    searchable: boolean;
+    allowDeselect: boolean;
+    hiddenInputValuesDivider: string;
     openOnFocus: boolean;
     maxValues: number;
     clearSearchOnChange: boolean;
-    hiddenInputValuesDivider: string;
     checkedStrategy: CheckedStrategy;
     defaultExpandAll: boolean;
     maxDisplayedValuesContent: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, SlotsType<TreeSelectSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/components/index.d.ts

@@ -101,7 +101,11 @@ export * from './Popover';
 export * from './Tooltip';
 export * from './HoverCard';
 export * from './Menu';
+export * from './Menubar';
 export * from './Combobox';
+export * from './ComboboxPopover';
+export * from './DataList';
+export * from './EmptyState';
 export * from './Select';
 export * from './Autocomplete';
 export * from './MultiSelect';

package/lib/core/Box/Box.d.ts

@@ -78,7 +78,7 @@ export declare const Box: import("vue").DefineComponent<import("vue").ExtractPro
     /** Opacity */
     opacity: PropType<import("./style-props").StyleProp<import("csstype").Property.Opacity | undefined>>;
     /** FontFamily */
-    ff: PropType<import("./style-props").StyleProp<(string & {}) | "headings" | "text" | "monospace" | "mono" | "heading"> | undefined>;
+    ff: PropType<import("./style-props").StyleProp<"text" | (string & {}) | "headings" | "monospace" | "mono" | "heading"> | undefined>;
     /** FontSize, theme key: theme.fontSizes */
     fz: PropType<import("./style-props").StyleProp<string | number> | undefined>;
     /** FontWeight */
@@ -201,7 +201,7 @@ export declare const Box: import("vue").DefineComponent<import("vue").ExtractPro
     /** Opacity */
     opacity: PropType<import("./style-props").StyleProp<import("csstype").Property.Opacity | undefined>>;
     /** FontFamily */
-    ff: PropType<import("./style-props").StyleProp<(string & {}) | "headings" | "text" | "monospace" | "mono" | "heading"> | undefined>;
+    ff: PropType<import("./style-props").StyleProp<"text" | (string & {}) | "headings" | "monospace" | "mono" | "heading"> | undefined>;
     /** FontSize, theme key: theme.fontSizes */
     fz: PropType<import("./style-props").StyleProp<string | number> | undefined>;
     /** FontWeight */

package/lib/core/index.d.ts

@@ -6,3 +6,4 @@ export * from './Box';
 export * from './factory';
 export * from './DirectionProvider';
 export * from './types';
+export * from './renderable-node';

package/lib/core/renderable-node.d.ts

@@ -0,0 +1,10 @@
+import type { VNodeChild } from 'vue';
+/** Content accepted by Mantine Vue props that correspond to React.ReactNode props. */
+export type MantineNode = VNodeChild | (() => VNodeChild);
+export interface SectionSlots {
+    leftSection?: () => VNodeChild;
+    rightSection?: () => VNodeChild;
+}
+/** Prop content takes precedence over slot content. Explicit null is preserved. */
+export declare function resolveNode(prop: MantineNode | undefined, slot?: () => VNodeChild): VNodeChild;
+export declare function hasNode(node: VNodeChild): boolean;

package/lib/core/utils/create-scoped-keydown-handler.d.ts

@@ -0,0 +1,10 @@
+export interface CreateScopedKeydownHandlerInput {
+    parentSelector: string;
+    siblingSelector: string;
+    loop?: boolean;
+    orientation: 'vertical' | 'horizontal';
+    dir?: 'rtl' | 'ltr';
+    activateOnFocus?: boolean;
+    onKeydown?: (event: KeyboardEvent) => void;
+}
+export declare function createScopedKeydownHandler({ parentSelector, siblingSelector, onKeydown, loop, activateOnFocus, dir, orientation, }: CreateScopedKeydownHandlerInput): (event: KeyboardEvent) => void;

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

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

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

@@ -135,9 +135,9 @@ export declare const InlineInput: import("vue").DefineComponent<import("vue").Ex
     };
 }>> & Readonly<{}>, {
     size: string | number;
+    label: any;
     variant: string;
     error: any;
-    label: any;
     classNames: Function | Record<string, any>;
     styles: Function | Record<string, any>;
     description: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/core",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Vue component foundation architecturally equivalent to @mantine/core",
   "license": "MIT",
   "files": [
@@ -44,8 +44,8 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/hooks": "2.0.0",
-    "@mantine-vue/utils": "2.0.0",
+    "@mantine-vue/hooks": "2.1.0",
+    "@mantine-vue/utils": "2.1.0",
     "vue": "^3.5.0"
   }
 }