1.1.0

README.md

@@ -1,2 +1,11 @@
 # 伪域名解析工具
-> macos & linux专用。windows自己找别的。
+> macos & linux专用。windows自己找别的。
+
+
+## Update Logs
+
+
+# v1.1.0  - 2019-12-11
+- 支持域名删除、编辑
+- 支持克隆记录
+- 优化记录编辑、UI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dns-host",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "伪域名解析",
   "main": "src/main.js",
   "scripts": {

src/css/app.css

@@ -1 +1 @@
-html{font-size:1vw;width:100%;height:100%}body{position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;font-size:1.4rem;color:#62778d}.layout-left{display:flex;flex-direction:column;width:18rem;height:64rem;background:#526273}.layout-left wc-scroll{flex:1}.layout-left .domain-list{width:100%}.layout-left .domain-list .item{display:flex;justify-content:flex-end;align-items:center;height:4rem;padding:0 2rem 0 1rem;color:#f3f5fb;cursor:pointer;transition:background .1s ease-in-out}.layout-left .domain-list .item wc-icon{--size:1.2rem;margin:auto -1.5rem auto .5rem;color:#7e909a}.layout-left .domain-list .item:hover,.layout-left .domain-list .item.active{background:#62778d}.layout-left .domain-list .item.active{border-left:0.3rem solid #ffb618}.layout-left .domain-list .item.blank{justify-content:center;cursor:default}.layout-left .domain-list .item.blank:hover{background:none}.layout-left .action{display:flex;align-items:center;height:5rem;padding:0 1rem}.layout-right{flex:1;display:flex;flex-direction:column;background:#f7f8fb}.layout-right .toolbar{display:flex;align-items:center;justify-content:space-between;height:4rem;padding:0 1.5rem;background:#e8ebf4;box-shadow:0 0.2rem 0.5rem rgba(0,0,0,0.1)}.layout-right .toolbar wc-input{width:20rem}.layout-right .main{overflow:hidden;flex:1;display:flex;flex-direction:column;margin:2rem 1rem;padding:0 .5rem;background:#fff}.layout-right .thead{display:flex;align-items:center;justify-content:center;height:4rem;margin-bottom:.8rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.layout-right .thead span{flex:1}.layout-right .thead .long{flex:1.5}.layout-right wc-scroll{flex:1}.layout-right .record-list{width:100%;line-height:4rem}.layout-right .record-list .item{display:flex;justify-content:center;align-items:center;height:4rem;padding:0 1rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.layout-right .record-list .item wc-input,.layout-right .record-list .item span,.layout-right .record-list .item section{flex:1}.layout-right .record-list .item .long{flex:1.5}.layout-right .record-list .item section{display:flex;align-items:center;justify-content:center}.layout-right .record-list .item:hover{background:#f3f5fb}.layout-right .record-list .item:last-child{border-bottom:none}.permission-error{position:fixed;left:0;top:0;z-index:102401;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:5rem;background:rgba(255,233,233,0.95);-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem)}.permission-error pre{font-family:'Courier New', Courier, monospace;font-size:1.6rem;color:#eb3b48}.permission-error fieldset{width:60rem;padding:0 3rem 3rem;border:0.1rem solid #ffb618;border-radius:.8rem}.permission-error fieldset legend{padding:0 1rem;font-size:1.6rem}.permission-error fieldset dt{margin-top:2rem;font-weight:bold}.permission-error fieldset code{display:block;padding:.8rem 1rem;margin-top:.8rem;border-left:0.3rem solid #dae1e9;background:rgba(255,255,255,0.3);font-family:'Courier New', Courier, monospace}.permission-error.show{display:flex}
+html{font-size:1vw;width:100%;height:100%}body{position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;font-size:1.4rem;color:#62778d}.layout-left{display:flex;flex-direction:column;width:18rem;height:64rem;background:#526273}.layout-left wc-scroll{flex:1}.layout-left .domain-list{width:100%}.layout-left .domain-list .item{display:flex;justify-content:flex-end;align-items:center;height:4rem;padding:0 2rem 0 1rem;color:#f3f5fb;cursor:pointer;transition:background .1s ease-in-out}.layout-left .domain-list .item wc-icon{--size:1.2rem;margin:auto -1.5rem auto .5rem;color:#7e909a}.layout-left .domain-list .item:hover,.layout-left .domain-list .item.active{background:#62778d}.layout-left .domain-list .item.active{border-left:0.3rem solid #ffb618;color:#ffb618;font-weight:bold}.layout-left .domain-list .item.blank{justify-content:center;cursor:default}.layout-left .domain-list .item.blank:hover{background:none}.layout-left .action{display:flex;align-items:center;height:5rem;padding:0 1rem}.layout-right{flex:1;display:flex;flex-direction:column;background:#f7f8fb}.layout-right .toolbar{display:flex;align-items:center;justify-content:space-between;height:4rem;padding:0 1.5rem;background:#e8ebf4;box-shadow:0 0.2rem 0.5rem rgba(0,0,0,0.1)}.layout-right .toolbar wc-input{width:20rem}.layout-right .main{overflow:hidden;flex:1;display:flex;flex-direction:column;margin:2rem 1rem;padding:0 .5rem;background:#fff}.layout-right .thead{display:flex;align-items:center;justify-content:center;height:4rem;margin-bottom:.8rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.layout-right .thead span{flex:1}.layout-right .thead .long{flex:1.5}.layout-right wc-scroll{flex:1}.layout-right .record-list{width:100%;line-height:4rem}.layout-right .record-list .item{display:flex;justify-content:center;align-items:center;height:4rem;padding:0 1rem;border-bottom:0.1rem solid #e8ebf4;text-align:center}.layout-right .record-list .item wc-input,.layout-right .record-list .item span,.layout-right .record-list .item section{flex:1}.layout-right .record-list .item .long{flex:1.5}.layout-right .record-list .item section{display:flex;align-items:center;justify-content:center}.layout-right .record-list .item wc-button{margin-left:.5rem}.layout-right .record-list .item:last-child{border-bottom:none}.permission-error{position:fixed;left:0;top:0;z-index:102401;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:5rem;background:rgba(255,233,233,0.95);-webkit-backdrop-filter:blur(0.5rem);backdrop-filter:blur(0.5rem)}.permission-error pre{font-family:'Courier New', Courier, monospace;font-size:1.6rem;color:#eb3b48}.permission-error fieldset{width:60rem;padding:0 3rem 3rem;border:0.1rem solid #ffb618;border-radius:.8rem}.permission-error fieldset legend{padding:0 1rem;font-size:1.6rem}.permission-error fieldset dt{margin-top:2rem;font-weight:bold}.permission-error fieldset code{display:block;padding:.8rem 1rem;margin-top:.8rem;border-left:0.3rem solid #dae1e9;background:rgba(255,255,255,0.3);font-family:'Courier New', Courier, monospace}.permission-error.show{display:flex}.context-menu{display:flex;flex-direction:column;width:10rem;padding:.5rem 0;background:#fff}.context-menu .item{height:3rem;line-height:3rem;padding:0 1.5rem;cursor:pointer}.context-menu .item:hover{background:#f2f5fc}

src/css/app.scss

@@ -38,7 +38,7 @@ body {
 
       &:hover,
       &.active {background:nth($cd, 1);}
-      &.active {border-left:.3rem solid nth($co, 1);}
+      &.active {border-left:.3rem solid nth($co, 1);color:nth($co, 1);font-weight:bold;}
       &.blank {
         justify-content:center;cursor:default;
         &:hover {background:none;}
@@ -93,8 +93,8 @@ body {
       wc-input,span,section {flex:1;}
       .long {flex:1.5;}
       section {display:flex;align-items:center;justify-content:center;}
+      wc-button {margin-left:.5rem;}
 
-      &:hover {background:nth($cp, 1);}
       &:last-child {border-bottom:none;}
     }
   }
@@ -132,3 +132,17 @@ body {
   &.show {display:flex;}
 }
 
+
+.context-menu {
+  display:flex;
+  flex-direction:column;
+  width:10rem;
+  padding:.5rem 0;
+  background:#fff;
+
+  .item {
+    height:3rem;line-height:3rem;padding:0 1.5rem;cursor:pointer;
+
+    &:hover {background:#f2f5fc;}
+  }
+}

src/index.html

@@ -13,11 +13,12 @@
 
   <div class="layout-left">
     <wc-scroll>
-      <ul class="domain-list">
+      <ul class="domain-list" @contextmenu="showMenu">
         <li 
           class="item" 
-          :class="{active: it === curr}"
+          :class="{active: it === activeDomain}"
           :for="it in domains"
+          :data-name="it"
           @click="toggleDomain(it)">
           <span :text="it"></span>
           <wc-icon is="right"></wc-icon>
@@ -44,22 +45,23 @@
     <main class="main">
       <header class="thead">
         <span class="long">主机记录</span>
-        <span>记录类型</span>
+        <span>类型</span>
         <span class="long">记录值</span>
-        <span>操作</span>
+        <span class="long">操作</span>
         <span>备注</span>
       </header>
       <wc-scroll ref="records">
         <ul class="record-list">
           <li class="item" :for="it in records">
-            <wc-input autofocus class="long" :duplex="it.record" label="根域请填 @"></wc-input>
+            <wc-input auto-border autofocus class="long" @change="updateCacheDict(it)" :duplex="it.record" label="根域请填 @"></wc-input>
             <span>A</span>
-            <wc-input class="long" :duplex="it.value" label="请填写IP"></wc-input>
+            <wc-input auto-border class="long" :duplex="it.value" label="请填写IP"></wc-input>
-            <section>
+            <section class="long">
               <wc-switch :duplex="it.enabled" @change="recordChanges(it)"></wc-switch>
               <wc-button size="mini" color="red" @active="$remove">删除</wc-button>
+              <wc-button size="mini" color="blue" @active="clone(it)">克隆</wc-button>
             </section>
-            <wc-input :duplex="it.remark"></wc-input>
+            <wc-input auto-border :duplex="it.remark"></wc-input>
           </li>
         </ul>
       </wc-scroll>
@@ -93,5 +95,12 @@
       </dl>
     </fieldset>
   </div>
+
+  <wc-layer ref="context" left="100px" top="0" radius="0">
+    <ul class="context-menu" @click="confirmAction">
+      <li class="item" data-act="del">删除域名</li>
+      <li class="item" data-act="edit">修改域名</li>
+    </ul>
+  </wc-layer>
 </body>
 </html>

src/js/app.js

@@ -9,6 +9,7 @@ import '/lib/form/button.js'
 import '/lib/form/input.js'
 import '/lib/form/switch.js'
 import layer from '/lib/layer/index.js'
+import { clickOutside } from '/lib/utils.js'
 
 const log = console.log
 
@@ -25,19 +26,23 @@ Anot({
   $id: 'app',
   state: {
     filter: '',
-    curr: '', //当前选中的域名
+    activeDomain: '', //当前选中的域名
+    editDomain: '', // 当前临时要编辑的域名, 即右键菜单选择到的
     domains: [],
     records: [],
     permissionShow: false
   },
   mounted() {
-    // this.$refs.preview.show()
+    // this.$refs.context.show()
     this.check()
+    clickOutside(this.$refs.context, ev => {
+      this.$refs.context.close()
+    })
   },
   watch: {},
   methods: {
     addRecord() {
-      if (this.curr) {
+      if (this.activeDomain) {
         this.records.unshift({
           record: '',
           value: '',
@@ -61,7 +66,7 @@ Anot({
         .then(val => {
           this.domains.push(val)
           dict[val] = []
-          if (!this.curr) {
+          if (!this.activeDomain) {
             this.toggleDomain(val)
           }
           this.save()
@@ -69,7 +74,7 @@ Anot({
         .catch(Anot.noop)
     },
     toggleDomain(name) {
-      this.curr = name
+      this.activeDomain = name
       this.records = dict[name]
       tmp_records = Object.create(null)
       for (let it of this.records) {
@@ -79,10 +84,78 @@ Anot({
           tmp_records[it.record] = [it]
         }
       }
+      document.title = `伪域名解析「 ${name} 」`
       setTimeout(() => {
         this.$refs.records.scrollTop = 0
       }, 50)
     },
+    showMenu(ev) {
+      this.$refs.context.close()
+      var { pageX, pageY } = ev
+      if (pageY + 70 > 600) {
+        pageY -= 70
+      }
+
+      var elem = ev.target
+
+      if (elem.tagName !== 'LI') {
+        elem = elem.parentNode
+      }
+      this.editDomain = elem.dataset.name
+      Anot.nextTick(_ => {
+        this.$refs.context.moveTo({ left: pageX + 'px', top: pageY + 'px' })
+        this.$refs.context.show()
+      })
+    },
+    confirmAction(ev) {
+      this.$refs.context.close()
+      if (ev.target.tagName === 'LI') {
+        var act = ev.target.dataset.act
+
+        if (act === 'del') {
+          layer
+            .confirm(`是否要删除域名「${this.editDomain}」?`, (val, done) => {
+              if (dict[this.editDomain].length > 0) {
+                return layer.toast(
+                  '该域名下有主机记录, 请先删除主机记录后再删除域名',
+                  'error'
+                )
+              }
+              done()
+            })
+            .then(res => {
+              delete dict[this.editDomain]
+              this.domains.remove(this.editDomain)
+              this.editDomain = ''
+              this.records.clear()
+              this.save()
+              this.toggleDomain(this.domains[0])
+            })
+            .catch(Anot.noop)
+        } else if (act === 'edit') {
+          layer
+            .prompt(`请输入新的名字「${this.editDomain}」`, (val, done) => {
+              if (val && val !== this.editDomain) {
+                if (/^[\w.]+\.[a-z]+$/.test(val)) {
+                  done()
+                } else {
+                  layer.toast('域名格式错误', 'error')
+                }
+              }
+            })
+            .then(val => {
+              var idx = this.domains.indexOf(this.editDomain)
+              this.domains.set(idx, val)
+              dict[val] = dict[this.editDomain]
+              delete dict[this.editDomain]
+              this.editDomain = ''
+              this.save()
+              this.toggleDomain(val)
+            })
+            .catch(Anot.noop)
+        }
+      }
+    },
     check() {
       var check = ipcRenderer.sendSync('dns-host', { type: 'check' })
 
@@ -102,6 +175,26 @@ Anot({
         this.permissionShow = true
       }
     },
+    updateCacheDict(item) {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(_ => {
+        tmp_records = Object.create(null)
+        for (let it of this.records) {
+          if (tmp_records[it.record]) {
+            tmp_records[it.record].push(it)
+          } else {
+            tmp_records[it.record] = [it]
+          }
+        }
+      }, 1000)
+    },
+    clone(item) {
+      var params = { ...item }
+      params.enabled = false
+
+      this.records.unshift(params)
+      this.$refs.records.scrollTop = 0
+    },
     // 同一个记录, 允许一条被激活
     recordChanges(item) {
       if (item.enabled) {
@@ -115,11 +208,11 @@ Anot({
       }
     },
     save() {
-      if (this.curr) {
+      if (this.activeDomain) {
-        dict[this.curr] = this.records.$model
+        dict[this.activeDomain] = this.records.$model
-        ipcRenderer.send('dns-host', { type: 'set', data: dict })
-        layer.toast('保存成功', 'success')
       }
+      ipcRenderer.send('dns-host', { type: 'set', data: dict })
+      layer.toast('保存成功', 'success')
     }
   }
 })

src/lib/drag/index.js

@@ -1 +1 @@
-"use strict";import Drag from"./core.js";Anot.directive("drag",{priority:1500,init:function(e){e.expr='"'+e.expr+'"',e.overflow=!0,e.axis="xy",e.element.dataset.axis&&(e.axis=e.element.dataset.axis,delete e.element.dataset.axis),e.limit=!1,e.element.dataset.limit&&(e.limit=e.element.dataset.limit,e.overflow=!1,delete e.element.dataset.limit)},update:function(e){var t=this.element;if(e)for(t=this.element.parentNode;t&&(t.classList||Anot.error(`${this.name}=${this.expr}, 解析异常[元素不存在]`),!t.classList.contains(e)&&t.id!==e);)t=t.parentNode;new Drag(t).by(this.element,{limit:this.limit,axis:this.axis,overflow:this.overflow})}});
+"use strict";import Drag from"./core.js";Anot.directive("drag",{priority:1500,init:function(e){e.expr='"'+e.expr+'"',e.overflow=!0,e.axis="xy",e.element.dataset.axis&&(e.axis=e.element.dataset.axis,delete e.element.dataset.axis),e.limit=!1,e.element.dataset.limit&&(e.limit=e.element.dataset.limit,e.overflow=!1,delete e.element.dataset.limit)},update:function(e){var t=this.element;if(e)for(t=this.element.parentNode;t;){if(t.classList||Anot.error(`${this.name}=${this.expr}, 解析异常[元素不存在]`),"WC-LAYER"===t.tagName&&"layer"===e){t=t.root.children[1];break}if(t.classList.contains(e)||t.id===e)break;t=t.parentNode}new Drag(t).by(this.element,{limit:this.limit,axis:this.axis,overflow:this.overflow})}});

src/lib/form/button.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-27 11:36:21
+ * @date    2019-12-11 17:59:30
  * @version v2.0.1
  * 
  */

src/lib/form/checkbox.js

@@ -1,273 +1,14 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-16 10:23:25
+ * @date    2019-12-11 17:59:30
  * @version v2.0.1
  * 
  */
 
 'use strict'
 
-const log = console.log
+import"../icon/index.js";import{bind,unbind}from"../utils.js";export default class Checkbox extends HTMLElement{static get observedAttributes(){return["label","color","value","checked","readonly","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{label:"",color:"",value:[],checked:!1,readonly:!1,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML="<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:inline-block;line-height:1;font-size:14px}:host label{display:flex;justify-content:center;align-items:center;min-width:32px;height:32px;padding:0 5px;line-height:0;-moz-user-select:none;user-select:none;white-space:nowrap;cursor:inherit;color:#7e909a}:host .dot{--size: 18px;padding:2px;margin-right:3px}:host([readonly]){opacity:0.8}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']){font-size:16px}:host([size='large']) label{height:42px}:host([size='large']) .dot{--size: 22px}:host([size='medium']) label{height:38px}:host([size='medium']) .dot{--size: 20px}:host([size='mini']){font-size:12px}:host([size='mini']) label{height:20px}:host([size='mini']) .dot{--size: 14px}:host([color='red']) label.checked{color:#ff5061}:host([color='red']) label.checked .dot{border-color:#ff5061}:host([color='red']) label.checked .dot::after{background:#ff5061}:host([color='blue']) label.checked{color:#66b1ff}:host([color='blue']) label.checked .dot{border-color:#66b1ff}:host([color='blue']) label.checked .dot::after{background:#66b1ff}:host([color='green']) label.checked{color:#58d68d}:host([color='green']) label.checked .dot{border-color:#58d68d}:host([color='green']) label.checked .dot::after{background:#58d68d}:host([color='teal']) label.checked{color:#3fc2a7}:host([color='teal']) label.checked .dot{border-color:#3fc2a7}:host([color='teal']) label.checked .dot::after{background:#3fc2a7}:host([color='orange']) label.checked{color:#ffb618}:host([color='orange']) label.checked .dot{border-color:#ffb618}:host([color='orange']) label.checked .dot::after{background:#ffb618}:host([color='dark']) label.checked{color:#62778d}:host([color='dark']) label.checked .dot{border-color:#62778d}:host([color='dark']) label.checked .dot::after{background:#62778d}:host([color='purple']) label.checked{color:#ac61ce}:host([color='purple']) label.checked .dot{border-color:#ac61ce}:host([color='purple']) label.checked .dot::after{background:#ac61ce}\n</style> <label> <wc-icon class=\"dot\" is=\"checkbox-off\"></wc-icon> <slot></slot> </label> ",this.__SWITCH__=this.root.lastElementChild,this.__ICO__=this.__SWITCH__.children[0]}get value(){return this.props.value}set value(e){log(e,this,this.props.label),Array.isArray(e)?(this.props.value=e,this.checked=this.props.value.includes(this.props.label)):console.error("checkbox组件的value必须是数组, 当前为: "+typeof e)}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e;var{value:o,checked:t,label:l,color:r}=this.props;this.__SWITCH__.classList.toggle("checked",t),this.__ICO__.setAttribute("is","checkbox-"+(t?"on":"off"));var s=o.indexOf(l);t?(this.__ICO__.setAttribute("color",r),s<0&&o.push(l)):(this.__ICO__.removeAttribute("color"),~s&&o.splice(s,1))}get readonly(){return this.props.readonly}set readonly(e){var o=typeof e;e!==this.props.readonly&&("boolean"===o&&e||"boolean"!==o?(this.props.readonly=!0,this.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(e){var o=typeof e;e!==this.props.disabled&&("boolean"===o&&e||"boolean"!==o?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}connectedCallback(){this._handlClick=bind(this,"click",e=>{e.preventDefault(),this.disabled||this.readonly||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){unbind(this,"click",this._handlClick)}attributeChangedCallback(e,o,t){if(null!==t&&o!==t)switch(e){case"label":case"color":this.props[e]=t;break;case"checked":case"readonly":case"disabled":this[e]=!0}}};
-
-
-import "../icon/index.js"
-import { bind, unbind } from "../utils.js"
-
-export default class Checkbox extends HTMLElement  {
-  static get observedAttributes() {
-        return ["label","color","value","checked","readonly","disabled"]
-      }
-      
-  constructor() {
- super();
-    
-      Object.defineProperty(this, 'root', {
-        value: this.attachShadow({ mode: 'open' }),
-        writable: true,
-        enumerable: false,
-        configurable: true
-      })
-      Object.defineProperty(this, 'props', {
-        value: {
-    label: '',
-    color: '',
-    value: [],
-    checked: false,
-    readonly: false,
-    disabled: false
-  },
-        writable: true,
-        enumerable: false,
-        configurable: true
-      })
-
-      this.root.innerHTML = `<style>* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0; }
-
-::before,
-::after {
-  box-sizing: border-box; }
-
-:host {
-  display: inline-block;
-  line-height: 1;
-  font-size: 14px; }
-  :host label {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 32px;
-    height: 32px;
-    padding: 0 5px;
-    line-height: 0;
-    -moz-user-select: none;
-    user-select: none;
-    white-space: nowrap;
-    cursor: inherit;
-    color: #7e909a; }
-  :host .dot {
-    --size: 18px;
-    padding: 2px;
-    margin-right: 3px; }
-
-:host([readonly]) {
-  opacity: 0.8; }
-
-:host([disabled]) {
-  cursor: not-allowed;
-  opacity: 0.6; }
-
-:host([size='large']) {
-  font-size: 16px; }
-  :host([size='large']) label {
-    height: 42px; }
-  :host([size='large']) .dot {
-    --size: 22px; }
-
-:host([size='medium']) label {
-  height: 38px; }
-
-:host([size='medium']) .dot {
-  --size: 20px; }
-
-:host([size='mini']) {
-  font-size: 12px; }
-  :host([size='mini']) label {
-    height: 20px; }
-  :host([size='mini']) .dot {
-    --size: 14px; }
-
-:host([color='red']) label.checked {
-  color: #ff5061; }
-  :host([color='red']) label.checked .dot {
-    border-color: #ff5061; }
-  :host([color='red']) label.checked .dot::after {
-    background: #ff5061; }
-
-:host([color='blue']) label.checked {
-  color: #66b1ff; }
-  :host([color='blue']) label.checked .dot {
-    border-color: #66b1ff; }
-  :host([color='blue']) label.checked .dot::after {
-    background: #66b1ff; }
-
-:host([color='green']) label.checked {
-  color: #58d68d; }
-  :host([color='green']) label.checked .dot {
-    border-color: #58d68d; }
-  :host([color='green']) label.checked .dot::after {
-    background: #58d68d; }
-
-:host([color='teal']) label.checked {
-  color: #3fc2a7; }
-  :host([color='teal']) label.checked .dot {
-    border-color: #3fc2a7; }
-  :host([color='teal']) label.checked .dot::after {
-    background: #3fc2a7; }
-
-:host([color='orange']) label.checked {
-  color: #ffb618; }
-  :host([color='orange']) label.checked .dot {
-    border-color: #ffb618; }
-  :host([color='orange']) label.checked .dot::after {
-    background: #ffb618; }
-
-:host([color='dark']) label.checked {
-  color: #62778d; }
-  :host([color='dark']) label.checked .dot {
-    border-color: #62778d; }
-  :host([color='dark']) label.checked .dot::after {
-    background: #62778d; }
-
-:host([color='purple']) label.checked {
-  color: #ac61ce; }
-  :host([color='purple']) label.checked .dot {
-    border-color: #ac61ce; }
-  :host([color='purple']) label.checked .dot::after {
-    background: #ac61ce; }
-</style>
-  <label>
-    <wc-icon class="dot" is="checkbox-off"></wc-icon>
-    <slot></slot>
-  </label>
-`
-      
-
-    this.__SWITCH__ = this.root.lastElementChild
-    this.__ICO__ = this.__SWITCH__.children[0]
-  }
-
-  get value() {
-    return this.props.value
-  }
-
-  set value(val) {
-    log(val, this, this.props.label)
-    if (Array.isArray(val)) {
-      this.props.value = val
-      this.checked = this.props.value.includes(this.props.label)
-    } else {
-      console.error('checkbox组件的value必须是数组, 当前为: ' + typeof val)
-    }
-  }
-
-  get checked() {
-    return this.props.checked
-  }
-
-  set checked(val) {
-    this.props.checked = !!val
-    var { value, checked, label, color } = this.props
-    this.__SWITCH__.classList.toggle('checked', checked)
-    this.__ICO__.setAttribute('is', 'checkbox-' + (checked ? 'on' : 'off'))
-
-    var idx = value.indexOf(label)
-    if (checked) {
-      this.__ICO__.setAttribute('color', color)
-      if (idx < 0) {
-        value.push(label)
-      }
-    } else {
-      this.__ICO__.removeAttribute('color')
-      if (~idx) {
-        value.splice(idx, 1)
-      }
-    }
-  }
-
-  get readonly() {
-    return this.props.readonly
-  }
-
-  set readonly(val) {
-    var type = typeof val
-
-    if (val === this.props.readonly) {
-      return
-    }
-    if ((type === 'boolean' && val) || type !== 'boolean') {
-      this.props.readonly = true
-      this.setAttribute('readonly', '')
-    } else {
-      this.props.readonly = false
-      this.removeAttribute('readonly')
-    }
-  }
-
-  get disabled() {
-    return this.props.disabled
-  }
-
-  set disabled(val) {
-    var type = typeof val
-
-    if (val === this.props.disabled) {
-      return
-    }
-    if ((type === 'boolean' && val) || type !== 'boolean') {
-      this.props.disabled = true
-      this.setAttribute('disabled', '')
-    } else {
-      this.props.disabled = false
-      this.removeAttribute('disabled')
-    }
-  }
-
-  connectedCallback() {
-    this._handlClick = bind(this, 'click', ev => {
-      ev.preventDefault()
-
-      if (!this.disabled && !this.readonly) {
-        this.checked = !this.checked
-        this.dispatchEvent(new CustomEvent('input'))
-      }
-    })
-  }
-
-  disconnectedCallback() {
-    unbind(this, 'click', this._handlClick)
-  }
-
-  attributeChangedCallback(name, old, val) {
-if (val === null || old === val) {return}
-    switch (name) {
-      case 'label':
-      case 'color':
-        this.props[name] = val
-        break
-
-      case 'checked':
-      case 'readonly':
-      case 'disabled':
-        this[name] = true
-        break
-    }
-  }
-}
-
 
 if(!customElements.get('wc-checkbox')){
   customElements.define('wc-checkbox', Checkbox)

src/lib/form/number.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-27 11:36:21
+ * @date    2019-12-11 17:59:30
  * @version v2.0.1
  * 
  */

src/lib/form/progress.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-27 11:36:21
+ * @date    2019-12-11 17:59:30
  * @version v2.0.1
  * 
  */

src/lib/form/radio.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-27 11:36:21
+ * @date    2019-12-11 17:59:30
  * @version v2.0.1
  * 
  */

src/lib/form/select.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-27 11:36:21
+ * @date    2019-12-11 17:59:30
  * @version v2.0.1
  * 
  */

src/lib/form/star.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-27 11:36:21
+ * @date    2019-12-11 17:59:30
  * @version v2.0.1
  * 
  */

src/lib/form/switch.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-27 11:36:21
+ * @date    2019-12-11 17:59:30
  * @version v2.0.1
  * 
  */

src/lib/icon/index.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-27 11:36:21
+ * @date    2019-12-11 17:59:30
  * @version v2.0.1
  * 
  */

src/lib/scroll/index.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-12-02 15:38:50
+ * @date    2019-12-11 17:59:30
  * @version v2.0.1
  * 
  */