From 1ebc5401480fac958e218cb413352093f8c23083 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Mon, 5 Feb 2024 12:08:05 +0100
Subject: [PATCH 01/10] feat: add categorization renderer to Vue Vanilla
 Implemented also the stepper variant

---
 .../src/complex/Categorization.vue            | 146 ++++++++++++++++++
 packages/vue-vanilla/src/complex/index.ts     |   3 +
 .../vue-vanilla/src/styles/defaultStyles.ts   |  12 ++
 packages/vue-vanilla/src/styles/styles.ts     |  13 ++
 packages/vue-vanilla/src/util/composition.ts  |  24 ++-
 packages/vue-vanilla/vanilla.css              |  14 ++
 6 files changed, 211 insertions(+), 1 deletion(-)
 create mode 100644 packages/vue-vanilla/src/complex/Categorization.vue

diff --git a/packages/vue-vanilla/src/complex/Categorization.vue b/packages/vue-vanilla/src/complex/Categorization.vue
new file mode 100644
index 0000000000..a9afc84a82
--- /dev/null
+++ b/packages/vue-vanilla/src/complex/Categorization.vue
@@ -0,0 +1,146 @@
+<template>
+  <div :class="styles.categorization.root">
+    <div :class="[isStepper ? styles.categorization.stepper : styles.categorization.category]">
+
+      <template
+          v-for="(item, index) in categories"
+          :key="`tab-${index}`"
+      >
+
+        <div
+            @click="selected = index"
+        >
+          <button
+              :class="[selected === index ? styles.categorization.selected : '']"
+              :disabled="!item.isEnabled"
+          >
+            <span v-if="isStepper" :class="styles.categorization.stepperBadge">{{ index+1 }}</span>
+
+            <label>{{ item.label }}</label>
+          </button>
+        </div>
+
+        <hr v-if="isStepper && index!==categories.length-1" :class="styles.categorization.stepperLine" />
+
+      </template>
+
+
+    </div>
+
+    <div :class="styles.categorization.panel">
+      <DispatchRenderer
+          :schema="layout.schema"
+          :uischema="currentUischema"
+          :path="layout.path"
+          :enabled="layout.enabled"
+          :renderers="layout.renderers"
+          :cells="layout.cells"
+      />
+    </div>
+
+    <footer v-if="showNavButtons" :class="styles.categorization.stepperFooter">
+
+      <div @click="selected=selected-1" v-if="selected>0" :class="styles.categorization.stepperButtonNext">
+        <button :disabled="!categories[selected-1].isEnabled">
+          {{ t('categorizationStepperBack', 'back') }}
+        </button>
+      </div>
+
+      <div @click="selected=selected+1" v-if="selected+1<=categories.length-1" :class="styles.categorization.stepperButtonNext">
+        <button :disabled="!categories[selected+1].isEnabled">
+          {{ t('categorizationStepperNext', 'next') }}
+        </button>
+      </div>
+
+    </footer>
+  </div>
+</template>
+
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  isVisible,
+  rankWith,
+  createAjv,
+  isEnabled,
+  and,
+  categorizationHasCategory,
+  uiTypeIs,
+  deriveLabelForUISchemaElement,
+} from '@jsonforms/core';
+import type {
+  JsonFormsRendererRegistryEntry,
+  Layout,
+  Category,
+  Categorization,
+  UISchemaElement,
+} from '@jsonforms/core';
+import {
+  DispatchRenderer,
+  rendererProps,
+  useJsonFormsLayout,
+  type RendererProps,
+} from '@jsonforms/vue';
+import {useTranslator, useVanillaLayout} from '../util';
+
+const layoutRenderer = defineComponent({
+  name: 'CategorizationRenderer',
+  components: {
+    DispatchRenderer,
+  },
+  props: {
+    ...rendererProps<Layout>(),
+  },
+  setup(props: RendererProps<Layout>) {
+    const input = useVanillaLayout(useJsonFormsLayout(props));
+    const isStepper = 'stepper' === input.appliedOptions?.value.variant
+    const showNavButtons = isStepper && !!input.appliedOptions?.value.showNavButtons
+
+    return {
+      ...input,
+      isStepper, showNavButtons,
+      ajv: createAjv(),
+      t: useTranslator(),
+    };
+  },
+  data() {
+    return {
+      selected: 0,
+    };
+  },
+
+  computed: {
+    currentUischema(): UISchemaElement {
+      return this.categories[this.selected].element;
+    },
+    categories(): any {
+      return (this.layout.uischema as Categorization).elements
+          .filter((category: Category | Categorization) =>
+              isVisible(category, this.layout.data, this.layout.path, this.ajv)
+          )
+          .map((category: Category | Categorization) => {
+            return {
+              element: category,
+              isEnabled: isEnabled(
+                  category,
+                  this.layout.data,
+                  this.layout.path,
+                  this.ajv
+              ),
+              label: deriveLabelForUISchemaElement(category, this.t)
+            };
+          });
+    },
+  },
+});
+
+export default layoutRenderer;
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: layoutRenderer,
+  tester: rankWith(
+      2,
+      and(uiTypeIs('Categorization'), categorizationHasCategory)
+  ),
+};
+</script>
diff --git a/packages/vue-vanilla/src/complex/index.ts b/packages/vue-vanilla/src/complex/index.ts
index 418e816cb9..4916b88e82 100644
--- a/packages/vue-vanilla/src/complex/index.ts
+++ b/packages/vue-vanilla/src/complex/index.ts
@@ -1,13 +1,16 @@
 export { default as ObjectRenderer } from './ObjectRenderer.vue';
 export { default as OneOfRenderer } from './OneOfRenderer.vue';
 export { default as EnumArrayRenderer } from './EnumArrayRenderer.vue';
+export { default as CategorizationRenderer } from './Categorization.vue';
 
 import { entry as objectRendererEntry } from './ObjectRenderer.vue';
 import { entry as oneOfRendererEntry } from './OneOfRenderer.vue';
 import { entry as enumArrayRendererEntry } from './EnumArrayRenderer.vue';
+import { entry as categorizationEntry } from './Categorization.vue';
 
 export const complexRenderers = [
   objectRendererEntry,
   oneOfRendererEntry,
   enumArrayRendererEntry,
+  categorizationEntry,
 ];
diff --git a/packages/vue-vanilla/src/styles/defaultStyles.ts b/packages/vue-vanilla/src/styles/defaultStyles.ts
index 2c623c45a0..d8a2a5a233 100644
--- a/packages/vue-vanilla/src/styles/defaultStyles.ts
+++ b/packages/vue-vanilla/src/styles/defaultStyles.ts
@@ -57,4 +57,16 @@ export const defaultStyles: Styles = {
   oneOf: {
     root: 'one-of',
   },
+  categorization: {
+    root: 'categorization',
+    category: 'categorization-category',
+    selected: 'categorization-selected',
+    panel: 'categorization-panel',
+    stepper: 'categorization-stepper',
+    stepperBadge: 'categorization-stepper-badge',
+    stepperLine: 'categorization-stepper-line',
+    stepperFooter: 'categorization-stepper-footer',
+    stepperButtonBack: 'categorization-stepper-button-back',
+    stepperButtonNext: 'categorization-stepper-button-next',
+  }
 };
