cmswork 1.1.1 → 1.1.2
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.
- package/Lit/index.html +44 -0
- package/{LitCopy → Lit}/package.json +5 -1
- package/Lit/src/app-element.ts +50 -0
- package/Lit/src/child-element.ts +53 -0
- package/Lit/src/fetch-element.ts +76 -0
- package/{LitCopy → Lit}/src/my-element.ts +37 -50
- package/Lit/src/nav-element.ts +32 -0
- package/Lit/src/store/redux.ts +34 -0
- package/Lit/yarn-error.log +579 -0
- package/Lit/yarn.lock +569 -0
- package/package.json +1 -1
- package/LitCopy/index.html +0 -33
- package/LitCopy/src/child-element.ts +0 -28
- /package/{LitCopy → Lit}/.vscode/settings.json +0 -0
- /package/{LitCopy → Lit}/dist/assets/index-BwL3dWu4.css +0 -0
- /package/{LitCopy → Lit}/dist/assets/index-C0k3p14F.js +0 -0
- /package/{LitCopy → Lit}/dist/index.html +0 -0
- /package/{LitCopy → Lit}/dist/vite.svg +0 -0
- /package/{LitCopy → Lit}/public/vite.svg +0 -0
- /package/{LitCopy → Lit}/src/a.html +0 -0
- /package/{LitCopy → Lit}/src/assets/common.ts +0 -0
- /package/{LitCopy → Lit}/src/assets/lit.svg +0 -0
- /package/{LitCopy → Lit}/src/index.css +0 -0
- /package/{LitCopy → Lit}/src/markdown-element.ts +0 -0
- /package/{LitCopy → Lit}/src/styles/myelement.css +0 -0
- /package/{LitCopy → Lit}/src/styles/myelement.less +0 -0
- /package/{LitCopy → Lit}/src/vite-env.d.ts +0 -0
- /package/{LitCopy → Lit}/tsconfig.json +0 -0
- /package/{LitCopy → Lit}/vite.config.ts +0 -0
package/Lit/index.html
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite + Lit + TS</title>
|
|
8
|
+
<link rel="stylesheet" href="./src/index.css" />
|
|
9
|
+
<!-- <script type="module" src="/src/my-element.ts"></script> -->
|
|
10
|
+
<script type="module" src="/src/app-element.ts"></script>
|
|
11
|
+
<!-- 全量引入 -->
|
|
12
|
+
<script src="https://cdn.jsdelivr.net/npm/@banana-ui/banana/umd/index.js"></script>
|
|
13
|
+
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<!-- <my-element
|
|
17
|
+
id="myEle"
|
|
18
|
+
docsHint="哈哈哈哈"
|
|
19
|
+
count="1"
|
|
20
|
+
dataObj='{"name":"woshi"}'
|
|
21
|
+
>
|
|
22
|
+
<h1>Vite + Lit开发组件</h1>
|
|
23
|
+
</my-element> -->
|
|
24
|
+
<app-element style="width:100vw;height: 600px;padding: 30px;"></app-element>
|
|
25
|
+
</body>
|
|
26
|
+
<script>
|
|
27
|
+
// window.onload = function() {
|
|
28
|
+
// // 定义一个外部函数
|
|
29
|
+
// function externalFunction(message) {
|
|
30
|
+
// console.log('indexHtml externalFunction输出',message); // 弹出传入的消息
|
|
31
|
+
// }
|
|
32
|
+
|
|
33
|
+
// // 获取组件并传入外部函数
|
|
34
|
+
// const myComp = document.getElementById("myEle");
|
|
35
|
+
// myComp.externalFunction = externalFunction; // 传递外部函数
|
|
36
|
+
|
|
37
|
+
// setTimeout(()=>{
|
|
38
|
+
// myComp.dataObj = {
|
|
39
|
+
// name:'Forrest'
|
|
40
|
+
// }
|
|
41
|
+
// },2000)
|
|
42
|
+
// }
|
|
43
|
+
</script>
|
|
44
|
+
</html>
|
|
@@ -9,10 +9,14 @@
|
|
|
9
9
|
"preview": "vite preview"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
+
"@lit-labs/router": "^0.1.3",
|
|
12
13
|
"@material/web": "^2.2.0",
|
|
14
|
+
"@reduxjs/toolkit": "^2.5.0",
|
|
13
15
|
"@types/marked": "^6.0.0",
|
|
14
16
|
"lit": "^3.1.0",
|
|
15
|
-
"marked": "^15.0.3"
|
|
17
|
+
"marked": "^15.0.3",
|
|
18
|
+
"redux": "^4.2.1",
|
|
19
|
+
"redux-thunk": "^3.1.0"
|
|
16
20
|
},
|
|
17
21
|
"devDependencies": {
|
|
18
22
|
"@types/node": "^22.10.1",
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { customElement } from 'lit/decorators.js';
|
|
3
|
+
import { Router } from '@lit-labs/router';
|
|
4
|
+
import './nav-element';
|
|
5
|
+
import './my-element';
|
|
6
|
+
import "./child-element";
|
|
7
|
+
import "./markdown-element";
|
|
8
|
+
import "./fetch-element";
|
|
9
|
+
import { markdownStr } from "./assets/common";
|
|
10
|
+
import "@material/web/all.js"
|
|
11
|
+
@customElement('app-element')
|
|
12
|
+
export class AppElement extends LitElement {
|
|
13
|
+
|
|
14
|
+
private router = new Router(this, [
|
|
15
|
+
{
|
|
16
|
+
path: '/',
|
|
17
|
+
render: () => {
|
|
18
|
+
return html`<my-element><h1>首页Vite + Lit开发组件</h1></my-element>`;
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
path: '/child',
|
|
23
|
+
render: () => html`<child-element></child-element>`
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
path: '/fetch/:id',
|
|
27
|
+
render: ({id}) => html`<fetch-element id=${id || ''}></fetch-element>`
|
|
28
|
+
},
|
|
29
|
+
{ path: '/markdown', render: () => html`<markdown-element content=${markdownStr}></markdown-element>` },
|
|
30
|
+
]);
|
|
31
|
+
|
|
32
|
+
render() {
|
|
33
|
+
return html`
|
|
34
|
+
<nav-element></nav-element>
|
|
35
|
+
<main class='main'>${this.router.outlet()}</main>
|
|
36
|
+
`;
|
|
37
|
+
}
|
|
38
|
+
static styles = [css`
|
|
39
|
+
.main{
|
|
40
|
+
width:100%;
|
|
41
|
+
height: calc(100% - 6rem);
|
|
42
|
+
}
|
|
43
|
+
`]
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
declare global {
|
|
47
|
+
interface HTMLElementTagNameMap {
|
|
48
|
+
'app-element': AppElement;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement, css, html } from "lit";
|
|
2
|
+
import { customElement, property } from "lit/decorators.js";
|
|
3
|
+
import { store } from './store/redux'
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
@customElement("child-element")
|
|
8
|
+
export class ChildElement extends LitElement {
|
|
9
|
+
@property({type: Object})
|
|
10
|
+
router = {}
|
|
11
|
+
@property({type: String})
|
|
12
|
+
textVal = '子组件文本默认值'
|
|
13
|
+
private goTOfetch() {
|
|
14
|
+
console.log('nowcurrentTab',this.nowcurrentTab)
|
|
15
|
+
location.href = '/fetch/34'
|
|
16
|
+
}
|
|
17
|
+
nowcurrentTab:string = ''
|
|
18
|
+
connectedCallback() {
|
|
19
|
+
super.connectedCallback();
|
|
20
|
+
console.log('store',store.getState().value)
|
|
21
|
+
|
|
22
|
+
}
|
|
23
|
+
render() {
|
|
24
|
+
return html`
|
|
25
|
+
<div class='textVal'>
|
|
26
|
+
<b-dropdown>
|
|
27
|
+
<b-button>Banana</b-button>
|
|
28
|
+
<b-menu slot="drop">
|
|
29
|
+
<b-menu-item>Apple</b-menu-item>
|
|
30
|
+
<b-menu-item>Orange</b-menu-item>
|
|
31
|
+
</b-menu>
|
|
32
|
+
</b-dropdown>
|
|
33
|
+
${this.textVal}
|
|
34
|
+
<md-filled-button @click=${this.goTOfetch}>goTOfetch</md-filled-button>
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
</div>
|
|
38
|
+
`
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
static styles?: CSSResultGroup | undefined = css`
|
|
42
|
+
.textVal{
|
|
43
|
+
font-size:24px;
|
|
44
|
+
color: #999;
|
|
45
|
+
}
|
|
46
|
+
`
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
declare global {
|
|
50
|
+
interface HTMLElementTagNameMap {
|
|
51
|
+
"child-element": ChildElement
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { LitElement, css, html } from "lit";
|
|
2
|
+
import { customElement,property } from "lit/decorators.js";
|
|
3
|
+
@customElement("fetch-element")
|
|
4
|
+
export class FetchElement extends LitElement {
|
|
5
|
+
static styles = [css``]
|
|
6
|
+
|
|
7
|
+
@property({ type: String })
|
|
8
|
+
id = '';
|
|
9
|
+
connectedCallback() {
|
|
10
|
+
super.connectedCallback();
|
|
11
|
+
console.log('fetch id',this.id)
|
|
12
|
+
this.fetchData();
|
|
13
|
+
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
data: any[] = [];
|
|
19
|
+
loading: boolean = true;
|
|
20
|
+
error: string | null = null;
|
|
21
|
+
async fetchData() {
|
|
22
|
+
try {
|
|
23
|
+
const response = await fetch(
|
|
24
|
+
"https://jsonplaceholder.typicode.com/posts"
|
|
25
|
+
); // 示例 API
|
|
26
|
+
if (!response.ok) {
|
|
27
|
+
throw new Error("Network response was not ok");
|
|
28
|
+
}
|
|
29
|
+
this.data = await response.json();
|
|
30
|
+
} catch (err: any) {
|
|
31
|
+
this.error = err.message;
|
|
32
|
+
} finally {
|
|
33
|
+
this.loading = false;
|
|
34
|
+
this.requestUpdate(); // 请求更新以重新渲染组件
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
fetchRender() {
|
|
39
|
+
if (this.loading) {
|
|
40
|
+
return html`<div class="loading">Loading...</div>`;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
if (this.error) {
|
|
44
|
+
return html`<div class="error">Error: ${this.error}</div>`;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return html`
|
|
48
|
+
<div>
|
|
49
|
+
${this.data.map(
|
|
50
|
+
(item) => html`
|
|
51
|
+
<div class="item">
|
|
52
|
+
<h3>${item.title}</h3>
|
|
53
|
+
<p>${item.body}</p>
|
|
54
|
+
</div>
|
|
55
|
+
`
|
|
56
|
+
)}
|
|
57
|
+
</div>
|
|
58
|
+
`;
|
|
59
|
+
}
|
|
60
|
+
render() {
|
|
61
|
+
return html`
|
|
62
|
+
<div>
|
|
63
|
+
|
|
64
|
+
${this.fetchRender()}
|
|
65
|
+
|
|
66
|
+
</div>
|
|
67
|
+
`;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
declare global {
|
|
73
|
+
interface HTMLElementTagNameMap {
|
|
74
|
+
"fetch-element": FetchElement;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
@@ -3,10 +3,13 @@ import { customElement, property } from "lit/decorators.js";
|
|
|
3
3
|
import litLogo from "./assets/lit.svg";
|
|
4
4
|
import viteLogo from "/vite.svg";
|
|
5
5
|
import "./child-element";
|
|
6
|
-
import
|
|
7
|
-
import { markdownStr } from "./assets/common";
|
|
8
|
-
import "@material/web/all.js"
|
|
6
|
+
import { store,incremented } from './store/redux'
|
|
9
7
|
|
|
8
|
+
// 定义 DataObject 接口
|
|
9
|
+
interface DataObject {
|
|
10
|
+
name: string;
|
|
11
|
+
age:Number
|
|
12
|
+
}
|
|
10
13
|
@customElement("my-element")
|
|
11
14
|
export class MyElement extends LitElement {
|
|
12
15
|
static styles = [css``]
|
|
@@ -16,9 +19,10 @@ export class MyElement extends LitElement {
|
|
|
16
19
|
@property({ type: Number })
|
|
17
20
|
count = 0;
|
|
18
21
|
|
|
19
|
-
@property({ type: Object
|
|
20
|
-
dataObj = {
|
|
22
|
+
@property({ type: Object})
|
|
23
|
+
dataObj:DataObject = {
|
|
21
24
|
name: "搜索",
|
|
25
|
+
age:90
|
|
22
26
|
};
|
|
23
27
|
|
|
24
28
|
@property({ type: Function })
|
|
@@ -46,73 +50,53 @@ export class MyElement extends LitElement {
|
|
|
46
50
|
return html`<span>当前count小于10</span>`;
|
|
47
51
|
}
|
|
48
52
|
}
|
|
49
|
-
|
|
53
|
+
person:DataObject = {
|
|
54
|
+
name:'Forrest',
|
|
55
|
+
age:29
|
|
56
|
+
}
|
|
50
57
|
connectedCallback() {
|
|
51
58
|
super.connectedCallback();
|
|
52
|
-
this.fetchData();
|
|
53
59
|
|
|
54
60
|
const link = document.createElement('link');
|
|
55
61
|
link.rel = 'stylesheet';
|
|
56
62
|
link.href = '/src/styles/myelement.css';
|
|
57
63
|
if(this.shadowRoot)
|
|
58
64
|
this.shadowRoot.appendChild(link);
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
console.log('dataObj',this.dataObj)
|
|
59
68
|
}
|
|
60
69
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
);
|
|
69
|
-
if (!response.ok) {
|
|
70
|
-
throw new Error("Network response was not ok");
|
|
71
|
-
}
|
|
72
|
-
this.data = await response.json();
|
|
73
|
-
} catch (err: any) {
|
|
74
|
-
this.error = err.message;
|
|
75
|
-
} finally {
|
|
76
|
-
this.loading = false;
|
|
77
|
-
this.requestUpdate(); // 请求更新以重新渲染组件
|
|
70
|
+
// 当属性变化时被调用的回调
|
|
71
|
+
updated(changedProperties: Map<string | number | symbol, unknown>) {
|
|
72
|
+
super.updated(changedProperties);
|
|
73
|
+
if (changedProperties.has('arr')) {
|
|
74
|
+
console.log('arr changed:', this.arr);
|
|
75
|
+
}
|
|
76
|
+
if (changedProperties.has('dataObj')) {
|
|
77
|
+
console.log('dataObj changed:', this.dataObj);
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
+
|
|
81
82
|
callExternalFunction() {
|
|
82
83
|
if (this.externalFunction) {
|
|
83
84
|
this.externalFunction(this.count); // 调用外部函数
|
|
84
85
|
}
|
|
85
86
|
}
|
|
86
87
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
if (this.error) {
|
|
93
|
-
return html`<div class="error">Error: ${this.error}</div>`;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
return html`
|
|
97
|
-
<div>
|
|
98
|
-
${this.data.map(
|
|
99
|
-
(item) => html`
|
|
100
|
-
<div class="item">
|
|
101
|
-
<h3>${item.title}</h3>
|
|
102
|
-
<p>${item.body}</p>
|
|
103
|
-
</div>
|
|
104
|
-
`
|
|
105
|
-
)}
|
|
106
|
-
</div>
|
|
107
|
-
`;
|
|
88
|
+
|
|
89
|
+
showMaterialUI:boolean = false
|
|
90
|
+
showMarkdown:boolean = false
|
|
91
|
+
addStore(){
|
|
92
|
+
store.dispatch(incremented(5))
|
|
108
93
|
}
|
|
109
94
|
render() {
|
|
110
95
|
return html`
|
|
111
96
|
<div>
|
|
112
|
-
<md-filled-button>
|
|
113
|
-
<!-- ${this.fetchRender()} -->
|
|
97
|
+
<md-filled-button @click=${this.addStore}>ADDStore</md-filled-button>
|
|
114
98
|
|
|
115
|
-
|
|
99
|
+
<a href="https://vitejs.dev" target="_blank">
|
|
116
100
|
<img src=${viteLogo} class="logo" alt="Vite logo" />
|
|
117
101
|
</a>
|
|
118
102
|
<a href="https://lit.dev" target="_blank">
|
|
@@ -122,7 +106,8 @@ export class MyElement extends LitElement {
|
|
|
122
106
|
alt="Lit logo"
|
|
123
107
|
/>
|
|
124
108
|
</a>
|
|
125
|
-
|
|
109
|
+
|
|
110
|
+
|
|
126
111
|
<child-element
|
|
127
112
|
textVal="${this.count > 20
|
|
128
113
|
? "父组件的count大于20"
|
|
@@ -138,10 +123,12 @@ export class MyElement extends LitElement {
|
|
|
138
123
|
</button>
|
|
139
124
|
</div>
|
|
140
125
|
<p class="read-the-docs">${this.docsHint}</p>
|
|
141
|
-
<p class="read-the-docs">${this.dataObj.name}</p>
|
|
126
|
+
<p class="read-the-docs">${this.dataObj.name}${this.dataObj.age}</p>
|
|
127
|
+
<p class="read-the-docs">${this.person.name}${this.person.age}</p>
|
|
142
128
|
<button @click="${this.callExternalFunction}">
|
|
143
129
|
Call External Function
|
|
144
130
|
</button>
|
|
131
|
+
</div>
|
|
145
132
|
`;
|
|
146
133
|
}
|
|
147
134
|
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { customElement } from 'lit/decorators.js';
|
|
3
|
+
|
|
4
|
+
@customElement('nav-element')
|
|
5
|
+
export class NavElement extends LitElement {
|
|
6
|
+
static styles = [
|
|
7
|
+
css`
|
|
8
|
+
:host {
|
|
9
|
+
font-size: 1rem;
|
|
10
|
+
}
|
|
11
|
+
nav{
|
|
12
|
+
height:2rem;
|
|
13
|
+
}
|
|
14
|
+
`
|
|
15
|
+
];
|
|
16
|
+
render() {
|
|
17
|
+
return html`
|
|
18
|
+
<nav>
|
|
19
|
+
<a href="/">Home</a>
|
|
20
|
+
<a href="/child">child</a>
|
|
21
|
+
<a href="/markdown">markdown</a>
|
|
22
|
+
<a href="/fetch/23">fetch</a>
|
|
23
|
+
</nav>
|
|
24
|
+
`;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
declare global {
|
|
29
|
+
interface HTMLElementTagNameMap {
|
|
30
|
+
'nav-element': NavElement;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { createSlice, configureStore } from '@reduxjs/toolkit'
|
|
2
|
+
|
|
3
|
+
const counterSlice = createSlice({
|
|
4
|
+
name: 'counter',
|
|
5
|
+
initialState: {
|
|
6
|
+
value: 0
|
|
7
|
+
},
|
|
8
|
+
reducers: {
|
|
9
|
+
incremented: (state, action) => {
|
|
10
|
+
state.value += action.payload; // 使用 action.payload 来获取传入的参数
|
|
11
|
+
},
|
|
12
|
+
decremented: state => {
|
|
13
|
+
state.value -= 1
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
})
|
|
17
|
+
|
|
18
|
+
export const { incremented, decremented } = counterSlice.actions
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export const store = configureStore({
|
|
22
|
+
reducer: counterSlice.reducer
|
|
23
|
+
})
|
|
24
|
+
|
|
25
|
+
// 可以订阅 store
|
|
26
|
+
// store.subscribe(() => console.log(store.getState()))
|
|
27
|
+
|
|
28
|
+
// 将我们所创建的 action 对象传递给 `dispatch`
|
|
29
|
+
// store.dispatch(incremented())
|
|
30
|
+
// {value: 1}
|
|
31
|
+
// store.dispatch(incremented())
|
|
32
|
+
// {value: 2}
|
|
33
|
+
// store.dispatch(decremented())
|
|
34
|
+
// {value: 1}
|