Skip to content

Commit

Permalink
feat: support force inline comparison & update demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@09473ZH
09473ZH committed Mar 20, 2024
1 parent 30c9a4a commit 7dda30b
Show file tree
Hide file tree
Showing 8 changed files with 59 additions and 43 deletions.
35 changes: 18 additions & 17 deletions README-zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,23 +139,24 @@ Vue.use(CodeDiff)

## 组件属性

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

## 组件事件

Expand Down
37 changes: 19 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ then
### Vue2

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

## Props

| Prop | Description | Type | Optional Values | Default Value |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------------------- | ------------- |
| 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 |
| oldString | Old string | string | - | - |
| newString | New string | string | - | - |
| context | The number of lines to separate different parts so that they are not hidden | number | - | 10 |
| outputFormat | Display mode | string | line-by-line，side-by-side | line-by-line |
| diffStyle | Difference style, word-level differences or letter-level differences | string | word, char | word |
| trim | Remove blank characters at the beginning and end of the string | boolean | - | false |
| noDiffLineFeed | Don't diff Windows line feed (CRLF) and Linux line feed (LF) | boolean | - | false |
| maxHeight | Maximum height of component, for example: 300px | string | - | undefined |
| filename | Filename | string | - | undefined |
| newFilename | New filename | string | - | undefined |
| 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 |
| Prop | Description | Type | Optional Values | Default Value |
|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|---------------------------|---------------|
| 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 |
| oldString | Old string | string | - | - |
| newString | New string | string | - | - |
| context | The number of lines to separate different parts so that they are not hidden | number | - | 10 |
| outputFormat | Display mode | string | line-by-line，side-by-side | line-by-line |
| diffStyle | Difference style, word-level differences or letter-level differences | string | word, char | word |
|forceInlineComparison| Force inline comparison (word or char level) | boolean | - | false |
| trim | Remove blank characters at the beginning and end of the string | boolean | - | false |
| noDiffLineFeed | Don't diff Windows line feed (CRLF) and Linux line feed (LF) | boolean | - | false |
| maxHeight | Maximum height of component, for example: 300px | string | - | undefined |
| filename | Filename | string | - | undefined |
| newFilename | New filename | string | - | undefined |
| 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

Expand Down
9 changes: 8 additions & 1 deletion demo/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const formState = reactive({
language: 'json',
theme: 'light',
diffStyle: 'word',
forceInlineComparison: false,
outputFormat: 'side-by-side',
context: 10,
trim: false,
Expand Down Expand Up @@ -178,13 +179,19 @@ function toggleLang() {
<a-switch v-model:checked="formState.hideStat" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item>
<slot><span class="form-item-label">{{ t('options.forceInlineComparison') }}</span> </slot>
<a-switch v-model:checked="formState.forceInlineComparison" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
<div>
<CodeDiff
:theme="formState.theme" :old-string="oldString" :new-string="newString" :language="formState.language"
:diff-style="formState.diffStyle" :output-format="formState.outputFormat" :context="formState.context"
:diff-style="formState.diffStyle" :force-inline-comparison="formState.forceInlineComparison" :output-format="formState.outputFormat" :context="formState.context"
:trim="formState.trim" :no-diff-line-feed="formState.noDiffLineFeed" :filename="formState.filename"
:new-filename="formState.newFilename" :hide-header="formState.hideHeader" :hide-stat="formState.hideStat"
@diff="printEvent"
Expand Down
3 changes: 2 additions & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>v-code-diff</title>

<script>
var _hmt = _hmt || [];
(function () {
Expand Down
2 changes: 2 additions & 0 deletions demo/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const i18n = createI18n({
noDiffLineFeed: '不显示差异换行符',
hideHeader: '隐藏首部',
hideStatistics: '隐藏统计信息',
forceInlineComparison: '强制行内对比',
},
},
en: {
Expand All @@ -72,6 +73,7 @@ const i18n = createI18n({
noDiffLineFeed: 'No Diff Line Feed',
hideHeader: 'Hide Header',
hideStatistics: 'Hide Statistics',
forceInlineComparison: 'Force Inline Comparison',
},
},
},
Expand Down
Binary file added demo/public/favicon.ico
View file
Binary file not shown.
6 changes: 4 additions & 2 deletions src/CodeDiff.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ interface Props {
language?: string
context?: number
diffStyle?: 'word' | 'char'
forceInlineComparison?: boolean
outputFormat?: 'line-by-line' | 'side-by-side'
trim?: boolean
noDiffLineFeed?: boolean
Expand All @@ -29,6 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
language: 'plaintext',
context: 10,
diffStyle: 'word',
forceInlineComparison: false,
outputFormat: 'line-by-line',
trim: false,
noDiffLineFeed: false,
Expand Down Expand Up @@ -70,8 +72,8 @@ const newString = computed(() => {
const raw = computed(() =>
isUnifiedViewer.value
? createUnifiedDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context, props.ignoreMatchingLines)
: createSplitDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context, props.ignoreMatchingLines),
? createUnifiedDiff(oldString.value, newString.value, props.language, props.diffStyle, props.forceInlineComparison, props.context, props.ignoreMatchingLines)
: createSplitDiff(oldString.value, newString.value, props.language, props.diffStyle, props.forceInlineComparison, props.context, props.ignoreMatchingLines),
)
const diffChange = ref(raw.value)
const isNotChanged = computed(() => diffChange.value.stat.additionsNum === 0 && diffChange.value.stat.deletionsNum === 0)
Expand Down
Loading

0 comments on commit 7dda30b

Please sign in to comment.