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

package/dist/vuetify-labs.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.
 */
@@ -4980,6 +4980,7 @@
       const normalizedValue = vue.computed(() => clamp(parseFloat(progress.value) / max.value * 100, 0, 100));
       const isReversed = vue.computed(() => isRtl.value !== props.reverse);
       const transition = vue.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 {
@@ -5027,13 +5028,13 @@
             '--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1))
           }
         }, null), vue.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), vue.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, '%')
@@ -5042,7 +5043,7 @@
           "name": transition.value
         }, {
           default: () => [!props.indeterminate ? vue.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, '%')
             }]
@@ -5050,7 +5051,7 @@
             "class": "v-progress-linear__indeterminate"
           }, [['long', 'short'].map(bar => vue.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 && vue.createVNode("div", {
@@ -6810,10 +6811,7 @@
   const makeVInputProps = propsFactory({
     id: String,
     appendIcon: IconValue,
-    centerAffix: {
-      type: Boolean,
-      default: true
-    },
+    centerAffix: Boolean,
     prependIcon: IconValue,
     hideDetails: [Boolean, String],
     hideSpinButtons: Boolean,
@@ -11328,10 +11326,7 @@
       default: '$clear'
     },
     active: Boolean,
-    centerAffix: {
-      type: Boolean,
-      default: undefined
-    },
+    centerAffix: Boolean,
     color: String,
     baseColor: String,
     dirty: Boolean,
@@ -11398,8 +11393,9 @@
       const {
         rtlClasses
       } = useRtl();
+      const isSingleLine = vue.computed(() => props.singleLine || props.centerAffix);
       const isActive = vue.computed(() => props.dirty || props.active);
-      const hasLabel = vue.computed(() => !props.singleLine && !!(props.label || slots.label));
+      const hasLabel = vue.computed(() => !isSingleLine.value && !!(props.label || slots.label));
       const uid = getUid();
       const id = vue.computed(() => props.id || `input-${uid}`);
       const messagesId = vue.computed(() => `${id.value}-messages`);
@@ -11488,7 +11484,7 @@
           "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,
@@ -11497,7 +11493,7 @@
             '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],
@@ -11732,7 +11728,6 @@
           }, props.class],
           "style": props.style
         }, rootAttrs, inputProps, {
-          "centerAffix": !isPlainOrUnderlined.value,
           "focused": isFocused.value
         }), {
           ...slots,
@@ -11758,6 +11753,7 @@
               "dirty": isDirty.value || props.dirty,
               "disabled": isDisabled.value,
               "focused": isFocused.value,
+              "centerAffix": props.centerAffix,
               "error": isValid.value === false
             }), {
               ...slots,
@@ -17275,13 +17271,14 @@
     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));
@@ -17309,9 +17306,10 @@
     }
     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;
@@ -17352,8 +17350,8 @@
     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);
@@ -17751,11 +17749,11 @@
     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);
@@ -17814,8 +17812,8 @@
     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);
@@ -18096,6 +18094,7 @@
   }
   function provideGroupBy(options) {
     const {
+      disableSort,
       groupBy,
       sortBy
     } = options;
@@ -18104,7 +18103,7 @@
       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);
@@ -18613,7 +18612,7 @@
   function useSortedItems(props, items, sortBy, options) {
     const locale = useLocale();
     const sortedItems = vue.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: {
@@ -19236,19 +19235,19 @@
 
   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: {
@@ -20365,6 +20364,9 @@
         page,
         itemsPerPage
       } = createPagination(props);
+      const {
+        disableSort
+      } = vue.toRefs(props);
       const {
         columns,
         headers,
@@ -20402,7 +20404,8 @@
         toggleGroup
       } = provideGroupBy({
         groupBy,
-        sortBy
+        sortBy,
+        disableSort
       });
       const {
         sortedItems
@@ -20545,6 +20548,9 @@
         multiSort,
         mustSort
       } = createSort(props);
+      const {
+        disableSort
+      } = vue.toRefs(props);
       const {
         columns,
         headers,
@@ -20581,7 +20587,8 @@
         toggleGroup
       } = provideGroupBy({
         groupBy,
-        sortBy
+        sortBy,
+        disableSort
       });
       const {
         sortedItems
@@ -20770,6 +20777,9 @@
         page,
         itemsPerPage
       } = createPagination(props);
+      const {
+        disableSort
+      } = vue.toRefs(props);
       const itemsLength = vue.computed(() => parseInt(props.itemsLength, 10));
       const {
         columns,
@@ -20797,7 +20807,8 @@
         extractRows
       } = provideGroupBy({
         groupBy,
-        sortBy
+        sortBy,
+        disableSort
       });
       const {
         pageCount,
@@ -21183,15 +21194,15 @@
       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,
@@ -21377,7 +21388,8 @@
     weeksInMonth: {
       type: String,
       default: 'dynamic'
-    }
+    },
+    firstDayOfWeek: [Number, String]
   }, 'calendar');
   function useCalendar(props) {
     const adapter = useDate();
@@ -21398,8 +21410,12 @@
       const date = adapter.setYear(adapter.startOfMonth(adapter.date()), adapter.getYear(year.value));
       return adapter.setMonth(date, value);
     }, v => adapter.getMonth(v));
