v-code-diff 1.10.0 → 1.12.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-code-diff",
   "type": "module",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "template component for vue-demi, can dev and build",
   "license": "MIT",
   "exports": {
@@ -53,7 +53,8 @@
     "diff": "^5.1.0",
     "diff-match-patch": "^1.0.5",
     "highlight.js": "^11.9.0",
-    "vue-demi": "^0.14.6"
+    "vue-demi": "^0.14.6",
+    "vue-i18n": "9"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.4.5",

package/src/CodeDiff.vue

@@ -3,6 +3,8 @@ import { computed, ref, watch } from 'vue-demi'
 import { createSplitDiff, createUnifiedDiff } from './utils'
 import UnifiedViewer from './unified/UnifiedViewer.vue'
 import SplitViewer from './split/SplitViewer.vue'
+import DownArrowIcon from './icons/DownArrowIcon.vue'
+import UpArrowIcon from './icons/UpArrowIcon.vue'
 
 import './style.scss'
 
@@ -12,6 +14,7 @@ interface Props {
   language?: string
   context?: number
   diffStyle?: 'word' | 'char'
+  forceInlineComparison?: boolean
   outputFormat?: 'line-by-line' | 'side-by-side'
   trim?: boolean
   noDiffLineFeed?: boolean
@@ -29,6 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
   language: 'plaintext',
   context: 10,
   diffStyle: 'word',
+  forceInlineComparison: false,
   outputFormat: 'line-by-line',
   trim: false,
   noDiffLineFeed: false,
@@ -70,12 +74,41 @@ 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)
 
+const currentDiffIndex = ref(-1)
+
+function goToNextDiff() {
+  const diffs = document.querySelectorAll('.blob-code-addition')
+  if (currentDiffIndex.value < diffs.length - 1) {
+    currentDiffIndex.value++
+    updateCurrentDiffHighlight(diffs)
+  }
+}
+
+function goToPrevDiff() {
+  const diffs = document.querySelectorAll('.blob-code-addition')
+  if (currentDiffIndex.value > 0) {
+    currentDiffIndex.value--
+    updateCurrentDiffHighlight(diffs)
+  }
+}
+
+function updateCurrentDiffHighlight(diffs: NodeListOf<Element>) {
+  diffs.forEach((diff: { classList: { remove: (arg0: string) => any } }) => diff.classList.remove('current-diff'))
+
+  const currentDiff = diffs[currentDiffIndex.value]
+
+  if (currentDiff) {
+    currentDiff.classList.add('current-diff')
+    currentDiff.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
+}
+
 watch(() => props, () => {
   diffChange.value = raw.value
   emits('diff', {
@@ -97,6 +130,14 @@ watch(() => props, () => {
           <div class="info-left">{{ filename }}</div>
           <div class="info-left">{{ newFilename }}</div>
         </span>
+        <span class="diff-commandbar">
+          <button class="command-item-button" title="Next Change" @click="goToNextDiff">
+            <DownArrowIcon />
+          </button>
+          <button class="command-item-button" title="Previous Change" @click="goToPrevDiff">
+            <UpArrowIcon />
+          </button>
+        </span>
         <span v-if="!hideStat" class="diff-stat">
           <slot name="stat" :stat="diffChange.stat">
             <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
@@ -109,6 +150,14 @@ watch(() => props, () => {
         <span class="info-left">{{ filename }}</span>
         <span class="info-right">
           <span style="margin-left: 20px;">{{ newFilename }}</span>
+          <span class="diff-commandbar">
+            <button class="command-item-button" title="Next Change" @click="goToNextDiff">
+              <DownArrowIcon />
+            </button>
+            <button class="command-item-button" title="Previous Change" @click="goToPrevDiff">
+              <UpArrowIcon />
+            </button>
+          </span>
           <span v-if="!hideStat" class="diff-stat">
             <slot name="stat" :stat="diffChange.stat">
               <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>

package/src/icons/DownArrowIcon.vue

@@ -0,0 +1,11 @@
+<script>
+export default {
+  name: 'DownArrowIcon',
+}
+</script>
+
+<template>
+  <svg width="1rem" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+    <path d="M383.6,322.7L278.6,423c-5.8,6-13.7,9-22.4,9c-8.7,0-16.5-3-22.4-9L128.4,322.7c-12.5-11.9-12.5-31.3,0-43.2  c12.5-11.9,32.7-11.9,45.2,0l50.4,48.2v-217c0-16.9,14.3-30.6,32-30.6c17.7,0,32,13.7,32,30.6v217l50.4-48.2  c12.5-11.9,32.7-11.9,45.2,0C396.1,291.4,396.1,310.7,383.6,322.7z" />
+  </svg>
+</template>

package/src/icons/UpArrowIcon.vue

@@ -0,0 +1,11 @@
+<script>
+export default {
+  name: 'UpArrowIcon',
+}
+</script>
+
+<template>
+  <svg width="1rem" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+    <path d="M128.4,189.3L233.4,89c5.8-6,13.7-9,22.4-9c8.7,0,16.5,3,22.4,9l105.4,100.3c12.5,11.9,12.5,31.3,0,43.2  c-12.5,11.9-32.7,11.9-45.2,0L288,184.4v217c0,16.9-14.3,30.6-32,30.6c-17.7,0-32-13.7-32-30.6v-217l-50.4,48.2  c-12.5,11.9-32.7,11.9-45.2,0C115.9,220.6,115.9,201.3,128.4,189.3z" />
+  </svg>
+</template>

package/src/style.scss

@@ -15,12 +15,14 @@
   overflow-y: auto;
 
   .file-header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
     background-color: var(--color-canvas-subtle);
     border-bottom: 1px solid var(--color-border-default);
     padding: 8px 16px;
     font-size: 12px;
-    font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
-
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
     .file-info {
       display: flex;
       justify-content: space-between;
@@ -51,6 +53,25 @@
           color: var(--color-fg-subtle);
         }
       }
+
+      .diff-commandbar {
+        margin-left: auto;
+        margin-right: 1rem;
+        
+        .command-item-button {
+          background-color: transparent;
+          color: var(--color-fg-subtle);
+          border: none;
+
+          svg {
+            fill: var(--color-fg-subtle);          
+          }
+        }
+
+        .command-item-button:hover {
+          background-color: var(--color-btn-outline-hover-border);
+        }
+      }
     }
   }
 
@@ -122,6 +143,10 @@
         background-color: var(--color-diff-blob-addition-word-bg);
       }
     }
+    
+    .current-diff {
+      border: 1px solid var(--color-border-muted);
+    }
 
     .blob-code-context,
     .blob-code-addition,

package/src/utils.ts

@@ -170,6 +170,7 @@ export function createSplitDiff(
   newString: string,
   language = 'plaintext',
   diffStyle = 'word',
+  forceInlineComparison = false,
   context = 10,
   ignoreMatchingLines?: string,
 ): SplitViewerChange {
@@ -270,9 +271,9 @@ export function createSplitDiff(
             addNum++
 
           const [curLine, nextLine] = [curLines[j], nextLines[j]]
-
-          const leftLine = curLines.length === nextLines.length ? renderWords(nextLine, curLine, diffStyle) : curLine
-          const rightLine = curLines.length === nextLines.length ? renderWords(curLine, nextLine, diffStyle) : nextLine
+          const shouldRenderWords = forceInlineComparison || curLines.length === nextLines.length
+          const leftLine = shouldRenderWords ? renderWords(nextLine, curLine, diffStyle) : curLine
+          const rightLine = shouldRenderWords ? renderWords(curLine, nextLine, diffStyle) : nextLine
 
           // 忽略匹配的行等价于相等
           const leftDiffType = ignoreRegex?.test(curLine) ? DiffType.EQUAL : DiffType.DELETE
@@ -361,6 +362,7 @@ export function createUnifiedDiff(
   newString: string,
   language = 'plaintext',
   diffStyle = 'word',
+  forceInlineComparison = false,
   context = 10,
   ignoreMatchingLines?: string,
 ): UnifiedViewerChange {
@@ -430,7 +432,7 @@ export function createUnifiedDiff(
     // 处理当前 diff 为删除的情况
     if (curType === DiffType.DELETE) {
       // 下一处差异为新增，且删除与新增行数相同时，对每行依次 diff
-      if (nextType === DiffType.ADD && curLines.length === nextLines.length) {
+      if (nextType === DiffType.ADD && (curLines.length === nextLines.length || forceInlineComparison)) {
         for (let j = 0; j < curLines.length; j++) {
           const curLine = curLines[j]
           const nextLine = nextLines[j]