# QuickUI (Formerly known as PDQuickUI, renamed to QuickUI starting from version `0.6.0`) ![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)
[![npm](https://img.shields.io/npm/v/pdquickui)](https://www.npmjs.com/package/pdquickui) [![download](https://img.shields.io/npm/dm/pdquickui)](https://www.npmjs.com/package/pdquickui) [![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/pdquickui)](https://www.jsdelivr.com/package/npm/pdquickui)
[![](https://img.shields.io/badge/查閱-中文版本-ffffff)](https://github.com/pardnchiu/QuickUI/blob/main/README.zh.md) `QuickUI` is a front-end rendering framework derived from [PDRenderKit](https://github.com/pardnchiu/PDRenderKit), focusing on enhancing front-end framework features.
By integrating a virtual DOM, it rewrites the rendering logic to improve rendering efficiency, enabling faster data observation and automatic updates.
This project removes the `prototype` extensions from `PDRenderKit` to ensure compatibility and performance, making it suitable for complex applications.
It provides both `module` and non-`module` versions and changes the license from `GPL-3.0` in `PDRenderKit` to `MIT`. ## Features - **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 @pardnchiu/quickui ``` - **Include from CDN** - **Directly include `QuickUI`** ```html ``` - **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.
Attributes Overview | Attribute | Description | | --- | --- | | `{{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`
`:else-if`
`:elif`
`: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.
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.
Examples: `@click`/`@input`/`@mousedown`... |
Text Replacement ### `{{value}}` - index.html ```HTML

{{ title }}

``` - Result ```HTML

test

``` *** ### `:html` - index.html ```HTML
``` - Result ```HTML
innerHtml
```
Insert Block > [!NOTE] > Ensure to disable local file restrictions in your browser or use a live server when testing. ### `:path` - test.html ```html

path heading

path content

``` - index.html ```html ``` - Result ```html

path heading

path content

```
Loop Rendering ### `:for` - index.html ```html ``` - Result ```html
  • test1 1
  • test2 2
  • test3 3
    • ``` *** ### 巢狀迴圈 - index.html ```html ``` - Result ```html ```
    Conditional Rendering - index.html ```html

    {{ title }} {{ heading }}

    {{ title }} {{ heading }}

    {{ title }} {{ heading }}

    {{ title }} {{ heading }}

    ``` - Result: `heading = 1` ```html

    test 1

    ``` - Result: `heading = null && isH2 = true` ```html

    test

    ``` - Result: `heading = 3 && isH2 = null` ```html

    test 3

    ``` - Result: `heading = null && isH2 = null` ```html

    test

    ```
    Template Rendering - index.html ```HTML ``` - result ```HTML hint 123

    test 123

    ```
    Binding ```html ```
    Event ```html ```
    CSS > [!NOTE] > Supports simple settings using :[CSS property], directly binding data to style attributes. - index.html ```html ``` - Result: ```html ```
    Functions ### `LENGTH()` - index.html ```HTML

    Total: {{ LENGTH(array) }}

    ``` - result ```HTML

    Total: 4

    ``` *** ### `CALC()` - index.html ```HTML

    calc: {{ CALC(num * 10) }}

    ``` - result ```HTML

    calc: 10

    ``` *** ### `UPPER()` / `LOWER()` - index.html ```HTML

    {{ UPPER(test1) }} {{ LOWER(test2) }}

    ``` - result ```HTML

    UPPER lower

    ``` *** ### `DATE(num, format)` - index.html ```HTML

    {{ DATE(now, YYYY-MM-DD hh:mm:ss) }}

    ``` - result ```HTML

    2024-08-17 03:40:47

    ```
    Lazyload ### `:lazyload` - index.html ```html ``` - result ```html ``` *** ### `SVG` 替換 - test.svg ```XML ``` - index.html ```html ``` - result ```html ```
    i18n > [!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

    {{ i18n.greeting }}, {{ i18n.username }}: {{ username }}

    ``` - result `i18nLang = zh` ```html

    你好, 用戶名: Pardn

    ``` - result `i18nLang = en` ```html

    Hello, Username: Pardn

    ```
    Lifecycle Hooks ```html ```
    Data Retrieval ```html ```
    ## Creator

    邱敬幃 Pardn Chiu

    [![](https://pardn.io/image/mail.svg)](mailto:dev@pardn.io) [![](https://skillicons.dev/icons?i=linkedin)](https://linkedin.com/in/pardnchiu) ## License This project is licensed under the [MIT License](https://github.com/pardnchiu/PDMarkdownKit/blob/main/LICENSE). ## Obtain Complete Source Code [Contact me](mailto:dev@pardn.io) for the complete unobfuscated source code.
    Feel free to modify and use for commercial purposes with the following licensing options: - Must retain `Powered by @pardnchiu/quickui` copyright notice: $7,500. - Fully autonomous, no copyright notice required: $10,000. *** ©️ 2024 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)