fix: #86

cloydlau · May 2, 2024 · 3256080 · 3256080
1 parent 26cc483
commit 3256080
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -947,13 +947,13 @@ module.exports = {
 
 ## Props
 
-| Name                                                   | Description                                                                                   | Type          | Default  |
-| ------------------------------------------------------ | --------------------------------------------------------------------------------------------- | ------------- | -------- |
-| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2)     | binding value                                                                                 | any           |          |
-| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | edit mode                                                                                     | [Mode](#Mode) | `'tree'` |
-| debounce                                               | debounce delay to update the binding value when typing, in milliseconds                       | number        | `100`    |
-| stringified                                            | whether to keep the binding value as stringified JSON in text mode                            | boolean       | `true`   |
-| ...                                                    | properties of [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) |               |          |
+| Name                                                   | Description                                                                                   | Type    | Default     |
+| ------------------------------------------------------ | --------------------------------------------------------------------------------------------- | ------- | ----------- |
+| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2)     | binding value                                                                                 | any     |             |
+| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | edit mode                                                                                     | `Mode`  | `Mode.tree` |
+| debounce                                               | debounce delay to update the binding value when typing, in milliseconds                       | number  | `100`       |
+| stringified                                            | whether to keep the binding value as stringified JSON in text mode                            | boolean | `true`      |
+| ...                                                    | properties of [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) |         |             |
 
 ### parsed JSON vs. stringified JSON
 
@@ -998,8 +998,14 @@ FAQ: How to keep the value as parsed JSON in text mode:
 > - Adjust the `debounce` value based on the size of your JSON.
 > - Will output empty value when the input value is invalid.
 
-```html
-<JsonEditorVue mode="text" :stringified="false" :debounce="1000" />
+```vue
+<script setup>
+import { Mode } from 'vanilla-jsoneditor'
+</script>
+
+<template>
+  <JsonEditorVue :mode="Mode.text" :stringified="false" :debounce="1000" />
+</template>
 ```
 
 ### Naming convention

diff --git a/docs/README.zh-CN.md b/docs/README.zh-CN.md
@@ -945,13 +945,13 @@ module.exports = {
 
 ## 属性
 
-| 名称                                                   | 说明                                                                                   | 类型          | 默认值   |
-| ------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------- | -------- |
-| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2)     | 绑定值                                                                                 | any           |          |
-| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | 编辑模式                                                                               | [Mode](#Mode) | `'tree'` |
-| debounce                                               | 输入时更新绑定值的去抖延迟 (毫秒)                                                      | number        | `100`    |
-| stringified                                            | 在 text 模式下保持绑定值为 stringified JSON                                            | boolean       | `true`   |
-| ...                                                    | [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) 的属性 |               |          |
+| 名称                                                   | 说明                                                                                   | 类型    | 默认值      |
+| ------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------- | ----------- |
+| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2)     | 绑定值                                                                                 | any     |             |
+| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | 编辑模式                                                                               | `Mode`  | `Mode.tree` |
+| debounce                                               | 输入时更新绑定值的去抖延迟 (毫秒)                                                      | number  | `100`       |
+| stringified                                            | 在 text 模式下保持绑定值为 stringified JSON                                            | boolean | `true`      |
+| ...                                                    | [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) 的属性 |         |             |
 
 ### parsed JSON vs. stringified JSON
 
@@ -996,8 +996,14 @@ FAQ: 如何在 text 模式下保持绑定值是 parsed JSON：
 > - 请根据你的 JSON 大小来调整 `debounce` 的值
 > - 输入值无效时会输出空
 
-```html
-<JsonEditorVue mode="text" :stringified="false" :debounce="1000" />
+```vue
+<script setup>
+import { Mode } from 'vanilla-jsoneditor'
+</script>
+
+<template>
+  <JsonEditorVue :mode="Mode.text" :stringified="false" :debounce="1000" />
+</template>
 ```
 
 ### 命名惯例

diff --git a/src/index.ts b/src/index.ts
@@ -1,16 +1,27 @@
 import { debounce } from 'lodash-es'
