Adapt vue-vuetify to Vue 3 and Vuetify 3

- switch to @jsonforms/vue
- import Vuetify components from 'vuetify/components' instead of 'vuetify/lib'
- replace 'VExpansionPanelHeader/Content' with 'VExpansionPanelTitle/Text'
- replace 'VTabsItem/s' with 'VWindow/Item'
- replace 'VSimpleTable' with 'VTable'
- replace ':value' and '@input' with 'model-value' and '@update:model-value'
- replace ':item-text' with ':item-title' for lists
- remove date/time pickers
- remove mask integration including mask renderer
- remove ListWithDetail renderer for now
- adapt DisabledIconFocus for Vue 3
- replace outdated rollup-plugin-styles with rollup-plugin-css-only
- update rollup-plugin-typescript2
- adapt Vue target

Author: sdirix

packages/vue-vuetify/.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
     'eslint:recommended',
     '@vue/typescript/recommended',
     '@vue/prettier',
-    '@vue/prettier/@typescript-eslint',
+    '@vue/eslint-config-prettier',
   ],
   parserOptions: {
     ecmaVersion: 2020,

packages/vue-vuetify/package.json

@@ -82,8 +82,8 @@
     "rimraf": "^4.4.1",
     "rollup": "^3.20.2",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-styles": "^4.0.0",
-    "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-css-only": "^4.3.0",
+    "rollup-plugin-typescript2": "^0.34.1",
     "rollup-plugin-visualizer": "^5.5.2",
     "rollup-plugin-vue": "^6.0.0",
     "typescript": "~4.5.5",

packages/vue-vuetify/rollup.config.mjs

@@ -4,7 +4,7 @@ import typescript from 'rollup-plugin-typescript2';
 import resolve from '@rollup/plugin-node-resolve';
 import cleanup from 'rollup-plugin-cleanup';
 import { visualizer } from 'rollup-plugin-visualizer';
-import styles from 'rollup-plugin-styles';
+import css from 'rollup-plugin-css-only';
 
 import packageJson from './package.json' assert { type: 'json' };
 
@@ -14,7 +14,7 @@ const baseConfig = {
     ...Object.keys(packageJson.dependencies),
     ...Object.keys(packageJson.peerDependencies),
     /^lodash\/.*/,
-    'vuetify/lib',
+    'vuetify/components',
     '@mdi/font',
     /^dayjs\/.*/,
   ],
@@ -33,8 +33,8 @@ const buildFormats = [
       resolve({
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
-      styles({
-        mode: ['extract'],
+      css({
+        output: `${packageJson.module.split('/')[1].split('.')[0]}.esm.css`,
       }),
       vue({
         css: false,
@@ -70,8 +70,8 @@ const buildFormats = [
       resolve({
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
-      styles({
-        mode: ['extract'],
+      css({
+        output: `${packageJson.module.split('/')[1].split('.')[0]}.cjs.css`,
       }),
       vue({
         css: false,
@@ -95,6 +95,7 @@ const buildFormats = [
         babelHelpers: 'bundled',
       }),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] }),
+      css(),
     ],
   },
 ];

packages/vue-vuetify/shims-vuetify.d.ts

@@ -21,8 +21,8 @@ import {
   rendererProps,
   RendererProps,
   useJsonFormsLabel,
-} from '@jsonforms/vue2';
-import { VLabel } from 'vuetify/lib';
+} from '@jsonforms/vue';
+import { VLabel } from 'vuetify/components';
 import { useVuetifyLabel } from '../util';
 
 const labelRenderer = defineComponent({

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

@@ -210,7 +210,7 @@ import {
   rendererProps,
   RendererProps,
   useJsonFormsArrayControl,
-} from '@jsonforms/vue2';
+} from '@jsonforms/vue';
 import { useVuetifyArrayControl } from '../util';
 import {
   VList,
@@ -232,10 +232,10 @@ import {
   VSpacer,
   VExpansionPanels,
   VExpansionPanel,
-  VExpansionPanelHeader,
-  VExpansionPanelContent,
+  VExpansionPanelTitle,
+  VExpansionPanelText,
   VVirtualScroll,
-} from 'vuetify/lib';
+} from 'vuetify/components';
 import { ValidationIcon, ValidationBadge } from '../controls/components/index';
 import { ErrorObject } from 'ajv';
 
@@ -261,8 +261,8 @@ const controlRenderer = defineComponent({
     VSpacer,
     VExpansionPanels,
     VExpansionPanel,
-    VExpansionPanelHeader,
-    VExpansionPanelContent,
+    VExpansionPanelTitle,
+    VExpansionPanelText,
     VContainer,
     VVirtualScroll,
     ValidationIcon,

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

@@ -1,10 +1,10 @@
 export { default as LabelRenderer } from './LabelRenderer.vue';
-export { default as ListWithDetailRenderer } from './ListWithDetailRenderer.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 listWithDetailRendererEntry } from './ListWithDetailRenderer.vue';
 
 export const additionalRenderers = [
   labelRendererEntry,
-  listWithDetailRendererEntry,
+  // listWithDetailRendererEntry,
 ];

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

@@ -48,7 +48,7 @@ import {
   rendererProps,
   RendererProps,
   useJsonFormsAllOfControl,
-} from '@jsonforms/vue2';
+} from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { useVuetifyControl } from '../util';
 import { CombinatorProperties } from './components';

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

@@ -15,8 +15,8 @@
       </v-tab>
     </v-tabs>
 
-    <v-tabs-items v-model="selectedIndex">
-      <v-tab-item
+    <v-window v-model="selectedIndex">
+      <v-window-item
         v-for="(anyOfRenderInfo, anyOfIndex) in anyOfRenderInfos"
         :key="`${control.path}-${anyOfIndex}`"
       >
@@ -29,8 +29,8 @@
           :cells="control.cells"
           :enabled="control.enabled"
         />
-      </v-tab-item>
-    </v-tabs-items>
+      </v-window-item>
+    </v-window>
   </div>
 </template>
 
@@ -48,8 +48,8 @@ import {
   rendererProps,
   RendererProps,
   useJsonFormsAnyOfControl,
-} from '@jsonforms/vue2';
-import { VTabs, VTab, VTabsItems, VTabItem } from 'vuetify/lib';
+} from '@jsonforms/vue';
+import { VTabs, VTab, VWindow, VWindowItem } from 'vuetify/components';
 import { defineComponent, ref } from 'vue';
 import { useVuetifyControl } from '../util';
 import { CombinatorProperties } from './components';
@@ -61,8 +61,8 @@ const controlRenderer = defineComponent({
     CombinatorProperties,
     VTabs,
     VTab,
-    VTabsItems,
-    VTabItem,
+    VWindow,
+    VWindowItem,
   },
   props: {
     ...rendererProps<ControlElement>(),

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

@@ -40,7 +40,7 @@
     <v-card-text>
       <v-container justify-space-around align-content-center>
         <v-row justify="center">
-          <v-simple-table class="array-container flex">
+          <v-table class="array-container flex">
             <thead v-if="control.schema.type === 'object'">
               <tr>
                 <th
@@ -158,7 +158,7 @@
                 </td>
               </tr>
             </tbody>
-          </v-simple-table>
+          </v-table>
         </v-row>
       </v-container>
       <v-container v-if="dataLength === 0" :class="styles.arrayList.noData">
@@ -189,7 +189,7 @@ import {
   rendererProps,
   useJsonFormsArrayControl,
   RendererProps,
-} from '@jsonforms/vue2';
+} from '@jsonforms/vue';
 import { useVuetifyArrayControl } from '../util';
 import {
   VCard,
@@ -205,8 +205,8 @@ import {
   VBtn,
   VAvatar,
   VSpacer,
-  VSimpleTable,
-} from 'vuetify/lib';
+  VTable,
+} from 'vuetify/components';
 import { ValidationIcon, ValidationBadge } from '../controls/components/index';
 
 const controlRenderer = defineComponent({
@@ -229,7 +229,7 @@ const controlRenderer = defineComponent({
     VContainer,
     ValidationIcon,
     ValidationBadge,
-    VSimpleTable,
+    VTable,
   },
   props: {
     ...rendererProps<ControlElement>(),
@@ -305,21 +305,21 @@ export const entry: JsonFormsRendererRegistryEntry = {
 </script>
 
 <style scoped>
-.fixed-cell {
+/* .fixed-cell {
   width: 150px;
   height: 50px;
   padding-left: 0 !important;
   padding-right: 0 !important;
   text-align: center;
-}
+} */
 
-.fixed-cell-small {
+/* .fixed-cell-small {
   width: 50px;
   height: 50px;
   padding-left: 0 !important;
   padding-right: 0 !important;
   text-align: center;
-}
+} */
 
 .array-container tbody tr td {
   border-bottom: none !important;