initial contribution for vue-vuetify renderer set #2341
Conversation
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.
✅ Deploy Preview for jsonforms-examples ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@sdirix can you review and check why we have out of memory failure on the build machine ? Perhaps we need a build machine with more memory ? |
kchobantonov
changed the title
|
@sdirix the build is fixed - I had to change to in the vuetiy package - if you want you can remove that from there and place it in the ci.yaml the same way how we set that for test to be set on build as well but that is up to you. |
|
Thanks! I plan to take a look at this PR next week. I was wondering whether we should preserve the history of the other repository, i.e. instead of copying all files over to here, we can add the vue3-branch into this repository as an orphan-branch and then do a merge commit with the content of the first commit here. This would keep the history. Suggestion: Once this PR here is in a good state and reviewed, I can do as suggested above with your contribution here as a commit on top. Note that we currently lose the new features we recently introduced in the Can you re-integrate those changes? |
|
I can review and apply those changes - keep in mind that this PR will have almost the same thing as the PR for fixing the vue3 without the recent changes (few weeks ago) that were merged into that repo, and also this PR different from the PR against the older vue 3 vuetify 3 repository since I had to integrate that with the jsonforms main repo and most of the changes are in the example so both example apps are different between this PR and the other one. If you want to keep the history please create the proper PR with the history from the other repo and the either I or you can override that on top and have the history there. |
|
@sdirix the requested PRs are applied to this PR |
|
@kchobantonov Thank you very much! |
|
I'm looking at the PR. I plan to contribute the migration and finish the review next week. |
|
I'm very eager to use this library, but the date picker issue hasn't been resolved yet. I see that this PR allows the use of the date picker component from Vuetify 3. I hope the code can be merged soon. |
sdirix
force-pushed
the
vue-vuetify
branch
2 times, most recently
from
038bafd
to
aaf03c8
Compare
Integrate the JSON Forms Vuetify renderers into the core mono repository including their example application.
- 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 please review the initial contribution that have the changes that fixes the vue3 integration. Few things to note:
ajv-i18nsince the Vite do not like the require when expecting to use import