v-code-diff 1.8.0 → 1.10.0

package/README.md

@@ -22,7 +22,6 @@ This project references the following projects, and I would like to express my g
 - Github Code Diff
 
 ## Contents
-
 - [Install](#Install)
 - [Getting started](#Getting-started)
   - [Vue3](#Vue3)
@@ -48,7 +47,7 @@ yarn add v-code-diff
 pnpm add v-code-diff
 ```
 
-Vue2 developers need install composition-api
+Vue2.6 developers need install composition-api
 
 ```shell
 pnpm add @vue/composition-api
@@ -58,6 +57,24 @@ pnpm add @vue/composition-api
 
 ### Vue3
 
+#### Register locally
+> Recommend using local registration for better tree-shaking support.
+```vue
+<script setup>
+import { CodeDiff } from 'v-code-diff'
+</script>
+
+<template>
+  <div>
+    <CodeDiff
+      old-string="12345"
+      new-string="3456"
+      output-format="side-by-side"
+    />
+  </div>
+</template>
+```
+
 #### Register globally
 
 ```ts
@@ -81,14 +98,31 @@ then
 </template>
 ```
 
-#### Register locally
-
-Not recommended, but the relevant capabilities are retained to facilitate migration for 0.x users.
-
 ### Vue2
 
-#### Register globally
+#### Register locally
+> > Recommend using local registration for better tree-shaking support.
+```vue
+<script>
+import { CodeDiff } from 'v-code-diff'
+export default {
+  components: {
+    CodeDiff
+  }
+}
+</script>
 
+<template>
+  <div>
+    <CodeDiff
+      old-string="12345"
+      new-string="3456"
+      output-format="side-by-side"
+    />
+  </div>
+</template>
+```
+#### Register globally
 ```ts
 import Vue from 'vue'
 import CodeDiff from 'v-code-diff'
@@ -96,10 +130,6 @@ import CodeDiff from 'v-code-diff'
 Vue.use(CodeDiff)
 ```
 
-#### Register locally
-
-Not recommended, but the relevant capabilities are retained to facilitate migration for 0.x users.
-
 ## Demo
 
 |        | npm | cdn                                                                            |
@@ -123,7 +153,10 @@ Not recommended, but the relevant capabilities are retained to facilitate migrat
 | maxHeight      | Maximum height of component, for example: 300px                                                                                                                         | string    | -                          | undefined     |
 | filename       | Filename                                                                                                                                                                | string    | -                          | undefined     |
 | newFilename    | New filename                                                                                                                                                            | string    | -                          | undefined     |
-| theme          | Add dark mode                                                                                                                                                           | ThemeType | light , dark               | 'light'       |
+| hideHeader | Hide header bar | boolean | - | false |
+| hideStat | Hide statistical part in the header bar | boolean | - | false |
+| theme          | Add dark mode                                                                                                                                                           | ThemeType | light , dark               | light       |
+| ignoreMatchingLines | Give a pattern to ignore matching lines eg: '(time\|token)' | string | - | undefined |
 
 ## Events
 
@@ -131,6 +164,12 @@ Not recommended, but the relevant capabilities are retained to facilitate migrat
 | ---- | --------------------------- | ------------------------------------------------------------------------------- |
 | diff | triggers when diff finished | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
 
+## Slot
+
+| Name | Description                                                 |
+| ---- | ----------------------------------------------------------- |
+| stat | Custom statistical content, The scope parameter is { stat } |
+
 ## Extend languages
 
 In order to reduce the size of the packaged file, the system only supports the following commonly used languages by
@@ -151,13 +190,40 @@ If the language you need is not included, you can manually import the relevant l
 ```shell
 pnpm add highlight.js
 ```
+#### Register locally
+> Recommend using local registration for better tree-shaking support.
+```vue
+<script>
+import { CodeDiff, hljs } from 'v-code-diff'
+import c from 'highlight.js/lib/languages/c'
+// Extend C language
+hljs.registerLanguage('c', c)
+export default {
+  components: {
+    CodeDiff,
+  }
+}
+</script>
+
+<template>
+  <div>
+    <CodeDiff
+      old-string="#include <stdio.h>"
+      new-string="#include <stdio.h>\nint a = 1;"
+      output-format="side-by-side"
+      language="c"
+    />
+  </div>
+</template>
+```
 
+#### Register globally
 ```typescript
-import CodeDiff from 'v-code-diff';
+import CodeDiff from 'v-code-diff'
 // Extend C language
-import c from 'highlight.js/lib/languages/c';
+import c from 'highlight.js/lib/languages/c'
 
-CodeDiff.hljs.registerLanguage('c', c);
+CodeDiff.hljs.registerLanguage('c', c)
 ```
 
 ## Migrate from 0.x version