升级UI库

src/lib/avatar/index.js

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

src/lib/drag/core.js

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

src/lib/drag/doc.md

@@ -1,85 +0,0 @@
-# 拖拽插件
-> 该插件可以让任意一个元素可以被拖拽,而不需要该元素是否具有定位属性。
-> 使用时,在目标元素上添加`: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/lib/drag/index.js

@@ -1 +1 @@
-"use strict";function getBindingCallback(e,t,i){var n=e.getAttribute(t);if(n)for(var a,o=0;a=i[o++];)if(a.hasOwnProperty(n)&&"function"==typeof a[n])return a[n]}Anot.ui.drag="1.0.0",Anot.directive("drag",{priority:1500,init:function(e){e.expr='"'+e.expr+'"';let t=document.documentMode?"move":"grab";window.sidebar?t="-moz-"+t:window.chrome&&(t="-webkit-"+t),Anot(e.element).css("cursor",t),e.beforedrag=getBindingCallback(e.element,"data-beforedrag",e.vmodels),e.dragging=getBindingCallback(e.element,"data-dragging",e.vmodels),e.dragged=getBindingCallback(e.element,"data-dragged",e.vmodels),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),delete e.element.dataset.beforedrag,delete e.element.dataset.dragging,delete e.element.dataset.dragged},update:function(e){let t,i,n,a,o,l,r,d,s,g,m,u,c,f,p,b=this,x=e?this.element.parentNode:this.element,v=Anot(this.element),h=Anot(document),w=null,y=null;for(;e&&x&&(x.classList||Anot.error(`${this.name}=${this.expr}, 解析异常[元素不存在]`),!x.classList.contains(e)&&x.id!==e);)x=x.parentNode;w=Anot(x),"parent"===this.limit&&(y=x.parentNode),v.bind("mousedown",function(e){let v=getComputedStyle(x),A=v.transform.replace(/matrix\((.*)\)/,"$1"),C=w.offset();if("0s"!==v.transitionDuration&&(p=v.transitionDuration,x.style.transitionDuration="0s"),(A="none"!==A?A.split(", "):[1,0,0,1,0,0])[4]-=0,A[5]-=0,t=A[4],i=A[5],c=h.scrollTop(),f=h.scrollLeft(),o=C.left-t-f,l=C.top-i-c,n=e.pageX,a=e.pageY,m=window.innerWidth,u=window.innerHeight,s=x.clientWidth,g=x.clientHeight,b.beforedrag){if(!1===b.beforedrag.call(b.vmodels[0],x,o+t,l+i))return}let k=[0,u-g,0,m-s];if("parent"===b.limit){let e=getComputedStyle(y).transform.replace(/matrix\((.*)\)/,"$1"),t=Anot(y).offset();e="none"!==e?e.split(", "):[1,0,0,1,0,0];let i=t.left-e[4]-f,n=t.top-e[5]-c;k=[n,n+y.clientHeight-g,i,i+y.clientWidth-s]}let D=h.bind("mousemove",function(e){e.preventDefault(),"y"!==b.axis&&(A[4]=e.pageX-n+t),"x"!==b.axis&&(A[5]=e.pageY-a+i),r=o+A[4],d=l+A[5],b.overflow||("y"!==b.axis&&(r<=k[2]&&(r=k[2],A[4]=r-o),r>=k[3]&&(r=k[3],A[4]=r-o)),"x"!==b.axis&&(d<=k[0]&&(d=k[0],A[5]=d-l),d>=k[1]&&(d=k[1],A[5]=d-l))),w.css({transform:"matrix("+A.join(", ")+")"}),b.dragging&&b.dragging.call(b.vmodels[0],x,r,d)}),B=h.bind("mouseup",function(e){h.unbind("mousemove",D),h.unbind("mouseup",B),x.style.transitionDuration=p,b.dragged&&b.dragged.call(b.vmodels[0],x,r,d,A[4],A[5])})})}});
+"use strict";import Drag from"./core.js";Anot.directive("drag",{priority:1500,init:function(e){e.expr='"'+e.expr+'"',e.overflow=!0,e.axis="xy",e.element.dataset.axis&&(e.axis=e.element.dataset.axis,delete e.element.dataset.axis),e.limit=!1,e.element.dataset.limit&&(e.limit=e.element.dataset.limit,e.overflow=!1,delete e.element.dataset.limit)},update:function(e){var t=this.element;if(e)for(t=this.element.parentNode;t&&(t.classList||Anot.error(`${this.name}=${this.expr}, 解析异常[元素不存在]`),!t.classList.contains(e)&&t.id!==e);)t=t.parentNode;new Drag(t).by(this.element,{limit:this.limit,axis:this.axis,overflow:this.overflow})}});

src/lib/form/cascader.js

@@ -0,0 +1,15 @@
+/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    2019-09-01 23:16:06
+ * @version v2.0.1
+ * 
+ */
+
+'use strict'
+
+
+
+if(!customElements.get('wc-')){
+  customElements.define('wc-', )
+}

src/lib/form/checkbox.js

@@ -0,0 +1,15 @@
+/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    2019-09-01 23:16:06
+ * @version v2.0.1
+ * 
+ */
+
+'use strict'
+
+import"../icon/index.js";export default class Checkbox extends HTMLElement{static get observedAttributes(){return["label","color","value","checked","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{label:"",color:"",value:[],checked:!1,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML="<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:inline-block;line-height:1;font-size:14px}:host label{display:flex;justify-content:center;align-items:center;min-width:32px;height:32px;padding:0 5px;user-select:none;-moz-user-select:none;cursor:inherit;color:#7e909a}:host .dot{--size: 18px;padding:2px;margin-right:3px}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']){font-size:16px}:host([size='large']) label{height:42px}:host([size='large']) .dot{--size: 22px}:host([size='medium']) label{height:38px}:host([size='medium']) .dot{--size: 20px}:host([size='mini']){font-size:12px}:host([size='mini']) label{height:20px}:host([size='mini']) .dot{--size: 14px}:host([color='red']) label.checked{color:#ff5061}:host([color='red']) label.checked .dot{border-color:#ff5061}:host([color='red']) label.checked .dot::after{background:#ff5061}:host([color='blue']) label.checked{color:#66b1ff}:host([color='blue']) label.checked .dot{border-color:#66b1ff}:host([color='blue']) label.checked .dot::after{background:#66b1ff}:host([color='green']) label.checked{color:#58d68d}:host([color='green']) label.checked .dot{border-color:#58d68d}:host([color='green']) label.checked .dot::after{background:#58d68d}:host([color='teal']) label.checked{color:#3fc2a7}:host([color='teal']) label.checked .dot{border-color:#3fc2a7}:host([color='teal']) label.checked .dot::after{background:#3fc2a7}:host([color='orange']) label.checked{color:#ffb618}:host([color='orange']) label.checked .dot{border-color:#ffb618}:host([color='orange']) label.checked .dot::after{background:#ffb618}:host([color='dark']) label.checked{color:#62778d}:host([color='dark']) label.checked .dot{border-color:#62778d}:host([color='dark']) label.checked .dot::after{background:#62778d}:host([color='purple']) label.checked{color:#ac61ce}:host([color='purple']) label.checked .dot{border-color:#ac61ce}:host([color='purple']) label.checked .dot::after{background:#ac61ce}\n</style> <label> <wc-icon class=\"dot\" is=\"checkbox-off\"></wc-icon> <slot></slot> </label> ",this.__SWITCH__=this.root.lastElementChild,this.__ICO__=this.__SWITCH__.children[0]}get value(){return this.props.value}set value(e){if(!Array.isArray(e))throw TypeError(":duplex指令需要传入一个数组, 当前为: "+typeof e);this.props.value=e,this.checked=this.props.value.includes(this.props.label)}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e;var{value:o,checked:t,label:l,color:r}=this.props;this.__SWITCH__.classList.toggle("checked",t),this.__ICO__.setAttribute("is","checkbox-"+(t?"on":"off"));var c=o.indexOf(l);t?(this.__ICO__.setAttribute("color",r),c<0&&o.push(l)):(this.__ICO__.removeAttribute("color"),~c&&o.splice(c,1))}get 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.addEventListener("click",e=>{this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("input")))},!1)}attributeChangedCallback(e,o,t){if(o!==t)switch(e){case"label":case"color":this.props[e]=t;break;case"checked":case"disabled":this[e]=!0}}};
+
+if(!customElements.get('wc-checkbox')){
+  customElements.define('wc-checkbox', Checkbox)
+}

src/lib/form/index.js

@@ -1 +0,0 @@
-importCss("/css/form.css");const log=console.log;Anot.ui.form="0.1.0",Anot.component("button",{__init__(e,s,t){s.text=this.text(),s.style={"border-radius":e.radius},this.classList.add("do-fn-noselect"),this.classList.add("do-button"),this.classList.add(e.color||"grey"),this.setAttribute(":click","onClick"),this.setAttribute(":class","{disabled: disabled}"),this.setAttribute(":css","style"),e.size&&this.classList.add(e.size),e.hasOwnProperty("disabled")&&(s.disabled=!0),delete e.disabled,delete e.color,delete e.size,t()},render(e){let s="";return this.props.icon&&(s=`<i class="do-button__icon do-icon-${this.props.icon}"></i>`),`${s}<span class="do-button__text" :text="text"></span>`},state:{text:"",disabled:!1,style:{}},props:{click:Anot.PropsTypes.isFunction()},skip:["style"],watch:{},methods:{onClick(){this.disabled||"function"==typeof this.props.click&&this.props.click(this.props.prop)}}}),Anot.component("radio",{__init__(e,s,t){e.hasOwnProperty("disabled")&&(s.disabled=!0),e.hasOwnProperty("checked")&&null===s.value&&(s.value=e.label),s.text=this.text(),s.checked=s.value===e.label,this.classList.add("do-radio"),this.classList.add("do-fn-noselect"),this.classList.add(e.color||"grey"),this.setAttribute(":class","{disabled: disabled, checked: checked}"),this.setAttribute(":click","onClick"),delete e.disabled,delete e.color,t()},render:()=>'\n      <span class="do-radio__box"></span>\n      <span class="do-radio__text" :text="text"></span>\n    ',state:{value:null,text:"",checked:!1,disabled:!1},props:{label:""},watch:{value(e){this.checked=this.props.label===e}},methods:{onClick(){this.disabled||this.checked||(this.checked=!0,this.value=this.props.label)}}}),Anot.component("switch",{__init__(e,s,t){e.hasOwnProperty("disabled")&&(s.disabled=!0),e.hasOwnProperty("checked")&&null===s.value&&(s.value=!0),s.value=!!s.value,this.classList.add("do-switch"),this.classList.add("do-fn-noselect"),this.classList.add(e.color||"grey"),this.setAttribute(":class","{disabled: disabled, checked: value}"),this.setAttribute(":click","onClick"),delete e.disabled,delete e.color,t()},render:()=>'\n      <span class="do-switch__label"><i class="do-switch__dot"></i></span>\n    ',state:{value:null,disabled:!1},methods:{onClick(){this.disabled||(this.value=!this.value)}}}),Anot.component("checkbox",{__init__(e,s,t){Array.isArray(s.value)||(this.parentNode.removeChild(this),Anot.error("多选框的传入值必须一个数组",TypeError)),e.hasOwnProperty("disabled")&&(s.disabled=!0),e.hasOwnProperty("checked")&&Anot.Array.ensure(s.value,e.label),s.text=this.text(),s.checked=s.value.indexOf(e.label)>-1,this.classList.add("do-checkbox"),this.classList.add("do-fn-noselect"),this.classList.add(e.color||"grey"),this.setAttribute(":class","{disabled: disabled, checked: checked}"),this.setAttribute(":click","onClick"),delete e.disabled,delete e.color,t()},render:()=>'\n      <span class="do-checkbox__box">\n        <i class="do-icon-get" :visible="checked"></i>\n      </span>\n      <span class="do-checkbox__text" :text="text"></span>\n    ',state:{value:[],text:"",checked:!1,disabled:!1},props:{label:""},watch:{"value.*"(e,s,t,i){this.checked=this.value.indexOf(this.props.label)>-1},"value.length"(e,s,t,i){this.checked=this.value.indexOf(this.props.label)>-1},value(e,s,t,i){this.checked=this.value.indexOf(this.props.label)>-1}},methods:{onClick(){if(this.disabled)return;let{label:e}=this.props,s=this.value.$model;for(let t in s)if(s[t]===e)return this.checked=!1,void this.value.removeAt.call(this.value,t);this.checked=!0,this.value.push(e)}}}),Anot.component("input",{__init__(e,s,t){e.hasOwnProperty("disabled")&&(s.disabled=!0),e.iconR&&(s.pos="right",e.icon=e.iconR,delete e.iconR),this.classList.add("do-input"),this.classList.add("do-fn-noselect"),this.classList.add(e.color||"grey"),e.icon&&this.classList.add("icon-"+s.pos),this.setAttribute(":class","{disabled: disabled, active: active}"),this.setAttribute(":css","{width: props.width}"),delete e.disabled,delete e.color,t()},render(){let{icon:e,placeholder:s}=this.props;return'\n      <span \n        class="do-input__holder"\n        :class="{visible: !value || active}"\n        :text="props.placeholder"></span>\n      <input \n        class="do-input__input"\n        :attr="{disabled: disabled, type: props.type }"\n        :duplex="value" \n        :keyup="onKeyup"\n        :blur="onBlur"\n        :focus="onFocus" />'+(e?`<i class="do-input__icon do-icon-${e}"></i>`:"")},state:{pos:"left",value:"",disabled:!1,active:!1},skip:["pos"],props:{type:"text",width:180,placeholder:"",default:"",submit:Anot.PropsTypes.isFunction()},methods:{onFocus(){this.active=!0},onBlur(){this.active=!1},onKeyup(e){this.disabled||13===e.keyCode&&"function"==typeof this.props.submit&&this.props.submit()}}});export default Anot;

src/lib/form/progress.js

@@ -0,0 +1,15 @@
+/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    2019-09-01 23:16:06
+ * @version v2.0.1
+ * 
+ */
+
+'use strict'
+
+export default class Progress extends HTMLElement{static get observedAttributes(){return["value","max"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{value:0,max:1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML="<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:flex;align-items:center}:host label{flex:1;height:var(--size, 10px);border-radius:9px;background:#e8ebf4}:host label span{display:block;width:0;height:100%;border-radius:9px;background:#3fc2a7}:host([size='large']) label{height:18px}:host([size='medium']) label{height:14px}:host([size='mini']) label{height:6px}:host([color='red']) label span{background:#ff5061}:host([color='blue']) label span{background:#66b1ff}:host([color='green']) label span{background:#58d68d}:host([color='orange']) label span{background:#ffb618}:host([color='dark']) label span{background:#62778d}:host([color='purple']) label span{background:#ac61ce}\n</style> <label><span></span></label> ",this.__THUMB__=this.root.children[1].lastElementChild}get value(){return this.props.value}set value(e){this.props.value=+e,this.calculate()}calculate(){var{max:e,value:a}=this.props;this.__THUMB__.style.width=`${100*a/e}%`}connectedCallback(){this.calculate()}attributeChangedCallback(e,a,l){if(a!==l)switch(e){case t:var t=+l;(t!=t||t<1)&&(t=1),this.props.max=t,this.calculate();break;case"value":var r=+l;r==r&&(this.props.value=r,this.calculate())}}};
+
+if(!customElements.get('wc-progress')){
+  customElements.define('wc-progress', Progress)
+}

src/lib/form/radio.js

@@ -0,0 +1,15 @@
+/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    2019-09-01 23:16:06
+ * @version v2.0.1
+ * 
+ */
+
+'use strict'
+
+import{bind,unbind}from"../utils.js";export default class Radio extends HTMLElement{static get observedAttributes(){return["label","checked","disabled"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{label:"",checked:!1,disabled:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML="<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:inline-block;line-height:1;font-size:14px}:host label{display:flex;justify-content:center;align-items:center;min-width:32px;height:32px;padding:0 5px;user-select:none;-moz-user-select:none;cursor:inherit;color:#7e909a}:host label.checked .dot::after{display:block;width:12px;height:12px;border-radius:50%;background:#aabac3;content:''}:host .dot{width:18px;height:18px;padding:2px;margin-right:3px;border:1px solid #aabac3;border-radius:50%;background:#fff}:host([disabled]){cursor:not-allowed;opacity:0.6}:host([size='large']) label{width:58px;height:32px}:host([size='large']) .dot{width:26px;height:26px}:host([size='medium']) label{width:50px;height:28px}:host([size='medium']) .dot{width:22px;height:22px}:host([size='mini']) label{width:22px;height:14px;padding:2px}:host([size='mini']) .dot{width:10px;height:10px}:host([color='red']) label.checked{color:#ff5061}:host([color='red']) label.checked .dot{border-color:#ff5061}:host([color='red']) label.checked .dot::after{background:#ff5061}:host([color='blue']) label.checked{color:#66b1ff}:host([color='blue']) label.checked .dot{border-color:#66b1ff}:host([color='blue']) label.checked .dot::after{background:#66b1ff}:host([color='green']) label.checked{color:#58d68d}:host([color='green']) label.checked .dot{border-color:#58d68d}:host([color='green']) label.checked .dot::after{background:#58d68d}:host([color='teal']) label.checked{color:#3fc2a7}:host([color='teal']) label.checked .dot{border-color:#3fc2a7}:host([color='teal']) label.checked .dot::after{background:#3fc2a7}:host([color='orange']) label.checked{color:#ffb618}:host([color='orange']) label.checked .dot{border-color:#ffb618}:host([color='orange']) label.checked .dot::after{background:#ffb618}:host([color='dark']) label.checked{color:#62778d}:host([color='dark']) label.checked .dot{border-color:#62778d}:host([color='dark']) label.checked .dot::after{background:#62778d}:host([color='purple']) label.checked{color:#ac61ce}:host([color='purple']) label.checked .dot{border-color:#ac61ce}:host([color='purple']) label.checked .dot::after{background:#ac61ce}\n</style> <label> <span class=\"dot\"></span> <slot></slot> </label> ",this.__SWITCH__=this.root.lastElementChild}get value(){return this.props.label}set value(e){this.checked=this.props.label===e}get checked(){return this.props.checked}set checked(e){this.props.checked=!!e,this.__SWITCH__.classList.toggle("checked",this.props.checked)}get disabled(){return this.props.disabled}set disabled(e){var o=typeof e;e!==this.props.disabled&&("boolean"===o&&e||"boolean"!==o?(this.props.disabled=!0,this.setAttribute("disabled","")):(this.props.disabled=!1,this.removeAttribute("disabled")))}connectedCallback(){this._handleClick=bind(this,"click",e=>{this.disabled||this.checked||(this.checked=!0,this.dispatchEvent(new CustomEvent("input")))})}disconnectedCallback(){unbind(this,"click",this._handleClick)}attributeChangedCallback(e,o,t){if(o!==t)switch(e){case"label":this.props.label=t;break;case"checked":case"disabled":this[e]=!0}}};
+
+if(!customElements.get('wc-radio')){
+  customElements.define('wc-radio', Radio)
+}

src/lib/form/switch.js

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

src/lib/pager/index.js

@@ -1 +1,15 @@
-"use strict";importCss("/css/pager.css");function calculate({currPage:t,maxPageShow:e,totalPage:a}){let s=[],r=0,o=t<e/2?e-t:Math.floor(e/2);if(a<2)return s.push(1),s;t-o>1&&s.push("..."),a-t<o&&(r=o-a+t);for(let e=t-o-r;e<t+o+1&&e<=a;e++)e>0&&s.push(e);return t+o<a&&s.push("..."),s}function update(t,e){const{totalPage:a,props:{maxPageShow:s}}=e;e.currPage!==t&&(e.currPage=e.inputPage=t,"function"==typeof e.props.pageChanged&&e.props.pageChanged(t)),e.pageList.clear(),a>1?e.pageList.pushArray(calculate({currPage:t,totalPage:a,maxPageShow:s})):e.pageList.pushArray([1])}Anot.ui.pager="1.0.0";const tmpls={home:'<button class="do-icon-dbl-left button"\n    :css="{\'border-radius\': props.radius}"\n    :attr="{disabled: currPage === 1}"\n    :data="{to: parseUrl(1)}"\n    :click="go(1, $event)"></button>',end:'<button class="do-icon-dbl-right button"\n    :css="{\'border-radius\': props.radius}"\n    :attr="{disabled: currPage === totalPage}"\n    :data="{to: parseUrl(totalPage)}"\n    :click="go(totalPage, $event)"></button>',prev:'<button class="do-icon-left button"\n    :css="{\'border-radius\': props.radius}"\n    :attr="{disabled: currPage < 2}"\n    :data="{to: parseUrl(currPage - 1)}"\n    :click="go(currPage - 1, $event)"></button>',next:'<button class="do-icon-right button"\n    :css="{\'border-radius\': props.radius}"\n    :attr="{disabled: currPage >= totalPage}"\n    :data="{to: parseUrl(currPage + 1)}"\n    :click="go(currPage + 1, $event)"></button>',pager:'<button class="page"\n    :for="pageList"\n    :css="{\'border-radius\': props.radius}"\n    :attr="{disabled: \'...\' === el || currPage === el}"\n    :data="{to: parseUrl(el)}"\n    :class="{disabled: \'...\' === el, curr: currPage === el}"\n    :text="el"\n    :click="go(el, $event)"></button>',curr:'<button class="page curr" :text="currPage"></button>',total:'<span class="total-box">共 {{totalPage}} 页 {{totalItem}} 条</span>',jumper:'<div class="input-box">前往\n      <input type="text" :duplex="inputPage" :keyup="go(null, $event)"> 页\n    </div>',slot:""};export default Anot.component("pager",{__init__:function(t,e,a){this.classList.add("do-pager"),this.classList.add("do-fn-noselect"),this.setAttribute(":class","{{classList.join(' ')}}"),t.theme=+t.theme||1,t.simpleMode&&(t.theme=1),e.classList=e.classList.concat("skin-"+t.theme,t.color||"plain",t.size||"mini"),t.total&&(e.totalItem=+t.total),t.pageSize&&(e.pageSize=+t.pageSize),t.layout||(t.layout="total,home,prev,pager,next,end,jumper"),2===t.theme&&(t.radius=null),delete t.total,delete t.pageSize,delete t.color,delete t.size,a()},render:function(t){let{layout:e,theme:a,simpleMode:s}=this.props;return s?e=["prev","curr","next"]:(e=e.replace(/\s/g,""),2===a&&(e=e.replace(/total|jumper/g,"")),e=e.split(",")),(e=e.map(e=>"slot"!==e?tmpls[e]||"":t&&t.extra?t.extra.join(""):void 0)).join("\n")},componentWillMount:function(){const{currPage:t,totalPage:e,props:a}=this;this.pageList.clear(),this.pageList.pushArray(calculate({currPage:t,totalPage:e,maxPageShow:a.maxPageShow}))},componentDidMount:function(){"function"==typeof this.props.created&&this.props.created(this)},state:{classList:[],currPage:1,totalItem:1,pageSize:20,inputPage:1,pageList:[]},computed:{totalPage:function(){return Math.ceil(this.totalItem/this.pageSize)}},props:{url:null,maxPageShow:5,simpleMode:!1,radius:3,pageChanged:Anot.PropsTypes.isFunction(),created:Anot.PropsTypes.isFunction()},skip:["classList"],methods:{parseUrl(t){return(t>>>=0)<1||!this.props.url||this.currPage===t?"":this.props.url.replace("{id}",t)},go(t,e){let{inputPage:a,totalPage:s,currPage:r}=this,o=e&&e.target||null;if(!(o&&o.disabled||r===t))if(t&&o){if("..."!==t){let e=o.dataset.to;e?location.href=e:t>>>=0,update(t,this)}}else if(null===t){if(a>>>=0,e&&13===e.keyCode){if(a<1||r===a)return this.inputPage=r;a>s&&(a=s),this.inputPage=a,update(a,this)}}else update(t>>>=0,this)},setSize(t){t=+t,this.pageSize!==t&&(this.pageSize=+t,update(1,this))},setTotal(t){t=+t,this.totalItem!==t&&(this.totalItem=+t,update(1,this))}}});
+/**
+ *
+ * @authors yutent (yutent@doui.cc)
+ * @date    2019-09-01 23:16:06
+ * @version v2.0.1
+ * 
+ */
+
+'use strict'
+
+function calculate(t,e,r){var o,a=[],s=0,i=t<3?6-t:2;if(e<2||r)return a.push({to:t,txt:t}),a;t-i>1&&e>5&&(o=(o=t-2*i)<1?1:o,a.push({to:o,txt:"..."}));e-t<i&&(s=i-e+t);for(var n=t-i-s;n<t+i+1&&n<=e;n++)n>0&&a.push({to:n,txt:n});t+i<e&&(o=(o=t+2*i)>e?e:o,a.push({to:o,txt:"..."}));return a}export default class Pager extends HTMLElement{static get observedAttributes(){return["layout","total","curr","pagesize","simple"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{layout:"home, prev, next, end",total:0,curr:1,pagesize:20,simple:!1},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML='<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:block;line-height:1;color:#62778d;font-size:14px;user-select:none;-moz-user-select:none}:host .layout{display:flex;justify-content:center;align-items:center;margin:10px auto}:host button{min-width:32px;height:32px;padding:0 8px;margin:0 3px;background:#f3f5fb;border:0;border-radius:4px;outline:none;font-size:inherit;color:inherit}:host button:hover{background:#e8ebf4}:host button[curr]{background:#3fc2a7;color:#fff}:host([simple]) .home,:host([simple]) .end{display:none}:host([circle]) button{border-radius:50%}:host([color=\'red\']) button[curr]{background:#ff5061}:host([color=\'blue\']) button[curr]{background:#66b1ff}:host([color=\'green\']) button[curr]{background:#58d68d}:host([color=\'teal\']) button[curr]{background:#3fc2a7}:host([color=\'orange\']) button[curr]{background:#ffb618}:host([color=\'dark\']) button[curr]{background:#62778d}:host([color=\'purple\']) button[curr]{background:#ac61ce}\n</style> <div class="layout"> <button data-page="1" class="home">|<</button> <button data-page="prev" class="prev"><</button> <div class="pager"></div> <button data-page="next" class="next">></button> <button data-page="end" class="end">>|</button> </div> ',this.__LAYOUT__=this.root.children[1],this.__HOME__=this.__LAYOUT__.children[0],this.__PREV__=this.__LAYOUT__.children[1],this.__PAGE__=this.__LAYOUT__.children[2],this.__NEXT__=this.__LAYOUT__.children[3],this.__END__=this.__LAYOUT__.children[4]}update(){var{curr:t,totalpage:e,simple:r}=this.props,o=calculate(t,e,r);this.__PAGE__.innerHTML=o.map(e=>`<button ${t===e.to?"curr":""} data-page="${e.to}">${e.txt}</button>`).join("")}connectedCallback(){var{pagesize:t,total:e}=this.props;this.props.totalpage=Math.ceil(e/t),this.update(),this.__LAYOUT__.addEventListener("click",t=>{if("BUTTON"===t.target.tagName){var{curr:e,totalpage:r}=this.props,o=t.target.dataset.page,a=+o;if(a==a){if(a===e)return}else switch(o){case"prev":if((a=e-1)<1)return;break;case"next":if((a=e+1)>r)return;break;case"end":if(r===e)return;a=r}this.props.curr=a,this.update(),this.dispatchEvent(new CustomEvent("pick",{detail:a}))}},!1)}attributeChangedCallback(t,e,r){if(e!==r)switch(t){case"total":case"pagesize":case"curr":this.props[t]=+r||this.props[t];var{pagesize:o,total:a}=this.props;this.props.totalpage=Math.ceil(a/o),this.update();break;case"simple":this.props.simple=!0}}};
+
+if(!customElements.get('wc-pager')){
+  customElements.define('wc-pager', Pager)
+}

src/lib/utils.js

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