From 134e465dd04d26d99c420d4c60bd5251246aa71b Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Sat, 6 May 2023 11:59:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96props=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |  2 +-
 src/index.js | 41 ++++++++++++++++++++++++++---------------
 src/utils.js |  9 +++++++++
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index c98a8ca..8333b94 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bd/core",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "type": "module",
   "description": "百搭UI组件库的核心",
   "main": "dist/index.js",
diff --git a/src/index.js b/src/index.js
index f5bdd25..8b3ff1e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,9 +17,10 @@ import {
 import { css, adoptStyles } from './css.js'
 import { render, html, svg, raw } from './html.js'
 import { animate, MODES } from './anim.js'
-import { nextTick, fire, bind, unbind, hyphen } from './utils.js'
+import { nextTick, fire, bind, unbind, hyphen, camelize } from './utils.js'
+
 export { $, $$, offset, outsideClick, clearOutsideClick } from './utils.js'
-export { html, raw, css, svg, bind, unbind, nextTick, fire }
+export { html, raw, css, svg, bind, unbind, nextTick, fire, hyphen, camelize }
 
 // 简单的类名解析
 export function classMap(data = {}) {
@@ -54,7 +55,7 @@ export class Component extends HTMLElement {
     this.parseAnim()
 
     this[__props__].forEach((options, prop) => {
-      list.push(prop.toLowerCase())
+      list.push(options.attrName)
     })
     return list
   }
@@ -112,8 +113,14 @@ export class Component extends HTMLElement {
     if (this.hasOwnProperty('props')) {
       for (let k in this.props) {
         let options = parsePropsDeclaration(this.props[k])
-        if (boolMap[k] && k !== boolMap[k]) {
-          k = boolMap[k]
+        let attrName = k.toLowerCase()
+
+        options.attrName = attrName
+
+        if (boolMap[attrName]) {
+          k = boolMap[attrName]
+        } else {
+          options.attrName = hyphen(k)
         }
         this.createProperty(k, options)
       }
@@ -211,9 +218,10 @@ export class Component extends HTMLElement {
    */
   #prop2attr(name, value) {
     let options = this.#getPropOptions(name)
+    let attrName = options.attrName
 
     if (options.attribute === false) {
-      this.removeAttribute(name)
+      this.removeAttribute(attrName)
       return
     }
 
@@ -221,17 +229,17 @@ export class Component extends HTMLElement {
       case Number:
       case String:
         if (value === null) {
-          this.removeAttribute(name)
+          this.removeAttribute(attrName)
         } else {
-          this.setAttribute(name, value)
+          this.setAttribute(attrName, value)
         }
         break
 
       case Boolean:
         if (value === null || value === false) {
-          this.removeAttribute(name)
+          this.removeAttribute(attrName)
         } else {
-          this.setAttribute(name, '')
+          this.setAttribute(attrName, '')
         }
         break
     }
@@ -243,25 +251,28 @@ export class Component extends HTMLElement {
    * @param value<String|Boolean|Number>
    */
   #attr2prop(name, value, old) {
-    let _name = boolMap[name],
-      options
+    let _name = boolMap[name]
+    let options, propName
+
     if (_name) {
       name = _name
     }
-    options = this.#getPropOptions(name)
+    propName = camelize(name)
+
+    options = this.#getPropOptions(propName)
     value = fixedValue(value, options)
 
     if (options.attribute === false) {
       if (value === null) {
         return
       }
-      if (value === this[name]) {
+      if (value === this[propName]) {
         this.removeAttribute(name)
         return
       }
     }
 
-    this[name] = value
+    this[propName] = value
   }
 
   // 请求更新
diff --git a/src/utils.js b/src/utils.js
index ca1bec1..3fbf0d3 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -47,6 +47,15 @@ export function hyphen(target) {
   return target.replace(/([a-z\d])([A-Z]+)/g, '$1-$2').toLowerCase()
 }
 
+//连字符转换为驼峰风格
+export function camelize(target) {
+  //提前判断，提高效率
+  if (target.indexOf('-') < 0) {
+    return target
+  }
+  return target.replace(/\-([a-z])/g, (m, s) => s.toUpperCase())
+}
+
 //取得距离页面左上角的坐标
 export function offset(node) {
   try {