vuetify 3.6.11 → 3.6.12

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.11
+* Vuetify v3.6.12
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -4976,6 +4976,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 {
@@ -5023,13 +5024,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, '%')
@@ -5038,7 +5039,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, '%')
           }]
@@ -5046,7 +5047,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", {
@@ -6806,10 +6807,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,
@@ -10600,12 +10598,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) {
@@ -10826,10 +10821,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);
@@ -11322,10 +11322,7 @@ const makeVFieldProps = propsFactory({
     default: '$clear'
   },
   active: Boolean,
-  centerAffix: {
-    type: Boolean,
-    default: undefined
-  },
+  centerAffix: Boolean,
   color: String,
   baseColor: String,
   dirty: Boolean,
@@ -11392,8 +11389,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`);
@@ -11482,7 +11480,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,
@@ -11491,7 +11489,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],
@@ -11726,7 +11724,6 @@ const VTextField = genericComponent()({
         }, props.class],
         "style": props.style
       }, rootAttrs, inputProps, {
-        "centerAffix": !isPlainOrUnderlined.value,
         "focused": isFocused.value
       }), {
         ...slots,
@@ -11752,6 +11749,7 @@ const VTextField = genericComponent()({
             "dirty": isDirty.value || props.dirty,
             "disabled": isDisabled.value,
             "focused": isFocused.value,
+            "centerAffix": props.centerAffix,
             "error": isValid.value === false
           }), {
             ...slots,
@@ -17269,13 +17267,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));
@@ -17303,9 +17302,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;
@@ -17346,8 +17346,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);
@@ -17745,11 +17745,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);
@@ -17808,8 +17808,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);
@@ -19230,19 +19230,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: {
@@ -21177,15 +21177,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,
@@ -21371,7 +21371,8 @@ const makeCalendarProps = propsFactory({
   weeksInMonth: {
     type: String,
     default: 'dynamic'
-  }
+  },
+  firstDayOfWeek: [Number, String]
 }, 'calendar');
 function useCalendar(props) {
   const adapter = useDate();
@@ -21392,8 +21393,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)
@@ -21414,7 +21419,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);
@@ -21442,7 +21447,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));
@@ -21480,6 +21485,7 @@ function useCalendar(props) {
     genDays,
     model,
     weeksInMonth,
+    weekDays,
     weekNumbers
   };
 }
@@ -21610,7 +21616,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 = {
@@ -22480,8 +22486,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',
@@ -24438,11 +24446,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 {};
   }
 });
@@ -26765,8 +26776,8 @@ const makeVTextareaProps = propsFactory({
   },
   suffix: String,
   modelModifiers: Object,
-  ...makeVInputProps(),
-  ...makeVFieldProps()
+  ...omit(makeVInputProps(), ['centerAffix']),
+  ...omit(makeVFieldProps(), ['centerAffix'])
 }, 'VTextarea');
 const VTextarea = genericComponent()({
   name: 'VTextarea',
@@ -26905,7 +26916,7 @@ const VTextarea = genericComponent()({
         }, props.class],
         "style": props.style
       }, rootAttrs, inputProps, {
-        "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
+        "centerAffix": false,
         "focused": isFocused.value
       }), {
         ...slots,
@@ -26930,7 +26941,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,
@@ -27782,7 +27793,8 @@ const VCalendar = genericComponent()({
       genDays,
       model,
       displayValue,
-      weekNumbers
+      weekNumbers,
+      weekDays
     } = useCalendar(props);
     const dayNames = adapter.getWeekdays();
     function onClickNext() {
@@ -27832,19 +27844,19 @@ const VCalendar = genericComponent()({
       }), null) : slots.header({
         title: title.value
       }))]), createVNode("div", {
-        "class": ['v-calendar__container', `days__${props.weekdays.length}`]
+        "class": ['v-calendar__container', `days__${weekDays.value.length}`]
       }, [props.viewMode === 'month' && !props.hideDayHeader && createVNode("div", {
-        "class": ['v-calendar-weekly__head', `days__${props.weekdays.length}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])],
+        "class": ['v-calendar-weekly__head', `days__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-weekly__head-weeknumbers'] : [])],
         "key": "calenderWeeklyHead"
       }, [!props.hideWeekNumber ? createVNode("div", {
         "key": "weekNumber0",
         "class": "v-calendar-weekly__head-weeknumber"
-      }, null) : '', props.weekdays.map(weekday => createVNode("div", {
+      }, null) : '', weekDays.value.map(weekday => createVNode("div", {
         "class": `v-calendar-weekly__head-weekday${!props.hideWeekNumber ? '-with-weeknumber' : ''}`
       }, [dayNames[weekday]]))]), props.viewMode === 'month' && createVNode("div", {
         "key": "VCalendarMonth",
-        "class": ['v-calendar-month__days', `days${!props.hideWeekNumber ? '-with-weeknumbers' : ''}__${props.weekdays.length}`, ...(!props.hideWeekNumber ? ['v-calendar-month__weeknumbers'] : [])]
-      }, [chunkArray(daysInMonth.value, props.weekdays.length).map((week, wi) => [!props.hideWeekNumber ? createVNode("div", {
+        "class": ['v-calendar-month__days', `days${!props.hideWeekNumber ? '-with-weeknumbers' : ''}__${weekDays.value.length}`, ...(!props.hideWeekNumber ? ['v-calendar-month__weeknumbers'] : [])]
+      }, [chunkArray(daysInMonth.value, weekDays.value.length).map((week, wi) => [!props.hideWeekNumber ? createVNode("div", {
         "class": "v-calendar-month__weeknumber"
       }, [weekNumbers.value[wi]]) : '', week.map(day => createVNode(VCalendarMonthDay, {
         "color": adapter.isSameDay(adapter.date(), day.date) ? 'primary' : undefined,
@@ -28084,7 +28096,7 @@ const VNumberInput = genericComponent()({
       toggleUpDown(false);
     }
     function onKeydown(e) {
-      if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Tab'].includes(e.key) || e.ctrlKey) return;
+      if (['Enter', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Tab'].includes(e.key) || e.ctrlKey) return;
       if (['ArrowDown'].includes(e.key)) {
         e.preventDefault();
         toggleUpDown(false);
@@ -28736,8 +28748,8 @@ const VTimePickerClock = genericComponent()({
   name: 'VTimePickerClock',
   props: makeVTimePickerClockProps(),
   emits: {
-    change: val => val,
-    input: val => val
+    change: val => true,
+    input: val => true
   },
   setup(props, _ref) {
     let {
@@ -28985,8 +28997,8 @@ const VTimePickerControls = genericComponent()({
   name: 'VTimePickerControls',
   props: makeVTimePickerControlsProps(),
   emits: {
-    'update:period': data => data,
-    'update:selecting': data => data
+    'update:period': data => true,
+    'update:selecting': data => true
   },
   setup(props, _ref) {
     let {
@@ -29122,11 +29134,11 @@ const VTimePicker = genericComponent()({
   name: 'VTimePicker',
   props: makeVTimePickerProps(),
   emits: {
-    'update:hour': val => val,
-    'update:minute': val => val,
-    'update:period': val => val,
-    'update:second': val => val,
-    'update:modelValue': val => val
+    'update:hour': val => true,
+    'update:minute': val => true,
+    'update:period': val => true,
+    'update:second': val => true,
+    'update:modelValue': val => true
   },
   setup(props, _ref) {
     let {
@@ -30257,7 +30269,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
@@ -30510,7 +30522,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.6.11";
+const version = "3.6.12";
 
 /* eslint-disable local-rules/sort-imports */