Merge pull request #139 from QusaiSabri/master

Added Go to Next Difference feature - vue3.

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'
 
@@ -78,6 +80,35 @@ const raw = computed(() =>
 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', {
@@ -99,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>
@@ -111,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>

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>

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>

src/style.scss

@@ -53,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);
+        }
+      }
     }
   }
 
@@ -124,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,