-import type { Mode } from 'vanilla-jsoneditor'
-import { JSONEditor } from 'vanilla-jsoneditor'
+import { JSONEditor, Mode } from 'vanilla-jsoneditor'
 import { computed, defineComponent, getCurrentInstance, h, isVue3, onMounted, onUnmounted, ref, unref, watch, watchEffect } from 'vue-demi'
-import type { App, PropType } from 'vue-demi'
+import type { App, Plugin, PropType } from 'vue-demi'
 import { conclude, resolveConfig } from 'vue-global-config'
 import { PascalCasedName as name } from '../package.json'
 
+type SFCWithInstall<T> = T & Plugin
+
 const propsGlobal: Record<string, any> = {}
 const attrsGlobal: Record<string, any> = {}
-const modeDefault = 'tree'
-const modelValueProp = isVue3 ? 'modelValue' : 'value'
-const updateModelValue = isVue3 ? 'update:modelValue' : 'input'
+
+enum ModelValueProp {
+  vue3 = 'modelValue',
+  vue2 = 'value',
+}
+const modelValueProp: ModelValueProp = isVue3 ? ModelValueProp.vue3 : ModelValueProp.vue2
+
+enum UpdateModelValue {
+  vue3 = 'update:modelValue',
+  vue2 = 'input',
+}
+const updateModelValue = isVue3 ? UpdateModelValue.vue3 : UpdateModelValue.vue2
+
 const boolAttrs = [
   'mainMenuBar',
   'navigationBar',
@@ -22,36 +33,49 @@ const boolAttrs = [
   'flattenColumns',
 ] as const
 
-export default defineComponent({
+const props = {
+  [modelValueProp]: {},
+  mode: {
+    type: String as PropType<Mode>,
+  },
+  debounce: {
+    type: Number as PropType<number>,
+  },
+  stringified: {
+    type: Boolean as PropType<boolean>,
+    default: undefined,
+  },
+  ...Object.fromEntries(
+    boolAttrs.map(boolAttr => [
+      boolAttr,
+      {
+        type: Boolean as PropType<boolean>,
+        default: undefined,
+      },
+    ]),
+  ),
+} as {
+  [key in ModelValueProp]: object
+} & {
+  mode: { type: PropType<Mode> }
+  debounce: { type: PropType<number> }
+  stringified: { type: PropType<boolean>, default: undefined }
+} & {
+  [key in typeof boolAttrs[number]]: {
+    type: PropType<boolean>
+    default: undefined
+  }
+}
+
+const JsonEditorVue = defineComponent({
   name,
-  install(app: App, options = {}): void {
-    const { props, attrs } = resolveConfig(options, { props: this.props as any })
-    Object.assign(propsGlobal, props)
-    Object.assign(attrsGlobal, attrs)
+  install(app: App, options?: typeof props): void {
+    const optionsGlobal = resolveConfig(options || {}, { props })
+    Object.assign(propsGlobal, optionsGlobal.props)
+    Object.assign(attrsGlobal, optionsGlobal.attrs)
     app.component(name, this)
   },
-  props: {
-    [modelValueProp]: {},
-    mode: {
-      type: String as PropType<Mode>,
-    },
-    debounce: {
-      type: Number as PropType<number>,
-    },
-    stringified: {
-      type: Boolean as PropType<boolean>,
-      default: undefined,
-    },
-    ...Object.fromEntries(
-      boolAttrs.map(boolAttr => [
-        boolAttr,
-        {
-          type: Boolean as PropType<boolean>,
-          default: undefined,
-        },
-      ]),
-    ),
-  },
+  props,
   emits: {
     [updateModelValue](_payload: any) {
       return true
@@ -71,7 +95,7 @@ export default defineComponent({
         type: String as PropType<Mode>,
       })
       jsonEditor.value?.updateProps({
-        mode: modeComputed.value || modeDefault,
+        mode: modeComputed.value || Mode.tree,
       })
     })
     const onChangeMode = (mode: Mode) => {
@@ -236,3 +260,5 @@ export default defineComponent({
     return () => h('div', { ref: 'jsonEditorRef' })
   },
 })
+
+export default JsonEditorVue as SFCWithInstall<typeof JsonEditorVue>