@vuetify/nightly 3.6.11-master.2024-07-08 → 3.6.12-master.2024-07-11

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.6.11-master.2024-07-08
+* Vuetify v3.6.12-master.2024-07-11
 * 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,
@@ -11324,10 +11322,7 @@ const makeVFieldProps = propsFactory({
     default: '$clear'
   },
   active: Boolean,
-  centerAffix: {
-    type: Boolean,
-    default: undefined
-  },
+  centerAffix: Boolean,
   color: String,
   baseColor: String,
   dirty: Boolean,
@@ -11394,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`);
@@ -11484,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,
@@ -11493,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],
@@ -11728,7 +11724,6 @@ const VTextField = genericComponent()({
         }, props.class],
         "style": props.style
       }, rootAttrs, inputProps, {
-        "centerAffix": !isPlainOrUnderlined.value,
         "focused": isFocused.value
       }), {
         ...slots,
@@ -11754,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,
@@ -17271,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));
@@ -17305,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;
@@ -17348,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);
@@ -17747,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);
@@ -17810,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);
@@ -18092,6 +18090,7 @@ function createGroupBy(props) {
 }
 function provideGroupBy(options) {
   const {
+    disableSort,
     groupBy,
     sortBy
   } = options;
@@ -18100,7 +18099,7 @@ function provideGroupBy(options) {
     return groupBy.value.map(val => ({
       ...val,
       order: val.order ?? false
-    })).concat(sortBy.value);
+    })).concat(disableSort?.value ? [] : sortBy.value);
   });
   function isGroupOpen(group) {
     return opened.value.has(group.id);
@@ -18609,7 +18608,7 @@ function useSort() {
 function useSortedItems(props, items, sortBy, options) {
   const locale = useLocale();
   const sortedItems = computed(() => {
-    if (!sortBy.value.length || props.disableSort) return items.value;
+    if (!sortBy.value.length) return items.value;
     return sortItems(items.value, sortBy.value, locale.current.value, {
       transform: options?.transform,
       sortFunctions: {
@@ -19232,19 +19231,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: {
@@ -20361,6 +20360,9 @@ const VDataTable = genericComponent()({
       page,
       itemsPerPage
     } = createPagination(props);
+    const {
+      disableSort
+    } = toRefs(props);
     const {
       columns,
       headers,
@@ -20398,7 +20400,8 @@ const VDataTable = genericComponent()({
       toggleGroup
     } = provideGroupBy({
       groupBy,
-      sortBy
+      sortBy,
+      disableSort
     });
     const {
       sortedItems
@@ -20541,6 +20544,9 @@ const VDataTableVirtual = genericComponent()({
       multiSort,
       mustSort
     } = createSort(props);
+    const {
+      disableSort
+    } = toRefs(props);
     const {
       columns,
       headers,
@@ -20577,7 +20583,8 @@ const VDataTableVirtual = genericComponent()({
       toggleGroup
     } = provideGroupBy({
       groupBy,
-      sortBy
+      sortBy,
+      disableSort
     });
     const {
       sortedItems
@@ -20766,6 +20773,9 @@ const VDataTableServer = genericComponent()({
       page,
       itemsPerPage
     } = createPagination(props);
+    const {
+      disableSort
+    } = toRefs(props);
     const itemsLength = computed(() => parseInt(props.itemsLength, 10));
     const {
       columns,
@@ -20793,7 +20803,8 @@ const VDataTableServer = genericComponent()({
       extractRows
     } = provideGroupBy({
       groupBy,
-      sortBy
+      sortBy,
+      disableSort
     });
     const {
       pageCount,
@@ -21179,15 +21190,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,
@@ -21373,7 +21384,8 @@ const makeCalendarProps = propsFactory({
   weeksInMonth: {
     type: String,
     default: 'dynamic'
-  }
+  },
+  firstDayOfWeek: [Number, String]
 }, 'calendar');
 function useCalendar(props) {
   const adapter = useDate();
@@ -21394,8 +21406,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)
@@ -21416,7 +21432,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);
@@ -21444,7 +21460,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));
@@ -21482,6 +21498,7 @@ function useCalendar(props) {
     genDays,
     model,
     weeksInMonth,
+    weekDays,
     weekNumbers
   };
 }
@@ -21612,7 +21629,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 = {
@@ -24442,11 +24459,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 {};
   }
 });
@@ -26769,8 +26789,8 @@ const makeVTextareaProps = propsFactory({
   },
   suffix: String,
   modelModifiers: Object,
-  ...makeVInputProps(),
-  ...makeVFieldProps()
+  ...omit(makeVInputProps(), ['centerAffix']),
+  ...omit(makeVFieldProps(), ['centerAffix'])
 }, 'VTextarea');
 const VTextarea = genericComponent()({
   name: 'VTextarea',
@@ -26909,7 +26929,7 @@ const VTextarea = genericComponent()({
         }, props.class],
         "style": props.style
       }, rootAttrs, inputProps, {
-        "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
+        "centerAffix": false,
         "focused": isFocused.value
       }), {
         ...slots,
@@ -26934,7 +26954,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,
@@ -27786,7 +27806,8 @@ const VCalendar = genericComponent()({
       genDays,
       model,
       displayValue,
-      weekNumbers
+      weekNumbers,
+      weekDays
     } = useCalendar(props);
     const dayNames = adapter.getWeekdays();
     function onClickNext() {
@@ -27836,19 +27857,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,
@@ -28088,7 +28109,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);
@@ -28740,8 +28761,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 {
@@ -28989,8 +29010,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 {
@@ -29126,11 +29147,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 {
@@ -30261,7 +30282,7 @@ function createVuetify$1() {
     goTo
   };
 }
-const version$1 = "3.6.11-master.2024-07-08";
+const version$1 = "3.6.12-master.2024-07-11";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -30514,7 +30535,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.6.11-master.2024-07-08";
+const version = "3.6.12-master.2024-07-11";
 
 /* eslint-disable local-rules/sort-imports */