Skip to content

Commit 7dda30b

Browse files
09473ZH09473ZH
committed
feat: support force inline comparison & update demo
1 parent 30c9a4a commit 7dda30b

File tree

8 files changed

+59
-43
lines changed

8 files changed

+59
-43
lines changed

‎README-zh.md

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -139,23 +139,24 @@ Vue.use(CodeDiff)
139139

140140
## 组件属性
141141

142-
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
143-
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------------------- | ------------ |
144-
| language | 代码语言，如`typescript`，默认纯文本。 [查看全部支持语言](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) | string | - | plaintext |
145-
| oldString | 旧的字符串 | string | - | - |
146-
| newString | 新的字符串 | string | - | - |
147-
| context | 不同地方上下间隔多少行不隐藏 | number | - | 10 |
148-
| outputFormat | 展示方式 | string | line-by-line，side-by-side | line-by-line |
149-
| diffStyle | 差异风格, 单词级差异或字母级差异 | string | word, char | word |
150-
| trim | 移除字符串前后空白字符 | boolean | - | false |
151-
| noDiffLineFeed | 不 diff windows 换行符(CRLF)与 linux 换行符(LF) | boolean | - | false |
152-
| maxHeight | 组件最大高度，例如 300px | string | - | undefined |
153-
| filename | 文件名 | string | - | undefined |
154-
| newFilename | 新文件文件名 | string | - | undefined |
155-
| hideHeader | 隐藏头部栏 | boolean | - | false |
156-
| hideStat | 隐藏头部栏中的统计信息 | boolean | - | false |
157-
| theme | 用于切换日间模式/夜间模式 | ThemeType | light , dark | light |
158-
| ignoreMatchingLines | 给出一个模式来忽略匹配行，例如：'(time\|token)' | string | - | |
142+
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
143+
|---------------------|--------------------------------------------------------------------------------------------------------------------|-----------|---------------------------|--------------|
144+
| language | 代码语言，如`typescript`，默认纯文本。 [查看全部支持语言](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) | string | - | plaintext |
145+
| oldString | 旧的字符串 | string | - | - |
146+
| newString | 新的字符串 | string | - | - |
147+
| context | 不同地方上下间隔多少行不隐藏 | number | - | 10 |
148+
| outputFormat | 展示方式 | string | line-by-line，side-by-side | line-by-line |
149+
| diffStyle | 差异风格, 单词级差异或字母级差异 | string | word, char | word |
150+
|forceInlineComparison| 细分差异；存在差异时，强制进行行内对比（word 或 char 级） | boolean | - | false |
151+
| trim | 移除字符串前后空白字符 | boolean | - | false |
152+
| noDiffLineFeed | 不 diff windows 换行符(CRLF)与 linux 换行符(LF) | boolean | - | false |
153+
| maxHeight | 组件最大高度，例如 300px | string | - | undefined |
154+
| filename | 文件名 | string | - | undefined |
155+
| newFilename | 新文件文件名 | string | - | undefined |
156+
| hideHeader | 隐藏头部栏 | boolean | - | false |
157+
| hideStat | 隐藏头部栏中的统计信息 | boolean | - | false |
158+
| theme | 用于切换日间模式/夜间模式 | ThemeType | light , dark | light |
159+
| ignoreMatchingLines | 给出一个模式来忽略匹配行，例如：'(time\|token)' | string | - | |
159160

160161
## 组件事件
161162

‎README.md

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ then
101101
### Vue2
102102

