vue-vuetify: Extract control entries and fix usage instructions

packages/vue-vuetify/README.md

@@ -36,10 +36,9 @@ Use the `json-forms` component for each form you want to render and hand over th
 ```vue
 <script>
 import { JsonForms } from '@jsonforms/vue';
+import { extendedVuetifyRenderers } from '@jsonforms/vue-vuetify';
 import { markRaw } from 'vue';
 
-const { extendedVuetifyRenderers } = await import('@jsonforms/vue-vuetify');
-
 const renderers = markRaw([
   ...extendedVuetifyRenderers,
   // here you can add custom renderers

packages/vue-vuetify/src/additional/LabelRenderer.entry.ts

@@ -0,0 +1,11 @@
+import {
+  rankWith,
+  uiTypeIs,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import labelRenderer from './LabelRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: labelRenderer,
+  tester: rankWith(1, uiTypeIs('Label')),
+};

packages/vue-vuetify/src/additional/LabelRenderer.vue

@@ -9,12 +9,7 @@
 </template>
 
 <script lang="ts">
-import {
-  rankWith,
-  uiTypeIs,
-  type JsonFormsRendererRegistryEntry,
-  type LabelElement,
-} from '@jsonforms/core';
+import { type LabelElement } from '@jsonforms/core';
 import {
   rendererProps,
   useJsonFormsLabel,
@@ -38,9 +33,4 @@ const labelRenderer = defineComponent({
 });
 
 export default labelRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: labelRenderer,
-  tester: rankWith(1, uiTypeIs('Label')),
-};
 </script>

packages/vue-vuetify/src/additional/ListWithDetailRenderer.entry.ts

@@ -0,0 +1,13 @@
+import {
+  and,
+  isObjectArray,
+  rankWith,
+  uiTypeIs,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './ListWithDetailRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(4, and(uiTypeIs('ListWithDetail'), isObjectArray)),
+};

packages/vue-vuetify/src/additional/ListWithDetailRenderer.vue

@@ -318,11 +318,6 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(4, and(uiTypeIs('ListWithDetail'), isObjectArray)),
-};
 </script>
 
 <style scoped>

packages/vue-vuetify/src/additional/index.ts

@@ -1,8 +1,8 @@
 export { default as LabelRenderer } from './LabelRenderer.vue';
 export { default as ListWithDetailRenderer } from './ListWithDetailRenderer.vue';
 
-import { entry as labelRendererEntry } from './LabelRenderer.vue';
-import { entry as listWithDetailRendererEntry } from './ListWithDetailRenderer.vue';
+import { entry as labelRendererEntry } from './LabelRenderer.entry';
+import { entry as listWithDetailRendererEntry } from './ListWithDetailRenderer.entry';
 
 export const additionalRenderers = [
   labelRendererEntry,

packages/vue-vuetify/src/complex/AllOfRenderer.entry.ts

@@ -0,0 +1,11 @@
+import {
+  isAllOfControl,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './AllOfRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(3, isAllOfControl),
+};

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

@@ -36,11 +36,8 @@
 import {
   createCombinatorRenderInfos,
   findMatchingUISchema,
-  isAllOfControl,
-  rankWith,
   type CombinatorSubSchemaRenderInfo,
   type ControlElement,
-  type JsonFormsRendererRegistryEntry,
   type UISchemaElement,
 } from '@jsonforms/core';
 import {
@@ -90,9 +87,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(3, isAllOfControl),
-};
 </script>

packages/vue-vuetify/src/complex/AnyOfRenderer.entry.ts

@@ -0,0 +1,11 @@
+import {
+  isAnyOfControl,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './AnyOfRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(3, isAnyOfControl),
+};

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

@@ -39,9 +39,6 @@ import {
   type CombinatorSubSchemaRenderInfo,
   type ControlElement,
   createCombinatorRenderInfos,
-  isAnyOfControl,
-  type JsonFormsRendererRegistryEntry,
-  rankWith,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
@@ -94,9 +91,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(3, isAnyOfControl),
-};
 </script>

packages/vue-vuetify/src/complex/ArrayControlRenderer.entry.ts

@@ -0,0 +1,13 @@
+import {
+  isObjectArrayControl,
+  isPrimitiveArrayControl,
+  or,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './ArrayControlRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl)),
+};

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

@@ -181,12 +181,7 @@ import {
   Resolve,
   composePaths,
   createDefaultValue,
-  isObjectArrayControl,
-  isPrimitiveArrayControl,
-  or,
-  rankWith,
   type ControlElement,
-  type JsonFormsRendererRegistryEntry,
   type JsonSchema,
 } from '@jsonforms/core';
 import {
@@ -303,11 +298,6 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl)),
-};
 </script>
 
 <style scoped>

packages/vue-vuetify/src/complex/EnumArrayRenderer.entry.ts

@@ -0,0 +1,42 @@
+import {
+  and,
+  hasType,
+  rankWith,
+  schemaMatches,
+  schemaSubPathMatches,
+  uiTypeIs,
+  type JsonFormsRendererRegistryEntry,
+  type JsonSchema,
+} from '@jsonforms/core';
+import controlRenderer from './EnumArrayRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(
+    5,
+    and(
+      uiTypeIs('Control'),
+      and(
+        schemaMatches(
+          (schema) =>
+            hasType(schema, 'array') &&
+            !Array.isArray(schema.items) &&
+            schema.uniqueItems === true,
+        ),
+        schemaSubPathMatches('items', (schema) => {
+          return hasOneOfItems(schema) || hasEnumItems(schema);
+        }),
+      ),
+    ),
+  ),
+};
+
+const hasOneOfItems = (schema: JsonSchema): boolean =>
+  schema.oneOf !== undefined &&
+  schema.oneOf.length > 0 &&
+  (schema.oneOf as JsonSchema[]).every((entry: JsonSchema) => {
+    return entry.const !== undefined;
+  });
+
+const hasEnumItems = (schema: JsonSchema): boolean =>
+  schema.type === 'string' && schema.enum !== undefined;

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

@@ -19,18 +19,7 @@
 </template>
 
 <script lang="ts">
-import {
-  and,
-  type ControlElement,
-  hasType,
-  type JsonFormsRendererRegistryEntry,
-  type JsonSchema,
-  rankWith,
-  schemaMatches,
-  schemaSubPathMatches,
-  uiTypeIs,
-  composePaths,
-} from '@jsonforms/core';
+import { type ControlElement, composePaths } from '@jsonforms/core';
 import { VCheckbox, VContainer, VRow, VCol } from 'vuetify/components';
 import {
   rendererProps,
@@ -71,35 +60,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-const hasOneOfItems = (schema: JsonSchema): boolean =>
-  schema.oneOf !== undefined &&
-  schema.oneOf.length > 0 &&
-  (schema.oneOf as JsonSchema[]).every((entry: JsonSchema) => {
-    return entry.const !== undefined;
-  });
-
-const hasEnumItems = (schema: JsonSchema): boolean =>
-  schema.type === 'string' && schema.enum !== undefined;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(
-    5,
-    and(
-      uiTypeIs('Control'),
-      and(
-        schemaMatches(
-          (schema) =>
-            hasType(schema, 'array') &&
-            !Array.isArray(schema.items) &&
-            schema.uniqueItems === true,
-        ),
-        schemaSubPathMatches('items', (schema) => {
-          return hasOneOfItems(schema) || hasEnumItems(schema);
-        }),
-      ),
-    ),
-  ),
-};
 </script>

packages/vue-vuetify/src/complex/ObjectRenderer.entry.ts

@@ -0,0 +1,11 @@
+import {
+  isObjectControl,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './ObjectRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(2, isObjectControl),
+};

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

@@ -111,9 +111,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isObjectControl),
-};
 </script>

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

@@ -0,0 +1,11 @@
+import {
+  isOneOfControl,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './OneOfRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(3, isOneOfControl),
+};

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

@@ -80,9 +80,6 @@ import {
   type ControlElement,
   createCombinatorRenderInfos,
   createDefaultValue,
-  isOneOfControl,
-  type JsonFormsRendererRegistryEntry,
-  rankWith,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
@@ -213,9 +210,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(3, isOneOfControl),
-};
 </script>

packages/vue-vuetify/src/complex/OneOfTabRenderer.entry.ts

@@ -0,0 +1,13 @@
+import {
+  and,
+  isOneOfControl,
+  optionIs,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './OneOfTabRenderer.vue';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(4, and(isOneOfControl, optionIs('variant', 'tab'))),
+};

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

@@ -59,15 +59,10 @@
 
 <script lang="ts">
 import {
-  and,
   type CombinatorSubSchemaRenderInfo,
   type ControlElement,
   createCombinatorRenderInfos,
   createDefaultValue,
-  isOneOfControl,
-  type JsonFormsRendererRegistryEntry,
-  optionIs,
-  rankWith,
 } from '@jsonforms/core';
 import {
   DispatchRenderer,
@@ -187,9 +182,4 @@ const controlRenderer = defineComponent({
 });
 
 export default controlRenderer;
-
-export const entry: JsonFormsRendererRegistryEntry = {
-  renderer: controlRenderer,
-  tester: rankWith(4, and(isOneOfControl, optionIs('variant', 'tab'))),
-};
 </script>