一大波更新

src/css/app.scss

@@ -245,7 +245,8 @@
 
     .ctrl-box {
       display:flex;
-      height:46px;
+      align-items:center;
+      height:42px;
 
       .holder {
         flex:1;
@@ -277,31 +278,51 @@
         align-items:center;
         justify-content:space-between;
         width:120px;
-        height:38px;
+        height:42px;
         margin-left:32px;
-        text-align:center;
 
         .item {
-          width:28px;height:28px;
-          line-height:28px;
-          border-radius:50%;
-          background:rgba(255, 255, 255, .1);
-          fill: currentColor;
+          width:22px;height:22px;
+          background-repeat:no-repeat;
+          background-size:cover;
+          transition:background .1s ease-in-out;
           cursor:pointer;
-          transition:color .1s ease-in-out;
+
+          &.prev {
+            background-image:url(/images/ctrl/prev.png);
+            &:hover,&:active {
+              background-image:url(/images/ctrl/prev_a.png);
+            }
+          }
+
+          &.on,&.off {
+            width:42px;height:42px;
+          }
 
           &.on {
-            width:36px;height:36px;
-            line-height:36px;
-            font-size:16px;
+            background-image:url(/images/ctrl/play.png);
+            animation:round 2s linear infinite;
+
+            &:hover,&:active {
+              background-image:url(/images/ctrl/play_a.png);
+            }
           }
 
-          &:hover {
-            color: #58ffdf;
+          &.off {
+            background-image:url(/images/ctrl/pause.png);
+            &:hover,&:active {
+              background-image:url(/images/ctrl/pause_a.png);
             }
-          &:active {
-            color: #46d1b8;
           }
+
+          &.next {
+            background-image:url(/images/ctrl/next.png);
+            &:hover,&:active {
+              background-image:url(/images/ctrl/next_a.png);
+            }
+          }
+
+         
         }
       }
 
@@ -310,22 +331,49 @@
         align-items:center;
         justify-content:space-between;
         width:64px;
-        height:38px;
+        height:22px;
         margin-right:16px;
-        font-size:12px;
 
         .item {
-          width:28px;height:28px;
-          line-height:28px;
-          fill: currentColor;
-          transition:color .1s ease-in-out;
+          width:22px;height:22px;
+          background-repeat:no-repeat;
+          background-size:cover;
+          transition:background .1s ease-in-out;
           cursor:pointer;
 
-          &:hover {
-            color: #58ffdf;
+          &.volume {
+            background-image:url(/images/ctrl/volume.png);
+            &:hover,&:active {
+              background-image:url(/images/ctrl/volume_a.png);
+            }
+          }
+
+          &.mute {
+            background-image:url(/images/ctrl/mute.png);
+            &:hover,&:active {
+              background-image:url(/images/ctrl/mute_a.png);
+            }
+          }
+
+          &.single {
+            background-image:url(/images/ctrl/single.png);
+            &:hover,&:active {
+              background-image:url(/images/ctrl/single_a.png);
+            }
+          }
+
+          &.all {
+            background-image:url(/images/ctrl/all.png);
+            &:hover,&:active {
+              background-image:url(/images/ctrl/all_a.png);
+            }
+          }
+
+          &.rand {
+            background-image:url(/images/ctrl/rand.png);
+            &:hover,&:active {
+              background-image:url(/images/ctrl/rand_a.png);
             }
-          &:active {
-            color: #46d1b8;
           }
         }
       }
@@ -335,4 +383,11 @@
 
 }
 
-
+@keyframes round {
+  from {
+    transform:rotate(0);
+  }
+  to {
+    transform:rotate(360deg);
+  }
+}

src/images/ctrl/next.jsx

@@ -1,5 +0,0 @@
-;<>
-  <svg viewBox='0 0 120 120'>
-    <path d='M41,38c0.4,0,0.7,0.1,1.1,0.3l32,20c0.9,0.6,1.2,1.8,0.6,2.8c-0.2,0.3-0.4,0.5-0.6,0.6l-32,20c-0.9,0.6-2.2,0.3-2.8-0.6C39.1,80.8,39,80.4,39,80V40C39,38.9,39.9,38,41,38z M79,40L79,40c1.7,0,3,1.3,3,3v34c0,1.7-1.3,3-3,3l0,0c-1.7,0-3-1.3-3-3V43C76,41.3,77.3,40,79,40z' />
-  </svg>
-</>

src/images/ctrl/pause.jsx

@@ -1,5 +0,0 @@
-;<>
-  <svg viewBox='0 0 120 120'>
-    <path d='M46,38c0.4,0,0.7,0.1,1.1,0.3l32,20c0.9,0.6,1.2,1.8,0.6,2.8c-0.2,0.3-0.4,0.5-0.6,0.6l-32,20c-0.9,0.6-2.2,0.3-2.8-0.6C44.1,80.8,44,80.4,44,80V40C44,38.9,44.9,38,46,38z' />
-  </svg>
-</>

src/images/ctrl/play.jsx

@@ -1,8 +0,0 @@
-;<>
-  <svg viewBox='0 0 120 120'>
-    <g fill='#ffffff'>
-      <rect width='8' height='50' x='45' y='35' rx='4' />
-      <rect width='8' height='50' x='67' y='35' rx='4' />
-    </g>
-  </svg>
-</>

src/images/ctrl/prev.jsx

@@ -1,5 +0,0 @@
-;<>
-  <svg viewBox='0 0 120 120'>
-    <path d='M80,82c-0.4,0-0.7-0.1-1.1-0.3l-32-20c-0.9-0.6-1.2-1.8-0.6-2.8c0.2-0.3,0.4-0.5,0.6-0.6l32-20c0.9-0.6,2.2-0.3,2.8,0.6c0.2,0.3,0.3,0.7,0.3,1.1v40C82,81.1,81.1,82,80,82z M42,80L42,80c-1.7,0-3-1.3-3-3V43c0-1.7,1.3-3,3-3l0,0c1.7,0,3,1.3,3,3v34C45,78.7,43.7,80,42,80z' />
-  </svg>
-</>

src/images/ctrl/prev.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
-</style>
-<path class="st0" d="M78,36.5c-0.4,0-0.7,0.1-1.1,0.3L42.4,58.3c-0.9,0.6-1.2,1.8-0.6,2.8c0.2,0.3,0.4,0.5,0.6,0.6l34.5,21.5
-	c0.9,0.6,2.2,0.3,2.8-0.6c0.2-0.3,0.3-0.7,0.3-1.1v-43C80,37.4,79.1,36.5,78,36.5z"/>
-<path class="st0" d="M43,46h26c1.7,0,3,1.3,3,3v22c0,1.7-1.3,3-3,3H43c-1.7,0-3-1.3-3-3V49C40,47.3,41.3,46,43,46z"/>
-</svg>

src/index.html

@@ -9,7 +9,7 @@
 </head>
 <body class="noselect">
 
-<div class="app">
+<div class="app" anot="app">
 
   <div class="title-bar app-drag">
     <div class="btn-box app-nodrag focus">
@@ -141,38 +141,22 @@
       </div>
 
       <div class="play-btn">
-        <a class="item prev">
-          <svg viewBox='0 0 120 120'>
-            <path d="M80,82c-0.4,0-0.7-0.1-1.1-0.3l-32-20c-0.9-0.6-1.2-1.8-0.6-2.8c0.2-0.3,0.4-0.5,0.6-0.6l32-20c0.9-0.6,2.2-0.3,2.8,0.6c0.2,0.3,0.3,0.7,0.3,1.1v40C82,81.1,81.1,82,80,82z M42,80L42,80c-1.7,0-3-1.3-3-3V43c0-1.7,1.3-3,3-3l0,0c1.7,0,3,1.3,3,3v34C45,78.7,43.7,80,42,80z"/>
-          </svg>
-        </a>
-        <a class="item on">
-          <svg viewBox="0 0 120 120">
-            <rect width="8" height="50" x="45" y="35" rx="4"/>
-            <rect width="8" height="50" x="67" y="35" rx="4"/>
-          </svg>
-        </a>
-        <a class="item next">
-          <svg viewBox='0 0 120 120'>
-            <path d="M41,38c0.4,0,0.7,0.1,1.1,0.3l32,20c0.9,0.6,1.2,1.8,0.6,2.8c-0.2,0.3-0.4,0.5-0.6,0.6l-32,20c-0.9,0.6-2.2,0.3-2.8-0.6C39.1,80.8,39,80.4,39,80V40C39,38.9,39.9,38,41,38z M79,40L79,40c1.7,0,3,1.3,3,3v34c0,1.7-1.3,3-3,3l0,0c-1.7,0-3-1.3-3-3V43C76,41.3,77.3,40,79,40z"/>
-          </svg>
-        </a>
+        <a class="item prev"></a>
+        <a class="item" :class="{on: isplaying, off: !isplaying}" @click="play"></a>
+        <a class="item next"></a>
       </div>
 
       <div class="holder"></div>
 
       <div class="play-action">
-        <a class="item mode">
-          <svg viewBox='0 0 120 120'>
-            <path d="M77,68c0.4,0,0.7,0.1,1.1,0.3l13.1,8.2c0.9,0.6,1.2,1.8,0.6,2.8c-0.2,0.3-0.4,0.5-0.6,0.6l-13.1,8.2c-0.9,0.6-2.2,0.3-2.8-0.6c-0.2-0.3-0.3-0.7-0.3-1.1V70C75,68.9,75.9,68,77,68z M34,55L34,55c1.7,0,3,1.3,3,3v20c0,1.7-1.3,3-3,3l0,0c-1.7,0-3-1.3-3-3V58C31,56.3,32.3,55,34,55z M34,75h53c1.7,0,3,1.3,3,3l0,0c0,1.7-1.3,3-3,3H34c-1.7,0-3-1.3-3-3l0,0C31,76.3,32.3,75,34,75z M44,52c-0.4,0-0.7-0.1-1.1-0.3l-13.1-8.2c-0.9-0.6-1.2-1.8-0.6-2.8c0.2-0.3,0.4-0.5,0.6-0.6l13.1-8.2c0.9-0.6,2.2-0.3,2.8,0.6c0.2,0.3,0.3,0.7,0.3,1.1V50C46,51.1,45.1,52,44,52z M89,65L89,65c-1.7,0-3-1.3-3-3V42c0-1.7,1.3-3,3-3l0,0c1.7,0,3,1.3,3,3v20C92,63.7,90.7,65,89,65z M89,45H36c-1.7,0-3-1.3-3-3l0,0c0-1.7,1.3-3,3-3h53c1.7,0,3,1.3,3,3l0,0C92,43.7,90.7,45,89,45z"/>
-          </svg>
-        </a>
-        <a class="item volume">
-          <svg viewBox='0 0 120 120'>
-            <path d="M78,36.5c-0.4,0-0.7,0.1-1.1,0.3L42.4,58.3c-0.9,0.6-1.2,1.8-0.6,2.8c0.2,0.3,0.4,0.5,0.6,0.6l34.5,21.5c0.9,0.6,2.2,0.3,2.8-0.6c0.2-0.3,0.3-0.7,0.3-1.1v-43C80,37.4,79.1,36.5,78,36.5z"/>
-            <path d="M43,46h26c1.7,0,3,1.3,3,3v22c0,1.7-1.3,3-3,3H43c-1.7,0-3-1.3-3-3V49C40,47.3,41.3,46,43,46z"/>
-          </svg>
+        <a class="item" :class="{
+            all: playmode === 1,
+            single: playmode === 2,
+            rand: playmode === 3,
+          }"
+          @click="switchMode">
         </a>
+        <a class="item" :class="{mute: mute, volume: !mute}" @click="toggleMute"></a>
       </div>
     </section>
   </div>

src/js/api.js

@@ -8,6 +8,10 @@
 
 import request from '/lib/request/index.js'
 
+// `http://lyrics.kugou.com/search?client=pc&duration=188000&keyword=%E6%98%93%E7%83%8A%E5%8D%83%E7%8E%BA%20-%20%E4%BD%A0%E6%9B%BE%E6%98%AF%E5%B0%91%E5%B9%B4%20%28Live%29&man=no&ver=1`
+
+// `http://lyrics.kugou.com/download?ver=1&client=pc&fmt=lrc&charset=utf8&accesskey=2128A0ED9B2F6B34C3AE23EA7ACC46A7&id=43066968`
+
 const log = console.log
 
 const BASE_API_URI = 'http://mobilecdnbj.kugou.com'

src/js/app.js

@@ -4,4 +4,29 @@
  * @date 2020/11/16 16:21:52
  */
 
+import Anot from '/js/lib/anot.js'
 import '/js/lib/scroll/index.js'
+
+Anot({
+  $id: 'app',
+  state: {
+    isplaying: true,
+    playmode: 1,
+    mute: false
+  },
+  methods: {
+    play() {
+      this.isplaying = !this.isplaying
+    },
+    switchMode() {
+      var n = this.playmode + 1
+      if (n > 3) {
+        n = 1
+      }
+      this.playmode = n
+    },
+    toggleMute() {
+      this.mute = !this.mute
+    }
+  }
+})

src/js/lib/avatar/index.js

@@ -1,15 +0,0 @@
-/**
- *
- * @authors yutent (yutent@doui.cc)
- * @date    2019-09-01 23:16:06
- * @version v2.0.1
- * 
- */
-
-'use strict'
-
-const COLORS=["#3fc2a7","#58d68d","#ac61ce","#66b1ff","#ff5061","#ffb618","#62778d"],COLOR_NAME=["teal","green","purple","blue","red","orange","dark"];var canvas=document.createElement("canvas"),ctx=canvas.getContext("2d"),size=500;function sum(e){var t=0;return e.forEach(e=>t+=e),t}function createImage(e){if(!e)return"./def.jpg";var t,s=COLORS[parseInt(e.slice(-1),16)%7],r=e.slice(0,8).split(""),i=e.slice(8,16).split(""),o=e.slice(16,24).split(""),a=size/10;r=r.map(e=>(e=parseInt(e,16))%8),i=i.map(e=>(e=parseInt(e,16))%4),o=o.map(e=>(e=parseInt(e,16))%4),t=sum(r)>32?s:"#fff",ctx.fillStyle=s,ctx.fillRect(0,0,size,size);for(var c=1;c<9;c++){var l=r[c-1],n=i[c-1],h=o[c-1];l+n>8&&(l=8-n),ctx.fillStyle="#fff",ctx.fillRect((n+1)*a,c*a,l*a,a),ctx.fillStyle="#fff",ctx.fillRect((9-n-l)*a,c*a,l*a,a),ctx.fillStyle=t,ctx.fillRect((h+1)*a,c*a,a,a),ctx.fillStyle=t,ctx.fillRect((8-h)*a,c*a,a,a)}return canvas.toDataURL("image/webp")}canvas.width=size,canvas.height=size;export default class Avatar extends HTMLElement{static get observedAttributes(){return["hash","src","fit"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{hash:"",src:"",fit:""},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;display:flex;align-items:center;justify-content:center;width:var(--size, 32px);height:var(--size, 32px);line-height:1;font-size:var(--size, 32px);border-radius:4px;color:#fff;user-select:none;-moz-user-select:none}:host img{display:none;width:100%;height:100%}:host slot{display:block;transform:scale(0.8)}:host([src]) slot,:host([hash]) slot{display:none}:host([src]) img,:host([hash]) img{display:block}:host([color='red']){background:#ff5061}:host([color='teal']){background:#3fc2a7}:host([color='purple']){background:#ac61ce}:host([color='green']){background:#58d68d}:host([color='orange']){background:#ffb618}:host([color='dark']){background:#62778d}:host([color='blue']){background:#66b1ff}:host([size='large']){width:50px;height:50px;font-size:36px}:host([size='medium']){width:40px;height:40px;font-size:28px}:host([size='mini']){width:24px;height:24px;font-size:16px}:host([circle]){border-radius:50%}\n</style> <slot></slot> <img /> ",this.__IMG__=this.root.lastElementChild;var e=this.textContent.slice(0,1);this.setAttribute("color",COLOR_NAME[e.charCodeAt(0)%7]),this.textContent=e}attributeChangedCallback(e,t,s){if(t!==s)switch(e){case"src":this.removeAttribute("hash"),this.__IMG__.src=s||"./def.jpg";break;case"hash":this.removeAttribute("src"),this.__IMG__.src=createImage(s);break;case"fit":s&&(this.__IMG__.style["object-fit"]=s)}}};
-
-if(!customElements.get('wc-avatar')){
-  customElements.define('wc-avatar', Avatar)
-}

src/js/lib/drag/core.js

@@ -1 +1 @@
-"use strict";import{bind,unbind}from"../utils.js";const DEF_OPT={axis:"",limit:!1,overflow:!0};export default class Drag{constructor(t){this.$elem=t,this._init()}_init(){this.$elem.style.transform="";var{x:t,y:s}=this.$elem.getBoundingClientRect();this.pos={x:t,y:s,_x:0,_y:0}}by(t,s={}){return this.$drag=t,this.opt=Object.assign(Object.create(null),DEF_OPT,s),!1!==this.opt.limit&&(this.opt.overflow=!1),t.style.cursor="move",this._handleResize=bind(window,"resize",this._init.bind(this)),this._handleMousedown=bind(t,"mousedown",t=>{if(this.disabled)return;var s=this.$elem.getBoundingClientRect();s.x-this.pos._x!==this.pos.x&&(this.pos.x=s.x-this.pos._x),s.y-this.pos._y!==this.pos.y&&(this.pos.y=s.y-this.pos._y);let e=t.pageX,i=t.pageY,o=document.documentElement.clientWidth,n=document.documentElement.clientHeight,h=s.width,d=s.height,p=[0,o-h,n-d,0];if("parent"===this.opt.limit){let t=this.$elem.parentNode.getBoundingClientRect();p=[t.top,t.right-h,t.bottom-d,t.left]}let l=bind(document,"mousemove",t=>{t.preventDefault();let o=t.pageX-e+(s.x-this.pos.x),n=t.pageY-i+(s.y-this.pos.y);"x"===this.opt.axis&&(n=0),"y"===this.opt.axis&&(o=0),!1===this.opt.overflow&&(o<p[3]-this.pos.x?o=p[3]-this.pos.x:o>p[1]-this.pos.x&&(o=p[1]-this.pos.x),n<p[0]-this.pos.y?n=p[0]-this.pos.y:n>p[2]-this.pos.y&&(n=p[2]-this.pos.y)),this.pos._x=o,this.pos._y=n,this.$elem.dispatchEvent(new CustomEvent("dragging",{detail:{offset:{x:this.pos.x+o,y:this.pos.y+n},move:{x:o,y:n}}})),this.$elem.style.transform=`translate(${o}px, ${n}px)`}),m=bind(document,"mouseup",t=>{this.$elem.dispatchEvent(new CustomEvent("dragged",{detail:{offset:{x:this.pos.x+this.pos._x,y:this.pos.y+this.pos._y},move:{x:this.pos._x,y:this.pos._y}}})),unbind(document,"mousemove",l),unbind(document,"mouseup",m)})}),this}on(t,s){if(t&&"function"==typeof s)return bind(this,t,s)}off(t,s){unbind(this,t,s)}destroy(){unbind(window,"resize",this._handleResize),unbind(this.$drag,"mousedown",this._handleMousedown),delete this.$elem,delete this.$drag}};
+import $ from"../utils.js";const DEF_OPT={axis:"",limit:!1,overflow:!0};export default class Drag{constructor(t){this.$elem=t,this._init()}_init(){this.$elem.style.transform="";var{x:t,y:s}=this.$elem.getBoundingClientRect();this.pos={x:t,y:s,_x:0,_y:0}}by(t,s={}){return this.$drag=t,this.opt=Object.assign(Object.create(null),DEF_OPT,s),!1!==this.opt.limit&&(this.opt.overflow=!1),t.style.cursor="move",this._handleResize=$.bind(window,"resize",this._init.bind(this)),this._handleMousedown=$.bind(t,"mousedown",t=>{if(this.disabled)return;var s=this.$elem.getBoundingClientRect();s.x-this.pos._x!==this.pos.x&&(this.pos.x=s.x-this.pos._x),s.y-this.pos._y!==this.pos.y&&(this.pos.y=s.y-this.pos._y);let e=t.pageX,i=t.pageY,o=document.documentElement.clientWidth,n=document.documentElement.clientHeight,h=s.width,p=s.height,d=[0,o-h,n-p,0];if("parent"===this.opt.limit){let t=this.$elem.parentNode.getBoundingClientRect();d=[t.top,t.right-h,t.bottom-p,t.left]}let l=$.bind(document,"mousemove",t=>{t.preventDefault();let o=t.pageX-e+(s.x-this.pos.x),n=t.pageY-i+(s.y-this.pos.y);"x"===this.opt.axis&&(n=0),"y"===this.opt.axis&&(o=0),!1===this.opt.overflow&&(o<d[3]-this.pos.x?o=d[3]-this.pos.x:o>d[1]-this.pos.x&&(o=d[1]-this.pos.x),n<d[0]-this.pos.y?n=d[0]-this.pos.y:n>d[2]-this.pos.y&&(n=d[2]-this.pos.y)),this.pos._x=o,this.pos._y=n,this.$elem.dispatchEvent(new CustomEvent("dragging",{detail:{offset:{x:this.pos.x+o,y:this.pos.y+n},move:{x:o,y:n}}})),this.$elem.style.transform=`translate(${o}px, ${n}px)`}),m=$.bind(document,"mouseup",t=>{this.$elem.dispatchEvent(new CustomEvent("dragged",{detail:{offset:{x:this.pos.x+this.pos._x,y:this.pos.y+this.pos._y},move:{x:this.pos._x,y:this.pos._y}}})),$.unbind(document,"mousemove",l),$.unbind(document,"mouseup",m)})}),this}on(t,s){if(t&&"function"==typeof s)return $.bind(this,t,s)}off(t,s){$.unbind(this,t,s)}destroy(){$.unbind(window,"resize",this._handleResize),$.unbind(this.$drag,"mousedown",this._handleMousedown),delete this.$elem,delete this.$drag}}

src/js/lib/drag/doc.md

@@ -0,0 +1,85 @@
+# 拖拽插件
+> 该插件可以让任意一个元素可以被拖拽,而不需要该元素是否具有定位属性。
+> 使用时,在目标元素上添加`:drag`属性即可以实现拖拽功能。
+
+## 依赖
+> 依赖`Anot`框架
+
+## 浏览器兼容性
++ chrome
++ firefox
++ safari
++ IE10+
+
+
+## 用法
+> 只需要在要拖拽的元素上添加`:drag`即可;
+> 如果要拖拽的元素不是当前元素,只需要给该属性增加一个值为想要拖拽元素的类名或ID。
+> 具体请看示例:
+> **注意:** `拖拽的元素不是本身时,只会往父级一级一级找相匹配的` 
+
+```html
+
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+  * {margin:0;padding:0}
+  .box {width:200px;height:100px;background:#aaa;}
+  .box .handle {width:200px;height:30px;background:#f30;}
+</style>
+</head>
+<body :controller="test">
+
+<div class="box" :drag></div>
+
+<div class="box">
+  <div class="handle" :drag="box"></div>
+</div>
+
+<script>
+import Anot from 'lib/drag/index.js'
+Anot({
+  $id: 'test'
+}) 
+</script>
+
+</body>
+</html>
+
+```
+
+
+## 额外参数
+
+### `data-limit`
+> 用于限制元素的拖动范围,默认没有限制。 可选值为 "window"和"parent", 分别为 "限制在可视区"和"限制在父级元素的范围"
+
+### `data-axis`
+> 用于限制拖动的方向, 默认值为 "xy",即不限制方向。可选值为 "x"和"y", 即只能在"x轴"或"y轴"方向拖动。
+
+### `data-beforedrag`
+> 拖动前的回调,如果有设置回调方法, 则该回调的返回值,可决定该元素是否能被拖拽, 可用于在特殊场景下,临时禁用拖拽。
+> `注:`
+> 1. 该回调方法,会传入3个参数, 第1个为被拖拽的元素(dom对象), 第2个参数为 该元素的x轴绝对坐标, 第3个元素为y轴绝对坐标;
+> 2. 该回调方法, 返回false时, 本次拖拽将临时失效, 返回其他值,或没有返回值,则忽略。
+
+
+### `data-dragging`
+> 元素被拖动时的回调。
+> `注:`
+> 1.该回调方法,会传入3个参数, 第1个为被拖拽的元素(dom对象), 第2个参数为 该元素的x轴绝对坐标, 第3个元素为y轴绝对坐标;
+
+
+### `data-dragged`
+> 元素被拖动结束后的回调。
+> `注:`
+> 1. 该回调方法,会传入3个参数, 第1个为被拖拽的元素(dom对象), 第2个参数为 该元素的x轴绝对坐标, 第3个元素为y轴绝对坐标;
+
+
+
+
+
+
+
+

src/js/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})}});
+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/js/lib/form/checkbox-item.js

