Add suppoort for Line by Line.

Author: QusaiSabri

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,32 +80,32 @@ 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);
+const currentDiffIndex = ref(-1)
 
-const goToNextDiff = () => {
-  const diffs = document.querySelectorAll('.split-side-right.blob-code-addition');
+function goToNextDiff() {
+  const diffs = document.querySelectorAll('.blob-code-addition')
   if (currentDiffIndex.value < diffs.length - 1) {
-    currentDiffIndex.value++;
-    updateCurrentDiffHighlight(diffs);
+    currentDiffIndex.value++
+    updateCurrentDiffHighlight(diffs)
   }
 }
 
-const goToPrevDiff = () => {
-  const diffs = document.querySelectorAll('.split-side-right.blob-code-addition');
+function goToPrevDiff() {
+  const diffs = document.querySelectorAll('.blob-code-addition')
   if (currentDiffIndex.value > 0) {
-    currentDiffIndex.value--;
-    updateCurrentDiffHighlight(diffs);
+    currentDiffIndex.value--
+    updateCurrentDiffHighlight(diffs)
   }
 }
 
-const updateCurrentDiffHighlight = (diffs: NodeListOf<Element>) => {
-  diffs.forEach((diff: { classList: { remove: (arg0: string) => any } }) => diff.classList.remove('current-diff'));
+function updateCurrentDiffHighlight(diffs: NodeListOf<Element>) {
+  diffs.forEach((diff: { classList: { remove: (arg0: string) => any } }) => diff.classList.remove('current-diff'))
 
-  const currentDiff = diffs[currentDiffIndex.value];
+  const currentDiff = diffs[currentDiffIndex.value]
 
   if (currentDiff) {
-    currentDiff.classList.add('current-diff');
-    currentDiff.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    currentDiff.classList.add('current-diff')
+    currentDiff.scrollIntoView({ behavior: 'smooth', block: 'center' })
   }
 }
 
@@ -128,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>
@@ -141,19 +151,15 @@ watch(() => props, () => {
         <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">
-                <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>
-              </button>
-              <button class="command-item-button" title="Previous Change" @click="goToPrevDiff">
-                <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>
-              </button>
+            <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 v-if="!hideStat" class="diff-stat">
+            <slot name="stat" :stat="diffChange.stat">
               <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
               <span class="diff-stat-deleted">-{{ diffChange.stat.deletionsNum }} deletions</span>
             </slot>

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: 'DownArrowIcon',
+}
+</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>