@vuetify/nightly 3.8.1-next.2025-04-18 → 3.8.2-dev.2025-04-28

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.1-next.2025-04-18
+* Vuetify v3.8.2-dev.2025-04-28
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1937,7 +1937,7 @@ const md3 = {
       flat: true
     },
     VAutocomplete: {
-      variant: 'filled'
+      variant: 'outlined'
     },
     VBanner: {
       color: 'primary'
@@ -1966,7 +1966,10 @@ const md3 = {
       rounded: 'sm'
     },
     VCombobox: {
-      variant: 'filled'
+      variant: 'outlined'
+    },
+    VDateInput: {
+      variant: 'outlined'
     },
     VDatePicker: {
       controlHeight: 48,
@@ -1980,6 +1983,9 @@ const md3 = {
         rounded: 'circle'
       }
     },
+    VFileInput: {
+      variant: 'outlined'
+    },
     VNavigationDrawer: {
       // VList: {
       //   nav: true,
@@ -1988,8 +1994,15 @@ const md3 = {
       //   },
       // },
     },
+    VNumberInput: {
+      variant: 'outlined',
+      VBtn: {
+        color: undefined,
+        rounded: undefined
+      }
+    },
     VSelect: {
-      variant: 'filled'
+      variant: 'outlined'
     },
     VSlider: {
       color: 'primary'
@@ -1998,10 +2011,10 @@ const md3 = {
       color: 'primary'
     },
     VTextarea: {
-      variant: 'filled'
+      variant: 'outlined'
     },
     VTextField: {
-      variant: 'filled'
+      variant: 'outlined'
     },
     VToolbar: {
       VBtn: {
@@ -2754,7 +2767,7 @@ const makeThemeProps = propsFactory({
 }, 'theme');
 function genDefaults$1() {
   return {
-    defaultTheme: 'system',
+    defaultTheme: 'light',
     prefix: 'v-',
     variations: {
       colors: [],
@@ -2806,8 +2819,8 @@ function genDefaults$1() {
           surface: '#212121',
           'surface-bright': '#ccbfd6',
           'surface-light': '#424242',
-          'surface-variant': '#a3a3a3',
-          'on-surface-variant': '#424242',
+          'surface-variant': '#c8c8c8',
+          'on-surface-variant': '#000000',
           primary: '#2196F3',
           'primary-darken-1': '#277CC1',
           secondary: '#54B6B2',
@@ -2839,7 +2852,7 @@ function genDefaults$1() {
     },
     stylesheetId: 'vuetify-theme-stylesheet',
     scoped: false,
-    unimportant: true,
+    unimportant: false,
     utilities: true
   };
 }
@@ -2997,7 +3010,7 @@ function createTheme(options) {
       }
       lines.push(...bgLines, ...fgLines);
     }
-    return '@layer vuetify.theme {\n' + lines.map(v => `  ${v}`).join('') + '\n}';
+    return lines.map((str, i) => i === 0 ? str : `    ${str}`).join('');
   });
   const themeClasses = computed(() => parsedOptions.isDisabled ? undefined : `${parsedOptions.prefix}theme--${name.value}`);
   const themeNames = computed(() => Object.keys(computedThemes.value));
@@ -4653,9 +4666,15 @@ function useVariant(props) {
   };
 }
 
+// Types
+
 const makeVBtnGroupProps = propsFactory({
   baseColor: String,
   divided: Boolean,
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
   ...makeBorderProps(),
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -4689,7 +4708,7 @@ const VBtnGroup = genericComponent()({
     } = useRounded(props);
     provideDefaults({
       VBtn: {
-        height: 'auto',
+        height: props.direction === 'horizontal' ? 'auto' : null,
         baseColor: toRef(props, 'baseColor'),
         color: toRef(props, 'color'),
         density: toRef(props, 'density'),
@@ -4699,7 +4718,7 @@ const VBtnGroup = genericComponent()({
     });
     useRender(() => {
       return createVNode(props.tag, {
-        "class": ['v-btn-group', {
+        "class": ['v-btn-group', `v-btn-group--${props.direction}`, {
           'v-btn-group--divided': props.divided
         }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
         "style": props.style
@@ -7228,6 +7247,11 @@ function useValidation(props) {
   }
   async function validate() {
     let silent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (props.disabled || props.readonly) {
+      internalErrorMessages.value = [];
+      isValidating.value = false;
+      return internalErrorMessages.value;
+    }
     const results = [];
     isValidating.value = true;
     for (const rule of props.rules) {
@@ -13271,8 +13295,7 @@ const VSelect = genericComponent()({
                   onClick: () => select(item, null)
                 });
                 return slots.item?.({
-                  item: item.raw,
-                  internalItem: item,
+                  item,
                   index,
                   props: itemProps
                 }) ?? createVNode(VListItem, mergeProps(itemProps, {
@@ -13320,13 +13343,11 @@ const VSelect = genericComponent()({
           };
           const hasSlot = hasChips ? !!slots.chip : !!slots.selection;
           const slotContent = hasSlot ? ensureValidVNode(hasChips ? slots.chip({
-            item: item.raw,
-            internalItem: item,
+            item,
             index,
             props: slotProps
           }) : slots.selection({
-            item: item.raw,
-            internalItem: item,
+            item,
             index
           })) : undefined;
           if (hasSlot && !slotContent) return undefined;
@@ -13392,6 +13413,7 @@ const VSelect = genericComponent()({
 // Composables
 const defaultFilter = (value, query, item) => {
   if (value == null || query == null) return -1;
+  if (!query.length) return 0;
   value = value.toString().toLocaleLowerCase();
   query = query.toString().toLocaleLowerCase();
   const result = [];
@@ -13404,7 +13426,7 @@ const defaultFilter = (value, query, item) => {
 };
 function normaliseMatch(match, query) {
   if (match == null || typeof match === 'boolean' || match === -1) return;
-  if (typeof match === 'number') return [[match, query.length]];
+  if (typeof match === 'number') return [[match, match + query.length]];
   if (Array.isArray(match[0])) return match;
   return [match];
 }
@@ -13872,8 +13894,7 @@ const VAutocomplete = genericComponent()({
                   onClick: () => select(item, null)
                 });
                 return slots.item?.({
-                  item: item.raw,
-                  internalItem: item,
+                  item,
                   index,
                   props: itemProps
                 }) ?? createVNode(VListItem, mergeProps(itemProps, {
@@ -13924,13 +13945,11 @@ const VAutocomplete = genericComponent()({
           };
           const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection;
           const slotContent = hasSlot ? ensureValidVNode(hasChips.value ? slots.chip({
-            item: item.raw,
-            internalItem: item,
+            item,
             index,
             props: slotProps
           }) : slots.selection({
-            item: item.raw,
-            internalItem: item,
+            item,
             index
           })) : undefined;
           if (hasSlot && !slotContent) return undefined;
@@ -17322,165 +17341,81 @@ const VPicker = genericComponent()({
 
 // Types
 
-const firstDay = {
-  '001': 1,
-  AD: 1,
-  AE: 6,
-  AF: 6,
-  AG: 0,
-  AI: 1,
-  AL: 1,
-  AM: 1,
-  AN: 1,
-  AR: 1,
-  AS: 0,
-  AT: 1,
-  AU: 1,
-  AX: 1,
-  AZ: 1,
-  BA: 1,
-  BD: 0,
-  BE: 1,
-  BG: 1,
-  BH: 6,
-  BM: 1,
-  BN: 1,
-  BR: 0,
-  BS: 0,
-  BT: 0,
-  BW: 0,
-  BY: 1,
-  BZ: 0,
-  CA: 0,
-  CH: 1,
-  CL: 1,
-  CM: 1,
-  CN: 1,
-  CO: 0,
-  CR: 1,
-  CY: 1,
-  CZ: 1,
-  DE: 1,
-  DJ: 6,
-  DK: 1,
-  DM: 0,
-  DO: 0,
-  DZ: 6,
-  EC: 1,
-  EE: 1,
-  EG: 6,
-  ES: 1,
-  ET: 0,
-  FI: 1,
-  FJ: 1,
-  FO: 1,
-  FR: 1,
-  GB: 1,
-  'GB-alt-variant': 0,
-  GE: 1,
-  GF: 1,
-  GP: 1,
-  GR: 1,
-  GT: 0,
-  GU: 0,
-  HK: 0,
-  HN: 0,
-  HR: 1,
-  HU: 1,
-  ID: 0,
-  IE: 1,
-  IL: 0,
-  IN: 0,
-  IQ: 6,
-  IR: 6,
-  IS: 1,
-  IT: 1,
-  JM: 0,
-  JO: 6,
-  JP: 0,
-  KE: 0,
-  KG: 1,
-  KH: 0,
-  KR: 0,
-  KW: 6,
-  KZ: 1,
-  LA: 0,
-  LB: 1,
-  LI: 1,
-  LK: 1,
-  LT: 1,
-  LU: 1,
-  LV: 1,
-  LY: 6,
-  MC: 1,
-  MD: 1,
-  ME: 1,
-  MH: 0,
-  MK: 1,
-  MM: 0,
-  MN: 1,
-  MO: 0,
-  MQ: 1,
-  MT: 0,
-  MV: 5,
-  MX: 0,
-  MY: 1,
-  MZ: 0,
-  NI: 0,
-  NL: 1,
-  NO: 1,
-  NP: 0,
-  NZ: 1,
-  OM: 6,
-  PA: 0,
-  PE: 0,
-  PH: 0,
-  PK: 0,
-  PL: 1,
-  PR: 0,
-  PT: 0,
-  PY: 0,
-  QA: 6,
-  RE: 1,
-  RO: 1,
-  RS: 1,
-  RU: 1,
-  SA: 0,
-  SD: 6,
-  SE: 1,
-  SG: 0,
-  SI: 1,
-  SK: 1,
-  SM: 1,
-  SV: 0,
-  SY: 6,
-  TH: 0,
-  TJ: 1,
-  TM: 1,
-  TR: 1,
-  TT: 0,
-  TW: 0,
-  UA: 1,
-  UM: 0,
-  US: 0,
-  UY: 1,
-  UZ: 1,
-  VA: 1,
-  VE: 0,
-  VI: 0,
-  VN: 1,
-  WS: 0,
-  XK: 1,
-  YE: 0,
-  ZA: 0,
-  ZW: 0
-};
+function weekInfo(locale) {
+  // https://simplelocalize.io/data/locales/
+  // then `new Intl.Locale(...).getWeekInfo()`
+  const code = locale.slice(-2).toUpperCase();
+  switch (true) {
+    case locale === 'GB-alt-variant':
+      {
+        return {
+          firstDay: 0,
+          firstWeekSize: 4
+        };
+      }
+    case locale === '001':
+      {
+        return {
+          firstDay: 1,
+          firstWeekSize: 1
+        };
+      }
+    case `AG AS BD BR BS BT BW BZ CA CO DM DO ET GT GU HK HN ID IL IN JM JP KE
+    KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PY SA SG SV TH TT TW UM US
+    VE VI WS YE ZA ZW`.includes(code):
+      {
+        return {
+          firstDay: 0,
+          firstWeekSize: 1
+        };
+      }
+    case `AI AL AM AR AU AZ BA BM BN BY CL CM CN CR CY EC GE HR KG KZ LB LK LV
+    MD ME MK MN MY NZ RO RS SI TJ TM TR UA UY UZ VN XK`.includes(code):
+      {
+        return {
+          firstDay: 1,
+          firstWeekSize: 1
+        };
+      }
+    case `AD AN AT AX BE BG CH CZ DE DK EE ES FI FJ FO FR GB GF GP GR HU IE IS
+    IT LI LT LU MC MQ NL NO PL RE RU SE SK SM VA`.includes(code):
+      {
+        return {
+          firstDay: 1,
+          firstWeekSize: 4
+        };
+      }
+    case `AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY`.includes(code):
+      {
+        return {
+          firstDay: 6,
+          firstWeekSize: 1
+        };
+      }
+    case code === 'MV':
+      {
+        return {
+          firstDay: 5,
+          firstWeekSize: 1
+        };
+      }
+    case code === 'PT':
+      {
+        return {
+          firstDay: 0,
+          firstWeekSize: 4
+        };
+      }
+    default:
+      return null;
+  }
+}
 function getWeekArray(date, locale, firstDayOfWeek) {
   const weeks = [];
   let currentWeek = [];
   const firstDayOfMonth = startOfMonth(date);
   const lastDayOfMonth = endOfMonth(date);
-  const first = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0;
+  const first = firstDayOfWeek ?? weekInfo(locale)?.firstDay ?? 0;
   const firstDayWeekIndex = (firstDayOfMonth.getDay() - first + 7) % 7;
   const lastDayWeekIndex = (lastDayOfMonth.getDay() - first + 7) % 7;
   for (let i = 0; i < firstDayWeekIndex; i++) {
@@ -17511,7 +17446,7 @@ function getWeekArray(date, locale, firstDayOfWeek) {
   return weeks;
 }
 function startOfWeek(date, locale, firstDayOfWeek) {
-  const day = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0;
+  const day = firstDayOfWeek ?? weekInfo(locale)?.firstDay ?? 0;
   const d = new Date(date);
   while (d.getDay() !== day) {
     d.setDate(d.getDate() - 1);
@@ -17520,7 +17455,7 @@ function startOfWeek(date, locale, firstDayOfWeek) {
 }
 function endOfWeek(date, locale) {
   const d = new Date(date);
-  const lastDay = ((firstDay[locale.slice(-2).toUpperCase()] ?? 0) + 6) % 7;
+  const lastDay = ((weekInfo(locale)?.firstDay ?? 0) + 6) % 7;
   while (d.getDay() !== lastDay) {
     d.setDate(d.getDate() + 1);
   }
@@ -17555,7 +17490,7 @@ function date(value) {
 }
 const sundayJanuarySecond2000 = new Date(2000, 0, 2);
 function getWeekdays(locale, firstDayOfWeek) {
-  const daysFromSunday = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0;
+  const daysFromSunday = firstDayOfWeek ?? weekInfo(locale)?.firstDay ?? 0;
   return createRange(7).map(i => {
     const weekday = new Date(sundayJanuarySecond2000);
     weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i);
@@ -17803,6 +17738,24 @@ function getYear(date) {
 function getMonth(date) {
   return date.getMonth();
 }
+function getWeek(date, locale, firstDayOfWeek, firstWeekMinSize) {
+  const weekInfoFromLocale = weekInfo(locale);
+  const weekStart = firstDayOfWeek ?? weekInfoFromLocale?.firstDay ?? 0;
+  const minWeekSize = firstWeekMinSize ?? weekInfoFromLocale?.firstWeekSize ?? 1;
+  function firstWeekSize(year) {
+    const yearStart = new Date(year, 0, 1);
+    return 7 - getDiff(yearStart, startOfWeek(yearStart, locale, weekStart), 'days');
+  }
+  let year = getYear(date);
+  const currentWeekEnd = addDays(startOfWeek(date, locale, weekStart), 6);
+  if (year < getYear(currentWeekEnd) && firstWeekSize(year + 1) >= minWeekSize) {
+    year++;
+  }
+  const yearStart = new Date(year, 0, 1);
+  const size = firstWeekSize(year);
+  const d1w1 = size >= minWeekSize ? addDays(yearStart, size - 7) : addDays(yearStart, size);
+  return 1 + getDiff(date, d1w1, 'weeks');
+}
 function getDate(date) {
   return date.getDate();
 }
@@ -17942,10 +17895,12 @@ class VuetifyDateAdapter {
     return addMonths(date, amount);
   }
   getWeekArray(date, firstDayOfWeek) {
-    return getWeekArray(date, this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined);
+    const firstDay = firstDayOfWeek !== undefined ? Number(firstDayOfWeek) : undefined;
+    return getWeekArray(date, this.locale, firstDay);
   }
   startOfWeek(date, firstDayOfWeek) {
-    return startOfWeek(date, this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined);
+    const firstDay = firstDayOfWeek !== undefined ? Number(firstDayOfWeek) : undefined;
+    return startOfWeek(date, this.locale, firstDay);
   }
   endOfWeek(date) {
     return endOfWeek(date, this.locale);
@@ -18005,7 +17960,8 @@ class VuetifyDateAdapter {
     return getDiff(date, comparing, unit);
   }
   getWeekdays(firstDayOfWeek) {
-    return getWeekdays(this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined);
+    const firstDay = firstDayOfWeek !== undefined ? Number(firstDayOfWeek) : undefined;
+    return getWeekdays(this.locale, firstDay);
   }
   getYear(date) {
     return getYear(date);
@@ -18013,6 +17969,10 @@ class VuetifyDateAdapter {
   getMonth(date) {
     return getMonth(date);
   }
+  getWeek(date, firstDayOfWeek, firstWeekMinSize) {
+    const firstDay = firstDayOfWeek !== undefined ? Number(firstDayOfWeek) : undefined;
+    return getWeek(date, this.locale, firstDay, firstWeekMinSize);
+  }
   getDate(date) {
     return getDate(date);
   }
@@ -18116,26 +18076,6 @@ function useDate() {
   return createInstance(options, locale);
 }
 
-// https://stackoverflow.com/questions/274861/how-do-i-calculate-the-week-number-given-a-date/275024#275024
-function getWeek(adapter, value) {
-  const date = adapter.toJsDate(value);
-  let year = date.getFullYear();
-  let d1w1 = new Date(year, 0, 1);
-  if (date < d1w1) {
-    year = year - 1;
-    d1w1 = new Date(year, 0, 1);
-  } else {
-    const tv = new Date(year + 1, 0, 1);
-    if (date >= tv) {
-      year = year + 1;
-      d1w1 = tv;
-    }
-  }
-  const diffTime = Math.abs(date.getTime() - d1w1.getTime());
-  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-  return Math.floor(diffDays / 7) + 1;
-}
-
 // Types
 
 const makeVColorPickerProps = propsFactory({
@@ -18682,8 +18622,7 @@ const VCombobox = genericComponent()({
                   onClick: () => select(item, null)
                 });
                 return slots.item?.({
-                  item: item.raw,
-                  internalItem: item,
+                  item,
                   index,
                   props: itemProps
                 }) ?? createVNode(VListItem, mergeProps(itemProps, {
@@ -18734,13 +18673,11 @@ const VCombobox = genericComponent()({
           };
           const hasSlot = hasChips.value ? !!slots.chip : !!slots.selection;
           const slotContent = hasSlot ? ensureValidVNode(hasChips.value ? slots.chip({
-            item: item.raw,
-            internalItem: item,
+            item,
             index,
             props: slotProps
           }) : slots.selection({
-            item: item.raw,
-            internalItem: item,
+            item,
             index
           })) : undefined;
           if (hasSlot && !slotContent) return undefined;
@@ -22327,7 +22264,7 @@ const makeCalendarProps = propsFactory({
   },
   firstDayOfWeek: {
     type: [Number, String],
-    default: 0
+    default: undefined
   }
 }, 'calendar');
 function useCalendar(props) {
@@ -22350,14 +22287,12 @@ function useCalendar(props) {
     return adapter.setMonth(date, value);
   }, v => adapter.getMonth(v));
   const weekDays = computed(() => {
-    const firstDayOfWeek = Number(props.firstDayOfWeek);
-
+    const firstDayOfWeek = adapter.toJsDate(adapter.startOfWeek(adapter.date(), props.firstDayOfWeek)).getDay();
     // Always generate all days, regardless of props.weekdays
     return [0, 1, 2, 3, 4, 5, 6].map(day => (day + firstDayOfWeek) % 7);
   });
   const weeksInMonth = computed(() => {
-    const firstDayOfWeek = Number(props.firstDayOfWeek);
-    const weeks = adapter.getWeekArray(month.value, firstDayOfWeek);
+    const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
     const days = weeks.flat();
 
     // Make sure there's always 6 weeks in month (6 * 7 days)
@@ -22421,7 +22356,7 @@ function useCalendar(props) {
   });
   const weekNumbers = computed(() => {
     return weeksInMonth.value.map(week => {
-      return week.length ? getWeek(adapter, week[0]) : null;
+      return week.length ? adapter.getWeek(week[0], props.firstDayOfWeek) : null;
     });
   });
   function isDisabled(value) {
@@ -23910,17 +23845,7 @@ const VForm = genericComponent()({
       "novalidate": true,
       "onReset": onReset,
       "onSubmit": onSubmit
-    }, [slots.default?.({
-      errors: form.errors.value,
-      isDisabled: form.isDisabled.value,
-      isReadonly: form.isReadonly.value,
-      isValidating: form.isValidating.value,
-      isValid: form.isValid.value,
-      items: form.items.value,
-      validate: form.validate,
-      reset: form.reset,
-      resetValidation: form.resetValidation
-    })]));
+    }, [slots.default?.(form)]));
     return forwardRefs(form, formRef);
   }
 });
@@ -29329,7 +29254,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.1-next.2025-04-18";
+const version$1 = "3.8.2-dev.2025-04-28";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -29354,7 +29279,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.8.1-next.2025-04-18";
+const version = "3.8.2-dev.2025-04-28";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };