@vuetify/nightly 3.8.0-beta.0-dev.2025-03-25 → 3.8.0-beta.0-dev.2025-03-29

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.8.0-beta.0-dev.2025-03-25
+* Vuetify v3.8.0-beta.0-dev.2025-03-29
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -18443,6 +18443,10 @@
       type: String,
       default: '$vuetify.confirmEdit.ok'
     },
+    disabled: {
+      type: [Boolean, Array],
+      default: undefined
+    },
     hideActions: Boolean
   }, 'VConfirmEdit');
   const VConfirmEdit = genericComponent()({
@@ -18469,6 +18473,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);
@@ -18479,13 +18494,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,
@@ -21940,7 +21955,10 @@
       type: String,
       default: 'dynamic'
     },
-    firstDayOfWeek: [Number, String]
+    firstDayOfWeek: {
+      type: [Number, String],
+      default: 0
+    }
   }, 'calendar');
   function useCalendar(props) {
     const adapter = useDate();
@@ -21961,15 +21979,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)
@@ -22047,7 +22065,7 @@
       if (typeof props.allowedDates === 'function') {
         return !props.allowedDates(date);
       }
-      return false;
+      return !props.weekdays.includes(adapter.toJsDate(date).getDay());
     }
     return {
       displayValue,
@@ -28940,6 +28958,7 @@
       type: String,
       default: 'bottom start'
     },
+    ...makeDisplayProps(),
     ...makeFocusProps(),
     ...makeVConfirmEditProps({
       hideActions: true
@@ -28970,6 +28989,9 @@
         t
       } = useLocale();
       const adapter = useDate();
+      const {
+        mobile
+      } = useDisplay();
       const {
         isFocused,
         focus,
@@ -28977,7 +28999,9 @@
       } = 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);
@@ -28998,7 +29022,18 @@
         }
         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) {
@@ -29011,11 +29046,16 @@
       function onClick(e) {
         e.preventDefault();
         e.stopPropagation();
-        menu.value = true;
+        if (menu.value && mobile.value) {
+          isEditingInput.value = true;
+        } else {
+          menu.value = true;
+        }
       }
       function onCancel() {
         emit('cancel');
         menu.value = false;
+        isEditingInput.value = false;
       }
       function onSave(value) {
         emit('save', value);
@@ -29025,6 +29065,19 @@
         if (value != null) return;
         model.value = null;
       }
+      function onUpdateMenuModel(isMenuOpen) {
+        if (isMenuOpen) return;
+        isEditingInput.value = false;
+      }
+      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']));
@@ -29035,10 +29088,12 @@
           "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": onUpdateDisplayModel
@@ -29046,7 +29101,7 @@
           ...slots,
           default: () => vue.createVNode(vue.Fragment, null, [vue.createVNode(VMenu, {
             "modelValue": menu.value,
-            "onUpdate:modelValue": $event => menu.value = $event,
+            "onUpdate:modelValue": [$event => menu.value = $event, onUpdateMenuModel],
             "activator": "parent",
             "min-width": "0",
             "eager": isFocused.value,
@@ -29057,6 +29112,7 @@
             default: () => [vue.createVNode(VConfirmEdit, vue.mergeProps(confirmEditProps, {
               "modelValue": model.value,
               "onUpdate:modelValue": $event => model.value = $event,
+              "disabled": disabledActions.value,
               "onSave": onSave,
               "onCancel": onCancel
             }), {
@@ -29079,6 +29135,7 @@
                   }
                   emit('save', value);
                   vDateInputRef.value?.blur();
+                  disabledActions.value = [];
                 }
                 return vue.createVNode(VDatePicker, vue.mergeProps(datePickerProps, {
                   "modelValue": props.hideActions ? model.value : proxyModel.value,
@@ -29416,6 +29473,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');
@@ -30895,6 +31120,7 @@
     VForm: VForm,
     VHover: VHover,
     VIcon: VIcon,
+    VIconBtn: VIconBtn,
     VImg: VImg,
     VInfiniteScroll: VInfiniteScroll,
     VInput: VInput,
@@ -31314,7 +31540,7 @@
       };
     });
   }
-  const version$1 = "3.8.0-beta.0-dev.2025-03-25";
+  const version$1 = "3.8.0-beta.0-dev.2025-03-29";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -31599,7 +31825,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.8.0-beta.0-dev.2025-03-25";
+  const version = "3.8.0-beta.0-dev.2025-03-29";
 
   /* eslint-disable local-rules/sort-imports */