update

src/form/checkbox-item.wc

@@ -8,6 +8,7 @@
 <style lang="scss">
 :host {
   display: inline-flex;
+  align-items: center;
   line-height: 1;
   font-size: 14px;
   cursor: pointer;

src/form/option.wc

@@ -60,6 +60,8 @@ export default class Option {
 
   __init__() {
     /* render */
+
+    this.__LABEL__ = this.root.children[1]
   }
 
   get value() {
@@ -82,6 +84,7 @@ export default class Option {
       return
     }
     this.props.label = val
+    this.__LABEL__.textContent = val
   }
 
   get disabled() {

src/form/radio-item.wc

@@ -8,6 +8,7 @@
 <style lang="scss">
 :host {
   display: inline-flex;
+  align-items: center;
   line-height: 1;
   font-size: 14px;
   cursor: pointer;
@@ -228,9 +229,7 @@ export default class Radio {
 
     this.checked = true
 
-    this.parentNode.dispatchEvent(
+    this.parentNode.dispatchEvent(new CustomEvent('child-picked', { detail: this.value }))
-      new CustomEvent('child-picked', { detail: this.value })
-    )
   }
 
   mounted() {

src/form/select.wc

@@ -1,13 +1,12 @@
 <template>
   <div class="label">
     <input readonly />
-    <wc-icon class="arrow" is="left"></wc-icon>
+    <wc-icon class="arrow" is="trigon-down"></wc-icon>
-    <div class="opt-box">
+
-      <wc-scroll>
+    <wc-scroll class="opt-box">
-        <dl class="list"></dl>
+      <div class="list"><slot /></div>
     </wc-scroll>
   </div>
-  </div>
 </template>
 
 <style lang="scss">
@@ -28,6 +27,7 @@
   justify-content: center;
   align-items: center;
   height: 36px;
+  padding: 0 8px;
   font-size: 14px;
   border: 1px solid var(--color-grey-2);
   border-radius: inherit;
@@ -40,7 +40,6 @@
     min-width: 36px;
     width: 0;
     height: 100%;
-    padding: 0 8px;
     border: 0;
     border-radius: inherit;
     color: inherit;
@@ -85,10 +84,8 @@
 
   /* ----- */
   .arrow {
-    padding: 0 5px;
     --size: 14px;
-    color: #ddd;
+    color: var(--color-grey-2);
-    transform: rotate(-90deg);
   }
 }
 
@@ -108,9 +105,6 @@
   background: var(--color-plain-1);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
 
-  .list {
-    width: 100%;
-  }
   &.show {
     display: flex;
   }
@@ -233,18 +227,18 @@ function parseOptions(arr, props) {
         if (!_.disabled) {
           props.LIST.push(_)
         }
-        html += `<dd sub ${
+        html += `<dd sub ${_.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"`} ${
-          _.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"`
+          _.value === props.value ? 'focus' : ''
-        } ${_.value === props.value ? 'focus' : ''}>${_.label}</dd>`
+        }>${_.label}</dd>`
       }
     } else {
       if (!it.disabled) {
         props.LIST.push(it)
       }
       props.DICT[it.value] = it
-      html += `<dd ${
+      html += `<dd ${it.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"`} ${
-        it.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"`
+        it.value === props.value ? 'focus' : ''
-      } ${it.value === props.value ? 'focus' : ''}>${it.label}</dd>`
+      }>${it.label}</dd>`
     }
   }
   return html
@@ -256,7 +250,6 @@ export default class Select {
     placeholder: '',
     multi: '',
     value: '',
-    options: '',
     mvidx: null, //下拉列表光标的索引ID
     readonly: false,
     disabled: false
@@ -475,14 +468,14 @@ export default class Select {
         this.__INPUT__.setAttribute('placeholder', val)
         break
 
-      case 'options':
+      // case 'options':
-        if (val) {
+      //   if (val) {
-          try {
+      //     try {
-            this._renderOptions(JSON.parse(val))
+      //       this._renderOptions(JSON.parse(val))
-          } catch (err) {}
+      //     } catch (err) {}
-          this.removeAttribute('options')
+      //     this.removeAttribute('options')
-        }
+      //   }
-        break
+      //   break
 
       case 'value':
         this.value = val

src/form/switch.wc

@@ -9,13 +9,13 @@
 
 <style lang="scss">
 :host {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
 
   section {
     display: flex;
     justify-content: center;
     align-items: center;
-    // vertical-align: middle;
     line-height: 1;
     white-space: nowrap;
   }
@@ -162,12 +162,7 @@ export default class Switch {
     }
   }
 
-  mounted() {
+  _updateStat() {
-    this._handleClick = $.bind(this, 'click', ev => {
-      if (this.disabled) {
-        return
-      }
-      this.checked = !this.checked
     if (this.checked) {
       if (this.props['active-text'] !== null) {
         this.textContent = this.props['active-text']
@@ -177,6 +172,16 @@ export default class Switch {
         this.textContent = this.props['inactive-text']
       }
     }
+  }
+
+  mounted() {
+    this._handleClick = $.bind(this, 'click', ev => {
+      if (this.disabled) {
+        return
+      }
+      this.checked = !this.checked
+
+      this._updateStat()
       this.dispatchEvent(new CustomEvent('input'))
     })
   }
@@ -194,8 +199,8 @@ export default class Switch {
 
       case 'active-text':
       case 'inactive-text':
-        console.log('------------->>>')
         this.props[name] = val + ''
+        this._updateStat()
         break
     }
   }