+    const weekDays = vue.computed(() => {
+      const firstDayOfWeek = Number(props.firstDayOfWeek ?? 0);
+      return props.weekdays.map(day => (day + firstDayOfWeek) % 7);
+    });
     const weeksInMonth = vue.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)
@@ -21420,7 +21436,7 @@
     });
     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);
@@ -21448,7 +21464,7 @@
       });
     }
     const daysInWeek = vue.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));
@@ -21486,6 +21502,7 @@
       genDays,
       model,
       weeksInMonth,
+      weekDays,
       weekNumbers
     };
   }
@@ -21616,7 +21633,7 @@
           "ref": daysRef,
           "key": daysInMonth.value[0].date?.toString(),
           "class": "v-date-picker-month__days"
-        }, [!props.hideWeekdays && adapter.getWeekdays().map(weekDay => vue.createVNode("div", {
+        }, [!props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => vue.createVNode("div", {
           "class": ['v-date-picker-month__day', 'v-date-picker-month__weekday']
         }, [weekDay])), daysInMonth.value.map((item, i) => {
           const slotProps = {
@@ -24446,11 +24463,14 @@
       let {
         slots
       } = _ref;
-      useRender(() => vue.createVNode(VSelectionControl, vue.mergeProps(props, {
-        "class": ['v-radio', props.class],
-        "style": props.style,
-        "type": "radio"
-      }), slots));
+      useRender(() => {
+        const controlProps = VSelectionControl.filterProps(props);
+        return vue.createVNode(VSelectionControl, vue.mergeProps(controlProps, {
+          "class": ['v-radio', props.class],
+          "style": props.style,
+          "type": "radio"
+        }), slots);
+      });
       return {};
     }
   });
@@ -26773,8 +26793,8 @@
     },
     suffix: String,
     modelModifiers: Object,
-    ...makeVInputProps(),
-    ...makeVFieldProps()
+    ...omit(makeVInputProps(), ['centerAffix']),
+    ...omit(makeVFieldProps(), ['centerAffix'])
   }, 'VTextarea');
   const VTextarea = genericComponent()({
     name: 'VTextarea',
@@ -26913,7 +26933,7 @@
           }, props.class],
           "style": props.style
         }, rootAttrs, inputProps, {
-          "centerAffix": rows.value === 1 && !isPlainOrUnderlined.value,
+          "centerAffix": false,
           "focused": isFocused.value
         }), {
           ...slots,
@@ -26938,7 +26958,7 @@
             }, 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,
@@ -27790,7 +27810,8 @@
         genDays,
         model,
         displayValue,
-        weekNumbers
+        weekNumbers,
+        weekDays
       } = useCalendar(props);
       const dayNames = adapter.getWeekdays();
       function onClickNext() {
@@ -27840,19 +27861,19 @@
         }), null) : slots.header({
           title: title.value
         }))]), vue.createVNode("div", {
-          "class": ['v-calendar__container', `days__${props.weekdays.length}`]
+          "class": ['v-calendar__container', `days__${weekDays.value.length}`]
         }, [props.viewMode === 'month' && !props.hideDayHeader && vue.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 ? vue.createVNode("div", {
           "key": "weekNumber0",
           "class": "v-calendar-weekly__head-weeknumber"
-        }, null) : '', props.weekdays.map(weekday => vue.createVNode("div", {
+        }, null) : '', weekDays.value.map(weekday => vue.createVNode("div", {
           "class": `v-calendar-weekly__head-weekday${!props.hideWeekNumber ? '-with-weeknumber' : ''}`
         }, [dayNames[weekday]]))]), props.viewMode === 'month' && vue.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 ? vue.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 ? vue.createVNode("div", {
           "class": "v-calendar-month__weeknumber"
         }, [weekNumbers.value[wi]]) : '', week.map(day => vue.createVNode(VCalendarMonthDay, {
           "color": adapter.isSameDay(adapter.date(), day.date) ? 'primary' : undefined,
@@ -28092,7 +28113,7 @@
         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);
@@ -28744,8 +28765,8 @@
     name: 'VTimePickerClock',
     props: makeVTimePickerClockProps(),
     emits: {
-      change: val => val,
-      input: val => val
+      change: val => true,
+      input: val => true
     },
     setup(props, _ref) {
       let {
@@ -28993,8 +29014,8 @@
     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 {
@@ -29130,11 +29151,11 @@
     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 {
@@ -30265,7 +30286,7 @@
       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
@@ -30518,7 +30539,7 @@
 
   /* 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 */