diff --git a/packages/vue-vanilla/src/styles/styles.ts b/packages/vue-vanilla/src/styles/styles.ts
index 8b8eeed940..8cb69adfc8 100644
--- a/packages/vue-vanilla/src/styles/styles.ts
+++ b/packages/vue-vanilla/src/styles/styles.ts
@@ -12,6 +12,7 @@ const createEmptyStyles = (): Styles => ({
   label: {},
   dialog: {},
   oneOf: {},
+  categorization: {},
 });
 
 export interface Styles {
@@ -71,6 +72,18 @@ export interface Styles {
   oneOf: {
     root?: string;
   };
+  categorization: {
+    root?: string;
+    category?: string;
+    selected?: string;
+    panel?: string;
+    stepper?: string;
+    stepperBadge?:string;
+    stepperLine?:string;
+    stepperFooter?:string;
+    stepperButtonBack?:string;
+    stepperButtonNext?:string;
+  };
 }
 
 export const useStyles = (element?: UISchemaElement) => {
diff --git a/packages/vue-vanilla/src/util/composition.ts b/packages/vue-vanilla/src/util/composition.ts
index 89bc88e6d4..167607ba53 100644
--- a/packages/vue-vanilla/src/util/composition.ts
+++ b/packages/vue-vanilla/src/util/composition.ts
@@ -1,5 +1,5 @@
 import { useStyles } from '../styles';
-import { computed, ref } from 'vue';
+import { computed, ref, inject } from 'vue';
 import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
 import {
@@ -7,6 +7,7 @@ import {
   findUISchema,
   getFirstPrimitiveProp,
   Resolve,
+  type JsonFormsSubStates
 } from '@jsonforms/core';
 
 /**
@@ -137,3 +138,24 @@ export const useVanillaArrayControl = <I extends { control: any }>(
     childLabelForIndex,
   };
 };
+
+export const useTranslator = () => {
+  const jsonforms = inject<JsonFormsSubStates>('jsonforms');
+
+  if (!jsonforms) {
+    throw new Error(
+        "'jsonforms couldn't be injected. Are you within JSON Forms?"
+    );
+  }
+
+  if (!jsonforms.i18n || !jsonforms.i18n.translate) {
+    throw new Error(
+        "'jsonforms i18n couldn't be injected. Are you within JSON Forms?"
+    );
+  }
+
+  return computed(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return jsonforms.i18n!.translate!;
+  });
+};
diff --git a/packages/vue-vanilla/vanilla.css b/packages/vue-vanilla/vanilla.css
index 725eb57d24..2273636ff5 100644
--- a/packages/vue-vanilla/vanilla.css
+++ b/packages/vue-vanilla/vanilla.css
@@ -77,3 +77,17 @@
 .array-list-item-content.expanded {
   display: block;
 }
+
+.categorization .categorization-category,
+.categorization .categorization-stepper {
+  display: flex;
+}
+.categorization .categorization-stepper-line {
+  flex-grow: 1;
+  height:1px;
+  border-width:0 0 1px 0;
+}
+.categorization .categorization-stepper-footer {
+  display: flex;
+  justify-content: flex-end;
+}

From 9ae7a5543e4793e6653223d82b6262e5ac254c6a Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Mon, 5 Feb 2024 13:53:41 +0100
Subject: [PATCH 02/10] call pnpm run lint:fix

---
 .../src/complex/Categorization.vue            | 111 ++++++++++--------
 .../vue-vanilla/src/styles/defaultStyles.ts   |   2 +-
 packages/vue-vanilla/src/styles/styles.ts     |  10 +-
 packages/vue-vanilla/src/util/composition.ts  |   6 +-
 4 files changed, 70 insertions(+), 59 deletions(-)

diff --git a/packages/vue-vanilla/src/complex/Categorization.vue b/packages/vue-vanilla/src/complex/Categorization.vue
index a9afc84a82..023099dc2f 100644
--- a/packages/vue-vanilla/src/complex/Categorization.vue
+++ b/packages/vue-vanilla/src/complex/Categorization.vue
@@ -1,57 +1,66 @@
 <template>
   <div :class="styles.categorization.root">
-    <div :class="[isStepper ? styles.categorization.stepper : styles.categorization.category]">
-
-      <template
-          v-for="(item, index) in categories"
-          :key="`tab-${index}`"
-      >
-
-        <div
-            @click="selected = index"
-        >
+    <div
+      :class="[
+        isStepper
+          ? styles.categorization.stepper
+          : styles.categorization.category,
+      ]"
+    >
+      <template v-for="(item, index) in categories" :key="`tab-${index}`">
+        <div @click="selected = index">
           <button
-              :class="[selected === index ? styles.categorization.selected : '']"
-              :disabled="!item.isEnabled"
+            :class="[selected === index ? styles.categorization.selected : '']"
+            :disabled="!item.isEnabled"
           >
-            <span v-if="isStepper" :class="styles.categorization.stepperBadge">{{ index+1 }}</span>
+            <span
+              v-if="isStepper"
+              :class="styles.categorization.stepperBadge"
+              >{{ index + 1 }}</span
+            >
 
             <label>{{ item.label }}</label>
           </button>
         </div>
 
-        <hr v-if="isStepper && index!==categories.length-1" :class="styles.categorization.stepperLine" />
-
+        <hr
+          v-if="isStepper && index !== categories.length - 1"
+          :class="styles.categorization.stepperLine"
+        />
       </template>
-
-
     </div>
 
     <div :class="styles.categorization.panel">
       <DispatchRenderer
-          :schema="layout.schema"
-          :uischema="currentUischema"
-          :path="layout.path"
-          :enabled="layout.enabled"
-          :renderers="layout.renderers"
-          :cells="layout.cells"
+        :schema="layout.schema"
+        :uischema="currentUischema"
+        :path="layout.path"
+        :enabled="layout.enabled"
+        :renderers="layout.renderers"
+        :cells="layout.cells"
       />
     </div>
 
     <footer v-if="showNavButtons" :class="styles.categorization.stepperFooter">
-
-      <div @click="selected=selected-1" v-if="selected>0" :class="styles.categorization.stepperButtonNext">
-        <button :disabled="!categories[selected-1].isEnabled">
+      <div
+        v-if="selected > 0"
+        :class="styles.categorization.stepperButtonNext"
+        @click="selected = selected - 1"
+      >
+        <button :disabled="!categories[selected - 1].isEnabled">
           {{ t('categorizationStepperBack', 'back') }}
         </button>
       </div>
 
-      <div @click="selected=selected+1" v-if="selected+1<=categories.length-1" :class="styles.categorization.stepperButtonNext">
-        <button :disabled="!categories[selected+1].isEnabled">
+      <div
+        v-if="selected + 1 <= categories.length - 1"
+        :class="styles.categorization.stepperButtonNext"
+        @click="selected = selected + 1"
+      >
+        <button :disabled="!categories[selected + 1].isEnabled">
           {{ t('categorizationStepperNext', 'next') }}
         </button>
       </div>
-
     </footer>
   </div>
 </template>
@@ -82,7 +91,7 @@ import {
   useJsonFormsLayout,
   type RendererProps,
 } from '@jsonforms/vue';
-import {useTranslator, useVanillaLayout} from '../util';
+import { useTranslator, useVanillaLayout } from '../util';
 
 const layoutRenderer = defineComponent({
   name: 'CategorizationRenderer',
@@ -94,12 +103,14 @@ const layoutRenderer = defineComponent({
   },
   setup(props: RendererProps<Layout>) {
     const input = useVanillaLayout(useJsonFormsLayout(props));
-    const isStepper = 'stepper' === input.appliedOptions?.value.variant
-    const showNavButtons = isStepper && !!input.appliedOptions?.value.showNavButtons
+    const isStepper = 'stepper' === input.appliedOptions?.value.variant;
+    const showNavButtons =
+      isStepper && !!input.appliedOptions?.value.showNavButtons;
 
     return {
       ...input,
-      isStepper, showNavButtons,
+      isStepper,
+      showNavButtons,
       ajv: createAjv(),
       t: useTranslator(),
     };
@@ -116,21 +127,21 @@ const layoutRenderer = defineComponent({
     },
     categories(): any {
       return (this.layout.uischema as Categorization).elements
-          .filter((category: Category | Categorization) =>
-              isVisible(category, this.layout.data, this.layout.path, this.ajv)
-          )
-          .map((category: Category | Categorization) => {
-            return {
-              element: category,
-              isEnabled: isEnabled(
-                  category,
-                  this.layout.data,
-                  this.layout.path,
-                  this.ajv
-              ),
-              label: deriveLabelForUISchemaElement(category, this.t)
-            };
-          });
+        .filter((category: Category | Categorization) =>
+          isVisible(category, this.layout.data, this.layout.path, this.ajv)
+        )
+        .map((category: Category | Categorization) => {
+          return {
+            element: category,
+            isEnabled: isEnabled(
+              category,
+              this.layout.data,
+              this.layout.path,
+              this.ajv
+            ),
+            label: deriveLabelForUISchemaElement(category, this.t),
+          };
+        });
     },
   },
 });
@@ -139,8 +150,8 @@ export default layoutRenderer;
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: layoutRenderer,
   tester: rankWith(
-      2,
-      and(uiTypeIs('Categorization'), categorizationHasCategory)
+    2,
+    and(uiTypeIs('Categorization'), categorizationHasCategory)
   ),
 };
 </script>
diff --git a/packages/vue-vanilla/src/styles/defaultStyles.ts b/packages/vue-vanilla/src/styles/defaultStyles.ts
index d8a2a5a233..cc467fde1d 100644
--- a/packages/vue-vanilla/src/styles/defaultStyles.ts
+++ b/packages/vue-vanilla/src/styles/defaultStyles.ts
@@ -68,5 +68,5 @@ export const defaultStyles: Styles = {
     stepperFooter: 'categorization-stepper-footer',
     stepperButtonBack: 'categorization-stepper-button-back',
     stepperButtonNext: 'categorization-stepper-button-next',
-  }
+  },
 };
diff --git a/packages/vue-vanilla/src/styles/styles.ts b/packages/vue-vanilla/src/styles/styles.ts
index 8cb69adfc8..a054c9cc56 100644
--- a/packages/vue-vanilla/src/styles/styles.ts
+++ b/packages/vue-vanilla/src/styles/styles.ts
@@ -78,11 +78,11 @@ export interface Styles {
     selected?: string;
     panel?: string;
     stepper?: string;
-    stepperBadge?:string;
-    stepperLine?:string;
-    stepperFooter?:string;
-    stepperButtonBack?:string;
-    stepperButtonNext?:string;
+    stepperBadge?: string;
+    stepperLine?: string;
+    stepperFooter?: string;
+    stepperButtonBack?: string;
+    stepperButtonNext?: string;
   };
 }
 
diff --git a/packages/vue-vanilla/src/util/composition.ts b/packages/vue-vanilla/src/util/composition.ts
index 167607ba53..491ecccab7 100644
--- a/packages/vue-vanilla/src/util/composition.ts
+++ b/packages/vue-vanilla/src/util/composition.ts
@@ -7,7 +7,7 @@ import {
   findUISchema,
   getFirstPrimitiveProp,
   Resolve,
-  type JsonFormsSubStates
+  type JsonFormsSubStates,
 } from '@jsonforms/core';
 
 /**
@@ -144,13 +144,13 @@ export const useTranslator = () => {
 
   if (!jsonforms) {
     throw new Error(
-        "'jsonforms couldn't be injected. Are you within JSON Forms?"
+      "'jsonforms couldn't be injected. Are you within JSON Forms?"
     );
   }
 
   if (!jsonforms.i18n || !jsonforms.i18n.translate) {
     throw new Error(
-        "'jsonforms i18n couldn't be injected. Are you within JSON Forms?"
+      "'jsonforms i18n couldn't be injected. Are you within JSON Forms?"
     );
   }
 

From c042e1fbb4f552b8d63f450800ccfcb627426892 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Mon, 5 Feb 2024 21:40:31 +0100
Subject: [PATCH 03/10] dev: add tests for categorization vue vanilla renderer

---
 .../complex/CategorizationRenderer.spec.ts    | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts

diff --git a/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts b/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts
new file mode 100644
index 0000000000..7eba7a8c60
--- /dev/null
+++ b/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts
@@ -0,0 +1,83 @@
+import { expect } from 'chai';
+import { mountJsonForms } from '../util';
+
+const schema = {
+  type: 'string',
+};
+const uischema = {
+  type: 'Categorization',
+  elements: [
+    {
+      type: 'Category',
+      label: 'A',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#',
+        },
+      ],
+    },
+    {
+      type: 'Category',
+      label: 'B',
+      elements: [],
+    },
+  ],
+};
+
+const uischemaStepper = {
+  ...uischema,
+  options: {
+    variant: 'stepper',
+  },
+};
+const uischemaStepperNav = {
+  ...uischema,
+  options: {
+    variant: 'stepper',
+    showNavButtons: true,
+  },
+};
+
+describe('CategorizationRenderer.vue', () => {
+  it('renders categorization', () => {
+    const wrapper = mountJsonForms('', schema, uischema);
+    expect(wrapper.find('.categorization').exists()).to.be.true;
+  });
+
+  it('renders 2 category items', async () => {
+    const wrapper = mountJsonForms('', schema, uischema);
+    const inputs = wrapper.findAll('.categorization-category > *');
+    expect(inputs.length).to.equal(2);
+  });
+
+  it('renders 1 panel item', async () => {
+    const wrapper = mountJsonForms('', schema, uischema);
+    const inputs = wrapper.findAll('.categorization-panel > *');
+    expect(inputs.length).to.equal(1);
+  });
+
+  it('renders categorization as stepper', () => {
+    const wrapper = mountJsonForms('', schema, uischemaStepper);
+    expect(wrapper.find('.categorization-stepper').exists()).to.be.true;
+  });
+
+  it('renders 2 stepper items and one line', () => {
+    const wrapper = mountJsonForms('', schema, uischemaStepper);
+    const inputs = wrapper.findAll('.categorization-stepper > div');
+    expect(inputs.length).to.equal(2);
+    const lines = wrapper.findAll('.categorization-stepper > hr');
+    expect(lines.length).to.equal(1);
+  });
+
+  it('renders a next button at stepper nav bar', () => {
+    const wrapper = mountJsonForms('', schema, uischemaStepperNav);
+    expect(
+      wrapper
+        .find(
+          '.categorization footer.categorization-stepper-footer > div.categorization-stepper-button-next'
+        )
+        .exists()
+    ).to.be.true;
+  });
+});

From 4fb85e3576bb7a6136c953972984f16a743dba88 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Thu, 15 Feb 2024 22:12:20 +0100
Subject: [PATCH 04/10] create separated CategorizationStepperRenderer and
 create CategoryItem type

---
 .../src/complex/CategorizationRenderer.vue    | 192 ++++++++++++++++++
 ....vue => CategorizationStepperRenderer.vue} |  57 ++----
 packages/vue-vanilla/src/complex/index.ts     |   7 +-
 .../vue-vanilla/src/util/categorization.ts    |   7 +
 packages/vue-vanilla/src/util/index.ts        |   1 +
 .../complex/CategorizationRenderer.spec.ts    |  38 ----
 .../CategorizationStepperRenderer.spec.ts     |  63 ++++++
 7 files changed, 290 insertions(+), 75 deletions(-)
 create mode 100644 packages/vue-vanilla/src/complex/CategorizationRenderer.vue
 rename packages/vue-vanilla/src/complex/{Categorization.vue => CategorizationStepperRenderer.vue} (71%)
 create mode 100644 packages/vue-vanilla/src/util/categorization.ts
 create mode 100644 packages/vue-vanilla/tests/unit/complex/CategorizationStepperRenderer.spec.ts

diff --git a/packages/vue-vanilla/src/complex/CategorizationRenderer.vue b/packages/vue-vanilla/src/complex/CategorizationRenderer.vue
new file mode 100644
index 0000000000..cb2287e5a0
--- /dev/null
+++ b/packages/vue-vanilla/src/complex/CategorizationRenderer.vue
@@ -0,0 +1,192 @@
+<template>
+  <div :class="styles.categorization.root">
+    <div :class="styles.categorization.category">
+      <template v-for="(item, index) in categories" :key="`tab-${index}`">
+        <div @click="selected = index">
+          <button
+            :class="[selected === index ? styles.categorization.selected : '']"
+            :disabled="!item.isEnabled"
+          >
+            <label>{{ item.label }}</label>
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <div :class="styles.categorization.panel">
+      <DispatchRenderer
+        :schema="layout.schema"
+        :uischema="currentUischema"
+        :path="layout.path"
+        :enabled="layout.enabled"
+        :renderers="layout.renderers"
+        :cells="layout.cells"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type {
+  Categorization,
+  JsonFormsRendererRegistryEntry,
+  Layout,
+  UISchemaElement,
+} from '@jsonforms/core';
+import {
+  and,
+  categorizationHasCategory,
+  createAjv,
+  deriveLabelForUISchemaElement,
+  isEnabled,
+  isVisible,
+  rankWith,
+  isCategorization,
+} from '@jsonforms/core';
+import {
+  DispatchRenderer,
+  rendererProps,
+  type RendererProps,
+  useJsonFormsLayout,
+} from '@jsonforms/vue';
+import { type CategoryItem, useTranslator, useVanillaLayout } from '../util';
+
+const layoutRenderer = defineComponent({
+  name: 'CategorizationRenderer',
+  components: {
+    DispatchRenderer,
+  },
+  props: {
+    ...rendererProps<Layout>(),
+  },
+  setup(props: RendererProps<Layout>) {
+    const input = useVanillaLayout(useJsonFormsLayout(props));
+
+    return {
+      ...input,
+      ajv: createAjv(),
+      t: useTranslator(),
+    };
+  },
+  data() {
+    return {
+      selected: 0,
+    };
+  },
+
+  computed: {
+    currentUischema(): UISchemaElement {
+      return this.categories[this.selected].element;
+    },
+    categories(): CategoryItem[] {
+      const { data, path } = this.layout;
+      return (this.layout.uischema as Categorization).elements
+        .filter((category) => isVisible(category, data, path, this.ajv))
+        .map((category): CategoryItem => {
+          return {
+            element: category,
+            isEnabled: isEnabled(category, data, path, this.ajv),
+            label: deriveLabelForUISchemaElement(category, this.t),
+          };
+        });
+    },
+  },
+});
+
+export default layoutRenderer;
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: layoutRenderer,
+  tester: rankWith(2, and(isCategorization, categorizationHasCategory)),
+};
+</script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/vue-vanilla/src/complex/Categorization.vue b/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
similarity index 71%
rename from packages/vue-vanilla/src/complex/Categorization.vue
rename to packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
index 023099dc2f..e8e5631dc9 100644
--- a/packages/vue-vanilla/src/complex/Categorization.vue
+++ b/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
@@ -1,30 +1,22 @@
 <template>
   <div :class="styles.categorization.root">
-    <div
-      :class="[
-        isStepper
-          ? styles.categorization.stepper
-          : styles.categorization.category,
-      ]"
-    >
+    <div :class="styles.categorization.stepper">
       <template v-for="(item, index) in categories" :key="`tab-${index}`">
         <div @click="selected = index">
           <button
             :class="[selected === index ? styles.categorization.selected : '']"
             :disabled="!item.isEnabled"
           >
-            <span
-              v-if="isStepper"
-              :class="styles.categorization.stepperBadge"
-              >{{ index + 1 }}</span
-            >
+            <span :class="styles.categorization.stepperBadge">{{
+              index + 1
+            }}</span>
 
             <label>{{ item.label }}</label>
           </button>
         </div>
 
         <hr
-          v-if="isStepper && index !== categories.length - 1"
+          v-if="index !== categories.length - 1"
           :class="styles.categorization.stepperLine"
         />
       </template>
@@ -75,13 +67,13 @@ import {
   isEnabled,
   and,
   categorizationHasCategory,
-  uiTypeIs,
   deriveLabelForUISchemaElement,
+  optionIs,
+  isCategorization,
 } from '@jsonforms/core';
 import type {
   JsonFormsRendererRegistryEntry,
   Layout,
-  Category,
   Categorization,
   UISchemaElement,
 } from '@jsonforms/core';
@@ -91,10 +83,10 @@ import {
   useJsonFormsLayout,
   type RendererProps,
 } from '@jsonforms/vue';
-import { useTranslator, useVanillaLayout } from '../util';
+import { type CategoryItem, useTranslator, useVanillaLayout } from '../util';
 
 const layoutRenderer = defineComponent({
-  name: 'CategorizationRenderer',
+  name: 'CategorizationStepperRenderer',
   components: {
     DispatchRenderer,
   },
@@ -103,13 +95,10 @@ const layoutRenderer = defineComponent({
   },
   setup(props: RendererProps<Layout>) {
     const input = useVanillaLayout(useJsonFormsLayout(props));
-    const isStepper = 'stepper' === input.appliedOptions?.value.variant;
-    const showNavButtons =
-      isStepper && !!input.appliedOptions?.value.showNavButtons;
+    const showNavButtons = !!input.appliedOptions?.value.showNavButtons;
 
     return {
       ...input,
-      isStepper,
       showNavButtons,
       ajv: createAjv(),
       t: useTranslator(),
@@ -125,22 +114,16 @@ const layoutRenderer = defineComponent({
     currentUischema(): UISchemaElement {
       return this.categories[this.selected].element;
     },
-    categories(): any {
+    categories(): CategoryItem[] {
+      const { data, path } = this.layout;
       return (this.layout.uischema as Categorization).elements
-        .filter((category: Category | Categorization) =>
-          isVisible(category, this.layout.data, this.layout.path, this.ajv)
-        )
-        .map((category: Category | Categorization) => {
+        .filter((category) => isVisible(category, data, path, this.ajv))
+        .map((category) => {
           return {
             element: category,
-            isEnabled: isEnabled(
-              category,
-              this.layout.data,
-              this.layout.path,
-              this.ajv
-            ),
+            isEnabled: isEnabled(category, data, path, this.ajv),
             label: deriveLabelForUISchemaElement(category, this.t),
-          };
+          } as CategoryItem;
         });
     },
   },
@@ -150,8 +133,12 @@ export default layoutRenderer;
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: layoutRenderer,
   tester: rankWith(
-    2,
-    and(uiTypeIs('Categorization'), categorizationHasCategory)
+    3,
+    and(
+      isCategorization,
+      categorizationHasCategory,
+      optionIs('variant', 'stepper')
+    )
   ),
 };
 </script>
diff --git a/packages/vue-vanilla/src/complex/index.ts b/packages/vue-vanilla/src/complex/index.ts
index 4916b88e82..5eb9262a50 100644
--- a/packages/vue-vanilla/src/complex/index.ts
+++ b/packages/vue-vanilla/src/complex/index.ts
@@ -1,16 +1,19 @@
 export { default as ObjectRenderer } from './ObjectRenderer.vue';
 export { default as OneOfRenderer } from './OneOfRenderer.vue';
 export { default as EnumArrayRenderer } from './EnumArrayRenderer.vue';
-export { default as CategorizationRenderer } from './Categorization.vue';
+export { default as CategorizationRenderer } from './CategorizationRenderer.vue';
+export { default as CategorizationStepperRenderer } from './CategorizationStepperRenderer.vue';
 
 import { entry as objectRendererEntry } from './ObjectRenderer.vue';
 import { entry as oneOfRendererEntry } from './OneOfRenderer.vue';
 import { entry as enumArrayRendererEntry } from './EnumArrayRenderer.vue';
-import { entry as categorizationEntry } from './Categorization.vue';
+import { entry as categorizationEntry } from './CategorizationRenderer.vue';
+import { entry as categorizationStepperEntry } from './CategorizationStepperRenderer.vue';
 
 export const complexRenderers = [
   objectRendererEntry,
   oneOfRendererEntry,
   enumArrayRendererEntry,
   categorizationEntry,
+  categorizationStepperEntry,
 ];
diff --git a/packages/vue-vanilla/src/util/categorization.ts b/packages/vue-vanilla/src/util/categorization.ts
new file mode 100644
index 0000000000..c2941b8ef5
--- /dev/null
+++ b/packages/vue-vanilla/src/util/categorization.ts
@@ -0,0 +1,7 @@
+import { Categorization, Category } from '@jsonforms/core';
+
+export type CategoryItem = {
+  element: Category | Categorization;
+  isEnabled: boolean;
+  label?: string;
+};
diff --git a/packages/vue-vanilla/src/util/index.ts b/packages/vue-vanilla/src/util/index.ts
index e1d5a59634..1c7fcd421f 100644
--- a/packages/vue-vanilla/src/util/index.ts
+++ b/packages/vue-vanilla/src/util/index.ts
@@ -1,2 +1,3 @@
 export * from './options';
 export * from './composition';
+export * from './categorization';
diff --git a/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts b/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts
index 7eba7a8c60..7c1bfc2e9c 100644
--- a/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts
+++ b/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts
@@ -25,20 +25,6 @@ const uischema = {
   ],
 };
 
-const uischemaStepper = {
-  ...uischema,
-  options: {
-    variant: 'stepper',
-  },
-};
-const uischemaStepperNav = {
-  ...uischema,
-  options: {
-    variant: 'stepper',
-    showNavButtons: true,
-  },
-};
-
 describe('CategorizationRenderer.vue', () => {
   it('renders categorization', () => {
     const wrapper = mountJsonForms('', schema, uischema);
@@ -56,28 +42,4 @@ describe('CategorizationRenderer.vue', () => {
     const inputs = wrapper.findAll('.categorization-panel > *');
     expect(inputs.length).to.equal(1);
   });
-
-  it('renders categorization as stepper', () => {
-    const wrapper = mountJsonForms('', schema, uischemaStepper);
-    expect(wrapper.find('.categorization-stepper').exists()).to.be.true;
-  });
-
-  it('renders 2 stepper items and one line', () => {
-    const wrapper = mountJsonForms('', schema, uischemaStepper);
-    const inputs = wrapper.findAll('.categorization-stepper > div');
-    expect(inputs.length).to.equal(2);
-    const lines = wrapper.findAll('.categorization-stepper > hr');
-    expect(lines.length).to.equal(1);
-  });
-
-  it('renders a next button at stepper nav bar', () => {
-    const wrapper = mountJsonForms('', schema, uischemaStepperNav);
-    expect(
-      wrapper
-        .find(
-          '.categorization footer.categorization-stepper-footer > div.categorization-stepper-button-next'
-        )
-        .exists()
-    ).to.be.true;
-  });
 });
diff --git a/packages/vue-vanilla/tests/unit/complex/CategorizationStepperRenderer.spec.ts b/packages/vue-vanilla/tests/unit/complex/CategorizationStepperRenderer.spec.ts
new file mode 100644
index 0000000000..9fd0f01aec
--- /dev/null
+++ b/packages/vue-vanilla/tests/unit/complex/CategorizationStepperRenderer.spec.ts
@@ -0,0 +1,63 @@
+import { expect } from 'chai';
+import { mountJsonForms } from '../util';
+
+const schema = {
+  type: 'string',
+};
+const uischema = {
+  type: 'Categorization',
+  elements: [
+    {
+      type: 'Category',
+      label: 'A',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#',
+        },
+      ],
+    },
+    {
+      type: 'Category',
+      label: 'B',
+      elements: [],
+    },
+  ],
+  options: {
+    variant: 'stepper',
+  },
+};
+
+const uischemaNav = {
+  ...uischema,
+  options: {
+    variant: 'stepper',
+    showNavButtons: true,
+  },
+};
+
+describe('CategorizationStepperRenderer.vue', () => {
+  it('renders categorization as stepper', () => {
+    const wrapper = mountJsonForms('', schema, uischema);
+    expect(wrapper.find('.categorization-stepper').exists()).to.be.true;
+  });
+
+  it('renders 2 stepper items and one line', () => {
+    const wrapper = mountJsonForms('', schema, uischema);
+    const inputs = wrapper.findAll('.categorization-stepper > div');
+    expect(inputs.length).to.equal(2);
+    const lines = wrapper.findAll('.categorization-stepper > hr');
+    expect(lines.length).to.equal(1);
+  });
+
+  it('renders a next button at stepper nav bar', () => {
+    const wrapper = mountJsonForms('', schema, uischemaNav);
+    expect(
+      wrapper
+        .find(
+          '.categorization footer.categorization-stepper-footer > div.categorization-stepper-button-next'
+        )
+        .exists()
+    ).to.be.true;
+  });
+});

From c841387321a4d0db221c11f1e3fb06f261924f9a Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Fri, 16 Feb 2024 13:35:04 +0100
Subject: [PATCH 05/10] create useJsonFormsCategorization function to simplify
 renderers and use existing mapStateToLayoutProps to create props for category

---
 .../src/complex/CategorizationRenderer.vue    | 147 ++----------------
 .../complex/CategorizationStepperRenderer.vue |  75 +++------
 .../vue-vanilla/src/util/categorization.ts    |  22 ++-
 packages/vue-vanilla/src/util/composition.ts  |  24 +--
 4 files changed, 58 insertions(+), 210 deletions(-)

diff --git a/packages/vue-vanilla/src/complex/CategorizationRenderer.vue b/packages/vue-vanilla/src/complex/CategorizationRenderer.vue
index cb2287e5a0..9149ad1bd1 100644
--- a/packages/vue-vanilla/src/complex/CategorizationRenderer.vue
+++ b/packages/vue-vanilla/src/complex/CategorizationRenderer.vue
@@ -1,13 +1,16 @@
 <template>
   <div :class="styles.categorization.root">
     <div :class="styles.categorization.category">
-      <template v-for="(item, index) in categories" :key="`tab-${index}`">
-        <div @click="selected = index">
+      <template
+        v-for="(category, index) in categories"
+        :key="`category-${index}`"
+      >
+        <div v-if="category.value.visible" @click="selected = index">
           <button
             :class="[selected === index ? styles.categorization.selected : '']"
-            :disabled="!item.isEnabled"
+            :disabled="!category.value.enabled"
           >
-            <label>{{ item.label }}</label>
+            <label>{{ category.value.label }}</label>
           </button>
         </div>
       </template>
@@ -15,8 +18,9 @@
 
     <div :class="styles.categorization.panel">
       <DispatchRenderer
+        v-if="categories[selected]"
         :schema="layout.schema"
-        :uischema="currentUischema"
+        :uischema="categories[selected].value.uischema"
         :path="layout.path"
         :enabled="layout.enabled"
         :renderers="layout.renderers"
@@ -28,29 +32,19 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import type {
-  Categorization,
-  JsonFormsRendererRegistryEntry,
-  Layout,
-  UISchemaElement,
-} from '@jsonforms/core';
+import type { JsonFormsRendererRegistryEntry, Layout } from '@jsonforms/core';
 import {
   and,
   categorizationHasCategory,
-  createAjv,
-  deriveLabelForUISchemaElement,
-  isEnabled,
-  isVisible,
-  rankWith,
   isCategorization,
+  rankWith,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
   rendererProps,
   type RendererProps,
-  useJsonFormsLayout,
 } from '@jsonforms/vue';
-import { type CategoryItem, useTranslator, useVanillaLayout } from '../util';
+import { useJsonFormsCategorization, useVanillaLayout } from '../util';
 
 const layoutRenderer = defineComponent({
   name: 'CategorizationRenderer',
@@ -61,37 +55,13 @@ const layoutRenderer = defineComponent({
     ...rendererProps<Layout>(),
   },
   setup(props: RendererProps<Layout>) {
-    const input = useVanillaLayout(useJsonFormsLayout(props));
-
-    return {
-      ...input,
-      ajv: createAjv(),
-      t: useTranslator(),
-    };
+    return useVanillaLayout(useJsonFormsCategorization(props));
   },
   data() {
     return {
       selected: 0,
     };
   },
-
-  computed: {
-    currentUischema(): UISchemaElement {
-      return this.categories[this.selected].element;
-    },
-    categories(): CategoryItem[] {
-      const { data, path } = this.layout;
-      return (this.layout.uischema as Categorization).elements
-        .filter((category) => isVisible(category, data, path, this.ajv))
-        .map((category): CategoryItem => {
-          return {
-            element: category,
-            isEnabled: isEnabled(category, data, path, this.ajv),
-            label: deriveLabelForUISchemaElement(category, this.t),
-          };
-        });
-    },
-  },
 });
 
 export default layoutRenderer;
@@ -101,92 +71,5 @@ export const entry: JsonFormsRendererRegistryEntry = {
 };
 </script>
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+<script setup lang="ts">
+</script>
diff --git a/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue b/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
index e8e5631dc9..d977527784 100644
--- a/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
+++ b/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
@@ -1,22 +1,25 @@
 <template>
   <div :class="styles.categorization.root">
     <div :class="styles.categorization.stepper">
-      <template v-for="(item, index) in categories" :key="`tab-${index}`">
-        <div @click="selected = index">
+      <template
+        v-for="(category, index) in visibleCategories"
+        :key="`tab-${index}`"
+      >
+        <div v-if="category.value.visible" @click="selected = index">
           <button
             :class="[selected === index ? styles.categorization.selected : '']"
-            :disabled="!item.isEnabled"
+            :disabled="!category.value.enabled"
           >
             <span :class="styles.categorization.stepperBadge">{{
               index + 1
             }}</span>
 
-            <label>{{ item.label }}</label>
+            <label>{{ category.value.label }}</label>
           </button>
         </div>
 
         <hr
-          v-if="index !== categories.length - 1"
+          v-if="index !== visibleCategories.length - 1"
           :class="styles.categorization.stepperLine"
         />
       </template>
@@ -24,8 +27,9 @@
 
     <div :class="styles.categorization.panel">
       <DispatchRenderer
+        v-if="visibleCategories[selected]"
         :schema="layout.schema"
-        :uischema="currentUischema"
+        :uischema="visibleCategories[selected].value.uischema"
         :path="layout.path"
         :enabled="layout.enabled"
         :renderers="layout.renderers"
@@ -33,14 +37,17 @@
       />
     </div>
 
-    <footer v-if="showNavButtons" :class="styles.categorization.stepperFooter">
+    <footer
+      v-if="appliedOptions?.showNavButtons"
+      :class="styles.categorization.stepperFooter"
+    >
       <div
         v-if="selected > 0"
         :class="styles.categorization.stepperButtonNext"
         @click="selected = selected - 1"
       >
-        <button :disabled="!categories[selected - 1].isEnabled">
-          {{ t('categorizationStepperBack', 'back') }}
+        <button :disabled="!categories[selected - 1].value.visible">
+          {{ 'back' }}
         </button>
       </div>
 
@@ -49,41 +56,30 @@
         :class="styles.categorization.stepperButtonNext"
         @click="selected = selected + 1"
       >
-        <button :disabled="!categories[selected + 1].isEnabled">
-          {{ t('categorizationStepperNext', 'next') }}
+        <button :disabled="!categories[selected + 1].value.visible">
+          {{ 'next' }}
         </button>
       </div>
     </footer>
   </div>
 </template>
 
-
 <script lang="ts">
 import { defineComponent } from 'vue';
+import type { JsonFormsRendererRegistryEntry, Layout } from '@jsonforms/core';
 import {
-  isVisible,
-  rankWith,
-  createAjv,
-  isEnabled,
   and,
   categorizationHasCategory,
-  deriveLabelForUISchemaElement,
-  optionIs,
   isCategorization,
-} from '@jsonforms/core';
-import type {
-  JsonFormsRendererRegistryEntry,
-  Layout,
-  Categorization,
-  UISchemaElement,
+  optionIs,
+  rankWith,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
   rendererProps,
-  useJsonFormsLayout,
   type RendererProps,
 } from '@jsonforms/vue';
-import { type CategoryItem, useTranslator, useVanillaLayout } from '../util';
+import { useJsonFormsCategorization, useVanillaLayout } from '../util';
 
 const layoutRenderer = defineComponent({
   name: 'CategorizationStepperRenderer',
@@ -94,37 +90,16 @@ const layoutRenderer = defineComponent({
     ...rendererProps<Layout>(),
   },
   setup(props: RendererProps<Layout>) {
-    const input = useVanillaLayout(useJsonFormsLayout(props));
-    const showNavButtons = !!input.appliedOptions?.value.showNavButtons;
-
-    return {
-      ...input,
-      showNavButtons,
-      ajv: createAjv(),
-      t: useTranslator(),
-    };
+    return useVanillaLayout(useJsonFormsCategorization(props));
   },
   data() {
     return {
       selected: 0,
     };
   },
-
   computed: {
-    currentUischema(): UISchemaElement {
-      return this.categories[this.selected].element;
-    },
-    categories(): CategoryItem[] {
-      const { data, path } = this.layout;
-      return (this.layout.uischema as Categorization).elements
-        .filter((category) => isVisible(category, data, path, this.ajv))
-        .map((category) => {
-          return {
-            element: category,
-            isEnabled: isEnabled(category, data, path, this.ajv),
-            label: deriveLabelForUISchemaElement(category, this.t),
-          } as CategoryItem;
-        });
+    visibleCategories() {
+      return this.categories.filter((category) => category.value.visible);
     },
   },
 });
diff --git a/packages/vue-vanilla/src/util/categorization.ts b/packages/vue-vanilla/src/util/categorization.ts
index c2941b8ef5..9457754d01 100644
--- a/packages/vue-vanilla/src/util/categorization.ts
+++ b/packages/vue-vanilla/src/util/categorization.ts
@@ -1,7 +1,19 @@
-import { Categorization, Category } from '@jsonforms/core';
+import { type Categorization, mapStateToLayoutProps } from '@jsonforms/core';
+import { type LayoutProps, useControl } from '@jsonforms/vue';
 
-export type CategoryItem = {
-  element: Category | Categorization;
-  isEnabled: boolean;
-  label?: string;
+export const useJsonFormsCategorization = (props: LayoutProps) => {
+  const { control, ...other } = useControl(props, mapStateToLayoutProps);
+
+  const categories = (control.value.uischema as Categorization).elements.map(
+    (category) => {
+      const categoryProps: LayoutProps = {
+        ...props,
+        uischema: category,
+      };
+
+      return useControl(categoryProps, mapStateToLayoutProps).control;
+    }
+  );
+
+  return { layout: control, categories, ...other };
 };
diff --git a/packages/vue-vanilla/src/util/composition.ts b/packages/vue-vanilla/src/util/composition.ts
index 491ecccab7..89bc88e6d4 100644
--- a/packages/vue-vanilla/src/util/composition.ts
+++ b/packages/vue-vanilla/src/util/composition.ts
@@ -1,5 +1,5 @@
 import { useStyles } from '../styles';
-import { computed, ref, inject } from 'vue';
+import { computed, ref } from 'vue';
 import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
 import {
@@ -7,7 +7,6 @@ import {
   findUISchema,
   getFirstPrimitiveProp,
   Resolve,
-  type JsonFormsSubStates,
 } from '@jsonforms/core';
 
 /**
@@ -138,24 +137,3 @@ export const useVanillaArrayControl = <I extends { control: any }>(
     childLabelForIndex,
   };
 };
-
-export const useTranslator = () => {
-  const jsonforms = inject<JsonFormsSubStates>('jsonforms');
-
-  if (!jsonforms) {
-    throw new Error(
-      "'jsonforms couldn't be injected. Are you within JSON Forms?"
-    );
-  }
-
-  if (!jsonforms.i18n || !jsonforms.i18n.translate) {
-    throw new Error(
-      "'jsonforms i18n couldn't be injected. Are you within JSON Forms?"
-    );
-  }
-
-  return computed(() => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return jsonforms.i18n!.translate!;
-  });
-};

From df72bdfdd1de306855fffa33fac43ba527c23b75 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Fri, 16 Feb 2024 14:02:31 +0100
Subject: [PATCH 06/10] use visibleCategories at footer and fix disabled check

---
 .../src/complex/CategorizationStepperRenderer.vue           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue b/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
index d977527784..ee88589539 100644
--- a/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
+++ b/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
@@ -46,17 +46,17 @@
         :class="styles.categorization.stepperButtonNext"
         @click="selected = selected - 1"
       >
-        <button :disabled="!categories[selected - 1].value.visible">
+        <button :disabled="!visibleCategories[selected - 1].value.enabled">
           {{ 'back' }}
         </button>
       </div>
 
       <div
-        v-if="selected + 1 <= categories.length - 1"
+        v-if="selected + 1 <= visibleCategories.length - 1"
         :class="styles.categorization.stepperButtonNext"
         @click="selected = selected + 1"
       >
-        <button :disabled="!categories[selected + 1].value.visible">
+        <button :disabled="!visibleCategories[selected + 1].value.enabled">
           {{ 'next' }}
         </button>
       </div>

From 01f12d7ed1ca63cd4b701cecfab448ab861ee4ea Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Mon, 19 Feb 2024 17:33:30 +0100
Subject: [PATCH 07/10] move useJsonFormsCategorization to vue package and
 simplify it with useJsonFormsLayout, fix class at back button, simplify next
 page check

---
 .../src/complex/CategorizationRenderer.vue    |  6 ++---
 .../complex/CategorizationStepperRenderer.vue |  7 +++---
 .../vue-vanilla/src/util/categorization.ts    | 19 ---------------
 packages/vue-vanilla/src/util/index.ts        |  1 -
 packages/vue-vanilla/vanilla.css              |  4 ++--
 packages/vue/src/jsonFormsCompositions.ts     | 24 +++++++++++++++++++
 6 files changed, 32 insertions(+), 29 deletions(-)
 delete mode 100644 packages/vue-vanilla/src/util/categorization.ts

diff --git a/packages/vue-vanilla/src/complex/CategorizationRenderer.vue b/packages/vue-vanilla/src/complex/CategorizationRenderer.vue
index 9149ad1bd1..561539ca56 100644
--- a/packages/vue-vanilla/src/complex/CategorizationRenderer.vue
+++ b/packages/vue-vanilla/src/complex/CategorizationRenderer.vue
@@ -42,9 +42,10 @@ import {
 import {
   DispatchRenderer,
   rendererProps,
+  useJsonFormsCategorization,
   type RendererProps,
 } from '@jsonforms/vue';
-import { useJsonFormsCategorization, useVanillaLayout } from '../util';
+import { useVanillaLayout } from '../util';
 
 const layoutRenderer = defineComponent({
   name: 'CategorizationRenderer',
@@ -70,6 +71,3 @@ export const entry: JsonFormsRendererRegistryEntry = {
   tester: rankWith(2, and(isCategorization, categorizationHasCategory)),
 };
 </script>
-
-<script setup lang="ts">
-</script>
diff --git a/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue b/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
index ee88589539..c34ee0d4ad 100644
--- a/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
+++ b/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
@@ -43,7 +43,7 @@
     >
       <div
         v-if="selected > 0"
-        :class="styles.categorization.stepperButtonNext"
+        :class="styles.categorization.stepperButtonBack"
         @click="selected = selected - 1"
       >
         <button :disabled="!visibleCategories[selected - 1].value.enabled">
@@ -52,7 +52,7 @@
       </div>
 
       <div
-        v-if="selected + 1 <= visibleCategories.length - 1"
+        v-if="selected + 1 < visibleCategories.length"
         :class="styles.categorization.stepperButtonNext"
         @click="selected = selected + 1"
       >
@@ -77,9 +77,10 @@ import {
 import {
   DispatchRenderer,
   rendererProps,
+  useJsonFormsCategorization,
   type RendererProps,
 } from '@jsonforms/vue';
-import { useJsonFormsCategorization, useVanillaLayout } from '../util';
+import { useVanillaLayout } from '../util';
 
 const layoutRenderer = defineComponent({
   name: 'CategorizationStepperRenderer',
diff --git a/packages/vue-vanilla/src/util/categorization.ts b/packages/vue-vanilla/src/util/categorization.ts
deleted file mode 100644
index 9457754d01..0000000000
--- a/packages/vue-vanilla/src/util/categorization.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { type Categorization, mapStateToLayoutProps } from '@jsonforms/core';
-import { type LayoutProps, useControl } from '@jsonforms/vue';
-
-export const useJsonFormsCategorization = (props: LayoutProps) => {
-  const { control, ...other } = useControl(props, mapStateToLayoutProps);
-
-  const categories = (control.value.uischema as Categorization).elements.map(
-    (category) => {
-      const categoryProps: LayoutProps = {
-        ...props,
-        uischema: category,
-      };
-
-      return useControl(categoryProps, mapStateToLayoutProps).control;
-    }
-  );
-
-  return { layout: control, categories, ...other };
-};
diff --git a/packages/vue-vanilla/src/util/index.ts b/packages/vue-vanilla/src/util/index.ts
index 1c7fcd421f..e1d5a59634 100644
--- a/packages/vue-vanilla/src/util/index.ts
+++ b/packages/vue-vanilla/src/util/index.ts
@@ -1,3 +1,2 @@
 export * from './options';
 export * from './composition';
-export * from './categorization';
diff --git a/packages/vue-vanilla/vanilla.css b/packages/vue-vanilla/vanilla.css
index 2273636ff5..403cb85750 100644
--- a/packages/vue-vanilla/vanilla.css
+++ b/packages/vue-vanilla/vanilla.css
@@ -84,8 +84,8 @@
 }
 .categorization .categorization-stepper-line {
   flex-grow: 1;
-  height:1px;
-  border-width:0 0 1px 0;
+  height: 1px;
+  border-width: 0 0 1px 0;
 }
 .categorization .categorization-stepper-footer {
   display: flex;
diff --git a/packages/vue/src/jsonFormsCompositions.ts b/packages/vue/src/jsonFormsCompositions.ts
index 7d8d80e1e4..eeb6f4c2b5 100644
--- a/packages/vue/src/jsonFormsCompositions.ts
+++ b/packages/vue/src/jsonFormsCompositions.ts
@@ -35,6 +35,7 @@ import {
   mapDispatchToMultiEnumProps,
   mapStateToLabelProps,
   LabelElement,
+  Categorization,
 } from '@jsonforms/core';
 import {
   PropType,
@@ -474,3 +475,26 @@ export const useJsonFormsDispatchCell = (props: ControlProps) => {
   );
   return { cell: control, ...other };
 };
+
+
+/**
+ * Provides bindings for 'Categorization' elements.
+ *
+ * Access bindings via the provided `categories` array with reactive category objects.
+ */
+export const useJsonFormsCategorization = (props: LayoutProps) => {
+  const { layout, ...other } = useJsonFormsLayout(props);
+
+  const categories = (layout.value.uischema as Categorization).elements.map(
+      (category) => {
+        const categoryProps: LayoutProps = {
+          ...props,
+          uischema: category,
+        };
+
+        return useJsonFormsLayout(categoryProps).layout;
+      }
+  );
+
+  return { layout, categories, ...other };
+};

From f24ad1d6ff772980aa1aa57b4934ad04c519bac4 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Mon, 19 Feb 2024 18:01:22 +0100
Subject: [PATCH 08/10] move categorization renderers to layouts directory

---
 packages/vue-vanilla/src/complex/index.ts             |  6 ------
 .../{complex => layouts}/CategorizationRenderer.vue   |  0
 .../CategorizationStepperRenderer.vue                 |  0
 packages/vue-vanilla/src/layouts/index.ts             | 11 ++++++++++-
 4 files changed, 10 insertions(+), 7 deletions(-)
 rename packages/vue-vanilla/src/{complex => layouts}/CategorizationRenderer.vue (100%)
 rename packages/vue-vanilla/src/{complex => layouts}/CategorizationStepperRenderer.vue (100%)

diff --git a/packages/vue-vanilla/src/complex/index.ts b/packages/vue-vanilla/src/complex/index.ts
index 5eb9262a50..418e816cb9 100644
--- a/packages/vue-vanilla/src/complex/index.ts
+++ b/packages/vue-vanilla/src/complex/index.ts
@@ -1,19 +1,13 @@
 export { default as ObjectRenderer } from './ObjectRenderer.vue';
 export { default as OneOfRenderer } from './OneOfRenderer.vue';
 export { default as EnumArrayRenderer } from './EnumArrayRenderer.vue';
-export { default as CategorizationRenderer } from './CategorizationRenderer.vue';
-export { default as CategorizationStepperRenderer } from './CategorizationStepperRenderer.vue';
 
 import { entry as objectRendererEntry } from './ObjectRenderer.vue';
 import { entry as oneOfRendererEntry } from './OneOfRenderer.vue';
 import { entry as enumArrayRendererEntry } from './EnumArrayRenderer.vue';
-import { entry as categorizationEntry } from './CategorizationRenderer.vue';
-import { entry as categorizationStepperEntry } from './CategorizationStepperRenderer.vue';
 
 export const complexRenderers = [
   objectRendererEntry,
   oneOfRendererEntry,
   enumArrayRendererEntry,
-  categorizationEntry,
-  categorizationStepperEntry,
 ];
diff --git a/packages/vue-vanilla/src/complex/CategorizationRenderer.vue b/packages/vue-vanilla/src/layouts/CategorizationRenderer.vue
similarity index 100%
rename from packages/vue-vanilla/src/complex/CategorizationRenderer.vue
rename to packages/vue-vanilla/src/layouts/CategorizationRenderer.vue
diff --git a/packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue b/packages/vue-vanilla/src/layouts/CategorizationStepperRenderer.vue
similarity index 100%
rename from packages/vue-vanilla/src/complex/CategorizationStepperRenderer.vue
rename to packages/vue-vanilla/src/layouts/CategorizationStepperRenderer.vue
diff --git a/packages/vue-vanilla/src/layouts/index.ts b/packages/vue-vanilla/src/layouts/index.ts
index f85b8e7c40..be5ffa4127 100644
--- a/packages/vue-vanilla/src/layouts/index.ts
+++ b/packages/vue-vanilla/src/layouts/index.ts
@@ -1,7 +1,16 @@
 export { default as LayoutRenderer } from './LayoutRenderer.vue';
 export { default as GroupRenderer } from './GroupRenderer.vue';
+export { default as CategorizationRenderer } from '../layouts/CategorizationRenderer.vue';
+export { default as CategorizationStepperRenderer } from '../layouts/CategorizationStepperRenderer.vue';
 
 import { entry as layoutRendererEntry } from './LayoutRenderer.vue';
 import { entry as groupRendererEntry } from './GroupRenderer.vue';
+import { entry as categorizationEntry } from '../layouts/CategorizationRenderer.vue';
+import { entry as categorizationStepperEntry } from '../layouts/CategorizationStepperRenderer.vue';
 
-export const layoutRenderers = [layoutRendererEntry, groupRendererEntry];
+export const layoutRenderers = [
+  layoutRendererEntry,
+  groupRendererEntry,
+  categorizationEntry,
+  categorizationStepperEntry,
+];

From 5c9491f487b12b22aa7862e6aca3e04af3a4e055 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Tue, 20 Feb 2024 11:34:23 +0100
Subject: [PATCH 09/10] lint:fix

---
 packages/vue/src/jsonFormsCompositions.ts | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/vue/src/jsonFormsCompositions.ts b/packages/vue/src/jsonFormsCompositions.ts
index eeb6f4c2b5..a9ffc6b324 100644
--- a/packages/vue/src/jsonFormsCompositions.ts
+++ b/packages/vue/src/jsonFormsCompositions.ts
@@ -476,7 +476,6 @@ export const useJsonFormsDispatchCell = (props: ControlProps) => {
   return { cell: control, ...other };
 };
 
-
 /**
  * Provides bindings for 'Categorization' elements.
  *
@@ -486,14 +485,14 @@ export const useJsonFormsCategorization = (props: LayoutProps) => {
   const { layout, ...other } = useJsonFormsLayout(props);
 
   const categories = (layout.value.uischema as Categorization).elements.map(
-      (category) => {
-        const categoryProps: LayoutProps = {
-          ...props,
-          uischema: category,
-        };
-
-        return useJsonFormsLayout(categoryProps).layout;
-      }
+    (category) => {
+      const categoryProps: LayoutProps = {
+        ...props,
+        uischema: category,
+      };
+
+      return useJsonFormsLayout(categoryProps).layout;
+    }
   );
 
   return { layout, categories, ...other };

From 7a946425f8e61d19c3f6eb48465fc5e19a44b783 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Wed, 21 Feb 2024 16:58:37 +0100
Subject: [PATCH 10/10] move tests to correct folder

---
 .../unit/{complex => layouts}/CategorizationRenderer.spec.ts      | 0
 .../{complex => layouts}/CategorizationStepperRenderer.spec.ts    | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/vue-vanilla/tests/unit/{complex => layouts}/CategorizationRenderer.spec.ts (100%)
 rename packages/vue-vanilla/tests/unit/{complex => layouts}/CategorizationStepperRenderer.spec.ts (100%)

diff --git a/packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts b/packages/vue-vanilla/tests/unit/layouts/CategorizationRenderer.spec.ts
similarity index 100%
rename from packages/vue-vanilla/tests/unit/complex/CategorizationRenderer.spec.ts
rename to packages/vue-vanilla/tests/unit/layouts/CategorizationRenderer.spec.ts
diff --git a/packages/vue-vanilla/tests/unit/complex/CategorizationStepperRenderer.spec.ts b/packages/vue-vanilla/tests/unit/layouts/CategorizationStepperRenderer.spec.ts
similarity index 100%
rename from packages/vue-vanilla/tests/unit/complex/CategorizationStepperRenderer.spec.ts
rename to packages/vue-vanilla/tests/unit/layouts/CategorizationStepperRenderer.spec.ts