vue-vanilla: add categorization renderers (#2270)

* add categorization renderer to Vue Vanilla
* Implemented also the stepper variant
* dev: add tests for categorization vue vanilla renderer
* add useJsonFormsCategorization to vue core package to get categorization composition props

packages/vue-vanilla/src/layouts/CategorizationRenderer.vue

@@ -0,0 +1,73 @@
+<template>
+  <div :class="styles.categorization.root">
+    <div :class="styles.categorization.category">
+      <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="!category.value.enabled"
+          >
+            <label>{{ category.value.label }}</label>
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <div :class="styles.categorization.panel">
+      <DispatchRenderer
+        v-if="categories[selected]"
+        :schema="layout.schema"
+        :uischema="categories[selected].value.uischema"
+        :path="layout.path"
+        :enabled="layout.enabled"
+        :renderers="layout.renderers"
+        :cells="layout.cells"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { JsonFormsRendererRegistryEntry, Layout } from '@jsonforms/core';
+import {
+  and,
+  categorizationHasCategory,
+  isCategorization,
+  rankWith,
+} from '@jsonforms/core';
+import {
+  DispatchRenderer,
+  rendererProps,
+  useJsonFormsCategorization,
+  type RendererProps,
+} from '@jsonforms/vue';
+import { useVanillaLayout } from '../util';
+
+const layoutRenderer = defineComponent({
+  name: 'CategorizationRenderer',
+  components: {
+    DispatchRenderer,
+  },
+  props: {
+    ...rendererProps<Layout>(),
+  },
+  setup(props: RendererProps<Layout>) {
+    return useVanillaLayout(useJsonFormsCategorization(props));
+  },
+  data() {
+    return {
+      selected: 0,
+    };
+  },
+});
+
+export default layoutRenderer;
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: layoutRenderer,
+  tester: rankWith(2, and(isCategorization, categorizationHasCategory)),
+};
+</script>

packages/vue-vanilla/src/layouts/CategorizationStepperRenderer.vue

@@ -0,0 +1,120 @@
+<template>
+  <div :class="styles.categorization.root">
+    <div :class="styles.categorization.stepper">
+      <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="!category.value.enabled"
+          >
+            <span :class="styles.categorization.stepperBadge">{{
+              index + 1
+            }}</span>
+
+            <label>{{ category.value.label }}</label>
+          </button>
+        </div>
+
+        <hr
+          v-if="index !== visibleCategories.length - 1"
+          :class="styles.categorization.stepperLine"
+        />
+      </template>
+    </div>
+
+    <div :class="styles.categorization.panel">
+      <DispatchRenderer
+        v-if="visibleCategories[selected]"
+        :schema="layout.schema"
+        :uischema="visibleCategories[selected].value.uischema"
+        :path="layout.path"
+        :enabled="layout.enabled"
+        :renderers="layout.renderers"
+        :cells="layout.cells"
+      />
+    </div>
+
+    <footer
+      v-if="appliedOptions?.showNavButtons"
+      :class="styles.categorization.stepperFooter"
+    >
+      <div
+        v-if="selected > 0"
+        :class="styles.categorization.stepperButtonBack"
+        @click="selected = selected - 1"
+      >
+        <button :disabled="!visibleCategories[selected - 1].value.enabled">
+          {{ 'back' }}
+        </button>
+      </div>
+
+      <div
+        v-if="selected + 1 < visibleCategories.length"
+        :class="styles.categorization.stepperButtonNext"
+        @click="selected = selected + 1"
+      >
+        <button :disabled="!visibleCategories[selected + 1].value.enabled">
+          {{ 'next' }}
+        </button>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { JsonFormsRendererRegistryEntry, Layout } from '@jsonforms/core';
+import {
+  and,
+  categorizationHasCategory,
+  isCategorization,
+  optionIs,
+  rankWith,
+} from '@jsonforms/core';
+import {
+  DispatchRenderer,
+  rendererProps,
+  useJsonFormsCategorization,
+  type RendererProps,
+} from '@jsonforms/vue';
+import { useVanillaLayout } from '../util';
+
+const layoutRenderer = defineComponent({
+  name: 'CategorizationStepperRenderer',
+  components: {
+    DispatchRenderer,
+  },
+  props: {
+    ...rendererProps<Layout>(),
+  },
+  setup(props: RendererProps<Layout>) {
+    return useVanillaLayout(useJsonFormsCategorization(props));
+  },
+  data() {
+    return {
+      selected: 0,
+    };
+  },
+  computed: {
+    visibleCategories() {
+      return this.categories.filter((category) => category.value.visible);
+    },
+  },
+});
+
+export default layoutRenderer;
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: layoutRenderer,
+  tester: rankWith(
+    3,
+    and(
+      isCategorization,
+      categorizationHasCategory,
+      optionIs('variant', 'stepper')
+    )
+  ),
+};
+</script>

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

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

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) => {

packages/vue-vanilla/tests/unit/layouts/CategorizationRenderer.spec.ts

@@ -0,0 +1,45 @@
+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: [],
+    },
+  ],
+};
+
+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);
+  });
+});

packages/vue-vanilla/tests/unit/layouts/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;
+  });
+});

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