Skip to content

Commit 9744863

Browse files
pardnchiupardnchiu
committed
Add :once, :hide, UPPER(), LOWER(), and DATE() support
1 parent a40979b commit 9744863

9 files changed

Lines changed: 553 additions & 376 deletions

File tree

‎README.md‎

Lines changed: 87 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Improving code maintainability and readability while reducing development comple
2828

2929
## Creator
3030

31-
<img src="https://pardn.io/image/head-s.jpg" style="float: left; margin-right: 0.5rem; width: 128px; height: 128px;">
31+
<img src="https://pardn.io/image/head-s.jpg" align="left" width="128" height="128" style="margin-right: 0.5rem;">
3232

3333
### 邱敬幃 Pardn Chiu
3434

@@ -64,16 +64,92 @@ This source code project is licensed under the [GPL-3.0](https://github.com/pard
6464
| @[event] | Add event listeners to execute specified actions when events are triggered.<br>For example: @click/@input/@mousedown... |
6565
| :@[event] | Set event handlers for individual elements within a loop, allowing different event handling for each element. |
6666

67-
- #### Function `LENGTH()`:
68-
If `data.array = [1, 2, 3, 4];`
69-
Then `<p>Total: {{ LENGTH(array) }}</p>`
70-
Becomes `<p>Total: 4</p>`
71-
72-
- #### Function `CALC()`:
73-
If `data.num = 1;`
74-
Then `<p>calc: {{ CALC(num * 10) }}</p>`
75-
Becomes `<p>calc: 10</p>`
76-
67+
- #### Function
68+
- `LENGTH()`:
69+
- index.html
70+
```HTML
71+
<body id="app">
72+
<p>Total: {{ LENGTH(array) }}</p>
73+
</body>
74+
<script>
75+
const app = new PD({
76+
id: "app",
77+
data: {
78+
array: [1, 2, 3, 4]
79+
}
80+
});
81+
</script>
82+
```
83+
- result
84+
```HTML
85+
<body id="app">
86+
<p>Total: 4</p>
87+
</body>
88+
```
89+
- `CALC()`:
90+
- index.html
91+
```HTML
92+
<body id="app">
93+
<p>calc: {{ CALC(num * 10) }}</p>
94+
</body>
95+
<script>
96+
const app = new PD({
97+
id: "app",
98+
data: {
99+
num: 1
100+
}
101+
});
102+
</script>
103+
```
104+
- result
105+
```HTML
106+
<body id="app">
107+
<p>calc: 10</p>
108+
</body>
109+
```
110+
- `UPPER()` / `LOWER()`
111+
- index.html
112+
```HTML
113+
<body id="app">
114+
<p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
115+
</body>
116+
<script>
117+
const app = new PD({
118+
id: "app",
119+
data: {
120+
test1: "upper",
121+
test2: "LOWER"
122+
}
123+
});
124+
</script>
125+
```
126+
- result
127+
```HTML
128+
<body id="app">
129+
<p>UPPER lower</p>
130+
</body>
131+
```
132+
- `DATE(num, format)`:
133+
- index.html
134+
```HTML
135+
<body id="app">
136+
<p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
137+
</body>
138+
<script>
139+
const app = new PD({
140+
id: "app",
141+
data: {
142+
now: Math.floor(Date.now() / 1000)
143+
}
144+
});
145+
</script>
146+
```
147+
- result
148+
```HTML
149+
<body id="app">
150+
<p>2024-08-17 03:40:47</p>
151+
</body>
152+
```
77153
- #### `:path` / `:html`
78154
*Make sure to disable local file restrictions in your browser or use a live server when you are testing ':path'.*
79155
- ##### test.html

‎dist/PDRenderKit.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -6,78 +6,78 @@
66
<!DOCTYPE html>
77
<html lang="zh-Hans-TW">
88

9-
<head>
10-
<!-- 基本設定 -->
11-
<meta charset="UTF-8">
12-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
13-
<meta name="robots" content="index, follow">
14-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
15-
<meta name="theme-color" content="#000000">
9+
<head>
10+
<!-- 基本設定 -->
11+
<meta charset="UTF-8">
12+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
13+
<meta name="robots" content="index, follow">
14+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
15+
<meta name="theme-color" content="#000000">
1616

17-
<!-- 網頁標題與描述 -->
18-
<title>PDRenderKit 輕量化前端框架</title>
19-
<meta name="description" content="(JavaScript Lib) PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic. 邱敬幃 Pardn Chiu.">
17+
<!-- 網頁標題與描述 -->
18+
<title>PDRenderKit 輕量化前端框架</title>
19+
<meta name="description" content="(JavaScript Lib) PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic. 邱敬幃 Pardn Chiu.">
2020

21-
<!-- Open Graph 資訊 -->
22-
<meta property="og:title" content=">PDRenderKit 輕量化前端框架">
23-
<meta property="og:description" content="(JavaScript Lib) PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic. 邱敬幃 Pardn Chiu.">
24-
<meta property="og:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDRenderKit">
25-
<meta property="og:url" content="https://pardnchiu.github.io/PDRenderKit">
26-
<meta property="og:type" content="website">
27-
<meta property="og:site_name" content="PDRenderKit 輕量化前端框架">
21+
<!-- Open Graph 資訊 -->
22+
<meta property="og:title" content=">PDRenderKit 輕量化前端框架">
23+
<meta property="og:description" content="(JavaScript Lib) PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic. 邱敬幃 Pardn Chiu.">
24+
<meta property="og:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDRenderKit">
25+
<meta property="og:url" content="https://pardnchiu.github.io/PDRenderKit">
26+
<meta property="og:type" content="website">
27+
<meta property="og:site_name" content="PDRenderKit 輕量化前端框架">
2828

29-
<!-- Twitter 卡片資訊 -->
30-
<meta property="twitter:title" content=">PDRenderKit 輕量化前端框架">
31-
<meta property="twitter:description" content="(JavaScript Lib) PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic. 邱敬幃 Pardn Chiu.">
32-
<meta property="twitter:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDRenderKit">
33-
<meta property="twitter:image:alt" content="PDRenderKit 輕量化前端框架">
34-
<meta property="twitter:url" content="https://pardnchiu.github.io/PDRenderKit">
35-
<meta property="twitter:site" content="@pardnchiu">
36-
<meta property="twitter:card" content="summary_large_image">
29+
<!-- Twitter 卡片資訊 -->
30+
<meta property="twitter:title" content=">PDRenderKit 輕量化前端框架">
31+
<meta property="twitter:description" content="(JavaScript Lib) PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic. 邱敬幃 Pardn Chiu.">
32+
<meta property="twitter:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDRenderKit">
33+
<meta property="twitter:image:alt" content="PDRenderKit 輕量化前端框架">
34+
<meta property="twitter:url" content="https://pardnchiu.github.io/PDRenderKit">
35+
<meta property="twitter:site" content="@pardnchiu">
36+
<meta property="twitter:card" content="summary_large_image">
3737

38-
<!-- Mobile App 設定 -->
39-
<meta name="mobile-web-app-capable" content="no">
40-
<meta name="apple-mobile-web-app-capable" content="no">
41-
<meta name="apple-mobile-web-app-status-bar-style" content="default">
38+
<!-- Mobile App 設定 -->
39+
<meta name="mobile-web-app-capable" content="no">
40+
<meta name="apple-mobile-web-app-capable" content="no">
41+
<meta name="apple-mobile-web-app-status-bar-style" content="default">
4242

43-
<!-- 網站圖標 -->
44-
<link rel="apple-touch-icon" href="">
45-
<link rel="apple-touch-icon-precomposed" href="">
46-
<link rel="icon" href="" type="image/x-icon">
43+
<!-- 網站圖標 -->
44+
<link rel="apple-touch-icon" href="">
45+
<link rel="apple-touch-icon-precomposed" href="">
46+
<link rel="icon" href="" type="image/x-icon">
4747

48-
<!-- 驗證標籤 -->
49-
<meta name="google-site-verification" content="YQQ2f6AchR8dcb55Az2BYd_mw4TrP0J1RApD-v2v65Y" />
48+
<!-- 驗證標籤 -->
49+
<meta name="google-site-verification" content="YQQ2f6AchR8dcb55Az2BYd_mw4TrP0J1RApD-v2v65Y" />
5050

51-
<!-- 樣式與字型 -->
52-
<link rel="preconnect" href="https://fonts.googleapis.com">
53-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
54-
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" as="style">
55-
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
51+
<!-- 樣式與字型 -->
52+
<link rel="preconnect" href="https://fonts.googleapis.com">
53+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
54+
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" as="style">
55+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
5656

57-
<!-- 資源預載: https://cdn.jsdelivr.net -->
58-
<link rel="preconnect" href="https://cdn.jsdelivr.net">
59-
<link rel="preload" href="https://cdn.jsdelivr.net/gh/pardnchiu/PDMarkdownKit@1.0.0/dist/PDMarkdownKit.js" as="script">
60-
<script src="./dist/PDRenderKit.js" copyright="Pardn Ltd"></script>
57+
<!-- 資源預載: https://cdn.jsdelivr.net -->
58+
<link rel="preconnect" href="https://cdn.jsdelivr.net">
59+
<link rel="preload" href="https://cdn.jsdelivr.net/gh/pardnchiu/PDMarkdownKit@1.0.0/dist/PDMarkdownKit.js" as="script">
60+
<script src="./dist/PDRenderKit.js" copyright="Pardn Ltd"></script>
6161

62-
<!-- 資源預載: https://pardnchiu.github.io -->
63-
<link rel="preconnect" href="https://pardnchiu.github.io">
64-
<link rel="preload" href="https://pardnchiu.github.io/css/index.css" as="style">
65-
<link rel="stylesheet" href="https://pardnchiu.github.io/css/index.css">
62+
<!-- 資源預載: https://pardnchiu.github.io -->
63+
<link rel="preconnect" href="https://pardnchiu.github.io">
64+
<link rel="preload" href="https://pardnchiu.github.io/css/index.css" as="style">
65+
<link rel="stylesheet" href="https://pardnchiu.github.io/css/index.css">
6666

67-
<!-- 本地資源 -->
68-
<script type="module" src="./static/js/index.js"></script>
69-
</head>
67+
<!-- 本地資源 -->
68+
<script type="module" src="./static/js/index.js"></script>
69+
</head>
7070

71-
<body id="app" class="md">
72-
<nav id="nav" style="max-width: 1024px;" :test="test {{ CALC(num * 2) }}">
73-
<a class="dom-temp" href="https://github.com/pardnchiu" target="_blank">
74-
<i class="fa-brands fa-github"></i>
75-
</a>
76-
<img class="head lazyload dom-temp" data-src="https://pardn.io/image/head-s.jpg" alt="邱敬幃 Pardn Chiu" onclick="window.open('https://linkedin.com/in/pardnchiu')">
77-
<a class="dom-temp" href="mailto:mail@pardn.ltd">
78-
<i class="fa-regular fa-envelope"></i>
79-
</a>
80-
</nav>
81-
</body>
71+
<body id="app" class="md">
72+
<nav id="nav" style="max-width: 1024px;" :test="test {{ CALC(num * 2) }}">
73+
<a class="dom-temp" href="https://github.com/pardnchiu" target="_blank">
74+
<i class="fa-brands fa-github"></i>
75+
</a>
76+
<img class="head lazyload dom-temp" data-src="https://pardn.io/image/head-s.jpg" alt="邱敬幃 Pardn Chiu" onclick="window.open('https://linkedin.com/in/pardnchiu')">
77+
<a class="dom-temp" href="mailto:mail@pardn.ltd">
78+
<i class="fa-regular fa-envelope"></i>
79+
</a>
80+
</nav>
81+
</body>
8282

8383
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pdrenderkit",
3-
"version": "1.2.0",
3+
"version": "1.3.0",
44
"description": "PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic.",
55
"main": "dist/PDRenderKit.js",
66
"scripts": {

‎src/*.ts‎

-11.5 KB
Binary file not shown.

‎src/PDRenderKit.js‎

7.56 KB
Binary file not shown.

‎src/dom.ts‎

-4.83 KB
Binary file not shown.

0 commit comments

Comments
 (0)