Skip to content

Commit 827a270

Browse files
Shimada666Shimada666
committed
feat: add maxHeight prop and adjust css
1 parent d0c0ba9 commit 827a270

5 files changed

Lines changed: 109 additions & 111 deletions

File tree

‎src/CodeDiff.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ interface Props {
1616
outputFormat?: 'line-by-line' | 'side-by-side'
1717
trim?: boolean
1818
noDiffLineFeed?: boolean
19+
maxHeight?: number
1920
}
2021
2122
const props = withDefaults(defineProps<Props>(), {
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
2526
outputFormat: 'line-by-line',
2627
trim: false,
2728
noDiffLineFeed: false,
29+
maxHeight: undefined,
2830
})
2931
3032
const isUnifiedViewer = computed(() => props.outputFormat === 'line-by-line')
@@ -46,7 +48,7 @@ const diffChange = computed(() =>
4648
</script>
4749

4850
<template>
49-
<div class="code-diff-view">
51+
<div class="code-diff-view" :style="{ maxHeight }">
5052
<UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" />
5153
<SplitViewer v-else :diff-change="diffChange" />
5254
</div>

‎src/split/SplitViewer.vue‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,17 @@ const props = defineProps<{
88
</script>
99

1010
<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>
2422
</template>
2523

2624
<style scoped></style>

‎src/style.scss‎

Lines changed: 88 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -5,110 +5,110 @@
55
position: static;
66
}
77

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;
1413

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);
1748
}
18-
.diff-table {
19-
width: 100%;
2049

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;
2759
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
2860
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;
8264
}
65+
}
66+
.blob-code-deletion {
67+
background-color: var(--color-diff-blob-deletion-line-bg);
68+
outline: 1px dashed transparent;
8369

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);
8873
}
74+
}
75+
.blob-code-addition {
76+
background-color: var(--color-diff-blob-addition-line-bg);
77+
outline: 1px dotted transparent;
8978

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);
9682
}
9783
}
9884

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+
}
10190

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);
10597
}
98+
}
99+
100+
.file-diff-split {
101+
table-layout: fixed;
106102

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);
111105
}
112106
}
113107

108+
.empty-cell {
109+
cursor: default;
110+
background-color: var(--color-neutral-subtle);
111+
border-right-color: var(--color-border-muted);
112+
}
114113
}
114+

‎src/unified/UnifiedViewer.vue‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,11 @@ const props = defineProps<{
88
</script>
99

1010
<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>
1816
</template>
1917

2018
<style scoped></style>

‎src/var.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.file {
1+
.code-diff-view {
22
--color-canvas-default-transparent: rgba(255,255,255,0);
33
--color-page-header-bg: #f6f8fa;
44
--color-marketing-icon-primary: #218bff;
@@ -436,4 +436,4 @@
436436
--color-scale-coral-7: #801f0f;
437437
--color-scale-coral-8: #691105;
438438
--color-scale-coral-9: #510901;
439-
}
439+
}

0 commit comments

Comments
 (0)