create separated CategorizationStepperRenderer and create CategoryIte…

…m type

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>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

packages/vue-vanilla/src/complex/Categorization.vue → 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>

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,
 ];

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;
+};

packages/vue-vanilla/src/util/index.ts

@@ -1,2 +1,3 @@
 export * from './options';
 export * from './composition';
+export * from './categorization';