Polish Vue 3 renderer set

- replaces date, time and datetime renderers with browser native alternatives
- fixes tooltip handling on all renderers switching to Vuetify 3 pattern
- let array control and array layout grab full width
- fix popup dialog in array layout renderer
- fix all checkbox bindings (boolean, toggle and enum array renderers)
- fix slider control
- fixes watch script in vue-vuetify package

Also partially fixes example app, however Monaco Editor still only works when triggering
hot reloading.

Author: sdirix

packages/example/package.json

@@ -3,7 +3,7 @@
   "version": "3.1.0-alpha.0",
   "private": true,
   "scripts": {
-    "build": "vue-cli-service build --mode development",
+    "build": "vue-cli-service build",
     "serve": "vue-cli-service serve",
     "clean": "rimraf dist"
   },
@@ -14,7 +14,7 @@
     "ajv-keywords": "^5.1.0",
     "core-js": "^3.9.1",
     "json-refs": "^3.0.15",
-    "monaco-editor": "^0.26.0",
+    "monaco-editor": "^0.38.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vuetify": "^3.1.12",
@@ -32,7 +32,7 @@
     "eslint": "^8.37.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^9.10.0",
-    "monaco-editor-webpack-plugin": "^4.1.1",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "prettier": "^2.8.7",
     "rimraf": "^4.4.1",
     "sass": "~1.32.0",

packages/example/src/components/DemoForm.vue

@@ -6,7 +6,6 @@
       :schema="resolvedSchema.schema"
       :uischema="example.input.uischema"
       :renderers="renderers"
-      :cells="cells"
       :config="config"
       :uischemas="uischemas"
       :validationMode="validationMode"
@@ -52,12 +51,11 @@
 <script lang="ts">
 import { PropType } from 'vue';
 import { Example, ResolvedSchema } from '@/core/types';
-import { Ajv } from 'ajv';
+import type Ajv from 'ajv';
 import {
   ValidationMode,
   JsonFormsUISchemaRegistryEntry,
   JsonFormsRendererRegistryEntry,
-  JsonFormsCellRendererRegistryEntry,
   JsonSchema,
   JsonFormsI18nState,
 } from '@jsonforms/core';
@@ -75,11 +73,6 @@ export default {
       required: true,
       type: Array as PropType<JsonFormsRendererRegistryEntry[]>,
     },
-    cells: {
-      required: false,
-      type: Array as PropType<JsonFormsCellRendererRegistryEntry[]>,
-      default: () => [],
-    },
     config: {
       required: false,
       type: Object as PropType<any>,
@@ -149,7 +142,8 @@ export default {
   },
   methods: {
     onChange(event: JsonFormsChangeEvent): void {
-      this.$emit('change', event);
+      console.log(event);
+      this.$emit('jsfchange', event);
     },
     resolveSchema(schema?: JsonSchema): void {
       const resolvedSchema = this.resolvedSchema;

packages/example/src/components/MonacoEditor.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts">
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import { PropType } from 'vue';
+import { PropType, toRaw } from 'vue';
 
 export type MonacoApi = typeof monaco;
 
@@ -19,16 +19,14 @@ function processSize(size: number | string) {
 }
 
 interface BaseComponentData {
-  editor?: monaco.editor.IStandaloneCodeEditor;
-  subscription?: monaco.IDisposable;
   prevent_trigger_change_event?: boolean;
 }
 
 export default {
   props: {
     width: { type: [String, Number], default: '100%' },
     height: { type: [String, Number], default: '100%' },
-    value: { type: Object as PropType<monaco.editor.ITextModel> },
+    modelValue: { type: Object as PropType<monaco.editor.ITextModel> },
     language: { type: String, default: 'javascript' },
     theme: { type: String, default: 'vs' },
     options: {
@@ -59,10 +57,11 @@ export default {
     className: { type: String, required: false },
   },
   data(): BaseComponentData {
+    this.editor = null;
+    this.subscription = null;
+    this.foo = null;
     return {
-      editor: undefined,
-      subscription: undefined,
-      prevent_trigger_change_event: undefined,
+      prevent_trigger_change_event: true,
     };
   },
   mounted() {
@@ -83,12 +82,13 @@ export default {
         }
       },
     },
-    value(newModel: monaco.editor.ITextModel) {
+    modelValue(newModel: monaco.editor.ITextModel) {
       if (this.editor) {
         const { editor } = this;
 
         if (!newModel.isDisposed()) {
-          editor.setModel(newModel);
+          console.log('Update Monaco with', toRaw(newModel));
+          editor.setModel(toRaw(newModel));
         }
       }
     },
@@ -146,10 +146,11 @@ export default {
       // Before initializing monaco editor
       const options = { ...this.options, ...this.editorWillMount() };
 
+      console.log('initialize monaco with', toRaw(this.modelValue));
       this.editor = monaco.editor.create(
         this.$refs.containerElement as HTMLElement,
         {
-          model: this.value,
+          model: toRaw(this.modelValue),
           language,
           ...(className ? { extraEditorClassName: className } : {}),
           ...options,