@vuetify/nightly 3.11.5-dev.2025-12-24 → 3.11.5-dev.2025-12-26

package/dist/vuetify-labs.cjs

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.11.5-dev.2025-12-24
+* Vuetify v3.11.5-dev.2025-12-26
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -20698,6 +20698,7 @@
       type: Object
     },
     disabled: Boolean,
+    readonly: Boolean,
     dotSize: {
       type: [Number, String],
       default: 10
@@ -20731,6 +20732,7 @@
         x: 0,
         y: 0
       });
+      const isInteractive = vue.toRef(() => !props.disabled && !props.readonly);
       const dotPosition = vue.computed({
         get: () => _dotPosition.value,
         set(val) {
@@ -20788,7 +20790,7 @@
           // Prevent text selection while dragging
           e.preventDefault();
         }
-        if (props.disabled) return;
+        if (!isInteractive.value) return;
         handleMouseMove(e);
         window.addEventListener('mousemove', handleMouseMove);
         window.addEventListener('mouseup', handleMouseUp);
@@ -20796,7 +20798,7 @@
         window.addEventListener('touchend', handleMouseUp);
       }
       function handleMouseMove(e) {
-        if (props.disabled || !canvasRef.value) return;
+        if (!isInteractive.value || !canvasRef.value) return;
         isInteracting.value = true;
         const coords = getEventCoordinates(e);
         updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect());
@@ -21083,6 +21085,7 @@
   const makeVColorPickerEditProps = propsFactory({
     color: Object,
     disabled: Boolean,
+    readonly: Boolean,
     mode: {
       type: String,
       default: 'rgba',
@@ -21131,6 +21134,7 @@
             ...inputProps,
             ariaLabel: t(`$vuetify.colorPicker.ariaLabel.${localeKey}`),
             disabled: props.disabled,
+            readonly: props.readonly,
             value: color && getValue(color),
             onChange: e => {
               const target = e.target;
@@ -21915,6 +21919,7 @@
       type: Object
     },
     disabled: Boolean,
+    readonly: Boolean,
     hideAlpha: Boolean,
     hideEyeDropper: Boolean,
     eyeDropperIcon: {
@@ -21937,9 +21942,10 @@
         t
       } = useLocale();
       const abortController = new AbortController();
+      const isInteractive = vue.toRef(() => !props.disabled && !props.readonly);
       vue.onUnmounted(() => abortController.abort());
       async function openEyeDropper() {
-        if (!SUPPORTS_EYE_DROPPER || props.disabled) return;
+        if (!SUPPORTS_EYE_DROPPER || !isInteractive.value) return;
         const eyeDropper = new window.EyeDropper();
         try {
           const result = await eyeDropper.open({
@@ -21964,6 +21970,7 @@
         "aria-label": t('$vuetify.colorPicker.ariaLabel.eyedropper'),
         "density": "comfortable",
         "disabled": props.disabled,
+        "readonly": props.readonly,
         "icon": props.eyeDropperIcon,
         "variant": "plain",
         "onClick": openEyeDropper
@@ -21987,6 +21994,7 @@
         "min": 0,
         "max": 360,
         "disabled": props.disabled,
+        "readonly": props.readonly,
         "thumbSize": 14,
         "trackSize": 8,
         "trackFillColor": "white",
@@ -22003,6 +22011,7 @@
         "min": 0,
         "max": 1,
         "disabled": props.disabled,
+        "readonly": props.readonly,
         "thumbSize": 14,
         "trackSize": 8,
         "trackFillColor": "white",
@@ -22340,6 +22349,7 @@
       default: () => parseDefaultColors(colors)
     },
     disabled: Boolean,
+    readonly: Boolean,
     color: Object,
     maxHeight: [Number, String],
     ...makeComponentProps()
@@ -22360,6 +22370,13 @@
       let {
         emit
       } = _ref;
+      const isInteractive = vue.toRef(() => !props.disabled && !props.readonly);
+      function onSwatchClick(hsva) {
+        if (!isInteractive.value || !hsva) {
+          return;
+        }
+        emit('update:color', hsva);
+      }
       useRender(() => vue.createElementVNode("div", {
         "class": vue.normalizeClass(['v-color-picker-swatches', props.class]),
         "style": vue.normalizeStyle([{
@@ -22373,7 +22390,7 @@
         const background = RGBtoCSS(rgba);
         return vue.createElementVNode("div", {
           "class": "v-color-picker-swatches__color",
-          "onClick": () => hsva && emit('update:color', hsva)
+          "onClick": () => onSwatchClick(hsva)
         }, [vue.createElementVNode("div", {
           "style": {
             background
@@ -22533,6 +22550,7 @@
       validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
     },
     showSwatches: Boolean,
+    readonly: Boolean,
     swatches: Array,
     swatchesMaxHeight: {
       type: [Number, String],
@@ -22626,6 +22644,7 @@
             "color": currentColor.value,
             "onUpdate:color": updateColor,
             "disabled": props.disabled,
+            "readonly": props.readonly,
             "dotSize": props.dotSize,
             "width": props.width,
             "height": props.canvasHeight
@@ -22638,6 +22657,7 @@
             "onUpdate:color": updateColor,
             "hideAlpha": !mode.value.endsWith('a'),
             "disabled": props.disabled,
+            "readonly": props.readonly,
             "hideEyeDropper": props.hideEyeDropper,
             "eyeDropperIcon": props.eyeDropperIcon
           }, null), !props.hideInputs && vue.createVNode(VColorPickerEdit, {
@@ -22647,14 +22667,16 @@
             "onUpdate:mode": m => mode.value = m,
             "color": currentColor.value,
             "onUpdate:color": updateColor,
-            "disabled": props.disabled
+            "disabled": props.disabled,
+            "readonly": props.readonly
           }, null)]), props.showSwatches && vue.createVNode(VColorPickerSwatches, {
             "key": "swatches",
             "color": currentColor.value,
             "onUpdate:color": updateColor,
             "maxHeight": props.swatchesMaxHeight,
             "swatches": props.swatches,
-            "disabled": props.disabled
+            "disabled": props.disabled,
+            "readonly": props.readonly
           }, null)])
         });
       });
@@ -36171,10 +36193,10 @@
           "modelValue": display.value,
           "onKeydown": isInteractive.value ? onKeydown : undefined,
           "focused": menu.value || isFocused.value,
-          "onClick:control": isInteractive.value ? onClick : undefined,
-          "onClick:prependInner": isInteractive.value ? onClick : undefined,
+          "onClick:control": !props.disabled ? onClick : undefined,
+          "onClick:prependInner": !props.disabled ? onClick : undefined,
           "onUpdate:focused": event => isFocused.value = event,
-          "onClick:appendInner": isInteractive.value ? onClick : undefined,
+          "onClick:appendInner": !props.disabled ? onClick : undefined,
           "onUpdate:modelValue": val => {
             model.value = val;
           }
@@ -39456,7 +39478,7 @@
       };
     });
   }
-  const version$1 = "3.11.5-dev.2025-12-24";
+  const version$1 = "3.11.5-dev.2025-12-26";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -39759,7 +39781,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.11.5-dev.2025-12-24";
+  const version = "3.11.5-dev.2025-12-26";
 
   /* eslint-disable local-rules/sort-imports */