initial contribution for vue-vuetify renderer set by kchobantonov · Pull Request #2341 · eclipsesource/jsonforms

and others added 30 commits

August 9, 2021 11:22
This ia a monorepo consisting of the JSON Forms Vue 2 Vuetify renderer
set and an example application. Vuetify is not yet integrated.
Integrates Vuetify into the Vuetify renderer set as well as the
example app. The example control and layout renderers are now
implemented using Vuetify components.
Adds OneOfEnumControlRenderer and an example oneOf enum property
in schema of the example app
Full implementation of a Vuetify 2 based renderer set covering most
use cases of all existing JSON Forms renderer sets.

Also integrates a demo application including a full set of examples.
Minor overhaul to the contributed Vuetify renderer set. Prime change
is to bind via value instead of v-model in the renderers. Also the
built library no longer bundles any dependency.

Includes numerous minor changes like adjusted style classes,
refactored multi-enum-binding, fixing Typescript and linting issues,
fixed array child labels, etc.
* update example demo project
* remove history mode
* move examples into a root project folder
* add tooltips
Update to JSON Forms 3.0.0-alpha.2 which contains the new
i18n customization capatibilities. As AJV is now consumed
on version 8 some additional code changes are necessary.

Adapts the label renderer to use the new translation
functions.

Adds an example translation function to the example app.
- Mark directories to be included in release
- Mark package to be publicly available

Release commit of @jsonforms/vue2-vuetify@3.0.0-alpha.2
Hook the update mechanism to `@input` instead of `@change` for text
based inputs. This allows JSON Forms to validate new data immediately
instead of waiting for the user to 'exit' the current input. However
this has a negative effect on performance.
Array layouts now expand new items by default. This behavior can
be disabled via the UI Schema option 'collapseNewItems'.
Updates to JSON Forms 3.0.0-beta.0. This requires some babel customization in
the example app because the Vue CLI uses the older Webpack 4 which does not
support all 'ESNext' features by default.
With a recent change all input changes are applied and validated
immediately. This leads to performance problems for especially text
inputs as users can type really fast which leads to a full rerender
and validation cycle. These inputs are now debounced to mitigate
the performance issues.
JSON Forms Vue 2 Vuetitfy is now built in CommonJS and ESM format,
similar to the core repository.
Nested objects are now rendered indented without any additional
elevation. The indentation stops at level four. This leads to
a less cluttered UI for heavily nested objects.

Extends the group renderer to being able to support a 'bare' UI
without elevation and borders. Also supports left-aligning to
prevent further indentation when necessary. These two UI
Schema options are used by the object renderer to render nested
objects appropriately.

Objects within arrays are also rendered 'bare' and are left
aligned at the item level.

Adds a nested object example to demonstrate the new behavior.
Use primary instead of info colors for a more consistent look and
feel of array item avatars. Also allows to hide them completely via
the new 'hideAvatar' UI Schema option.
Fixes the calculation of the validation marker for nested array
items. Previously it tried to match the raw AJV path against the
data path, however as they use different separators this did
never match.
The array layout renderer now shows a confirmation dialog before
deleting an element.
Vuetify components can now be configured via corresponding
UI Schema options.

Also extends the categorization renderer to being able to render
categories vertically.
When attaching v-select or v-autocomplete to their parent elements then they
are potentially cut off by their surrounding container, e.g. the table control
or group layout.

The attach prop is now removed for them, letting them attach to the application
root, avoiding the cutoff problems.

As a side effect the popups are no longer correctly positioned when JSON Forms
is rendered within a popup itself. This can be negated by attaching v-select and
v-autocomplete via the UI Schema options Vuetify props.
When the date, time and date-time inputs are cleared, their value will now be set to
undefined. Previously they were saved as empty strings, leading to AJV format errors.
By default the first array item will render expanded. This can be turned off via the new
'initCollapsed' UI Schema option.
The horizontal layout renderer now looks for the new 'breakHorizontal' UI Schema option.
This option can either be 'xs', 'sm', 'md', 'lg' or 'xl' which corresponds to the
breakpoint support of Vuetify. If no breaking behavior is wanted the option can be
anything else, e.g. 'false'.

The layout will render vertically if the given breakpoint, or a smaller one, is hit.
Thefore the layout will always render vertically when `xl` is given, while option 'xs'
will only break the layout on the smallest view ports.
Adjusts code for JSON Forms 3.0.0-beta.2 and removes no longer needed workarounds.

@kchobantonov kchobantonov changed the title intiial contribution for vue-vuetify renderer set initial contribution for vue-vuetify renderer set

May 30, 2024

@sdirix

This was referenced

Jun 4, 2024

manuelmeister

@sdirix

@sdirix

Integrate the JSON Forms Vuetify renderers into the core mono
repository including their example application.

@sdirix

- adapt to latest 'master' state
- fix 'useJsonFormsLabel' composition
- align dependency versions over packages
- type improvement in core/schema
- fix example app
- integrate in publish action
- adapt bug and feature templates

sdirix