Add :once, :hide, UPPER(), LOWER(), and DATE() support

pardnchiu · Aug 16, 2024 · 9744863 · 9744863
1 parent a40979b
commit 9744863
Show file tree

Hide file tree

Showing 9 changed files with 553 additions and 376 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ Improving code maintainability and readability while reducing development comple
 
 ## Creator
 
-<img src="https://pardn.io/image/head-s.jpg" style="float: left; margin-right: 0.5rem; width: 128px; height: 128px;">
+<img src="https://pardn.io/image/head-s.jpg" align="left" width="128" height="128" style="margin-right: 0.5rem;">
 
 ### 邱敬幃 Pardn Chiu
 
@@ -64,16 +64,92 @@ This source code project is licensed under the [GPL-3.0](https://github.com/pard
     | @[event] | Add event listeners to execute specified actions when events are triggered.<br>For example: @click/@input/@mousedown... |
     | :@[event] | Set event handlers for individual elements within a loop, allowing different event handling for each element. |
 
-    - #### Function `LENGTH()`:
-        If `data.array = [1, 2, 3, 4];`
-        Then `<p>Total: {{ LENGTH(array) }}</p>`
-        Becomes `<p>Total: 4</p>`
-
-    - #### Function `CALC()`:
-        If `data.num = 1;`
-        Then `<p>calc: {{ CALC(num * 10) }}</p>`
-        Becomes `<p>calc: 10</p>`
-
+    - #### Function 
+      - `LENGTH()`:
+        - index.html
+          ```HTML
+          <body id="app">
+              <p>Total: {{ LENGTH(array) }}</p>
+          </body>
+          <script>
+              const app = new PD({
+                  id: "app",
+                  data: {
+                      array: [1, 2, 3, 4]
+                  }
+              });
+          </script>
+          ```
+        - result
+          ```HTML
+          <body id="app">
+              <p>Total: 4</p>
+          </body>
+          ```
+      - `CALC()`:
+        - index.html
+          ```HTML
+          <body id="app">
+              <p>calc: {{ CALC(num * 10) }}</p>
+          </body>
+          <script>
+              const app = new PD({
+                  id: "app",
+                  data: {
+                      num: 1
+                  }
+              });
+          </script>
+          ```
+        - result
+          ```HTML
+          <body id="app">
+              <p>calc: 10</p>
+          </body>
+          ```
+      - `UPPER()` / `LOWER()`
+        - index.html
+          ```HTML
+          <body id="app">
+              <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
+          </body>
+          <script>
+              const app = new PD({
+                  id: "app",
+                  data: {
+                      test1: "upper",
+                      test2: "LOWER"
+                  }
+              });
+          </script>
+          ```
+        - result
+          ```HTML
+          <body id="app">
+              <p>UPPER lower</p>
+          </body>
+          ```
+      - `DATE(num, format)`:
+        - index.html
+          ```HTML
+          <body id="app">
+              <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
+          </body>
+          <script>
+              const app = new PD({
+                  id: "app",
+                  data: {
+                      now: Math.floor(Date.now() / 1000)
+                  }
+              });
+          </script>
+          ```
+        - result
+          ```HTML
+          <body id="app">
+              <p>2024-08-17 03:40:47</p>
+          </body>
+          ```
     - #### `:path` / `:html`
         *Make sure to disable local file restrictions in your browser or use a live server when you are testing ':path'.*
         - ##### test.html

diff --git a/dist/PDRenderKit.js b/dist/PDRenderKit.js
diff --git a/index.html b/index.html
@@ -6,78 +6,78 @@
 <!DOCTYPE html>
 <html lang="zh-Hans-TW">
 
-    <head>
-        <!-- 基本設定 -->
-        <meta charset="UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="robots" content="index, follow">
-        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
-        <meta name="theme-color" content="#000000">
+  <head>
+    <!-- 基本設定 -->
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
+    <meta name="theme-color" content="#000000">
 
-        <!-- 網頁標題與描述 -->
-        <title>PDRenderKit 輕量化前端框架</title>
-        <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.">
+    <!-- 網頁標題與描述 -->
+    <title>PDRenderKit 輕量化前端框架</title>
+    <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.">
 
-        <!-- Open Graph 資訊 -->
-        <meta property="og:title" content=">PDRenderKit 輕量化前端框架">
-        <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.">
-        <meta property="og:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDRenderKit">
-        <meta property="og:url" content="https://pardnchiu.github.io/PDRenderKit">
-        <meta property="og:type" content="website">
-        <meta property="og:site_name" content="PDRenderKit 輕量化前端框架">
+    <!-- Open Graph 資訊 -->
+    <meta property="og:title" content=">PDRenderKit 輕量化前端框架">
+    <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.">
+    <meta property="og:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDRenderKit">
+    <meta property="og:url" content="https://pardnchiu.github.io/PDRenderKit">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="PDRenderKit 輕量化前端框架">
 
-        <!-- Twitter 卡片資訊 -->
-        <meta property="twitter:title" content=">PDRenderKit 輕量化前端框架">
-        <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.">
-        <meta property="twitter:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDRenderKit">
-        <meta property="twitter:image:alt" content="PDRenderKit 輕量化前端框架">
-        <meta property="twitter:url" content="https://pardnchiu.github.io/PDRenderKit">
-        <meta property="twitter:site" content="@pardnchiu">
-        <meta property="twitter:card" content="summary_large_image">
+    <!-- Twitter 卡片資訊 -->
+    <meta property="twitter:title" content=">PDRenderKit 輕量化前端框架">
+    <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.">
+    <meta property="twitter:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDRenderKit">
+    <meta property="twitter:image:alt" content="PDRenderKit 輕量化前端框架">
+    <meta property="twitter:url" content="https://pardnchiu.github.io/PDRenderKit">
+    <meta property="twitter:site" content="@pardnchiu">
+    <meta property="twitter:card" content="summary_large_image">
 
-        <!-- Mobile App 設定 -->
-        <meta name="mobile-web-app-capable" content="no">
-        <meta name="apple-mobile-web-app-capable" content="no">
-        <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <!-- Mobile App 設定 -->
+    <meta name="mobile-web-app-capable" content="no">
+    <meta name="apple-mobile-web-app-capable" content="no">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
 
-        <!-- 網站圖標 -->
-        <link rel="apple-touch-icon" href="">
-        <link rel="apple-touch-icon-precomposed" href="">
-        <link rel="icon" href="" type="image/x-icon">
+    <!-- 網站圖標 -->
+    <link rel="apple-touch-icon" href="">
+    <link rel="apple-touch-icon-precomposed" href="">
+    <link rel="icon" href="" type="image/x-icon">
 
-        <!-- 驗證標籤 -->
-        <meta name="google-site-verification" content="YQQ2f6AchR8dcb55Az2BYd_mw4TrP0J1RApD-v2v65Y" />
+    <!-- 驗證標籤 -->
+    <meta name="google-site-verification" content="YQQ2f6AchR8dcb55Az2BYd_mw4TrP0J1RApD-v2v65Y" />
 
-        <!-- 樣式與字型 -->
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" as="style">
-        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <!-- 樣式與字型 -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" as="style">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
 
-        <!-- 資源預載: https://cdn.jsdelivr.net -->
-        <link rel="preconnect" href="https://cdn.jsdelivr.net">
-        <link rel="preload" href="https://cdn.jsdelivr.net/gh/pardnchiu/[email protected]/dist/PDMarkdownKit.js" as="script">
-        <script src="./dist/PDRenderKit.js" copyright="Pardn Ltd"></script>
+    <!-- 資源預載: https://cdn.jsdelivr.net -->
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link rel="preload" href="https://cdn.jsdelivr.net/gh/pardnchiu/[email protected]/dist/PDMarkdownKit.js" as="script">
+    <script src="./dist/PDRenderKit.js" copyright="Pardn Ltd"></script>
 
-        <!-- 資源預載: https://pardnchiu.github.io -->
-        <link rel="preconnect" href="https://pardnchiu.github.io">
-        <link rel="preload" href="https://pardnchiu.github.io/css/index.css" as="style">
-        <link rel="stylesheet" href="https://pardnchiu.github.io/css/index.css">
+    <!-- 資源預載: https://pardnchiu.github.io -->
+    <link rel="preconnect" href="https://pardnchiu.github.io">
+    <link rel="preload" href="https://pardnchiu.github.io/css/index.css" as="style">
+    <link rel="stylesheet" href="https://pardnchiu.github.io/css/index.css">
 
-        <!-- 本地資源 -->
-        <script type="module" src="./static/js/index.js"></script>
-    </head>
+    <!-- 本地資源 -->
+    <script type="module" src="./static/js/index.js"></script>
+  </head>
 
-    <body id="app" class="md">
-        <nav id="nav" style="max-width: 1024px;" :test="test {{ CALC(num * 2) }}">
-            <a class="dom-temp" href="https://github.com/pardnchiu" target="_blank">
-                <i class="fa-brands fa-github"></i>
-            </a>
-            <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')">
-            <a class="dom-temp" href="mailto:[email protected]">
-                <i class="fa-regular fa-envelope"></i>
-            </a>
-        </nav>
-    </body>
+  <body id="app" class="md">
+    <nav id="nav" style="max-width: 1024px;" :test="test {{ CALC(num * 2) }}">
+      <a class="dom-temp" href="https://github.com/pardnchiu" target="_blank">
+        <i class="fa-brands fa-github"></i>
+      </a>
+      <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')">
+      <a class="dom-temp" href="mailto:[email protected]">
+        <i class="fa-regular fa-envelope"></i>
+      </a>
+    </nav>
+  </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "pdrenderkit",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "description": "PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic.",
     "main": "dist/PDRenderKit.js",
     "scripts": {

diff --git a/src/*.ts b/src/*.ts
diff --git a/src/PDRenderKit.js b/src/PDRenderKit.js
diff --git a/src/dom.ts b/src/dom.ts