11import { debounce } from 'lodash-es'
2- import type { Mode } from 'vanilla-jsoneditor'
3- import { JSONEditor } from 'vanilla-jsoneditor'
2+ import { JSONEditor , Mode } from 'vanilla-jsoneditor'
43import { computed , defineComponent , getCurrentInstance , h , isVue3 , onMounted , onUnmounted , ref , unref , watch , watchEffect } from 'vue-demi'
5- import type { App , PropType } from 'vue-demi'
4+ import type { App , Plugin , PropType } from 'vue-demi'
65import { conclude , resolveConfig } from 'vue-global-config'
76import { PascalCasedName as name } from '../package.json'
87
8+ type SFCWithInstall < T > = T & Plugin
9+
910const propsGlobal : Record < string , any > = { }
1011const attrsGlobal : Record < string , any > = { }
11- const modeDefault = 'tree'
12- const modelValueProp = isVue3 ? 'modelValue' : 'value'
13- const updateModelValue = isVue3 ? 'update:modelValue' : 'input'
12+
13+ enum ModelValueProp {
14+ vue3 = 'modelValue' ,
15+ vue2 = 'value' ,
16+ }
17+ const modelValueProp : ModelValueProp = isVue3 ? ModelValueProp . vue3 : ModelValueProp . vue2
18+
19+ enum UpdateModelValue {
20+ vue3 = 'update:modelValue' ,
21+ vue2 = 'input' ,
22+ }
23+ const updateModelValue = isVue3 ? UpdateModelValue . vue3 : UpdateModelValue . vue2
24+
1425const boolAttrs = [
1526 'mainMenuBar' ,
1627 'navigationBar' ,
@@ -22,36 +33,49 @@ const boolAttrs = [
2233 'flattenColumns' ,
2334] as const
2435
25- export default defineComponent ( {
36+ const props = {
37+ [ modelValueProp ] : { } ,
38+ mode : {
39+ type : String as PropType < Mode > ,
40+ } ,
41+ debounce : {
42+ type : Number as PropType < number > ,
43+ } ,
44+ stringified : {
45+ type : Boolean as PropType < boolean > ,
46+ default : undefined ,
47+ } ,
48+ ...Object . fromEntries (
49+ boolAttrs . map ( boolAttr => [
50+ boolAttr ,
51+ {
52+ type : Boolean as PropType < boolean > ,
53+ default : undefined ,
54+ } ,
55+ ] ) ,
56+ ) ,
57+ } as {
58+ [ key in ModelValueProp ] : object
59+ } & {
60+ mode : { type : PropType < Mode > }
61+ debounce : { type : PropType < number > }
62+ stringified : { type : PropType < boolean > , default : undefined }
63+ } & {
64+ [ key in typeof boolAttrs [ number ] ] : {
65+ type : PropType < boolean >
66+ default : undefined
67+ }
68+ }
69+
70+ const JsonEditorVue = defineComponent ( {
2671 name,
27- install ( app : App , options = { } ) : void {
28- const { props , attrs } = resolveConfig ( options , { props : this . props as any } )
29- Object . assign ( propsGlobal , props )
30- Object . assign ( attrsGlobal , attrs )
72+ install ( app : App , options ?: typeof props ) : void {
73+ const optionsGlobal = resolveConfig ( options || { } , { props } )
74+ Object . assign ( propsGlobal , optionsGlobal . props )
75+ Object . assign ( attrsGlobal , optionsGlobal . attrs )
3176 app . component ( name , this )
3277 } ,
33- props : {
34- [ modelValueProp ] : { } ,
35- mode : {
36- type : String as PropType < Mode > ,
37- } ,
38- debounce : {
39- type : Number as PropType < number > ,
40- } ,
41- stringified : {
42- type : Boolean as PropType < boolean > ,
43- default : undefined ,
44- } ,
45- ...Object . fromEntries (
46- boolAttrs . map ( boolAttr => [
47- boolAttr ,
48- {
49- type : Boolean as PropType < boolean > ,
50- default : undefined ,
51- } ,
52- ] ) ,
53- ) ,
54- } ,
78+ props,
5579 emits : {
5680 [ updateModelValue ] ( _payload : any ) {
5781 return true
@@ -71,7 +95,7 @@ export default defineComponent({
7195 type : String as PropType < Mode > ,
7296 } )
7397 jsonEditor . value ?. updateProps ( {
74- mode : modeComputed . value || modeDefault ,
98+ mode : modeComputed . value || Mode . tree ,
7599 } )
76100 } )
77101 const onChangeMode = ( mode : Mode ) => {
@@ -236,3 +260,5 @@ export default defineComponent({
236260 return ( ) => h ( 'div' , { ref : 'jsonEditorRef' } )
237261 } ,
238262} )
263+
264+ export default JsonEditorVue as SFCWithInstall < typeof JsonEditorVue >
0 commit comments