v-code-diff 1.6.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-code-diff",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "template component for vue-demi, can dev and build",
   "exports": {
     ".": {

package/scripts/utils.js

@@ -1,5 +1,7 @@
-const fs = require('node:fs')
-const path = require('node:path')
+// eslint-disable-next-line unicorn/prefer-node-protocol
+const fs = require('fs')
+// eslint-disable-next-line unicorn/prefer-node-protocol
+const path = require('path')
 
 const dir = path.resolve(__dirname, '..', 'dist')
 

package/src/CodeDiff.vue

@@ -18,6 +18,8 @@ interface Props {
   noDiffLineFeed?: boolean
   maxHeight?: string
   filename?: string
+  hideHeader: boolean
+  hideStat: boolean
 }
 
 interface DiffResult {
@@ -37,6 +39,8 @@ const props = withDefaults(defineProps<Props>(), {
   noDiffLineFeed: false,
   maxHeight: undefined,
   filename: undefined,
+  hideHeader: false,
+  hideStat: false,
 })
 
 const emits = defineEmits<{
@@ -80,10 +84,10 @@ watch(() => props, () => {
 
 <template>
   <div class="code-diff-view" :style="{ maxHeight }">
-    <div class="file-header">
+    <div v-if="!hideHeader" class="file-header">
       <div class="file-info">
         <span class="filename">{{ filename }}</span>
-        <span class="diff-stat">
+        <span v-if="!hideStat" 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>

package/src/split/SplitLine.vue

@@ -15,6 +15,19 @@ function getCodeMarker(type: DiffType) {
     return '+'
   return ''
 }
+
+function onSplitLineMousedown(side: 'left' | 'right') {
+  window.getSelection()!.removeAllRanges()
+
+  const leftElements = document.querySelectorAll('.file-diff-split .split-side-left')!
+  const rightElements = document.querySelectorAll('.file-diff-split .split-side-right')!
+
+  for (const el of rightElements)
+    el.classList.toggle('no-select', side === 'left')
+
+  for (const el of leftElements)
+    el.classList.toggle('no-select', side === 'right')
+}
 </script>
 
 <template>
@@ -27,31 +40,40 @@ function getCodeMarker(type: DiffType) {
     </td>
   </tr>
   <tr v-else-if="!splitLine.hide">
-    <template v-for="line in [splitLine.left, splitLine.right]">
+    <template v-for="(line, index) in [splitLine.left, splitLine.right]">
       <!-- eslint-disable -->
       <template v-if="line.type === DiffType.EMPTY">
         <td class="blob-num blob-num-empty empty-cell" />
         <td class="blob-code blob-code-empty empty-cell" />
       </template>
       <template v-else>
-        <td class="blob-num" :class="{
-          'blob-num-deletion': line.type === DiffType.DELETE,
-          'blob-num-addition': line.type === DiffType.ADD,
-          'blob-num-context': line.type === DiffType.EQUAL,
-          'blob-num-hunk': splitLine.hide !== undefined,
-
-        }">
+        <td
+          class="blob-num"
+          :class="{
+            'blob-num-deletion': line.type === DiffType.DELETE,
+            'blob-num-addition': line.type === DiffType.ADD,
+            'blob-num-context': line.type === DiffType.EQUAL,
+            'blob-num-hunk': splitLine.hide !== undefined,
+          }"
+        >
           {{ line.num }}
         </td>
-        <td class="blob-code" :class="{
-          'blob-code-deletion': line.type === DiffType.DELETE,
-          'blob-code-addition': line.type === DiffType.ADD,
-          'blob-code-context': line.type === DiffType.EQUAL,
-          'blob-code-hunk': splitLine.hide !== undefined,
-
-        }">
-          <span class="blob-code-inner blob-code-marker" :data-code-marker="getCodeMarker(line.type)"
-            v-html="line.code" />
+        <td
+          class="blob-code"
+          :class="{
+            'blob-code-deletion': line.type === DiffType.DELETE,
+            'blob-code-addition': line.type === DiffType.ADD,
+            'blob-code-context': line.type === DiffType.EQUAL,
+            'blob-code-hunk': splitLine.hide !== undefined,
+            'split-side-left': index === 0,
+            'split-side-right': index === 1,
+          }"
+          @mousedown="onSplitLineMousedown(index === 0 ? 'left' : 'right')"
+        >
+          <span
+            class="blob-code-inner blob-code-marker" :data-code-marker="getCodeMarker(line.type)"
+            v-html="line.code"
+          />
         </td>
       </template>
       <!-- eslint-enable -->

package/src/style.scss

@@ -140,6 +140,10 @@
     .blob-code + .blob-num {
       border-left: 1px solid var(--color-border-muted);
     }
+
+    .no-select {
+      user-select: none;
+    }
   }
 
   .empty-cell {
@@ -148,4 +152,3 @@
     border-right-color: var(--color-border-muted);
   }
 }
-