v-code-diff 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-code-diff",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "template component for vue-demi, can dev and build",
   "main": "dist/index.cjs",
   "module": "dist/index.es.js",
@@ -23,9 +23,11 @@
     "build:2.7": "vue-demi-switch 2.7 vue2 && pnpm --filter vue2.7-playground build",
     "build:3": "vue-demi-switch 3 vue3 && pnpm --filter vue3-playground build",
     "clean": "rimraf ./dist",
+    "deploy:demo": "pnpm --filter demo gh-pages",
     "dev:2": "vue-demi-switch 2 vue2 && pnpm --filter vue2-playground dev",
     "dev:2.7": "vue-demi-switch 2.7 vue2 && pnpm --filter vue2.7-playground dev",
     "dev:3": "vue-demi-switch 3 vue3 && pnpm --filter vue3-playground dev",
+    "dev:demo": "vue-demi-switch 3 vue3 && pnpm --filter demo dev",
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix --ignore-path .gitignore",
     "postinstall": "node scripts/postinstall.js",
     "prepublishOnly": "npm run build",
@@ -33,8 +35,12 @@
   },
   "author": "Shimada666<649940882@qq.com>",
   "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Shimada666/v-code-diff/issues"
+  },
   "repository": {
-    "type": "git"
+    "type": "git",
+    "url": "git+https://github.com/Shimada666/v-code-diff.git"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.4.9",
@@ -48,7 +54,7 @@
   "dependencies": {
     "diff": "^5.0.0",
     "highlight.js": "^11.6.0",
-    "vue-demi": "latest"
+    "vue-demi": "^0.13.11"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.34.0",

package/scripts/postinstall.js

@@ -3,7 +3,7 @@ const { switchVersion, loadModule } = require('./utils')
 const Vue = loadModule('vue')
 
 if (!Vue || typeof Vue.version !== 'string')
-  console.warn('[vue-demi-sfc-component-template] Vue is not found. Please run "npm install vue" to install.')
+  console.warn('[v-code-diff] Vue is not found. Please run "npm install vue" to install.')
 
 else if (Vue.version.startsWith('2.7.'))
   switchVersion('2.7')
@@ -15,4 +15,4 @@ else if (Vue.version.startsWith('3.'))
   switchVersion('3')
 
 else
-  console.warn(`[vue-demi-sfc-component-template] Vue version v${Vue.version} is not suppported.`)
+  console.warn(`[v-code-diff] Vue version v${Vue.version} is not suppported.`)

package/src/CodeDiff.vue

@@ -16,6 +16,8 @@ interface Props {
   outputFormat?: 'line-by-line' | 'side-by-side'
   trim?: boolean
   noDiffLineFeed?: boolean
+  maxHeight?: number
+  filename?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -25,6 +27,8 @@ const props = withDefaults(defineProps<Props>(), {
   outputFormat: 'line-by-line',
   trim: false,
   noDiffLineFeed: false,
+  maxHeight: undefined,
+  filename: undefined,
 })
 
 const isUnifiedViewer = computed(() => props.outputFormat === 'line-by-line')
@@ -46,9 +50,18 @@ const diffChange = computed(() =>
 </script>
 
 <template>
-  <div class="code-diff-view">
-    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" />
-    <SplitViewer v-else :diff-change="diffChange" />
+  <div class="code-diff-view" :style="{ maxHeight }">
+    <div class="file-header">
+      <div class="file-info">
+        <span class="filename">{{ filename }}</span>
+        <span class="diff-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>
+      </div>
+    </div>
+    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange.changes" />
+    <SplitViewer v-else :diff-change="diffChange.changes" />
   </div>
 </template>
 

package/src/split/SplitLine.vue

@@ -17,10 +17,10 @@ const getCodeMarker = (type: DiffType) => {
 
 <template>
   <tr v-if="splitLine.fold">
-    <td class="blob-num blob-num-empty empty-cell" colspan="1">
+    <td class="blob-num blob-num-hunk" colspan="1">
       >
     </td>
-    <td class="blob-code blob-code-empty empty-cell" colspan="3" align="left">
+    <td class="blob-code blob-code-inner blob-code-hunk" colspan="3" align="left">
       ⋯
     </td>
   </tr>

package/src/split/SplitViewer.vue

@@ -8,19 +8,17 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="file">
-    <table class="file-diff-split diff-table">
-      <colgroup>
-        <col width="44">
-        <col>
-        <col width="44">
-        <col>
-      </colgroup>
-      <tbody>
-        <SplitLine v-for="(item, index) in diffChange" :key="index" :split-line="item" />
-      </tbody>
-    </table>
-  </div>
+  <table class="file-diff-split diff-table">
+    <colgroup>
+      <col width="44">
+      <col>
+      <col width="44">
+      <col>
+    </colgroup>
+    <tbody>
+      <SplitLine v-for="(item, index) in diffChange" :key="index" :split-line="item" />
+    </tbody>
+  </table>
 </template>
 
 <style scoped></style>

package/src/style.scss

@@ -5,110 +5,146 @@
     position: static;
   }
 
-  .file {
-    position: relative;
-    margin-top: 16px;
-    margin-bottom: 16px;
-    border: 1px solid var(--color-border-default, #ddd);
-    border-radius: 2px;
-
-    table {
-      border-spacing: 0;
-    }
-    .diff-table {
-      width: 100%;
-
-      .blob-num {
-        position: relative;
-        width: 1%;
-        min-width: 50px;
-        padding-right: 10px;
-        padding-left: 10px;
-        font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-        font-size: 12px;
-        line-height: 20px;
-        color: var(--color-fg-subtle);
-        text-align: right;
-        white-space: nowrap;
-        vertical-align: top;
-        cursor: pointer;
-        -webkit-user-select: none;
-        user-select: none;
-      }
-      .blob-num-deletion {
-        color: var(--color-diff-blob-deletion-num-text);
-        background-color: var(--color-diff-blob-deletion-num-bg);
-        border-color: var(--color-danger-emphasis);
-      }
-      .blob-num-addition {
-        color: var(--color-diff-blob-addition-num-text);
-        background-color: var(--color-diff-blob-addition-num-bg);
-        border-color: var(--color-success-emphasis);
-      }
+  position: relative;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  border: 1px solid var(--color-border-default, #ddd);
+  border-radius: 6px;
 
-      .blob-code {
-        position: relative;
-        padding-right: 10px;
-        padding-left: 10px;
-        line-height: 20px;
-        vertical-align: top;
-        .blob-code-inner {
-          display: table-cell;
-          overflow: visible;
-          font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
-          font-size: 12px;
-          color: var(--color-fg-default);
-          word-wrap: anywhere;
-          white-space: pre-wrap;
-        }
-      }
-      .blob-code-deletion {
-        background-color: var(--color-diff-blob-deletion-line-bg);
-        outline: 1px dashed transparent;
+  overflow-y: auto;
+
+  .file-header {
+    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;
 
-        .x {
-          color: var(--color-diff-blob-deletion-fg);
-          background-color: var(--color-diff-blob-deletion-word-bg);
+    .file-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 8px;
+      height: 24px;
+
+      .filename {
+        font-size: 13px;
+        color: var(--color-fg-default);
+      }
+      .diff-stat {
+        .diff-stat-added {
+          color: var(--color-diffstat-addition-bg)
+        }
+        .diff-stat-deleted {
+          color: var(--color-danger-emphasis)
         }
       }
-      .blob-code-addition {
-        background-color: var(--color-diff-blob-addition-line-bg);
-        outline: 1px dotted transparent;
+    }
+  }
 
-        .x {
-          color: var(--color-diff-blob-addition-fg);
-          background-color: var(--color-diff-blob-addition-word-bg);
-        }
+  table {
+    border-spacing: 0;
+  }
+  .diff-table {
+    width: 100%;
+
+    .blob-num {
+      position: relative;
+      width: 1%;
+      min-width: 50px;
+      padding-right: 10px;
+      padding-left: 10px;
+      font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+      font-size: 12px;
+      line-height: 20px;
+      color: var(--color-fg-subtle);
+      text-align: right;
+      white-space: nowrap;
+      vertical-align: top;
+      cursor: pointer;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+    .blob-num-deletion {
+      color: var(--color-diff-blob-deletion-num-text);
+      background-color: var(--color-diff-blob-deletion-num-bg);
+      border-color: var(--color-danger-emphasis);
+    }
+    .blob-num-addition {
+      color: var(--color-diff-blob-addition-num-text);
+      background-color: var(--color-diff-blob-addition-num-bg);
+      border-color: var(--color-success-emphasis);
+    }
+
+    .blob-code {
+      position: relative;
+      padding-right: 10px;
+      padding-left: 10px;
+      line-height: 20px;
+      vertical-align: top;
+      .blob-code-inner {
+        display: table-cell;
+        overflow: visible;
+        font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+        font-size: 12px;
+        color: var(--color-fg-default);
+        word-wrap: anywhere;
+        white-space: pre-wrap;
       }
+    }
+    .blob-code-deletion {
+      background-color: var(--color-diff-blob-deletion-line-bg);
+      outline: 1px dashed transparent;
 
-      .blob-code-context,
-      .blob-code-addition,
-      .blob-code-deletion {
-        padding-left: 22px !important;
+      .x {
+        color: var(--color-diff-blob-deletion-fg);
+        background-color: var(--color-diff-blob-deletion-word-bg);
       }
+    }
+    .blob-code-addition {
+      background-color: var(--color-diff-blob-addition-line-bg);
+      outline: 1px dotted transparent;
 
-      .blob-code-marker::before {
-        position: absolute;
-        top: 1px;
-        left: 8px;
-        padding-right: 8px;
-        content: attr(data-code-marker);
+      .x {
+        color: var(--color-diff-blob-addition-fg);
+        background-color: var(--color-diff-blob-addition-word-bg);
       }
     }
 
-    .file-diff-split {
-      table-layout: fixed;
+    .blob-code-context,
+    .blob-code-addition,
+    .blob-code-deletion {
+      padding-left: 22px !important;
+    }
 
-      .blob-code + .blob-num {
-        border-left: 1px solid var(--color-border-muted);
-      }
+    .blob-code-marker::before {
+      position: absolute;
+      top: 1px;
+      left: 8px;
+      padding-right: 8px;
+      content: attr(data-code-marker);
+    }
+
+    .blob-num-hunk {
+      background-color: var(--color-diff-blob-hunk-num-bg);
+    }
+    .blob-code-hunk {
+      background-color: var(--color-accent-subtle);
     }
+  }
+
+  .file-diff-split {
+    table-layout: fixed;
 
-    .empty-cell {
-      cursor: default;
-      background-color: var(--color-neutral-subtle);
-      border-right-color: var(--color-border-muted);
+    .blob-code + .blob-num {
+      border-left: 1px solid var(--color-border-muted);
     }
   }
 
+  .empty-cell {
+    cursor: default;
+    background-color: var(--color-neutral-subtle);
+    border-right-color: var(--color-border-muted);
+  }
 }
+

package/src/types.ts

@@ -25,5 +25,16 @@ export interface UnifiedLine {
   addNum?: number
 }
 
-export type SplitViewerChange = SplitDiffLine[]
-export type UnifiedViewerChange = UnifiedLine[]
+export interface DiffStat {
+  additionsNum: number
+  deletionsNum: number
+}
+export interface SplitViewerChange {
+  changes: SplitDiffLine[]
+  stat: DiffStat
+}
+
+export interface UnifiedViewerChange {
+  changes: UnifiedLine[]
+  stat: DiffStat
+}

package/src/unified/UnifiedLine.vue

@@ -17,13 +17,13 @@ const getCodeMarker = (type: DiffType) => {
 
 <template>
   <tr v-if="line.fold">
-    <td class="blob-num blob-num-empty empty-cell">
+    <td class="blob-num blob-num-hunk">
       >
     </td>
-    <td class="blob-num blob-num-empty empty-cell">
+    <td class="blob-num blob-num-hunk">
       >
     </td>
-    <td class="blob-code blob-code-empty empty-cell" align="left">
+    <td class="blob-code blob-code-hunk" align="left">
       ⋯
     </td>
   </tr>

package/src/unified/UnifiedViewer.vue

@@ -8,13 +8,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="file">
-    <table class="diff-table">
-      <tbody>
-        <UnifiedLine v-for="(item, index) in diffChange" :key="index" :line="item" />
-      </tbody>
-    </table>
-  </div>
+  <table class="diff-table">
+    <tbody>
+      <UnifiedLine v-for="(item, index) in diffChange" :key="index" :line="item" />
+    </tbody>
+  </table>
 </template>
 
 <style scoped></style>