Skip to content

Commit dc5d9ce

Browse files
wangyajuhuaweidevcloud
wangyaju
and
huaweidevcloud
authored
chore(release): release 12.2.0 (#155)
Co-authored-by: huaweidevcloud <[email protected]>
1 parent bb665de commit dc5d9ce

File tree

218 files changed

+4333
-2237
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

218 files changed

+4333
-2237
lines changed

‎devui-commons/src/codecopy/codecopy.directive.ts

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { AfterViewInit, Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
2+
import { fromEvent, Subject, Subscription } from 'rxjs';
3+
import { takeUntil } from 'rxjs/operators';
4+
import { DevuiCommonsService } from '../../src/devui-commons.service';
5+
import { I18nUtil } from '../i18n/i18n.util';
6+
import { ReadTipOption, StrCopySVG } from './codecopy.types';
7+
@Directive({
8+
selector: '[dCodeCopy]',
9+
})
10+
export class CodeCopyDirective implements OnInit, AfterViewInit, OnDestroy {
11+
@Output('copied') copied: EventEmitter<any> = new EventEmitter<any>();
12+
private destroy$ = new Subject();
13+
timer: any;
14+
optionsSuccess = ReadTipOption.optionSuccessData['zh-cn'];
15+
options = ReadTipOption.optionData['zh-cn'];
16+
17+
subs: Subscription = new Subscription();
18+
curLanguage: string;
19+
constructor(private hostElementRef: ElementRef, private commonsService: DevuiCommonsService) {}
20+
21+
ngOnInit() {
22+
this.curLanguage = I18nUtil.getCurrentLanguage();
23+
this.subs = this.commonsService.on('languageEvent').subscribe((term) => this.changeLanguage(term));
24+
this.setOption(this.curLanguage);
25+
}
26+
27+
ngOnDestroy() {
28+
this.destroy$.next();
29+
this.destroy$.complete();
30+
if (this.timer) {
31+
clearTimeout(this.timer);
32+
}
33+
this.subs.unsubscribe();
34+
}
35+
36+
ngAfterViewInit() {
37+
this.setOption(this.curLanguage);
38+
this.addCodeCopy();
39+
}
40+
41+
changeLanguage(lang) {
42+
this.curLanguage = lang;
43+
this.setOption(lang);
44+
setTimeout(() => {
45+
this.addCodeCopy();
46+
});
47+
}
48+
49+
setOption(lang) {
50+
this.options = ReadTipOption.optionData[lang];
51+
this.optionsSuccess = ReadTipOption.optionSuccessData[lang];
52+
}
53+
54+
addCodeCopy() {
55+
setTimeout(() => {
56+
const codeElements = this.hostElementRef.nativeElement.querySelectorAll('pre code');
57+
this.copied.emit(this.options);
58+
codeElements.forEach((ele) => {
59+
const preEle = ele.parentElement;
60+
preEle.style.position = 'relative';
61+
preEle.classList.add('d-md-code-pre');
62+
const copySpanEle = document.createElement('span');
63+
copySpanEle.classList.add('d-md-pre-copy');
64+
copySpanEle.innerHTML = StrCopySVG.CopySVG;
65+
preEle.appendChild(copySpanEle);
66+
});
67+
}, 10);
68+
69+
fromEvent(document.querySelector('.devui-content-layout'), 'click')
70+
.pipe(takeUntil(this.destroy$))
71+
.subscribe(($event) => {
72+
const nowElement = $event.target as HTMLElement;
73+
if (nowElement.classList.contains('devui-api-code-copy')) {
74+
const spanElement = nowElement.parentElement;
75+
if (spanElement) {
76+
const codeText = spanElement.parentElement.querySelector('code').textContent;
77+
this.copy(codeText);
78+
spanElement.innerHTML = StrCopySVG.CopySuccessSVG;
79+
this.copied.emit(this.optionsSuccess);
80+
this.timer = setTimeout(() => {
81+
spanElement.innerHTML = StrCopySVG.CopySVG;
82+
this.copied.emit(this.options);
83+
}, 1000);
84+
}
85+
}
86+
});
87+
}
88+
89+
copy(value: string): Promise<string> {
90+
const promise = new Promise<string>((resolve, reject): void => {
91+
let copyTextArea = null as HTMLTextAreaElement;
92+
try {
93+
copyTextArea = document.createElement('textarea');
94+
copyTextArea.style.height = '0px';
95+
copyTextArea.style.opacity = '0';
96+
copyTextArea.style.width = '0px';
97+
document.body.appendChild(copyTextArea);
98+
copyTextArea.value = value;
99+
copyTextArea.select();
100+
document.execCommand('copy');
101+
resolve(value);
102+
} finally {
103+
if (copyTextArea && copyTextArea.parentNode) {
104+
copyTextArea.parentNode.removeChild(copyTextArea);
105+
}
106+
}
107+
});
108+
109+
return promise;
110+
}
111+
}

‎devui-commons/src/codecopy/codecopy.module.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { CodeCopyDirective } from './codecopy.directive';
4+
5+
@NgModule({
6+
imports: [CommonModule],
7+
exports: [CodeCopyDirective],
8+
declarations: [CodeCopyDirective],
9+
})
10+
export class CodeCopyModule {}

‎devui-commons/src/codecopy/codecopy.types.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
export const StrCopySVG = {
2+
CopySVG:
3+
// tslint:disable-next-line: max-line-length
4+
'<svg class="devui-api-code-copy" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path 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"></path></svg>',
5+
6+
CopySuccessSVG:
7+
// tslint:disable-next-line: max-line-length
8+
'<svg class="devui-code-copy-success" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"><defs><polygon id="path-1" 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"/></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><mask id="mask-2" fill="white"><use xlink:href="#path-1" /></mask><use id="Mask" fill="#3DCCA6" xlink:href="#path-1" /></g></svg>',
9+
};
10+
11+
export const ReadTipOption = {
12+
optionSuccessData: {
13+
'zh-cn': {
14+
position: 'bottom',
15+
rules: {
16+
selector: '.devui-code-copy-success',
17+
content: '复制成功',
18+
},
19+
},
20+
'en-us': {
21+
position: 'bottom',
22+
rules: {
23+
selector: '.devui-code-copy-success',
24+
content: 'Success',
25+
},
26+
},
27+
},
28+
optionData: {
29+
'zh-cn': {
30+
position: 'bottom',
31+
rules: {
32+
selector: '.devui-api-code-copy',
33+
content: '复制代码',
34+
},
35+
},
36+
'en-us': {
37+
position: 'bottom',
38+
rules: {
39+
selector: '.devui-api-code-copy',
40+
content: 'Copy Code',
41+
},
42+
},
43+
},
44+
};

‎devui-commons/src/devui-commons.module.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { NgModule } from '@angular/core';
2+
import { CodeCopyModule } from './codecopy/codecopy.module';
23
import { HeaderModule } from './header';
34
import { SidebarModule } from './sidebar';
45

@@ -10,7 +11,8 @@ import { SidebarModule } from './sidebar';
1011
],
1112
exports: [
1213
HeaderModule,
13-
SidebarModule
14+
SidebarModule,
15+
CodeCopyModule
1416
]
1517
})
1618
export class DevuiCommonsModule { }

