Releases: pardnchiu/QuickUI
Releases · pardnchiu/QuickUI
v0.6.9-v0.6.13
修正
:if渲染邏輯修正- 模板渲染邏輯修正
- index.html
<body id="app"></body> <script> document.addEventListener("DOMContentLoaded", async _ => { const test = await new QUI({ data: { hint: "hint 123", title: "test 123" }, render: () => ` "{{ hint }}", h1 { style: "background: red;", children: [ "{{ title }}" ] }` }).fragment(); document.getElementById("app").appendChild(test); }); </script>
- result
<body id="app"> hint 123 <h1 style="background: red;">test 123</h1> </body>
新增
once不會偵測資料變動重新渲染- 模板渲染增加簡寫與 innerHTML 支持
// 完整語法 div.chat-sent { children: [ p { children: [ "123<br>123" ] } ] } // 簡寫語法 div.chat-sent [ p [ "123<br>123" ] ]
v0.6.7-v0.6.8
修正
:lazyload添加跨域處理- 差異算法確保元素屬性可以被正確移除
v0.6.3-v0.6.6
Adjustments
- Template rendering supports omitting
iddeclaration. - Optimized
Lazyloadspeed. - Improved code structure.
Deprecated Features
- For more details, see here.
v0.6.2
v0.6.0-v0.6.1
Major Changes
- Project name changed: The project name has been simplified to QuickUI, making it more concise and easier to remember.
Fixes
- Fixed the behavior of
:ifwhen there is no:elseand the value does not match. It now properly removes the corresponding element.
New Features
:lazyload
The default effect has been changed to a gradient background animation. You can switch to a loading circle animation using:effect=circle.- Added
i18nmultilingual support:
Supports setting multilingual content directly through an object format or dynamically loading language files, with support for dynamic language switching.<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: { greeting: "Hello", username: "Username" } }, i18nLang: "zh | en", // Choose language event: { change: e => { const _this = e.target; const lang = _this.dataset.lang; app.lang(lang); }, } }); </script>
Adjustments
- Event binding simplified:
:forin:@clickcan now be simplified to@click, further improving code clarity and readability.
Deprecated Features
- For more details, see here.
v0.5.4
v0.5.3
Fixes
- The
:htmlattribute now correctly inserts content.
Adjustments
- Unified lifecycle property naming to camelCase:
before_renderchanged tobeforeRenderbefore_updatechanged tobeforeUpdatebefore_destorychanged tobeforeDestory
- To ensure code style consistency and reduce code size, starting from version
1.*.*, only camelCase properties are supported. Snake_case naming is no longer supported.
Deprecated Features
- For more details, see here.
v0.5.2
Adjustments
- Optimized
vDOMrendering logic to improve rendering efficiency. - Added support for full CSS properties, such as
:background-color, for quick styling. - Transition animation property changed from
:animationto:effect:- Starting from version
1.0.0,:animationwill be dedicated to CSS animation properties.
- Starting from version
Deprecated Features
- For more details, see here.
v0.5.1
Fixes
- Improved
:pathattribute handling: now parses:forand:iffor child elements inserted via:path, resolving issues where child elements were not processed. - Enhanced
:forattribute handling: added logic for handling string types and virtual DOMs without child elements, ensuring correct processing of all child element types. - Refined
:ifattribute handling: improved condition structure checks to accurately handle relationships between:if,:else-if, and:else, fixing potential rendering errors.
Deprecated Features
- For more details, see here.
v0.5.0
New Features
- Added the
:animationattribute, supporting transition effects likefade-inandexpand. - Added the
:maskattribute to enable or disable block loading animations, with valuestrue|false|1|0. - Image lazy loading now includes loading animations and transition effects to enhance user experience.
Deprecated Features
- For more details, see here.