refactor: clean

package.json

@@ -68,7 +68,7 @@
   "devDependencies": {
     "@ant-design/icons": "^5.0.1",
     "@antfu/eslint-config": "^0.34.0",
-    "@simon_he/base-webcomponent": "^0.0.14",
+    "@simon_he/base-webcomponent": "^0.0.17",
     "@types/node": "^18.0.0",
     "@vitejs/plugin-vue": "^3.1.2",
     "@webcomponents/webcomponentsjs": "^2.7.0",
@@ -89,7 +89,8 @@
     "unocss": "^0.29.2",
     "vite": "^4.2.1",
     "vitepress": "1.0.0-alpha.61",
-    "vitest": "^0.13.1"
+    "vitest": "^0.13.1",
+    "xx": "^0.0.3"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm exec lint-staged --concurrent false",

playground/src/pages/checkbox.vue

@@ -4,6 +4,7 @@ registerCheckbox()
 
 const checked = ref(false)
 const handler = () => {
+  console.log('22')
   checked.value = !checked.value
 }
 </script>
@@ -13,7 +14,7 @@ const handler = () => {
     <adw-checkbox :checked="checked" @click-handler="handler">
       checkbox
     </adw-checkbox>
-    <adw-checkbox :checked="checked" disabled>
+    <adw-checkbox :checked="checked" disabled @click-handler="handler">
       disabled
     </adw-checkbox>
   </div>

src/base.ts

@@ -20,6 +20,14 @@ export class BaseWebComponent extends HTMLElement {
     this.render()
   }
 
+  isTrueProp(prop: string, initial = false) {
+    if (!Reflect.has(this.props, prop))
+      return initial
+
+    const value = this.props[prop]
+    return value === '' || value !== 'false'
+  }
+
   initialProps() {
     const mutationObserver = new MutationObserver(() => this.setProps())
     mutationObserver.observe(this, {

src/button.ts

@@ -139,7 +139,8 @@ export class AdwButton extends BaseWebComponent {
     const btnClass = this.lintClass(
       `${this.name} ${this.name}-${type} ${className}`,
     )
-    this.registerEvent('click-handler', btnClass)
+    if (!this.isTrueProp('disabled'))
+      this.registerEvent('click-handler', btnClass)
 
     return `<button class="${btnClass}" ${attributes}><slot></slot></button>`
   }

src/card.ts

@@ -1,6 +1,6 @@
+import { BaseWebComponent } from '@simon_he/base-webcomponent'
 import { getAttributes } from '../utils'
-import { BaseWebComponent } from './base'
-// import { BaseWebComponent } from '@simon_he/base-webcomponent'
+// import { BaseWebComponent } from './base'
 
 export class AdwCard extends BaseWebComponent {
   name = 'adw-card'
@@ -129,8 +129,7 @@ export class AdwCard extends BaseWebComponent {
       `${this.name} ${className} ${cover ? `${this.name}-hover` : ''}`,
     )
     let head
-
-    if (cover) {
+    if (this.isTrueProp('cover')) {
       head = `<div class="${this.name}-cover">${cover}</div>`
     }
     else {

src/checkbox.ts

@@ -1,4 +1,5 @@
 import { BaseWebComponent } from '@simon_he/base-webcomponent'
+// import { BaseWebComponent } from './base'
 import { getAttributes } from '../utils'
 
 export class AdwCheckbox extends BaseWebComponent {
@@ -68,10 +69,11 @@ export class AdwCheckbox extends BaseWebComponent {
   }
 
   template(): string {
-    const { className = '', disabled } = this.props
+    const { className = '' } = this.props
     const attributes = getAttributes(this.props)
     const checkboxClass = this.lintClass(`${this.name} ${className}`)
-    if (disabled === undefined || disabled === 'false')
+    console.log(this.props, this.isTrueProp('disabled'))
+    if (!this.isTrueProp('disabled'))
       this.registerEvent('click-handler', `${this.name}-wrapper`)
     return `
     <div class="${this.name}-wrapper">

src/switch.ts

@@ -89,7 +89,7 @@ export class AdwSwitch extends BaseWebComponent {
   }
 
   template(): string {
-    const { className = '', checked = 'false', disabled = false } = this.props
+    const { className = '', checked = 'false' } = this.props
 
     const attributes = getAttributes(this.props)
 
@@ -98,7 +98,7 @@ export class AdwSwitch extends BaseWebComponent {
         checked === 'true' ? `${this.name}-checked` : `${this.name}-unchecked`
       }`,
     )
-    if (disabled === false)
+    if (!this.isTrueProp('disabled'))
       this.registerEvent('on-change', this.name)
 
     return `<button type="button" role="switch" aria-checked="${checked}" class="${switchClass}" ${attributes}>