v-code-diff 1.14.1 → 1.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-code-diff",
   "type": "module",
-  "version": "1.14.1",
+  "version": "1.16.0",
   "packageManager": "pnpm@11.2.2",
   "description": "A code diff viewer for Vue 2.6, Vue 2.7, and Vue 3",
   "license": "MIT",
@@ -72,30 +72,26 @@
   "dependencies": {
     "diff": "^5.2.2",
     "diff-match-patch": "^1.0.5",
-    "highlight.js": "^11.10.0",
-    "vue-demi": "^0.14.6"
+    "highlight.js": "^11.12.0",
+    "vue-demi": "^0.14.10"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.4.5",
-    "@types/diff": "^5.2.2",
+    "@antfu/eslint-config": "^2.27.3",
+    "@types/diff": "^5.2.3",
     "@types/diff-match-patch": "^1.0.36",
-    "@types/node": "^18.11.18",
-    "@unocss/eslint-plugin": "^0.58.0",
-    "@vueuse/core": "^10.7.0",
+    "@types/node": "^22.19.15",
     "bumpp": "^8.2.1",
-    "eslint": "^8.55.0",
+    "eslint": "^8.57.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "sass": "^1.69.5",
-    "tsx": "^4.19.4",
-    "typescript": "~4.7.4",
-    "vite": "^5.4.2",
+    "sass": "^1.103.1",
+    "tsx": "^4.23.12",
+    "typescript": "~5.9.3",
+    "vite": "^6.4.3",
     "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vitest": "^2.1.9",
-    "vue": "^3.4.38",
-    "vue-i18n": "^9.14.0",
-    "vue-tsc": "^0.40.13",
-    "vue2": "npm:vue@2",
-    "vue3": "npm:vue@3"
+    "vitest": "^4.1.11",
+    "vue": "^3.5.41",
+    "vue2": "npm:vue@^2.7.16",
+    "vue3": "npm:vue@^3.5.41"
   }
 }

package/src/CodeDiff.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef, watch } from 'vue-demi'
+import type { DiffChangeClickEvent } from './types'
 import { createSplitDiff, createUnifiedDiff } from './utils'
 import UnifiedViewer from './unified/UnifiedViewer.vue'
 import SplitViewer from './split/SplitViewer.vue'