@@ -0,0 +1,13 @@
+/**
+  *
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2020-11-17 09:10:37
+  * @version v1.0.0
+  * 
+  */
+
+import"../icon/index.js";import $ from"../utils.js";export default class CheckboxItem extends HTMLElement{static get observedAttributes(){return["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:{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-flex;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:#757575}: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:#64b5f6}:host([color='blue']) label.checked .dot{border-color:#64b5f6}:host([color='blue']) label.checked .dot::after{background:#64b5f6}:host([color='green']) label.checked{color:#81c784}:host([color='green']) label.checked .dot{border-color:#81c784}:host([color='green']) label.checked .dot::after{background:#81c784}:host([color='teal']) label.checked{color:#4db6ac}:host([color='teal']) label.checked .dot{border-color:#4db6ac}:host([color='teal']) label.checked .dot::after{background:#4db6ac}: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:#9575cd}:host([color='purple']) label.checked .dot{border-color:#9575cd}:host([color='purple']) label.checked .dot::after{background:#9575cd}</style> <label> <wc-icon class=\"dot\" is=\"checkbox-off\"></wc-icon> <slot /> </label> ",this.__SWITCH__=this.root.lastElementChild,this.__ICO__=this.__SWITCH__.children[0],this._isInGroup=!1}_checkGroup(){this._isInGroup="WC-CHECKBOX"===this.parentNode.tagName,this._isInGroup&&this.parentNode.root&&this.parentNode.value.includes(this.value)&&(this.checked=!0)}get value(){return this.props.value}set value(e){this.props.value=e}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e;var{checked:o,color:t}=this.props;this.__SWITCH__.classList.toggle("checked",o),this.__ICO__.setAttribute("is","checkbox-"+(o?"on":"off")),o?this.__ICO__.setAttribute("color",t):this.__ICO__.removeAttribute("color")}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._checkGroup(),this._handlClick=$.bind(this,"click",e=>{e.preventDefault(),this.disabled||this.readOnly||(this.checked=!this.checked,this._isInGroup?this.parentNode.dispatchEvent(new CustomEvent("child-picked",{detail:{value:this.value,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"value":case"color":this.props[e]=t;break;case"checked":case"readonly":case"disabled":var l=e;"readonly"===l&&(l="readOnly"),this[l]=!0}}}
+
+if(!customElements.get('wc-checkbox-item')){
+  customElements.define('wc-checkbox-item', CheckboxItem)
+}

src/js/lib/form/checkbox.js

@@ -1,14 +1,12 @@
 /**
   *
- * @authors yutent (yutent@doui.cc)
- * @date    2019-11-05 23:34:04
- * @version v2.0.1
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2020-11-17 09:10:37
+  * @version v1.0.0
   * 
   */
 
-'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;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 $ from"../utils.js";import"./checkbox-item.js";export default class Checkbox extends HTMLElement{static get observedAttributes(){return["value"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{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{display:inline-flex}</style> <slot /> "}_updateChildrenStat(){Array.from(this.children).forEach(e=>{"WC-CHECKBOX-ITEM"===e.tagName&&e.root&&(this.value.includes(e.value)?e.checked=!0:e.checked=!1)})}get value(){return this.props.value}set value(e){e!==this.props.value&&(this.props.value=e,this._updateChildrenStat())}connectedCallback(){this._pickedFn=$.bind(this,"child-picked",e=>{var t=[...this.props.value],i=t.indexOf(e.detail.value);e.detail.checked?i<0&&t.push(e.detail.value):~i&&t.splice(i,1),this.props.value=t,this.dispatchEvent(new CustomEvent("input"))})}disconnectedCallback(){$.unbind(this,"child-picked",this._pickedFn)}attributeChangedCallback(e,t,i){if(null!==i&&t!==i)switch(e){case"value":i&&(this.value=i.split(/,\s*?/))}}}
 
 if(!customElements.get('wc-checkbox')){
   customElements.define('wc-checkbox', Checkbox)

src/js/lib/form/progress.js

@@ -1,14 +1,12 @@
 /**
   *
- * @authors yutent (yutent@doui.cc)
- * @date    2019-11-05 23:34:04
- * @version v2.0.1
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2020-11-17 09:10:37
+  * @version v1.0.0
   * 
   */
 
-'use strict'
-
-export default class Progress extends HTMLElement{static get observedAttributes(){return["value","max"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{value:0,max: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;align-items:center}:host label{flex:1;height:var(--size, 10px);border-radius:9px;background:#e8ebf4}:host label span{display:block;width:0;height:100%;border-radius:9px;background:#3fc2a7}:host([size='large']) label{height:18px}:host([size='medium']) label{height:14px}:host([size='mini']) label{height:6px}:host([color='red']) label span{background:#ff5061}:host([color='blue']) label span{background:#66b1ff}:host([color='green']) label span{background:#58d68d}:host([color='orange']) label span{background:#ffb618}:host([color='dark']) label span{background:#62778d}:host([color='purple']) label span{background:#ac61ce}\n</style> <label><span></span></label> ",this.__THUMB__=this.root.children[1].lastElementChild}get value(){return this.props.value}set value(e){this.props.value=+e,this.calculate()}calculate(){var{max:e,value:a}=this.props;this.__THUMB__.style.width=`${100*a/e}%`}connectedCallback(){this.calculate()}attributeChangedCallback(e,a,l){if(null!==l&&a!==l)switch(e){case t:var t=+l;(t!=t||t<1)&&(t=1),this.props.max=t,this.calculate();break;case"value":var r=+l;r==r&&(this.props.value=r,this.calculate())}}};
+export default class Progress extends HTMLElement{static get observedAttributes(){return["value","max"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{value:0,max: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;align-items:center}:host label{flex:1;height:var(--size, 10px);border-radius:9px;background:#e8ebf4}:host label span{display:block;width:0;height:100%;border-radius:9px;background:#4db6ac}:host([size='large']) label{height:18px}:host([size='medium']) label{height:14px}:host([size='mini']) label{height:6px}:host([color='red']) label span{background:#ff5061}:host([color='blue']) label span{background:#64b5f6}:host([color='green']) label span{background:#81c784}:host([color='orange']) label span{background:#ffb618}:host([color='dark']) label span{background:#62778d}:host([color='purple']) label span{background:#9575cd}</style> <label><span></span></label> ",this.__THUMB__=this.root.children[1].lastElementChild}get value(){return this.props.value}set value(e){this.props.value=+e,this.calculate()}calculate(){var{max:e,value:a}=this.props;this.__THUMB__.style.width=100*a/e+"%"}connectedCallback(){this.calculate()}attributeChangedCallback(e,a,l){if(null!==l&&a!==l)switch(e){case"max":var t=+l;(t!=t||t<1)&&(t=1),this.props.max=t,this.calculate();break;case"value":var r=+l;r==r&&(this.props.value=r,this.calculate())}}}
 
 if(!customElements.get('wc-progress')){
   customElements.define('wc-progress', Progress)

src/js/lib/form/radio-item.js

@@ -0,0 +1,13 @@
+/**
+  *
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2020-11-17 09:10:37
+  * @version v1.0.0
+  * 
+  */
+
+import $ from"../utils.js";export default class RadioItem extends HTMLElement{static get observedAttributes(){return["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:{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-flex;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:1;-moz-user-select:none;user-select:none;white-space:nowrap;cursor:inherit;color:#757575}:host label.checked .dot::after{visibility:visible}:host .dot{display:flex;justify-content:center;align-items:center;width:18px;height:18px;margin-right:3px;border:1px solid #bdbdbd;border-radius:50%;background:#fff}:host .dot::after{display:block;visibility:hidden;width:12px;height:12px;border-radius:50%;background:#bdbdbd;content:''}:host([readonly]){opacity:0.8}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']) label{min-width:58px;height:32px}:host([size='large']) .dot{width:26px;height:26px}:host([size='large']) .dot::after{width:18px;height:18px}:host([size='medium']) label{min-width:50px;height:28px}:host([size='medium']) .dot{width:22px;height:22px}:host([size='medium']) .dot::after{width:14px;height:14px}:host([size='mini']) label{height:14px}:host([size='mini']) .dot{width:14px;height:14px}:host([size='mini']) .dot::after{width:8px;height:8px}: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:#64b5f6}:host([color='blue']) label.checked .dot{border-color:#64b5f6}:host([color='blue']) label.checked .dot::after{background:#64b5f6}:host([color='green']) label.checked{color:#81c784}:host([color='green']) label.checked .dot{border-color:#81c784}:host([color='green']) label.checked .dot::after{background:#81c784}:host([color='teal']) label.checked{color:#4db6ac}:host([color='teal']) label.checked .dot{border-color:#4db6ac}:host([color='teal']) label.checked .dot::after{background:#4db6ac}: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:#9575cd}:host([color='purple']) label.checked .dot{border-color:#9575cd}:host([color='purple']) label.checked .dot::after{background:#9575cd}</style> <label> <span class=\"dot\"></span> <slot /> </label> ",this.__SWITCH__=this.root.lastElementChild}get value(){return this.props.value}set value(e){this.props.value=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.value===this.parentNode.value&&(this.checked=!0),this._handleClick=$.catch(this,"click",e=>{this.disabled||this.readOnly||this.checked||this.parentNode.dispatchEvent(new CustomEvent("child-picked",{detail:this.value}))})}disconnectedCallback(){$.unbind(this,"click",this._handleClick)}attributeChangedCallback(e,o,t){if(null!==t&&o!==t)switch(e){case"value":this.value=t;break;case"checked":case"readonly":case"disabled":var l=e;"readonly"===l&&(l="readOnly"),this[l]=!0}}}
+
+if(!customElements.get('wc-radio-item')){
+  customElements.define('wc-radio-item', RadioItem)
+}

src/js/lib/form/radio.js

@@ -1,14 +1,12 @@
 /**
   *
- * @authors yutent (yutent@doui.cc)
- * @date    2019-11-05 23:34:04
- * @version v2.0.1
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2020-11-17 09:10:37
+  * @version v1.0.0
   * 
   */
 
-'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;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}}};
+import $ from"../utils.js";import"./radio-item.js";export default class Radio extends HTMLElement{static get observedAttributes(){return["value"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{value:null},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-flex}</style> <slot /> "}_updateChildrenStat(){Array.from(this.children).forEach(e=>{"WC-RADIO-ITEM"===e.tagName&&e.root&&(e.value===this.props.value?e.checked=!0:e.checked=!1)})}get value(){return this.props.value}set value(e){e!==this.props.value&&(this.props.value=e,this._updateChildrenStat())}connectedCallback(){this._pickedFn=$.bind(this,"child-picked",e=>{log("radio picked: ",e.detail),this.value=e.detail,this.dispatchEvent(new CustomEvent("input"))})}disconnectedCallback(){$.unbind(this,"child-picked",this._pickedFn)}attributeChangedCallback(e,t,i){if(null!==i&&t!==i)switch(e){case"value":this.value=i}}}
 
 if(!customElements.get('wc-radio')){
   customElements.define('wc-radio', Radio)

src/js/lib/form/star.js

@@ -1,14 +1,12 @@
 /**
   *
- * @authors yutent (yutent@doui.cc)
- * @date    2019-11-05 23:34:04
- * @version v2.0.1
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2020-11-17 09:10:37
+  * @version v1.0.0
   * 
   */
 
-'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}}};
+import $ 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:#4db6ac}:host([color=\'green\']) label span{color:#81c784}:host([color=\'grey\']) label span{color:#bdbdbd}:host([color=\'blue\']) label span{color:#64b5f6}:host([color=\'purple\']) label span{color:#9575cd}:host([color=\'orange\']) label span{color:#ffb618}:host([disabled]){cursor:default;opacity:0.6}:host([disabled]) label wc-icon:hover{transform:none}</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(t){var e=+t;(t=e==e&&e>0?e:0)>5&&(t=5),this.props.value=t,this._updateDraw(-1)}_updateDraw(t,e=0){var s="star-half",{value:o,tmp:a={i:0,f:0}}=this.props;-1===t&&(t=Math.floor(o),e=+(o%1).toFixed(1),t>0&&t===o&&(t--,e=1)),this.props["allow-half"]||(e=e>0?1:0),t===a.i&&e===a.f||(e>.5&&(s="star-full"),this.__STARS__.forEach((e,s)=>{e.setAttribute("is",s<t?"star-full":"star"),e.setAttribute("color",s<t?this.props.color:"grey")}),e>0&&(this.__STARS__[t].setAttribute("is",s),this.__STARS__[t].setAttribute("color",this.props.color)),this.props.tmp={i:t,f:e},0===t&&0===e?this.__TEXT__.textContent="":5===this.props.text.length?this.__TEXT__.textContent=this.props.text[t]:this.props["show-value"]&&(this.__TEXT__.textContent=t+e))}connectedCallback(){$.catch(this.__BOX__,"mousemove",t=>{if(!this.props.disabled&&"WC-ICON"===t.target.tagName){let e=+t.target.dataset.idx;this._updateDraw(e,+(t.offsetX/this.props.starSize).toFixed(1))}}),$.catch(this.__BOX__,"click",t=>{var{tmp:e,disabled:s}=this.props;s||"WC-ICON"===t.target.tagName&&(this.props.value=e.i+e.f,this.dispatchEvent(new CustomEvent("input")))}),$.catch(this.__BOX__,"mouseleave",t=>{this.props.disabled||this._updateDraw(-1)})}attributeChangedCallback(t,e,s){if(null!==s&&e!==s)switch(t){case"size":this.props.starSize=this.__STARS__[0].clientWidth;break;case"allow-half":case"show-value":case"disabled":this.props[t]=!0;break;case"color":s&&(this.props.color=s);break;case"text":s&&5===(s=s.split("|")).length&&(this.props.text=s.map(t=>t.trim()));break;case"value":this.value=s}}}
 
 if(!customElements.get('wc-star')){
   customElements.define('wc-star', Star)

src/js/lib/form/switch.js

@@ -1,14 +1,12 @@
 /**
   *
- * @authors yutent (yutent@doui.cc)
- * @date    2019-11-05 23:34:04
- * @version v2.0.1
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2020-11-17 09:10:37
+  * @version v1.0.0
   * 
   */
 
-'use strict'
-
-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+""}}};
+import $ 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;line-height:0;white-space:nowrap}:host label{display:flex;align-items:center;width:32px;height:18px;padding:3px;margin:5px;border-radius:21px;background:#dae1e9;cursor:inherit}:host label.checked{flex-direction:row-reverse;background:#757575}:host .dot{width:12px;height:12px;border-radius:50%;background:#fff}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']) label{width:46px;height:26px;padding:3px 5px}:host([size='large']) .dot{width:18px;height:18px}:host([size='medium']) label{width:38px;height:22px;padding:3px 4px}:host([size='medium']) .dot{width:16px;height:16px}: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:#64b5f6}:host([color='green']) label.checked{background:#81c784}:host([color='teal']) label.checked{background:#4db6ac}:host([color='orange']) label.checked{background:#ffb618}:host([color='dark']) label.checked{background:#62778d}:host([color='purple']) label.checked{background:#9575cd}</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/js/lib/icon/index.js

@@ -1,14 +1,12 @@
 /**
   *
- * @authors yutent (yutent@doui.cc)
- * @date    2019-11-05 23:34:04
- * @version v2.0.1
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2020-11-17 09:10:37
+  * @version v1.0.0
   * 
   */
 
-'use strict'
-
-import SVG_DICT from"./svg.js";export default class Icon extends HTMLElement{static get observedAttributes(){return["is"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{is:""},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;color:#526273}:host(:not([is])){display:none}.icon{display:block;width:var(--size, 32px);height:var(--size, 32px);fill:currentColor}.icon.load{animation:load 1.5s linear infinite}.icon circle{stroke:currentColor;animation:circle 1.5s ease-in-out infinite}:host([size='large']) .icon{width:42px;height:42px}:host([size='medium']) .icon{width:38px;height:38px}:host([size='mini']) .icon{width:20px;height:20px}:host([color='red']){color:#ff5061}:host([color='blue']){color:#66b1ff}:host([color='green']){color:#58d68d}:host([color='teal']){color:#3fc2a7}:host([color='orange']){color:#ffb618}:host([color='dark']){color:#62778d}:host([color='purple']){color:#ac61ce}:host([color='grey']){color:#aabac3}@keyframes circle{0%{stroke-dasharray:0, 3812px;stroke-dashoffset:0}50%{stroke-dasharray:1906px, 3812px;stroke-dashoffset:-287px}100%{stroke-dasharray:1906px, 3812px;stroke-dashoffset:-2393px}}@keyframes load{to{transform:rotate(360deg)}}\n</style> <svg class=\"icon\" viewBox=\"0 0 1024 1024\"></svg> ",this.__ICO__=this.root.lastElementChild,this.drawPath()}get is(){return this.props.is}drawPath(){var{is:o}=this.props,t=SVG_DICT[o];this.__ICO__&&o&&t&&(this.__ICO__.innerHTML="loading"===o?t:`<path d="${t}" />`,this.__ICO__.classList.toggle("load","loading"===o))}attributeChangedCallback(o,t,e){if(null!==e&&t!==e)switch(o){case"is":this.props.is=e,e?this.drawPath():this.removeAttribute("is")}}};
+import SVG_DICT from"./svg.js";let dict=SVG_DICT;window.EXT_SVG_DICT&&Object.assign(dict,EXT_SVG_DICT);export default class Icon extends HTMLElement{static get observedAttributes(){return["is"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{is:""},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;color:inherit}:host(:not([is])){display:none}.icon{display:block;width:var(--size, 32px);height:var(--size, 32px);margin:var(--pad, auto);fill:currentColor}.icon.load{animation:load 1.5s linear infinite}.icon circle{stroke:currentColor;animation:circle 1.5s ease-in-out infinite}:host([size='large']) .icon{width:42px;height:42px}:host([size='medium']) .icon{width:38px;height:38px}:host([size='mini']) .icon{width:20px;height:20px}:host([color='red']){color:#ff5061}:host([color='blue']){color:#64b5f6}:host([color='green']){color:#81c784}:host([color='teal']){color:#4db6ac}:host([color='orange']){color:#ffb618}:host([color='dark']){color:#62778d}:host([color='purple']){color:#9575cd}:host([color='grey']){color:#bdbdbd}@keyframes circle{0%{stroke-dasharray:0, 3812px;stroke-dashoffset:0}50%{stroke-dasharray:1906px, 3812px;stroke-dashoffset:-287px}100%{stroke-dasharray:1906px, 3812px;stroke-dashoffset:-2393px}}@keyframes load{to{transform:rotate(360deg)}}</style> <svg class=\"icon\" viewBox=\"0 0 1024 1024\"></svg> ",this.__ICO__=this.root.lastElementChild,this.drawPath()}get is(){return this.props.is}set is(o){o&&this.setAttribute("is",o)}drawPath(){var{is:o}=this.props,t=dict[o];this.__ICO__&&o&&t&&(this.__ICO__.innerHTML="loading"===o?t:`<path d="${t}" />`,this.__ICO__.classList.toggle("load","loading"===o))}attributeChangedCallback(o,t,e){if(null!==e&&t!==e)switch(o){case"is":this.props.is=e,e?this.drawPath():this.removeAttribute("is")}}}
 
 if(!customElements.get('wc-icon')){
   customElements.define('wc-icon', Icon)

src/js/lib/pager/index.js

@@ -1,15 +0,0 @@
-/**
- *
- * @authors yutent (yutent@doui.cc)
- * @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(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/js/lib/request/lib/format.js

@@ -1 +0,0 @@
-"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("&")}};

src/js/lib/s-ico/index.js

@@ -1,7 +0,0 @@
-/**
- * 播放器图标
- * @author yutent<yutent@doui.cc>
- * @date 2019/09/10 10:02:46
- */
-
-'use strict'

src/js/lib/s-ico/svg.js

@@ -1,32 +0,0 @@
-export default {
-  all:
-    'M825.5 341.9c-45.4-45.4-105.9-70.5-170.1-70.5H402.9v-48.3c0-15.4-10.6-21.2-23.6-12.8l-116.2 75.1c-13 8.4-12.8 21.9 0.3 30L379.1 387c13.1 8.1 23.8 2.1 23.8-13.3v-48.1h252.5c102.7 0 186.3 83.6 186.3 186.3 0 17-2.3 33.8-6.8 50-4 14.4 4.4 29.4 18.9 33.4 2.4 0.7 4.9 1 7.3 1 11.9 0 22.8-7.9 26.1-19.9 5.8-20.9 8.8-42.6 8.8-64.5 0-64.2-25-124.6-70.5-170z m-44.8 366.8L665.1 637c-13.1-8.1-23.8-2.1-23.8 13.3v48.1H368.6c-102.7 0-186.3-83.6-186.3-186.3 0-36 10.3-70.9 29.7-101 8.1-12.6 4.5-29.4-8.1-37.5-12.6-8.1-29.4-4.5-37.5 8.1-25.1 38.9-38.4 84-38.4 130.5 0 64.3 25 124.7 70.5 170.1 45.4 45.4 105.9 70.5 170.1 70.5h272.6v48.3c0 15.4 10.6 21.2 23.6 12.8L781 738.6c13-8.3 12.9-21.8-0.3-29.9z m0 0',
-  eq:
-    'M576 640H448c-17.6 0-32-14.4-32-32s14.4-32 32-32h128c17.6 0 32 14.4 32 32s-14.4 32-32 32zM512 896c-17.6 0-32-14.4-32-32V160c0-17.6 14.4-32 32-32s32 14.4 32 32v704c0 17.6-14.4 32-32 32zM864 383H736c-17.6 0-32-14.4-32-32s14.4-32 32-32h128c17.6 0 32 14.4 32 32s-14.4 32-32 32zM800 896c-17.6 0-32-14.4-32-32V160c0-17.6 14.4-32 32-32s32 14.4 32 32v704c0 17.6-14.4 32-32 32zM288 320H160c-17.6 0-32-14.4-32-32s14.4-32 32-32h128c17.6 0 32 14.4 32 32s-14.4 32-32 32zM224 896c-17.6 0-32-14.4-32-32V160c0-17.6 14.4-32 32-32s32 14.4 32 32v704c0 17.6-14.4 32-32 32z',
-  like:
-    'M694.3 156.5c-13 0-26 1.8-39 5.3s-25.2 8.3-36.7 14.3c-11.5 6-22.6 13.2-33.4 21.7-10.8 8.5-20.6 17.7-29.6 27.7S538.5 246 531.2 257c-7.3 11-13.6 22.3-19.1 33.7-17.5-37-42.8-68.6-75.7-94.9-33-26.2-68.5-39.4-106.5-39.4-55.5 0-103 19.8-142.5 59.3s-59.3 87-59.3 142.5c0 31 4.2 60.1 12.7 87.4 8.5 27.2 20.6 51.9 36.4 73.9 15.8 22 33.4 43.1 52.9 63.4 19.5 20.3 41.5 41 66 62.3 24.5 21.2 48.4 42.2 71.6 63 23.2 20.8 48 45.1 74.3 73.1 26.3 28 49.6 56.7 70.1 86.3 19.5-29 42-57.6 67.5-85.9 25.5-28.2 49.9-53 73.1-74.3 23.2-21.3 47.2-42.6 72-64.1 24.8-21.5 47-42.5 66.7-63 19.7-20.5 37.7-41.8 54-63.7 16.3-22 28.8-46.4 37.5-73.1 8.8-26.8 13.1-55.1 13.1-85.1 0-55.5-19.8-103-59.3-142.5-39.5-39.6-87-59.4-142.4-59.4z m0 0',
-  music:
-    'M875.1 491.1c-11.5 0-20.8 9.4-20.8 20.8 0 188.7-153.5 342.2-342.2 342.2S169.9 700.6 169.9 511.9s153.5-342.2 342.2-342.2c11.5 0 20.8-9.4 20.8-20.8 0-11.5-9.4-20.8-20.8-20.8-211.7 0-384 172.3-384 384s172.3 384 384 384 384-172.3 384-384c-0.1-11.6-9.5-21-21-21zM595.8 183.6c11.5 0 20.8-9.4 20.8-20.8 0-11.5-9.4-20.8-20.8-20.8-11.5 0-20.8 9.4-20.8 20.8 0 11.5 9.3 20.8 20.8 20.8z m244.5 244.6c0 11.5 9.4 20.8 20.8 20.8 11.5 0 20.8-9.4 20.8-20.8 0-11.5-9.4-20.8-20.8-20.8-11.5-0.1-20.8 9.3-20.8 20.8z m0 0M379.2 567.8c0-11.5-9.4-20.8-20.9-20.8-11.5 0-20.8 9.4-20.8 20.8 0 88.5 72 160.5 160.5 160.5 11.5 0 20.9-9.4 20.9-20.9 0-11.5-9.4-20.8-20.9-20.8-65.5 0-118.8-53.3-118.8-118.8z m70.1-55.8c0 65.4 53.2 118.6 118.5 118.6 65.4 0 118.6-53.2 118.6-118.6v-2.8-2.1c0.1-0.8 0.1-1.6 0.1-2.2V217.6c49 29.2 90 70 119.2 118.6 5.2 8.7 10.1 17.7 14.5 26.9 3.6 7.3 11 12 18.9 12 2.9 0 5.7-0.6 8.3-1.8 5.3-2.3 9.4-6.7 11.4-12.1 1.9-5.3 1.7-10.9-0.8-15.9-5.3-10.9-10.9-21.2-16.5-30.5-38.7-64.5-94.8-115.9-162.1-148.5-1.8-0.9-3.7-1.5-5.8-1.8-2.6-1-5.2-1.6-7.9-1.6-11.5 0-20.8 9.4-20.8 20.8v237.9c-21.3-18.2-48.6-28.4-76.9-28.4-65.5 0.2-118.7 53.4-118.7 118.8z m118.6-77c42.4 0 76.9 34.5 76.9 76.9 0 42.4-34.5 76.9-76.9 76.9-42.4 0-76.9-34.5-76.9-76.9s34.4-76.9 76.9-76.9z m0 0',
-  list:
-    'M686.5 635.4V163c0-19.4 15.7-35 34.6-35h140.3c19.1 0 34.6 15.5 34.6 34.9 0 19.3-15.7 34.9-34.6 34.9h-105v561c-1.3 76-63.3 137.2-139.6 137.2-77.1 0-139.6-62.5-139.6-139.6s62.5-139.6 139.6-139.6c25.3-0.1 49.2 6.7 69.7 18.6zM128 651.6c0-19.3 15.8-34.9 35.4-34.9h208.5c19.5 0 35.4 15.5 35.4 34.9 0 19.3-15.8 34.9-35.4 34.9H163.4c-19.6 0-35.4-15.5-35.4-34.9z m0-174.5c0-19.3 15.7-34.9 35.1-34.9h418.4c19.4 0 35.1 15.5 35.1 34.9 0 19.3-15.7 34.9-35.1 34.9H163.1c-19.4 0-35.1-15.5-35.1-34.9z m0-174.6c0-19.3 15.7-34.9 35.1-34.9h418.4c19.4 0 35.1 15.5 35.1 34.9 0 19.3-15.7 34.9-35.1 34.9H163.1c-19.4 0.1-35.1-15.4-35.1-34.9z m0 0',
-  mv:
-    'M875.1 204.8H148.9c-11.6 0-20.9 9.4-20.9 20.9v572.5c0 11.6 9.4 20.9 20.9 20.9H875c11.6 0 20.9-9.4 20.9-20.9V225.8c0.1-11.6-9.3-21-20.8-21z m-21 460.8H574.8V358.4h279.3v307.2zM169.9 358.4h307.2v307.2H169.9V358.4z m0 418.9v-15.2c2.2 0.8 4.5 1.3 7 1.3h69.8c11.6 0 20.9-9.4 20.9-20.9s-9.4-20.9-20.9-20.9h-69.8c-2.5 0-4.8 0.5-7 1.3v-15.2H498c11.6 0 20.9-9.4 20.9-20.9V337.5c0-11.6-9.4-20.9-20.9-20.9H169.9v-15.2c2.2 0.8 4.5 1.3 7 1.3h69.8c11.6 0 20.9-9.4 20.9-20.9 0-11.6-9.4-20.9-20.9-20.9h-69.8c-2.5 0-4.8 0.5-7 1.3V247h684.2v14h-62.8c-11.6 0-20.9 9.4-20.9 20.9 0 11.6 9.4 20.9 20.9 20.9h62.8v14H553.9c-11.6 0-20.9 9.4-20.9 20.9v349.1c0 11.6 9.4 20.9 20.9 20.9h300.2v14h-62.8c-11.6 0-20.9 9.4-20.9 20.9s9.4 20.9 20.9 20.9h62.8v14H169.9z m230.4-516.6h-69.8c-11.6 0-20.9 9.4-20.9 20.9 0 11.6 9.4 20.9 20.9 20.9h69.8c11.6 0 20.9-9.4 20.9-20.9 0-11.6-9.3-20.9-20.9-20.9z m174.5 20.9c0-11.6-9.4-20.9-20.9-20.9h-69.8c-11.6 0-20.9 9.4-20.9 20.9 0 11.6 9.4 20.9 20.9 20.9h69.8c11.6 0 20.9-9.3 20.9-20.9z m62.9 20.9h69.8c11.6 0 20.9-9.4 20.9-20.9 0-11.6-9.4-20.9-20.9-20.9h-69.8c-11.6 0-20.9 9.4-20.9 20.9-0.1 11.6 9.3 20.9 20.9 20.9z m-237.4 419h-69.8c-11.6 0-20.9 9.4-20.9 20.9s9.4 20.9 20.9 20.9h69.8c11.6 0 20.9-9.4 20.9-20.9s-9.3-20.9-20.9-20.9z m153.6 0h-69.8c-11.6 0-20.9 9.4-20.9 20.9s9.4 20.9 20.9 20.9h69.8c11.6 0 20.9-9.4 20.9-20.9s-9.3-20.9-20.9-20.9z m153.6 0h-69.8c-11.6 0-20.9 9.4-20.9 20.9s9.4 20.9 20.9 20.9h69.8c11.6 0 20.9-9.4 20.9-20.9s-9.3-20.9-20.9-20.9z m0 0',
-  singer:
-    'M721.7 691.3c-3.8 4-10.1 5.1-15.7 2.8-4.3-3.2-10.6-7.8-18.3-13.1-22.2-15.2-55-38-100.2-52.7-33.5-10.9-68.8-16.6-105-16.6-74.6 0-145.5 23.9-205.1 69.2-28.6 21.7-53.7 47.9-74.3 77.5-21 30-37 63-47.6 98-2.3 7.5-10.2 11.8-17.6 9.4-7.4-2.3-11.6-10.3-9.3-17.8 11.5-37.9 28.8-73.6 51.5-106.1 22.3-32 49.5-60.3 80.4-83.8 31.4-23.8 66-42.4 103-55.1 38.2-13.1 78.3-19.8 119-19.8 40.8 0 80.8 6.7 119.1 19.8 19.7 6.8 60.1 22.6 103 55.2 7.5 5.7 13.4 10.6 17.1 13.8 5.1 5.9 4.8 14.4 0 19.3z m-377-200.8c-36.8-36.8-57.1-85.8-57.1-137.9 0-52.1 20.3-101.1 57.1-137.9 36.8-36.8 85.8-57.1 137.9-57.1 52.1 0 101.1 20.3 137.9 57.1 36.8 36.8 57.1 85.8 57.1 137.9s-20.3 101.1-57.1 137.9c-36.8 36.8-85.8 57.1-137.9 57.1-52.1 0-101.1-20.3-137.9-57.1z m-29-137.9c0 44.6 17.4 86.5 48.9 118s73.4 48.9 118 48.9 86.5-17.4 118-48.9 48.9-73.4 48.9-118c0-44.6-17.4-86.5-48.9-118s-73.4-48.9-118-48.9-86.5 17.4-118 48.9c-31.6 31.5-48.9 73.4-48.9 118z m405.4 367.8c-10.6-9.2-23.8-15.8-38.6-18.6-44.9-8.6-88.3 20.9-96.9 65.8-8.6 44.9 20.9 88.3 65.8 96.9 44.5 8.5 87.4-20.3 96.6-64.4l62.4-326.8 61.2 11.7c11 2.1 21.9-5.3 24-16.5 2.2-11.3-5.1-22.1-16.3-24.2l-81.7-15.6c-11-2.1-21.9 5.3-24 16.5l-52.5 275.2z',
-  random:
-    'M534.1 400.5c47.7-47.2 109-68.3 198.9-68.3h4.6v51.2c0 16.4 11.2 22.5 25 13.6l123.3-79.6c13.7-8.9 13.6-23.2-0.3-31.8l-122.7-76.1c-13.9-8.6-25.3-2.3-25.3 14.1v51H733c-104.8 0-180.9 27-239.4 85-58.6 58.1-60.2 112-61.4 155.2-0.5 18.6-1 34.7-5.7 49.3-10.4 32.9-37.8 63.4-77 85.7-49.3 28.2-115.9 42.7-192.5 41.8h-0.3c-15.8 0-28.6 12.6-28.8 28.4-0.2 15.9 12.6 28.9 28.4 29 2.4 0 4.8 0.1 7.1 0.1 42.4 0 82.3-4.3 118.5-12.6 35.6-8.3 67.9-20.7 96-36.7 51.8-29.7 88.5-71.7 103.3-118.4 7.1-22.4 7.7-44.1 8.3-65.1 1.4-39.6 2.3-74 44.6-115.8z m-376.9-68.3c96.3-1 176.8 22.3 226.6 65.9 5.4 4.8 12.2 7.1 18.9 7.1 8 0 16-3.4 21.7-9.8 10.4-12 9.2-30.1-2.7-40.6-28.9-25.3-65.2-45-107.7-58.6-46.3-14.9-99.3-22.1-157.4-21.4-15.9 0.2-28.6 13.2-28.4 29.1 0 15.7 13 28.5 29 28.3z m728.3 370.5l-122.7-75.9c-13.9-8.7-25.3-2.3-25.3 14.1v51H733c-80.4 0-142.1-24.1-194.2-75.7-11.3-11.1-29.5-11-40.6 0.2-11.2 11.3-11.1 29.5 0.1 40.7 62.8 62.1 139.6 92.4 234.8 92.4h4.6v51.3c0 16.3 11.2 22.5 25 13.5L886 734.7c13.5-9 13.4-23.3-0.5-32z m0 0',
-  rank:
-    'M448 128h128v768H448V128zM128 895h128V383H128v512z m640 1h128V512H768v384z',
-  radio:
-    'M742.4 512.2H627.2c-10.8 0-19.2-8.8-19.2-19.2 0-10.4 8.8-19.2 19.2-19.2h115.2c10.8 0 19.2 8.8 19.2 19.2 0 10.7-8.4 19.2-19.2 19.2zM531.2 493c0 10.6 8.6 19.2 19.2 19.2s19.2-8.6 19.2-19.2-8.6-19.2-19.2-19.2-19.2 8.6-19.2 19.2zM358.4 704.1c-63.4 0-115.2-51.8-115.2-115.1S295 473.8 358.4 473.8c63.4 0 115.2 51.8 115.2 115.2s-51.8 115.1-115.2 115.1z m0-191.9c-42.2 0-76.8 34.5-76.8 76.8 0 42.2 34.6 76.8 76.8 76.8 42.2 0 76.8-34.5 76.8-76.8s-34.6-76.8-76.8-76.8zM800 896H224c-53 0-96-43-96-96V377.8c0-53 43-96 96-96h576c53 0 96 43 96 96V800c0 53-43 96-96 96zM224 320.2c-31.9 0-57.6 25.7-57.6 57.6V800c0 31.9 25.7 57.6 57.6 57.6h576c31.9 0 57.6-25.7 57.6-57.6V377.8c0-31.9-25.7-57.6-57.6-57.6H224z m518.4 383.9H627.2c-10.8 0-19.2-8.8-19.2-19.2 0-10.7 8.8-19.2 19.2-19.2h115.2c10.8 0 19.2 8.8 19.2 19.2 0 10.7-8.4 19.2-19.2 19.2zM224 320.2c-7.3 0-14.2-4.2-17.3-11.1-4.6-9.6-0.4-21.1 9.2-25.7l326.4-153.5c9.6-4.6 21.1-0.4 25.7 9.2 4.6 9.6 0.4 21.1-9.2 25.7L232.4 318.3c-3 1.2-5.7 1.9-8.4 1.9z m307.2 364.7c0 10.6 8.6 19.2 19.2 19.2s19.2-8.6 19.2-19.2-8.6-19.2-19.2-19.2-19.2 8.6-19.2 19.2z m0 0',
-  single:
-    'M488.6 306.3H368.4c-63.4 0-125.2 25-170.3 70.1C153 421.5 128 481.6 128 546.7c0 21.7 3.3 43.4 8.3 65.1 3.3 11.7 15 20 26.7 20 1.7 0 5 0 6.7-1.7 15-3.3 23.4-18.4 18.4-33.4-5-16.7-6.7-33.4-6.7-50.1 0-103.5 83.5-187 187-187h110.2c1.7-18.2 5-36.6 10-53.3z m0 0M730.7 608.5c-30.1 61.8-93.5 105.2-167 105.2h-252v-48.4c0-15-10-21.7-23.4-13.4l-115.2 71.8c-13.4 8.3-13.4 21.7 0 30.1L290 828.9c13.4 8.3 23.4 3.3 23.4-13.4v-48.4h252.1c63.4 0 125.2-25 170.3-70.1 28.4-28.4 50.1-63.4 60.1-101.8-21.8 6.6-43.5 11.7-65.2 13.3z m0 0M712.3 191.1c-101.8 0-183.7 81.8-183.7 183.7 0 101.8 81.8 183.7 183.7 183.7 101.8 0 183.7-81.8 183.7-183.7 0-101.9-81.8-183.7-183.7-183.7z m33.4 282.2h-35.1V334.7c-13.4 11.7-28.4 20-48.4 26.7v-36.7c10-1.7 20-6.7 30.1-13.4 10-6.7 20-13.4 26.7-21.7h26.7v183.7z m0 0',
-  next:
-    'M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384-171.9-384-384-384z m0 720c-185.6 0-336-150.4-336-336s150.4-336 336-336 336 150.4 336 336-150.4 336-336 336z m0 0M633.4 672c-8.3 0-15-6.8-15-15V367c0-8.2 6.8-15 15-15s15 6.8 15 15v290c0 8.2-6.8 15-15 15zM402.5 672c-7.3 0-13.6-2-18.9-5.9-5.3-3.9-8-8.6-8-14.1V372c0-5.4 2.7-10.1 8-14.1s11.6-5.9 18.9-5.9c7.3 0 13.6 2 18.9 5.9l188.3 140c5.3 3.9 8 8.6 8 14.1 0 5.4-2.7 10.1-8 14.1l-188.3 140c-5.2 3.9-11.5 5.9-18.9 5.9z m188.4-312.4',
-  prev:
-    'M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384-171.9-384-384-384z m0 720c-185.6 0-336-150.4-336-336s150.4-336 336-336 336 150.4 336 336-150.4 336-336 336z m0 0M375.6 657V367c0-8.2 6.8-15 15-15s15 6.8 15 15v290c0 8.2-6.8 15-15 15s-15-6.8-15-15zM621.5 672c-7.3 0-13.6-2-18.9-5.9l-188.3-140c-5.3-3.9-8-8.6-8-14.1 0-5.4 2.7-10.1 8-14.1l188.3-140c5.3-3.9 11.6-5.9 18.9-5.9 7.3 0 13.6 1.9 18.9 5.9 5.3 4 8 8.7 8 14.1v280c0 5.4-2.6 10.1-8 14.1-5.3 3.9-11.7 5.9-18.9 5.9zM433.1 359.6',
-  pause:
-    'M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384-171.9-384-384-384z m0 720c-185.6 0-336-150.4-336-336s150.4-336 336-336 336 150.4 336 336-150.4 336-336 336z m0 0M405.3 672c-11 0-20-9-20-20V372c0-11 9-20 20-20s20 9 20 20v280c0 11-9 20-20 20zM618.7 672c-11 0-20-9-20-20V372c0-11 9-20 20-20s20 9 20 20v280c0 11-9 20-20 20z',
-  play:
-    'M441.8 672c-7.3 0-13.6-2-18.9-5.9-5.3-3.9-8-8.6-8-14.1V372c0-5.4 2.7-10.1 8-14.1s11.6-5.9 18.9-5.9c7.3 0 13.6 2 18.9 5.9l188.3 140c5.3 3.9 8 8.6 8 14.1 0 5.4-2.7 10.1-8 14.1l-188.3 140c-5.2 3.9-11.5 5.9-18.9 5.9z m188.4-312.4M512 128c-212.1 0-384 171.9-384 384s171.9 384 384 384 384-171.9 384-384-171.9-384-384-384z m0 720c-185.6 0-336-150.4-336-336s150.4-336 336-336 336 150.4 336 336-150.4 336-336 336z m0 0'
-}

src/js/lib/utils.js

@@ -1 +1 @@
-function noop(){}export const nextTick=function(){let t=[];let n=document.createTextNode("\x3c!-- --\x3e");new MutationObserver(function(){let n=t.length;for(let e=0;e<n;e++)t[e]();t=t.slice(n)}).observe(n,{characterData:!0});let e=!1;return function(o){t.push(o),e=!e,n.data=e}}();export const each=function(t,n){if(t)if(Array.isArray(t))for(let e,o=0;(e=t[o++])&&!1!==n(e,o-1););else for(let e in t)if(t.hasOwnProperty(e)&&!1===n(t[e],e))break};export const bind=function(t,n,e=noop,o=!1){let r=n.split(",");return each(r,function(n){n=n.trim(),t.addEventListener(n,e,o)}),e};export const ebind=function(t,n,e,o){return bind(t,n,function(t){t.stopPropagation(),e&&e(t)},o)};export const unbind=function(t,n,e=noop,o=!1){let r=n.split(",");each(r,function(n){n=n.trim(),t.removeEventListener(n,e,o)})};export const clickOutside=function(t,n=noop){return bind(document,"mousedown",e=>{if(e)if(e.path){for(var o=e.path.concat();o.length>3;)if(o.shift()===t)return}else{var r=e.explicitOriginalTarget||e.target;if(t===r||t.contains(r)||t.root&&t.root.contains(r))return}n(e)})};
+function noop(){}export default{nextTick:function(){let t=[];let e=document.createTextNode("\x3c!-- --\x3e");new MutationObserver((function(){let e=t.length;for(let n=0;n<e;n++)t[n]();t=t.slice(e)})).observe(e,{characterData:!0});let n=!1;return function(i){t.push(i),n=!n,e.data=n}}(),each(t,e){if(t)if(Array.isArray(t))for(let n,i=0;(n=t[i++])&&!1!==e(n,i-1););else for(let n in t)if(t.hasOwnProperty(n)&&!1===e(t[n],n))break},bind(t,e,n=noop,i=!1){let o=e.split(",");return this.each(o,(function(e){e=e.trim(),t.addEventListener(e,n,i)})),n},catch(t,e,n,i){return this.bind(t,e,(function(t){t.stopPropagation(),n&&n(t)}),i)},unbind(t,e,n=noop,i=!1){let o=e.split(",");this.each(o,(function(e){e=e.trim(),t.removeEventListener(e,n,i)}))},outside(t,e=noop){return this.bind(document,"mousedown",n=>{if(n)if(n.path){for(var i=n.path.concat();i.length>3;)if(i.shift()===t)return}else{var o=n.explicitOriginalTarget||n.target;if(t===o||t.contains(o)||t.root&&t.root.contains(o))return}e(n)})},clearOutside(t=noop){this.unbind(document,"mousedown",t)}};

src/main.js

@@ -52,7 +52,7 @@ app.once('ready', () => {
   })
   // 修改app的UA
   session.defaultSession.setUserAgent(
-    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36'
+    'KugouMusic/2.9.5 (Mac OS X Version 10.15.7 (Build 19H2))'
   )
 
   let win = createMainWindow(path.resolve(ROOT, './images/app.png'))