支持完整 CSS 屬性，如 :background-color，方便快速設置。

pardnchiu · Nov 9, 2024 · e423d11 · e423d11
1 parent f6ff130
commit e423d11
Show file tree

Hide file tree

Showing 28 changed files with 27 additions and 28 deletions.
diff --git a/DEPRECATION.md b/DEPRECATION.md
@@ -25,4 +25,5 @@
             },
         }
     });
-    ```
+    ```
+- 非標準 CSS 屬性寫法將不再支持。請使用標準 CSS 屬性名稱。 (例如：將 `:borderRadius` 改為 `:border-radius`；將 `:bg-color` 改為 `:background-color`)
diff --git a/README.md b/README.md
@@ -17,11 +17,6 @@
 - **自動渲染**：監控資料變動並自動更新，減少手動操作。
 - **輕量化**：使用原生 JS 和內建 API 撰寫，無任何外部依賴。
 
-## 範例
-
-- 範例一: [預覽](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)
-
 ## 安裝方式
 
 - **從 npm 安裝**
@@ -628,6 +623,11 @@
 
 </details>
 
+## 範例
+
+- 範例一: [預覽](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)
+
 ## 開發者
 
 <img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;" />

diff --git a/dist/PDQuickUI.css b/dist/PDQuickUI.css
@@ -1,3 +1,4 @@
+
 *[\:animation="fade-in"],
 *[animation="fade-in"] {
     opacity: 0;
@@ -67,11 +68,6 @@
 }
 
 img[lazyload]:not([lazyload=""]) {
-    width: 1rem;
-    height: 1rem;
-    border: 0.25rem solid rgba(0, 0, 0, 0.1);
-    border-top-color: #3498db;
-    border-radius: 50%;
     animation: spin 2s ease-in-out infinite;
 }
 
@@ -83,14 +79,4 @@ img[lazyload]:not([lazyload=""]) {
     100% {
         transform: rotate(360deg);
     }
-}
-
-img[src]:not([src=""]) {
-    width: unset;
-    height: unset;
-    border: 0 solid transparent;
-    border-radius: 0;
-    animation: none;
-    transition: width 0.3s;
-    transition: height 0.3s;
 }
diff --git a/dist/PDQuickUI.js b/dist/PDQuickUI.js
diff --git a/dist/PDQuickUI.module.js b/dist/PDQuickUI.module.js
diff --git a/index.html b/index.html
@@ -67,7 +67,7 @@
         <script src="./dist/PDQuickUI.js"></script>
     </head>
 
-    <body id="app" :animation="fade-in">
+    <body id="app" :effect="fade-in">
         <strong>延遲載入過渡</strong>
         <hr>
         <img :lazyload="https://picsum.photos/id/1/640/480" alt="">
@@ -239,13 +239,13 @@ <h4 :else>{{ title }} 4
                             // setTimeout(_ => {
 
                             //     app.data.heading = 3
-                            // }, 1000)
+                            // }, 2000)
                             // setTimeout(_ => {
 
                             //     app.data.isH2 = true
                             //     app.data.obj.home.ary[0].name = "Test"
 
-                            // }, 2000)
+                            // }, 3000)
                             console.log("已渲染")
                         },
                         before_update: _ => {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "pdquickui",
-    "version": "0.5.1",
+    "version": "0.5.2",
     "description": "PDQuickUI contains a lightweight front-end framework designed to separate the front-end user interface and data logic.",
     "main": "dist/PDQuickUI.js",
     "module": "dist/PDQuickUI.module.js",
@@ -18,7 +18,8 @@
         "index.html",
         "src/interface.ts",
         "LICENSE",
-        "README.md"
+        "README.md",
+        "DEPRECATION.md"
     ],
     "repository": {
         "type": "git",

diff --git a/src/*.ts b/src/*.ts
diff --git a/src/Lifecycle.ts b/src/Lifecycle.ts
diff --git a/src/PDQuickUI.js b/src/PDQuickUI.js
diff --git a/src/QUI.ts b/src/QUI.ts
diff --git a/src/function/calc.ts b/src/function/calc.ts
diff --git a/src/function/createElement.ts b/src/function/createElement.ts
diff --git a/src/function/createReactiveObject.ts b/src/function/createReactiveObject.ts
diff --git a/src/function/getCamelString.ts b/src/function/getCamelString.ts
diff --git a/src/function/getElementIndex.ts b/src/function/getElementIndex.ts
diff --git a/src/function/getUniqueID.ts b/src/function/getUniqueID.ts
diff --git a/src/function/htmlParser.ts b/src/function/htmlParser.ts
diff --git a/src/function/printLog.ts b/src/function/printLog.ts
diff --git a/src/function/removeEmptyTextNode.ts b/src/function/removeEmptyTextNode.ts
diff --git a/src/function/renderElement.ts b/src/function/renderElement.ts
diff --git a/src/listener/LazyloadListener.ts b/src/listener/LazyloadListener.ts
diff --git a/src/listener/SVGListener.ts b/src/listener/SVGListener.ts
diff --git a/src/model/Lifecycle.ts b/src/model/Lifecycle.ts
diff --git a/src/model/QUI.ts b/src/model/QUI.ts
diff --git a/src/model/vDOM.ts b/src/model/vDOM.ts
diff --git a/src/vDOM.ts b/src/vDOM.ts
diff --git a/static/image/loading.svg b/static/image/loading.svg
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,4 +25,5 @@ @@
                 },
             }
         });
-        ```
+        ```
+    - 非標準 CSS 屬性寫法將不再支持。請使用標準 CSS 屬性名稱。 (例如：將 `:borderRadius` 改為 `:border-radius`；將 `:bg-color` 改為 `:background-color`)