vuetify 3.6.11 → 3.6.12

package/dist/vuetify.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.11
+* Vuetify v3.6.12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -5209,6 +5209,7 @@ const VProgressLinear = genericComponent()({
     const normalizedValue = computed(() => clamp(parseFloat(progress.value) / max.value * 100, 0, 100));
     const isReversed = computed(() => isRtl.value !== props.reverse);
     const transition = computed(() => props.indeterminate ? 'fade-transition' : 'slide-x-transition');
+    const isForcedColorsModeActive = IN_BROWSER && window.matchMedia?.('(forced-colors: active)').matches;
     function handleClick(e) {
       if (!intersectionRef.value) return;
       const {
@@ -5256,13 +5257,13 @@ const VProgressLinear = genericComponent()({
           '--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1))
         }
       }, null), createVNode("div", {
-        "class": ['v-progress-linear__background', backgroundColorClasses.value],
+        "class": ['v-progress-linear__background', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined],
         "style": [backgroundColorStyles.value, {
           opacity: parseFloat(props.bgOpacity),
           width: props.stream ? 0 : undefined
         }]
       }, null), createVNode("div", {
-        "class": ['v-progress-linear__buffer', bufferColorClasses.value],
+        "class": ['v-progress-linear__buffer', !isForcedColorsModeActive ? bufferColorClasses.value : undefined],
         "style": [bufferColorStyles.value, {
           opacity: parseFloat(props.bufferOpacity),
           width: convertToUnit(normalizedBuffer.value, '%')
@@ -5271,7 +5272,7 @@ const VProgressLinear = genericComponent()({
         "name": transition.value
       }, {
         default: () => [!props.indeterminate ? createVNode("div", {
-          "class": ['v-progress-linear__determinate', barColorClasses.value],
+          "class": ['v-progress-linear__determinate', !isForcedColorsModeActive ? barColorClasses.value : undefined],
           "style": [barColorStyles.value, {
             width: convertToUnit(normalizedValue.value, '%')
           }]
@@ -5279,7 +5280,7 @@ const VProgressLinear = genericComponent()({
           "class": "v-progress-linear__indeterminate"
         }, [['long', 'short'].map(bar => createVNode("div", {
           "key": bar,
-          "class": ['v-progress-linear__indeterminate', bar, barColorClasses.value],
+          "class": ['v-progress-linear__indeterminate', bar, !isForcedColorsModeActive ? barColorClasses.value : undefined],
           "style": barColorStyles.value
         }, null))])]
       }), slots.default && createVNode("div", {
@@ -7039,10 +7040,7 @@ function useValidation(props) {
 const makeVInputProps = propsFactory({
   id: String,
   appendIcon: IconValue,
-  centerAffix: {
-    type: Boolean,
-    default: true
-  },
+  centerAffix: Boolean,
   prependIcon: IconValue,
   hideDetails: [Boolean, String],
   hideSpinButtons: Boolean,
@@ -10833,12 +10831,9 @@ function useStack(isActive, zIndex, disableGlobalStack) {
 }
 
 // Utilities
-
-// Types
-
 function useTeleport(target) {
   const teleportTarget = computed(() => {
-    const _target = target.value;
+    const _target = target();
     if (_target === true || !IN_BROWSER) return undefined;
     const targetElement = _target === false ? document.body : typeof _target === 'string' ? document.querySelector(_target) : _target;
     if (targetElement == null) {
@@ -11059,10 +11054,15 @@ const VOverlay = genericComponent()({
       isActive,
       isTop: localTop
     });
-    const potentialShadowDomRoot = computed(() => activatorEl?.value?.getRootNode());
     const {
       teleportTarget
-    } = useTeleport(computed(() => props.attach || props.contained || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value ?? true : false));
+    } = useTeleport(() => {
+      const target = props.attach || props.contained;
+      if (target) return target;
+      const rootNode = activatorEl?.value?.getRootNode();
+      if (rootNode instanceof ShadowRoot) return rootNode;
+      return false;
+    });
     const {
       dimensionStyles
     } = useDimension(props);
@@ -11555,10 +11555,7 @@ const makeVFieldProps = propsFactory({
     default: '$clear'
   },
   active: Boolean,
-  centerAffix: {
-    type: Boolean,
-    default: undefined
-  },
+  centerAffix: Boolean,
   color: String,
   baseColor: String,
   dirty: Boolean,
@@ -11625,8 +11622,9 @@ const VField = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
+    const isSingleLine = computed(() => props.singleLine || props.centerAffix);
     const isActive = computed(() => props.dirty || props.active);
-    const hasLabel = computed(() => !props.singleLine && !!(props.label || slots.label));
+    const hasLabel = computed(() => !isSingleLine.value && !!(props.label || slots.label));
     const uid = getUid();
     const id = computed(() => props.id || `input-${uid}`);
     const messagesId = computed(() => `${id.value}-messages`);
@@ -11715,7 +11713,7 @@ const VField = genericComponent()({
         "class": ['v-field', {
           'v-field--active': isActive.value,
           'v-field--appended': hasAppend,
-          'v-field--center-affix': props.centerAffix ?? !isPlainOrUnderlined.value,
+          'v-field--center-affix': props.centerAffix,
           'v-field--disabled': props.disabled,
           'v-field--dirty': props.dirty,
           'v-field--error': props.error,
@@ -11724,7 +11722,7 @@ const VField = genericComponent()({
           'v-field--persistent-clear': props.persistentClear,
           'v-field--prepended': hasPrepend,
           'v-field--reverse': props.reverse,
-          'v-field--single-line': props.singleLine,
+          'v-field--single-line': isSingleLine.value,
           'v-field--no-label': !label(),
           [`v-field--variant-${props.variant}`]: true
         }, themeClasses.value, backgroundColorClasses.value, focusClasses.value, loaderClasses.value, roundedClasses.value, rtlClasses.value, props.class],
@@ -11959,7 +11957,6 @@ const VTextField = genericComponent()({
         }, props.class],
         "style": props.style
       }, rootAttrs, inputProps, {
-        "centerAffix": !isPlainOrUnderlined.value,
         "focused": isFocused.value
       }), {
         ...slots,
@@ -11985,6 +11982,7 @@ const VTextField = genericComponent()({
             "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
+            "centerAffix": props.centerAffix,
             "error": isValid.value === false
           }), {
             ...slots,
@@ -17502,13 +17500,14 @@ const firstDay = {
   ZA: 0,
   ZW: 0
 };
-function getWeekArray(date, locale) {
+function getWeekArray(date, locale, firstDayOfWeek) {
   const weeks = [];
   let currentWeek = [];
   const firstDayOfMonth = startOfMonth(date);
   const lastDayOfMonth = endOfMonth(date);
-  const firstDayWeekIndex = (firstDayOfMonth.getDay() - firstDay[locale.slice(-2).toUpperCase()] + 7) % 7;
-  const lastDayWeekIndex = (lastDayOfMonth.getDay() - firstDay[locale.slice(-2).toUpperCase()] + 7) % 7;
+  const first = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0;
+  const firstDayWeekIndex = (firstDayOfMonth.getDay() - first + 7) % 7;
+  const lastDayWeekIndex = (lastDayOfMonth.getDay() - first + 7) % 7;
   for (let i = 0; i < firstDayWeekIndex; i++) {
     const adjacentDay = new Date(firstDayOfMonth);
     adjacentDay.setDate(adjacentDay.getDate() - (firstDayWeekIndex - i));
@@ -17536,9 +17535,10 @@ function getWeekArray(date, locale) {
   }
   return weeks;
 }
-function startOfWeek(date, locale) {
+function startOfWeek(date, locale, firstDayOfWeek) {
+  const day = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0;
   const d = new Date(date);
-  while (d.getDay() !== (firstDay[locale.slice(-2).toUpperCase()] ?? 0)) {
+  while (d.getDay() !== day) {
     d.setDate(d.getDate() - 1);
   }
   return d;
@@ -17579,8 +17579,8 @@ function date(value) {
   return null;
 }
 const sundayJanuarySecond2000 = new Date(2000, 0, 2);
-function getWeekdays(locale) {
-  const daysFromSunday = firstDay[locale.slice(-2).toUpperCase()];
+function getWeekdays(locale, firstDayOfWeek) {
+  const daysFromSunday = firstDayOfWeek ?? firstDay[locale.slice(-2).toUpperCase()] ?? 0;
   return createRange(7).map(i => {
     const weekday = new Date(sundayJanuarySecond2000);
     weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i);
@@ -17978,11 +17978,11 @@ class VuetifyDateAdapter {
   addMonths(date, amount) {
     return addMonths(date, amount);
   }
-  getWeekArray(date) {
-    return getWeekArray(date, this.locale);
+  getWeekArray(date, firstDayOfWeek) {
+    return getWeekArray(date, this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined);
   }
-  startOfWeek(date) {
-    return startOfWeek(date, this.locale);
+  startOfWeek(date, firstDayOfWeek) {
+    return startOfWeek(date, this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined);
   }
   endOfWeek(date) {
     return endOfWeek(date, this.locale);
@@ -18041,8 +18041,8 @@ class VuetifyDateAdapter {
   getDiff(date, comparing, unit) {
     return getDiff(date, comparing, unit);
   }
-  getWeekdays() {
-    return getWeekdays(this.locale);
+  getWeekdays(firstDayOfWeek) {
+    return getWeekdays(this.locale, firstDayOfWeek ? Number(firstDayOfWeek) : undefined);
   }
   getYear(date) {
     return getYear(date);
@@ -19463,19 +19463,19 @@ const VPagination = genericComponent()({
 
 const makeVDataTableFooterProps = propsFactory({
   prevIcon: {
-    type: String,
+    type: IconValue,
     default: '$prev'
   },
   nextIcon: {
-    type: String,
+    type: IconValue,
     default: '$next'
   },
   firstIcon: {
-    type: String,
+    type: IconValue,
     default: '$first'
   },
   lastIcon: {
-    type: String,
+    type: IconValue,
     default: '$last'
   },
   itemsPerPageText: {
@@ -21410,15 +21410,15 @@ const makeVDatePickerControlsProps = propsFactory({
     default: false
   },
   nextIcon: {
-    type: [String],
+    type: IconValue,
     default: '$next'
   },
   prevIcon: {
-    type: [String],
+    type: IconValue,
     default: '$prev'
   },
   modeIcon: {
-    type: [String],
+    type: IconValue,
     default: '$subgroup'
   },
   text: String,
@@ -21604,7 +21604,8 @@ const makeCalendarProps = propsFactory({
   weeksInMonth: {
     type: String,
     default: 'dynamic'
-  }
+  },
+  firstDayOfWeek: [Number, String]
 }, 'calendar');
 function useCalendar(props) {
   const adapter = useDate();
@@ -21625,8 +21626,12 @@ function useCalendar(props) {
     const date = adapter.setYear(adapter.startOfMonth(adapter.date()), adapter.getYear(year.value));
     return adapter.setMonth(date, value);
   }, v => adapter.getMonth(v));
+  const weekDays = computed(() => {
+    const firstDayOfWeek = Number(props.firstDayOfWeek ?? 0);
+    return props.weekdays.map(day => (day + firstDayOfWeek) % 7);
+  });
   const weeksInMonth = computed(() => {
-    const weeks = adapter.getWeekArray(month.value);
+    const weeks = adapter.getWeekArray(month.value, props.firstDayOfWeek);
     const days = weeks.flat();
 
     // Make sure there's always 6 weeks in month (6 * 7 days)
@@ -21647,7 +21652,7 @@ function useCalendar(props) {
   });
   function genDays(days, today) {
     return days.filter(date => {
-      return props.weekdays.includes(adapter.toJsDate(date).getDay());
+      return weekDays.value.includes(adapter.toJsDate(date).getDay());
     }).map((date, index) => {
       const isoDate = adapter.toISO(date);
       const isAdjacent = !adapter.isSameMonth(date, month.value);
@@ -21675,7 +21680,7 @@ function useCalendar(props) {
     });
   }
   const daysInWeek = computed(() => {
-    const lastDay = adapter.startOfWeek(displayValue.value);
+    const lastDay = adapter.startOfWeek(displayValue.value, props.firstDayOfWeek);
     const week = [];
     for (let day = 0; day <= 6; day++) {
       week.push(adapter.addDays(lastDay, day));
@@ -21713,6 +21718,7 @@ function useCalendar(props) {
     genDays,
     model,
     weeksInMonth,
+    weekDays,
     weekNumbers
   };
 }
@@ -21843,7 +21849,7 @@ const VDatePickerMonth = genericComponent()({
         "ref": daysRef,
         "key": daysInMonth.value[0].date?.toString(),
         "class": "v-date-picker-month__days"
-      }, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => createVNode("div", {
+      }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => createVNode("div", {
         "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
       }, [weekDay])), daysInMonth.value.map((item, i) => {
         const slotProps = {
@@ -22713,8 +22719,10 @@ const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
 const makeVExpansionPanelsProps = propsFactory({
   flat: Boolean,
   ...makeGroupProps(),
-  ...makeVExpansionPanelProps(),
+  ...pick(makeVExpansionPanelProps(), ['bgColor', 'collapseIcon', 'color', 'eager', 'elevation', 'expandIcon', 'focusable', 'hideActions', 'readonly', 'ripple', 'rounded', 'tile', 'static']),
   ...makeThemeProps(),
+  ...makeComponentProps(),
+  ...makeTagProps(),
   variant: {
     type: String,
     default: 'default',
@@ -24671,11 +24679,14 @@ const VRadio = genericComponent()({
     let {
       slots
     } = _ref;
-    useRender(() => createVNode(VSelectionControl, mergeProps(props, {
-      "class": ['v-radio', props.class],
-      "style": props.style,
-      "type": "radio"
-    }), slots));
+    useRender(() => {
+      const controlProps = VSelectionControl.filterProps(props);
+      return createVNode(VSelectionControl, mergeProps(controlProps, {
+        "class": ['v-radio', props.class],
+        "style": props.style,
+        "type": "radio"
+      }), slots);
+    });
     return {};
   }
 });
@@ -26998,8 +27009,8 @@ const makeVTextareaProps = propsFactory({
   },
   suffix: String,
   modelModifiers: Object,
-  ...makeVInputProps(),
-  ...makeVFieldProps()
+  ...omit(makeVInputProps(), ['centerAffix']),
+  ...omit(makeVFieldProps(), ['centerAffix'])
 }, 'VTextarea');
 const VTextarea = genericComponent()({
   name: 'VTextarea',
@@ -27138,7 +27149,7 @@ const VTextarea = genericComponent()({
         }, props.class],
         "style": props.style
       }, rootAttrs, inputProps, {
-        "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
+        "centerAffix": false,
         "focused": isFocused.value
       }), {
         ...slots,
@@ -27163,7 +27174,7 @@ const VTextarea = genericComponent()({
           }, fieldProps, {
             "id": id.value,
             "active": isActive.value || isDirty.value,
-            "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
+            "centerAffix": false,
             "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
@@ -28095,7 +28106,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.6.11";
+const version$1 = "3.6.12";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -28120,7 +28131,7 @@ const createVuetify = function () {
     ...options
   });
 };
-const version = "3.6.11";
+const version = "3.6.12";
 createVuetify.version = version;
 
 export { index as blueprints, components, createVuetify, directives, useDate, useDefaults, useDisplay, useGoTo, useLayout, useLocale, useRtl, useTheme, version };