@pardnchiu/quickui - npm Package Compare versions

Comparing version 0.5.4 to 0.6.0

package.json

 {
     "name": "@pardnchiu/quickui",
-    "version": "0.5.4",
-    "description": "A web frontend framework that supports conditional and loop rendering, data binding, monitoring data changes, and automatic rendering. Previously known as PDQuickUI.",
-    "main": "dist/PDQuickUI.js",
-    "module": "dist/PDQuickUI.module.js",
+    "version": "0.6.0",
+    "description": "A web frontend framework that supports conditional and loop rendering, data binding, monitoring data changes, and automatic rendering. Previously known as QuickUI.",
+    "main": "dist/QuickUI.js",
+    "module": "dist/QuickUI.esm.js",
     "types": "src/interface.ts",
     "scripts": {
-        "minify": "npx terser src/*.js -c -m -o dist/PDQuickUI.js --config-file terser.config.json --name-cache terser.cache.json && npx terser src/*.js -c -m -o dist/PDQuickUI.module.js --config-file terser.config.json --name-cache terser.cache.json && echo 'export const QUI = window.QUI;' >> dist/PDQuickUI.module.js",
-        "minify-w": "chokidar 'src/PDQuickUI.js' -c 'npm run minify'"
+        "minify": "npx terser src/*.js -c -m -o dist/QuickUI.js --config-file terser.config.json --name-cache terser.cache.json && npx terser src/*.js -c -m -o dist/QuickUI.esm.js --config-file terser.config.json --name-cache terser.cache.json && echo 'export const QUI = window.QUI;' >> dist/QuickUI.esm.js",
+        "minify-w": "chokidar 'src/QuickUI.js' -c 'npm run minify'",
+        "sass": "sass src/sass:dist/ -w --style compressed --no-source-map",
+        "sass-index": "sass static/sass/:static/css/ -w --style compressed --no-source-map"
     },
@@ -26,3 +28,3 @@ "publishConfig": {
         "type": "git",
-        "url": "git+https://github.com/pardnchiu/PDQuickUI.git"
+        "url": "git+https://github.com/pardnchiu/QuickUI.git"
     },
@@ -42,6 +44,6 @@ "keywords": [
     "bugs": {
-        "url": "https://github.com/pardnchiu/PDQuickUI/issues",
+        "url": "https://github.com/pardnchiu/QuickUI/issues",
         "email": "[e-mail]"
     },
-    "homepage": "https://github.com/pardnchiu/PDQuickUI#readme"
+    "homepage": "https://github.com/pardnchiu/QuickUI#readme"
 }

README.md

@@ -1,59 +0,108 @@
-# PDQuickUI
+# QuickUI (JavaScript Library)
 
-![](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) 
-![](https://img.shields.io/github/size/pardnchiu/PDQuickUI/dist%2FPDQuickUI.js) 
-![](https://img.shields.io/github/license/pardnchiu/PDQuickUI)<br>
-[![](https://img.shields.io/github/v/release/pardnchiu/PDQuickUI)](https://github.com/pardnchiu/PDQuickUI) 
-[![](https://img.shields.io/npm/v/pdquickui)](https://www.npmjs.com/package/pdquickui) 
-[![](https://img.shields.io/jsdelivr/npm/hw/pdquickui)](https://www.jsdelivr.com/package/npm/pdquickui)<br>
-[![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/PDQuickUI/blob/main/README.en.md)
+(Formerly known as PDQuickUI, renamed to QuickUI starting from version `0.6.0`)
 
-`PDQuickUI` 是從 [PDRenderKit](https://github.com/pardnchiu/PDRenderKit) 中獨立出來的前端渲染框架，專注於強化前端框架功能。<br>
-透過引入虛擬 DOM 概念重寫渲染邏輯，提升渲染效能，並實現更高效的數據監聽和自動更新。<br>
+![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) 
+![size](https://img.shields.io/github/size/pardnchiu/QuickUI/dist%2FQuickUI.js) 
+![license](https://img.shields.io/github/license/pardnchiu/QuickUI)<br>
+[![npm](https://img.shields.io/npm/v/@pardnchiu/quickui)](https://www.npmjs.com/package/@pardnchiu/quickui)
+[![download](https://img.shields.io/npm/dm/@pardnchiu/quickui)](https://www.npmjs.com/package/@pardnchiu/quickui)
+[![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/quickui)](https://www.jsdelivr.com/package/npm/@pardnchiu/quickui)<br>
 
-本專案移除了 `PDRenderKit` 中針對 `prototype` 的擴展，確保兼容性與效能，適合用於複雜的應用場景。<br>
-提供 `module` 和非 `module` 版本，授權從 `PDRenderKit` 的 `GPL-3.0` 更改為 `MIT`。<br>
+[![download](https://img.shields.io/npm/dm/@pardnchiu/quickui)](https://www.npmjs.com/package/@pardnchiu/quickui)
+[![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/quickui)](https://www.jsdelivr.com/package/npm/@pardnchiu/quickui)<br>
 
-## 特點
+`QuickUI` is a front-end rendering framework derived from [PDRenderKit](https://github.com/pardnchiu/PDRenderKit), focusing on enhancing front-end framework features.<br>
+By integrating a virtual DOM, it rewrites the rendering logic to improve rendering efficiency, enabling faster data observation and automatic updates.<br>
 
-- **清晰的架構**：UI 和資料邏輯分離，維護方便。
-- **代碼簡潔**：減少重複代碼，提升可讀性。
-- **自動渲染**：監控資料變動並自動更新，減少手動操作。
-- **輕量化**：使用原生 JS 和內建 API 撰寫，無任何外部依賴。
+This project removes the `prototype` extensions from `PDRenderKit` to ensure compatibility and performance, making it suitable for complex applications.<br>
+It provides both `module` and non-`module` versions and changes the license from `GPL-3.0` in `PDRenderKit` to `MIT`.
 
-## 安裝方式
+## Features
 
-- **從 npm 安裝**
+- **Clear Architecture**: Separates UI from data logic, making it easier to maintain.
+- **Code Simplicity**: Reduces redundant code and enhances readability.
+- **Automatic Rendering**: Monitors data changes and updates automatically, minimizing manual operations.
+- **Lightweight**: Maintains full functionality within a file size of less than `20kb`.
+
+## Installation
+
+- **Install from npm**
     ```bash
-    npm i pdquickui
+    npm i @pardnchiu/quickui
     ```
-- **從 CDN 引入**
-    - **引入 `PDQuickUI` 套件**
+- **Include from CDN**
+    - **Directly include `QuickUI`**
         ```html
+        <!-- Version 0.6.0 and above -->
+        <script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.js"></script>
+
+        <!-- Version 0.5.4 and below -->
         <script src="https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.js"></script>
         ```
-    - **Module 版本**
+    - **Module Version**
         ```javascript
+        // Version 0.6.0 and above
+        import { QUI } from "https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@[VERSION]/dist/QuickUI.esm.js";
+        
+        // Version 0.5.4 and below
         import { QUI } from "https://cdn.jsdelivr.net/npm/pdquickui@[VERSION]/dist/PDQuickUI.module.js";
         ```
 
-## 功能介紹
-自動渲染：加載自動渲染在檢測到資料變更時自動重新渲染。
+## Usage
 
+- Initialize `QUI`
+    ```Javascript
+    const app = new QUI({
+        id: "", // Specify rendering element
+        data: {
+            // Custom DATA
+        },
+        event: {
+            // Custom EVENT
+        },
+        when: {
+            before_render: function () {
+                // Stop rendering
+            },
+            rendered: function () {
+                // Rendered
+            },
+            before_update: function () {
+                // Stop updating
+            },
+            updated: function () {
+                // Updated
+            },
+            before_destroy: function () {
+                // Stop destruction
+            },
+            destroyed: function () {
+                // Destroyed
+            }
+        }
+    });
+    ```
+
+## Overview
+Automatic Rendering: Automatically reloads when data changes are detected.
+
 <details>
-<summary>屬性概覽</summary>
+<summary>Attributes Overview</summary>
 
-| 屬性 | 描述 |
+| Attribute | Description |
 | --- | --- |
-| `{{value}}` | 將文字插入到 HTML 標籤中，並隨資料變更自動更新。 |
-| `:path` | 搭配 `temp` 標籤，用於將外部文件中的 HTML 片段加載到當前頁面。 |
-| `:html` | 使用文本替換元素的 `innerHTML`。 |
-| `:for` | 支援 `item in items`、`(item, index) in items`、`(key, value) in object` 格式，遍歷資料集合，生成對應的 HTML 元素。 |
-| `:if`<br>`:else-if`<br>`:elif`<br>`:else` | 根據條件顯示或隱藏元素，實現分支邏輯。 |
-| `:model` | 將資料綁定到表單元素（如 `input`），當輸入變更時自動更新資料。 |
-| `:hide` | 根據特定條件隱藏元素。 |
-| `:animation` | 用於指定元素的過渡效果，如 `fade-in` 或 `expand`，以增強用戶體驗。 |
-| `:mask` | 控制區塊載入時的動畫效果，支援 `true|false|1|0`，提升載入動態視覺效果。 |
-| `:[attr]` | 設定元素屬性，例如 `ID`、`class`、圖像來源等。<br>範例：`:id`、`:class`、`:src`、`:alt`、`:href`... |
-| `@[event]` | 添加事件監聽器，當事件觸發時執行指定操作。<br>範例：`@click`、`@input`、`@mousedown`... |
+| `{{value}}` | Inserts text into HTML tags and automatically updates with data changes. |
+| `:path` | Used with the `temp` tag to load HTML fragments from external files into the current page. |
+| `:html` | Replaces the element's `innerHTML` with text. |
+| `:for` | Supports formats like `item in items`, `(item, index) in items`, `(key, value) in object`. Iterates over data collections to generate corresponding HTML elements. |
+| `:if`<br>`:else-if`<br>`:elif`<br>`:else` | Displays or hides elements based on specified conditions, enabling branching logic. |
+| `:model` | Binds data to form elements (e.g., `input`), updating data automatically when input changes. |
+| `:hide` | Hides elements based on specific conditions. |
+| `:animation` | Specifies transition effects for elements, such as `fade-in` or `expand`, to enhance user experience. |
+| `:mask` | Controls block loading animations, supporting `true|false|1|0`, to enhance dynamic visual effects during loading. |
+| `:[attr]` | Sets element attributes, such as `ID`, `class`, image source, etc.<br>Examples: `:id`/`:class`/`:src`/`:alt`/`:href`... |
+| `:[css]` | Sets element CSS, such as margin, padding, etc.
+Examples: `:background-color`, `:opacity`, `:margin`, `:top`, `:position`... |
+| `@[event]` | Adds event listeners that trigger specified actions upon activation.<br>Examples: `@click`/`@input`/`@mousedown`... |
 
@@ -63,8 +112,10 @@ </details>
 <details>
-<summary>屬性 <code>{{value}}</code></summary>
+<summary>Text Replacement</summary>
 
+### `{{value}}`
+
 - index.html
     ```HTML
     <h1>{{ title }}</h1>
-     <script>
+    <script>
         const app = new QUI({
@@ -85,12 +136,10 @@ id: "app",
 
+***
 
-</details>
+### `:html`
 
-<details>
-<summary>屬性 <code>:html</code></summary>
-
 - index.html
     ```HTML
     <section :html="html"></section>
-     <script>
+    <script>
         const app = new QUI({
@@ -113,10 +162,12 @@ id: "app",
 
-
 </details>
 
 <details>
-<summary>屬性 <code>:path</code></summary>
+<summary>Insert Block</summary>
 
-*確保測試時已禁用瀏覽器中的本地文件限制或使用實時服務器。*
+> [!NOTE]
+> Ensure to disable local file restrictions in your browser or use a live server when testing.
 
+### `:path`
+
 - test.html
@@ -141,3 +192,3 @@ ```html
     <body id="app">
-        <!-- 直接插入 PATH 內容 -->
+        <!-- Directly inserted PATH content -->
         <h1>path heading</h1>
@@ -151,4 +202,7 @@ <p>path content</p>
 <details>
-<summary>屬性 <code>:for</code></summary>
+<summary>Loop Rendering</summary>
 
+
+### `:for`
+
 - index.html
@@ -179,6 +233,5 @@ ```html
 
-</details>
+***
 
-<details>
-<summary>多層 <code>:for</code> 嵌套</summary>
+### 巢狀迴圈
 
@@ -295,3 +348,3 @@ - index.html
 <details>
-<summary>屬性 <code>:if</code>/<code>:else-if</code>/<code>:elif</code>/<code>:else</code></summary>
+<summary>Conditional Rendering</summary>
 
@@ -345,24 +398,34 @@ - index.html
 <details>
-<summary>屬性 <code>:model</code></summary>
+<summary>Template Rendering</summary>
 
 - index.html
-    ```html
-    <body id="app">
-        <input type="password" :model="password">
-        <button @click="show">test</button>
-    </body>
+    ```HTML
+    <body id="app"></body>
     <script>
-        const app = new QUI({
+        const test = new QUI({
             id: "app",
             data: {
-                password: null,
+                hint: "hint 123",
+                title: "test 123"
             },
-            event: {
-                show: function(e){
-                    alert("Password:", app.data.password);
-                }
+            render: () => {
+                return `
+                    "{{ hint }}",
+                    h1 {
+                        style: "background: red;", 
+                        children: [ 
+                            "{{ title }}"
+                        ]
+                    }`
             }
-        });
+        })
     </script>
     ```
+- result
+    ```HTML
+    <body id="app">
+        hint 123
+        <h1 style="background: red;">test 123</h1>
+    </body>
+    ```
     
@@ -372,8 +435,58 @@ </details>
 <details>
-<summary>屬性 <code>@[event]</code></summary>
+<summary>Binding</summary>
 
+```html
+<body id="app">
+    <input type="password" :model="password">
+    <button @click="show">test</button>
+</body>
+<script>
+    const app = new QUI({
+        id: "app",
+        data: {
+            password: null,
+        },
+        event: {
+            show: function(e){
+                alert("Password:", app.data.password);
+            }
+        }
+    });
+</script>
+```
+    
+</details>
+
+<details>
+<summary>Event</summary>
+
+```html
+<body id="app">
+    <button @click="test">test</button>
+</body>
+<script>
+    const app = new QUI({
+        id: "app",
+        event: {
+            test: function(e){
+                alert(e.target.innerText + " clicked");
+            }
+        }
+    });
+</script>
+```
+    
+    
+</details>
+
+<details>
+<summary>CSS</summary>
+
+> [!NOTE]
+> Supports simple settings using :[CSS property], directly binding data to style attributes.
+
 - index.html
     ```html
     <body id="app">
-        <button @click="test">test</button>
+        <button :width="width" :backdround-color="color">test</button>
     </body>
@@ -383,6 +496,5 @@ <script>
             id: "app",
-            event: {
-                test: function(e){
-                    alert(e.target.innerText + " clicked");
-                }
+            data: {
+                width: "100px",
+                color: "red"
             }
@@ -392,161 +504,110 @@ });
     ```
-    
+- Result:
+    ```html
+    <body id="app">
+        <button style="width: 100px; backdround-color: red;">test</button>
+    </body>
+    ```
+
 </details>
 
 <details>
-<summary>快速設置 CSS</summary>
+<summary>Functions</summary>
 
-`:padding`, `:margin`, `:border`, `:border-radius`, `:outline`, `:box-sahdow`, `:bg-image`, `:bg-attachment`, `:bg-blend-mode`, `:bg-clip`, `:bg-origin`, `:bg-position`, `:bg-position-x`, `:bg-position-y`, `:bg-repeat`, `:bg-size`, `:bg-color`, `:color`
+### `LENGTH()`
 
-</details>
+- index.html
+    ```HTML
+    <body id="app">
+        <p>Total: {{ LENGTH(array) }}</p>
+    </body>
+    <script>
+        const app = new QUI({
+            id: "app",
+            data: {
+                array: [1, 2, 3, 4]
+            }
+        });
+    </script>
+    ```
+- result
+    ```HTML
+    <body id="app">
+        <p>Total: 4</p>
+    </body>
+    ```
 
-<details>
-<summary>可用函式</summary>
+***
 
-- `LENGTH()`:
-    - index.html
-        ```HTML
-        <body id="app">
-            <p>Total: {{ LENGTH(array) }}</p>
-        </body>
-        <script>
-            const app = new QUI({
-                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 QUI({
-                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 QUI({
-                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 QUI({
-                id: "app",
-                data: {
-                    now: Math.floor(Date.now() / 1000)
-                }
-            });
-        </script>
-        ```
-    - result
-        ```HTML
-        <body id="app">
-            <p>2024-08-17 03:40:47</p>
-        </body>
-        ```
+### `CALC()`
 
-</details>
+- index.html
+    ```HTML
+    <body id="app">
+        <p>calc: {{ CALC(num * 10) }}</p>
+    </body>
+    <script>
+        const app = new QUI({
+            id: "app",
+            data: {
+                num: 1
+            }
+        });
+    </script>
+    ```
+- result
+    ```HTML
+    <body id="app">
+        <p>calc: 10</p>
+    </body>
+    ```
 
-<details>
-<summary>資料獲取</summary>
+***
 
-```html
-<body id="app">
-    <input type="text" :model="test">
-    <button @click="get">測試</button>
-</body>
-<script>
-    const app = new QUI({
-        id: "app",
-        data: {
-            // 給 input 綁定的值
-            test: 123
-        },
-        event: {
-            get: _ => {
-                // 點擊時彈出內容為 test 值的通知
-                alert(app.data.test);
+### `UPPER()` / `LOWER()`
+
+- index.html
+    ```HTML
+    <body id="app">
+        <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
+    </body>
+    <script>
+        const app = new QUI({
+            id: "app",
+            data: {
+                test1: "upper",
+                test2: "LOWER"
             }
-        }
-    });
-</script>
-```
+        });
+    </script>
+    ```
+- result
+    ```HTML
+    <body id="app">
+        <p>UPPER lower</p>
+    </body>
+    ```
 
-</details>
+***
 
-<details>
-<summary>模板渲染</summary>
+### `DATE(num, format)`
 
 - index.html
     ```HTML
-    <body id="app"></body>
+    <body id="app">
+        <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
+    </body>
     <script>
-        const test = new QUI({
+        const app = new QUI({
             id: "app",
             data: {
-                hint: "hint 123",
-                title: "test 123"
-            },
-            render: () => {
-                return `
-                    "{{ hint }}",
-                    h1 {
-                        style: "background: red;", 
-                        children: [ 
-                            "{{ title }}"
-                        ]
-                    }`
+                now: Math.floor(Date.now() / 1000)
             }
-        })
+        });
     </script>
     ```
-- Result
+- result
     ```HTML
     <body id="app">
-        hint 123
-        <h1 style="background: red;">test 123</h1>
+        <p>2024-08-17 03:40:47</p>
     </body>
@@ -558,41 +619,33 @@ ```
 <details>
-<summary>生命週期</summary>
+<summary>Lazyload</summary>
 
-```html
-<body id="app"></body>
-<script>
-    const app = new QUI({
-        id: "app",
-        when: {
-            before_mount: function () {
-                // 停止渲染
-                // retuen false 
+### `:lazyload`
+
+- index.html
+    ```html
+    <body id="app">
+        <img :lazyload="image">
+    </body>
+    <script>
+        const app = new QUI({
+            id: "app",
+            data: {
+                image: "test.jpg"
             },
-            mounted: function () {
-                console.log("已掛載");
-            },
-            before_update: function () {
-                // 停止更新
-                // retuen false 
-            },
-            updated: function () {
-                console.log("已更新");
-            },
-            before_destroy: function () {
-                // 停止銷毀
-                // retuen false 
-            },
-            destroyed: function () {
-                console.log("已銷毀");
+            option: {
+                lazyload: true // Enable image lazy loading: true|false (default: true)
             }
-        }
-    });
-</script>
-```
+        });
+    </script>
+    ```
+- result
+    ```html
+    <body id="app">
+        <img src="test.jpg">
+    </body>
+    ```
 
-</details>
+***
 
-<details>
-<summary>可選設定</summary>
-
+### `SVG` 替換
 - test.svg
@@ -608,6 +661,3 @@ ```XML
     <body id="app">
-        <temp-svg :src="test.svg"></temp-svg>
-        <temp-svg src="svg"></temp-svg>
-        <img :lazyload="image">
-        <img lazyload="test.jpg">
+        <temp-svg :src="svg"></temp-svg>
     </body>
@@ -619,7 +669,5 @@ <script>
                 svg: "test.svg",
-                image: "test.jpg"
             },
             option: {
-                lazyload: true, // 圖片延遲加載: true|false (預設: true)
-                svg: true       // SVG 檔案轉換: true|false (預設: true)
+                svg: true  // Enable SVG file transformation: true|false (default: true)
             }
@@ -632,3 +680,2 @@ });
     <body id="app">
-        <!-- 直接插入 SVG 檔案 -->
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -638,4 +685,2 @@ <line x1="18" y1="6" x2="6" y2="18" stroke="black" stroke-width="2" stroke-linecap="round">
         </svg>
-        <!-- 會在元素進入畫面時讀取 -->
-        <img src="test.jpg">
     </body>
@@ -646,9 +691,138 @@ ```
 
-## 範例
+<details> 
+<summary>i18n</summary>
 
-- 範例一: [預覽](https://pardnchiu.github.io/web-template/target/personal-introduction-20230220) [源碼](https://github.com/pardnchiu/web-template/blob/main/target/personal-introduction-20230220)
-- 範例二: [預覽](https://pardnchiu.github.io/web-template/target/20230616) [源碼](https://github.com/pardnchiu/web-template/blob/main/target/20230616)
+> [!NOTE]
+> If the format is an object, the multilingual content is directly configured.
+> If the format is a string, the language file is dynamically loaded via fetch.
 
-## 開發者
+- en.json
+    ```JSON
+    {
+        "greeting": "Hello",
+        "username": "Username"
+    }
+    ```
+- index.html
+    ```html
+    <body id="app">
+        <h1>{{ i18n.greeting }}, {{ i18n.username }}: {{ username }}</h1>
+        <button @click="change" data-lang="zh">切換至中文</button>
+        <button @click="change" data-lang="zn">Switch to English</button>
+    </body>
+    <script>
+    const app = new QUI({
+        id: "app",
+        data: {
+            username: "Pardn"
+        },
+        i18n: {
+            zh: {
+                greeting: "你好",
+                username: "用戶名"
+            },
+            en: "en.json",
+        },
+        i18nLang: "zh | en", // Select the displayed language
+        event: {
+            change: e => {
+                const _this = e.target;
+                const lang = _this.dataset.lang;
+                app.lang(lang);
+            },
+        }
+    });
+    </script>
+    ```
+- result  `i18nLang = zh`
+    ```html
+    <body id="app">
+        <h1>你好, 用戶名: Pardn</h1>
+        <button data-lang="zh">切換至中文</button>
+        <button data-lang="zn">Switch to English</button>
+    </body>
+    ```
+- result  `i18nLang = en`
+    ```html
+    <body id="app">
+        <h1>Hello, Username: Pardn</h1>
+        <button data-lang="zh">切換至中文</button>
+        <button data-lang="zn">Switch to English</button>
+    </body>
+    ```
 
+</details>
+
+<details>
+<summary>Lifecycle Hooks</summary>
+
+```html
+<body id="app"></body>
+<script>
+    const app = new QUI({
+        id: "app",
+        when: {
+            before_render: function () {
+                // Stop rendering
+                // retuen false 
+            },
+            rendered: function () {
+                // Rendered
+            },
+            before_update: function () {
+                // Stop updating
+                // retuen false 
+            },
+            updated: function () {
+                // Updated
+            },
+            before_destroy: function () {
+                // Stop destruction
+                // retuen false 
+            },
+            destroyed: function () {
+                // Destroyed
+            }
+        }
+    });
+</script>
+```
+
+</details>
+
+<details>
+<summary>Data Retrieval</summary>
+
+```html
+<body id="app">
+    <input type="text" :model="test">
+    <button @click="get">Test</button>
+</body>
+<script>
+    const app = new QUI({
+        id: "app",
+        data: {
+            // Value bound to the input
+            test: 123
+        },
+        event: {
+            get: _ => {
+                // Show an alert with the value of test on button click
+                alert(app.data.test);
+            },
+            set: _ => {
+                let dom = document.createElement("button");
+                // Assign the button click event to the get function
+                dom.onclick = app.event.get;
+                app.body.append(dom);
+            }
+        }
+    });
+</script>
+```
+
+</details>
+
+## Creator
+
 <img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;" />
@@ -660,9 +834,8 @@
 
-## 授權條款
+## License
 
-本專案依據 [MIT](https://github.com/pardnchiu/PDMarkdownKit/blob/main/LICENSE) 授權使用。
+This project is licensed under the [MIT License](https://github.com/pardnchiu/PDMarkdownKit/blob/main/LICENSE).
 
 ***
 
-©️ 2024 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)
-
+©️ 2024 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)

static/js/index.js

@@ -1,2 +0,2 @@
-// import { viewer } from "https://cdn.jsdelivr.net/npm/pdmarkdownkit@1.6.0/dist/PDMarkdownKit.module.js";
+// import { viewer } from "https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@1.6.0/dist/PDMarkdownKit.module.js";
 
@@ -40,3 +40,3 @@ // document.addEventListener("DOMContentLoaded", async _ => {
 
-import { QUI } from "../../dist/PDQuickUI.module.js"
+import { QUI } from "../../dist/QuickUI.esm.js"
 
@@ -43,0 +43,0 @@ const app = new QUI({

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

242023

increased by109.51%

Number of package files

35

increased by133.33%

Lines of code

397

increased by31.89%

Number of lines in readme file

823

increased by26.42%

Worsened metrics

Number of medium supply chain risk alerts

7

increased by75%

No dependency changes