v-code-diff 1.9.0 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +88 -30
- package/dist/v2/index.cjs.js +14 -14
- package/dist/v2/index.es.js +767 -760
- package/dist/v2/index.umd.js +14 -14
- package/dist/v2.7/index.cjs.js +11 -11
- package/dist/v2.7/index.es.js +601 -599
- package/dist/v2.7/index.umd.js +10 -10
- package/dist/v3/index.cjs.js +14 -14
- package/dist/v3/index.es.js +825 -823
- package/dist/v3/index.umd.js +13 -13
- package/package.json +4 -2
- package/src/CodeDiff.vue +4 -2
- package/src/index.ts +1 -0
- package/src/utils.ts +6 -4
package/README.md
CHANGED
|
@@ -22,7 +22,6 @@ This project references the following projects, and I would like to express my g
|
|
|
22
22
|
- Github Code Diff
|
|
23
23
|
|
|
24
24
|
## Contents
|
|
25
|
-
|
|
26
25
|
- [Install](#Install)
|
|
27
26
|
- [Getting started](#Getting-started)
|
|
28
27
|
- [Vue3](#Vue3)
|
|
@@ -58,6 +57,24 @@ pnpm add @vue/composition-api
|
|
|
58
57
|
|
|
59
58
|
### Vue3
|
|
60
59
|
|
|
60
|
+
#### Register locally
|
|
61
|
+
> Recommend using local registration for better tree-shaking support.
|
|
62
|
+
```vue
|
|
63
|
+
<script setup>
|
|
64
|
+
import { CodeDiff } from 'v-code-diff'
|
|
65
|
+
</script>
|
|
66
|
+
|
|
67
|
+
<template>
|
|
68
|
+
<div>
|
|
69
|
+
<CodeDiff
|
|
70
|
+
old-string="12345"
|
|
71
|
+
new-string="3456"
|
|
72
|
+
output-format="side-by-side"
|
|
73
|
+
/>
|
|
74
|
+
</div>
|
|
75
|
+
</template>
|
|
76
|
+
```
|
|
77
|
+
|
|
61
78
|
#### Register globally
|
|
62
79
|
|
|
63
80
|
```ts
|
|
@@ -81,14 +98,31 @@ then
|
|
|
81
98
|
</template>
|
|
82
99
|
```
|
|
83
100
|
|
|
84
|
-
#### Register locally
|
|
85
|
-
|
|
86
|
-
Not recommended, but the relevant capabilities are retained to facilitate migration for 0.x users.
|
|
87
|
-
|
|
88
101
|
### Vue2
|
|
89
102
|
|
|
90
|
-
#### Register
|
|
103
|
+
#### Register locally
|
|
104
|
+
> Recommend using local registration for better tree-shaking support.
|
|
105
|
+
```vue
|
|
106
|
+
<script>
|
|
107
|
+
import { CodeDiff } from 'v-code-diff'
|
|
108
|
+
export default {
|
|
109
|
+
components: {
|
|
110
|
+
CodeDiff
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
</script>
|
|
91
114
|
|
|
115
|
+
<template>
|
|
116
|
+
<div>
|
|
117
|
+
<CodeDiff
|
|
118
|
+
old-string="12345"
|
|
119
|
+
new-string="3456"
|
|
120
|
+
output-format="side-by-side"
|
|
121
|
+
/>
|
|
122
|
+
</div>
|
|
123
|
+
</template>
|
|
124
|
+
```
|
|
125
|
+
#### Register globally
|
|
92
126
|
```ts
|
|
93
127
|
import Vue from 'vue'
|
|
94
128
|
import CodeDiff from 'v-code-diff'
|
|
@@ -96,10 +130,6 @@ import CodeDiff from 'v-code-diff'
|
|
|
96
130
|
Vue.use(CodeDiff)
|
|
97
131
|
```
|
|
98
132
|
|
|
99
|
-
#### Register locally
|
|
100
|
-
|
|
101
|
-
Not recommended, but the relevant capabilities are retained to facilitate migration for 0.x users.
|
|
102
|
-
|
|
103
133
|
## Demo
|
|
104
134
|
|
|
105
135
|
| | npm | cdn |
|
|
@@ -110,23 +140,24 @@ Not recommended, but the relevant capabilities are retained to facilitate migrat
|
|
|
110
140
|
|
|
111
141
|
## Props
|
|
112
142
|
|
|
113
|
-
| Prop
|
|
114
|
-
|
|
115
|
-
| language
|
|
116
|
-
| oldString
|
|
117
|
-
| newString
|
|
118
|
-
| context
|
|
119
|
-
| outputFormat
|
|
120
|
-
| diffStyle
|
|
121
|
-
|
|
|
122
|
-
|
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
|
|
|
129
|
-
|
|
|
143
|
+
| Prop | Description | Type | Optional Values | Default Value |
|
|
144
|
+
|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|---------------------------|---------------|
|
|
145
|
+
| language | Code language, such as typescript, defaults to plain text. [View all supported languages](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) | string | - | plaintext |
|
|
146
|
+
| oldString | Old string | string | - | - |
|
|
147
|
+
| newString | New string | string | - | - |
|
|
148
|
+
| context | The number of lines to separate different parts so that they are not hidden | number | - | 10 |
|
|
149
|
+
| outputFormat | Display mode | string | line-by-line，side-by-side | line-by-line |
|
|
150
|
+
| diffStyle | Difference style, word-level differences or letter-level differences | string | word, char | word |
|
|
151
|
+
|forceInlineComparison| Force inline comparison (word or char level) | boolean | - | false |
|
|
152
|
+
| trim | Remove blank characters at the beginning and end of the string | boolean | - | false |
|
|
153
|
+
| noDiffLineFeed | Don't diff Windows line feed (CRLF) and Linux line feed (LF) | boolean | - | false |
|
|
154
|
+
| maxHeight | Maximum height of component, for example: 300px | string | - | undefined |
|
|
155
|
+
| filename | Filename | string | - | undefined |
|
|
156
|
+
| newFilename | New filename | string | - | undefined |
|
|
157
|
+
| hideHeader | Hide header bar | boolean | - | false |
|
|
158
|
+
| hideStat | Hide statistical part in the header bar | boolean | - | false |
|
|
159
|
+
| theme | Add dark mode | ThemeType | light , dark | light |
|
|
160
|
+
| ignoreMatchingLines | Give a pattern to ignore matching lines eg: '(time\|token)' | string | - | undefined |
|
|
130
161
|
|
|
131
162
|
## Events
|
|
132
163
|
|
|
@@ -160,13 +191,40 @@ If the language you need is not included, you can manually import the relevant l
|
|
|
160
191
|
```shell
|
|
161
192
|
pnpm add highlight.js
|
|
162
193
|
```
|
|
194
|
+
#### Register locally
|
|
195
|
+
> Recommend using local registration for better tree-shaking support.
|
|
196
|
+
```vue
|
|
197
|
+
<script>
|
|
198
|
+
import { CodeDiff, hljs } from 'v-code-diff'
|
|
199
|
+
import c from 'highlight.js/lib/languages/c'
|
|
200
|
+
// Extend C language
|
|
201
|
+
hljs.registerLanguage('c', c)
|
|
202
|
+
export default {
|
|
203
|
+
components: {
|
|
204
|
+
CodeDiff,
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
</script>
|
|
163
208
|
|
|
209
|
+
<template>
|
|
210
|
+
<div>
|
|
211
|
+
<CodeDiff
|
|
212
|
+
old-string="#include <stdio.h>"
|
|
213
|
+
new-string="#include <stdio.h>\nint a = 1;"
|
|
214
|
+
output-format="side-by-side"
|
|
215
|
+
language="c"
|
|
216
|
+
/>
|
|
217
|
+
</div>
|
|
218
|
+
</template>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
#### Register globally
|
|
164
222
|
```typescript
|
|
165
|
-
import CodeDiff from 'v-code-diff'
|
|
223
|
+
import CodeDiff from 'v-code-diff'
|
|
166
224
|
// Extend C language
|
|
167
|
-
import c from 'highlight.js/lib/languages/c'
|
|
225
|
+
import c from 'highlight.js/lib/languages/c'
|
|
168
226
|
|
|
169
|
-
CodeDiff.hljs.registerLanguage('c', c)
|
|
227
|
+
CodeDiff.hljs.registerLanguage('c', c)
|
|
170
228
|
```
|
|
171
229
|
|
|
172
230
|
## Migrate from 0.x version
|