@@ -23,6 +24,7 @@ interface Props {
   newFilename?: string
   hideHeader?: boolean
   hideStat?: boolean
+  hideNavigation?: boolean
   theme?: 'light' | 'dark'
   // Give a pattern to ignore matching lines eg: '(time|token)'
   ignoreMatchingLines?: string
@@ -41,12 +43,14 @@ const props = withDefaults(defineProps<Props>(), {
   newFilename: undefined,
   hideHeader: false,
   hideStat: false,
+  hideNavigation: false,
   theme: 'light',
   ignoreMatchingLines: undefined,
 })
 
 const emits = defineEmits<{
   (e: 'diff', diffResult: DiffResult): void
+  (e: 'change-click', payload: DiffChangeClickEvent): void
 }>()
 
 interface DiffResult {
@@ -132,7 +136,7 @@ watch(() => props, () => {
           <div class="info-left">{{ filename }}</div>
           <div class="info-left">{{ newFilename }}</div>
         </span>
-        <span class="diff-commandbar">
+        <span v-if="!hideNavigation" class="diff-commandbar">
           <button class="command-item-button" title="Next Change" @click="goToNextDiff">
             <DownArrowIcon />
           </button>
@@ -140,6 +144,7 @@ watch(() => props, () => {
             <UpArrowIcon />
           </button>
         </span>
+        <slot name="header-actions" />
         <span v-if="!hideStat" class="diff-stat">
           <slot name="stat" :stat="diffChange.stat">
             <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
@@ -152,7 +157,7 @@ watch(() => props, () => {
         <span class="info-left">{{ filename }}</span>
         <span class="info-right">
           <span style="margin-left: 20px;">{{ newFilename }}</span>
-          <span class="diff-commandbar">
+          <span v-if="!hideNavigation" class="diff-commandbar">
             <button class="command-item-button" title="Next Change" @click="goToNextDiff">
               <DownArrowIcon />
             </button>
@@ -160,6 +165,7 @@ watch(() => props, () => {
               <UpArrowIcon />
             </button>
           </span>
+          <slot name="header-actions" />
           <span v-if="!hideStat" class="diff-stat">
             <slot name="stat" :stat="diffChange.stat">
               <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
@@ -169,8 +175,8 @@ watch(() => props, () => {
         </span>
       </div>
     </div>
-    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" :language="language" />
-    <SplitViewer v-else :diff-change="diffChange" :language="language" />
+    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" :language="language" @change-click="emits('change-click', $event)" />
+    <SplitViewer v-else :diff-change="diffChange" :language="language" @change-click="emits('change-click', $event)" />
   </div>
 </template>
 

package/src/split/SplitLine.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { DiffType } from '../types'
-import type { SplitLineChange } from '../types'
+import type { DiffChangeClickEvent, DiffLine, SplitLineChange } from '../types'
 
 defineProps<{
   splitLine: SplitLineChange
 }>()
 
-const emit = defineEmits(['expand'])
+const emit = defineEmits<{
+  (e: 'expand', line: SplitLineChange): void
+  (e: 'change-click', payload: DiffChangeClickEvent): void
+}>()
 
 function getCodeMarker(type: DiffType) {
   if (type === DiffType.DELETE)
@@ -27,6 +30,19 @@ function onSplitLineMousedown(event: MouseEvent, side: 'left' | 'right') {
   for (const el of leftElements)
     el.classList.toggle('no-select', side === 'right')
 }
+
+function onChangeClick(event: MouseEvent, line: DiffLine, side: 'old' | 'new') {
+  if (line.type !== DiffType.ADD && line.type !== DiffType.DELETE)
+    return
+
+  // Vue 2 DOM templates require kebab-case event names.
+  emit('change-click', {
+    side,
+    type: line.type,
+    lineNumber: line.num!,
+    event,
+  })
+}
 </script>
 
 <template>
@@ -71,6 +87,7 @@ function onSplitLineMousedown(event: MouseEvent, side: 'left' | 'right') {
             'split-side-right': index === 1,
           }"
           @mousedown="onSplitLineMousedown($event, index === 0 ? 'left' : 'right')"
+          @click="onChangeClick($event, line, index === 0 ? 'old' : 'new')"
         >
           <span
             class="blob-code-inner blob-code-marker" :data-code-marker="getCodeMarker(line.type)"

package/src/split/SplitViewer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef, watch } from 'vue-demi'
-import type { SplitLineChange, SplitViewerChange } from '../types'
+import type { DiffChangeClickEvent, SplitLineChange, SplitViewerChange } from '../types'
 import { RENDER_BATCH_SIZE, highlightSplitLine } from '../utils'
 import SplitLine from './SplitLine.vue'
 
@@ -9,6 +9,10 @@ const props = defineProps<{
   language: string
 }>()
 
+const emit = defineEmits<{
+  (e: 'change-click', payload: DiffChangeClickEvent): void
+}>()
+
 const renderLimit = ref(RENDER_BATCH_SIZE)
 const visibleChanges = shallowRef(props.diffChange.changes.filter(line => !line.hide || line.hideIndex !== undefined))
 const renderedChanges = computed(() => visibleChanges.value.slice(0, renderLimit.value))
@@ -50,7 +54,13 @@ function loadMore() {
       <col>
     </colgroup>
     <tbody>
-      <SplitLine v-for="(item, index) in renderedChanges" :key="index" :split-line="item" @expand="expandHandler" />
+      <SplitLine
+        v-for="(item, index) in renderedChanges"
+        :key="index"
+        :split-line="item"
+        @expand="expandHandler"
+        @change-click="emit('change-click', $event)"
+      />
       <tr v-if="remainingLines">
         <td class="blob-code blob-code-hunk load-more" colspan="4">
           <button class="load-more-button" type="button" @click="loadMore">

package/src/types.ts

@@ -21,6 +21,13 @@ export interface DiffLine {
   num?: number
 }
 
+export interface DiffChangeClickEvent {
+  side: 'old' | 'new'
+  type: DiffType.ADD | DiffType.DELETE
+  lineNumber: number
+  event: MouseEvent
+}
+
 export interface SplitLineChange {
   fold?: boolean
   highlighted?: boolean

package/src/unified/UnifiedLine.vue

@@ -1,11 +1,27 @@
 <script lang="ts" setup>
-import type { UnifiedLineChange } from '../types'
+import type { DiffChangeClickEvent, UnifiedLineChange } from '../types'
 import { DiffType } from '../types'
 
-defineProps<{
+const props = defineProps<{
   line: UnifiedLineChange
 }>()
-const emit = defineEmits(['expand'])
+const emit = defineEmits<{
+  (e: 'expand', line: UnifiedLineChange): void
+  (e: 'change-click', payload: DiffChangeClickEvent): void
+}>()
+
+function onChangeClick(event: MouseEvent) {
+  if (props.line.type !== DiffType.ADD && props.line.type !== DiffType.DELETE)
+    return
+
+  // Vue 2 DOM templates require kebab-case event names.
+  emit('change-click', {
+    side: props.line.type === DiffType.DELETE ? 'old' : 'new',
+    type: props.line.type,
+    lineNumber: props.line.type === DiffType.DELETE ? props.line.delNum! : props.line.addNum!,
+    event,
+  })
+}
 
 function getCodeMarker(type: DiffType) {
   if (type === DiffType.DELETE)
@@ -25,7 +41,7 @@ function getCodeMarker(type: DiffType) {
       ⋯
     </td>
   </tr>
-  <tr v-else-if="!line.hide" :data-diff-change="line.type !== DiffType.EQUAL ? '' : undefined">
+  <tr v-else-if="!line.hide" :data-diff-change="line.type !== DiffType.EQUAL ? '' : undefined" @click="onChangeClick">
     <td
       class="blob-num"
       :class="{

package/src/unified/UnifiedViewer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef, watch } from 'vue-demi'
-import type { UnifiedLineChange, UnifiedViewerChange } from '../types'
+import type { DiffChangeClickEvent, UnifiedLineChange, UnifiedViewerChange } from '../types'
 import { RENDER_BATCH_SIZE, highlightUnifiedLine } from '../utils'
 import UnifiedLine from './UnifiedLine.vue'
 
@@ -9,6 +9,10 @@ const props = defineProps<{
   language: string
 }>()
 
+const emit = defineEmits<{
+  (e: 'change-click', payload: DiffChangeClickEvent): void
+}>()
+
 const renderLimit = ref(RENDER_BATCH_SIZE)
 const visibleChanges = shallowRef(props.diffChange.changes.filter(line => !line.hide || line.hideIndex !== undefined))
 const renderedChanges = computed(() => visibleChanges.value.slice(0, renderLimit.value))
@@ -44,7 +48,13 @@ function loadMore() {
 <template>
   <table class="diff-table">
     <tbody>
-      <UnifiedLine v-for="(item, index) in renderedChanges" :key="index" :line="item" @expand="expandHandler" />
+      <UnifiedLine
+        v-for="(item, index) in renderedChanges"
+        :key="index"
+        :line="item"
+        @expand="expandHandler"
+        @change-click="emit('change-click', $event)"
+      />
       <tr v-if="remainingLines">
         <td class="blob-code blob-code-hunk load-more" colspan="3">
           <button class="load-more-button" type="button" @click="loadMore">

package/types/index.d.ts

@@ -16,6 +16,7 @@ export interface CodeDiffProps {
   newFilename?: string
   hideHeader?: boolean
   hideStat?: boolean
+  hideNavigation?: boolean
   theme?: 'light' | 'dark'
   ignoreMatchingLines?: string
 }
@@ -40,16 +41,25 @@ export interface DiffResult {
   }
 }
 
+export interface DiffChangeClickEvent {
+  side: 'old' | 'new'
+  type: 'added' | 'removed'
+  lineNumber: number
+  event: MouseEvent
+}
+
 export interface CodeDiffSlots {
-  stat: (props: { stat: DiffStat }) => VNode[]
+  'header-actions': () => VNode[]
+  'stat': (props: { stat: DiffStat }) => VNode[]
 }
 
 interface CodeDiffEmits {
-  diff: (diffResult: DiffResult) => void
+  'diff': (diffResult: DiffResult) => void
+  'change-click': (payload: DiffChangeClickEvent) => void
 }
 
 type Empty = Record<string, never>
-type CodeDiffComponent = DefineComponent<CodeDiffProps, Empty, Empty, Empty, Empty, Empty, Empty, CodeDiffEmits, 'diff'>
+type CodeDiffComponent = DefineComponent<CodeDiffProps, Empty, Empty, Empty, Empty, Empty, Empty, CodeDiffEmits, 'diff' | 'change-click'>
 
 export declare const CodeDiff: CodeDiffComponent & {
   new (): InstanceType<CodeDiffComponent> & { $slots: CodeDiffSlots }