103103
#### Register locally
104-
> > Recommend using local registration for better tree-shaking support.
104+
> Recommend using local registration for better tree-shaking support.
105105
```vue
106106
<script>
107107
import { CodeDiff } from 'v-code-diff'
@@ -140,23 +140,24 @@ Vue.use(CodeDiff)
140140

141141
## Props
142142

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-
| trim | Remove blank characters at the beginning and end of the string | boolean | - | false |
152-
| noDiffLineFeed | Don't diff Windows line feed (CRLF) and Linux line feed (LF) | boolean | - | false |
153-
| maxHeight | Maximum height of component, for example: 300px | string | - | undefined |
154-
| filename | Filename | string | - | undefined |
155-
| newFilename | New filename | string | - | undefined |
156-
| hideHeader | Hide header bar | boolean | - | false |
157-
| hideStat | Hide statistical part in the header bar | boolean | - | false |
158-
| theme | Add dark mode | ThemeType | light , dark | light |
159-
| ignoreMatchingLines | Give a pattern to ignore matching lines eg: '(time\|token)' | string | - | undefined |
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 |
160161

161162
## Events
162163

‎demo/App.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const formState = reactive({
1111
language: 'json',
1212
theme: 'light',
1313
diffStyle: 'word',
14+
forceInlineComparison: false,
1415
outputFormat: 'side-by-side',
1516
context: 10,
1617
trim: false,
@@ -178,13 +179,19 @@ function toggleLang() {
178179
<a-switch v-model:checked="formState.hideStat" />
179180
</a-form-item>
180181
</a-col>
182+
<a-col :md="8" :sm="24">
183+
<a-form-item>
184+
<slot><span class="form-item-label">{{ t('options.forceInlineComparison') }}</span> </slot>
185+
<a-switch v-model:checked="formState.forceInlineComparison" />
186+
</a-form-item>
187+
</a-col>
181188
</a-row>
182189
</a-form>
183190
</a-card>
184191
<div>
185192
<CodeDiff
186193
:theme="formState.theme" :old-string="oldString" :new-string="newString" :language="formState.language"
187-
:diff-style="formState.diffStyle" :output-format="formState.outputFormat" :context="formState.context"
194+
:diff-style="formState.diffStyle" :force-inline-comparison="formState.forceInlineComparison" :output-format="formState.outputFormat" :context="formState.context"
188195
:trim="formState.trim" :no-diff-line-feed="formState.noDiffLineFeed" :filename="formState.filename"
189196
:new-filename="formState.newFilename" :hide-header="formState.hideHeader" :hide-stat="formState.hideStat"
190197
@diff="printEvent"

‎demo/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Vite App</title>
6+
<title>v-code-diff</title>
7+
78
<script>
89
var _hmt = _hmt || [];
910
(function () {

‎demo/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ const i18n = createI18n({
4646
noDiffLineFeed: '不显示差异换行符',
4747
hideHeader: '隐藏首部',
4848
hideStatistics: '隐藏统计信息',
49+
forceInlineComparison: '强制行内对比',
4950
},
5051
},
5152
en: {
@@ -72,6 +73,7 @@ const i18n = createI18n({
7273
noDiffLineFeed: 'No Diff Line Feed',
7374
hideHeader: 'Hide Header',
7475
hideStatistics: 'Hide Statistics',
76+
forceInlineComparison: 'Force Inline Comparison',
7577
},
7678
},
7779
},

‎demo/public/favicon.ico

4.19 KB
Binary file not shown.

‎src/CodeDiff.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ interface Props {
1212
language?: string
1313
context?: number
1414
diffStyle?: 'word' | 'char'
15+
forceInlineComparison?: boolean
1516
outputFormat?: 'line-by-line' | 'side-by-side'
1617
trim?: boolean
1718
noDiffLineFeed?: boolean
@@ -29,6 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
2930
language: 'plaintext',
3031
context: 10,
3132
diffStyle: 'word',
33+
forceInlineComparison: false,
3234
outputFormat: 'line-by-line',
3335
trim: false,
3436
noDiffLineFeed: false,
@@ -70,8 +72,8 @@ const newString = computed(() => {
7072
7173
const raw = computed(() =>
7274
isUnifiedViewer.value
73-
? createUnifiedDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context, props.ignoreMatchingLines)
74-
: createSplitDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context, props.ignoreMatchingLines),
75+
? createUnifiedDiff(oldString.value, newString.value, props.language, props.diffStyle, props.forceInlineComparison, props.context, props.ignoreMatchingLines)
76+
: createSplitDiff(oldString.value, newString.value, props.language, props.diffStyle, props.forceInlineComparison, props.context, props.ignoreMatchingLines),
7577
)
7678
const diffChange = ref(raw.value)
7779
const isNotChanged = computed(() => diffChange.value.stat.additionsNum === 0 && diffChange.value.stat.deletionsNum === 0)

0 commit comments

Comments
 (0)