‎devui-commons/src/devui-commons.scss

+108-5
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,6 @@
111111

112112
.devui-code-box pre {
113113
width: auto;
114-
border: none;
115114
margin: 10px 0 0;
116115
}
117116

@@ -189,16 +188,21 @@
189188
color: $devui-text;
190189
white-space: nowrap;
191190
text-overflow: ellipsis;
192-
-webkit-transition: all .3s ease;
193-
transition: all .3s ease;
194-
191+
-webkit-transition: all 0.3s ease;
192+
transition: all 0.3s ease;
195193
}
196194
a.current {
197195
color: $devui-link;
198196
}
199197

200198
&.active {
201199
color: $devui-link;
200+
&:not(.open) {
201+
font-weight: 600;
202+
}
203+
}
204+
&:not(.disabled):hover {
205+
color: $devui-link;
202206
}
203207
}
204208
}
@@ -227,4 +231,103 @@
227231
margin-left: 0;
228232
transition: all 0.2s ease-out;
229233
}
230-
}
234+
}
235+
236+
// 设置引导页MarkDown文档标题
237+
.readme {
238+
h1 {
239+
@include font-title($devui-font-size-data-overview);
240+
padding: 40px 0 20px;
241+
}
242+
h2 {
243+
@include font-title($devui-font-size-page-title);
244+
padding: 40px 0 15px;
245+
}
246+
h3 {
247+
@include font-title($devui-font-size-card-title);
248+
padding: 30px 0 10px;
249+
}
250+
h1,
251+
h2,
252+
h3 {
253+
// font-weight: normal;
254+
margin: 0;
255+
}
256+
pre code {
257+
padding: 0.5em;
258+
}
259+
}
260+
// 引导页页面样式设置
261+
.readme {
262+
.hljs {
263+
background: transparent;
264+
}
265+
pre {
266+
background-color: $devui-base-bg;
267+
border: none;
268+
code {
269+
border: 1px solid $devui-dividing-line;
270+
overflow-x: auto;
271+
}
272+
}
273+
p {
274+
margin: 1em 0;
275+
}
276+
}
277+
// API页MarkDown文档标题样式
278+
.markdown h1 {
279+
font-size: $devui-font-size-price;
280+
}
281+
.markdown h2 {
282+
font-size: $devui-font-size-page-title;
283+
}
284+
.markdown h3 {
285+
font-size: $devui-font-size-card-title;
286+
}
287+
.markdown h2,
288+
.markdown h3,
289+
.markdown h4,
290+
.markdown h5,
291+
.markdown h6 {
292+
color: $devui-text;
293+
margin: 1.6em 0 0.6em;
294+
font-weight: bold;
295+
clear: both;
296+
}
297+
// API页MarkDown文档正文样式
298+
.markdown {
299+
color: $devui-text;
300+
font-size: $devui-font-size-lg;
301+
line-height: 1.8;
302+
a {
303+
color: $devui-link;
304+
&:hover {
305+
color: $devui-link-active;
306+
text-decoration: underline;
307+
cursor: pointer;
308+
}
309+
}
310+
}
311+
// 使用Card组件对demo进行封装
312+
.devui-demo-card-wrapper {
313+
.devui-demo-example {
314+
margin-bottom: 0px;
315+
}
316+
cursor: pointer;
317+
transition: box-shadow $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
318+
transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
319+
&:hover {
320+
box-shadow: $devui-shadow-length-hover $devui-light-shadow;
321+
// transform: translateY(-5px);
322+
}
323+
margin-bottom: 40px;
324+
}
325+
326+
// MarkDown文档代码复制按钮样式
327+
.d-md-pre-copy {
328+
position: absolute;
329+
top: 10px;
330+
right: 12px;
331+
text-align: right;
332+
cursor: pointer;
333+
}

