From 08e447cf839dca0c266abd524872d501ee92513a Mon Sep 17 00:00:00 2001 From: Michael Date: Tue, 26 Mar 2024 10:25:25 +0900 Subject: [PATCH] fix vite not including SFC template part of component, move entries to index as described here https://github.com/eclipsesource/jsonforms-vue-seed/issues/13 --- .../form/array/ArrayListElement.vue | 1 + .../form/array/ArrayListRenderer.vue | 16 +--- src/components/form/array/index.ts | 10 ++- src/components/form/complex/AllOfRenderer.vue | 18 +--- .../form/complex/EnumArrayRenderer.vue | 37 +------- src/components/form/complex/index.ts | 56 +++++++++--- .../controls/BooleanToggleControlRenderer.vue | 7 +- .../form/controls/ColorControlRenderer.vue | 7 +- .../controls/EnumArrayControlRenderer.vue | 37 +------- .../form/controls/EnumControlRenderer.vue | 7 +- .../form/controls/NumberControlRenderer.vue | 7 +- .../form/controls/SliderControlRenderer.vue | 9 +- .../form/controls/StringControlRenderer.vue | 7 +- src/components/form/controls/index.ts | 89 +++++++++++++++---- .../form/layouts/LayoutRenderer.vue | 9 +- .../layouts/TopLevelNavigationRenderer.vue | 26 +++--- src/components/form/layouts/index.ts | 20 +++-- src/components/form/util/composition.ts | 26 ++++-- src/components/form/util/validator.ts | 10 ++- src/pages/ConfigPage.vue | 43 ++++----- src/pages/PlaygroundPage.vue | 5 +- 21 files changed, 211 insertions(+), 236 deletions(-) diff --git a/src/components/form/array/ArrayListElement.vue b/src/components/form/array/ArrayListElement.vue index ba7afe9..40f16f5 100644 --- a/src/components/form/array/ArrayListElement.vue +++ b/src/components/form/array/ArrayListElement.vue @@ -23,6 +23,7 @@ diff --git a/src/components/form/array/index.ts b/src/components/form/array/index.ts index 83d9c90..353151e 100644 --- a/src/components/form/array/index.ts +++ b/src/components/form/array/index.ts @@ -1,5 +1,9 @@ -export { default as ArrayListRenderer } from './ArrayListRenderer.vue'; +import { JsonFormsRendererRegistryEntry, rankWith, schemaTypeIs } from '@jsonforms/core'; -import { entry as arrayListRendererEntry } from './ArrayListRenderer.vue'; +import { default as ArrayListRenderer } from './ArrayListRenderer.vue'; -export const arrayRenderers = [arrayListRendererEntry]; +export const ArrayListRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: ArrayListRenderer, + tester: rankWith(2.1, schemaTypeIs('array')), +}; +export const arrayRenderers = [ArrayListRendererEntry]; diff --git a/src/components/form/complex/AllOfRenderer.vue b/src/components/form/complex/AllOfRenderer.vue index a03284f..25e41e8 100644 --- a/src/components/form/complex/AllOfRenderer.vue +++ b/src/components/form/complex/AllOfRenderer.vue @@ -29,16 +29,7 @@ diff --git a/src/components/form/complex/EnumArrayRenderer.vue b/src/components/form/complex/EnumArrayRenderer.vue index 2ca3744..526fa9d 100644 --- a/src/components/form/complex/EnumArrayRenderer.vue +++ b/src/components/form/complex/EnumArrayRenderer.vue @@ -16,17 +16,7 @@ diff --git a/src/components/form/complex/index.ts b/src/components/form/complex/index.ts index 7b9def6..3b29a4a 100644 --- a/src/components/form/complex/index.ts +++ b/src/components/form/complex/index.ts @@ -1,24 +1,58 @@ -export { default as AllOfRenderer } from './AllOfRenderer.vue'; +import { + isAllOfControl, + JsonFormsRendererRegistryEntry, + rankWith, + and, + hasType, + JsonSchema, + schemaMatches, + schemaSubPathMatches, + uiTypeIs, +} from '@jsonforms/core'; + +import { default as AllOfRenderer } from './AllOfRenderer.vue'; // export { default as AnyOfRenderer } from "./AnyOfRenderer.vue"; // export { default as ArrayControlRenderer } from "./ArrayControlRenderer.vue"; -export { default as EnumArrayRenderer } from './EnumArrayRenderer.vue'; +import { default as EnumArrayRenderer } from './EnumArrayRenderer.vue'; // export { default as ObjectRenderer } from "./ObjectRenderer.vue"; // export { default as OneOfRenderer } from "./OneOfRenderer.vue"; // export { default as OneOfTabRenderer } from "./OneOfTabRenderer.vue"; -import { entry as allOfRendererEntry } from './AllOfRenderer.vue'; -// import { entry as anyOfRendererEntry } from "./AnyOfRenderer.vue"; -// import { entry as arrayControlRendererEntry } from "./ArrayControlRenderer.vue"; -import { entry as enumArrayRendererEntry } from './EnumArrayRenderer.vue'; -// import { entry as objectRendererEntry } from "./ObjectRenderer.vue"; -// import { entry as oneOfRendererEntry } from "./OneOfRenderer.vue"; -// import { entry as oneOfTabRendererEntry } from "./OneOfTabRenderer.vue"; +export const AllOfRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: AllOfRenderer, + tester: rankWith(3, isAllOfControl), +}; + +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 EnumArrayRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: EnumArrayRenderer, + tester: rankWith( + 5.1, + and( + uiTypeIs('Control'), + and( + schemaMatches((schema) => hasType(schema, 'array') && !Array.isArray(schema.items)), + schemaSubPathMatches('items', (schema) => { + return hasOneOfItems(schema) || hasEnumItems(schema); + }), + ), + ), + ), +}; export const complexRenderers = [ - allOfRendererEntry, + AllOfRendererEntry, // anyOfRendererEntry, // arrayControlRendererEntry, - enumArrayRendererEntry, + EnumArrayRendererEntry, // objectRendererEntry, // oneOfRendererEntry, // oneOfTabRendererEntry, diff --git a/src/components/form/controls/BooleanToggleControlRenderer.vue b/src/components/form/controls/BooleanToggleControlRenderer.vue index 5652a36..a41416f 100644 --- a/src/components/form/controls/BooleanToggleControlRenderer.vue +++ b/src/components/form/controls/BooleanToggleControlRenderer.vue @@ -14,7 +14,7 @@ diff --git a/src/components/form/controls/ColorControlRenderer.vue b/src/components/form/controls/ColorControlRenderer.vue index e887fe8..c711788 100644 --- a/src/components/form/controls/ColorControlRenderer.vue +++ b/src/components/form/controls/ColorControlRenderer.vue @@ -19,7 +19,7 @@ diff --git a/src/components/form/controls/EnumArrayControlRenderer.vue b/src/components/form/controls/EnumArrayControlRenderer.vue index 379aee6..50a20ef 100644 --- a/src/components/form/controls/EnumArrayControlRenderer.vue +++ b/src/components/form/controls/EnumArrayControlRenderer.vue @@ -18,17 +18,7 @@ diff --git a/src/components/form/controls/EnumControlRenderer.vue b/src/components/form/controls/EnumControlRenderer.vue index 642e109..2cc1f9c 100644 --- a/src/components/form/controls/EnumControlRenderer.vue +++ b/src/components/form/controls/EnumControlRenderer.vue @@ -17,7 +17,7 @@ diff --git a/src/components/form/controls/NumberControlRenderer.vue b/src/components/form/controls/NumberControlRenderer.vue index cece153..347e608 100644 --- a/src/components/form/controls/NumberControlRenderer.vue +++ b/src/components/form/controls/NumberControlRenderer.vue @@ -19,7 +19,7 @@ diff --git a/src/components/form/controls/SliderControlRenderer.vue b/src/components/form/controls/SliderControlRenderer.vue index 4039dc7..31dcf63 100644 --- a/src/components/form/controls/SliderControlRenderer.vue +++ b/src/components/form/controls/SliderControlRenderer.vue @@ -20,7 +20,7 @@ diff --git a/src/components/form/controls/StringControlRenderer.vue b/src/components/form/controls/StringControlRenderer.vue index 57804e9..8b768d4 100644 --- a/src/components/form/controls/StringControlRenderer.vue +++ b/src/components/form/controls/StringControlRenderer.vue @@ -17,7 +17,7 @@ diff --git a/src/components/form/controls/index.ts b/src/components/form/controls/index.ts index 06967a1..cf2176c 100644 --- a/src/components/form/controls/index.ts +++ b/src/components/form/controls/index.ts @@ -1,20 +1,79 @@ -export { default as ControlWrapper } from './ControlWrapper.vue'; +import { + JsonFormsRendererRegistryEntry, + rankWith, + isStringControl, + isRangeControl, + isNumberControl, + isIntegerControl, + or, + and, + hasType, + JsonSchema, + schemaMatches, + schemaSubPathMatches, + uiTypeIs, + isBooleanControl, + formatIs, + optionIs, + isEnumControl, +} from '@jsonforms/core'; -export { default as BooleanToggleControlRenderer } from './BooleanToggleControlRenderer.vue'; -export { default as ColorControlRenderer } from './ColorControlRenderer.vue'; -export { default as EnumArrayControlRenderer } from './EnumArrayControlRenderer.vue'; -export { default as EnumControlRenderer } from './EnumControlRenderer.vue'; -export { default as NumberControlRenderer } from './NumberControlRenderer.vue'; -export { default as SliderControlRenderer } from './SliderControlRenderer.vue'; -export { default as StringControlRenderer } from './StringControlRenderer.vue'; +import { default as BooleanToggleControlRenderer } from './BooleanToggleControlRenderer.vue'; +import { default as ColorControlRenderer } from './ColorControlRenderer.vue'; +import { default as EnumArrayControlRenderer } from './EnumArrayControlRenderer.vue'; +import { default as EnumControlRenderer } from './EnumControlRenderer.vue'; +import { default as NumberControlRenderer } from './NumberControlRenderer.vue'; +import { default as SliderControlRenderer } from './SliderControlRenderer.vue'; +import { default as StringControlRenderer } from './StringControlRenderer.vue'; -import { entry as BooleanToggleControlRendererEntry } from './BooleanToggleControlRenderer.vue'; -import { entry as ColorControlRendererEntry } from './ColorControlRenderer.vue'; -import { entry as EnumArrayControlRendererEntry } from './EnumArrayControlRenderer.vue'; -import { entry as EnumControlRendererEntry } from './EnumControlRenderer.vue'; -import { entry as NumberControlRendererEntry } from './NumberControlRenderer.vue'; -import { entry as SliderControlRendererEntry } from './SliderControlRenderer.vue'; -import { entry as StringControlRendererEntry } from './StringControlRenderer.vue'; +export const BooleanToggleControlRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: BooleanToggleControlRenderer, + tester: rankWith(1.1, isBooleanControl), +}; +export const ColorControlRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: ColorControlRenderer, + tester: rankWith(1.1, and(isStringControl, or(formatIs('color'), optionIs('format', 'color')))), +}; + +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 EnumArrayControlRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: EnumArrayControlRenderer, + tester: rankWith( + 5.2, + and( + uiTypeIs('Control'), + and( + schemaMatches((schema) => hasType(schema, 'array') && !Array.isArray(schema.items)), + schemaSubPathMatches('items', (schema) => { + return hasOneOfItems(schema) || hasEnumItems(schema); + }), + ), + ), + ), +}; +export const EnumControlRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: EnumControlRenderer, + tester: rankWith(2.1, isEnumControl), +}; +export const NumberControlRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: NumberControlRenderer, + tester: rankWith(1.1, or(isNumberControl, isIntegerControl)), +}; +export const SliderControlRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: SliderControlRenderer, + tester: rankWith(4.1, isRangeControl), //TODO: Tester not working as expected. +}; +export const StringControlRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: StringControlRenderer, + tester: rankWith(1.1, isStringControl), +}; export const controlRenderers = [ BooleanToggleControlRendererEntry, diff --git a/src/components/form/layouts/LayoutRenderer.vue b/src/components/form/layouts/LayoutRenderer.vue index 557bec5..cbcd937 100644 --- a/src/components/form/layouts/LayoutRenderer.vue +++ b/src/components/form/layouts/LayoutRenderer.vue @@ -14,13 +14,13 @@ diff --git a/src/components/form/layouts/TopLevelNavigationRenderer.vue b/src/components/form/layouts/TopLevelNavigationRenderer.vue index 16b2481..9b5c2ee 100644 --- a/src/components/form/layouts/TopLevelNavigationRenderer.vue +++ b/src/components/form/layouts/TopLevelNavigationRenderer.vue @@ -3,7 +3,8 @@ - {{ activeCategory }}_{{ visibleCategoryLabels[activeCategory] }} + + {{ visibleCategoryLabels[activeCategory] }} ({{ activeCategory }}) @@ -33,7 +34,6 @@
- {{ layout.label }} diff --git a/src/components/form/layouts/index.ts b/src/components/form/layouts/index.ts index 75dfa9a..e5067ef 100644 --- a/src/components/form/layouts/index.ts +++ b/src/components/form/layouts/index.ts @@ -1,9 +1,15 @@ -export { default as LayoutRenderer } from './LayoutRenderer.vue'; -// export { default as GroupRenderer } from './GroupRenderer.vue'; -export { default as TopLevelNavigationRenderer } from '../layouts/TopLevelNavigationRenderer.vue'; +import { JsonFormsRendererRegistryEntry, rankWith, uiTypeIs, isLayout } from '@jsonforms/core'; -import { entry as layoutRendererEntry } from './LayoutRenderer.vue'; -// import { entry as groupRendererEntry } from './GroupRenderer.vue'; -import { entry as TopLevelNavigationRendererEntry } from '../layouts/TopLevelNavigationRenderer.vue'; +import { default as LayoutRenderer } from './LayoutRenderer.vue'; +import { default as TopLevelNavigationRenderer } from './TopLevelNavigationRenderer.vue'; -export const layoutRenderers = [layoutRendererEntry, TopLevelNavigationRendererEntry]; +export const LayoutRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: LayoutRenderer, + tester: rankWith(1, isLayout), +}; +export const TopLevelNavigationRendererEntry: JsonFormsRendererRegistryEntry = { + renderer: TopLevelNavigationRenderer, + tester: rankWith(2, uiTypeIs('TopLevelNavigation')), +}; + +export const layoutRenderers = [LayoutRendererEntry, TopLevelNavigationRendererEntry]; diff --git a/src/components/form/util/composition.ts b/src/components/form/util/composition.ts index 8c79b2e..3bd9266 100644 --- a/src/components/form/util/composition.ts +++ b/src/components/form/util/composition.ts @@ -4,9 +4,17 @@ import cloneDeep from 'lodash/cloneDeep'; import debounce from 'lodash/debounce'; import merge from 'lodash/merge'; import get from 'lodash/get'; -import { composePaths, computeLabel, getFirstPrimitiveProp, isDescriptionHidden, Resolve, findUISchema, JsonFormsSubStates } from '@jsonforms/core'; +import { + composePaths, + computeLabel, + getFirstPrimitiveProp, + isDescriptionHidden, + Resolve, + findUISchema, + JsonFormsSubStates, + extractAjv, +} from '@jsonforms/core'; import isPlainObject from 'lodash/isPlainObject'; -import { Ajv } from 'ajv'; export const useControlAppliedOptions = (input: I) => { return computed(() => merge({}, cloneDeep(input.control.value.config), cloneDeep(input.control.value.uischema.options))); @@ -30,7 +38,7 @@ export const useQuasarBasicControl = (input: I) => { input.control.value.visible, input.control.value.description, isFocused.value, - !!appliedOptions.value?.showUnfocusedDescription + !!appliedOptions.value?.showUnfocusedDescription, ); }; @@ -67,7 +75,7 @@ export const useQuasarBasicControl = (input: I) => { export const useQuasarControl = ( input: I, adaptValue: (target: any) => any = (v) => v, - debounceWait?: number + debounceWait?: number, ) => { const changeEmitter = typeof debounceWait === 'number' ? debounce(input.handleChange, debounceWait) : input.handleChange; @@ -122,8 +130,8 @@ export const useQuasarArrayControl = (input: I) => { input.control.value.path, undefined, input.control.value.uischema, - input.control.value.rootSchema - ) + input.control.value.rootSchema, + ), ); const childLabelForIndex = (index: number) => { @@ -154,7 +162,9 @@ export const useAjv = () => { if (!jsonforms) { throw new Error("'jsonforms' couldn't be injected. Are you within JSON Forms?"); } + if (jsonforms.core === undefined) { + throw new Error("'jsonforms.core undefined'. Are you within JSON Forms?"); + } - // should always exist - return jsonforms.core?.ajv as Ajv; + return extractAjv(jsonforms.core); }; diff --git a/src/components/form/util/validator.ts b/src/components/form/util/validator.ts index 51cb2b8..603cd6d 100644 --- a/src/components/form/util/validator.ts +++ b/src/components/form/util/validator.ts @@ -1,9 +1,13 @@ -import { Options, Ajv } from 'ajv'; +// import Ajv from 'ajv'; +// import type { Options } from 'ajv'; // ajv from which dep? need it from jsonforms dependency core! import { createAjv as createAjvCore } from '@jsonforms/core'; // https://jsonforms.discourse.group/t/how-to-register-a-new-field-type/426/2 -export const createAjv = (options?: Options): Ajv => { +export const createAjv = (options?: Parameters[0]) => { + // export const createAjv = (...args: Parameters) => { + // export const createAjv = (options?) => { + //is Options from jsonforms core ajv anywhere exported? otherwise cannot use? const ajv = createAjvCore(options); ajv.addFormat('color', '/^#([A-F0-9]{3,4}|[A-F0-9]{6}|[A-F0-9]{8})$/i'); - return ajv; + return ajv as typeof ajv; }; diff --git a/src/pages/ConfigPage.vue b/src/pages/ConfigPage.vue index 00c6f5d..d4affbb 100644 --- a/src/pages/ConfigPage.vue +++ b/src/pages/ConfigPage.vue @@ -1,17 +1,9 @@ -