feat: add new filename title(file-header)

Author: 09473ZH

src/CodeDiff.vue

@@ -18,6 +18,7 @@ interface Props {
   noDiffLineFeed?: boolean
   maxHeight?: string
   filename?: string
+  newFilename?: string
   hideHeader?: boolean
   hideStat?: boolean
 }
@@ -39,6 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
   noDiffLineFeed: false,
   maxHeight: undefined,
   filename: undefined,
+  newFilename: undefined,
   hideHeader: false,
   hideStat: false,
 })
@@ -85,15 +87,34 @@ watch(() => props, () => {
 <template>
   <div class="code-diff-view" :style="{ maxHeight }">
     <div v-if="!hideHeader" class="file-header">
-      <div class="file-info">
-        <span class="filename">{{ filename }}</span>
+      <!--  line by line -->
+      <div v-if="isUnifiedViewer" class="file-info">
+        <span>
+          <div class="info-left">{{ filename }}</div>
+          <div class="info-left">{{ newFilename }}</div>
+        </span>
         <span v-if="!hideStat" class="diff-stat">
           <slot name="stat">
             <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
-            <span class="diff-stat-deleted" style="margin-left: 8px;">-{{ diffChange.stat.deletionsNum }} deletions</span>
+            <span class="diff-stat-deleted" style="margin-left: 8px;">-{{ diffChange.stat.deletionsNum }}
+              deletions</span>
           </slot>
         </span>
       </div>
+      <!-- side by side -->
+      <div v-else class="file-info">
+        <span class="info-left">{{ filename }}</span>
+        <span class="info-right">
+          <span style="margin-left: 20px;">{{ newFilename }}</span>
+          <span v-if="!hideStat" class="diff-stat">
+            <slot name="stat">
+              <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
+              <span class="diff-stat-deleted" style="margin-left: 8px;">-{{ diffChange.stat.deletionsNum }}
+                deletions</span>
+            </slot>
+          </span>
+        </span>
+      </div>
     </div>
     <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" />
     <SplitViewer v-else :diff-change="diffChange" />

src/style.scss

@@ -28,16 +28,21 @@
       margin-left: 8px;
       height: 24px;
 
-      .filename {
+      .info-left {
         font-size: 13px;
         color: var(--color-fg-default);
       }
+      .info-right {
+        display: flex;
+        justify-content: space-between;
+        width: 50%;
+      }
       .diff-stat {
         .diff-stat-added {
-          color: var(--color-diffstat-addition-bg)
+          color: var(--color-diffstat-addition-bg);
         }
         .diff-stat-deleted {
-          color: var(--color-danger-emphasis)
+          color: var(--color-danger-emphasis);
         }
       }
     }

vue3-playground/App.vue

@@ -10,6 +10,8 @@ const form = reactive({
   // newString: newLongText,
   oldString: '123\n123\n123\n456\n123\n123\n123\n123\n123\n123\n123\n',
   newString: '123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n',
+  filename: 'oldFile',
+  newFilename: 'newFile',
   language: 'plaintext',
   diffStyle: 'word',
   outputFormat: 'line-by-line',
@@ -28,8 +30,10 @@ const form = reactive({
   <CodeDiff
     :old-string="form.oldString"
     :new-string="form.newString"
+    :filename="form.filename"
+    :newFilename="form.newFilename"
     :language="form.language"
-    output-format="side-by-side"
+    :output-format="form.outputFormat"
     :diff-style="form.diffStyle"
     :context="form.context"
   />