initial contribution for vue-vuetify renderer set by kchobantonov · Pull Request #2341 · eclipsesource/jsonforms
and others added 30 commits
August 9, 2021 11:22This 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.
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.
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.
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.
kchobantonov
changed the title
intiial contribution for vue-vuetify renderer set
initial contribution for vue-vuetify renderer set
This was referenced
Jun 4, 2024- 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters