release: v0.10.6

Author: cloydlau

demo/vue2.6/index.vue

@@ -19,8 +19,12 @@
     </p>
 
     <br>
-    <JsonEditorVue ref="jsonEditorVueRef" v-model="data.value" :mode.sync="data.mode"
-      :readOnly="data.readOnly" />
+    <JsonEditorVue
+      ref="jsonEditorVueRef"
+      v-model="data.value"
+      :mode.sync="data.mode"
+      :readOnly="data.readOnly"
+    />
 
     <br>
     <p>Mode</p>
@@ -66,7 +70,7 @@ export default {
     }) */
 
     return {
-      //jsonEditorVueRef,
+      // jsonEditorVueRef,
       data,
     }
   },

demo/vue2.7/index.vue

@@ -19,8 +19,12 @@
     </p>
 
     <br>
-    <JsonEditorVue ref="jsonEditorVueRef" v-model="data.value" :mode.sync="data.mode"
-      :readOnly="data.readOnly" />
+    <JsonEditorVue
+      ref="jsonEditorVueRef"
+      v-model="data.value"
+      :mode.sync="data.mode"
+      :readOnly="data.readOnly"
+    />
 
     <br>
     <p>Mode</p>

demo/vue3/index.vue

@@ -20,8 +20,11 @@
 
     <br>
     <JsonEditorVue
-      ref="jsonEditorVueRef" v-model="data.value" v-model:mode="data.mode"
-      :readOnly="data.readOnly" :parser="data.parser"
+      ref="jsonEditorVueRef"
+      v-model="data.value"
+      v-model:mode="data.mode"
+      :readOnly="data.readOnly"
+      :parser="data.parser"
     />
 
     <br>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "json-editor-vue",
   "PascalCasedName": "JsonEditorVue",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "private": false,
   "description": "JSON editor & viewer for Vue 2.6/2.7/3 & Nuxt 2/3.",
   "author": "Cloyd Lau",
@@ -72,6 +72,7 @@
     "@vitest/coverage-c8": "latest",
     "@vitest/ui": "latest",
     "@vue/compiler-sfc": "latest",
+    "@vue/composition-api": "latest",
     "@vue/test-utils": "latest",
     "case-police": "latest",
     "eslint": "latest",

pnpm-lock.yaml

@@ -144,7 +144,8 @@ export default defineComponent({
     watch(
       () => props.mode,
       (mode) => {
-        jsonEditor.value.updateProps({
+        // `jsonEditor.value` could be `undefined` in Vue 2.6 (dev environment)
+        jsonEditor.value?.updateProps({
           mode,
         })
       },

src/component.ts renamed to src/Component.ts

@@ -1,18 +1,18 @@
 import { resolveConfig } from 'vue-global-config'
-import type { App, Component } from 'vue-demi'
-import component from './component'
-import type { Mode } from './component'
+import type { App } from 'vue-demi'
+import Component from './Component'
+import type { Mode } from './Component'
 
 const globalProps: Record<keyof any, any> = {}
 const globalAttrs: Record<keyof any, any> = {}
 
-type SFCWithInstall = Component & {
+type SFCWithInstall = typeof Component & {
   install: (app: App, options?: Record<keyof any, any>) => void
 }
 
-function withInstall(sfc: Component): SFCWithInstall {
+function withInstall(sfc: typeof Component): SFCWithInstall {
   (sfc as SFCWithInstall).install = (app: App, options = {}): void => {
-    const { props, attrs } = resolveConfig(options, component.props)
+    const { props, attrs } = resolveConfig(options, Component.props)
     Object.assign(globalProps, props)
     Object.assign(globalAttrs, attrs)
     app.component(sfc.name as string, sfc as Object)
@@ -22,4 +22,4 @@ function withInstall(sfc: Component): SFCWithInstall {
 }
 
 export { globalProps, globalAttrs, Mode }
-export default withInstall(component)
+export default withInstall(Component)