create renderer for Radio Group in vue vanilla (WIP)

Author: davewwww

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

@@ -0,0 +1,58 @@
+<template>
+  <control-wrapper
+    v-bind="controlWrapper"
+    :styles="styles"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
+  >
+    <RadioGroupControl
+      :id="control.id"
+      :options="control.options"
+      :enabled="control.enabled"
+      :required="control.required"
+      :styles="styles"
+      :on-change="onChange"
+    />
+  </control-wrapper>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  and,
+  type ControlElement,
+  isEnumControl,
+  type JsonFormsRendererRegistryEntry,
+  optionIs,
+  rankWith,
+} from '@jsonforms/core';
+import {
+  rendererProps,
+  type RendererProps,
+  useJsonFormsEnumControl,
+} from '@jsonforms/vue';
+import { ControlWrapper } from '../controls';
+import { useVanillaControl } from '../util';
+import RadioGroupControl from './components/RadioGroupControl.vue';
+
+const controlRenderer = defineComponent({
+  name: 'RadioGroupControlRenderer',
+  components: {
+    RadioGroupControl,
+    ControlWrapper,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    return useVanillaControl(useJsonFormsEnumControl(props));
+  },
+});
+
+export default controlRenderer;
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(20, and(isEnumControl, optionIs('format', 'radio'))),
+};
+</script>

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

@@ -0,0 +1,59 @@
+<template>
+  <control-wrapper
+    v-bind="controlWrapper"
+    :styles="styles"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
+  >
+    <RadioGroupControl
+      :id="control.id"
+      :options="control.options"
+      :enabled="control.enabled"
+      :required="control.required"
+      :styles="styles"
+      :on-change="onChange"
+    />
+  </control-wrapper>
+</template>
+
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  and,
+  type ControlElement,
+  isOneOfEnumControl,
+  type JsonFormsRendererRegistryEntry,
+  optionIs,
+  rankWith,
+} from '@jsonforms/core';
+import {
+  rendererProps,
+  type RendererProps,
+  useJsonFormsOneOfEnumControl,
+} from '@jsonforms/vue';
+import { ControlWrapper } from '../controls';
+import { useVanillaControl } from '../util';
+import RadioGroupControl from './components/RadioGroupControl.vue';
+
+const controlRenderer = defineComponent({
+  name: 'RadioGroupControlRenderer',
+  components: {
+    RadioGroupControl,
+    ControlWrapper,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    return useVanillaControl(useJsonFormsOneOfEnumControl(props));
+  },
+});
+
+export default controlRenderer;
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(20, and(isOneOfEnumControl, optionIs('format', 'radio'))),
+};
+</script>

packages/vue-vanilla/src/complex/components/RadioGroupControl.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :id="id + '-input'" :class="styles.control.radioGroup">
+    <div
+      v-for="option in options"
+      :key="option.value"
+      :class="styles.control.radioGroupItem"
+    >
+      <input
+        :id="id + '.' + option.value"
+        type="radio"
+        :name="id"
+        :value="option.value"
+        :disabled="!enabled"
+        :required="required"
+        @change="onChange"
+      />
+
+      <label
+        :for="id + '.' + option.value"
+        :class="styles.control.radioGroupItemLabel"
+        >{{ option.label }}</label
+      >
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { Styles } from '../../styles';
+
+export default defineComponent({
+  name: 'RadioGroupControl',
+  props: {
+    id: {
+      required: true,
+      type: String,
+    },
+    enabled: {
+      required: false as const,
+      type: Boolean,
+      default: true,
+    },
+    required: {
+      required: false as const,
+      type: Boolean,
+      default: false,
+    },
+    styles: {
+      required: true,
+      type: Object as PropType<Styles>,
+    },
+    options: {
+      required: true,
+      type: Array,
+    },
+    onChange: {
+      required: true,
+      type: Function,
+    },
+  },
+});
+</script>

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

@@ -1,13 +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 RadioGroupEnumControlRenderer } from './RadioGroupEnumControlRenderer.vue';
+export { default as RadioGroupControlRenderer } from './RadioGroupOneOfControlRenderer.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 radioGroupEnumControlEntry } from './RadioGroupEnumControlRenderer.vue';
+import { entry as radioGroupOneOfControlEntry } from './RadioGroupOneOfControlRenderer.vue';
 
 export const complexRenderers = [
   objectRendererEntry,
   oneOfRendererEntry,
   enumArrayRendererEntry,
+  radioGroupEnumControlEntry,
+  radioGroupOneOfControlEntry,
 ];

packages/vue-vanilla/src/styles/defaultStyles.ts

@@ -7,6 +7,9 @@ export const defaultStyles: Styles = {
     label: 'label',
     description: 'description',
     input: 'input',
+    radioGroup: 'radio-group',
+    radioGroupItem: 'radio-group-item',
+    radioGroupItemLabel: 'radio-group-item-label',
     error: 'error',
     textarea: 'text-area',
     select: 'select',

packages/vue-vanilla/src/styles/styles.ts

@@ -23,6 +23,9 @@ export interface Styles {
     description?: string;
     error?: string;
     input?: string;
+    radioGroup?: string;
+    radioGroupItem?: string;
+    radioGroupItemLabel?: string;
     textarea?: string;
     select?: string;
     option?: string;