v-code-diff 1.0.0 → 1.1.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 (13) hide show
  1. package/README.md +2 -1
  2. package/dist/v2/index.cjs.js +3 -3
  3. package/dist/v2/index.es.js +15 -10
  4. package/dist/v2.7/index.cjs.js +3 -3
  5. package/dist/v2.7/index.es.js +190 -189
  6. package/dist/v3/index.cjs.js +7 -7
  7. package/dist/v3/index.es.js +173 -173
  8. package/package.json +7 -3
  9. package/src/CodeDiff.vue +3 -1
  10. package/src/split/SplitViewer.vue +11 -13
  11. package/src/style.scss +88 -88
  12. package/src/unified/UnifiedViewer.vue +5 -7
  13. package/src/var.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "v-code-diff",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "template component for vue-demi, can dev and build",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.es.js",
@@ -33,8 +33,12 @@
33
33
  },
34
34
  "author": "Shimada666<649940882@qq.com>",
35
35
  "license": "MIT",
36
+ "bugs": {
37
+ "url": "https://github.com/Shimada666/v-code-diff/issues"
38
+ },
36
39
  "repository": {
37
- "type": "git"
40
+ "type": "git",
41
+ "url": "git+https://github.com/Shimada666/v-code-diff.git"
38
42
  },
