@mantine-vue/core 3.3.0 → 3.5.0

package/lib/components/Drawer/Drawer.context.d.ts

@@ -21,6 +21,8 @@ export interface DrawerStackContextValue {
     currentId: string;
     /** Highest `z-index` any drawer of the stack has asked for. */
     maxZIndex: string | number;
+    /** Escape events already handled by the top drawer in this stack. */
+    handledEscapeEvents: WeakSet<KeyboardEvent>;
 }
 export declare const DrawerStackContextKey: InjectionKey<DrawerStackContextValue>;
 /** Returns `null` outside a `Drawer.Stack`, which is the normal case for a lone drawer. */

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

@@ -250,6 +250,10 @@ export interface MenuContextMenuProps {
 }
 /** Props of `Menu.Sub`, a nested menu opened from a `Menu.Sub.Target`. */
 export interface MenuSubProps {
+    /** `Menu.Sub` is always rendered inside its parent dropdown. */
+    withinPortal?: never;
+    /** `Menu.Sub` does not support portal props because it is always rendered inline. */
+    portalProps?: never;
     /** Open state. Controlled when set, bound with `v-model:opened`. */
     opened?: boolean;
     /** Uncontrolled initial open state. */

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

@@ -7,6 +7,8 @@ export interface ModalBaseSlots {
 }
 /** Props declared by `ModalBase` itself. See `ModalBaseProps` for the full public type. */
 export interface ModalBaseOwnProps {
+    /** Internal set used by modal and drawer stacks to handle each Escape event once. */
+    __handledEscapeEvents?: WeakSet<KeyboardEvent>;
     /** Receives the root DOM node. */
     rootRef?: VueRefTarget<Element>;
     /** Open state of the modal. */

package/lib/components/ModalBase/use-modal.d.ts

@@ -5,6 +5,7 @@ export declare function useModal(input: {
     trapFocus: () => boolean;
     closeOnEscape: () => boolean;
     returnFocus: () => boolean;
+    handledEscapeEvents?: WeakSet<KeyboardEvent>;
 }): {
     id: import("vue").ComputedRef<string>;
     titleMounted: import("vue").Ref<boolean, boolean>;

package/lib/components/NumberInput/number-input-utils.d.ts

@@ -2,10 +2,25 @@ import type { NumberFormatterOptions } from '../NumberFormatter';
 import type { NumberInputValue } from './NumberInput.types';
 export declare function clamp(value: number, min?: number, max?: number): number;
 export declare function clampBigInt(value: bigint, min?: bigint, max?: bigint): bigint;
+export declare function canStep(value: number | string): boolean;
+export declare function canStepBigInt(value: bigint | string, allowNegative: boolean): boolean;
 export declare function stripFormatting(value: string, options: NumberFormatterOptions): string;
 export declare function parseNumberInputValue(rawValue: string, allowDecimal: boolean, allowNegative: boolean, allowLeadingZeros: boolean, decimalScale?: number, fixedDecimalScale?: boolean): NumberInputValue;
 export declare function sanitizeNumberInputString(rawValue: string, allowDecimal: boolean, allowNegative: boolean, decimalScale?: number): string;
-export declare function clampAndSanitizeInput(sanitizedValue: string | number, max?: number, min?: number): string | number;
+export declare function sanitizeInputOnBlur(value: string, options: {
+    min?: number;
+    max?: number;
+    trim: boolean;
+    clamp: boolean;
+}): string | number;
+export interface NormalizePastedValueOptions {
+    decimalSeparator: string;
+    thousandSeparator?: string;
+    allowedDecimalSeparators: string[];
+    thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan' | 'none';
+}
+export declare function normalizePastedValue(value: string, options: NormalizePastedValueOptions): string;
+export declare function getCaretPositionAfterPaste(rawValue: string, rawCaret: number, formattedValue: string, decimalSeparator: string): number;
 export declare function isInRange(value: number | undefined, min: number | undefined, max: number | undefined): boolean;
 export declare function isStrictAllowed(value: NumberInputValue, min?: number, max?: number): boolean;
 export declare function restoreInputValue(input: HTMLInputElement, value: string): void;

package/package.json

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

package/styles.css

@@ -2791,26 +2791,26 @@ fieldset:disabled .mantine-active:active {
 ._content_1sy9q_7 {
   min-width: 100%;
 }
-._root_ltqd9_1 {
+._root_1ysxv_1 {
   --accordion-radius: var(--mantine-radius-default);
 }
 
-._panel_ltqd9_5 {
+._panel_1ysxv_5 {
   overflow-wrap: break-word;
 }
 
-._content_ltqd9_9 {
+._content_1ysxv_9 {
   padding: var(--mantine-spacing-md);
   padding-top: calc(var(--mantine-spacing-xs) / 2);
 }
 
-._itemTitle_ltqd9_14 {
+._itemTitle_1ysxv_14 {
   margin: 0;
   padding: 0;
   width: 100%;
 }
 
-._control_ltqd9_20 {
+._control_1ysxv_20 {
   width: 100%;
   display: flex;
   align-items: center;
@@ -2822,37 +2822,37 @@ fieldset:disabled .mantine-active:active {
   color: var(--mantine-color-bright);
 }
 
-._control_ltqd9_20:where([data-chevron-position='left']) {
+._control_1ysxv_20:where([data-chevron-position='left']) {
     flex-direction: row;
     padding-inline-start: 0;
   }
 
-._control_ltqd9_20:where(:disabled, [data-disabled]) {
+._control_1ysxv_20:where(:disabled, [data-disabled]) {
     opacity: 0.4;
     cursor: not-allowed;
   }
 
 @media (hover: hover) {
-      :where([data-mantine-color-scheme='light']) ._control--default_ltqd9_42:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='light']) ._control--contained_ltqd9_43:where(:not(:disabled, [data-disabled])):hover {
+      :where([data-mantine-color-scheme='light']) ._control--default_1ysxv_42:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='light']) ._control--contained_1ysxv_43:where(:not(:disabled, [data-disabled])):hover {
         background-color: var(--mantine-color-gray-0);
   }
 
-      :where([data-mantine-color-scheme='dark']) ._control--default_ltqd9_42:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='dark']) ._control--contained_ltqd9_43:where(:not(:disabled, [data-disabled])):hover {
+      :where([data-mantine-color-scheme='dark']) ._control--default_1ysxv_42:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='dark']) ._control--contained_1ysxv_43:where(:not(:disabled, [data-disabled])):hover {
         background-color: var(--mantine-color-dark-6);
   }
 }
 
 @media (hover: none) {
-      :where([data-mantine-color-scheme='light']) ._control--default_ltqd9_42:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='light']) ._control--contained_ltqd9_43:where(:not(:disabled, [data-disabled])):active {
+      :where([data-mantine-color-scheme='light']) ._control--default_1ysxv_42:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='light']) ._control--contained_1ysxv_43:where(:not(:disabled, [data-disabled])):active {
         background-color: var(--mantine-color-gray-0);
   }
 
-      :where([data-mantine-color-scheme='dark']) ._control--default_ltqd9_42:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='dark']) ._control--contained_ltqd9_43:where(:not(:disabled, [data-disabled])):active {
+      :where([data-mantine-color-scheme='dark']) ._control--default_1ysxv_42:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='dark']) ._control--contained_1ysxv_43:where(:not(:disabled, [data-disabled])):active {
         background-color: var(--mantine-color-dark-6);
   }
 }
 
