vuetify 3.7.15 → 3.7.17

package/dist/vuetify.esm.js

@@ -1,10 +1,10 @@
 /*!
-* Vuetify v3.7.15
+* Vuetify v3.7.17
 * Forged by John Leider
 * Released under the MIT License.
 */
 
-import { shallowRef, reactive, computed, watchEffect, toRefs, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onMounted, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, toDisplayString, vModelText, resolveComponent, render } from 'vue';
+import { shallowRef, reactive, computed, watchEffect, toRefs, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, createVNode, mergeProps, onBeforeUnmount, watch, readonly, onMounted, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, TransitionGroup, Transition, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
 
 const IN_BROWSER = typeof window !== 'undefined';
 const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
@@ -80,12 +80,14 @@ function convertToUnit(str) {
   let unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'px';
   if (str == null || str === '') {
     return undefined;
-  } else if (isNaN(+str)) {
+  }
+  const num = Number(str);
+  if (isNaN(num)) {
     return String(str);
-  } else if (!isFinite(+str)) {
+  } else if (!isFinite(num)) {
     return undefined;
   } else {
-    return `${Number(str)}${unit}`;
+    return `${num}${unit}`;
   }
 }
 function isObject(obj) {
@@ -613,16 +615,16 @@ function nullifyTransforms(el) {
     let ta, sx, sy, dx, dy;
     if (tx.startsWith('matrix3d(')) {
       ta = tx.slice(9, -1).split(/, /);
-      sx = +ta[0];
-      sy = +ta[5];
-      dx = +ta[12];
-      dy = +ta[13];
+      sx = Number(ta[0]);
+      sy = Number(ta[5]);
+      dx = Number(ta[12]);
+      dy = Number(ta[13]);
     } else if (tx.startsWith('matrix(')) {
       ta = tx.slice(7, -1).split(/, /);
-      sx = +ta[0];
-      sy = +ta[3];
-      dx = +ta[4];
-      dy = +ta[5];
+      sx = Number(ta[0]);
+      sy = Number(ta[3]);
+      dx = Number(ta[4]);
+      dy = Number(ta[5]);
     } else {
       return new Box(rect);
     }
@@ -2516,7 +2518,7 @@ var en = {
 const LANG_PREFIX = '$vuetify.';
 const replace = (str, params) => {
   return str.replace(/\{(\d+)\}/g, (match, index) => {
-    return String(params[+index]);
+    return String(params[Number(index)]);
   });
 };
 const createTranslateFunction = (current, fallback, messages) => {
@@ -2886,7 +2888,7 @@ function createTheme(options) {
   function getHead() {
     return {
       style: [{
-        children: styles.value,
+        textContent: styles.value,
         id: 'vuetify-theme-stylesheet',
         nonce: parsedOptions.cspNonce || false
       }]
@@ -5805,7 +5807,10 @@ const makeVBtnProps = propsFactory({
     type: [Boolean, Object],
     default: true
   },
-  text: String,
+  text: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -5961,7 +5966,7 @@ const VBtn = genericComponent()({
             }
           }
         }, {
-          default: () => [slots.default?.() ?? props.text]
+          default: () => [slots.default?.() ?? toDisplayString(props.text)]
         })]), !props.icon && hasAppend && createVNode("span", {
           "key": "append",
           "class": "v-btn__append"
@@ -6969,7 +6974,7 @@ function useValidation(props) {
   const isPristine = shallowRef(true);
   const isDirty = computed(() => !!(wrapInArray(model.value === '' ? null : model.value).length || wrapInArray(validationModel.value === '' ? null : validationModel.value).length));
   const errorMessages = computed(() => {
-    return props.errorMessages?.length ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, +props.maxErrors)) : internalErrorMessages.value;
+    return props.errorMessages?.length ? wrapInArray(props.errorMessages).concat(internalErrorMessages.value).slice(0, Math.max(0, Number(props.maxErrors))) : internalErrorMessages.value;
   });
   const validateOn = computed(() => {
     let value = (props.validateOn ?? form.validateOn?.value) || 'input';
@@ -7060,7 +7065,7 @@ function useValidation(props) {
     const results = [];
     isValidating.value = true;
     for (const rule of props.rules) {
-      if (results.length >= +(props.maxErrors ?? 1)) {
+      if (results.length >= Number(props.maxErrors ?? 1)) {
         break;
       }
       const handler = typeof rule === 'function' ? rule : () => rule;
@@ -8121,7 +8126,10 @@ const makeVChipProps = propsFactory({
     type: [Boolean, Object],
     default: true
   },
-  text: String,
+  text: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   modelValue: {
     type: Boolean,
     default: true
@@ -8290,7 +8298,7 @@ const VChip = genericComponent()({
           toggle: group?.toggle,
           value: group?.value.value,
           disabled: props.disabled
-        }) ?? props.text]), hasAppend && createVNode("div", {
+        }) ?? toDisplayString(props.text)]), hasAppend && createVNode("div", {
           "key": "append",
           "class": "v-chip__append"
         }, [!slots.append ? createVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
@@ -9169,8 +9177,14 @@ const makeVListItemProps = propsFactory({
     default: true
   },
   slim: Boolean,
-  subtitle: [String, Number],
-  title: [String, Number],
+  subtitle: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  title: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   value: null,
   onClick: EventProp(),
   onClickOnce: EventProp(),
@@ -9363,13 +9377,13 @@ const VListItem = genericComponent()({
         }, {
           default: () => [slots.title?.({
             title: props.title
-          }) ?? props.title]
+          }) ?? toDisplayString(props.title)]
         }), hasSubtitle && createVNode(VListItemSubtitle, {
           "key": "subtitle"
         }, {
           default: () => [slots.subtitle?.({
             subtitle: props.subtitle
-          }) ?? props.subtitle]
+          }) ?? toDisplayString(props.subtitle)]
         }), slots.default?.(slotProps.value)]), hasAppend && createVNode("div", {
           "key": "append",
           "class": "v-list-item__append"
@@ -10970,10 +10984,10 @@ function useStack(isActive, zIndex, disableGlobalStack) {
     activeChildren: new Set()
   });
   provide(StackSymbol, stack);
-  const _zIndex = shallowRef(+zIndex.value);
+  const _zIndex = shallowRef(Number(zIndex.value));
   useToggleScope(isActive, () => {
     const lastZIndex = globalStack.at(-1)?.[1];
-    _zIndex.value = lastZIndex ? lastZIndex + 10 : +zIndex.value;
+    _zIndex.value = lastZIndex ? lastZIndex + 10 : Number(zIndex.value);
     if (createStackEntry) {
       globalStack.push([vm.uid, _zIndex.value]);
     }
@@ -11182,6 +11196,7 @@ const VOverlay = genericComponent()({
   emits: {
     'click:outside': e => true,
     'update:modelValue': value => true,
+    keydown: e => true,
     afterEnter: () => true,
     afterLeave: () => true
   },
@@ -11294,6 +11309,9 @@ const VOverlay = genericComponent()({
     });
     function onKeydown(e) {
       if (e.key === 'Escape' && globalTop.value) {
+        if (!contentEl.value?.contains(document.activeElement)) {
+          emit('keydown', e);
+        }
         if (!props.persistent) {
           isActive.value = false;
           if (contentEl.value?.contains(document.activeElement)) {
@@ -11302,6 +11320,10 @@ const VOverlay = genericComponent()({
         } else animateClick();
       }
     }
+    function onKeydownSelf(e) {
+      if (e.key === 'Escape' && !globalTop.value) return;
+      emit('keydown', e);
+    }
     const router = useRouter();
     useToggleScope(() => props.closeOnBack, () => {
       useBackButton(router, next => {
@@ -11364,7 +11386,8 @@ const VOverlay = genericComponent()({
           '--v-overlay-opacity': props.opacity,
           top: convertToUnit(top.value)
         }, props.style],
-        "ref": root
+        "ref": root,
+        "onKeydown": onKeydownSelf
       }, scopeId, attrs), [createVNode(Scrim, mergeProps({
         "color": scrimColor,
         "modelValue": isActive.value && !!props.scrim,
@@ -12035,11 +12058,6 @@ const VField = genericComponent()({
     };
   }
 });
-// TODO: this is kinda slow, might be better to implicitly inherit props instead
-function filterFieldProps(attrs) {
-  const keys = Object.keys(VField.props).filter(k => !isOn(k) && k !== 'class' && k !== 'style');
-  return pick(attrs, keys);
-}
 
 // Types
 
@@ -12147,7 +12165,7 @@ const VTextField = genericComponent()({
         modelValue: _,
         ...inputProps
       } = VInput.filterProps(props);
-      const fieldProps = filterFieldProps(props);
+      const fieldProps = VField.filterProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
         "modelValue": model.value,
@@ -13755,11 +13773,11 @@ const VBadge = genericComponent()({
       locationStyles
     } = useLocation(props, true, side => {
       const base = props.floating ? props.dot ? 2 : 4 : props.dot ? 8 : 12;
-      return base + (['top', 'bottom'].includes(side) ? +(props.offsetY ?? 0) : ['left', 'right'].includes(side) ? +(props.offsetX ?? 0) : 0);
+      return base + (['top', 'bottom'].includes(side) ? Number(props.offsetY ?? 0) : ['left', 'right'].includes(side) ? Number(props.offsetX ?? 0) : 0);
     });
     useRender(() => {
       const value = Number(props.content);
-      const content = !props.max || isNaN(value) ? props.content : value <= +props.max ? value : `${props.max}+`;
+      const content = !props.max || isNaN(value) ? props.content : value <= Number(props.max) ? value : `${props.max}+`;
       const [badgeAttrs, attrs] = pickWithRest(ctx.attrs, ['aria-atomic', 'aria-label', 'aria-live', 'role', 'title']);
       return createVNode(props.tag, mergeProps({
         "class": ['v-badge', {
@@ -14458,8 +14476,14 @@ const makeCardItemProps = propsFactory({
   appendIcon: IconValue,
   prependAvatar: String,
   prependIcon: IconValue,
-  subtitle: [String, Number],
-  title: [String, Number],
+  subtitle: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  title: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   ...makeComponentProps(),
   ...makeDensityProps()
 }, 'VCardItem');
@@ -14509,11 +14533,11 @@ const VCardItem = genericComponent()({
       }, [hasTitle && createVNode(VCardTitle, {
         "key": "title"
       }, {
-        default: () => [slots.title?.() ?? props.title]
+        default: () => [slots.title?.() ?? toDisplayString(props.title)]
       }), hasSubtitle && createVNode(VCardSubtitle, {
         "key": "subtitle"
       }, {
-        default: () => [slots.subtitle?.() ?? props.subtitle]
+        default: () => [slots.subtitle?.() ?? toDisplayString(props.subtitle)]
       }), slots.default?.()]), hasAppend && createVNode("div", {
         "key": "append",
         "class": "v-card-item__append"
@@ -14585,9 +14609,18 @@ const makeVCardProps = propsFactory({
     type: [Boolean, Object],
     default: true
   },
-  subtitle: [String, Number],
-  text: [String, Number],
-  title: [String, Number],
+  subtitle: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  text: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  title: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -15056,7 +15089,7 @@ const VCarousel = genericComponent()({
     onMounted(startTimeout);
     function startTimeout() {
       if (!props.cycle || !windowRef.value) return;
-      slideTimeout = window.setTimeout(windowRef.value.group.next, +props.interval > 0 ? +props.interval : 6000);
+      slideTimeout = window.setTimeout(windowRef.value.group.next, Number(props.interval) > 0 ? Number(props.interval) : 6000);
     }
     function restartTimeout() {
       window.clearTimeout(slideTimeout);
@@ -15782,7 +15815,7 @@ const makeSliderProps = propsFactory({
 const useSteps = props => {
   const min = computed(() => parseFloat(props.min));
   const max = computed(() => parseFloat(props.max));
-  const step = computed(() => +props.step > 0 ? parseFloat(props.step) : 0);
+  const step = computed(() => Number(props.step) > 0 ? parseFloat(props.step) : 0);
   const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
   function roundValue(value) {
     value = parseFloat(value);
@@ -18737,8 +18770,8 @@ const makeDataTablePaginateProps = propsFactory({
 }, 'DataTable-paginate');
 const VDataTablePaginationSymbol = Symbol.for('vuetify:data-table-pagination');
 function createPagination(props) {
-  const page = useProxiedModel(props, 'page', undefined, value => +(value ?? 1));
-  const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => +(value ?? 10));
+  const page = useProxiedModel(props, 'page', undefined, value => Number(value ?? 1));
+  const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => Number(value ?? 10));
   return {
     page,
     itemsPerPage
@@ -19527,7 +19560,7 @@ const VPagination = genericComponent()({
       const minButtons = props.showFirstLastPage ? 5 : 3;
       return Math.max(0, Math.floor(
       // Round to two decimal places to avoid floating point errors
-      +((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2)));
+      Number(((totalWidth - itemWidth * minButtons) / itemWidth).toFixed(2))));
     }
     const range = computed(() => {
       if (length.value <= 0 || isNaN(length.value) || length.value > Number.MAX_SAFE_INTEGER) return [];
@@ -19598,7 +19631,7 @@ const VPagination = genericComponent()({
               ref,
               ellipsis: false,
               icon: true,
-              disabled: !!props.disabled || +props.length < 2,
+              disabled: !!props.disabled || Number(props.length) < 2,
               color: isActive ? props.activeColor : props.color,
               'aria-current': isActive,
               'aria-label': t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
@@ -19647,7 +19680,7 @@ const VPagination = genericComponent()({
       refs.value[currentIndex]?.$el.focus();
     }
     function onKeydown(e) {
-      if (e.key === keyValues.left && !props.disabled && page.value > +props.start) {
+      if (e.key === keyValues.left && !props.disabled && page.value > Number(props.start)) {
         page.value = page.value - 1;
         nextTick(updateFocus);
       } else if (e.key === keyValues.right && !props.disabled && page.value < start.value + length.value - 1) {
@@ -19980,8 +20013,10 @@ function parseFixedColumns(items) {
       } else {
         if (!seenFixed) {
           item.lastFixed = true;
-        } else if (isNaN(+item.width)) {
+        } else if (isNaN(Number(item.width))) {
           consoleError(`Multiple fixed columns should have a static width (key: ${item.key})`);
+        } else {
+          item.minWidth = Math.max(Number(item.width) || 0, Number(item.minWidth) || 0);
         }
         seenFixed = true;
       }
@@ -21744,30 +21779,30 @@ const VDatePickerControls = genericComponent()({
         "class": ['v-date-picker-controls']
       }, [createVNode(VBtn, {
         "class": "v-date-picker-controls__month-btn",
+        "data-testid": "month-btn",
         "disabled": disableMonth.value,
         "text": props.text,
         "variant": "text",
         "rounded": true,
         "onClick": onClickMonth
       }, null), createVNode(VBtn, {
-        "key": "mode-btn",
         "class": "v-date-picker-controls__mode-btn",
+        "data-testid": "year-btn",
         "disabled": disableYear.value,
         "density": "comfortable",
         "icon": props.modeIcon,
         "variant": "text",
         "onClick": onClickYear
-      }, null), createVNode(VSpacer, {
-        "key": "mode-spacer"
-      }, null), createVNode("div", {
-        "key": "month-buttons",
+      }, null), createVNode(VSpacer, null, null), createVNode("div", {
         "class": "v-date-picker-controls__month"
       }, [createVNode(VBtn, {
+        "data-testid": "prev-month",
         "disabled": disablePrev.value,
         "icon": props.prevIcon,
         "variant": "text",
         "onClick": onClickPrev
       }, null), createVNode(VBtn, {
+        "data-testid": "next-month",
         "disabled": disableNext.value,
         "icon": props.nextIcon,
         "variant": "text",
@@ -22114,7 +22149,7 @@ const VDatePickerMonth = genericComponent()({
         model.value = [value];
       }
     }
-    return () => createVNode("div", {
+    useRender(() => createVNode("div", {
       "class": "v-date-picker-month"
     }, [props.showWeek && createVNode("div", {
       "key": "weeks",
@@ -22136,6 +22171,13 @@ const VDatePickerMonth = genericComponent()({
       }, [weekDay])), daysInMonth.value.map((item, i) => {
         const slotProps = {
           props: {
+            class: 'v-date-picker-month__day-btn',
+            color: (item.isSelected || item.isToday) && !item.isDisabled ? props.color : undefined,
+            disabled: item.isDisabled,
+            icon: true,
+            ripple: false,
+            text: item.localized,
+            variant: item.isDisabled ? item.isToday ? 'outlined' : 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
             onClick: () => onClick(item.date)
           },
           item,
@@ -22153,24 +22195,9 @@ const VDatePickerMonth = genericComponent()({
             'v-date-picker-month__day--week-start': item.isWeekStart
           }],
           "data-v-date": !item.isDisabled ? item.isoDate : undefined
-        }, [(props.showAdjacentMonths || !item.isAdjacent) && createVNode(VDefaultsProvider, {
-          "defaults": {
-            VBtn: {
-              class: 'v-date-picker-month__day-btn',
-              color: (item.isSelected || item.isToday) && !item.isDisabled ? props.color : undefined,
-              disabled: item.isDisabled,
-              icon: true,
-              ripple: false,
-              text: item.localized,
-              variant: item.isDisabled ? item.isToday ? 'outlined' : 'text' : item.isToday && !item.isSelected ? 'outlined' : 'flat',
-              onClick: () => onClick(item.date)
-            }
-          }
-        }, {
-          default: () => [slots.day?.(slotProps) ?? createVNode(VBtn, slotProps.props, null)]
-        })]);
+        }, [(props.showAdjacentMonths || !item.isAdjacent) && (slots.day?.(slotProps) ?? createVNode(VBtn, slotProps.props, null))]);
       })])]
-    })]);
+    })]));
   }
 });
 
@@ -23308,7 +23335,7 @@ const VFileInput = genericComponent()({
         modelValue: _,
         ...inputProps
       } = VInput.filterProps(props);
-      const fieldProps = filterFieldProps(props);
+      const fieldProps = VField.filterProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
         "modelValue": props.multiple ? model.value : model.value[0],
@@ -24927,7 +24954,7 @@ const VParallax = genericComponent()({
     watch(displayHeight, onScroll);
     watch(() => contentRect.value?.height, onScroll);
     const scale = computed(() => {
-      return 1 - clamp(+props.scale);
+      return 1 - clamp(Number(props.scale));
     });
     let frame = -1;
     function onScroll() {
@@ -25348,7 +25375,7 @@ const VRating = genericComponent()({
       themeClasses
     } = provideTheme(props);
     const rating = useProxiedModel(props, 'modelValue');
-    const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, +props.length));
+    const normalizedValue = computed(() => clamp(parseFloat(rating.value), 0, Number(props.length)));
     const range = computed(() => createRange(Number(props.length), 1));
     const increments = computed(() => range.value.flatMap(v => props.halfIncrements ? [v - 0.5, v] : [v]));
     const hoverIndex = shallowRef(-1);
@@ -25959,7 +25986,7 @@ const VBarline = genericComponent()({
         const height = Math.abs(gridY * value);
         return {
           x: minX + index * gridX,
-          y: horizonY - height + +(value < 0) * height,
+          y: horizonY - height + Number(value < 0) * height,
           height,
           value
         };
@@ -27397,10 +27424,10 @@ const VTextarea = genericComponent()({
       }
     }
     const sizerRef = ref();
-    const rows = ref(+props.rows);
+    const rows = ref(Number(props.rows));
     const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant));
     watchEffect(() => {
-      if (!props.autoGrow) rows.value = +props.rows;
+      if (!props.autoGrow) rows.value = Number(props.rows);
     });
     function calculateInputHeight() {
       if (!props.autoGrow) return;
@@ -27443,7 +27470,7 @@ const VTextarea = genericComponent()({
         modelValue: _,
         ...inputProps
       } = VInput.filterProps(props);
-      const fieldProps = filterFieldProps(props);
+      const fieldProps = VField.filterProps(props);
       return createVNode(VInput, mergeProps({
         "ref": vInputRef,
         "modelValue": model.value,
@@ -28417,7 +28444,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.7.15";
+const version$1 = "3.7.17";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -28442,7 +28469,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.7.15";
+const version = "3.7.17";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };