Releases: pardnchiu/QuickUI
Releases · pardnchiu/QuickUI
v0.6.17
v0.6.14-v0.6.16
調整
- 模板渲染
- 新增
event、attr等多個參數傳遞支持q-test等同於:testqe-click等同於@click
- index.html
<body></body> <script> document.addEventListener("DOMContentLoaded", async () => { const test = await new QUI({ // id: "test" data: { test1: "text test 1", test2: "text test 2", test3: "text test 3", }, event: { test: e => { alert("test"); } }, render: _ => ` section "{{ test1 }}" div#main-card.primary.highlighted (q-title: "test1" q-content: "12312312" qe-click: "test" style: "background: red;" ) ["{{ test2 }}" "<br>" "{{ test3 }}" ]` }).fragment(); document.getElementById("test").appendChild(test) }); </script>
- result
<body> <section id="test"> <section></section> text test 1 <div id="main-card" class="primary highlighted" style="background: red;" title="text test 1" content="12312312"> text test 2<br>text test 3 </div> </section> </body>
- 新增
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.