-._label_ltqd9_57 {
+._label_1ysxv_57 {
   color: inherit;
   font-weight: var(--mantine-font-weight-regular);
   flex: 1;
@@ -2862,7 +2862,7 @@ fieldset:disabled .mantine-active:active {
   padding-bottom: var(--mantine-spacing-sm);
 }
 
-._chevron_ltqd9_67 {
+._chevron_1ysxv_67 {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -2872,102 +2872,104 @@ fieldset:disabled .mantine-active:active {
   transform: rotate(0deg);
 }
 
-._chevron_ltqd9_67:where([data-rotate]) {
+._chevron_1ysxv_67:where([data-rotate]) {
     transform: rotate(180deg);
   }
 
-._chevron_ltqd9_67:where([data-position='left']) {
+._chevron_1ysxv_67:where([data-position='left']) {
     margin-inline-end: var(--mantine-spacing-md);
     margin-inline-start: var(--mantine-spacing-md);
   }
 
-._icon_ltqd9_86 {
+._icon_1ysxv_86 {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-inline-end: var(--mantine-spacing-sm);
 }
 
-._icon_ltqd9_86:where([data-chevron-position='left']) {
+._icon_1ysxv_86:where([data-chevron-position='left']) {
     margin-inline-end: 0;
     margin-inline-start: var(--mantine-spacing-lg);
   }
 
-:where([data-mantine-color-scheme='light']) ._item_ltqd9_14 {
+:where([data-mantine-color-scheme='light']) ._item_1ysxv_14 {
     --item-border-color: var(--mantine-color-gray-3);
     --item-filled-color: var(--mantine-color-gray-0);
 }
 
-:where([data-mantine-color-scheme='dark']) ._item_ltqd9_14 {
+:where([data-mantine-color-scheme='dark']) ._item_1ysxv_14 {
     --item-border-color: var(--mantine-color-dark-4);
     --item-filled-color: var(--mantine-color-dark-6);
 }
 
-._item--default_ltqd9_110 {
+._item--default_1ysxv_110 {
   border-bottom: 1px solid var(--item-border-color);
 }
 
-._item--contained_ltqd9_114 {
+._item--contained_1ysxv_114 {
   border: 1px solid var(--item-border-color);
   transition: background-color 150ms ease;
 }
 
-._item--contained_ltqd9_114:where([data-active]) {
+._item--contained_1ysxv_114:where([data-active]) {
     background-color: var(--item-filled-color);
   }
 
-._item--contained_ltqd9_114:first-of-type {
+._item--contained_1ysxv_114:first-of-type {
     border-start-start-radius: var(--accordion-radius);
     border-start-end-radius: var(--accordion-radius);
   }
 
-._item--contained_ltqd9_114:first-of-type > [data-accordion-control] {
+._item--contained_1ysxv_114:first-of-type > [data-accordion-control],
+    ._item--contained_1ysxv_114:first-of-type > ._itemTitle_1ysxv_14 > [data-accordion-control] {
       border-start-start-radius: var(--accordion-radius);
       border-start-end-radius: var(--accordion-radius);
     }
 
-._item--contained_ltqd9_114:last-of-type {
+._item--contained_1ysxv_114:last-of-type {
     border-end-start-radius: var(--accordion-radius);
     border-end-end-radius: var(--accordion-radius);
   }
 
-._item--contained_ltqd9_114:last-of-type > [data-accordion-control] {
+._item--contained_1ysxv_114:last-of-type > [data-accordion-control],
+    ._item--contained_1ysxv_114:last-of-type > ._itemTitle_1ysxv_14 > [data-accordion-control] {
       border-end-start-radius: var(--accordion-radius);
       border-end-end-radius: var(--accordion-radius);
     }
 
-._item--contained_ltqd9_114 + ._item--contained_ltqd9_114 {
+._item--contained_1ysxv_114 + ._item--contained_1ysxv_114 {
     border-top: 0;
   }
 
-._item--filled_ltqd9_147 {
+._item--filled_1ysxv_149 {
   border-radius: var(--accordion-radius);
 }
 
-._item--filled_ltqd9_147:where([data-active]) {
+._item--filled_1ysxv_149:where([data-active]) {
     background-color: var(--item-filled-color);
   }
 
-._item--separated_ltqd9_155 {
+._item--separated_1ysxv_157 {
   background-color: var(--item-filled-color);
   border-radius: var(--accordion-radius);
   border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
   transition: background-color 150ms ease;
 }
 
-._item--separated_ltqd9_155[data-active] {
+._item--separated_1ysxv_157[data-active] {
     border-color: var(--item-border-color);
   }
 
-:where([data-mantine-color-scheme='light']) ._item--separated_ltqd9_155[data-active] {
+:where([data-mantine-color-scheme='light']) ._item--separated_1ysxv_157[data-active] {
       background-color: var(--mantine-color-white);
 }
 
-:where([data-mantine-color-scheme='dark']) ._item--separated_ltqd9_155[data-active] {
+:where([data-mantine-color-scheme='dark']) ._item--separated_1ysxv_157[data-active] {
       background-color: var(--mantine-color-dark-7);
 }
 
-._item--separated_ltqd9_155 + ._item--separated_ltqd9_155 {
+._item--separated_1ysxv_157 + ._item--separated_1ysxv_157 {
     margin-top: var(--mantine-spacing-md);
   }
 ._root_xvb0q_1 {

package/styles.layer.css

@@ -2792,26 +2792,26 @@ fieldset:disabled .mantine-active:active {
 ._content_1sy9q_7 {
   min-width: 100%;
 }
-._root_ltqd9_1 {
+._root_1ysxv_1 {
   --accordion-radius: var(--mantine-radius-default);
 }
 
-._panel_ltqd9_5 {
+._panel_1ysxv_5 {
   overflow-wrap: break-word;
 }
 
-._content_ltqd9_9 {
+._content_1ysxv_9 {
   padding: var(--mantine-spacing-md);
   padding-top: calc(var(--mantine-spacing-xs) / 2);
 }
 
-._itemTitle_ltqd9_14 {
+._itemTitle_1ysxv_14 {
   margin: 0;
   padding: 0;
   width: 100%;
 }
 
-._control_ltqd9_20 {
+._control_1ysxv_20 {
   width: 100%;
   display: flex;
   align-items: center;
@@ -2823,37 +2823,37 @@ fieldset:disabled .mantine-active:active {
   color: var(--mantine-color-bright);
 }
 
-._control_ltqd9_20:where([data-chevron-position='left']) {
+._control_1ysxv_20:where([data-chevron-position='left']) {
     flex-direction: row;
     padding-inline-start: 0;
   }
 
-._control_ltqd9_20:where(:disabled, [data-disabled]) {
+._control_1ysxv_20:where(:disabled, [data-disabled]) {
     opacity: 0.4;
     cursor: not-allowed;
   }
 
 @media (hover: hover) {
-      :where([data-mantine-color-scheme='light']) ._control--default_ltqd9_42:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='light']) ._control--contained_ltqd9_43:where(:not(:disabled, [data-disabled])):hover {
+      :where([data-mantine-color-scheme='light']) ._control--default_1ysxv_42:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='light']) ._control--contained_1ysxv_43:where(:not(:disabled, [data-disabled])):hover {
         background-color: var(--mantine-color-gray-0);
   }
 
-      :where([data-mantine-color-scheme='dark']) ._control--default_ltqd9_42:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='dark']) ._control--contained_ltqd9_43:where(:not(:disabled, [data-disabled])):hover {
+      :where([data-mantine-color-scheme='dark']) ._control--default_1ysxv_42:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='dark']) ._control--contained_1ysxv_43:where(:not(:disabled, [data-disabled])):hover {
         background-color: var(--mantine-color-dark-6);
   }
 }
 
 @media (hover: none) {
-      :where([data-mantine-color-scheme='light']) ._control--default_ltqd9_42:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='light']) ._control--contained_ltqd9_43:where(:not(:disabled, [data-disabled])):active {
+      :where([data-mantine-color-scheme='light']) ._control--default_1ysxv_42:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='light']) ._control--contained_1ysxv_43:where(:not(:disabled, [data-disabled])):active {
         background-color: var(--mantine-color-gray-0);
   }
 
-      :where([data-mantine-color-scheme='dark']) ._control--default_ltqd9_42:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='dark']) ._control--contained_ltqd9_43:where(:not(:disabled, [data-disabled])):active {
+      :where([data-mantine-color-scheme='dark']) ._control--default_1ysxv_42:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='dark']) ._control--contained_1ysxv_43:where(:not(:disabled, [data-disabled])):active {
         background-color: var(--mantine-color-dark-6);
   }
 }
 
-._label_ltqd9_57 {
+._label_1ysxv_57 {
   color: inherit;
   font-weight: var(--mantine-font-weight-regular);
   flex: 1;
@@ -2863,7 +2863,7 @@ fieldset:disabled .mantine-active:active {
   padding-bottom: var(--mantine-spacing-sm);
 }
 
-._chevron_ltqd9_67 {
+._chevron_1ysxv_67 {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -2873,102 +2873,104 @@ fieldset:disabled .mantine-active:active {
   transform: rotate(0deg);
 }
 
-._chevron_ltqd9_67:where([data-rotate]) {
+._chevron_1ysxv_67:where([data-rotate]) {
     transform: rotate(180deg);
   }
 
-._chevron_ltqd9_67:where([data-position='left']) {
+._chevron_1ysxv_67:where([data-position='left']) {
     margin-inline-end: var(--mantine-spacing-md);
     margin-inline-start: var(--mantine-spacing-md);
   }
 
-._icon_ltqd9_86 {
+._icon_1ysxv_86 {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-inline-end: var(--mantine-spacing-sm);
 }
 
-._icon_ltqd9_86:where([data-chevron-position='left']) {
+._icon_1ysxv_86:where([data-chevron-position='left']) {
     margin-inline-end: 0;
     margin-inline-start: var(--mantine-spacing-lg);
   }
 
-:where([data-mantine-color-scheme='light']) ._item_ltqd9_14 {
+:where([data-mantine-color-scheme='light']) ._item_1ysxv_14 {
     --item-border-color: var(--mantine-color-gray-3);
     --item-filled-color: var(--mantine-color-gray-0);
 }
 
-:where([data-mantine-color-scheme='dark']) ._item_ltqd9_14 {
+:where([data-mantine-color-scheme='dark']) ._item_1ysxv_14 {
     --item-border-color: var(--mantine-color-dark-4);
     --item-filled-color: var(--mantine-color-dark-6);
 }
 
-._item--default_ltqd9_110 {
+._item--default_1ysxv_110 {
   border-bottom: 1px solid var(--item-border-color);
 }
 
-._item--contained_ltqd9_114 {
+._item--contained_1ysxv_114 {
   border: 1px solid var(--item-border-color);
   transition: background-color 150ms ease;
 }
 
-._item--contained_ltqd9_114:where([data-active]) {
+._item--contained_1ysxv_114:where([data-active]) {
     background-color: var(--item-filled-color);
   }
 
-._item--contained_ltqd9_114:first-of-type {
+._item--contained_1ysxv_114:first-of-type {
     border-start-start-radius: var(--accordion-radius);
     border-start-end-radius: var(--accordion-radius);
   }
 
-._item--contained_ltqd9_114:first-of-type > [data-accordion-control] {
+._item--contained_1ysxv_114:first-of-type > [data-accordion-control],
+    ._item--contained_1ysxv_114:first-of-type > ._itemTitle_1ysxv_14 > [data-accordion-control] {
       border-start-start-radius: var(--accordion-radius);
       border-start-end-radius: var(--accordion-radius);
     }
 
-._item--contained_ltqd9_114:last-of-type {
+._item--contained_1ysxv_114:last-of-type {
     border-end-start-radius: var(--accordion-radius);
     border-end-end-radius: var(--accordion-radius);
   }
 
-._item--contained_ltqd9_114:last-of-type > [data-accordion-control] {
+._item--contained_1ysxv_114:last-of-type > [data-accordion-control],
+    ._item--contained_1ysxv_114:last-of-type > ._itemTitle_1ysxv_14 > [data-accordion-control] {
       border-end-start-radius: var(--accordion-radius);
       border-end-end-radius: var(--accordion-radius);
     }
 
-._item--contained_ltqd9_114 + ._item--contained_ltqd9_114 {
+._item--contained_1ysxv_114 + ._item--contained_1ysxv_114 {
     border-top: 0;
   }
 
-._item--filled_ltqd9_147 {
+._item--filled_1ysxv_149 {
   border-radius: var(--accordion-radius);
 }
 
-._item--filled_ltqd9_147:where([data-active]) {
+._item--filled_1ysxv_149:where([data-active]) {
     background-color: var(--item-filled-color);
   }
 
-._item--separated_ltqd9_155 {
+._item--separated_1ysxv_157 {
   background-color: var(--item-filled-color);
   border-radius: var(--accordion-radius);
   border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
   transition: background-color 150ms ease;
 }
 
-._item--separated_ltqd9_155[data-active] {
+._item--separated_1ysxv_157[data-active] {
     border-color: var(--item-border-color);
   }
 
-:where([data-mantine-color-scheme='light']) ._item--separated_ltqd9_155[data-active] {
+:where([data-mantine-color-scheme='light']) ._item--separated_1ysxv_157[data-active] {
       background-color: var(--mantine-color-white);
 }
 
-:where([data-mantine-color-scheme='dark']) ._item--separated_ltqd9_155[data-active] {
+:where([data-mantine-color-scheme='dark']) ._item--separated_1ysxv_157[data-active] {
       background-color: var(--mantine-color-dark-7);
 }
 
-._item--separated_ltqd9_155 + ._item--separated_ltqd9_155 {
+._item--separated_1ysxv_157 + ._item--separated_1ysxv_157 {
     margin-top: var(--mantine-spacing-md);
   }
 ._root_xvb0q_1 {