update

package.json

@@ -1,11 +1,10 @@
 {
-  "name": "top.yutent.sonist",
+  "name": "sonist",
   "version": "2.0.0-alpha-4",
   "description": "Music Player",
   "main": "src/main.js",
   "scripts": {
-    "start": "electron .",
+    "start": "electron ."
-    "pack": "electron-builder"
   },
   "author": {
     "name": "yutent",
@@ -16,11 +15,10 @@
   "dependencies": {
     "crypto.js": "^2.0.2",
     "iofs": "^1.5.1",
-    "music-metadata": "^7.5.0",
+    "music-metadata": "^7.5.0"
-    "sqlite3": "^5.0.0"
   },
   "build": {
-    "appId": "top.yutent.sonist",
+    "appId": "sonist",
     "productName": "Sonist",
     "copyright": "Copyright © 2019 ${author}",
     "directories": {
@@ -34,7 +32,6 @@
     "files": [
       "src/**/*",
       "node_modules/iofs/*",
-      "node_modules/sqlite3/*",
       "node_modules/crypto.js/*",
       "node_modules/music-metadata/*"
     ],

src/css/app.scss

@@ -37,8 +37,33 @@
     display: flex;
     align-items: center;
     z-index: 9;
-    height: 26px;
+    height: 32px;
     background: rgba(32, 32, 32, 0.5);
+
+    .btns {
+      display: flex;
+      height: 16px;
+      padding: 0 4px;
+    }
+
+    .btn {
+      width: 16px;
+      height: 16px;
+      margin: 0 6px;
+      border-radius: 50%;
+      background: #86909b no-repeat;
+      background-size: 100%;
+    }
+
+    .btns.active {
+      .btn.close {
+        background: #ff5061;
+      }
+
+      .btn.mini {
+        background: #ffb618;
+      }
+    }
   }
 
   .main-body {
@@ -251,32 +276,9 @@
     .ctrl-box {
       display: flex;
       align-items: center;
+      justify-content: space-between;
       height: 42px;
-
+      padding: 0 16px;
-      .holder {
-        flex: 1;
-      }
-
-      .info {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        width: 320px;
-        height: 42px;
-        padding-left: 12px;
-        line-height: 1.25;
-
-        strong {
-          font-size: 14px;
-          font-weight: 500;
-        }
-
-        cite {
-          font-size: 12px;
-          font-style: normal;
-          color: #aeaeae;
-        }
-      }
 
       .play-btn {
         display: flex;
@@ -284,7 +286,6 @@
         justify-content: space-between;
         width: 120px;
         height: 42px;
-        margin-left: 32px;
 
         .item {
           width: 22px;
@@ -340,9 +341,8 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        width: 64px;
+        width: 52px;
         height: 22px;
-        margin-right: 16px;
 
         .item {
           width: 22px;

src/css/reset-basic.css

@@ -1,17 +1,12 @@
 @charset "UTF-8";
 /**
  * 
- * @authors yutent (yutent@doui.cc)
+ * @authors yutent (yutent.io@gmail.com)
  * @date    2014-10-10 00:45:09
  *
- * doui的CSS规范
+ * CSS规范
  * 
  * 不能出现大写,以连字符风格命名 
- * 表示状态的应该用do-st-*命名 
- * 表示功能的应该用do-fn-*命名
- * 表示页面模块的应该用do-mod-modname 命名
- * 表示UI组件的应该用do-uiname命名, 它的子元素应该全部包在 .do-uiname这个根类下
- * 如 .do-layer .body { ... }
  * 
  * 样式规则的出现顺序
  * 1 display float position overflow z-index 表示定位/布局的属性
@@ -22,30 +17,66 @@
  * 
  */
 
-
+* {margin: 0;padding: 0;vertical-align: baseline;box-sizing: border-box;}
-* {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
+::before, ::after {box-sizing: border-box;}
-::before,::after {box-sizing:border-box;}
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,content {display: block;}
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,content {display: block;}
-img {border:0;display:inline-block;}
+img {border: 0;display: inline-block;}
-ol, ul {list-style: none;}
+ol,ul {list-style: none;}
 blockquote, q {quotes: none;}
-blockquote::before, blockquote::after,
+blockquote::before, blockquote::after, q::before, q::after {content: '';content: none;}
-q::before, q::after {content: '';content: none;}
 table {border-collapse: collapse;border-spacing: 0;}
-a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;}
+a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline: none;}
-::-moz-focus-inner {
+::-moz-focus-inner {border: none;outline: none;}
-    border:none;outline:none;
-}
-body {font-family:Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
-code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
-[anot],[\:repeat],[\:if] {visibility:hidden;}
-
 
+body {font-family: 'Helvetica Neue', Arial, 'WenQuanYi Micro Hei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
+code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;white-space:pre-wrap;}
+[anot],[\:repeat],[\:if] {visibility: hidden;}
 
 .noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
-.noselect img, .noselect a {-webkit-user-drag:none;}
+.noselect img, .noselect a {-webkit-user-drag: none;}
-.text-ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
+.text-ell {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
-.osx-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
+.text-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
-
 
+:root {
+  /* primary */
+  --color-teal-a: rgba(72, 201, 176, 0.35);
+  --color-teal-1: rgb(72, 201, 176);
+  --color-teal-2: rgb(26, 188, 156);
+  --color-teal-3: rgb(22, 160, 133);
+  /* success */
+  --color-green-a: rgba(70, 221, 126, 0.35);
+  --color-green-1: rgb(70, 221, 126);
+  --color-green-2: rgb(47, 208, 105);
+  --color-green-3: rgb(26, 196, 88);
+  /* info */
+  --color-blue-a: rgba(100, 181, 246, 0.35);
+  --color-blue-1: rgb(100, 181, 246);
+  --color-blue-2: rgb(66, 165, 245);
+  --color-blue-3: rgb(33, 150, 243);
+  /* danger */
+  --color-red-a: rgba(252, 118, 97, 0.35);
+  --color-red-1: #fc7661;
+  --color-red-2: #ff5f45;
+  --color-red-3: #f33e22;
+  /* warning */
+  --color-orange-a: rgba(254, 174, 117, 0.35);
+  --color-orange-1: #feae75;
+  --color-orange-2: #fd964b;
+  --color-orange-3: #f97316;
+  /* default1 */
+  --color-plain-a: rgba(150, 204, 248, 0.35);
+  --color-plain-1: rgb(242, 245, 252);
+  --color-plain-2: rgb(232, 235, 244);
+  --color-plain-3: rgb(218, 225, 233);
+  /* default2 */
+  --color-grey-a: rgba(206, 214, 224, 0.35);
+  --color-grey-1: rgb(206, 214, 224);
+  --color-grey-2: rgb(164, 176, 190);
+  --color-grey-3: rgb(134, 144, 155);
+  /* inverse */
+  --color-dark-a: rgba(100, 116, 139, 0.35);
+  --color-dark-1: #64748B;
+  --color-dark-2: #475569;
+  --color-dark-3: #2c3441;
+}

src/index.html

@@ -16,55 +16,14 @@
   </div>
 
   <div class="title-bar app-drag">
-
+    <div class="btns active">
+      <a class="btn close"></a>
+      <a class="btn mini"></a>
+    </div>
   </div>
 
   <main class="main-body">
-    <aside class="aside">
-      <fieldset class="playlist">
-        <legend>PLAYLISTS</legend>
-        <section class="item">Defaults</section>
-        <section class="item">Love</section>
-        <section class="item">Pop</section>
-        <section class="item">Light Music</section>
-        <button>+ new</button>
-      </fieldset>
 
-      <fieldset>
-        <legend>PREFERENCES</legend>
-        <section class="item">DSP</section>
-      </fieldset>
-    </aside>
-
-    <div class="song-box">
-      <div class="preview" :visible="curr > -1">
-        <div class="album">
-          <img :src="preview.cover || defaultCover">
-        </div>
-        <div class="info">
-          <strong :text="preview.name"></strong>
-          <cite :text="preview.artist || '未知歌手'"></cite>
-          <p :text="preview.album || '未知专辑'"></p>
-        </div>
-
-        <span class="total" :text="list.size()"></span>
-      </div>
-      <div class="scroll-box">
-        <wc-scroll class="list" ref="list">
-          <section 
-            class="item" 
-            @click="previewSong(it, i)"
-            @dblclick="playSong(i)"
-            :class="{on: curr === i}" 
-            :for="i it in list">
-            <span class="idx" :text="i + 1"></span>
-            <span class="name text-ell" :text="it.name"></span>
-            <span class="artist text-ell" :text="it.artist || '未知歌手'"></span>
-            <span class="duration" :text="it.duration | time"></span>
-          </section>
-        </wc-scroll>
-      </div>
-    </div>
   </main>
 
   <div class="play-bar">
@@ -78,10 +37,7 @@
     </section>
 
     <section class="ctrl-box">
-      <div class="info">
+      <wc-icon is="menu-dot"></wc-icon>
-        <strong :text="song.name"></strong>
-        <cite :text="song.artist || '未知歌手'"></cite>
-      </div>
 
       <div class="play-btn">
         <a class="item prev" @click="play(-1)"></a>
@@ -92,8 +48,6 @@
         <a class="item next" @click="play(1)"></a>
       </div>
 
-      <div class="holder"></div>
-
       <div class="play-action">
         <item class="item" :class="{
             all: playmode === 1,
@@ -111,7 +65,21 @@
       </div>
     </section>
   </div>
-
+ <div class="scroll-box">
+        <wc-scroll class="list" ref="list">
+          <section 
+            class="item" 
+            @click="previewSong(it, i)"
+            @dblclick="playSong(i)"
+            :class="{on: curr === i}" 
+            :for="i it in list">
+            <span class="idx" :text="i + 1"></span>
+            <span class="name text-ell" :text="it.name"></span>
+            <span class="artist text-ell" :text="it.artist || '未知歌手'"></span>
+            <span class="duration" :text="it.duration | time"></span>
+          </section>
+        </wc-scroll>
+      </div>
 </div>
 
 </body>

src/js/app.js

@@ -6,6 +6,7 @@
 
 import Anot from '/js/lib/anot.js'
 import '/js/lib/scroll/index.js'
+import '/js/lib/icon/index.js'
 
 import Keyboard from '/js/lib/keyboard/index.js'
 // import app from '/js/lib/socket.js'
@@ -51,18 +52,18 @@ Anot({
     list: []
   },
   async mounted() {
-    var list = app.dispatch('get-all-songs')
+    // var list = app.dispatch('get-all-songs')
     // var list = app.dispatch('scan-dir', { dir: '/Volumes/ooc/music' })
 
-    app.on('tray-play', ev => {
+    // app.on('tray-play', ev => {
-      this.play(0)
+    //   this.play(0)
-    })
+    // })
-    app.on('tray-prev', ev => {
+    // app.on('tray-prev', ev => {
-      this.play(-1)
+    //   this.play(-1)
-    })
+    // })
-    app.on('tray-next', ev => {
+    // app.on('tray-next', ev => {
-      this.play(1)
+    //   this.play(1)
-    })
+    // })
 
     kb.on(['left'], ev => {
       var time = this.song.time - 5
@@ -110,10 +111,10 @@ Anot({
     // }
 
     // console.log(list)
-    this.list = list
+    // this.list = list
 
     player.volume = this.volume / 100
-    player.load(list.map(it => `sonist://${it.file_path}`))
+    // player.load(list.map(it => `sonist://${it.file_path}`))
 
     player.on('play', time => {
       this.song.time = time
@@ -138,19 +139,6 @@ Anot({
 
       this.playSong(idx, repeat)
     })
-
-    window.foo = _ => {
-      var n = 128,
-        t
-      t = setInterval(() => {
-        n--
-        this.play(1)
-        if (n < 0) {
-          clearInterval(t)
-        }
-      }, 100)
-    }
-    // foo()
   },
   watch: {
     volume(v) {

src/js/lib/audio/index.js

@@ -7,8 +7,7 @@
 import $ from '../utils.js'
 import fetch from '../fetch/index.js'
 
-const { EventEmitter } = require('events')
+import Events from '../events.js'
-const util = require('util')
 
 const AC = new AudioContext()
 
@@ -21,8 +20,10 @@ function hide(target, key, value) {
   })
 }
 
-class AudioTrack {
+class AudioTrack extends Events {
   constructor(elem) {
+    super()
+
     this._el = elem
 
     this.gain = AC.createGain()
@@ -34,10 +35,10 @@ class AudioTrack {
     this.gain.connect(AC.destination)
 
     this.__playFn = $.bind(elem, 'timeupdate', _ => {
-      this.emit('play', elem.currentTime)
+      this.$emit('play', elem.currentTime)
     })
     this.__stopFn = $.bind(elem, 'ended', _ => {
-      this.emit('stop')
+      this.$emit('stop')
     })
   }
 
@@ -67,8 +68,10 @@ class AudioTrack {
   }
 }
 
-export default class Player {
+export default class Player extends Events {
   constructor() {
+    super()
+
     hide(this, '__LIST__', [])
     hide(this, 'props', {
       curr: '',
@@ -87,15 +90,13 @@ export default class Player {
   async _getTrack(file) {
     hide(this, '__AUDIO__', new Audio())
 
-    this.__AUDIO__.src = URL.createObjectURL(
+    this.__AUDIO__.src = URL.createObjectURL(await fetch(file).then(r => r.blob()))
-      await fetch(file).then(r => r.blob())
-    )
 
     this.track = new AudioTrack(this.__AUDIO__)
     this.track.volume = this.props.volume
 
-    this.track.on('play', t => this.emit('play', t))
+    this.track.$on('play', t => this.$emit('play', t))
-    this.track.on('stop', _ => this.emit('stop'))
+    this.track.$on('stop', _ => this.$emit('stop'))
   }
 
   get volume() {
@@ -174,6 +175,3 @@ export default class Player {
     }
   }
 }
-
-util.inherits(AudioTrack, EventEmitter)
-util.inherits(Player, EventEmitter)

src/js/lib/drag/core.js

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

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 @@
-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})}});
+import a 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}, \u89E3\u6790\u5F02\u5E38[\u5143\u7D20\u4E0D\u5B58\u5728]`),t.tagName==="WC-LAYER"&&e==="layer"){t=t.root.children[1];break}if(t.classList.contains(e)||t.id===e)break;t=t.parentNode}new a(t).by(this.element,{limit:this.limit,axis:this.axis,overflow:this.overflow})}});

src/js/lib/events.js

@@ -0,0 +1,38 @@
+export default class EventEmitter {
+  //
+  #events = Object.create(null)
+
+  $on(name, fn) {
+    if (this.#events[name]) {
+      this.#events[name].push(fn)
+    } else {
+      this.#events[name] = [fn]
+    }
+  }
+
+  $off(name, fn) {
+    if (this.#events[name]) {
+      if (fn) {
+        this.#events[name] = this.#events[name].filter(it => it !== fn)
+      } else {
+        this.#events[name] = []
+      }
+    }
+  }
+
+  $emit(name, ...args) {
+    if (this.#events[name]) {
+      for (let fn of this.#events[name]) {
+        try {
+          fn.apply(this, args)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }
+  }
+
+  $destroy() {
+    this.#events = Object.create(null)
+  }
+}

src/js/lib/form/cascader.js

@@ -0,0 +1,10 @@
+/**
+  *
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2022-09-12 18:13:11
+  * @version v1.0.6
+  * 
+  */
+
+customElements.get("wc-")||customElements.define("wc-");
+

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

@@ -1,13 +1,10 @@
 /**
   *
   * @authors yutent (yutent.io@gmail.com)
-  * @date    2020-11-17 09:10:37
+  * @date    2022-09-12 18:13:11
-  * @version v1.0.0
+  * @version v1.0.6
   * 
   */
 
-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}}}
+var d=Object.defineProperty;var n=(r,o,e)=>o in r?d(r,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[o]=e;var l=(r,o,e)=>(n(r,typeof o!="symbol"?o+"":o,e),e);import"../icon/index.js";import s from"../utils.js";class c extends HTMLElement{constructor(){super();l(this,"props",{value:"",checked:!1,readonly:!1,disabled:!1});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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;align-items:center;line-height:1;font-size:14px;cursor:pointer}:host label{display:flex;justify-content:center;align-items:center;min-width:32px;height:32px;padding-right:16px;line-height:1;-moz-user-select:none;user-select:none;white-space:nowrap;cursor:inherit;outline:none;color:var(--color-dark-1)}:host label.checked .dot{background:var(--color-dark-1)}:host label.checked .dot wc-icon{--size: 14px}:host .dot{display:flex;justify-content:center;align-items:center;width:16px;height:16px;margin-right:4px;border:1px solid var(--color-dark-1);border-radius:4px;background:#fff;color:#fff;transition:box-shadow .15s linear,background .15s linear}:host .dot wc-icon{--size: 0px;transition:width .15s linear}:host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-plain-a)}:host([type=danger]) label{color:var(--color-red-1)}:host([type=danger]) label .dot{border-color:var(--color-red-1)}:host([type=danger]) label.checked .dot{background:var(--color-red-1)}:host([type=danger]:focus-within) .dot{box-shadow:0 0 0 2px var(--color-red-a)}:host([type=info]) label{color:var(--color-blue-1)}:host([type=info]) label .dot{border-color:var(--color-blue-1)}:host([type=info]) label.checked .dot{background:var(--color-blue-1)}:host([type=info]:focus-within) .dot{box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]) label{color:var(--color-green-1)}:host([type=success]) label .dot{border-color:var(--color-green-1)}:host([type=success]) label.checked .dot{background:var(--color-green-1)}:host([type=success]:focus-within) .dot{box-shadow:0 0 0 2px var(--color-green-a)}:host([type=primary]) label{color:var(--color-teal-1)}:host([type=primary]) label .dot{border-color:var(--color-teal-1)}:host([type=primary]) label.checked .dot{background:var(--color-teal-1)}:host([type=primary]:focus-within) .dot{box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=warning]) label{color:var(--color-orange-1)}:host([type=warning]) label .dot{border-color:var(--color-orange-1)}:host([type=warning]) label.checked .dot{background:var(--color-orange-1)}:host([type=warning]:focus-within) .dot{box-shadow:0 0 0 2px var(--color-orange-a)}:host([readonly]){cursor:default;opacity:.8}:host([disabled]){cursor:not-allowed;opacity:.6}:host([disabled]) label{color:var(--color-grey-2)}</style> <label tabindex="0"> <span class="dot"><wc-icon is="get"></wc-icon></span> <slot /> </label> ',this.__SWITCH__=this.root.lastElementChild,this.__ICO__=this.__SWITCH__.children[0],this._isInGroup=!1}static get observedAttributes(){return["value","checked","readonly","disabled"]}_checkGroup(){this._isInGroup=this.parentNode.tagName==="WC-CHECKBOX-GROUP",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,this.__SWITCH__.classList.toggle("checked",this.props.checked)}get readOnly(){return this.props.readonly}set readOnly(e){var t=typeof e;e!==this.props.readonly&&(t==="boolean"&&e||t!=="boolean"?(this.props.readonly=!0,this.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&(t==="boolean"&&e||t!=="boolean"?(this.props.disabled=!0,this.setAttribute("disabled",""),this.__SWITCH__.removeAttribute("tabindex")):(this.props.disabled=!1,this.removeAttribute("disabled")))}_toggleCheck(){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")))}connectedCallback(){this._checkGroup(),this._handlClick=s.bind(this,"click",e=>{e.stopPropagation(),this._toggleCheck()}),this._handlKeydown=s.bind(this,"keydown",e=>{e.keyCode===32&&this._toggleCheck()})}disconnectedCallback(){s.unbind(this,"click",this._handlClick),s.unbind(this,"keydown",this._handlKeydown)}attributeChangedCallback(e,t,a){if(t!==a)switch(e){case"value":this.props[e]=a;break;case"checked":case"readonly":case"disabled":var i=e;i==="readonly"&&(i="readOnly"),this[i]=a!==null;break}}}customElements.get("wc-checkbox")||customElements.define("wc-checkbox",c);export{c as default};
 
-if(!customElements.get('wc-checkbox-item')){
-  customElements.define('wc-checkbox-item', CheckboxItem)
-}

src/js/lib/form/checkbox.js

@@ -1,13 +1,10 @@
 /**
   *
   * @authors yutent (yutent.io@gmail.com)
-  * @date    2020-11-17 09:10:37
+  * @date    2022-09-12 18:13:11
-  * @version v1.0.0
+  * @version v1.0.6
   * 
   */
 
-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*?/))}}}
+var u=Object.defineProperty;var h=(i,r,e)=>r in i?u(i,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[r]=e;var l=(i,r,e)=>(h(i,typeof r!="symbol"?r+"":r,e),e);import d from"../utils.js";import"./checkbox-item.js";class o extends HTMLElement{constructor(){super();l(this,"props",{value:"",disabled:!1,readonly:!1});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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;flex-wrap:wrap}</style> <slot /> "}static get observedAttributes(){return["value","disabled","readonly"]}_updateChildrenStat(e){Array.from(this.children).forEach(t=>{t.tagName==="WC-CHECKBOX"?t.root&&(e&&(t.disabled=this.disabled,t.readOnly=this.readOnly),this.value.includes(t.value)?t.checked=!0:t.checked=!1):t.remove()})}get value(){return this.props.value}set value(e){e!==this.props.value&&(this.props.value=[...e],this._updateChildrenStat())}get readOnly(){return this.props.readonly}set readOnly(e){var t=typeof e;e!==this.props.readonly&&(t==="boolean"&&e||t!=="boolean"?(this.props.readonly=!0,this.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly")),this._updateChildrenStat(!0))}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&(t==="boolean"&&e||t!=="boolean"?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")),this._updateChildrenStat(!0))}connectedCallback(){this._pickedFn=d.bind(this,"child-picked",e=>{var t=[...this.props.value],s=t.indexOf(e.detail.value);e.detail.checked?s<0&&t.push(e.detail.value):~s&&t.splice(s,1),this.value=t,this.dispatchEvent(new CustomEvent("input"))}),this.__observer=new MutationObserver(e=>{this._updateChildrenStat(!0)}),this.__observer.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){d.unbind(this,"child-picked",this._pickedFn),this.__observer.disconnect()}attributeChangedCallback(e,t,s){if(t!==s)switch(e){case"value":s&&(this.value=s.split(",").map(n=>n.trim()));break;case"readonly":case"disabled":var a=e;a==="readonly"&&(a="readOnly"),this[a]=s!==null;break}}}customElements.get("wc-checkbox-group")||customElements.define("wc-checkbox-group",o);export{o as default};
 
-if(!customElements.get('wc-checkbox')){
-  customElements.define('wc-checkbox', Checkbox)
-}

src/js/lib/form/dropdown.js

@@ -0,0 +1,10 @@
+/**
+  *
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2022-09-12 18:13:11
+  * @version v1.0.6
+  * 
+  */
+
+var h=Object.defineProperty;var d=(r,t,e)=>t in r?h(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var a=(r,t,e)=>(d(r,typeof t!="symbol"?t+"":t,e),e);import"../icon/index.js";import"./option.js";import o from"../utils.js";class n extends HTMLElement{constructor(){super();a(this,"props",{value:"",placeholder:"",size:"",disabled:!1});a(this,"state",{optionShow:!1});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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;min-width:128px;height:36px;border-radius:3px;user-select:none;-moz-user-select:none;color:var(--color-dark-1);font-size:14px;cursor:pointer;transition:box-shadow .15s linear}:host .label{position:relative;display:flex;width:100%;height:100%;line-height:1;border:1px solid var(--color-grey-2);border-radius:inherit;white-space:nowrap;background:#fff;cursor:inherit;transition:background .15s linear}:host .preview{display:flex;align-items:center;width:100%;height:100%;padding:0 8px}:host .preview input{flex:1;width:0;border:0;font:inherit;color:inherit;background:none;outline:none;cursor:inherit}:host .preview input::placeholder{color:var(--color-grey-1)}:host .preview wc-icon{--size: 14px;color:var(--color-grey-2)}:host .options-box{overflow:hidden;visibility:hidden;position:absolute;left:0;top:36px;z-index:99;width:100%;height:0;border-radius:3px;background:#fff;box-shadow:0 3px 5px rgba(0,0,0,.15);transition:height .15s linear}:host .options-box.active{visibility:visible;height:auto;padding:6px 0}:host([size=large]){min-width:234px;height:52px;font-size:18px}:host([size=large]) .options-box{top:52px}:host([size=medium]){min-width:160px;height:44px}:host([size=medium]) .options-box{top:44px}:host([size=small]){min-width:96px;height:32px}:host([size=small]) .options-box{top:32px}:host([size=mini]){min-width:72px;height:26px;font-size:12px}:host([size=mini]) .preview wc-icon{--size: 10px}:host([size=mini]) .options-box{top:26px}:host(:focus-within){box-shadow:0 0 0 2px var(--color-plain-a)}:host([disabled]){cursor:not-allowed}:host([disabled]) .label{border-color:var(--color-grey-1);background:var(--color-plain-1);opacity:.6}</style> <div class="label"> <section class="preview"> <input readonly /> <wc-icon is="trigon-down"></wc-icon> </section> <div class="options-box"><slot /></div> </div> ';var e=this.root.children[1];this.__PREVIEW__=e.children[0],this.__OPTIONS__=e.children[1],this.__INPUT__=this.__PREVIEW__.children[0],this.__ICO__=this.__PREVIEW__.children[1]}static get observedAttributes(){return["value","placeholder","size","disabled"]}_updateChildrenStat(){Array.from(this.children).forEach(e=>{e.tagName==="WC-OPTION"?e.root&&(e.value===this.props.value?(e.setAttribute("active",""),this.__INPUT__.value=e.label||e.textContent):e.removeAttribute("active")):e.remove()})}get value(){return this.props.value}set value(e){this.props.value=e,this._updateChildrenStat()}get disabled(){return this.props.disabled}set disabled(e){var i=typeof e;e!==this.props.disabled&&(i==="boolean"&&e||i!=="boolean"?(this.props.disabled=!0,this.setAttribute("disabled",""),this.__INPUT__.disabled=!0):(this.props.disabled=!1,this.removeAttribute("disabled"),this.__INPUT__.disabled=!1))}connectedCallback(){this._activeFn=o.bind(this.__PREVIEW__,"click",e=>{this.disabled||(this.state.optionShow=!this.state.optionShow,this.__OPTIONS__.classList.toggle("active",this.state.optionShow))}),this._pickedFn=o.bind(this.__OPTIONS__,"click",e=>{let i=e.target;if(i!==e.currentTarget){for(;i.tagName!=="WC-OPTION";)i=i.parentNode;this.props.value=i.value,this._updateChildrenStat(),this.dispatchEvent(new CustomEvent("input")),this.state.optionShow=!1,this.__OPTIONS__.classList.toggle("active",!1)}}),this._inactiveFn=o.outside(this,e=>{this.state.optionShow=!1,this.__OPTIONS__.classList.toggle("active",!1)}),o.nextTick(e=>this._updateChildrenStat())}disconnectedCallback(){this.state.options=[],o.unbind(this.__PREVIEW__,"click",this._activeFn),o.unbind(this.__OPTIONS__,"click",this._pickedFn),o.clearOutside(this._inactiveFn)}attributeChangedCallback(e,i,s){if(i!==s)switch(e){case"value":s!==null&&(this.value=s);break;case"placeholder":this.__INPUT__.placeholder=s||"";break;case"size":s&&Array.from(this.children).forEach(l=>{l.setAttribute("size",s)});break;case"disabled":this.disabled=s!==null;break}}}customElements.get("wc-dropdown")||customElements.define("wc-dropdown",n);export{n as default};
+

src/js/lib/form/index.js

@@ -0,0 +1 @@
+import"./button.js";import"./link.js";import"./input.js";import"./passwd.js";import"./textarea.js";import"./number.js";import"./radio.js";import"./checkbox.js";import"./switch.js";import"./select.js";import"./dropdown.js";import"./star.js";

src/js/lib/form/option.js

@@ -0,0 +1,10 @@
+/**
+  *
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2022-09-12 18:13:11
+  * @version v1.0.6
+  * 
+  */
+
+var n=Object.defineProperty;var b=(s,t,e)=>t in s?n(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var r=(s,t,e)=>(b(s,typeof t!="symbol"?t+"":t,e),e);import o from"../utils.js";class a extends HTMLElement{constructor(){super();r(this,"props",{value:"",label:"",disabled:!1});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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;justify-content:space-between;align-items:center;height:36px;transition:background .15s linear;color:var(--color-dark-1);cursor:pointer}:host label{flex:1;display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 8px;cursor:inherit}:host([size=large]){height:52px}:host([size=medium]){height:44px}:host([size=small]){height:32px}:host([size=mini]){height:26px}:host(:hover) label,:host([active]) label{background:var(--color-plain-1)}:host([disabled]){color:var(--color-grey-1);opacity:.6;cursor:not-allowed}</style> <label><slot /></label> ",this.__LABEL__=this.root.children[1]}static get observedAttributes(){return["value","label","disabled"]}get value(){return this.props.value}set value(e){e!==this.props.value&&(this.props.value=e)}get label(){return this.props.label}set label(e){e!==this.props.label&&(this.props.label=e,this.__LABEL__.textContent=e)}get disabled(){return this.props.disabled}set disabled(e){var i=typeof e;e!==this.props.disabled&&(i==="boolean"&&e||i!=="boolean"?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}connectedCallback(){this._clickFn=o.bind(this,"click",e=>{this.disabled&&e.stopPropagation()})}disconnectedCallback(){o.unbind(this,"click",this._clickFn)}attributeChangedCallback(e,i,l){if(i!==l)switch(e){case"value":case"label":l===null?this[e]="":this[e]=l;break;case"disabled":this.disabled=l!==null;break}}}customElements.get("wc-option")||customElements.define("wc-option",a);export{a as default};
+

src/js/lib/form/progress.js

@@ -1,13 +0,0 @@
-/**
-  *
-  * @authors yutent (yutent.io@gmail.com)
-  * @date    2020-11-17 09:10:37
-  * @version v1.0.0
-  * 
-  */
-
-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

@@ -1,13 +1,10 @@
 /**
   *
   * @authors yutent (yutent.io@gmail.com)
-  * @date    2020-11-17 09:10:37
+  * @date    2022-09-12 18:13:11
-  * @version v1.0.0
+  * @version v1.0.6
   * 
   */
 
-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}}}
+var n=Object.defineProperty;var c=(r,o,e)=>o in r?n(r,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[o]=e;var i=(r,o,e)=>(c(r,typeof o!="symbol"?o+"":o,e),e);import a from"../utils.js";class d extends HTMLElement{constructor(){super();i(this,"props",{value:"",checked:!1,readonly:!1,disabled:!1});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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;align-items:center;line-height:1;font-size:14px;cursor:pointer}:host label{display:flex;justify-content:center;align-items:center;min-width:32px;padding-right:16px;line-height:1;-moz-user-select:none;user-select:none;white-space:nowrap;cursor:inherit;outline:none;color:var(--color-dark-1)}:host label.checked .dot::after{visibility:visible;transform:scale(1)}:host .dot{display:flex;justify-content:center;align-items:center;width:16px;height:16px;margin-right:4px;border:1px solid var(--color-dark-1);border-radius:50%;background:#fff;transition:box-shadow .15s linear}:host .dot::after{display:block;visibility:hidden;width:6px;height:6px;border-radius:50%;background:var(--color-dark-1);content:"";transform:scale(0);transition:transform .15s linear}:host(:focus-within) .dot{box-shadow:0 0 0 2px var(--color-plain-a)}:host([type=danger]) label{color:var(--color-red-1)}:host([type=danger]) label .dot{border-color:var(--color-red-1)}:host([type=danger]) label .dot::after{background:var(--color-red-1)}:host([type=danger]:focus-within) .dot{box-shadow:0 0 0 2px var(--color-red-a)}:host([type=success]) label{color:var(--color-green-1)}:host([type=success]) label .dot{border-color:var(--color-green-1)}:host([type=success]) label .dot::after{background:var(--color-green-1)}:host([type=success]:focus-within) .dot{box-shadow:0 0 0 2px var(--color-green-a)}:host([type=primary]) label{color:var(--color-teal-1)}:host([type=primary]) label .dot{border-color:var(--color-teal-1)}:host([type=primary]) label .dot::after{background:var(--color-teal-1)}:host([type=primary]:focus-within) .dot{box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=warning]) label{color:var(--color-orange-1)}:host([type=warning]) label .dot{border-color:var(--color-orange-1)}:host([type=warning]) label .dot::after{background:var(--color-orange-1)}:host([type=warning]:focus-within) .dot{box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=info]) label{color:var(--color-blue-1)}:host([type=info]) label .dot{border-color:var(--color-blue-1)}:host([type=info]) label .dot::after{background:var(--color-blue-1)}:host([type=info]:focus-within) .dot{box-shadow:0 0 0 2px var(--color-blue-a)}:host([readonly]){cursor:default;opacity:.8}:host([disabled]){cursor:not-allowed;opacity:.6}:host([disabled]) label{color:var(--color-grey-2)}:host([disabled]) label .dot{border-color:var(--color-grey-1);box-shadow:none}:host([disabled]) label .dot::after{background:var(--color-grey-1)}</style> <label tabindex="0"> <span class="dot"></span> <slot /> </label> ',this.__SWITCH__=this.root.lastElementChild}static get observedAttributes(){return["value","checked","readonly","disabled"]}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 t=typeof e;e!==this.props.readonly&&(t==="boolean"&&e||t!=="boolean"?(this.props.readonly=!0,this.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&(t==="boolean"&&e||t!=="boolean"?(this.props.disabled=!0,this.setAttribute("disabled",""),this.__SWITCH__.removeAttribute("tabindex")):(this.props.disabled=!1,this.removeAttribute("disabled")))}_toggleCheck(){this.disabled||this.readOnly||this.checked||(this.checked=!0,this.parentNode.dispatchEvent(new CustomEvent("child-picked",{detail:this.value})))}connectedCallback(){this.value===this.parentNode.value&&(this.checked=!0),this._handleClick=a.catch(this,"click",e=>{e.stopPropagation(),this._toggleCheck()}),this._handlKeydown=a.bind(this,"keydown",e=>{e.keyCode===32&&this._toggleCheck()})}disconnectedCallback(){a.unbind(this,"click",this._handleClick),a.unbind(this,"keydown",this._handlKeydown)}attributeChangedCallback(e,t,s){if(t!==s)switch(e){case"value":this.value=s;break;case"checked":case"readonly":case"disabled":var l=e;l==="readonly"&&(l="readOnly"),this[l]=s!==null;break}}}customElements.get("wc-radio")||customElements.define("wc-radio",d);export{d as default};
 
-if(!customElements.get('wc-radio-item')){
-  customElements.define('wc-radio-item', RadioItem)
-}

src/js/lib/form/radio.js

@@ -1,13 +1,10 @@
 /**
   *
   * @authors yutent (yutent.io@gmail.com)
-  * @date    2020-11-17 09:10:37
+  * @date    2022-09-12 18:13:11
-  * @version v1.0.0
+  * @version v1.0.6
   * 
   */
 
-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}}}
+var n=Object.defineProperty;var u=(s,r,e)=>r in s?n(s,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[r]=e;var d=(s,r,e)=>(u(s,typeof r!="symbol"?r+"":r,e),e);import l from"../utils.js";import"./radio-item.js";class o extends HTMLElement{constructor(){super();d(this,"props",{value:null,disabled:!1,readonly:!1});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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;flex-wrap:wrap}</style> <slot /> "}static get observedAttributes(){return["value","disabled","readonly"]}_updateChildrenStat(e){Array.from(this.children).forEach(t=>{t.tagName==="WC-RADIO"?t.root&&(e&&(t.disabled=this.disabled,t.readOnly=this.readOnly),t.value===this.props.value?t.checked=!0:t.checked=!1):t.remove()})}get value(){return this.props.value}set value(e){e!==this.props.value&&(this.props.value=e,this._updateChildrenStat())}get readOnly(){return this.props.readonly}set readOnly(e){var t=typeof e;e!==this.props.readonly&&(t==="boolean"&&e||t!=="boolean"?(this.props.readonly=!0,this.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly")),this._updateChildrenStat(!0))}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&(t==="boolean"&&e||t!=="boolean"?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")),this._updateChildrenStat(!0))}connectedCallback(){this._pickedFn=l.bind(this,"child-picked",e=>{this.value=e.detail,this.dispatchEvent(new CustomEvent("input"))}),this.__observer=new MutationObserver(e=>{this._updateChildrenStat(!0)}),this.__observer.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){l.unbind(this,"child-picked",this._pickedFn),this.__observer.disconnect()}attributeChangedCallback(e,t,i){if(t!==i)switch(e){case"value":this.value=i;break;case"readonly":case"disabled":var a=e;a==="readonly"&&(a="readOnly"),this[a]=i!==null;break}}}customElements.get("wc-radio-group")||customElements.define("wc-radio-group",o);export{o as default};
 
-if(!customElements.get('wc-radio')){
-  customElements.define('wc-radio', Radio)
-}

src/js/lib/form/star.js

@@ -1,13 +1,10 @@
 /**
   *
   * @authors yutent (yutent.io@gmail.com)
-  * @date    2020-11-17 09:10:37
+  * @date    2022-09-12 18:13:11
-  * @version v1.0.0
+  * @version v1.0.6
   * 
   */
 
-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}}}
+var _=Object.defineProperty;var d=(a,i,t)=>i in a?_(a,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[i]=t;var n=(a,i,t)=>(d(a,typeof i!="symbol"?i+"":i,t),t);import o from"../utils.js";class h extends HTMLElement{constructor(){super();n(this,"props",{value:0,text:[],size:"","default-color":null,colors:"","allow-half":!1,"show-value":!1,starSize:32,disabled:!1});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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;font-size:18px;cursor:pointer;--size: 36px}label{display:flex;align-items:center;line-height:1;color:var(--color-grey-1);cursor:inherit}label wc-icon{margin:0 3px;transition:transform .15s linear,color .15s linear}label wc-icon[is=star]{color:var(--default-color, inherit)}label wc-icon[is=star-full],label wc-icon[is=star-half]{color:var(--color-teal-1)}label wc-icon:hover{transform:scale(1.05)}label span{padding:2px 8px 0;margin:0 6px}:host([size=large]){font-size:26px;--size: 52px}:host([size=medium]){font-size:22px;--size: 44px}:host([size=small]){font-size:16px;--size: 32px}:host([size=mini]){font-size:14px;--size: 26px}:host([disabled]){cursor:default;opacity:.6}:host([disabled]) label wc-icon:hover{transform:none}</style> <label> <wc-icon data-idx="0" is="star"></wc-icon> <wc-icon data-idx="1" is="star"></wc-icon> <wc-icon data-idx="2" is="star"></wc-icon> <wc-icon data-idx="3" is="star"></wc-icon> <wc-icon data-idx="4" is="star"></wc-icon> <span class="text">5\u5206</span> </label> ',this.__BOX__=this.root.children[1],this.__STARS__=Array.from(this.__BOX__.children),this.__TEXT__=this.__STARS__.pop()}static get observedAttributes(){return["value","text","size","default-color","colors","allow-half","show-value","starSize","disabled"]}get value(){return this.props.value}set value(t){var e=+t,s=t>>0;e===e&&e>0?t=e:t=0,t>5&&(t=5),this.props.value=t,this._updateDraw(-1)}_updateDraw(t,e=0){var s="star-half",{value:r,tmp:l={i:0,f:0}}=this.props;t===-1&&(t=Math.floor(r),e=+(r%1).toFixed(1),t>0&&t===r&&(t--,e=1)),this.props["allow-half"]||(e=e>0?1:0),!(t===l.i&&e===l.f)&&(e>.5&&(s="star-full"),this.__STARS__.forEach((c,p)=>{c.setAttribute("is",p<t?"star-full":"star"),c.setAttribute("color",p<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},t===0&&e===0?this.__TEXT__.textContent="":this.props.text.length===5?this.__TEXT__.textContent=this.props.text[t]:this.props["show-value"]&&(this.__TEXT__.textContent=t+e))}connectedCallback(){o.catch(this.__BOX__,"mousemove",t=>{if(!this.props.disabled&&t.target.tagName==="WC-ICON"){let e=+t.target.dataset.idx;this._updateDraw(e,+(t.offsetX/this.props.starSize).toFixed(1))}}),o.catch(this.__BOX__,"click",t=>{var{tmp:e,disabled:s}=this.props;s||t.target.tagName==="WC-ICON"&&(this.props.value=e.i+e.f,this.dispatchEvent(new CustomEvent("input")))}),o.catch(this.__BOX__,"mouseleave",t=>{this.props.disabled||this._updateDraw(-1)})}attributeChangedCallback(t,e,s){if(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"default-color":s?this.__BOX__.style.cssText+=`--default-color:${s}`:this.__BOX__.style="";break;case"colors":s===null?this.props.colors=["#48c9b0"]:this.props.colors=s.split(",").map(r=>r.trim());break;case"text":s&&(s=s.split("|"),s.length===5&&(this.props.text=s.map(r=>r.trim())));break;case"value":this.value=s;break}}}customElements.get("wc-star")||customElements.define("wc-star",h);export{h as default};
 
-if(!customElements.get('wc-star')){
-  customElements.define('wc-star', Star)
-}

src/js/lib/form/switch.js

@@ -1,13 +1,10 @@
 /**
   *
   * @authors yutent (yutent.io@gmail.com)
-  * @date    2020-11-17 09:10:37
+  * @date    2022-09-12 18:13:11
-  * @version v1.0.0
+  * @version v1.0.6
   * 
   */
 
-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+""}}}
+var l=Object.defineProperty;var d=(i,t,e)=>t in i?l(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var a=(i,t,e)=>(d(i,typeof t!="symbol"?t+"":t,e),e);import c from"../utils.js";class o extends HTMLElement{constructor(){super();a(this,"props",{"active-text":null,"inactive-text":null,checked:!1,disabled:!1});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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;align-items:center}:host section{display:flex;justify-content:center;align-items:center;line-height:1;white-space:nowrap}:host label{display:flex;align-items:center;width:32px;height:18px;padding:3px;margin:5px;border-radius:21px;background:var(--color-plain-3);cursor:inherit}:host label.checked{flex-direction:row-reverse;background:var(--color-grey-3)}:host .dot{width:12px;height:12px;border-radius:50%;background:#fff}:host([disabled]){cursor:not-allowed;opacity:.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([type=danger]) label.checked{background:var(--color-red-1)}:host([type=info]) label.checked{background:var(--color-blue-1)}:host([type=success]) label.checked{background:var(--color-green-1)}:host([type=primary]) label.checked{background:var(--color-teal-1)}:host([type=warning]) label.checked{background:var(--color-orange-1)}:host([type=inverse]) label.checked{background:var(--color-dark-1)}:host([color=purple]) label.checked{background:var(--color-purple-1)}</style> <section> <label> <span class="dot"></span> </label> <slot></slot> </section> ',this.__SWITCH__=this.root.lastElementChild.firstElementChild}static get observedAttributes(){return["active-text","inactive-text","checked","disabled"]}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 s=typeof e;e!==this.props.disabled&&(s==="boolean"&&e||s!=="boolean"?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}_updateStat(){this.checked?this.props["active-text"]!==null&&(this.textContent=this.props["active-text"]):this.props["inactive-text"]!==null&&(this.textContent=this.props["inactive-text"])}connectedCallback(){this._handleClick=c.bind(this,"click",e=>{this.disabled||(this.checked=!this.checked,this._updateStat(),this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){c.unbind(this,"click",this._handleClick)}attributeChangedCallback(e,s,r){if(s!==r)switch(e){case"checked":case"disabled":this[e]=r!==null;break;case"active-text":case"inactive-text":this.props[e]=r+"",this._updateStat();break}}}customElements.get("wc-switch")||customElements.define("wc-switch",o);export{o as default};
 
-if(!customElements.get('wc-switch')){
-  customElements.define('wc-switch', Switch)
-}

src/js/lib/form/textarea.js

@@ -0,0 +1,10 @@
+/**
+  *
+  * @authors yutent (yutent.io@gmail.com)
+  * @date    2022-09-12 18:13:11
+  * @version v1.0.6
+  * 
+  */
+
+var b=Object.defineProperty;var c=(s,r,e)=>r in s?b(s,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[r]=e;var h=(s,r,e)=>(c(s,typeof r!="symbol"?r+"":r,e),e);import n from"../utils.js";class d extends HTMLElement{constructor(){super();h(this,"props",{value:"",placeholder:"",maxlength:0,minlength:0,autofocus:!1,readonly:!1,disabled:!1,lazy:0});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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;width:100%;height:80px;user-select:none;-moz-user-select:none;color:var(--color-dark-1);border-radius:3px;cursor:text;transition:box-shadow .15s linear}.label{position:relative;width:100%;height:100%;font-size:14px;border:1px solid var(--color-grey-2);border-radius:inherit;background:var(--bg-color, #fff);color:inherit;cursor:inherit}.label textarea{flex:1;min-width:36px;width:100%;height:100%;padding:5px 8px;border:0;border-radius:inherit;color:inherit;font:inherit;background:none;outline:none;box-shadow:none;cursor:inherit;resize:none}.label textarea::placeholder{color:var(--color-grey-1)}.label .input-stat{display:none;position:absolute;right:4px;bottom:2px;z-index:1;line-height:1;font-size:12px;color:var(--color-grey-2)}:host([show-limit]) .label{padding-bottom:14px}:host([show-limit]) .label .input-stat{display:block}:host([disabled]){cursor:not-allowed}:host([disabled]) .label{background:var(--color-plain-1);opacity:.6}:host([readonly]){cursor:default}:host(:focus-within){box-shadow:0 0 0 2px var(--color-plain-a)}:host([type=primary]:focus-within){box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]:focus-within){box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]:focus-within){box-shadow:0 0 0 2px var(--color-green-a)}:host([type=danger]:focus-within){box-shadow:0 0 0 2px var(--color-red-a)}:host([type=warning]:focus-within){box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=primary]) .label{border-color:var(--color-teal-2)}:host([type=info]) .label{border-color:var(--color-blue-2)}:host([type=success]) .label{border-color:var(--color-green-2)}:host([type=danger]) .label{border-color:var(--color-red-2)}:host([type=warning]) .label{border-color:var(--color-orange-2)}:host([no-border]),:host(:focus-within[no-border]){box-shadow:none}:host([no-border]) .label,:host(:focus-within[no-border]) .label{border:0}</style> <div class="label"> <textarea spellcheck="false"></textarea> <div class="input-stat">0/\u221E</div> </div> ',this.__OUTER__=this.root.children[1],this.__INPUT__=this.__OUTER__.children[0],this.__STAT__=this.__OUTER__.children[1]}static get observedAttributes(){return["value","placeholder","maxlength","minlength","autofocus","readonly","disabled","lazy"]}get readOnly(){return this.props.readonly}set readOnly(e){var t=typeof e;e!==this.props.readonly&&(t==="boolean"&&e||t!=="boolean"?(this.props.readonly=!0,this.setAttribute("readonly",""),this.__INPUT__.setAttribute("readonly","")):(this.props.readonly=!1,this.removeAttribute("readonly"),this.__INPUT__.removeAttribute("readonly")))}get disabled(){return this.props.disabled}set disabled(e){var t=typeof e;e!==this.props.disabled&&(t==="boolean"&&e||t!=="boolean"?(this.props.disabled=!0,this.setAttribute("disabled",""),this.__INPUT__.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled"),this.__INPUT__.removeAttribute("disabled")))}get value(){return this.__INPUT__.value}set value(e){this.__INPUT__.value=e}connectedCallback(){this.stamp=0,this._handleSubmit=n.catch(this.__INPUT__,"keydown",e=>{let{minlength:t,lazy:o}=this.props,a=this.value,i=Date.now();if(e.keyCode===13&&(e.ctrlKey||e.metaKey)){if(this.disabled||this.readOnly||o&&i-this.stamp<o||t&&t>0&&a.length<t)return;this.stamp=i,this.dispatchEvent(new CustomEvent("submit",{detail:this.value}))}}),this._statFn=n.bind(this.__INPUT__,"input,change",e=>{let{maxlength:t}=this.props,o=this.value.length;t=t||"\u221E",this.__STAT__.textContent=`${o}/${t}`})}disconnectedCallback(){n.unbind(this.__INPUT__,"keydown",this._handleSubmit),n.unbind(this.__INPUT__,"input,change",this._statFn)}attributeChangedCallback(e,t,o){if(t!==o)switch(e){case"autofocus":this.__INPUT__.setAttribute("autofocus",""),setTimeout(i=>{this.__INPUT__.focus()},10);break;case"placeholder":this.__INPUT__.setAttribute("placeholder",o);break;case"value":this.value=o||"";break;case"maxlength":{let i=this.value.length;if(o===null)this.__INPUT__.removeAttribute(e),this.props.maxlength=0,this.__STAT__.textContent=`${i}/\u221E`;else{let l=+o;l>0?(this.__INPUT__.setAttribute(e,l),this.props.maxlength=l,this.__STAT__.textContent=`${i}/${l}`):this.removeAttribute(e)}}break;case"lazy":this.props.lazy=o>>0;break;case"readonly":case"disabled":var a=e;a==="readonly"&&(a="readOnly"),this[a]=o!==null;break}}}customElements.get("wc-textarea")||customElements.define("wc-textarea",d);export{d as default};
+

src/js/lib/icon/index.js

@@ -1,13 +1,10 @@
 /**
   *
   * @authors yutent (yutent.io@gmail.com)
-  * @date    2020-11-17 09:10:37
+  * @date    2022-09-12 18:13:11
-  * @version v1.0.0
+  * @version v1.0.6
   * 
   */
 
-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")}}}
+var n=Object.defineProperty;var l=(e,i,t)=>i in e?n(e,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[i]=t;var o=(e,i,t)=>(l(e,typeof i!="symbol"?i+"":i,t),t);import d from"./svg.js";let a=d;window.EXT_SVG_DICT&&Object.assign(a,EXT_SVG_DICT);class h extends HTMLElement{constructor(){super();o(this,"props",{is:""});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),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;width:var(--size, 36px);height:var(--size, 36px);color:inherit}:host(:not([is])){display:none}.icon{display:block;width:100%;height:100%;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]){width:52px;height:52px}:host([size=medium]){width:44px;height:44px}:host([size=small]){width:32px;height:32px}:host([size=mini]){width:26px;height:26px}@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()}static get observedAttributes(){return["is"]}get is(){return this.props.is}set is(t){t&&this.setAttribute("is",t)}drawPath(){var{is:t}=this.props,s=a[t];!this.__ICO__||t&&s&&(this.__ICO__.innerHTML=t==="loading"?s:`<path d="${s}" />`,this.__ICO__.classList.toggle("load",t==="loading"))}attributeChangedCallback(t,s,r){if(s!==r)switch(t){case"is":this.props.is=r,r?this.drawPath():this.removeAttribute("is");break}}}customElements.get("wc-icon")||customElements.define("wc-icon",h);export{h as default};
 
-if(!customElements.get('wc-icon')){
-  customElements.define('wc-icon', Icon)
-}

src/js/lib/socket.js

@@ -1,26 +0,0 @@
-/**
- * 与主进程的通讯
- * @author yutent<yutent.io@gmail.com>
- * @date 2020/07/14 11:42:02
- */
-
-const { ipcRenderer } = require('electron')
-const EventEmitter = require('events')
-const util = require('util')
-
-class Socket {
-  constructor() {
-    ipcRenderer.on('app', (ev, conn) => {
-      // console.log(ev, conn)
-      this.emit(conn.type, conn.data)
-    })
-  }
-
-  dispatch(type = '', data = {}) {
-    return ipcRenderer.sendSync('app', { data, type })
-  }
-}
-
-util.inherits(Socket, EventEmitter)
-
-export default new Socket()

src/js/lib/store/index.js

@@ -1 +0,0 @@
-const __STORE__={};function parse$And(_){let t="";for(let e in _){let i=_[e];switch(Anot.type(i)){case"object":if(i.$has){t+=`it.${e}.indexOf(${JSON.stringify(i.$has)}) > -1`;break}if(i.$in){t+=`${JSON.stringify(i.$in)}.indexOf(it.${e}) > -1`;break}if(i.$regex){t+=`${i.$regex}.test(it.${e})`;break}if(i.$lt||i.$lte){t+=`it.${e} <${i.$lte?"=":""} ${i.$lt||i.$lte}`,(i.$gt||i.$gte)&&(t+=` && it.${e} >${i.$gte?"=":""} ${i.$gt||i.$gte}`);break}if(i.$gt||i.$gte){t+=`it.${e} >${i.$gte?"=":""} ${i.$gt||i.$gte}`;break}if(i.$eq){t+=`it.${e} === ${i.$eq}`;break}default:t+=`it.${e} === ${JSON.stringify(_[e])}`}t+=" && "}return(t=t.slice(0,-4))||(t="true"),t}function parse$Or(_){let t="";return _.forEach(_=>{t+="(",t+=parse$And(_),t+=") || "}),t.slice(0,-4)}class AnotStore{constructor(_){Anot.hideProperty(this,"__name__",_),Anot.hideProperty(this,"__LAST_QUERY__",""),Anot.hideProperty(this,"__QUERY_HISTORY__",[]),__STORE__[_]||(__STORE__[_]=[],__STORE__[`${_}Dict`]={})}static collection(_){return new this(_)}__MAKE_FN__(_){let t="\n      let result = [];\n      let num = 0;\n      for (let it of arr) {\n        if(";return _.$or?t+=parse$Or(_.$or):t+=parse$And(_),t+="){\n        result.push(it)\n        num++\n        if(limit > 0 && num >= limit){\n          break\n        }\n      }\n    }\n    return result;",Function("arr","limit",t)}clear(_){this.__QUERY_HISTORY__=[],this.__LAST_QUERY__="",_&&(__STORE__[this.__name__]=[],__STORE__[`${this.__name__}Dict`]={})}getAll({filter:_,limit:t=[]}={}){const e=__STORE__[this.__name__];let i=[],r=!1;if(!e||!e.length)return i;if(t.length<1&&(t=[0]),t.length<2&&_&&(r=!0,t[0]>0&&t.unshift(0)),_){let n=JSON.stringify(_);if(this.__LAST_QUERY__===n)i=this.__QUERY_HISTORY__.slice.apply(this.__QUERY_HISTORY__,t);else{i=this.__MAKE_FN__(_)(e,r&&t[1]||0),r||(this.__LAST_QUERY__=n,this.__QUERY_HISTORY__=i,i=this.__QUERY_HISTORY__.slice.apply(this.__QUERY_HISTORY__,t))}}else i=e.slice.apply(e,t);return Anot.deepCopy(i)}get(_){const t=__STORE__[`${this.__name__}Dict`];return Anot.deepCopy(t[_])||null}count({filter:_}={}){return _?this.__LAST_QUERY__===JSON.stringify(_)?this.__QUERY_HISTORY__.length:this.getAll({filter:_,limit:[0]}).length:__STORE__[this.__name__].length}__INSERT__(_,t){let e=__STORE__[this.__name__],i=__STORE__[`${this.__name__}Dict`],r=_[t||"id"];i[r]?this.update(r,_):(e.push(_),i[r]=_)}insert(_,t){Array.isArray(_)||(_=[_]),_.forEach(_=>{this.__INSERT__(_,t)}),this.clear()}sort(_,t,e){let i="";t&&window.Intl&&(i+="\n      let col = new Intl.Collator('zh')\n      "),i+=e?"return arr.sort((b, a) => {":"return arr.sort((a, b) => {",i+=`\n      let filter = function(val) {\n        try {\n          return val.${_} || ''\n        } catch (err) {\n          return ''\n        }\n      }\n    `,t?window.Intl?i+="return col.compare(filter(a), filter(b))":i+="return (filter(a) + '').localeCompare(filter(b), 'zh')":i+="return filter(a) - filter(b)",i+="\n})",Function("arr",i).call(this,__STORE__[this.__name__]),this.clear()}update(_,t){let e=__STORE__[this.__name__],i=__STORE__[`${this.__name__}Dict`],r=i[_],n=e.indexOf(r);e.splice(n,1,t),i[_]=t}remove(_){let t=__STORE__[this.__name__],e=__STORE__[`${this.__name__}Dict`],i=e[_],r=t.indexOf(i);t.splice(r,1),delete e[_]}}Anot.store=window.store=AnotStore;export default AnotStore;

src/js/lib/utils.js

@@ -1 +1 @@
-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)}};
+function l(){}var o={nextTick:function(){let t=[],n=document.createTextNode("<!-- -->"),e=!1;function r(){let i=t.length;for(let a=0;a<i;a++)t[a]();t=t.slice(i)}return new MutationObserver(r).observe(n,{characterData:!0}),function(i){t.push(i),e=!e,n.data=e}}(),offset(t){try{var n=t.getBoundingClientRect();if(n.width||n.height||t.getClientRects().length){var e=t.ownerDocument,r=e.documentElement,i=e.defaultView;return{top:n.top+i.pageYOffset-r.clientTop,left:n.left+i.pageXOffset-r.clientLeft}}}catch(a){return{left:0,top:0}}},each(t,n){if(t){if(Array.isArray(t))for(let e=0,r;(r=t[e++])&&n(r,e-1)!==!1;);else for(let e in t)if(t.hasOwnProperty(e)&&n(t[e],e)===!1)break}},bind(t,n,e=l,r=!1){let i=n.split(",");return this.each(i,function(a){a=a.trim(),t.addEventListener(a,e,r)}),e},catch(t,n,e,r){function i(a){a.stopPropagation&&a.stopPropagation(),e&&e(a)}return this.bind(t,n,i,r)},unbind(t,n,e=l,r=!1){let i=n.split(",");this.each(i,function(a){a=a.trim(),t.removeEventListener(a,e,r)})},outside(t,n=l){return this.bind(document,"mousedown",e=>{if(e)if(e.path){for(var r=e.path.concat();r.length>3;)if(r.shift()===t)return}else{var i=e.explicitOriginalTarget||e.target;if(t===i||t.contains(i)||t.root&&t.root.contains(i))return}n(e)})},clearOutside(t=l){this.unbind(document,"mousedown",t)}};export{o as default};

src/main.js

@@ -70,19 +70,11 @@ app.once('ready', () => {
       }
     })
   })
-  // 修改app的UA
+
-  session.defaultSession.setUserAgent(
-    'KugouMusic/2.9.5 (Mac OS X Version 10.15.7 (Build 19H2))'
-  )
 
   let win = createMainWindow(path.resolve(__dirname, './images/app.png'))
 
-  // mac专属事件,点击dock栏图标,可激活窗口
+
-  app.on('activate', _ => {
-    if (win) {
-      win.restore()
-    }
-  })
 
   ipcMain.on('app', (ev, conn) => {
     switch (conn.type) {

src/tools/db/index.js

@@ -1,63 +0,0 @@
-/**
- *
- * @authors yutent (yutent.io@gmail.com)
- * @date    2018-08-06 15:55:54
- */
-
-Promise.defer = function() {
-  var obj = {}
-  obj.promise = new Promise((resolve, reject) => {
-    obj.resolve = resolve
-    obj.reject = reject
-  })
-  return obj
-}
-
-const sqlite3 = require('sqlite3').verbose()
-
-class Sqlite {
-  constructor(db) {
-    this.db = new sqlite3.Database(db)
-  }
-
-  query(sql, ...param) {
-    let defer = Promise.defer()
-    param.unshift(sql)
-    param.push(err => {
-      if (err) {
-        return defer.reject(err)
-      }
-      defer.resolve(true)
-    })
-    this.db.run.apply(this.db, param)
-    return defer.promise
-  }
-
-  getAll(sql, ...param) {
-    let defer = Promise.defer()
-    param.unshift(sql)
-    param.push((err, row) => {
-      if (err) {
-        return defer.reject(err)
-      }
-      defer.resolve(row)
-    })
-    this.db.all.apply(this.db, param)
-    return defer.promise
-  }
-
-  get(sql, ...param) {
-    let defer = Promise.defer()
-    param.unshift(sql)
-    param.push((err, row) => {
-      if (err) {
-        return defer.reject(err)
-      }
-      defer.resolve(row)
-    })
-    this.db.get.apply(this.db, param)
-    return defer.promise
-  }
-}
-
-module.exports = Sqlite

src/tools/db/init.js

@@ -1,47 +0,0 @@
-/**
- * 初始化数据库
- * @author yutent<yutent.io@gmail.com>
- * @date 2020/07/14 18:17:59
- */
-
-// 歌单
-const TABLE_PLAYLIST = `
-CREATE TABLE IF NOT EXISTS "playlist" (
-  "id" integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-  "name" char(128) NOT NULL
-)
-`
-
-// aid: 歌手ID
-const TABLE_SONGS = `
-CREATE TABLE IF NOT EXISTS "songs" (
-  "id" integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-  "name" char(128) NOT NULL,
-  "artist" char(128) NOT NULL,
-  "album" char(128) NOT NULL,
-  "duration" integer NOT NULL,
-  "cover" char(256) NOT NULL,
-  "file_path" char(256) NOT NULL,
-  "lrc" text NOT NULL
-)
-`
-// 歌曲和播放列表的关系表(多对多)
-const TABLE_RELATIONS = `
-CREATE TABLE IF NOT EXISTS "relations" (
-  "id" integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-  "sid" integer NOT NULL,
-  "pid" integer NOT NULL
-)
-`
-
-function error(err) {
-  console.log('----------------------------------------')
-  console.error(err)
-  console.log('----------------------------------------')
-}
-
-module.exports = function(db) {
-  db.query(TABLE_PLAYLIST).catch(error)
-  db.query(TABLE_SONGS).catch(error)
-  db.query(TABLE_RELATIONS).catch(error)
-}

src/tools/init.js

@@ -5,15 +5,18 @@
  */
 
 const { app, ipcMain, globalShortcut: GS } = require('electron')
-const path = require('path')
+const { resolve, join } = require('path')
 const fs = require('iofs')
-const sec = require('crypto.js')
+// const sec = require('crypto.js')
 
-const Shortcut = require('./shortcut')
+// const Shortcut = require('./shortcut')
-const Sqlite = require('./db')
-const dbinit = require('./db/init')
 
-const HOME = path.resolve(app.getPath('userData'))
+const HOME = resolve(app.getPath('userData'))
+const MUSIC_DIR = resolve(app.getPath('music'), 'sonist')
+const CONFIG_FILE = join(HOME, 'sonist.json')
+const SONGS_FILE = join(HOME, 'songs.json')
+const PLAYLIST_FILE = join(HOME, 'playlist.json')
+const SUPPORTED_EXTS = ['.mp3', '.webm', '.ogg', '.flac', '.m4a', '.aac']
 
 /* ********** 修复环境变量 start *********** */
 let PATH_SET = new Set()
@@ -28,149 +31,132 @@ PATH_SET = null
 
 /* ********** 修复环境变量 end *********** */
 
-const DB_FILE = path.join(HOME, 'sqlite3.cache')
+if (!fs.exists(CONFIG_FILE)) {
-const INIT_FILE = path.join(HOME, 'app.ini')
+  fs.echo('{}', CONFIG_FILE)
-const CACHE_DIR = path.join(HOME, 'other_cache')
+  fs.echo('[]', SONGS_FILE)
-const SUPPORTED_EXTS = ['.mp3', '.webm', '.ogg', '.flac', '.m4a', '.aac']
+  fs.echo('[]', PLAYLIST_FILE)
-
+  fs.mkdir(MUSIC_DIR)
-var isFirstTimeLaunch = false
-var db = null
-
-if (!fs.exists(DB_FILE)) {
-  fs.echo('{}', INIT_FILE)
-  fs.mkdir(CACHE_DIR)
-  isFirstTimeLaunch = true
-}
-
-db = new Sqlite(DB_FILE)
-
-if (isFirstTimeLaunch) {
-  dbinit(db)
 }
 
 /* ----------------------------------------------------------------- */
 /* ---------------------       事件开始     ------------------------- */
 /* ---------------------------------------------------------------- */
 
-ipcMain.on('app', (ev, conn) => {
+ipcMain.on('ready', ev => {
-  switch (conn.type) {
+  ev.returnValue = { CONFIG_FILE, SONGS_FILE, PLAYLIST_FILE, MUSIC_DIR }
-    // 获取所有书籍
-    case 'get-playlist':
-      db.getAll('SELECT * FROM `playlist`')
-        .then(res => {
-          ev.returnValue = res
-        })
-        .catch(err => {
-          ev.returnValue = err
-        })
-      break
-    // 获取应用配置
-    case 'get-init':
-      var ini = fs.cat(INIT_FILE).toString('')
-      ev.returnValue = JSON.parse(ini)
-      break
-    // 设置应用配置
-    case 'set-init':
-      fs.echo(JSON.stringify(conn.data, null, 2), INIT_FILE)
-      break
-
-    case 'add-song':
-      var {
-        name,
-        artist = '',
-        album = '',
-        duration,
-        cover = '',
-        file_path,
-        lrc = ''
-      } = conn.data
-      db.query(
-        'INSERT INTO `songs` (name, artist, album, duration, cover, file_path, lrc) VALUES ($name, $artist, $album, $duration, $cover, $file_path, $lrc)',
-        {
-          $name: name,
-          $artist: artist,
-          $album: album,
-          $duration: duration,
-          $cover: cover,
-          $file_path: file_path,
-          $lrc: lrc
-        }
-      )
-      ev.returnValue = true
-      break
-
-    case 'get-all-songs':
-      db.getAll('SELECT id, name, duration, artist, file_path FROM songs')
-        .then(res => {
-          ev.returnValue = res
-        })
-        .catch(err => {
-          ev.returnValue = err
-        })
-      break
-
-    case 'get-songs':
-      db.getAll(
-        'SELECT id, name, duration, artist, file_path ' +
-          'FROM songs ' +
-          'WHERE id IN ' +
-          '(SELECT sid FROM relations WHERE pid = $pid)',
-        { $pid: conn.pid }
-      )
-        .then(res => {
-          ev.returnValue = res
-        })
-        .catch(err => {
-          ev.returnValue = err
-        })
-      break
-
-    // 扫描目录
-    case 'scan-dir':
-      var { dir } = conn.data
-      if (fs.isdir(dir)) {
-        let list = fs
-          .ls(dir, true)
-          .filter(it => {
-            if (fs.isdir(it)) {
-              return false
-            } else {
-              let { ext, name } = path.parse(it)
-              if (!ext || name.startsWith('.')) {
-                return false
-              }
-              return SUPPORTED_EXTS.includes(ext)
-            }
-          })
-          .map(it => {
-            var { ext, name } = path.parse(it)
-            var buf = fs.origin.createReadStream(it, {
-              start: 0,
-              end: 256,
-              encoding: 'base64'
-            })
-            return {
-              name,
-              file_path: it,
-              artist: '',
-              album: '',
-              duration: '00:00'
-            }
-          })
-        ev.returnValue = list
-      } else {
-        ev.returnValue = []
-      }
-      break
-
-    // 启用全局快捷键
-    case 'enable-gs':
-      Shortcut.__init__()
-      break
-
-    // 禁用全局快捷键
-    case 'disable-gs':
-      GS.unregisterAll()
-      break
-  }
 })
+
+// ipcMain.on('app', (ev, conn) => {
+//   switch (conn.type) {
+//     // 获取所有书籍
+//     case 'get-playlist':
+//       db.getAll('SELECT * FROM `playlist`')
+//         .then(res => {
+//           ev.returnValue = res
+//         })
+//         .catch(err => {
+//           ev.returnValue = err
+//         })
+//       break
+//     // 获取应用配置
+//     case 'get-init':
+//       var ini = fs.cat(INIT_FILE).toString('')
+//       ev.returnValue = JSON.parse(ini)
+//       break
+//     // 设置应用配置
+//     case 'set-init':
+//       fs.echo(JSON.stringify(conn.data, null, 2), INIT_FILE)
+//       break
+
+//     case 'add-song':
+//       var { name, artist = '', album = '', duration, cover = '', file_path, lrc = '' } = conn.data
+//       db.query(
+//         'INSERT INTO `songs` (name, artist, album, duration, cover, file_path, lrc) VALUES ($name, $artist, $album, $duration, $cover, $file_path, $lrc)',
+//         {
+//           $name: name,
+//           $artist: artist,
+//           $album: album,
+//           $duration: duration,
+//           $cover: cover,
+//           $file_path: file_path,
+//           $lrc: lrc
+//         }
+//       )
+//       ev.returnValue = true
+//       break
+
+//     case 'get-all-songs':
+//       db.getAll('SELECT id, name, duration, artist, file_path FROM songs')
+//         .then(res => {
+//           ev.returnValue = res
+//         })
+//         .catch(err => {
+//           ev.returnValue = err
+//         })
+//       break
+
+//     case 'get-songs':
+//       db.getAll(
+//         'SELECT id, name, duration, artist, file_path ' +
+//           'FROM songs ' +
+//           'WHERE id IN ' +
+//           '(SELECT sid FROM relations WHERE pid = $pid)',
+//         { $pid: conn.pid }
+//       )
+//         .then(res => {
+//           ev.returnValue = res
+//         })
+//         .catch(err => {
+//           ev.returnValue = err
+//         })
+//       break
+
+//     // 扫描目录
+//     case 'scan-dir':
+//       var { dir } = conn.data
+//       if (fs.isdir(dir)) {
+//         let list = fs
+//           .ls(dir, true)
+//           .filter(it => {
+//             if (fs.isdir(it)) {
+//               return false
+//             } else {
+//               let { ext, name } = path.parse(it)
+//               if (!ext || name.startsWith('.')) {
+//                 return false
+//               }
+//               return SUPPORTED_EXTS.includes(ext)
+//             }
+//           })
+//           .map(it => {
+//             var { ext, name } = path.parse(it)
+//             var buf = fs.origin.createReadStream(it, {
+//               start: 0,
+//               end: 256,
+//               encoding: 'base64'
+//             })
+//             return {
+//               name,
+//               file_path: it,
+//               artist: '',
+//               album: '',
+//               duration: '00:00'
+//             }
+//           })
+//         ev.returnValue = list
+//       } else {
+//         ev.returnValue = []
+//       }
+//       break
+
+//     // 启用全局快捷键
+//     case 'enable-gs':
+//       Shortcut.__init__()
+//       break
+
+//     // 禁用全局快捷键
+//     case 'disable-gs':
+//       GS.unregisterAll()
+//       break
+//   }
+// })

src/tools/inject.js

@@ -0,0 +1,33 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2022/07/14 11:54:32
+ */
+
+const { ipcRenderer, shell, contextBridge, globalShortcut: GS } = require('electron')
+const { resolve } = require('path')
+const fs = require('iofs')
+
+const { CONFIG_FILE, SONGS_FILE, PLAYLIST_FILE, MUSIC_DIR } = ipcRenderer.sendSync('ready')
+
+let timer = null
+
+contextBridge.exposeInMainWorld('electron', {
+  hostname: HOST,
+  open(url) {
+    shell.openExternal(url)
+  },
+
+  getPlaylist() {
+    var cache = require(PLAYLIST_FILE)
+    return cache
+  },
+
+  updatePlaylist(data) {
+    fs.echo(data, PLAYLIST_FILE)
+  },
+
+  diableGS() {
+    GS.unregisterAll()
+  }
+})

src/tools/menu.js

@@ -1,75 +0,0 @@
-/**
- * 菜单项
- * @author yutent<yutent@doui.cc>
- * @date 2019/01/21 20:34:04
- */
-
-'use strict'
-
-const { Tray, Menu, shell } = require('electron')
-
-module.exports = function(win) {
-  let menuList = Menu.buildFromTemplate([
-    {
-      label: 'Sonist',
-      submenu: [
-        { role: 'about', label: '关于 Sonist' },
-        { type: 'separator' },
-        {
-          label: '退出 Sonist',
-          accelerator: 'Command+Q',
-          click(a, b, ev) {
-            win.destroy()
-          }
-        }
-      ]
-    },
-    {
-      label: '编辑',
-      submenu: [
-        { role: 'undo', label: '撤消重做' },
-        { role: 'redo', label: '重做' },
-        { type: 'separator' },
-        { role: 'cut', label: '剪切' },
-        { role: 'copy', label: '复制' },
-        { role: 'paste', label: '粘贴' },
-        { role: 'selectall', label: '全选' }
-      ]
-    },
-    {
-      label: '显示',
-      submenu: [
-        { label: '显示桌面歌词' },
-        {
-          type: 'separator'
-        },
-        { label: '迷你模式' }
-      ]
-    },
-    {
-      label: '窗口',
-      submenu: [
-        {
-          role: 'minimize',
-          label: '最小化',
-          click() {
-            win.minimize()
-          }
-        }
-      ]
-    },
-    {
-      role: 'help',
-      label: '帮助',
-      submenu: [
-        {
-          label: '官网',
-          click() {
-            shell.openExternal('https://github.com/yutent/sonist')
-          }
-        }
-      ]
-    }
-  ])
-  Menu.setApplicationMenu(menuList)
-}

src/tools/shortcut.js

@@ -4,8 +4,6 @@
  * @date 2019/02/04 23:12:46
  */
 
-'use strict'
-
 const { app, globalShortcut: GS } = require('electron')
 
 module.exports = {

src/tools/windows.js

@@ -6,30 +6,27 @@
 
 const { BrowserWindow } = require('electron')
 
-const { createAppTray, createLrcTray, ctrlTrayBtn } = require('./tray.js')
+// const { createAppTray, createLrcTray, ctrlTrayBtn } = require('./tray.js')
-const createMenu = require('./menu.js')
 
 /**
  * 应用主窗口
  */
-exports.createMainWindow = function(icon) {
+exports.createMainWindow = function (icon) {
   // 创建浏览器窗口
   let win = new BrowserWindow({
-    title: 'sonist',
+    title: '',
-    width: 820,
+    width: 320,
-    height: 460,
+    height: 240,
     frame: false,
-    titleBarStyle: 'hiddenInset',
     resizable: false,
     maximizable: false,
     icon,
-    // transparent: true,
+    transparent: true,
     vibrancy: 'dark',
-    visualEffectState: 'active',
     webPreferences: {
       webSecurity: false,
       experimentalFeatures: true,
-      preload: '../js/lib/socket.js'
+      preload: './inject.js'
     },
     show: false
   })
@@ -38,11 +35,9 @@ exports.createMainWindow = function(icon) {
 
   win.loadURL('app://local/index.html')
 
-  createAppTray(win)
+  // createAppTray(win)
-  ctrlTrayBtn(win)
+  // ctrlTrayBtn(win)
-  createLrcTray(win)
+  // createLrcTray(win)
-
-  createMenu(win)
 
   win.on('ready-to-show', _ => {
     win.show()