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

package/dist/vuetify-labs.esm.js

@@ -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.
 */
@@ -20694,6 +20694,7 @@ const makeVColorPickerCanvasProps = propsFactory({
     type: Object
   },
   disabled: Boolean,
+  readonly: Boolean,
   dotSize: {
     type: [Number, String],
     default: 10
@@ -20727,6 +20728,7 @@ const VColorPickerCanvas = defineComponent({
       x: 0,
       y: 0
     });
+    const isInteractive = toRef(() => !props.disabled && !props.readonly);
     const dotPosition = computed({
       get: () => _dotPosition.value,
       set(val) {
@@ -20784,7 +20786,7 @@ const VColorPickerCanvas = defineComponent({
         // 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);
@@ -20792,7 +20794,7 @@ const VColorPickerCanvas = defineComponent({
       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());
@@ -21079,6 +21081,7 @@ const VColorPickerInput = _ref => {
 const makeVColorPickerEditProps = propsFactory({
   color: Object,
   disabled: Boolean,
+  readonly: Boolean,
   mode: {
     type: String,
     default: 'rgba',
@@ -21127,6 +21130,7 @@ const VColorPickerEdit = defineComponent({
           ...inputProps,
           ariaLabel: t(`$vuetify.colorPicker.ariaLabel.${localeKey}`),
           disabled: props.disabled,
+          readonly: props.readonly,
           value: color && getValue(color),
           onChange: e => {
             const target = e.target;
@@ -21911,6 +21915,7 @@ const makeVColorPickerPreviewProps = propsFactory({
     type: Object
   },
   disabled: Boolean,
+  readonly: Boolean,
   hideAlpha: Boolean,
   hideEyeDropper: Boolean,
   eyeDropperIcon: {
@@ -21933,9 +21938,10 @@ const VColorPickerPreview = defineComponent({
       t
     } = useLocale();
     const abortController = new AbortController();
+    const isInteractive = toRef(() => !props.disabled && !props.readonly);
     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({
@@ -21960,6 +21966,7 @@ const VColorPickerPreview = defineComponent({
       "aria-label": t('$vuetify.colorPicker.ariaLabel.eyedropper'),
       "density": "comfortable",
       "disabled": props.disabled,
+      "readonly": props.readonly,
       "icon": props.eyeDropperIcon,
       "variant": "plain",
       "onClick": openEyeDropper
@@ -21983,6 +21990,7 @@ const VColorPickerPreview = defineComponent({
       "min": 0,
       "max": 360,
       "disabled": props.disabled,
+      "readonly": props.readonly,
       "thumbSize": 14,
       "trackSize": 8,
       "trackFillColor": "white",
@@ -21999,6 +22007,7 @@ const VColorPickerPreview = defineComponent({
       "min": 0,
       "max": 1,
       "disabled": props.disabled,
+      "readonly": props.readonly,
       "thumbSize": 14,
       "trackSize": 8,
       "trackFillColor": "white",
@@ -22336,6 +22345,7 @@ const makeVColorPickerSwatchesProps = propsFactory({
     default: () => parseDefaultColors(colors)
   },
   disabled: Boolean,
+  readonly: Boolean,
   color: Object,
   maxHeight: [Number, String],
   ...makeComponentProps()
@@ -22356,6 +22366,13 @@ const VColorPickerSwatches = defineComponent({
     let {
       emit
     } = _ref;
+    const isInteractive = toRef(() => !props.disabled && !props.readonly);
+    function onSwatchClick(hsva) {
+      if (!isInteractive.value || !hsva) {
+        return;
+      }
+      emit('update:color', hsva);
+    }
     useRender(() => createElementVNode("div", {
       "class": normalizeClass(['v-color-picker-swatches', props.class]),
       "style": normalizeStyle([{
@@ -22369,7 +22386,7 @@ const VColorPickerSwatches = defineComponent({
       const background = RGBtoCSS(rgba);
       return createElementVNode("div", {
         "class": "v-color-picker-swatches__color",
-        "onClick": () => hsva && emit('update:color', hsva)
+        "onClick": () => onSwatchClick(hsva)
       }, [createElementVNode("div", {
         "style": {
           background
@@ -22529,6 +22546,7 @@ const makeVColorPickerProps = propsFactory({
     validator: v => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m))
   },
   showSwatches: Boolean,
+  readonly: Boolean,
   swatches: Array,
   swatchesMaxHeight: {
     type: [Number, String],
@@ -22622,6 +22640,7 @@ const VColorPicker = defineComponent({
           "color": currentColor.value,
           "onUpdate:color": updateColor,
           "disabled": props.disabled,
+          "readonly": props.readonly,
           "dotSize": props.dotSize,
           "width": props.width,
           "height": props.canvasHeight
@@ -22634,6 +22653,7 @@ const VColorPicker = defineComponent({
           "onUpdate:color": updateColor,
           "hideAlpha": !mode.value.endsWith('a'),
           "disabled": props.disabled,
+          "readonly": props.readonly,
           "hideEyeDropper": props.hideEyeDropper,
           "eyeDropperIcon": props.eyeDropperIcon
         }, null), !props.hideInputs && createVNode(VColorPickerEdit, {
@@ -22643,14 +22663,16 @@ const VColorPicker = defineComponent({
           "onUpdate:mode": m => mode.value = m,
           "color": currentColor.value,
           "onUpdate:color": updateColor,
-          "disabled": props.disabled
+          "disabled": props.disabled,
+          "readonly": props.readonly
         }, null)]), props.showSwatches && 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)])
       });
     });
@@ -36167,10 +36189,10 @@ const VColorInput = genericComponent()({
         "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;
         }
@@ -39452,7 +39474,7 @@ function createVuetify$1() {
     };
   });
 }
-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
@@ -39755,7 +39777,7 @@ var index = /*#__PURE__*/Object.freeze({
 
 /* 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 */