parent
5e1a5d7ebd
commit
134e465dd0
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@bd/core",
|
"name": "@bd/core",
|
||||||
"version": "1.9.2",
|
"version": "1.9.3",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "百搭UI组件库的核心",
|
"description": "百搭UI组件库的核心",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
|
|
41
src/index.js
41
src/index.js
|
@ -17,9 +17,10 @@ import {
|
||||||
import { css, adoptStyles } from './css.js'
|
import { css, adoptStyles } from './css.js'
|
||||||
import { render, html, svg, raw } from './html.js'
|
import { render, html, svg, raw } from './html.js'
|
||||||
import { animate, MODES } from './anim.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 { $, $$, 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 = {}) {
|
export function classMap(data = {}) {
|
||||||
|
@ -54,7 +55,7 @@ export class Component extends HTMLElement {
|
||||||
this.parseAnim()
|
this.parseAnim()
|
||||||
|
|
||||||
this[__props__].forEach((options, prop) => {
|
this[__props__].forEach((options, prop) => {
|
||||||
list.push(prop.toLowerCase())
|
list.push(options.attrName)
|
||||||
})
|
})
|
||||||
return list
|
return list
|
||||||
}
|
}
|
||||||
|
@ -112,8 +113,14 @@ export class Component extends HTMLElement {
|
||||||
if (this.hasOwnProperty('props')) {
|
if (this.hasOwnProperty('props')) {
|
||||||
for (let k in this.props) {
|
for (let k in this.props) {
|
||||||
let options = parsePropsDeclaration(this.props[k])
|
let options = parsePropsDeclaration(this.props[k])
|
||||||
if (boolMap[k] && k !== boolMap[k]) {
|
let attrName = k.toLowerCase()
|
||||||
k = boolMap[k]
|
|
||||||
|
options.attrName = attrName
|
||||||
|
|
||||||
|
if (boolMap[attrName]) {
|
||||||
|
k = boolMap[attrName]
|
||||||
|
} else {
|
||||||
|
options.attrName = hyphen(k)
|
||||||
}
|
}
|
||||||
this.createProperty(k, options)
|
this.createProperty(k, options)
|
||||||
}
|
}
|
||||||
|
@ -211,9 +218,10 @@ export class Component extends HTMLElement {
|
||||||
*/
|
*/
|
||||||
#prop2attr(name, value) {
|
#prop2attr(name, value) {
|
||||||
let options = this.#getPropOptions(name)
|
let options = this.#getPropOptions(name)
|
||||||
|
let attrName = options.attrName
|
||||||
|
|
||||||
if (options.attribute === false) {
|
if (options.attribute === false) {
|
||||||
this.removeAttribute(name)
|
this.removeAttribute(attrName)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -221,17 +229,17 @@ export class Component extends HTMLElement {
|
||||||
case Number:
|
case Number:
|
||||||
case String:
|
case String:
|
||||||
if (value === null) {
|
if (value === null) {
|
||||||
this.removeAttribute(name)
|
this.removeAttribute(attrName)
|
||||||
} else {
|
} else {
|
||||||
this.setAttribute(name, value)
|
this.setAttribute(attrName, value)
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
|
|
||||||
case Boolean:
|
case Boolean:
|
||||||
if (value === null || value === false) {
|
if (value === null || value === false) {
|
||||||
this.removeAttribute(name)
|
this.removeAttribute(attrName)
|
||||||
} else {
|
} else {
|
||||||
this.setAttribute(name, '')
|
this.setAttribute(attrName, '')
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
@ -243,25 +251,28 @@ export class Component extends HTMLElement {
|
||||||
* @param value<String|Boolean|Number>
|
* @param value<String|Boolean|Number>
|
||||||
*/
|
*/
|
||||||
#attr2prop(name, value, old) {
|
#attr2prop(name, value, old) {
|
||||||
let _name = boolMap[name],
|
let _name = boolMap[name]
|
||||||
options
|
let options, propName
|
||||||
|
|
||||||
if (_name) {
|
if (_name) {
|
||||||
name = _name
|
name = _name
|
||||||
}
|
}
|
||||||
options = this.#getPropOptions(name)
|
propName = camelize(name)
|
||||||
|
|
||||||
|
options = this.#getPropOptions(propName)
|
||||||
value = fixedValue(value, options)
|
value = fixedValue(value, options)
|
||||||
|
|
||||||
if (options.attribute === false) {
|
if (options.attribute === false) {
|
||||||
if (value === null) {
|
if (value === null) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (value === this[name]) {
|
if (value === this[propName]) {
|
||||||
this.removeAttribute(name)
|
this.removeAttribute(name)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this[name] = value
|
this[propName] = value
|
||||||
}
|
}
|
||||||
|
|
||||||
// 请求更新
|
// 请求更新
|
||||||
|
|
|
@ -47,6 +47,15 @@ export function hyphen(target) {
|
||||||
return target.replace(/([a-z\d])([A-Z]+)/g, '$1-$2').toLowerCase()
|
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) {
|
export function offset(node) {
|
||||||
try {
|
try {
|
||||||
|
|
Loading…
Reference in New Issue