Skip to content

Commit 3256080

Browse files
cloydlaucloydlau
committed
fix: #86 
1 parent 26cc483 commit 3256080

File tree

3 files changed

+90
-52
lines changed

3 files changed

+90
-52
lines changed

‎README.md

+15-9
Original file line numberDiff line numberDiff line change
@@ -947,13 +947,13 @@ module.exports = {
947947

948948
## Props
949949

950-
| Name | Description | Type | Default |
951-
| ------------------------------------------------------ | --------------------------------------------------------------------------------------------- | ------------- | -------- |
952-
| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2) | binding value | any | |
953-
| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | edit mode | [Mode](#Mode) | `'tree'` |
954-
| debounce | debounce delay to update the binding value when typing, in milliseconds | number | `100` |
955-
| stringified | whether to keep the binding value as stringified JSON in text mode | boolean | `true` |
956-
| ... | properties of [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) | | |
950+
| Name | Description | Type | Default |
951+
| ------------------------------------------------------ | --------------------------------------------------------------------------------------------- | ------- | ----------- |
952+
| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2) | binding value | any | |
953+
| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | edit mode | `Mode` | `Mode.tree` |
954+
| debounce | debounce delay to update the binding value when typing, in milliseconds | number | `100` |
955+
| stringified | whether to keep the binding value as stringified JSON in text mode | boolean | `true` |
956+
| ... | properties of [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) | | |
957957

958958
### parsed JSON vs. stringified JSON
959959

@@ -998,8 +998,14 @@ FAQ: How to keep the value as parsed JSON in text mode:
998998
> - Adjust the `debounce` value based on the size of your JSON.
999999
> - Will output empty value when the input value is invalid.
10001000
1001-
```html
1002-
<JsonEditorVue mode="text" :stringified="false" :debounce="1000" />
1001+
```vue
1002+
<script setup>
1003+
import { Mode } from 'vanilla-jsoneditor'
1004+
</script>
1005+
1006+
<template>
1007+
<JsonEditorVue :mode="Mode.text" :stringified="false" :debounce="1000" />
1008+
</template>
10031009
```
10041010

10051011
### Naming convention

‎docs/README.zh-CN.md

+15-9
Original file line numberDiff line numberDiff line change
@@ -945,13 +945,13 @@ module.exports = {
945945

946946
## 属性
947947

948-
| 名称 | 说明 | 类型 | 默认值 |
949-
| ------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------------- | -------- |
950-
| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2) | 绑定值 | any | |
951-
| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | 编辑模式 | [Mode](#Mode) | `'tree'` |
952-
| debounce | 输入时更新绑定值的去抖延迟 (毫秒) | number | `100` |
953-
| stringified | 在 text 模式下保持绑定值为 stringified JSON | boolean | `true` |
954-
| ... | [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) 的属性 | | |
948+
| 名称 | 说明 | 类型 | 默认值 |
949+
| ------------------------------------------------------ | -------------------------------------------------------------------------------------- | ------- | ----------- |
950+
| v-model /<br>modelValue (Vue 3) /<br>value (Vue 2) | 绑定值 | any | |
951+
| mode /<br>v-model:mode (Vue 3) /<br>:mode.sync (Vue 2) | 编辑模式 | `Mode` | `Mode.tree` |
952+
| debounce | 输入时更新绑定值的去抖延迟 (毫秒) | number | `100` |
953+
| stringified | 在 text 模式下保持绑定值为 stringified JSON | boolean | `true` |
954+
| ... | [svelte-jsoneditor](https://github.com/josdejong/svelte-jsoneditor/#properties) 的属性 | | |
955955

956956
### parsed JSON vs. stringified JSON
957957

@@ -996,8 +996,14 @@ FAQ: 如何在 text 模式下保持绑定值是 parsed JSON：
996996
> - 请根据你的 JSON 大小来调整 `debounce` 的值
997997
> - 输入值无效时会输出空
998998
999-
```html
1000-
<JsonEditorVue mode="text" :stringified="false" :debounce="1000" />
999+
```vue
1000+
<script setup>
1001+
import { Mode } from 'vanilla-jsoneditor'
1002+
</script>
1003+
1004+
<template>
1005+
<JsonEditorVue :mode="Mode.text" :stringified="false" :debounce="1000" />
1006+
</template>
10011007
```
10021008

10031009
### 命名惯例

‎src/index.ts

+60-34
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
import { debounce } from 'lodash-es'
2-
import type { Mode } from 'vanilla-jsoneditor'
3-
import { JSONEditor } from 'vanilla-jsoneditor'
2+
import { JSONEditor, Mode } from 'vanilla-jsoneditor'
43
import { 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'
65
import { conclude, resolveConfig } from 'vue-global-config'
76
import { PascalCasedName as name } from '../package.json'
87

8+
type SFCWithInstall<T> = T & Plugin
9+
910
const propsGlobal: Record<string, any> = {}
1011
const 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+
1425
const 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

Comments
 (0)