Fix categorization stepper step order index, introduce new composition function for vue, fix config to be properly passed to test functions

packages/vue-vanilla/src/array/ArrayListRenderer.vue

@@ -48,25 +48,25 @@
 
 <script lang="ts">
 import {
+  arrayDefaultTranslations,
   composePaths,
+  ControlElement,
   createDefaultValue,
+  defaultJsonFormsI18nState,
+  getArrayTranslations,
   JsonFormsRendererRegistryEntry,
+  JsonSchema,
   rankWith,
-  ControlElement,
-  schemaTypeIs,
   Resolve,
-  JsonSchema,
-  JsonFormsSubStates,
-  arrayDefaultTranslations,
-  getArrayTranslations,
-  defaultJsonFormsI18nState,
+  schemaTypeIs,
 } from '@jsonforms/core';
-import { defineComponent, inject } from 'vue';
+import { defineComponent } from 'vue';
 import {
   DispatchRenderer,
   rendererProps,
-  useJsonFormsArrayControl,
   RendererProps,
+  useJsonForms,
+  useJsonFormsArrayControl,
 } from '../../config/jsonforms';
 import { useVanillaArrayControl } from '../util';
 import ArrayListElement from './ArrayListElement.vue';
@@ -111,7 +111,7 @@ const controlRenderer = defineComponent({
       );
     },
     translations(): any {
-      const jsonforms = inject<JsonFormsSubStates>('jsonforms');
+      const jsonforms = useJsonForms();
       return getArrayTranslations(
         jsonforms?.i18n?.translate ?? defaultJsonFormsI18nState.translate,
         arrayDefaultTranslations,

packages/vue-vanilla/src/complex/OneOfRenderer.vue

@@ -79,19 +79,19 @@ import {
   getCombinatorTranslations,
   isOneOfControl,
   JsonFormsRendererRegistryEntry,
-  JsonFormsSubStates,
   rankWith,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
   rendererProps,
   RendererProps,
+  useJsonForms,
   useJsonFormsOneOfControl,
 } from '@jsonforms/vue';
 import isEmpty from 'lodash/isEmpty';
-import { defineComponent, inject, nextTick, ref } from 'vue';
-import { useVanillaControl } from '../util';
+import { defineComponent, nextTick, ref } from 'vue';
 import { ControlWrapper } from '../controls';
+import { useVanillaControl } from '../util';
 import CombinatorProperties from './components/CombinatorProperties.vue';
 
 const controlRenderer = defineComponent({
@@ -144,7 +144,7 @@ const controlRenderer = defineComponent({
     },
 
     translations(): any {
-      const jsonforms = inject<JsonFormsSubStates>('jsonforms');
+      const jsonforms = useJsonForms();
       return getCombinatorTranslations(
         jsonforms?.i18n?.translate ?? defaultJsonFormsI18nState.translate,
         combinatorDefaultTranslations,

packages/vue-vuetify/package.json

@@ -69,7 +69,7 @@
     "lodash": "^4.17.21",
     "maska": "^2.1.11",
     "vue": "^3.5.0",
-    "vuetify": "^3.9.0"
+    "vuetify": "^3.11.0"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
@@ -119,6 +119,6 @@
     "vue": "^3.5.17",
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^2.0.11",
-    "vuetify": "^3.9.0"
+    "vuetify": "^3.11.0"
   }
 }

packages/vue-vuetify/src/complex/MixedRenderer.vue

@@ -103,7 +103,9 @@ import {
 import {
   DispatchRenderer,
   rendererProps,
+  useJsonForms,
   useJsonFormsControl,
+  useTranslator,
   type RendererProps,
 } from '@jsonforms/vue';
 import { computed, defineComponent, provide, ref, watch } from 'vue';
@@ -122,8 +124,6 @@ import {
   IsDynamicPropertyContext,
   useCombinatorTranslations,
   useIcons,
-  useJsonForms,
-  useTranslator,
   useVuetifyControl,
 } from '../util';
 import cloneDeep from 'lodash/cloneDeep';

packages/vue-vuetify/src/complex/OneOfRenderer.vue

@@ -87,6 +87,7 @@ import {
   rendererProps,
   type RendererProps,
   useJsonFormsOneOfControl,
+  useTranslator,
 } from '@jsonforms/vue';
 import isEmpty from 'lodash/isEmpty';
 import { defineComponent, ref } from 'vue';
@@ -101,11 +102,7 @@ import {
   VSpacer,
 } from 'vuetify/components';
 import { DisabledIconFocus } from '../controls/directives';
-import {
-  useCombinatorTranslations,
-  useTranslator,
-  useVuetifyControl,
-} from '../util';
+import { useCombinatorTranslations, useVuetifyControl } from '../util';
 import { CombinatorProperties } from './components';
 
 const controlRenderer = defineComponent({

packages/vue-vuetify/src/complex/components/AdditionalProperties.vue

@@ -109,7 +109,9 @@ import {
 import {
   DispatchRenderer,
   JsonForms,
+  useJsonForms,
   useJsonFormsControlWithDetail,
+  useTranslator,
   type JsonFormsChangeEvent,
 } from '@jsonforms/vue';
 import type { ErrorObject } from 'ajv';
@@ -140,12 +142,7 @@ import {
 } from 'vuetify/components';
 import { DisabledIconFocus } from '../../controls/directives';
 import { useStyles } from '../../styles';
-import {
-  useControlAppliedOptions,
-  useIcons,
-  useJsonForms,
-  useTranslator,
-} from '../../util';
+import { useControlAppliedOptions, useIcons } from '../../util';
 import { IsDynamicPropertyContext } from '@/util/inject';
 
 type Input = ReturnType<typeof useJsonFormsControlWithDetail>;

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

@@ -34,7 +34,6 @@
           transition="scale-transition"
           min-width="290px"
           v-bind="vuetifyProps('v-menu')"
-          activator="parent"
           :disabled="!control.enabled"
         >
           <template v-slot:activator="{ props }">
@@ -52,7 +51,7 @@
                 v-if="showMenu"
                 :model-value="showActions ? proxyModel.value : pickerValue"
                 @update:model-value="
-                  (val: any) => updateDatePickerValue(val, proxyModel)
+                  (val: unknown) => updateDatePickerValue(val, proxyModel)
                 "
                 v-bind="vuetifyProps('v-date-picker')"
                 :title="computedLabel"
@@ -89,6 +88,7 @@ import { computed, defineComponent, reactive, ref, unref, watch } from 'vue';
 import {
   rendererProps,
   useJsonFormsControl,
+  useTranslator,
   type RendererProps,
 } from '@jsonforms/vue';
 import { vMaska, type MaskOptions } from 'maska';
@@ -107,7 +107,6 @@ import {
   determineClearValue,
   expandLocaleFormat,
   parseDateTime,
-  useTranslator,
   useVuetifyControl,
 } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
@@ -158,26 +157,29 @@ const controlRenderer = defineComponent({
           : (expandLocaleFormat('L') ?? 'YYYY-MM-DD'), // by default try to use localized default if unavailable then YYYY-MM-DD
     );
 
-    const useMask = control.appliedOptions.value.mask !== false;
-    const locale = useLocale();
+    const useMask = computed(() => control.appliedOptions.value.mask !== false);
 
     const maska = reactive({
       masked: '',
       unmasked: '',
       completed: false,
     });
-    const options = useMask
-      ? computed<MaskOptions>(() => ({
-          mask: state.value.mask,
-          tokens: state.value.tokens,
-          tokensReplace: true,
-
-          //invoke the locale.current as side effect so that the computed will rerun if the locale changes since the mask could be dependent on the locale
-          _locale: unref(locale.current),
-        }))
-      : null;
 
     const state = computed(() => convertDayjsToMaskaFormat(dateFormat.value));
+    const locale = useLocale();
+
+    const options = computed<MaskOptions | null>(() =>
+      useMask.value
+        ? {
+            mask: state.value.mask,
+            tokens: state.value.tokens,
+            tokensReplace: true,
+
+            // invoke locale.current so the mask recomputes when locale changes
+            _locale: unref(locale.current),
+          }
+        : null,
+    );
 
     const viewMode = ref<ViewModeType>('month');
 
@@ -365,13 +367,13 @@ const controlRenderer = defineComponent({
       },
     },
     pickerValue: {
-      get(): Date | undefined {
+      get(): Date | null {
         const value = this.control.data;
         const date = parseDateTime(value, this.formats);
         // show only valid values
-        return date ? date.toDate() : undefined;
+        return date ? date.toDate() : null;
       },
-      set(val: Date): void {
+      set(val: Date | null): void {
         this.onPickerChange(val);
       },
     },
@@ -395,29 +397,23 @@ const controlRenderer = defineComponent({
     },
   },
   methods: {
-    onPickerChange(value: Date): void {
+    onPickerChange(value: Date | null): void {
       const date = parseDateTime(value, undefined);
       let newdata: string | null = date
         ? date.format(this.dateSaveFormat)
         : null;
 
       this.onChange(newdata);
     },
-    updateDatePickerValue(
-      val: unknown,
-      proxyModel: Ref<Date | undefined>,
-    ): void {
+    updateDatePickerValue(val: unknown, proxyModel: Ref<Date | null>): void {
       if (this.showActions) {
-        proxyModel.value = val as Date;
+        proxyModel.value = val as Date | null;
       } else {
-        this.pickerValue = val as Date;
+        this.pickerValue = val as Date | null;
         this.showMenu = false;
       }
     },
-    updateDatePickerYear(
-      year: number,
-      proxyModel: Ref<Date | undefined>,
-    ): void {
+    updateDatePickerYear(year: number, proxyModel: Ref<Date | null>): void {
       if (this.showActions) {
         const date = new Date(proxyModel.value ?? new Date());
         date.setFullYear(year);
@@ -437,10 +433,7 @@ const controlRenderer = defineComponent({
         }
       }
     },
-    updateDatePickerMonth(
-      month: number,
-      proxyModel: Ref<Date | undefined>,
-    ): void {
+    updateDatePickerMonth(month: number, proxyModel: Ref<Date | null>): void {
       if (this.showActions) {
         const date = new Date(proxyModel.value ?? new Date());
         date.setMonth(month);