vuetify 3.8.0-beta.0 → 3.8.0

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.0-beta.0
+* Vuetify v3.8.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -229,7 +229,7 @@ function has(obj, key) {
 function pick(obj, paths) {
   const found = {};
   for (const key of paths) {
-    if (Object.hasOwn(obj, key)) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
       found[key] = obj[key];
     }
   }
@@ -4663,6 +4663,7 @@ const makeVIconProps = propsFactory({
   start: Boolean,
   end: Boolean,
   icon: IconValue,
+  opacity: [String, Number],
   ...makeComponentProps(),
   ...makeSizeProps(),
   ...makeTagProps({
@@ -4681,7 +4682,7 @@ const VIcon = genericComponent()({
     const slotIcon = ref();
     const {
       themeClasses
-    } = provideTheme(props);
+    } = useTheme();
     const {
       iconData
     } = useIcon(computed(() => slotIcon.value || props.icon));
@@ -4707,7 +4708,9 @@ const VIcon = genericComponent()({
           'v-icon--start': props.start,
           'v-icon--end': props.end
         }, props.class],
-        "style": [!sizeClasses.value ? {
+        "style": [{
+          '--v-icon-opacity': props.opacity
+        }, !sizeClasses.value ? {
           fontSize: convertToUnit(props.size),
           height: convertToUnit(props.size),
           width: convertToUnit(props.size)
@@ -11863,7 +11866,11 @@ const VField = genericComponent()({
         },
         focus,
         blur
-      })]), hasClear && createVNode(VExpandXTransition, {
+      }) ?? createVNode("div", {
+        "id": id.value,
+        "class": "v-field__input",
+        "aria-describedby": messagesId.value
+      }, null)]), hasClear && createVNode(VExpandXTransition, {
         "key": "clear"
       }, {
         default: () => [withDirectives(createVNode("div", {
@@ -13395,12 +13402,7 @@ const VAutocomplete = genericComponent()({
       } else {
         if (!props.multiple && search.value == null) model.value = [];
         menu.value = false;
-        if (!model.value.some(_ref3 => {
-          let {
-            title
-          } = _ref3;
-          return title === search.value;
-        })) search.value = '';
+        if (props.multiple || hasSelectionSlot.value) search.value = '';
         selectionIndex.value = -1;
       }
     });
@@ -13488,12 +13490,12 @@ const VAutocomplete = genericComponent()({
               "items": displayItems.value,
               "itemKey": "value"
             }, {
-              default: _ref4 => {
+              default: _ref3 => {
                 let {
                   item,
                   index,
                   itemRef
-                } = _ref4;
+                } = _ref3;
                 const itemProps = mergeProps(item.props, {
                   ref: itemRef,
                   key: item.value,
@@ -13507,10 +13509,10 @@ const VAutocomplete = genericComponent()({
                 }) ?? createVNode(VListItem, mergeProps(itemProps, {
                   "role": "option"
                 }), {
-                  prepend: _ref5 => {
+                  prepend: _ref4 => {
                     let {
                       isSelected
-                    } = _ref5;
+                    } = _ref4;
                     return createVNode(Fragment, null, [props.multiple && !props.hideSelected ? createVNode(VCheckboxBtn, {
                       "key": item.value,
                       "modelValue": isSelected,
@@ -16379,7 +16381,7 @@ const VColorPickerPreview = defineComponent({
     const abortController = new AbortController();
     onUnmounted(() => abortController.abort());
     async function openEyeDropper() {
-      if (!SUPPORTS_EYE_DROPPER) return;
+      if (!SUPPORTS_EYE_DROPPER || props.disabled) return;
       const eyeDropper = new window.EyeDropper();
       try {
         const result = await eyeDropper.open({
@@ -16401,10 +16403,11 @@ const VColorPickerPreview = defineComponent({
       "class": "v-color-picker-preview__eye-dropper",
       "key": "eyeDropper"
     }, [createVNode(VBtn, {
-      "onClick": openEyeDropper,
+      "density": "comfortable",
+      "disabled": props.disabled,
       "icon": "$eyeDropper",
       "variant": "plain",
-      "density": "comfortable"
+      "onClick": openEyeDropper
     }, null)]), createVNode("div", {
       "class": "v-color-picker-preview__dot"
     }, [createVNode("div", {
@@ -18432,6 +18435,10 @@ const makeVConfirmEditProps = propsFactory({
     type: String,
     default: '$vuetify.confirmEdit.ok'
   },
+  disabled: {
+    type: [Boolean, Array],
+    default: undefined
+  },
   hideActions: Boolean
 }, 'VConfirmEdit');
 const VConfirmEdit = genericComponent()({
@@ -18458,6 +18465,17 @@ const VConfirmEdit = genericComponent()({
     const isPristine = computed(() => {
       return deepEqual(model.value, internalModel.value);
     });
+    function isActionDisabled(action) {
+      if (typeof props.disabled === 'boolean') {
+        return props.disabled;
+      }
+      if (Array.isArray(props.disabled)) {
+        return props.disabled.includes(action);
+      }
+      return isPristine.value;
+    }
+    const isSaveDisabled = computed(() => isActionDisabled('save'));
+    const isCancelDisabled = computed(() => isActionDisabled('cancel'));
     function save() {
       model.value = internalModel.value;
       emit('save', internalModel.value);
@@ -18468,13 +18486,13 @@ const VConfirmEdit = genericComponent()({
     }
     function actions(actionsProps) {
       return createVNode(Fragment, null, [createVNode(VBtn, mergeProps({
-        "disabled": isPristine.value,
+        "disabled": isCancelDisabled.value,
         "variant": "text",
         "color": props.color,
         "onClick": cancel,
         "text": t(props.cancelText)
       }, actionsProps), null), createVNode(VBtn, mergeProps({
-        "disabled": isPristine.value,
+        "disabled": isSaveDisabled.value,
         "variant": "text",
         "color": props.color,
         "onClick": save,
@@ -20560,22 +20578,37 @@ const VDataTableRow = genericComponent()({
         "width": !mobile.value ? column.width : undefined
       }, cellProps, columnCellProps), {
         default: () => {
-          if (slots[slotName] && !mobile.value) return slots[slotName]?.(slotProps);
           if (column.key === 'data-table-select') {
-            return slots['item.data-table-select']?.(slotProps) ?? createVNode(VCheckboxBtn, {
+            return slots['item.data-table-select']?.({
+              ...slotProps,
+              props: {
+                disabled: !item.selectable,
+                modelValue: isSelected([item]),
+                onClick: withModifiers(() => toggleSelect(item), ['stop'])
+              }
+            }) ?? createVNode(VCheckboxBtn, {
               "disabled": !item.selectable,
               "modelValue": isSelected([item]),
               "onClick": withModifiers(event => toggleSelect(item, props.index, event), ['stop'])
             }, null);
           }
           if (column.key === 'data-table-expand') {
-            return slots['item.data-table-expand']?.(slotProps) ?? createVNode(VBtn, {
+            return slots['item.data-table-expand']?.({
+              ...slotProps,
+              props: {
+                icon: isExpanded(item) ? '$collapse' : '$expand',
+                size: 'small',
+                variant: 'text',
+                onClick: withModifiers(() => toggleExpand(item), ['stop'])
+              }
+            }) ?? createVNode(VBtn, {
               "icon": isExpanded(item) ? '$collapse' : '$expand',
               "size": "small",
               "variant": "text",
               "onClick": withModifiers(() => toggleExpand(item), ['stop'])
             }, null);
           }
+          if (slots[slotName] && !mobile.value) return slots[slotName](slotProps);
           const displayValue = toDisplayString(slotProps.value);
           return !mobile.value ? displayValue : createVNode(Fragment, null, [createVNode("div", {
             "class": "v-data-table__td-title"
@@ -21914,11 +21947,14 @@ const makeCalendarProps = propsFactory({
     type: String,
     default: 'dynamic'
   },
-  firstDayOfWeek: [Number, String]
+  firstDayOfWeek: {
+    type: [Number, String],
+    default: 0
+  }
 }, 'calendar');
 function useCalendar(props) {
   const adapter = useDate();
-  const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v));
+  const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v).map(i => adapter.date(i)));
   const displayValue = computed(() => {
     if (props.displayValue) return adapter.date(props.displayValue);
     if (model.value.length > 0) return adapter.date(model.value[0]);
@@ -21935,15 +21971,15 @@ 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 defaultFirstDayOfWeek = computed(() => {
-    return props.firstDayOfWeek ?? props.weekdays[0];
-  });
   const weekDays = computed(() => {
-    const firstDayOfWeek = Number(props.firstDayOfWeek ?? 0);
-    return props.weekdays.map(day => (day + firstDayOfWeek) % 7);
+    const firstDayOfWeek = Number(props.firstDayOfWeek);
+
+    // 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 weeks = adapter.getWeekArray(month.value, defaultFirstDayOfWeek.value);
+    const firstDayOfWeek = Number(props.firstDayOfWeek);
+    const weeks = adapter.getWeekArray(month.value, firstDayOfWeek);
     const days = weeks.flat();
 
     // Make sure there's always 6 weeks in month (6 * 7 days)
@@ -22021,7 +22057,7 @@ function useCalendar(props) {
     if (typeof props.allowedDates === 'function') {
       return !props.allowedDates(date);
     }
-    return false;
+    return !props.weekdays.includes(adapter.toJsDate(date).getDay());
   }
   return {
     displayValue,
@@ -22431,7 +22467,7 @@ const VDatePicker = genericComponent()({
     const {
       rtlClasses
     } = useRtl();
-    const model = useProxiedModel(props, 'modelValue', undefined, v => wrapInArray(v), v => props.multiple ? v : v[0]);
+    const model = useProxiedModel(props, 'modelValue', undefined, v => wrapInArray(v).map(i => adapter.date(i)), v => props.multiple ? v : v[0]);
     const viewMode = useProxiedModel(props, 'viewMode');
     // const inputMode = useProxiedModel(props, 'inputMode')
 
@@ -22756,7 +22792,9 @@ const VEmptyState = genericComponent()({
           VBtn: {
             class: 'v-empty-state__action-btn',
             color: props.color ?? 'surface-variant',
-            text: props.actionText
+            href: props.href,
+            text: props.actionText,
+            to: props.to
           }
         }
       }, {
@@ -28909,12 +28947,16 @@ const VCalendar = genericComponent()({
 // Types
 
 const makeVDateInputProps = propsFactory({
+  displayFormat: [Function, String],
   location: {
     type: String,
     default: 'bottom start'
   },
+  ...makeDisplayProps(),
   ...makeFocusProps(),
-  ...makeVConfirmEditProps(),
+  ...makeVConfirmEditProps({
+    hideActions: true
+  }),
   ...makeVTextFieldProps({
     placeholder: 'mm/dd/yyyy',
     prependIcon: '$calendar'
@@ -28928,16 +28970,22 @@ const VDateInput = genericComponent()({
   name: 'VDateInput',
   props: makeVDateInputProps(),
   emits: {
+    save: value => true,
+    cancel: () => true,
     'update:modelValue': val => true
   },
   setup(props, _ref) {
     let {
+      emit,
       slots
     } = _ref;
     const {
       t
     } = useLocale();
     const adapter = useDate();
+    const {
+      mobile
+    } = useDisplay(props);
     const {
       isFocused,
       focus,
@@ -28945,7 +28993,15 @@ const VDateInput = genericComponent()({
     } = useFocus(props);
     const model = useProxiedModel(props, 'modelValue', props.multiple ? [] : null, val => Array.isArray(val) ? val.map(item => adapter.toJsDate(item)) : val ? adapter.toJsDate(val) : val, val => Array.isArray(val) ? val.map(item => adapter.date(item)) : val ? adapter.date(val) : val);
     const menu = shallowRef(false);
+    const isEditingInput = shallowRef(false);
     const vDateInputRef = ref();
+    const disabledActions = ref(['save']);
+    function format(date) {
+      if (typeof props.displayFormat === 'function') {
+        return props.displayFormat(date);
+      }
+      return adapter.format(date, props.displayFormat ?? 'keyboardDate');
+    }
     const display = computed(() => {
       const value = wrapInArray(model.value);
       if (!value.length) return null;
@@ -28955,11 +29011,23 @@ const VDateInput = genericComponent()({
       if (props.multiple === 'range') {
         const start = value[0];
         const end = value[value.length - 1];
-        return adapter.isValid(start) && adapter.isValid(end) ? `${adapter.format(adapter.date(start), 'keyboardDate')} - ${adapter.format(adapter.date(end), 'keyboardDate')}` : '';
+        if (!adapter.isValid(start) || !adapter.isValid(end)) return '';
+        return `${format(adapter.date(start))} - ${format(adapter.date(end))}`;
       }
-      return adapter.isValid(model.value) ? adapter.format(adapter.date(model.value), 'keyboardDate') : '';
+      return adapter.isValid(model.value) ? format(adapter.date(model.value)) : '';
+    });
+    const inputmode = computed(() => {
+      if (!mobile.value) return undefined;
+      if (isEditingInput.value) return 'text';
+      return 'none';
     });
     const isInteractive = computed(() => !props.disabled && !props.readonly);
+    const isReadonly = computed(() => !(mobile.value && isEditingInput.value) && props.readonly);
+    watch(menu, val => {
+      if (val) return;
+      isEditingInput.value = false;
+      disabledActions.value = ['save'];
+    });
     function onKeydown(e) {
       if (e.key !== 'Enter') return;
       if (!menu.value || !isFocused.value) {
@@ -28967,20 +29035,39 @@ const VDateInput = genericComponent()({
         return;
       }
       const target = e.target;
-      model.value = target.value === '' ? null : target.value;
+      model.value = adapter.isValid(target.value) ? target.value : null;
     }
     function onClick(e) {
       e.preventDefault();
       e.stopPropagation();
-      menu.value = true;
+      if (menu.value && mobile.value) {
+        isEditingInput.value = true;
+      } else {
+        menu.value = true;
+      }
     }
-    function onSave() {
+    function onCancel() {
+      emit('cancel');
       menu.value = false;
+      isEditingInput.value = false;
     }
-    function onUpdateModel(value) {
+    function onSave(value) {
+      emit('save', value);
+      menu.value = false;
+    }
+    function onUpdateDisplayModel(value) {
       if (value != null) return;
       model.value = null;
     }
+    function onBlur() {
+      blur();
+
+      // When in mobile mode and editing is done (due to keyboard dismissal), close the menu
+      if (mobile.value && isEditingInput.value && !isFocused.value) {
+        menu.value = false;
+        isEditingInput.value = false;
+      }
+    }
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props);
       const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']));
@@ -28991,13 +29078,15 @@ const VDateInput = genericComponent()({
         "class": props.class,
         "style": props.style,
         "modelValue": display.value,
+        "inputmode": inputmode.value,
+        "readonly": isReadonly.value,
         "onKeydown": isInteractive.value ? onKeydown : undefined,
         "focused": menu.value || isFocused.value,
         "onFocus": focus,
-        "onBlur": blur,
+        "onBlur": onBlur,
         "onClick:control": isInteractive.value ? onClick : undefined,
         "onClick:prepend": isInteractive.value ? onClick : undefined,
-        "onUpdate:modelValue": onUpdateModel
+        "onUpdate:modelValue": onUpdateDisplayModel
       }), {
         ...slots,
         default: () => createVNode(Fragment, null, [createVNode(VMenu, {
@@ -29013,8 +29102,9 @@ const VDateInput = genericComponent()({
           default: () => [createVNode(VConfirmEdit, mergeProps(confirmEditProps, {
             "modelValue": model.value,
             "onUpdate:modelValue": $event => model.value = $event,
+            "disabled": disabledActions.value,
             "onSave": onSave,
-            "onCancel": () => menu.value = false
+            "onCancel": onCancel
           }), {
             default: _ref2 => {
               let {
@@ -29024,16 +29114,21 @@ const VDateInput = genericComponent()({
                 cancel,
                 isPristine
               } = _ref2;
+              function onUpdateModel(value) {
+                if (!props.hideActions) {
+                  proxyModel.value = value;
+                } else {
+                  model.value = value;
+                  if (!props.multiple) {
+                    menu.value = false;
+                  }
+                }
+                emit('save', value);
+                disabledActions.value = [];
+              }
               return createVNode(VDatePicker, mergeProps(datePickerProps, {
                 "modelValue": props.hideActions ? model.value : proxyModel.value,
-                "onUpdate:modelValue": val => {
-                  if (!props.hideActions) {
-                    proxyModel.value = val;
-                  } else {
-                    model.value = val;
-                    if (!props.multiple) menu.value = false;
-                  }
-                },
+                "onUpdate:modelValue": value => onUpdateModel(value),
                 "onMousedown": e => e.preventDefault()
               }), {
                 actions: !props.hideActions ? () => slots.actions?.({
@@ -29276,7 +29371,8 @@ const VFileUpload = genericComponent()({
           'v-file-upload--clickable': !hasBrowse,
           'v-file-upload--disabled': props.disabled,
           'v-file-upload--dragging': dragOver.value
-        }, densityClasses.value],
+        }, densityClasses.value, props.class],
+        "style": [props.style],
         "onDragleave": onDragLeave,
         "onDragover": onDragOver,
         "onDrop": onDrop,
@@ -29367,6 +29463,174 @@ const VFileUpload = genericComponent()({
 
 // Types
 
+const makeVIconBtnProps = propsFactory({
+  active: {
+    type: Boolean,
+    default: undefined
+  },
+  activeColor: String,
+  activeIcon: [String, Function, Object],
+  activeVariant: String,
+  baseVariant: {
+    type: String,
+    default: 'tonal'
+  },
+  disabled: Boolean,
+  height: [Number, String],
+  width: [Number, String],
+  hideOverlay: Boolean,
+  icon: [String, Function, Object],
+  iconColor: String,
+  iconSize: {
+    type: [Number, String],
+    default: 'default'
+  },
+  iconSizes: {
+    type: Array,
+    default: () => [['x-small', 10], ['small', 16], ['default', 24], ['large', 28], ['x-large', 32]]
+  },
+  loading: Boolean,
+  opacity: [Number, String],
+  readonly: Boolean,
+  rotate: [Number, String],
+  size: {
+    type: [Number, String],
+    default: 'default'
+  },
+  sizes: {
+    type: Array,
+    default: () => [['x-small', 16], ['small', 24], ['default', 40], ['large', 48], ['x-large', 56]]
+  },
+  text: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  ...makeBorderProps(),
+  ...makeComponentProps(),
+  ...makeElevationProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps({
+    tag: 'button'
+  }),
+  ...makeThemeProps(),
+  ...makeVariantProps({
+    variant: 'flat'
+  })
+}, 'VIconBtn');
+const VIconBtn = genericComponent()({
+  name: 'VIconBtn',
+  props: makeVIconBtnProps(),
+  emits: {
+    'update:active': value => true
+  },
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'active');
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      borderClasses
+    } = useBorder(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(toRef(() => ({
+      color: (() => {
+        if (props.disabled) return undefined;
+        if (!isActive.value) return props.color;
+        // Use an inline fallback as opposed to setting a default color
+        // because non-toggle buttons are default flat whereas toggle
+        // buttons are default tonal and active flat. The exact use
+        // case for this is a toggle button with no active color.
+        return props.activeColor ?? props.color ?? 'surface-variant';
+      })(),
+      variant: (() => {
+        if (isActive.value === undefined) return props.variant;
+        if (isActive.value) return props.activeVariant ?? props.variant;
+        return props.baseVariant ?? props.variant;
+      })()
+    })));
+    const btnSizeMap = new Map(props.sizes);
+    const iconSizeMap = new Map(props.iconSizes);
+    function onClick() {
+      if (props.disabled || props.readonly || isActive.value === undefined || props.tag === 'a' && attrs.href) return;
+      isActive.value = !isActive.value;
+    }
+    useRender(() => {
+      const icon = isActive.value ? props.activeIcon ?? props.icon : props.icon;
+      const size = props.size;
+      const hasNamedSize = btnSizeMap.has(size);
+      const btnSize = hasNamedSize ? btnSizeMap.get(size) : size;
+      const btnHeight = props.height ?? btnSize;
+      const btnWidth = props.width ?? btnSize;
+      const _iconSize = hasNamedSize ? size : props.iconSize ?? size;
+      const iconSize = iconSizeMap.get(_iconSize) ?? _iconSize;
+      const iconProps = {
+        icon,
+        size: iconSize,
+        iconColor: props.iconColor,
+        opacity: props.opacity
+      };
+      return createVNode(props.tag, {
+        "class": [{
+          'v-icon-btn': true,
+          'v-icon-btn--active': isActive.value,
+          'v-icon-btn--disabled': props.disabled,
+          'v-icon-btn--loading': props.loading,
+          'v-icon-btn--readonly': props.readonly,
+          [`v-icon-btn--${props.size}`]: true
+        }, themeClasses.value, colorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, variantClasses.value, props.class],
+        "style": [{
+          '--v-icon-btn-rotate': convertToUnit(props.rotate, 'deg'),
+          '--v-icon-btn-height': convertToUnit(btnHeight),
+          '--v-icon-btn-width': convertToUnit(btnWidth)
+        }, colorStyles.value, props.style],
+        "tabindex": props.disabled || props.readonly ? -1 : 0,
+        "onClick": onClick
+      }, {
+        default: () => [genOverlays(!props.hideOverlay, 'v-icon-btn'), createVNode("div", {
+          "class": "v-icon-btn__content",
+          "data-no-activator": ""
+        }, [!slots.default && icon ? createVNode(VIcon, mergeProps({
+          "key": "content-icon"
+        }, iconProps), null) : createVNode(VDefaultsProvider, {
+          "key": "content-defaults",
+          "disabled": !icon,
+          "defaults": {
+            VIcon: {
+              ...iconProps
+            }
+          }
+        }, {
+          default: () => slots.default?.() ?? toDisplayString(props.text)
+        })]), !!props.loading && createVNode("span", {
+          "key": "loader",
+          "class": "v-icon-btn__loader"
+        }, [slots.loader?.() ?? createVNode(VProgressCircular, {
+          "color": typeof props.loading === 'boolean' ? undefined : props.loading,
+          "indeterminate": "disable-shrink",
+          "width": "2",
+          "size": iconSize
+        }, null)])]
+      });
+    });
+    return {};
+  }
+});
+
+// Types
+
 const makeVStepperVerticalActionsProps = propsFactory({
   ...makeVStepperActionsProps()
 }, 'VStepperActions');
@@ -30846,6 +31110,7 @@ var components = /*#__PURE__*/Object.freeze({
   VForm: VForm,
   VHover: VHover,
   VIcon: VIcon,
+  VIconBtn: VIconBtn,
   VImg: VImg,
   VInfiniteScroll: VInfiniteScroll,
   VInput: VInput,
@@ -31265,7 +31530,7 @@ function createVuetify$1() {
     };
   });
 }
-const version$1 = "3.8.0-beta.0";
+const version$1 = "3.8.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -31550,7 +31815,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.8.0-beta.0";
+const version = "3.8.0";
 
 /* eslint-disable local-rules/sort-imports */