deps: Update to Vuetify ^3.9 and Vue ^3.5 (#2468)

* deps: Update to Vuetify ^3.9 and Vue ^3.5

- Update to latest Vuetify 3.9.0
- Update to latest Vue 3.5.17
- Update Vue peer dependency to ^3.5.0
- Update Vite to latest 5.x version ^5.4.19
- Fix imports for Vuetify promoted from labs
- Fix typings for update events in Vuetify DateControlRenderer
- Regenerate Vuetify test snapshots to fit changes in Vuetify (e.g. setting values in HTML element)
- Add visualViewport mock for Vuetify tests as this seems to be needed after dependency update
- In JsonForms.vue explicitly type provided state as `JsonFormsSubStates` to avoid TS7056

* fix: Vuetify TimeControlRenderer to autoclose after selecting smallest unit

* fix: Vuetify DateTimeControlRenderer to close on smallest unit selection

auto close on minute/second selection.
No longer closes on day selection as there is not event for day selection

* fix: Vuetify number control to show decimals by setting precision

Also adapts the numbers example to use a step with scientific notation number

Author: lucas-koehler

packages/examples/src/examples/numbers.ts

@@ -62,6 +62,9 @@ export const uischema = {
         {
           type: 'Control',
           scope: '#/properties/height',
+          options: {
+            step: 1e-2,
+          },
         },
         {
           type: 'Control',

packages/vue-vanilla/package.json

@@ -89,12 +89,12 @@
     "tslib": "^2.5.0",
     "typedoc": "~0.25.3",
     "typescript": "~5.5.0",
-    "vue": "^3.4.21",
+    "vue": "^3.5.17",
     "vue-jest": "^5.0.0-0"
   },
   "peerDependencies": {
     "@jsonforms/core": "3.6.0",
     "@jsonforms/vue": "3.6.0",
-    "vue": "^3.2.26"
+    "vue": "^3.5.0"
   }
 }

packages/vue-vuetify/dev/store/index.ts

@@ -80,7 +80,7 @@ function useHistoryHashQuery<T extends string | boolean | number>(
   queryParam: string,
   initialValue: T,
 ) {
-  const data: Ref<UnwrapRef<T>> = ref<T>(initialValue);
+  const data = ref<T>(initialValue);
 
   // Function to update data based on URL hash
   const updateDataFromHash = () => {

packages/vue-vuetify/package.json

@@ -64,8 +64,8 @@
     "dayjs": "^1.10.6",
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
-    "vue": "^3.4.21",
-    "vuetify": "^3.6.6"
+    "vue": "^3.5.0",
+    "vuetify": "^3.9.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
@@ -106,15 +106,15 @@
     "splitpanes": "^3.1.5",
     "typedoc": "~0.25.3",
     "typescript": "~5.4.0",
-    "vite": "^5.2.8",
+    "vite": "^5.4.19",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-static-copy": "^1.0.5",
-    "vite-plugin-vuetify": "^2.0.3",
+    "vite-plugin-vuetify": "^2.1.1",
     "vitest": "^1.4.0",
-    "vue": "^3.4.21",
+    "vue": "^3.5.17",
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^2.0.11",
-    "vuetify": "^3.6.6"
+    "vuetify": "^3.9.0"
   }
 }

packages/vue-vuetify/src/controls/DateControlRenderer.vue

@@ -49,17 +49,19 @@
                 v-if="showMenu"
                 :model-value="showActions ? proxyModel.value : pickerValue"
                 @update:model-value="
-                  (val) => updateDatePickerValue(val, proxyModel)
+                  (val: any) => updateDatePickerValue(val, proxyModel)
                 "
                 v-bind="vuetifyProps('v-date-picker')"
                 :title="computedLabel"
                 :min="minDate"
                 :max="maxDate"
                 v-model:view-mode="viewMode"
                 @update:month="
-                  (month) => updateDatePickerMonth(month, proxyModel)
+                  (month: number) => updateDatePickerMonth(month, proxyModel)
+                "
+                @update:year="
+                  (year: number) => updateDatePickerYear(year, proxyModel)
                 "
-                @update:year="(year) => updateDatePickerYear(year, proxyModel)"
               >
                 <template v-slot:actions v-if="showActions">
                   <component :is="actions"></component>

packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue

@@ -88,6 +88,19 @@
                             proxyModel.value.time = val;
                           } else {
                             pickerValue.time = val;
+                          }
+                        }
+                      "
+                      @update:minute="
+                        () => {
+                          if (!showActions && !useSeconds) {
+                            showMenu = false;
+                          }
+                        }
+                      "
+                      @update:second="
+                        () => {
+                          if (!showActions && useSeconds) {
                             showMenu = false;
                           }
                         }
