WIP: Update to Vuetify ^3.9 and Vue ^3.5.17

- Update to latest Vuetify 3.9.0
- Update to latest Vue 3.5.17
- Fix imports for Vuetify promoted from labs
- Fix typings for update events in Vuetify DateControlRenderer
- Adapt Vuetify test snapshots to changes in Vuetify (e.g. setting values in HTML element)

TODO: Focus behavior seems to have changed in the tests. Figure out if this is a regression or fine as is.

Author: lucas-koehler

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.17"
   }
 }

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.17",
+    "vuetify": "^3.9.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
@@ -110,11 +110,11 @@
     "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

@@ -197,10 +197,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';

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

@@ -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';

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

@@ -95,8 +95,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/unit/additional/__snapshots__/ListWithDetailRenderer.spec.ts.snap

@@ -17,7 +17,7 @@ exports[`ListWithDetailRenderer.vue > should render component and match snapshot
                 </div>
               </div>
               <div data-v-7e93fcc2="" class="v-spacer"></div>
-              <!--v-if--><button data-v-7e93fcc2="" type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-text list-with-detail-add" small="" aria-label="MyAdd" aria-describedby="v-tooltip-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!--v-if--><button data-v-7e93fcc2="" type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-text list-with-detail-add" small="" aria-label="MyAdd" aria-describedby="v-tooltip-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
                 <!----><span class="v-btn__content" data-no-activator=""><i data-v-7e93fcc2="" class="mdi-plus mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
                 <!---->
                 <!---->

packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap

@@ -33,7 +33,7 @@ exports[`ArrayControlRenderer.vue > should render component and match snapshot 1
               </div>
             </div>
             <div data-v-4896f876="" class="v-spacer"></div>
-            <!--v-if--><button data-v-4896f876="" type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-text array-list-add" small="" aria-label="MyAdd" aria-describedby="v-tooltip-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!--v-if--><button data-v-4896f876="" type="button" class="v-btn v-btn--icon v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-text array-list-add" small="" aria-label="MyAdd" aria-describedby="v-tooltip-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
               <!----><span class="v-btn__content" data-no-activator=""><i data-v-4896f876="" class="mdi-plus mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
               <!---->
               <!---->