Skip to content

Commit b18df73

Browse files
canyuegongzicanyuegongzi
authored
Merge pull request #60 from wu-component/feat/new
feat:new
2 parents d83a9c5 + 3d4b282 commit b18df73

File tree

132 files changed

+3846
-98
lines changed

Some content is hidden

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

132 files changed

+3846
-98
lines changed

‎.hintrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": [
3+
"development"
4+
],
5+
"hints": {
6+
"meta-viewport": "off"
7+
}
8+
}

‎component/packages/ui/build/build.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const config = [
9595
{ file: `${output}/index.esm.js`, format: 'es' }
9696

9797
],
98-
external: [/web-core-plus$/],
98+
external: [ /web-core-plus$/ ],
9999
}
100100
]
101101

‎component/packages/ui/src/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ export * from '../../wu-transition/src/index';
5252
/*********************************复杂组件*************************************/
5353
export * from '../../wu-date-picker/src/index';
5454
export * from '../../wu-upload/src/index';
55+
export * from '../../wu-waline-comment/src/index';
56+
export * from '../../wu-lottie/src/index';
5557
/*
5658
export * from '@wu-component/wu-button/src/index';
5759
export * from '@wu-component/wu-icon/src/index';

‎component/packages/wu-lottie/public/index.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@
66
</head>
77
<body>
88
<div id="app">
9-
<wu-test-example></wu-test-example>
9+
<div style="width: 300px; height: 300px">
10+
<wu-plus-lottie data="https://cdn.canyuegongzi.xyz/wu-component-static/lf20_r6blppzq.json"></wu-plus-lottie>
11+
</div>
12+
13+
<div style="width: 300px; height: 300px">
14+
<wu-plus-lottie data="https://cdn.canyuegongzi.xyz/wu-component-static/empty-list.json"></wu-plus-lottie>
15+
</div>
16+
</div>
1017
</div>
1118
</body>
1219
</html>

‎component/packages/wu-lottie/src/index.scss‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
1-
@use "sass:map";
2-
@import '../../theme/common/var.scss';
3-
@import '../../theme/common/mixin.scss';
4-
5-
@include b(main) {
6-
// IE11 supports the <main> element partially https://caniuse.com/#search=main
7-
display: block;
8-
flex: 1;
9-
flex-basis: auto;
10-
overflow: auto;
11-
box-sizing: border-box;
12-
padding: $--main-padding;
1+
:host {
2+
width: 100%;
3+
height: 100%;
4+
}
5+
.lottieWrapper {
6+
width: 100%;
7+
height: 100%;
138
}

‎component/packages/wu-lottie/src/index.tsx‎

Lines changed: 73 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,88 @@
1-
import { h, Component, WuComponent } from '@wu-component/web-core-plus';
1+
import { extractClass } from '@wu-component/common';
2+
import { h, Component, WuComponent, Prop, OnConnected, OnDisConnected, Watch } from '@wu-component/web-core-plus';
3+
import lottie, { AnimationItem } from "lottie-web";
24
import css from './index.scss';
35

46
@Component({
57
name: 'wu-plus-lottie',
68
css: css,
79
})
8-
export class WuLottie extends WuComponent {
10+
export class WuLottie extends WuComponent implements OnConnected, OnDisConnected {
911
constructor() {
1012
super();
1113
}
1214

15+
public lottieInstance!: AnimationItem;
16+
17+
public lottieContainer!: HTMLDivElement;
18+
19+
@Prop({ type: Boolean, default: true })
20+
public loop: boolean;
21+
22+
@Prop({ type: String, default: undefined })
23+
public data: string;
24+
25+
@Prop({ type: Boolean, default: true })
26+
public autoplay: boolean;
27+
28+
@Prop({ type: String, default: 'svg' })
29+
public renderer: 'svg' | 'canvas' | 'html'
30+
31+
@Prop({ type: Object, default: {} })
32+
public config: Record<string, any>;
33+
34+
public override connected(shadowRoot: ShadowRoot): void {
35+
this.init();
36+
}
37+
38+
public override disConnected(): void {
39+
40+
}
41+
42+
private init(){
43+
this.lottieContainer = this.shadowRoot.querySelector('.lottieWrapper');
44+
if (!this.lottieContainer) return;
45+
this.lottieInstance = lottie.loadAnimation({
46+
// @ts-ignore
47+
...this.$reactive || {},
48+
path: typeof this.data === 'string' ? this.data : undefined,
49+
animationData: typeof this.data === 'object' ? this.data : undefined,
50+
container: this.shadowRoot.querySelector('.lottieWrapper'),
51+
});
52+
}
53+
54+
@Watch('data')
55+
public dataChnage(val: string, old: string) {
56+
this.init();
57+
}
58+
59+
@Watch('loop')
60+
public loopChnage(val: boolean, old: boolean) {
61+
if (!this.lottieInstance) return;
62+
this.lottieInstance.loop = val;
63+
64+
if (val && this.lottieInstance.isPaused) {
65+
this.lottieInstance.play();
66+
}
67+
}
68+
69+
@Watch('autoplay')
70+
public lautoplayChnage(val: boolean, old: boolean) {
71+
if (!this.lottieInstance) return;
72+
this.lottieInstance.autoplay = val;
73+
}
74+
75+
public stop() {
76+
return this.lottieInstance && this.lottieInstance.stop();
77+
}
78+
79+
public play() {
80+
return this.lottieInstance && this.lottieInstance.play();
81+
}
82+
1383
public override render(_renderProps = {}, _store = {}) {
1484
return (
15-
<footer class="wu-main">
16-
<slot class="wu-main" />
17-
</footer>
85+
<div {...extractClass({}, 'lottieWrapper', {})}> </div>
1886
);
1987
}
2088
}

‎component/packages/wu-lottie/types/index.d.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
1-
import { WuComponent } from '@wu-component/web-core-plus';
2-
export declare class WuLottie extends WuComponent {
1+
import { WuComponent, OnConnected, OnDisConnected } from '@wu-component/web-core-plus';
2+
import { AnimationItem } from "lottie-web";
3+
export declare class WuLottie extends WuComponent implements OnConnected, OnDisConnected {
34
constructor();
5+
lottieInstance: AnimationItem;
6+
lottieContainer: HTMLDivElement;
7+
loop: boolean;
8+
data: string;
9+
autoplay: boolean;
10+
renderer: 'svg' | 'canvas' | 'html';
11+
config: Record<string, any>;
12+
connected(shadowRoot: ShadowRoot): void;
13+
disConnected(): void;
14+
private init;
15+
dataChnage(val: string, old: string): void;
16+
loopChnage(val: boolean, old: boolean): void;
17+
lautoplayChnage(val: boolean, old: boolean): void;
18+
stop(): void;
19+
play(): void;
420
render(_renderProps?: {}, _store?: {}): any;
521
}

‎component/packages/wu-waline-comment/types/lib/ajax.d.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎component/packages/wu-waline-comment/types/wu-progress/src/index.d.ts‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎component/packages/wu-waline-comment/types/wu-upload/src/icon.d.ts‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)