v-code-diff 1.7.1 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +53 -43
  2. package/dist/v2/index.cjs.js +12 -12
  3. package/dist/v2/index.es.js +770 -700
  4. package/dist/v2/index.umd.js +13 -13
  5. package/dist/v2.7/index.cjs.js +15 -15
  6. package/dist/v2.7/index.es.js +1202 -1166
  7. package/dist/v2.7/index.umd.js +15 -15
  8. package/dist/v3/index.cjs.js +15 -15
  9. package/dist/v3/index.es.js +1155 -1094
  10. package/dist/v3/index.umd.js +15 -15
  11. package/package.json +13 -2
  12. package/src/CodeDiff.vue +40 -16
  13. package/src/style.scss +8 -3
  14. package/src/var.scss +541 -73
package/package.json CHANGED
@@ -1,9 +1,10 @@
1
1
  {
2
2
  "name": "v-code-diff",
3
- "version": "1.7.1",
3
+ "version": "1.8.0",
4
4
  "description": "template component for vue-demi, can dev and build",
5
5
  "exports": {
6
6
  ".": {
7
+ "types": "./types/index.d.ts",
7
8
  "require": "./dist/index.cjs.js",
8
9
  "import": "./dist/index.es.js"
9
10
  }
@@ -49,7 +50,7 @@
49
50
  "dependencies": {
50
51
  "diff": "^5.0.0",
51
52
  "diff-match-patch": "^1.0.5",
52
- "highlight.js": "^11.6.0",
53
+ "highlight.js": "^11.9.0",
53
54
  "vue-demi": "^0.13.11"
54
55
  },
55
56
  "devDependencies": {
@@ -57,6 +58,7 @@
57
58
  "@types/diff": "^5.0.0",
58
59
  "@types/diff-match-patch": "^1.0.32",
59
60
  "@types/node": "^18.11.18",
61
+ "@vueuse/core": "^10.6.1",
60
62
  "bumpp": "^8.2.1",
61
63
  "eslint": "^8.45.0",
62
64
  "npm-run-all": "^4.1.5",
@@ -69,5 +71,14 @@
69
71
  "vue-tsc": "^0.40.13",
70
72
  "vue2": "npm:vue@2",
71
73
  "vue3": "npm:vue@3"
74
+ },
75
+ "pnpm": {
76
+ "packageExtensions": {
77
+ "vue-template-compiler": {
78
+ "peerDependencies": {
79
+ "vue": "~2.6.14"
80
+ }
81
+ }
82
+ }
72
83
  }
73
84
  }
package/src/CodeDiff.vue CHANGED
@@ -5,7 +5,6 @@ import UnifiedViewer from './unified/UnifiedViewer.vue'
5
5
  import SplitViewer from './split/SplitViewer.vue'
6
6
 
7
7
  import './style.scss'
8
- import 'highlight.js/scss/vs.scss'
9
8
 
10
9
  interface Props {
11
10
  newString: string
@@ -18,16 +17,10 @@ interface Props {
18
17
  noDiffLineFeed?: boolean
19
18
  maxHeight?: string
20
19
  filename?: string
21
- hideHeader: boolean
22
- hideStat: boolean
23
- }
24
-
25
- interface DiffResult {
26
- stat: {
27
- isChanged: boolean
28
- addNum: number
29
- delNum: number
30
- }
20
+ newFilename?: string
21
+ hideHeader?: boolean
22
+ hideStat?: boolean
23
+ theme?: 'light' | 'dark'
31
24
  }
32
25
 
33
26
  const props = withDefaults(defineProps<Props>(), {
@@ -39,14 +32,24 @@ const props = withDefaults(defineProps<Props>(), {
39
32
  noDiffLineFeed: false,
40
33
  maxHeight: undefined,
41
34
  filename: undefined,
35
+ newFilename: undefined,
42
36
  hideHeader: false,
43
37
  hideStat: false,
38
+ theme: 'light',
44
39
  })
45
40
 
46
41
  const emits = defineEmits<{
47
42
  (e: 'diff', diffResult: DiffResult): void
48
43
  }>()
49
44
 
45
+ interface DiffResult {
46
+ stat: {
47
+ isChanged: boolean
48
+ addNum: number
49
+ delNum: number
50
+ }
51
+ }
52
+
50
53
  const isUnifiedViewer = computed(() => props.outputFormat === 'line-by-line')
51
54
 
52
55
  const oldString = computed(() => {
@@ -83,13 +86,34 @@ watch(() => props, () => {
83
86
  </script>
84
87
 
85
88
  <template>
86
- <div class="code-diff-view" :style="{ maxHeight }">
89
+ <div class="code-diff-view" :theme="theme" :style="{ maxHeight }">
87
90
  <div v-if="!hideHeader" class="file-header">
88
- <div class="file-info">
89
- <span class="filename">{{ filename }}</span>
91
+ <!-- line by line -->
92
+ <div v-if="isUnifiedViewer" class="file-info">
93
+ <span>
94
+ <div class="info-left">{{ filename }}</div>
95
+ <div class="info-left">{{ newFilename }}</div>
96
+ </span>
90
97
  <span v-if="!hideStat" class="diff-stat">
91
- <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
92
- <span class="diff-stat-deleted" style="margin-left: 8px;">-{{ diffChange.stat.deletionsNum }} deletions</span>
98
+ <slot name="stat">
99
+ <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
100
+ <span class="diff-stat-deleted" style="margin-left: 8px;">-{{ diffChange.stat.deletionsNum }}
101
+ deletions</span>
102
+ </slot>
103
+ </span>
104
+ </div>
105
+ <!-- side by side -->
106
+ <div v-else class="file-info">
107
+ <span class="info-left">{{ filename }}</span>
108
+ <span class="info-right">
109
+ <span style="margin-left: 20px;">{{ newFilename }}</span>
110
+ <span v-if="!hideStat" class="diff-stat">
111
+ <slot name="stat">
112
+ <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
113
+ <span class="diff-stat-deleted" style="margin-left: 8px;">-{{ diffChange.stat.deletionsNum }}
114
+ deletions</span>
115
+ </slot>
116
+ </span>
93
117
  </span>
94
118
  </div>
95
119
  </div>
package/src/style.scss CHANGED
@@ -28,16 +28,21 @@
28
28
  margin-left: 8px;
29
29
  height: 24px;
30
30
 
31
- .filename {
31
+ .info-left {
32
32
  font-size: 13px;
33
33
  color: var(--color-fg-default);
34
34
  }
35
+ .info-right {
36
+ display: flex;
37
+ justify-content: space-between;
38
+ width: 50%;
39
+ }
35
40
  .diff-stat {
36
41
  .diff-stat-added {
37
- color: var(--color-diffstat-addition-bg)
42
+ color: var(--color-diffstat-addition-bg);
38
43
  }
39
44
  .diff-stat-deleted {
40
- color: var(--color-danger-emphasis)
45
+ color: var(--color-danger-emphasis);
41
46
  }
42
47
  }
43
48
  }