@@ -145,7 +158,19 @@
                               date: pickerValue.date,
                               time: val,
                             };
-
+                          }
+                        }
+                      "
+                      @update:minute="
+                        () => {
+                          if (!showActions && !useSeconds) {
+                            showMenu = false;
+                          }
+                        }
+                      "
+                      @update:second="
+                        () => {
+                          if (!showActions && useSeconds) {
                             showMenu = false;
                           }
                         }
@@ -197,10 +222,10 @@ import {
   VTab,
   VTabs,
   VTextField,
+  VTimePicker,
   VWindow,
   VWindowItem,
 } from 'vuetify/components';
-import { VTimePicker } from 'vuetify/labs/VTimePicker';
 
 import { vMaska, type MaskOptions, type MaskaDetail } from 'maska';
 import { useDisplay, useLocale } from 'vuetify';
@@ -542,10 +567,6 @@ const controlRenderer = defineComponent({
         if (this.useTabLayout && val.date) {
           this.activeTab = 'time';
         }
-
-        if (val.date && val.time && !this.showActions) {
-          this.showMenu = false;
-        }
       },
     },
     cancelLabel(): string {

packages/vue-vuetify/src/controls/IntegerControlRenderer.vue

@@ -36,7 +36,7 @@ import {
   type RendererProps,
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
-import { VNumberInput } from 'vuetify/labs/VNumberInput';
+import { VNumberInput } from 'vuetify/components';
 import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';

packages/vue-vuetify/src/controls/NumberControlRenderer.vue

@@ -8,6 +8,7 @@
     <v-number-input
       v-disabled-icon-focus
       :step="step"
+      :precision="precision"
       :id="control.id + '-input'"
       :class="styles.control.input"
       :disabled="!control.enabled"
@@ -36,7 +37,7 @@ import {
   type RendererProps,
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
-import { VNumberInput } from 'vuetify/labs/VNumberInput';
+import { VNumberInput } from 'vuetify/components';
 
 import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
@@ -66,6 +67,17 @@ const controlRenderer = defineComponent({
       const options: any = this.appliedOptions;
       return options.step ?? 0.1;
     },
+    precision(): number | undefined {
+      if (!this.step || Number.isInteger(this.step)) return undefined;
+      // Handle scientific notation and float imprecision
+      const stepStr = this.step.toString();
+      if (stepStr.indexOf('e-') > -1) {
+        // Handle cases like 1e-3
+        return parseInt(stepStr.split('e-')[1], 10);
+      }
+      const fraction = stepStr.split('.')[1];
+      return fraction ? fraction.length : undefined;
+    },
   },
 });
 

packages/vue-vuetify/src/controls/TimeControlRenderer.vue

@@ -54,6 +54,19 @@
                       proxyModel.value = val;
                     } else {
                       pickerValue = val;
+                    }
+                  }
+                "
+                @update:minute="
+                  () => {
+                    if (!showActions && !useSeconds) {
+                      showMenu = false;
+                    }
+                  }
+                "
+                @update:second="
+                  () => {
+                    if (!showActions && useSeconds) {
                       showMenu = false;
                     }
                   }
@@ -95,8 +108,8 @@ import {
   VMenu,
   VSpacer,
   VTextField,
+  VTimePicker,
 } from 'vuetify/components';
-import { VTimePicker } from 'vuetify/labs/VTimePicker';
 
 import { useLocale } from 'vuetify';
 import type { IconValue } from '../icons';

packages/vue-vuetify/tests/setup.ts

@@ -0,0 +1,17 @@
+// Mock the visualViewport API for testing purposes
+if (!window.visualViewport) {
+  window.visualViewport = {
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    width: window.innerWidth,
+    height: window.innerHeight,
+    scale: 1,
+    offsetLeft: 0,
+    offsetTop: 0,
+    pageLeft: 0,
+    pageTop: 0,
+    onresize: null,
+    onscroll: null,
+    dispatchEvent: () => true,
+  };
+}