vuetify 3.8.0-beta.0 → 3.8.0

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.0-beta.0
+* Vuetify v3.8.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -233,7 +233,7 @@
   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];
       }
     }
@@ -4667,6 +4667,7 @@
     start: Boolean,
     end: Boolean,
     icon: IconValue,
+    opacity: [String, Number],
     ...makeComponentProps(),
     ...makeSizeProps(),
     ...makeTagProps({
@@ -4685,7 +4686,7 @@
       const slotIcon = vue.ref();
       const {
         themeClasses
-      } = provideTheme(props);
+      } = useTheme();
       const {
         iconData
       } = useIcon(vue.computed(() => slotIcon.value || props.icon));
@@ -4711,7 +4712,9 @@
             '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)
@@ -11867,7 +11870,11 @@
           },
           focus,
           blur
-        })]), hasClear && vue.createVNode(VExpandXTransition, {
+        }) ?? vue.createVNode("div", {
+          "id": id.value,
+          "class": "v-field__input",
+          "aria-describedby": messagesId.value
+        }, null)]), hasClear && vue.createVNode(VExpandXTransition, {
           "key": "clear"
         }, {
           default: () => [vue.withDirectives(vue.createVNode("div", {
@@ -13399,12 +13406,7 @@
         } 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;
         }
       });
@@ -13492,12 +13494,12 @@
                 "items": displayItems.value,
                 "itemKey": "value"
               }, {
-                default: _ref4 => {
+                default: _ref3 => {
                   let {
                     item,
                     index,
                     itemRef
-                  } = _ref4;
+                  } = _ref3;
                   const itemProps = vue.mergeProps(item.props, {
                     ref: itemRef,
                     key: item.value,
@@ -13511,10 +13513,10 @@
                   }) ?? vue.createVNode(VListItem, vue.mergeProps(itemProps, {
                     "role": "option"
                   }), {
-                    prepend: _ref5 => {
+                    prepend: _ref4 => {
                       let {
                         isSelected
-                      } = _ref5;
+                      } = _ref4;
                       return vue.createVNode(vue.Fragment, null, [props.multiple && !props.hideSelected ? vue.createVNode(VCheckboxBtn, {
                         "key": item.value,
                         "modelValue": isSelected,
@@ -16383,7 +16385,7 @@
       const abortController = new AbortController();
       vue.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({
@@ -16405,10 +16407,11 @@
         "class": "v-color-picker-preview__eye-dropper",
         "key": "eyeDropper"
       }, [vue.createVNode(VBtn, {
-        "onClick": openEyeDropper,
+        "density": "comfortable",
+        "disabled": props.disabled,
         "icon": "$eyeDropper",
         "variant": "plain",
-        "density": "comfortable"
+        "onClick": openEyeDropper
       }, null)]), vue.createVNode("div", {
         "class": "v-color-picker-preview__dot"
       }, [vue.createVNode("div", {
@@ -18436,6 +18439,10 @@
       type: String,
       default: '$vuetify.confirmEdit.ok'
     },
+    disabled: {
+      type: [Boolean, Array],
+      default: undefined
+    },
     hideActions: Boolean
   }, 'VConfirmEdit');
   const VConfirmEdit = genericComponent()({
@@ -18462,6 +18469,17 @@
       const isPristine = vue.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 = vue.computed(() => isActionDisabled('save'));
+      const isCancelDisabled = vue.computed(() => isActionDisabled('cancel'));
       function save() {
         model.value = internalModel.value;
         emit('save', internalModel.value);
@@ -18472,13 +18490,13 @@
       }
       function actions(actionsProps) {
         return vue.createVNode(vue.Fragment, null, [vue.createVNode(VBtn, vue.mergeProps({
-          "disabled": isPristine.value,
+          "disabled": isCancelDisabled.value,
           "variant": "text",
           "color": props.color,
           "onClick": cancel,
           "text": t(props.cancelText)
         }, actionsProps), null), vue.createVNode(VBtn, vue.mergeProps({
-          "disabled": isPristine.value,
+          "disabled": isSaveDisabled.value,
           "variant": "text",
           "color": props.color,
           "onClick": save,
@@ -20564,22 +20582,37 @@
           "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) ?? vue.createVNode(VCheckboxBtn, {
+              return slots['item.data-table-select']?.({
+                ...slotProps,
+                props: {
+                  disabled: !item.selectable,
+                  modelValue: isSelected([item]),
+                  onClick: vue.withModifiers(() => toggleSelect(item), ['stop'])
+                }
+              }) ?? vue.createVNode(VCheckboxBtn, {
                 "disabled": !item.selectable,
                 "modelValue": isSelected([item]),
                 "onClick": vue.withModifiers(event => toggleSelect(item, props.index, event), ['stop'])
               }, null);
             }
             if (column.key === 'data-table-expand') {
-              return slots['item.data-table-expand']?.(slotProps) ?? vue.createVNode(VBtn, {
+              return slots['item.data-table-expand']?.({
+                ...slotProps,
+                props: {
+                  icon: isExpanded(item) ? '$collapse' : '$expand',
+                  size: 'small',
+                  variant: 'text',
+                  onClick: vue.withModifiers(() => toggleExpand(item), ['stop'])
+                }
+              }) ?? vue.createVNode(VBtn, {
                 "icon": isExpanded(item) ? '$collapse' : '$expand',
                 "size": "small",
                 "variant": "text",
                 "onClick": vue.withModifiers(() => toggleExpand(item), ['stop'])
               }, null);
             }
+            if (slots[slotName] && !mobile.value) return slots[slotName](slotProps);
             const displayValue = vue.toDisplayString(slotProps.value);
             return !mobile.value ? displayValue : vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
               "class": "v-data-table__td-title"
@@ -21918,11 +21951,14 @@
       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 = vue.computed(() => {
       if (props.displayValue) return adapter.date(props.displayValue);
       if (model.value.length > 0) return adapter.date(model.value[0]);
@@ -21939,15 +21975,15 @@
       const date = adapter.setYear(adapter.startOfMonth(adapter.date()), adapter.getYear(year.value));
       return adapter.setMonth(date, value);
     }, v => adapter.getMonth(v));
-    const defaultFirstDayOfWeek = vue.computed(() => {
-      return props.firstDayOfWeek ?? props.weekdays[0];
-    });
     const weekDays = vue.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 = vue.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)
@@ -22025,7 +22061,7 @@
       if (typeof props.allowedDates === 'function') {
         return !props.allowedDates(date);
       }
-      return false;
+      return !props.weekdays.includes(adapter.toJsDate(date).getDay());
     }
     return {
       displayValue,
@@ -22435,7 +22471,7 @@
       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')
 
@@ -22760,7 +22796,9 @@
             VBtn: {
               class: 'v-empty-state__action-btn',
               color: props.color ?? 'surface-variant',
-              text: props.actionText
+              href: props.href,
+              text: props.actionText,
+              to: props.to
             }
           }
         }, {
@@ -28913,12 +28951,16 @@
   // 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'
@@ -28932,16 +28974,22 @@
     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,
@@ -28949,7 +28997,15 @@
       } = 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 = vue.shallowRef(false);
+      const isEditingInput = vue.shallowRef(false);
       const vDateInputRef = vue.ref();
+      const disabledActions = vue.ref(['save']);
+      function format(date) {
+        if (typeof props.displayFormat === 'function') {
+          return props.displayFormat(date);
+        }
+        return adapter.format(date, props.displayFormat ?? 'keyboardDate');
+      }
       const display = vue.computed(() => {
         const value = wrapInArray(model.value);
         if (!value.length) return null;
@@ -28959,11 +29015,23 @@
         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 = vue.computed(() => {
+        if (!mobile.value) return undefined;
+        if (isEditingInput.value) return 'text';
+        return 'none';
       });
       const isInteractive = vue.computed(() => !props.disabled && !props.readonly);
+      const isReadonly = vue.computed(() => !(mobile.value && isEditingInput.value) && props.readonly);
+      vue.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) {
@@ -28971,20 +29039,39 @@
           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']));
@@ -28995,13 +29082,15 @@
           "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: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, {
@@ -29017,8 +29106,9 @@
             default: () => [vue.createVNode(VConfirmEdit, vue.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 {
@@ -29028,16 +29118,21 @@
                   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 vue.createVNode(VDatePicker, vue.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?.({
@@ -29280,7 +29375,8 @@
             '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,
@@ -29371,6 +29467,174 @@
 
   // 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(vue.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 vue.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'), vue.createVNode("div", {
+            "class": "v-icon-btn__content",
+            "data-no-activator": ""
+          }, [!slots.default && icon ? vue.createVNode(VIcon, vue.mergeProps({
+            "key": "content-icon"
+          }, iconProps), null) : vue.createVNode(VDefaultsProvider, {
+            "key": "content-defaults",
+            "disabled": !icon,
+            "defaults": {
+              VIcon: {
+                ...iconProps
+              }
+            }
+          }, {
+            default: () => slots.default?.() ?? vue.toDisplayString(props.text)
+          })]), !!props.loading && vue.createVNode("span", {
+            "key": "loader",
+            "class": "v-icon-btn__loader"
+          }, [slots.loader?.() ?? vue.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');
@@ -30850,6 +31114,7 @@
     VForm: VForm,
     VHover: VHover,
     VIcon: VIcon,
+    VIconBtn: VIconBtn,
     VImg: VImg,
     VInfiniteScroll: VInfiniteScroll,
     VInput: VInput,
@@ -31269,7 +31534,7 @@
       };
     });
   }
-  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
@@ -31554,7 +31819,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.0-beta.0";
+  const version = "3.8.0";
 
   /* eslint-disable local-rules/sort-imports */