39
43
  "peerDependencies": {
40
44
  "@vue/composition-api": "^1.4.9",
@@ -48,7 +52,7 @@
48
52
  "dependencies": {
49
53
  "diff": "^5.0.0",
50
54
  "highlight.js": "^11.6.0",
51
- "vue-demi": "latest"
55
+ "vue-demi": "^0.13.11"
52
56
  },
53
57
  "devDependencies": {
54
58
  "@antfu/eslint-config": "^0.34.0",
package/src/CodeDiff.vue CHANGED
@@ -16,6 +16,7 @@ interface Props {
16
16
  outputFormat?: 'line-by-line' | 'side-by-side'
17
17
  trim?: boolean
18
18
  noDiffLineFeed?: boolean
19
+ maxHeight?: number
19
20
  }
20
21
 
21
22
  const props = withDefaults(defineProps<Props>(), {
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
25
26
  outputFormat: 'line-by-line',
26
27
  trim: false,
27
28
  noDiffLineFeed: false,
29
+ maxHeight: undefined,
28
30
  })
29
31
 
30
32
  const isUnifiedViewer = computed(() => props.outputFormat === 'line-by-line')
@@ -46,7 +48,7 @@ const diffChange = computed(() =>
46
48
  </script>
47
49
 
48
50
  <template>
49
- <div class="code-diff-view">
51
+ <div class="code-diff-view" :style="{ maxHeight }">
50
52
  <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" />
51
53
  <SplitViewer v-else :diff-change="diffChange" />
52
54
  </div>
package/src/split/SplitViewer.vue CHANGED
@@ -8,19 +8,17 @@ const props = defineProps<{
8
8
  </script>
9
9
 
10
10
  <template>
11
- <div class="file">
12
- <table class="file-diff-split diff-table">
13
- <colgroup>
14
- <col width="44">
15
- <col>
16
- <col width="44">
17
- <col>
18
- </colgroup>
19
- <tbody>
20
- <SplitLine v-for="(item, index) in diffChange" :key="index" :split-line="item" />
21
- </tbody>
22
- </table>
23
- </div>
11
+ <table class="file-diff-split diff-table">
12
+ <colgroup>
13
+ <col width="44">
14
+ <col>
15
+ <col width="44">
16
+ <col>
17
+ </colgroup>
18
+ <tbody>
19
+ <SplitLine v-for="(item, index) in diffChange" :key="index" :split-line="item" />
20
+ </tbody>
21
+ </table>
24
22
  </template>
25
23
 
26
24
  <style scoped></style>
package/src/style.scss CHANGED
@@ -5,110 +5,110 @@
5
5
  position: static;
6
6
  }
7
7
 
8
- .file {
9
- position: relative;
10
- margin-top: 16px;
11
- margin-bottom: 16px;
12
- border: 1px solid var(--color-border-default, #ddd);
13
- border-radius: 2px;
8
+ position: relative;
9
+ margin-top: 16px;
10
+ margin-bottom: 16px;
11
+ border: 1px solid var(--color-border-default, #ddd);
12
+ border-radius: 6px;
14
13
 
15
- table {
16
- border-spacing: 0;
14
+ overflow-y: auto;
15
+
16
+ table {
17
+ border-spacing: 0;
18
+ }
19
+ .diff-table {
20
+ width: 100%;
21
+
22
+ .blob-num {
23
+ position: relative;
24
+ width: 1%;
25
+ min-width: 50px;
26
+ padding-right: 10px;
27
+ padding-left: 10px;
28
+ font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
29
+ font-size: 12px;
30
+ line-height: 20px;
31
+ color: var(--color-fg-subtle);
32
+ text-align: right;
33
+ white-space: nowrap;
34
+ vertical-align: top;
35
+ cursor: pointer;
36
+ -webkit-user-select: none;
37
+ user-select: none;
38
+ }
39
+ .blob-num-deletion {
40
+ color: var(--color-diff-blob-deletion-num-text);
41
+ background-color: var(--color-diff-blob-deletion-num-bg);
42
+ border-color: var(--color-danger-emphasis);
43
+ }
44
+ .blob-num-addition {
45
+ color: var(--color-diff-blob-addition-num-text);
46
+ background-color: var(--color-diff-blob-addition-num-bg);
47
+ border-color: var(--color-success-emphasis);
17
48
  }
18
- .diff-table {
19
- width: 100%;
20
49
 
21
- .blob-num {
22
- position: relative;
23
- width: 1%;
24
- min-width: 50px;
25
- padding-right: 10px;
26
- padding-left: 10px;
50
+ .blob-code {
51
+ position: relative;
52
+ padding-right: 10px;
53
+ padding-left: 10px;
54
+ line-height: 20px;
55
+ vertical-align: top;
56
+ .blob-code-inner {
57
+ display: table-cell;
58
+ overflow: visible;
27
59
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
28
60
  font-size: 12px;
29
- line-height: 20px;
30
- color: var(--color-fg-subtle);
31
- text-align: right;
32
- white-space: nowrap;
33
- vertical-align: top;
34
- cursor: pointer;
35
- -webkit-user-select: none;
36
- user-select: none;
37
- }
38
- .blob-num-deletion {
39
- color: var(--color-diff-blob-deletion-num-text);
40
- background-color: var(--color-diff-blob-deletion-num-bg);
41
- border-color: var(--color-danger-emphasis);
42
- }
43
- .blob-num-addition {
44
- color: var(--color-diff-blob-addition-num-text);
45
- background-color: var(--color-diff-blob-addition-num-bg);
46
- border-color: var(--color-success-emphasis);
47
- }
48
-
49
- .blob-code {
50
- position: relative;
51
- padding-right: 10px;
52
- padding-left: 10px;
53
- line-height: 20px;
54
- vertical-align: top;
55
- .blob-code-inner {
56
- display: table-cell;
57
- overflow: visible;
58
- font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
59
- font-size: 12px;
60
- color: var(--color-fg-default);
61
- word-wrap: anywhere;
62
- white-space: pre-wrap;
63
- }
64
- }
65
- .blob-code-deletion {
66
- background-color: var(--color-diff-blob-deletion-line-bg);
67
- outline: 1px dashed transparent;
68
-
69
- .x {
70
- color: var(--color-diff-blob-deletion-fg);
71
- background-color: var(--color-diff-blob-deletion-word-bg);
72
- }
73
- }
74
- .blob-code-addition {
75
- background-color: var(--color-diff-blob-addition-line-bg);
76
- outline: 1px dotted transparent;
77
-
78
- .x {
79
- color: var(--color-diff-blob-addition-fg);
80
- background-color: var(--color-diff-blob-addition-word-bg);
81
- }
61
+ color: var(--color-fg-default);
62
+ word-wrap: anywhere;
63
+ white-space: pre-wrap;
82
64
  }
65
+ }
66
+ .blob-code-deletion {
67
+ background-color: var(--color-diff-blob-deletion-line-bg);
68
+ outline: 1px dashed transparent;
83
69
 
84
- .blob-code-context,
85
- .blob-code-addition,
86
- .blob-code-deletion {
87
- padding-left: 22px !important;
70
+ .x {
71
+ color: var(--color-diff-blob-deletion-fg);
72
+ background-color: var(--color-diff-blob-deletion-word-bg);
88
73
  }
74
+ }
75
+ .blob-code-addition {
76
+ background-color: var(--color-diff-blob-addition-line-bg);
77
+ outline: 1px dotted transparent;
89
78
 
90
- .blob-code-marker::before {
91
- position: absolute;
92
- top: 1px;
93
- left: 8px;
94
- padding-right: 8px;
95
- content: attr(data-code-marker);
79
+ .x {
80
+ color: var(--color-diff-blob-addition-fg);
81
+ background-color: var(--color-diff-blob-addition-word-bg);
96
82
  }
97
83
  }
98
84
 
99
- .file-diff-split {
100
- table-layout: fixed;
85
+ .blob-code-context,
86
+ .blob-code-addition,
87
+ .blob-code-deletion {
88
+ padding-left: 22px !important;
89
+ }
101
90
 
102
- .blob-code + .blob-num {
103
- border-left: 1px solid var(--color-border-muted);
104
- }
91
+ .blob-code-marker::before {
92
+ position: absolute;
93
+ top: 1px;
94
+ left: 8px;
95
+ padding-right: 8px;
96
+ content: attr(data-code-marker);
105
97
  }
98
+ }
99
+
100
+ .file-diff-split {
101
+ table-layout: fixed;
106
102
 
107
- .empty-cell {
108
- cursor: default;
109
- background-color: var(--color-neutral-subtle);
110
- border-right-color: var(--color-border-muted);
103
+ .blob-code + .blob-num {
104
+ border-left: 1px solid var(--color-border-muted);
111
105
  }
112
106
  }
113
107
 
108
+ .empty-cell {
109
+ cursor: default;
110
+ background-color: var(--color-neutral-subtle);
111
+ border-right-color: var(--color-border-muted);
112
+ }
114
113
  }
114
+
package/src/unified/UnifiedViewer.vue CHANGED
@@ -8,13 +8,11 @@ const props = defineProps<{
8
8
  </script>
9
9
 
10
10
  <template>
11
- <div class="file">
12
- <table class="diff-table">
13
- <tbody>
14
- <UnifiedLine v-for="(item, index) in diffChange" :key="index" :line="item" />
15
- </tbody>
16
- </table>
17
- </div>
11
+ <table class="diff-table">
12
+ <tbody>
13
+ <UnifiedLine v-for="(item, index) in diffChange" :key="index" :line="item" />
14
+ </tbody>
15
+ </table>
18
16
  </template>
19
17
 
20
18
  <style scoped></style>
package/src/var.scss CHANGED
@@ -1,4 +1,4 @@
1
- .file {
1
+ .code-diff-view {
2
2
  --color-canvas-default-transparent: rgba(255,255,255,0);
3
3
  --color-page-header-bg: #f6f8fa;
4
4
  --color-marketing-icon-primary: #218bff;
@@ -436,4 +436,4 @@
436
436
  --color-scale-coral-7: #801f0f;
437
437
  --color-scale-coral-8: #691105;
438
438
  --color-scale-coral-9: #510901;
439
- }
439
+ }