更新组件库

package.json

@@ -18,8 +18,8 @@
     "iofs": "^1.1.0"
   },
   "devDependencies": {
-    "electron": "^6.0.0",
+    "electron": "^7.1.0",
-    "electron-builder": "^20.38.5"
+    "electron-builder": "^22.1.0"
   },
   "build": {
     "appId": "cc.doui.sonist",

src/lib/form/checkbox.js

@@ -1,14 +1,14 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-07 23:35:03
+ * @date    2019-11-05 23:34:04
  * @version v2.0.1
  * 
  */
 
 'use strict'
 
-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;user-select:none;-moz-user-select:none;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){if(!Array.isArray(e))throw TypeError(":duplex指令需要传入一个数组, 当前为: "+typeof e);this.props.value=e,this.checked=this.props.value.includes(this.props.label)}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 c=o.indexOf(l);t?(this.__ICO__.setAttribute("color",r),c<0&&o.push(l)):(this.__ICO__.removeAttribute("color"),~c&&o.splice(c,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:!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}}};
 
 if(!customElements.get('wc-checkbox')){
   customElements.define('wc-checkbox', Checkbox)

src/lib/form/progress.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-07 23:35:03
+ * @date    2019-11-05 23:34:04
  * @version v2.0.1
  * 
  */

src/lib/form/radio.js

@@ -1,14 +1,14 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-07 23:35:03
+ * @date    2019-11-05 23:34:04
  * @version v2.0.1
  * 
  */
 
 'use strict'
 
-import{bind,unbind}from"../utils.js";export default class Radio extends HTMLElement{static get observedAttributes(){return["label","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:"",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;user-select:none;-moz-user-select:none;cursor:inherit;color:#7e909a}:host label.checked .dot::after{display:block;width:12px;height:12px;border-radius:50%;background:#aabac3;content:''}:host .dot{width:18px;height:18px;padding:2px;margin-right:3px;border:1px solid #aabac3;border-radius:50%;background:#fff}:host([readonly]){opacity:0.8}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']) label{width:58px;height:32px}:host([size='large']) .dot{width:26px;height:26px}:host([size='medium']) label{width:50px;height:28px}:host([size='medium']) .dot{width:22px;height:22px}:host([size='mini']) label{width:22px;height:14px;padding:2px}:host([size='mini']) .dot{width:10px;height:10px}: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> <span class=\"dot\"></span> <slot></slot> </label> ",this.__SWITCH__=this.root.lastElementChild}get value(){return this.props.label}set value(e){this.checked=this.props.label===e}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e,this.__SWITCH__.classList.toggle("checked",this.props.checked)}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._handleClick=bind(this,"click",e=>{this.disabled||this.readonly||this.checked||(this.checked=!0,this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){unbind(this,"click",this._handleClick)}attributeChangedCallback(e,o,t){if(null!==t&&o!==t)switch(e){case"label":this.props.label=t;break;case"checked":case"readonly":case"disabled":this[e]=!0}}};
+import{bind,unbind}from"../utils.js";export default class Radio extends HTMLElement{static get observedAttributes(){return["label","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:"",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 label.checked .dot::after{display:block;width:12px;height:12px;border-radius:50%;background:#aabac3;content:''}:host .dot{width:18px;height:18px;padding:2px;margin-right:3px;border:1px solid #aabac3;border-radius:50%;background:#fff}:host([readonly]){opacity:0.8}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']) label{width:58px;height:32px}:host([size='large']) .dot{width:26px;height:26px}:host([size='medium']) label{width:50px;height:28px}:host([size='medium']) .dot{width:22px;height:22px}:host([size='mini']) label{width:22px;height:14px;padding:2px}:host([size='mini']) .dot{width:10px;height:10px}: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> <span class=\"dot\"></span> <slot></slot> </label> ",this.__SWITCH__=this.root.lastElementChild}get value(){return this.props.label}set value(e){this.checked=this.props.label===e}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e,this.__SWITCH__.classList.toggle("checked",this.props.checked)}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._handleClick=bind(this,"click",e=>{this.disabled||this.readonly||this.checked||(this.checked=!0,this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){unbind(this,"click",this._handleClick)}attributeChangedCallback(e,o,t){if(null!==t&&o!==t)switch(e){case"label":this.props.label=t;break;case"checked":case"readonly":case"disabled":this[e]=!0}}};
 
 if(!customElements.get('wc-radio')){
   customElements.define('wc-radio', Radio)

src/lib/form/star.js

@@ -0,0 +1,15 @@
+/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    2019-11-05 23:34:04
+ * @version v2.0.1
+ * 
+ */
+
+'use strict'
+
+import{ebind,bind,unbind}from"../utils.js";export default class Star extends HTMLElement{static get observedAttributes(){return["value","text","size","color","allow-half","show-value","starSize","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{value:0,text:[],size:"",color:"","allow-half":!1,"show-value":!1,starSize:32,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:flex;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;font-size:14px;--size: 24px}label{display:flex;align-items:center;line-height:0;cursor:inherit}label wc-icon{margin:0 3px;transition:transform .1s ease-in-out}label wc-icon:hover{transform:scale(1.05)}label span{padding:0 8px;margin:0 3px}:host([size=\'large\']){font-size:16px;--size: 36px}:host([size=\'medium\']){--size: 30px}:host([size=\'mini\']){font-size:12px;--size: 20px}:host([color=\'red\']) label span{color:#ff5061}:host([color=\'teal\']) label span{color:#3fc2a7}:host([color=\'green\']) label span{color:#58d68d}:host([color=\'grey\']) label span{color:#aabac3}:host([color=\'blue\']) label span{color:#66b1ff}:host([color=\'purple\']) label span{color:#ac61ce}:host([color=\'orange\']) label span{color:#ffb618}:host([disabled]){cursor:default;opacity:0.6}:host([disabled]) label wc-icon:hover{transform:none}\n</style> <label> <wc-icon data-idx="0" is="star" color="grey"></wc-icon> <wc-icon data-idx="1" is="star" color="grey"></wc-icon> <wc-icon data-idx="2" is="star" color="grey"></wc-icon> <wc-icon data-idx="3" is="star" color="grey"></wc-icon> <wc-icon data-idx="4" is="star" color="grey"></wc-icon> <span class="text"></span> </label> ',this.__BOX__=this.root.children[1],this.__STARS__=Array.from(this.__BOX__.children),this.__TEXT__=this.__STARS__.pop()}get value(){return this.props.value}set value(e){var t=+e;(e=t==t&&t>0?t:0)>5&&(e=5),this.props.value=e,this._updateDraw(-1)}_updateDraw(e,t=0){var s="star-half",{value:o,tmp:a={i:0,f:0}}=this.props;-1===e&&(e=Math.floor(o),t=+(o%1).toFixed(1),e>0&&e===o&&(e--,t=1)),this.props["allow-half"]||(t=t>0?1:0),e===a.i&&t===a.f||(t>.5&&(s="star-full"),this.__STARS__.forEach((t,s)=>{t.setAttribute("is",s<e?"star-full":"star"),t.setAttribute("color",s<e?this.props.color:"grey")}),t>0&&(this.__STARS__[e].setAttribute("is",s),this.__STARS__[e].setAttribute("color",this.props.color)),this.props.tmp={i:e,f:t},0===e&&0===t?this.__TEXT__.textContent="":5===this.props.text.length?this.__TEXT__.textContent=this.props.text[e]:this.props["show-value"]&&(this.__TEXT__.textContent=e+t))}connectedCallback(){ebind(this.__BOX__,"mousemove",e=>{if(!this.props.disabled&&"WC-ICON"===e.target.tagName){let t=+e.target.dataset.idx;this._updateDraw(t,+(e.offsetX/this.props.starSize).toFixed(1))}}),ebind(this.__BOX__,"click",e=>{var{tmp:t,disabled:s}=this.props;s||"WC-ICON"===e.target.tagName&&(this.props.value=t.i+t.f,this.dispatchEvent(new CustomEvent("input")))}),ebind(this.__BOX__,"mouseleave",e=>{this.props.disabled||this._updateDraw(-1)})}attributeChangedCallback(e,t,s){if(null!==s&&t!==s)switch(e){case"size":this.props.starSize=this.__STARS__[0].clientWidth;break;case"allow-half":case"show-value":case"disabled":this.props[e]=!0;break;case"color":s&&(this.props.color=s);break;case"text":s&&5===(s=s.split("|")).length&&(this.props.text=s.map(e=>e.trim()));break;case"value":this.value=s}}};
+
+if(!customElements.get('wc-star')){
+  customElements.define('wc-star', Star)
+}

src/lib/form/switch.js

@@ -1,14 +1,14 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-07 23:35:03
+ * @date    2019-11-05 23:34:04
  * @version v2.0.1
  * 
  */
 
 'use strict'
 
-import{bind,unbind}from"../utils.js";export default class Switch extends HTMLElement{static get observedAttributes(){return["checked","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{checked:!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}:host section{display:flex;justify-content:center;align-items:center}:host label{display:flex;width:38px;height:22px;padding:3px;margin:5px;border-radius:21px;background:#dae1e9;cursor:inherit}:host label.checked{flex-direction:row-reverse;background:#7e909a}:host .dot{width:16px;height:16px;border-radius:50%;background:#fff}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']) label{width:58px;height:32px}:host([size='large']) .dot{width:26px;height:26px}:host([size='medium']) label{width:50px;height:28px}:host([size='medium']) .dot{width:22px;height:22px}:host([size='mini']) label{width:22px;height:14px;padding:2px}:host([size='mini']) .dot{width:10px;height:10px}:host([color='red']) label.checked{background:#ff5061}:host([color='blue']) label.checked{background:#66b1ff}:host([color='green']) label.checked{background:#58d68d}:host([color='teal']) label.checked{background:#3fc2a7}:host([color='orange']) label.checked{background:#ffb618}:host([color='dark']) label.checked{background:#62778d}:host([color='purple']) label.checked{background:#ac61ce}\n</style> <section> <label> <span class=\"dot\"></span> </label> <slot></slot> </section> ",this.__SWITCH__=this.root.lastElementChild.firstElementChild}get value(){return this.props.checked}set value(e){this.checked=e}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e,this.__SWITCH__.classList.toggle("checked",this.props.checked)}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&("boolean"===t&&e||"boolean"!==t?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}connectedCallback(){this._handleClick=bind(this,"click",e=>{this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){unbind(this,"click",this._handleClick)}attributeChangedCallback(e,t,i){if(null!==i&&t!==i)switch(e){case"checked":case"disabled":this[e]=!0}}};
+import{bind,unbind}from"../utils.js";export default class Switch extends HTMLElement{static get observedAttributes(){return["active-text","inactive-text","checked","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{"active-text":null,"inactive-text":null,checked:!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}:host section{display:flex;justify-content:center;align-items:center;white-space:nowrap}:host label{display:flex;width:38px;height:22px;padding:3px;margin:5px;line-height:0;border-radius:21px;background:#dae1e9;cursor:inherit}:host label.checked{flex-direction:row-reverse;background:#7e909a}:host .dot{width:16px;height:16px;border-radius:50%;background:#fff}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']) label{width:58px;height:32px}:host([size='large']) .dot{width:26px;height:26px}:host([size='medium']) label{width:50px;height:28px}:host([size='medium']) .dot{width:22px;height:22px}:host([size='mini']) label{width:22px;height:14px;padding:2px}:host([size='mini']) .dot{width:10px;height:10px}:host([color='red']) label.checked{background:#ff5061}:host([color='blue']) label.checked{background:#66b1ff}:host([color='green']) label.checked{background:#58d68d}:host([color='teal']) label.checked{background:#3fc2a7}:host([color='orange']) label.checked{background:#ffb618}:host([color='dark']) label.checked{background:#62778d}:host([color='purple']) label.checked{background:#ac61ce}\n</style> <section> <label> <span class=\"dot\"></span> </label> <slot></slot> </section> ",this.__SWITCH__=this.root.lastElementChild.firstElementChild}get value(){return this.props.checked}set value(e){this.checked=e}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e,this.__SWITCH__.classList.toggle("checked",this.props.checked)}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&("boolean"===t&&e||"boolean"!==t?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}connectedCallback(){this._handleClick=bind(this,"click",e=>{this.disabled||(this.checked=!this.checked,this.checked?null!==this.props["active-text"]&&(this.textContent=this.props["active-text"]):null!==this.props["inactive-text"]&&(this.textContent=this.props["inactive-text"]),this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){unbind(this,"click",this._handleClick)}attributeChangedCallback(e,t,i){if(null!==i&&t!==i)switch(e){case"checked":case"disabled":this[e]=!0;break;case"active-text":case"inactive-text":this.props[e]=i+""}}};
 
 if(!customElements.get('wc-switch')){
   customElements.define('wc-switch', Switch)

src/lib/icon/index.js

@@ -1,7 +1,7 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-07 23:35:03
+ * @date    2019-11-05 23:34:04
  * @version v2.0.1
  * 
  */

src/lib/pager/index.js

@@ -1,14 +1,14 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-01 23:16:06
+ * @date    2019-11-05 23:34:04
  * @version v2.0.1
  * 
  */
 
 'use strict'
 
-function calculate(t,e,r){var o,a=[],s=0,i=t<3?6-t:2;if(e<2||r)return a.push({to:t,txt:t}),a;t-i>1&&e>5&&(o=(o=t-2*i)<1?1:o,a.push({to:o,txt:"..."}));e-t<i&&(s=i-e+t);for(var n=t-i-s;n<t+i+1&&n<=e;n++)n>0&&a.push({to:n,txt:n});t+i<e&&(o=(o=t+2*i)>e?e:o,a.push({to:o,txt:"..."}));return a}export default class Pager extends HTMLElement{static get observedAttributes(){return["layout","total","curr","pagesize","simple"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{layout:"home, prev, next, end",total:0,curr:1,pagesize:20,simple:!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:block;line-height:1;color:#62778d;font-size:14px;user-select:none;-moz-user-select:none}:host .layout{display:flex;justify-content:center;align-items:center;margin:10px auto}:host button{min-width:32px;height:32px;padding:0 8px;margin:0 3px;background:#f3f5fb;border:0;border-radius:4px;outline:none;font-size:inherit;color:inherit}:host button:hover{background:#e8ebf4}:host button[curr]{background:#3fc2a7;color:#fff}:host([simple]) .home,:host([simple]) .end{display:none}:host([circle]) button{border-radius:50%}:host([color=\'red\']) button[curr]{background:#ff5061}:host([color=\'blue\']) button[curr]{background:#66b1ff}:host([color=\'green\']) button[curr]{background:#58d68d}:host([color=\'teal\']) button[curr]{background:#3fc2a7}:host([color=\'orange\']) button[curr]{background:#ffb618}:host([color=\'dark\']) button[curr]{background:#62778d}:host([color=\'purple\']) button[curr]{background:#ac61ce}\n</style> <div class="layout"> <button data-page="1" class="home">|<</button> <button data-page="prev" class="prev"><</button> <div class="pager"></div> <button data-page="next" class="next">></button> <button data-page="end" class="end">>|</button> </div> ',this.__LAYOUT__=this.root.children[1],this.__HOME__=this.__LAYOUT__.children[0],this.__PREV__=this.__LAYOUT__.children[1],this.__PAGE__=this.__LAYOUT__.children[2],this.__NEXT__=this.__LAYOUT__.children[3],this.__END__=this.__LAYOUT__.children[4]}update(){var{curr:t,totalpage:e,simple:r}=this.props,o=calculate(t,e,r);this.__PAGE__.innerHTML=o.map(e=>`<button ${t===e.to?"curr":""} data-page="${e.to}">${e.txt}</button>`).join("")}connectedCallback(){var{pagesize:t,total:e}=this.props;this.props.totalpage=Math.ceil(e/t),this.update(),this.__LAYOUT__.addEventListener("click",t=>{if("BUTTON"===t.target.tagName){var{curr:e,totalpage:r}=this.props,o=t.target.dataset.page,a=+o;if(a==a){if(a===e)return}else switch(o){case"prev":if((a=e-1)<1)return;break;case"next":if((a=e+1)>r)return;break;case"end":if(r===e)return;a=r}this.props.curr=a,this.update(),this.dispatchEvent(new CustomEvent("pick",{detail:a}))}},!1)}attributeChangedCallback(t,e,r){if(e!==r)switch(t){case"total":case"pagesize":case"curr":this.props[t]=+r||this.props[t];var{pagesize:o,total:a}=this.props;this.props.totalpage=Math.ceil(a/o),this.update();break;case"simple":this.props.simple=!0}}};
+function calculate(t,e,r){var o,a=[],s=0,i=t<3?6-t:2;if(e<2||r)return a.push({to:t,txt:t}),a;t-i>1&&e>5&&(o=(o=t-2*i)<1?1:o,a.push({to:o,txt:"..."}));e-t<i&&(s=i-e+t);for(var n=t-i-s;n<t+i+1&&n<=e;n++)n>0&&a.push({to:n,txt:n});t+i<e&&(o=(o=t+2*i)>e?e:o,a.push({to:o,txt:"..."}));return a}export default class Pager extends HTMLElement{static get observedAttributes(){return["layout","total","curr","pagesize","simple"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{layout:"home, prev, next, end",total:0,curr:1,pagesize:20,simple:!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:block;line-height:1;color:#62778d;font-size:14px;user-select:none;-moz-user-select:none}:host .layout{display:flex;justify-content:center;align-items:center;margin:10px auto}:host button{min-width:32px;height:32px;padding:0 8px;margin:0 3px;background:#f3f5fb;border:0;border-radius:4px;outline:none;font-size:inherit;color:inherit}:host button:hover{background:#e8ebf4}:host button[curr]{background:#3fc2a7;color:#fff}:host([simple]) .home,:host([simple]) .end{display:none}:host([circle]) button{border-radius:50%}:host([color=\'red\']) button[curr]{background:#ff5061}:host([color=\'blue\']) button[curr]{background:#66b1ff}:host([color=\'green\']) button[curr]{background:#58d68d}:host([color=\'teal\']) button[curr]{background:#3fc2a7}:host([color=\'orange\']) button[curr]{background:#ffb618}:host([color=\'dark\']) button[curr]{background:#62778d}:host([color=\'purple\']) button[curr]{background:#ac61ce}\n</style> <div class="layout"> <button data-page="1" class="home">|<</button> <button data-page="prev" class="prev"><</button> <div class="pager"></div> <button data-page="next" class="next">></button> <button data-page="end" class="end">>|</button> </div> ',this.__LAYOUT__=this.root.children[1],this.__HOME__=this.__LAYOUT__.children[0],this.__PREV__=this.__LAYOUT__.children[1],this.__PAGE__=this.__LAYOUT__.children[2],this.__NEXT__=this.__LAYOUT__.children[3],this.__END__=this.__LAYOUT__.children[4]}update(){var{curr:t,totalpage:e,simple:r}=this.props,o=calculate(t,e,r);this.__PAGE__.innerHTML=o.map(e=>`<button ${t===e.to?"curr":""} data-page="${e.to}">${e.txt}</button>`).join("")}connectedCallback(){var{pagesize:t,total:e}=this.props;this.props.totalpage=Math.ceil(e/t),this.update(),this.__LAYOUT__.addEventListener("click",t=>{if("BUTTON"===t.target.tagName){var{curr:e,totalpage:r}=this.props,o=t.target.dataset.page,a=+o;if(a==a){if(a===e)return}else switch(o){case"prev":if((a=e-1)<1)return;break;case"next":if((a=e+1)>r)return;break;case"end":if(r===e)return;a=r}this.props.curr=a,this.update(),this.dispatchEvent(new CustomEvent("pick",{detail:a}))}},!1)}attributeChangedCallback(t,e,r){if(null!==r&&e!==r)switch(t){case"total":case"pagesize":case"curr":this.props[t]=+r||this.props[t];var{pagesize:o,total:a}=this.props;this.props.totalpage=Math.ceil(a/o),this.update();break;case"simple":this.props.simple=!0}}};
 
 if(!customElements.get('wc-pager')){
   customElements.define('wc-pager', Pager)

src/lib/request/lib/format.js

@@ -1,225 +1 @@
-/**
+"use strict";function serialize(e,t,r){let o;if(Array.isArray(t))t.forEach(function(t,a){o=e?`${e}[${Array.isArray(t)?a:""}]`:a,"object"==typeof t?serialize(o,t,r):r(o,t)});else for(let a in t)o=e?`${e}[${a}]`:a,"object"==typeof t[a]?serialize(o,t[a],r):r(o,t[a])}const toS=Object.prototype.toString,doc=window.document,encode=encodeURIComponent,decode=decodeURIComponent,TagHooks=function(){this.option=doc.createElement("select"),this.thead=doc.createElement("table"),this.td=doc.createElement("tr"),this.area=doc.createElement("map"),this.tr=doc.createElement("tbody"),this.col=doc.createElement("colgroup"),this.legend=doc.createElement("fieldset"),this._default=doc.createElement("div"),this.g=doc.createElementNS("http://www.w3.org/2000/svg","svg"),this.optgroup=this.option,this.tbody=this.tfoot=this.colgroup=this.caption=this.thead,this.th=this.td,"circle,defs,ellipse,image,line,path,polygon,polyline,rect,symbol,text,use".replace(/,/g,e=>{this[e]=this.g})},Helper={tagHooks:new TagHooks,rtagName:/<([\w:]+)/,rxhtml:/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,scriptTypes:{"text/javascript":1,"text/ecmascript":1,"application/ecmascript":1,"application/javascript":1},rhtml:/<|&#?\w+;/};export default{parseJS:function(code){if(code=(code+"").trim(),code)if(1===code.indexOf("use strict")){let e=doc.createElement("script");e.text=code,doc.head.appendChild(e).parentNode.removeChild(e)}else eval(code)},parseXML:function(e,t,r){try{t=(new DOMParser).parseFromString(e,"text/xml")}catch(e){t=void 0}return t&&t.documentElement&&!t.getElementsByTagName("parsererror").length||console.error("Invalid XML: "+e),t},parseHTML:function(e){let t=doc.createDocumentFragment().cloneNode(!1);if("string"!=typeof e)return t;if(!Helper.rhtml.test(e))return t.appendChild(document.createTextNode(e)),t;e=e.replace(Helper.rxhtml,"<$1></$2>").trim();let r=(Helper.rtagName.exec(e)||["",""])[1].toLowerCase(),o=Helper.tagHooks[r]||Helper.tagHooks._default,a=null;o.innerHTML=e;let i=o.getElementsByTagName("script");if(i.length)for(let e,t=0;e=i[t++];)if(Helper.scriptTypes[e.type]){let t=doc.createElement("script").cloneNode(!1);e.attributes.forEach(function(e){t.setAttribute(e.name,e.value)}),t.text=e.text,e.parentNode.replaceChild(t,e)}for(;a=o.firstChild;)t.appendChild(a);return t},parseForm:function(e){let t={},r=!1;for(let o,a=0;o=e.elements[a++];)switch(o.type){case"select-one":case"select-multiple":if(o.name.length&&!o.disabled)for(let e,r=0;e=o.options[r++];)e.selected&&(t[o.name]=e.value||e.text);break;case"file":o.name.length&&!o.disabled&&(t[o.name]=o.files[0],r=!0);break;case void 0:case"submit":case"reset":case"button":break;case"radio":case"checkbox":if(!o.checked)break;default:o.name.length&&!o.disabled&&(t[o.name]=o.value)}return r?this.mkFormData(t):t},mkFormData(e){let t=new FormData;for(let r in e){let o=e[r];Array.isArray(o)?o.forEach(function(e){t.append(r+"[]",e)}):t.append(r,e[r])}return t},param:function(e){if(!e||"string"==typeof e||"number"==typeof e)return e;let t=[];return"object"==typeof e&&serialize("",e,function(e,r){/native code/.test(r)||(r="function"==typeof r?r():r,r="[object File]"!==toS.call(r)?encode(r):r,t.push(encode(e)+"="+r))}),t.join("&")}};
- *
- * @authors yutent (yutent@doui.cc)
- * @date    2016-11-26 16:35:45
- *
- */
-
-'use strict'
-
-function serialize(p, obj, q) {
-  let k
-  if (Array.isArray(obj)) {
-    obj.forEach(function(it, i) {
-      k = p ? `${p}[${Array.isArray(it) ? i : ''}]` : i
-      // k = p ? p + '[' + (Array.isArray(it) ? i : '') + ']' : i
-      if (typeof it === 'object') {
-        serialize(k, it, q)
-      } else {
-        q(k, it)
-      }
-    })
-  } else {
-    for (let i in obj) {
-      k = p ? `${p}[${i}]` : i
-      // k = p ? p + '[' + i + ']' : i
-      if (typeof obj[i] === 'object') {
-        serialize(k, obj[i], q)
-      } else {
-        q(k, obj[i])
-      }
-    }
-  }
-}
-
-const toS = Object.prototype.toString
-const doc = window.document
-const encode = encodeURIComponent
-const decode = decodeURIComponent
-
-const TagHooks = function() {
-  this.option = doc.createElement('select')
-  this.thead = doc.createElement('table')
-  this.td = doc.createElement('tr')
-  this.area = doc.createElement('map')
-  this.tr = doc.createElement('tbody')
-  this.col = doc.createElement('colgroup')
-  this.legend = doc.createElement('fieldset')
-  this._default = doc.createElement('div')
-  this.g = doc.createElementNS('http://www.w3.org/2000/svg', 'svg')
-
-  this.optgroup = this.option
-  this.tbody = this.tfoot = this.colgroup = this.caption = this.thead
-  this.th = this.td
-
-  'circle,defs,ellipse,image,line,path,polygon,polyline,rect,symbol,text,use'.replace(
-    /,/g,
-    m => {
-      this[m] = this.g //处理svg
-    }
-  )
-}
-
-const Helper = {
-  tagHooks: new TagHooks(),
-  rtagName: /<([\w:]+)/,
-  rxhtml: /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,
-  scriptTypes: {
-    'text/javascript': 1,
-    'text/ecmascript': 1,
-    'application/ecmascript': 1,
-    'application/javascript': 1
-  },
-  rhtml: /<|&#?\w+;/
-}
-
-export default {
-  parseJS: function(code) {
-    code = (code + '').trim()
-    if (code) {
-      if (code.indexOf('use strict') === 1) {
-        let script = doc.createElement('script')
-        script.text = code
-        doc.head.appendChild(script).parentNode.removeChild(script)
-      } else {
-        eval(code)
-      }
-    }
-  },
-  parseXML: function(data, xml, tmp) {
-    try {
-      tmp = new DOMParser()
-      xml = tmp.parseFromString(data, 'text/xml')
-    } catch (e) {
-      xml = void 0
-    }
-
-    if (
-      !xml ||
-      !xml.documentElement ||
-      xml.getElementsByTagName('parsererror').length
-    ) {
-      console.error('Invalid XML: ' + data)
-    }
-    return xml
-  },
-  parseHTML: function(html) {
-    let fragment = doc.createDocumentFragment().cloneNode(false)
-
-    if (typeof html !== 'string') {
-      return fragment
-    }
-
-    if (!Helper.rhtml.test(html)) {
-      fragment.appendChild(document.createTextNode(html))
-      return fragment
-    }
-
-    html = html.replace(Helper.rxhtml, '<$1></$2>').trim()
-    let tag = (Helper.rtagName.exec(html) || ['', ''])[1].toLowerCase()
-    let wrap = Helper.tagHooks[tag] || Helper.tagHooks._default
-    let firstChild = null
-
-    //使用innerHTML生成的script节点不会触发请求与执行text属性
-    wrap.innerHTML = html
-    let script = wrap.getElementsByTagName('script')
-    if (script.length) {
-      for (let i = 0, el; (el = script[i++]); ) {
-        if (Helper.scriptTypes[el.type]) {
-          let tmp = doc.createElement('script').cloneNode(false)
-          el.attributes.forEach(function(attr) {
-            tmp.setAttribute(attr.name, attr.value)
-          })
-          tmp.text = el.text
-          el.parentNode.replaceChild(tmp, el)
-        }
-      }
-    }
-
-    while ((firstChild = wrap.firstChild)) {
-      fragment.appendChild(firstChild)
-    }
-
-    return fragment
-  },
-  parseForm: function(form) {
-    let data = {}
-    let hasAttach = false
-    for (let i = 0, field; (field = form.elements[i++]); ) {
-      switch (field.type) {
-        case 'select-one':
-        case 'select-multiple':
-          if (field.name.length && !field.disabled) {
-            for (let j = 0, opt; (opt = field.options[j++]); ) {
-              if (opt.selected) {
-                data[field.name] = opt.value || opt.text
-              }
-            }
-          }
-          break
-        case 'file':
-          if (field.name.length && !field.disabled) {
-            data[field.name] = field.files[0]
-            hasAttach = true
-          }
-          break
-        case undefined:
-        case 'submit':
-        case 'reset':
-        case 'button':
-          break //按钮啥的, 直接忽略
-        case 'radio':
-        case 'checkbox':
-          // 只处理选中的
-          if (!field.checked) break
-        default:
-          if (field.name.length && !field.disabled) {
-            data[field.name] = field.value
-          }
-      }
-    }
-    // 如果有附件, 改为FormData
-    if (hasAttach) {
-      return this.mkFormData(data)
-    } else {
-      return data
-    }
-  },
-  mkFormData(data) {
-    let form = new FormData()
-    for (let i in data) {
-      let el = data[i]
-      if (Array.isArray(el)) {
-        el.forEach(function(it) {
-          form.append(i + '[]', it)
-        })
-      } else {
-        form.append(i, data[i])
-      }
-    }
-    return form
-  },
-  param: function(obj) {
-    if (!obj || typeof obj === 'string' || typeof obj === 'number') {
-      return obj
-    }
-
-    let arr = []
-    let q = function(k, v) {
-      if (/native code/.test(v)) {
-        return
-      }
-
-      v = typeof v === 'function' ? v() : v
-      v = toS.call(v) !== '[object File]' ? encode(v) : v
-
-      arr.push(encode(k) + '=' + v)
-    }
-
-    if (typeof obj === 'object') {
-      serialize('', obj, q)
-    }
-
-    return arr.join('&')
-  }
-}

src/lib/scroll/index.js

@@ -1,14 +1,14 @@
 /**
  *
  * @authors yutent (yutent@doui.cc)
- * @date    2019-09-07 23:35:03
+ * @date    2019-11-05 23:34:04
  * @version v2.0.1
  * 
  */
 
 'use strict'
 
-import{bind,ebind,unbind}from"../utils.js";const IS_FF=!!window.sidebar;export default class Scroll extends HTMLElement{static get observedAttributes(){return[]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{},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{overflow:hidden;position:relative;display:flex;width:100%}:host .container{overflow:hidden;position:relative;width:100%;height:100%}.is-horizontal,.is-vertical{visibility:hidden;position:absolute;z-index:10240;opacity:0;transition:opacity 0.3s linear, visibility 0.3s linear}.is-horizontal .thumb,.is-vertical .thumb{display:block;border-radius:3px;background:rgba(44,47,53,0.25);cursor:default}.is-horizontal .thumb:hover,.is-vertical .thumb:hover{background:rgba(44,47,53,0.5)}.is-horizontal{left:0;bottom:1px;width:100%;height:6px}.is-horizontal .thumb{width:0;height:6px}.is-vertical{top:0;right:1px;width:6px;height:100%}.is-vertical .thumb{width:6px;height:0}:host(:hover) .is-horizontal,:host(:hover) .is-vertical{visibility:visible;opacity:1}\n</style> <div class="container"><slot></slot></div> <div class="is-horizontal"><span class="thumb"></span></div> <div class="is-vertical"><span class="thumb"></span></div> ',this.__BOX__=this.root.children[1],this.__X__=this.root.children[2].children[0],this.__Y__=this.root.children[3].children[0]}get scrollTop(){return this.__BOX__.scrollTop}set scrollTop(t){if((t=+t)==t){var{sh:s,oh:i,yh:e}=this.props;this.__BOX__.scrollTop=t;var o=this.__BOX__.scrollTop/(s-i)*(i-e);this.props.thumbY=o,this.__Y__.style.transform=`translateY(${o}px)`}}get scrollLeft(){return this.__BOX__.scrollLeft}set scrollLeft(t){if(n=+n,n==n){var{sw:s,ow:i,xw:e}=this.props;this.__BOX__.scrollLeft=n;var o=this.__BOX__.scrollLeft/(s-i)*(i-e);this.props.thumbX=o,this.__X__.style.transform=`translateX(${o}px)`}}get scrollHeight(){return this.__BOX__.scrollHeight}_fetchScrollX(t){var{sw:s,ow:i,xw:e}=this.props;return t<0?t=0:t>i-e&&(t=i-e),this.__BOX__.scrollLeft=t/(i-e)*(s-i),this.__X__.style.transform=`translateX(${t}px)`,t}_fetchScrollY(t){var{sh:s,oh:i,yh:e}=this.props;return t<0?t=0:t>i-e&&(t=i-e),this.__BOX__.scrollTop=t/(i-e)*(s-i),this.__Y__.style.transform=`translateY(${t}px)`,t}connectedCallback(){this._initFn=bind(this.__BOX__,"mouseenter",t=>{var s=this.__BOX__.offsetWidth,i=this.__BOX__.scrollWidth,e=this.__BOX__.offsetHeight,o=this.__BOX__.scrollHeight,r=e*e/o>>0,h=s*s/i>>0;r<50&&(r=50),h<50&&(h=50),h===s&&(h=0),r===e&&(r=0),this.props.oh=e,this.props.sh=o,this.props.ow=s,this.props.sw=i,this.props.yh=r,this.props.xw=h,this.__X__.style.width=h+"px",this.__Y__.style.height=r+"px"}),this._wheelFn=ebind(this.__BOX__,"wheel",t=>{t.preventDefault();var{sh:s,oh:i,yh:e,sw:o,ow:r,xw:h}=this.props;if(h||e){var l,_;if(IS_FF)l=t.deltaMode?10*t.deltaX:t.deltaX,_=t.deltaMode?10*t.deltaY:t.deltaY;else{var n=Math.abs(t.wheelDelta);n<120?(l=t.deltaX,_=t.deltaY):(l=t.deltaX/(n/120),_=t.deltaY/(n/120))}if(this.__BOX__.scrollTop+=_,this.__BOX__.scrollLeft+=l,h){var a=this.__BOX__.scrollLeft/(o-r)*(r-h);this.props.thumbX=a,this.__X__.style.transform=`translateX(${a}px)`}if(e){var p=this.__BOX__.scrollTop/(s-i)*(i-e);this.props.thumbY=p,this.__Y__.style.transform=`translateY(${p}px)`}}});var t,s,i,e,o=o=>{var{thumbY:r,thumbX:h}=this.props;null!==t&&(i=this._fetchScrollX(h+o.pageX-t)),null!==s&&(e=this._fetchScrollY(r+o.pageY-s))},r=h=>{t=null,s=null,this.props.thumbX=i,this.props.thumbY=e,unbind(document,"mousemove",o),unbind(document,"mouseup",r)};bind(this.__Y__,"mousedown",t=>{s=t.pageY,this.props.thumbY||(this.props.thumbY=0),bind(document,"mousemove",o),bind(document,"mouseup",r)}),bind(this.__X__,"mousedown",s=>{t=s.pageX,this.props.thumbX||(this.props.thumbX=0),bind(document,"mousemove",o),bind(document,"mouseup",r)})}disconnectedCallback(){unbind(this.__BOX__,"mouseenter",this._initFn),unbind(this.__BOX__,"wheel",this._wheelFn)}};
+import{bind,ebind,unbind}from"../utils.js";const IS_FF=!!window.sidebar;export default class Scroll extends HTMLElement{static get observedAttributes(){return[]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{},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{overflow:hidden;position:relative;display:flex;width:100%}:host .container{overflow:hidden;position:relative;width:100%;height:100%}.is-horizontal,.is-vertical{visibility:hidden;position:absolute;z-index:10240;opacity:0;transition:opacity 0.3s linear, visibility 0.3s linear}.is-horizontal .thumb,.is-vertical .thumb{display:block;border-radius:3px;background:rgba(44,47,53,0.25);cursor:default}.is-horizontal .thumb:hover,.is-vertical .thumb:hover{background:rgba(44,47,53,0.5)}.is-horizontal{left:0;bottom:1px;width:100%;height:6px}.is-horizontal .thumb{width:0;height:6px}.is-vertical{top:0;right:1px;width:6px;height:100%}.is-vertical .thumb{width:6px;height:0}:host(:hover) .is-horizontal,:host(:hover) .is-vertical{visibility:visible;opacity:1}\n</style> <div class="container"><slot></slot></div> <div class="is-horizontal"><span class="thumb"></span></div> <div class="is-vertical"><span class="thumb"></span></div> ',this.__BOX__=this.root.children[1],this.__X__=this.root.children[2].children[0],this.__Y__=this.root.children[3].children[0]}get scrollTop(){return this.__BOX__.scrollTop}set scrollTop(t){if((t=+t)==t){var{sh:s,oh:i,yh:e}=this.props;this.__BOX__.scrollTop=t;var o=this.__BOX__.scrollTop/(s-i)*(i-e);this.props.thumbY=o,this.__Y__.style.transform=`translateY(${o}px)`}}get scrollLeft(){return this.__BOX__.scrollLeft}set scrollLeft(t){if(n=+n,n==n){var{sw:s,ow:i,xw:e}=this.props;this.__BOX__.scrollLeft=n;var o=this.__BOX__.scrollLeft/(s-i)*(i-e);this.props.thumbX=o,this.__X__.style.transform=`translateX(${o}px)`}}get scrollHeight(){return this.__BOX__.scrollHeight}_fetchScrollX(t){var{sw:s,ow:i,xw:e}=this.props;return t<0?t=0:t>i-e&&(t=i-e),this.__BOX__.scrollLeft=t/(i-e)*(s-i),this.__X__.style.transform=`translateX(${t}px)`,t}_fetchScrollY(t){var{sh:s,oh:i,yh:e}=this.props;return t<0?t=0:t>i-e&&(t=i-e),this.__BOX__.scrollTop=t/(i-e)*(s-i),this.__Y__.style.transform=`translateY(${t}px)`,t}connectedCallback(){this._initFn=bind(this.__BOX__,"mouseenter",t=>{var s=this.__BOX__.offsetWidth,i=this.__BOX__.scrollWidth,e=this.__BOX__.offsetHeight,o=this.__BOX__.scrollHeight,r=e*e/o>>0,h=s*s/i>>0;r<50&&(r=50),h<50&&(h=50),h===s&&(h=0),r===e&&(r=0),this.props.oh=e,this.props.sh=o,this.props.ow=s,this.props.sw=i,this.props.yh=r,this.props.xw=h,this.__X__.style.width=h+"px",this.__Y__.style.height=r+"px"}),this._wheelFn=ebind(this.__BOX__,"wheel",t=>{t.preventDefault();var{sh:s,oh:i,yh:e,sw:o,ow:r,xw:h}=this.props;if(h||e){var _,l;if(IS_FF)_=t.deltaMode?10*t.deltaX:t.deltaX,l=t.deltaMode?10*t.deltaY:t.deltaY;else{var n=Math.abs(t.wheelDelta);n<120?(_=t.deltaX,l=t.deltaY):(_=t.deltaX/(n/120),l=t.deltaY/(n/120))}if(this.__BOX__.scrollTop+=l,this.__BOX__.scrollLeft+=_,h){var a=this.__BOX__.scrollLeft/(o-r)*(r-h);this.props.thumbX=a,this.__X__.style.transform=`translateX(${a}px)`}if(e){var p=this.__BOX__.scrollTop/(s-i)*(i-e);this.props.thumbY=p,this.__Y__.style.transform=`translateY(${p}px)`}}});var t,s,i,e,o=o=>{var{thumbY:r,thumbX:h}=this.props;null!==t&&(i=this._fetchScrollX(h+o.pageX-t)),null!==s&&(e=this._fetchScrollY(r+o.pageY-s))},r=h=>{t=null,s=null,this.props.thumbX=i,this.props.thumbY=e,unbind(document,"mousemove",o),unbind(document,"mouseup",r)};bind(this.__Y__,"mousedown",t=>{s=t.pageY,this.props.thumbY||(this.props.thumbY=0),bind(document,"mousemove",o),bind(document,"mouseup",r)}),bind(this.__X__,"mousedown",s=>{t=s.pageX,this.props.thumbX||(this.props.thumbX=0),bind(document,"mousemove",o),bind(document,"mouseup",r)}),this.__observer=new MutationObserver(this._initFn),this.__observer.observe(this,{childList:!0,subtree:!0,characterData:!0})}disconnectedCallback(){this.__observer.disconnect(),unbind(this.__BOX__,"mouseenter",this._initFn),unbind(this.__BOX__,"wheel",this._wheelFn)}};
 
 if(!customElements.get('wc-scroll')){
   customElements.define('wc-scroll', Scroll)

src/tools/windows.js

@@ -15,7 +15,7 @@ exports.createMainWindow = function(icon) {
   // 创建浏览器窗口
   let win = new BrowserWindow({
     title: 'sonist',
-    width: 1024,
+    width: 1000,
     height: 640,
     frame: false,
     resizable: false,
@@ -69,7 +69,7 @@ exports.createErrorWindow = function() {
 exports.createDesktopLrcWindow = function(screen) {
   let win = new BrowserWindow({
     title: '',
-    width: 1024,
+    width: 1000,
     height: 100,
     frame: false,
     resizable: false,