Skip to content

Commit 67dd218

Browse files
to0simpleto0simple
committed
feat(codebox): add codebox
1 parent dfa9214 commit 67dd218

File tree

9 files changed

+301
-11
lines changed

9 files changed

+301
-11
lines changed

‎devui/button/demo/button-demo.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import ButtonCommon from './common/common'
66
export default defineComponent({
77
name: 'd-button-demo',
88
setup() {
9-
const primarySource = {};
10-
const commonSource = {};
11-
9+
const primarySource: any[] = [];
10+
const commonSource: any[] = [];
1211
return () => {
1312
return <div class="demo-container">
1413
<div class="demo-example">

‎devui/shared/devui-codebox/codebox-collapse-icon.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { defineComponent } from 'vue';
2+
export default defineComponent({
3+
setup() {
4+
return () => {
5+
return (
6+
<svg width="16px" height="16px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
7+
<path
8+
d="M1003.46892,474.447037 L750.118678,246.329458 C730.418156,228.591027 700.067888,230.181618 682.329458,249.88214 L682.329458,249.88214 L682.329458,249.88214 C664.591027,269.582663 666.181618,299.932931 685.88214,317.671361 L902.31217,512.545835 L686.384104,706.968338 C666.683581,724.706768 665.092991,755.057036 682.831421,774.757559 C700.569852,794.458082 730.92012,796.048672 750.620642,778.310241 L1006.26246,548.129313 C1025.96298,530.390883 1027.55357,500.040615 1009.81514,480.340092 C1007.84473,478.151722 1005.71869,476.186813 1003.46892,474.447037 Z M120.832433,512.545835 L337.262462,317.671361 C356.962985,299.932931 358.553575,269.582663 340.815145,249.88214 L340.815145,249.88214 L340.815145,249.88214 C323.076714,230.181618 292.726447,228.591027 273.025924,246.329458 L19.6756857,474.447037 C17.4259125,476.186813 15.2998752,478.151722 13.3294577,480.340092 L13.3294577,480.340092 L13.3294577,480.340092 C-4.40897251,500.040615 -2.81838236,530.390883 16.8821402,548.129313 L272.52396,778.310241 C292.224483,796.048672 322.574751,794.458082 340.313181,774.757559 C358.051611,755.057036 356.461021,724.706768 336.760498,706.968338 L120.832433,512.545835 Z"
9+
id="Combined-Shape"
10+
></path>
11+
</svg>
12+
)
13+
}
14+
}
15+
})

‎devui/shared/devui-codebox/codebox-copied-icon.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { defineComponent } from 'vue';
2+
export default defineComponent({
3+
setup() {
4+
return () => {
5+
return (
6+
<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
7+
<defs>
8+
<polygon
9+
id="path-1"
10+
points="6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"
11+
/>
12+
</defs>
13+
<g id="status/whiteBG/correct" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
14+
<mask id="mask-2" fill="white">
15+
<use xlinkHref="#path-1" />
16+
</mask>
17+
<use id="Mask" fill="#3DCCA6" xlinkHref="#path-1" />
18+
</g>
19+
</svg>
20+
)
21+
}
22+
}
23+
})

‎devui/shared/devui-codebox/codebox-copy-icon.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { defineComponent } from 'vue';
2+
export default defineComponent({
3+
setup() {
4+
return () => {
5+
return (
6+
<svg class="devui-code-copy" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
7+
<path
8+
d="M10 4v-4h-7l-3 3v9h6v4h10v-12h-6zM3 1.414v1.586h-1.586l1.586-1.586zM1 11v-7h3v-3h5v3l-3 3v4h-5zM9 5.414v1.586h-1.586l1.586-1.586zM15 15h-8v-7h3v-3h5v10z"
9+
></path>
10+
</svg>
11+
)
12+
}
13+
}
14+
})

‎devui/shared/devui-codebox/devui-codebox.scss

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
@import '../../style/theme/color';
2+
@import '../../style/core/font';
3+
4+
.code-box {
5+
border: 1px solid $devui-line;
6+
border-radius: 4px;
7+
display: inline-block;
8+
width: 100%;
9+
position: relative;
10+
margin: 4px 0;
11+
transition: all 0.2s;
12+
}
13+
14+
.devui-code-copy {
15+
fill: $devui-text;
16+
}
17+
18+
.code-box-demo {
19+
border-bottom: 1px solid $devui-dividing-line;
20+
padding: 42px 20px 50px;
21+
}
22+
23+
.code-box-meta.markdown {
24+
position: relative;
25+
padding: 10px 40px;
26+
border-radius: 0 0 4px 4px;
27+
transition: background-color 0.4s;
28+
width: 100%;
29+
font-size: $devui-font-size;
30+
margin-bottom: 0;
31+
}
32+
33+
.code-box.expand .code-box-meta {
34+
border-radius: 0;
35+
border-bottom: 1px dashed $devui-dividing-line;
36+
}
37+
38+
.code-box-title {
39+
position: absolute;
40+
top: -14px;
41+
padding: 1px 8px;
42+
color: #777777;
43+
border-radius: 4px 4px 0 0;
44+
background: $devui-base-bg;
45+
transition: background-color 0.4s;
46+
}
47+
48+
.code-box-title > a {
49+
color: rgba(0, 0, 0, 0.65);
50+
font-size: $devui-font-size-card-title;
51+
font-weight: 500;
52+
text-decoration: none;
53+
}
54+
55+
.code-box .collapse {
56+
display: block; /* .collapse conflick with bootstrap */
57+
position: absolute;
58+
left: 15px;
59+
// background: $devui-block;
60+
top: -9px;
61+
cursor: pointer;
62+
width: 16px;
63+
height: 16px;
64+
line-height: 16px;
65+
opacity: 0.55;
66+
text-align: center;
67+
transition: all 0.3s;
68+
-webkit-user-select: none;
69+
-moz-user-select: none;
70+
-ms-user-select: none;
71+
user-select: none;
72+
73+
& > svg > path {
74+
fill: $devui-text;
75+
}
76+
}
77+
78+
.dark-mode .code-box .collapse {
79+
opacity: 1;
80+
}
81+
82+
.code-box .highlight-wrapper {
83+
display: none;
84+
overflow: auto;
85+
border-radius: 0 0 4px 4px;
86+
}
87+
88+
.code-box .highlight-wrapper-expand {
89+
display: block;
90+
}
91+
92+
.code-box .highlight {
93+
padding: 5px;
94+
position: relative;
95+
}
96+
97+
.code-box-actions {
98+
position: absolute;
99+
top: 10px;
100+
right: 12px;
101+
text-align: right;
102+
cursor: pointer;
103+
}
104+
105+
.code-box-code-copy:hover {
106+
color: #108ee9;
107+
-webkit-transform: scale(1.2);
108+
transform: scale(1.2);
109+
}
110+
111+
.code-box-code-copy {
112+
font-size: $devui-font-size-card-title;
113+
cursor: pointer;
114+
color: #222222;
115+
transition: all 0.24s;
116+
background: $devui-base-bg;
117+
width: 20px;
118+
height: 20px;
119+
line-height: 20px;
120+
text-align: center;
121+
border-radius: 20px;
122+
opacity: 0;
123+
}
124+
125+
.code-box .highlight pre {
126+
margin: 0;
127+
padding: 0;
128+
}
129+
130+
.code-box pre {
131+
margin: 0;
132+
width: auto;
133+
border: none;
134+
margin-top: 10px;
135+
}
136+
137+
.code-box pre code {
138+
border: none;
139+
}
140+
141+
.highlight-wrapper:hover .code-box-code-copy,
142+
.highlight-wrapper:hover .code-box-codepen,
143+
.highlight-wrapper:hover .code-box-riddle {
144+
opacity: 0.66;
145+
}
146+
147+
.code-box.expand .collapse {
148+
-webkit-transform: rotate(90deg);
149+
transform: rotate(90deg);
150+
}

‎devui/shared/devui-codebox/devui-codebox.tsx

Lines changed: 90 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,101 @@
1-
import { defineComponent } from 'vue'
1+
import { defineComponent, ref } from 'vue'
2+
import { DevuiSourceData } from './devui-source-data';
3+
import CollapseIcon from './codebox-collapse-icon';
4+
import CopyIcon from './codebox-copy-icon';
5+
import CopiedIcon from './codebox-copied-icon';
6+
import DevuiTabs from '../../tabs/tabs';
7+
import DevuiTab from '../../tabs/tab';
8+
import DevuiHighlight from '../devui-highlight/devui-highlight';
9+
10+
import './devui-codebox.scss';
211

312
export default defineComponent({
413
name: 'd-codebox',
514
props: {
615
id: String,
7-
sourceData: Object
16+
sourceData: {
17+
type: Array as () => DevuiSourceData[],
18+
default: []
19+
}
820
},
921
setup(props, ctx) {
22+
const sourceData = props.sourceData;
23+
const expanded = ref(false);
24+
const _copied = ref(false);
25+
let codeTabID = 'TSX';
26+
let componentCode: Array<any>;
27+
28+
const toggleCode = () => {
29+
expanded.value = !expanded.value;
30+
}
31+
32+
const copyCode = (code: string) => {
33+
copy(code).then(() => {
34+
_copied.value = true;
35+
setTimeout(() => {
36+
_copied.value = false;
37+
}, 1000)
38+
})
39+
}
40+
const copy = (value: string): Promise<string> => {
41+
const promise = new Promise<string>((resolve, reject): void => {
42+
let copyTextArea = null as unknown as HTMLTextAreaElement;
43+
try {
44+
copyTextArea = document.createElement('textarea');
45+
copyTextArea.style.height = '0px';
46+
copyTextArea.style.opacity = '0';
47+
copyTextArea.style.width = '0px';
48+
document.body.appendChild(copyTextArea);
49+
copyTextArea.value = value;
50+
copyTextArea.select();
51+
document.execCommand('copy');
52+
resolve(value);
53+
} finally {
54+
if (copyTextArea && copyTextArea.parentNode) {
55+
copyTextArea.parentNode.removeChild(copyTextArea);
56+
}
57+
}
58+
})
59+
return (promise);
60+
}
61+
1062
return () => {
11-
return <div>
12-
devui-codebox
13-
{ctx.slots.default?.()}
14-
</div>
63+
return (
64+
<section class={{'code-box': true, 'expand': expanded.value}}>
65+
<section class='code-box-demo'>
66+
<div>
67+
{ctx.slots.default && ctx.slots.default()}
68+
</div>
69+
</section>
70+
<section class="code-box-meta markdown">
71+
{/* TODO: 待添加tootltip */}
72+
<span class="collapse" onClick={toggleCode}>
73+
<CollapseIcon></CollapseIcon>
74+
</span>
75+
</section>
76+
<section class={{ 'highlight-wrapper': true, 'highlight-wrapper-expand': expanded.value }}>
77+
<div style="padding: 0 20px">
78+
{/* TODO: 待完善tabs */}
79+
<DevuiTabs>
80+
{sourceData.map(item => {
81+
return (
82+
<DevuiTab>
83+
<div class="highlight">
84+
<div class="code-box-actions">
85+
<span onClick={() => copyCode(item.code.default || item.code)}>
86+
{ !_copied.value ? <CopyIcon></CopyIcon> : <CopiedIcon></CopiedIcon>}
87+
</span>
88+
</div>
89+
<DevuiHighlight></DevuiHighlight>
90+
</div>
91+
</DevuiTab>
92+
)
93+
})}
94+
</DevuiTabs>
95+
</div>
96+
</section>
97+
</section>
98+
)
1599
}
16100
}
17101
})

‎devui/shared/devui-codebox/devui-source-data.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface DevuiSourceData {
2+
title?: string;
3+
language?: string;
4+
code?: any
5+
}

‎devui/tabs/tab.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default defineComponent({
66
},
77
setup(props, ctx) {
88
return () => {
9-
return <div>devui-tab</div>
9+
return <div>devui-tab{ctx.slots.default?.()}</div>
1010
}
1111
}
1212
})

‎devui/tabs/tabs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default defineComponent({
66
},
77
setup(props, ctx) {
88
return () => {
9-
return <div>devui-tabs</div>
9+
return <div>devui-tabs{ctx.slots.default?.()}</div>
1010
}
1111
}
1212
})

0 commit comments

Comments
 (0)