‎devui/accordion/demo/accordion-demo.component.ts

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,44 @@
11
import { Component, OnDestroy, OnInit } from '@angular/core';
2-
import { DevuiSourceData } from 'ng-devui/shared/devui-codebox/devui-source-data';
32
import { TranslateService, TranslationChangeEvent } from '@ngx-translate/core';
3+
import { DevuiSourceData } from 'ng-devui/shared/devui-codebox/devui-source-data';
44
import { Subscription } from 'rxjs';
55
@Component({
66
selector: 'd-accordion-demo',
77
templateUrl: './accordion-demo.component.html',
88
})
99
export class AccordionDemoComponent implements OnInit, OnDestroy {
1010
AccordionDemoBasic: Array<DevuiSourceData> = [
11-
{ title: 'HTML', language: 'xml', code: require('!!raw-loader!./basic/basic.component.html') },
12-
{ title: 'TS', language: 'typescript', code: require('!!raw-loader!./basic/basic.component.ts') },
13-
{ title: 'SCSS', language: 'css', code: require('!!raw-loader!./basic/basic.component.css') },
11+
{ title: 'HTML', language: 'xml', code: require('./basic/basic.component.html?raw') },
12+
{ title: 'TS', language: 'typescript', code: require('./basic/basic.component.ts?raw') },
13+
{ title: 'SCSS', language: 'css', code: require('./basic/basic.component.css?raw') },
1414
];
1515

1616
AccordionDemolink: Array<DevuiSourceData> = [
17-
{ title: 'HTML', language: 'xml', code: require('!!raw-loader!./link/link.component.html') },
18-
{ title: 'TS', language: 'typescript', code: require('!!raw-loader!./link/link.component.ts') },
19-
{ title: 'SCSS', language: 'css', code: require('!!raw-loader!./link/link.component.css') },
17+
{ title: 'HTML', language: 'xml', code: require('./link/link.component.html?raw') },
18+
{ title: 'TS', language: 'typescript', code: require('./link/link.component.ts?raw') },
19+
{ title: 'SCSS', language: 'css', code: require('./link/link.component.css?raw') },
2020
];
2121

2222
AccordionDemoTemplate: Array<DevuiSourceData> = [
23-
{ title: 'HTML', language: 'xml', code: require('!!raw-loader!./template/template.component.html') },
24-
{ title: 'TS', language: 'typescript', code: require('!!raw-loader!./template/template.component.ts') },
25-
{ title: 'SCSS', language: 'css', code: require('!!raw-loader!./template/template.component.scss') },
23+
{ title: 'HTML', language: 'xml', code: require('./template/template.component.html?raw') },
24+
{ title: 'TS', language: 'typescript', code: require('./template/template.component.ts?raw') },
25+
{ title: 'SCSS', language: 'css', code: require('./template/template.component.scss?raw') },
2626
];
2727

2828
AccordionDemoInnerListTemplate: Array<DevuiSourceData> = [
29-
{ title: 'HTML', language: 'xml', code: require('!!raw-loader!./inner-list-template/inner-list-template.component.html') },
30-
{ title: 'TS', language: 'typescript', code: require('!!raw-loader!./inner-list-template/inner-list-template.component.ts') },
31-
{ title: 'SCSS', language: 'css', code: require('!!raw-loader!./inner-list-template/inner-list-template.component.css') },
29+
{ title: 'HTML', language: 'xml', code: require('./inner-list-template/inner-list-template.component.html?raw') },
30+
{ title: 'TS', language: 'typescript', code: require('./inner-list-template/inner-list-template.component.ts?raw') },
31+
{ title: 'SCSS', language: 'css', code: require('./inner-list-template/inner-list-template.component.css?raw') },
3232
];
3333
AccordionDemoMultiLevel: Array<DevuiSourceData> = [
34-
{ title: 'HTML', language: 'xml', code: require('!!raw-loader!./multi-level/multi-level.component.html') },
35-
{ title: 'TS', language: 'typescript', code: require('!!raw-loader!./multi-level/multi-level.component.ts') },
36-
{ title: 'SCSS', language: 'css', code: require('!!raw-loader!./multi-level/multi-level.component.css') },
34+
{ title: 'HTML', language: 'xml', code: require('./multi-level/multi-level.component.html?raw') },
35+
{ title: 'TS', language: 'typescript', code: require('./multi-level/multi-level.component.ts?raw') },
36+
{ title: 'SCSS', language: 'css', code: require('./multi-level/multi-level.component.css?raw') },
3737
];
3838
AccordionDemoChangeKey: Array<DevuiSourceData> = [
39-
{ title: 'HTML', language: 'xml', code: require('!!raw-loader!./change-key/change-key.component.html') },
40-
{ title: 'TS', language: 'typescript', code: require('!!raw-loader!./change-key/change-key.component.ts') },
41-
{ title: 'SCSS', language: 'css', code: require('!!raw-loader!./change-key/change-key.component.css') },
39+
{ title: 'HTML', language: 'xml', code: require('./change-key/change-key.component.html?raw') },
40+
{ title: 'TS', language: 'typescript', code: require('./change-key/change-key.component.ts?raw') },
41+
{ title: 'SCSS', language: 'css', code: require('./change-key/change-key.component.css?raw') },
4242
];
4343

4444
navItems = [];

0 commit comments

Comments
 (0)