更新UI库
parent
cc7562db6e
commit
48536d29e8
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "org.bytedo.epub",
|
"name": "org.bytedo.epub",
|
||||||
"version": "1.2.0",
|
"version": "1.2.1",
|
||||||
"description": "E-pub Reader",
|
"description": "E-pub Reader",
|
||||||
"main": "src/main.js",
|
"main": "src/main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
const DOCTYPE_EXP=/<\!DOCTYPE html>/,TAG_START_EXP=/<([\w\-]+)([\w\W]*?)>/g,TAG_END_EXP=/<\/([\w\-]+)>/g,TAG_ATTR_EXP=/[@a-zA-Z\-.]+=(["'])[^"]+\1|[@a-zA-Z\-.]+=[a-zA-Z0-9]+|[@a-zA-Z\-.]+/g,TAG_CM_EXP=/<!--([\w\W]*?)-->/g;export function colorHtml(t){return(t=t.replace(DOCTYPE_EXP,"[tag]<!DOCTYPE [attr]html[/attr]>[/tag]").replace(TAG_START_EXP,(t,a,r)=>(r&&(r=r.replace(TAG_ATTR_EXP,(function(t){if(~t.indexOf("=")){return`[attr]${(t=t.split("=")).shift()}[/attr]=[str]${t.join("=")}[/str]`}return`[attr]${t}[/attr]`}))),`[tag]<${a+r}>[/tag]`)).replace(TAG_END_EXP,(t,a)=>`[tag]</${a}>[/tag]`).replace(TAG_CM_EXP,'<i class="gr"><!--$1--></i>')).replace(/\[(\/?)tag\]/g,(t,a)=>a?"</i>":'<i class="r">').replace(/\[(\/?)attr\]/g,(t,a)=>a?"</i>":'<i class="b">').replace(/\[(\/?)str\]/g,(t,a)=>a?"</i>":'<i class="g">')}export function colorCss(t){return t=t.replace(/:(hover|after|active|last\-child|first\-child)/g,'<i class="o">:$1</i>').replace(/([\.#])([\w\-]+)/g,'<i class="gr">$1</i><i class="o">$2</i>').replace(/([a-zA-Z\-]+):\s?([^;\n]+);?/g,'<b class="gr">$1: </b><i class="b">$2</i><i class="gr">;</i>').replace(/([,\{\}])/g,'<i class="gr">$1</i>').replace(/&/g,'<i class="r">&</i>')}
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2020-12-23 15:31:02
|
* @date 2021-02-05 16:32:07
|
||||||
* @version v1.0.0
|
* @version v1.0.3
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import"../scroll/index.js";import"../layer/index.js";import $ from"../utils.js";export default class Code extends HTMLElement{static get observedAttributes(){return["dark","lang"]}props={dark:"",lang:""};constructor(){super(),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{--color-teal-1: #4db6ac;--color-teal-2: #26a69a;--color-teal-3: #009688;--color-green-1: #81c784;--color-green-2: #66bb6a;--color-green-3: #4caf50;--color-purple-1: #9575cd;--color-purple-2: #9575cd;--color-purple-3: #673ab7;--color-blue-1: #64b5f6;--color-blue-2: #42a5f5;--color-blue-3: #2196f3;--color-red-1: #ff5061;--color-red-2: #eb3b48;--color-red-3: #ce3742;--color-orange-1: #ffb618;--color-orange-2: #f39c12;--color-orange-3: #e67e22;--color-plain-1: #f2f5fc;--color-plain-2: #e8ebf4;--color-plain-3: #dae1e9;--color-grey-1: #bdbdbd;--color-grey-2: #9e9e9e;--color-grey-3: #757575;--color-dark-1: #62778d;--color-dark-2: #526273;--color-dark-3: #425064}:host{display:flex}.code-box{display:flex;flex-direction:column;position:relative;width:100%;max-height:610px;margin:10px 0;border:1px solid var(--color-plain-2);border-radius:2px}.code-box .title{display:flex;justify-content:space-between;align-items:center;width:100%;height:24px;padding:0 12px;line-height:1;font-size:12px;background:var(--color-plain-2);user-select:none}.code-box .title i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;background:var(--color-red-1)}.code-box .title i:nth-child(2){background:var(--color-orange-1)}.code-box .title i:nth-child(3){background:var(--color-green-1)}.code-box .title .act{--size: 16px;margin:0 2px;color:var(--color-grey-2);cursor:pointer}.code-box .title .act:hover{color:var(--color-grey-3)}.code-box .title .act.run{display:none}.code-box .code{flex:1;padding:5px 0;line-height:18px;font-family:Menlo, Monaco, Consolas, \'Courier New\', monospace;font-size:13px;background:linear-gradient(to right, var(--color-plain-1) 40px, #fff 40px);color:var(--color-dark-1);cursor:text;counter-reset:code}.code-box .code p{display:flex;position:relative;min-height:18px;padding:0 8px 0 45px;white-space:pre-wrap;word-wrap:break-word}.code-box .code p::before{position:absolute;left:0;width:40px;height:100%;padding-right:5px;text-align:right;color:var(--color-grey-1);content:counter(code);counter-increment:code}:host([exec]) .title .run{display:inline-block}:host([dark]) .code-box{border-color:var(--color-dark-2)}:host([dark]) .code-box .title{background:var(--color-dark-2)}:host([dark]) .code-box .code{background:linear-gradient(to right, #596b7f 40px, var(--color-dark-1) 40px);color:var(--color-plain-3)}:host([dark]) .code-box .code p::before{color:var(--color-grey-3)}</style> <div class="code-box"> <header class="title"> <span><i></i><i></i><i></i></span> <span></span> <span> <wc-icon title="运行" class="act run" is="live"></wc-icon> <wc-icon title="复制" class="act cp" is="doc"></wc-icon> </span> </header> <wc-scroll axis="y" class="code"></wc-scroll> </div> ';var e=this.root.children[1],o=e.children[0];this.__CODE__=e.children[1],this.__LANG__=o.children[1],this.__RUN__=o.children[2].firstElementChild,this.__CP__=o.children[2].lastElementChild}get value(){return this.props.content}set value(e){this.props.content=e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),e=(e=e.replace(/</g,"<").replace(/>/g,">").split("\n")).map(e=>`<p>${e}</p>`).join(""),this.__CODE__.innerHTML=e}connectedCallback(){var e=this.innerHTML||this.textContent;this.value=e.replace(/^[\r\n]|\s{2,}$/g,""),this.textContent="",this._cpFN=$.bind(this.__CP__,"click",e=>{try{navigator.clipboard.writeText(this.value),layer.toast("复制到粘贴板成功","success")}catch(e){layer.toast("复制到粘贴板失败","error")}}),this._runFN=$.bind(this.__RUN__,"click",e=>{this.dispatchEvent(new CustomEvent("run",{detail:this.value}))})}unmounted(){$.unbind(this.__CP__,"click",this._cpFN),$.unbind(this.__RUN__,"click",this._runFN)}attributeChangedCallback(e,o,r){if(null!==r&&o!==r)switch(e){case"lang":this.props.lang=r.toLowerCase(),this.__LANG__.textContent=this.props.lang;break;case"value":this.value=r,this.removeAttribute("value")}}}
|
import"../scroll/index.js";import"../layer/index.js";import $ from"../utils.js";import{colorHtml,colorCss}from"./colorful.js";export default class Code extends HTMLElement{static get observedAttributes(){return["dark","lang"]}props={dark:"",lang:""};constructor(){super(),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}.code-box{overflow:hidden;display:flex;flex-direction:column;position:relative;width:100%;max-height:610px;margin:10px 0;padding-bottom:8px;border-radius:6px;background:#f7f8fb;color:var(--color-dark-1);box-shadow:0 0 8px rgba(0,0,0,.15)}.code-box .title{display:flex;justify-content:space-between;align-items:center;width:100%;height:32px;padding:0 12px;line-height:1;font-size:14px;user-select:none}.code-box .title i{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:50%;background:var(--color-red-1)}.code-box .title i:nth-child(2){background:var(--color-orange-1)}.code-box .title i:nth-child(3){background:var(--color-green-1)}.code-box .title .act{--size: 18px;margin:0 6px;color:var(--color-grey-2);cursor:pointer}.code-box .title .act:hover{color:var(--color-grey-3)}.code-box .title .act.run{display:none}.code-box .scoll{flex:1;padding:5px 0;line-height:20px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:14px;color:var(--color-dark-1);cursor:text;counter-reset:code}.code-box .scoll code{display:block;position:relative;min-height:20px;padding:0 8px 0 45px;white-space:pre-wrap;word-break:break-word}.code-box .scoll code::before{position:absolute;left:0;width:40px;height:100%;padding-right:5px;text-align:right;color:var(--color-grey-1);content:counter(code);counter-increment:code}.code-box .scoll code i{font-style:normal}.code-box .scoll code .r{color:var(--color-red-1)}.code-box .scoll code .b{color:var(--color-blue-1)}.code-box .scoll code .g{color:var(--color-green-1)}.code-box .scoll code .gr{color:var(--color-grey-2)}.code-box .scoll code .o{color:var(--color-orange-2)}:host([exec]) .title .run{display:inline-block}:host([dark]) .code-box{border-color:var(--color-dark-2);background:var(--color-dark-1);color:var(--color-plain-3)}:host([dark]) .code-box .code{color:var(--color-plain-2)}:host([dark]) .code-box .code p::before{color:var(--color-grey-3)}</style> <div class="code-box"> <header class="title"> <span><i></i><i></i><i></i></span> <span></span> <span> <wc-icon title="运行" class="act run" is="live"></wc-icon> <wc-icon title="复制" class="act cp" is="doc"></wc-icon> </span> </header> <wc-scroll axis="y" class="scoll"></wc-scroll> </div> ';var o=this.root.children[1],e=o.children[0];this.__CODE__=o.children[1],this.__LANG__=e.children[1],this.__RUN__=e.children[2].firstElementChild,this.__CP__=e.children[2].lastElementChild}get value(){return this.props.content}set value(o){switch(o=o.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),this.props.content=o,this.props.lang){case"html":o=colorHtml(o);break;case"css":case"scss":case"less":o=colorCss(o);break;default:o=o.replace(/</g,"<").replace(/>/g,">")}o=o.split("\n").map(o=>`<code>${o}</code>`).join(""),this.__CODE__.innerHTML=o}connectedCallback(){var o=this.innerHTML||this.textContent;(o=o.trim().replace(/^[\r\n]|\s{2,}$/g,"")).startsWith("<xmp>")&&o.endsWith("</xmp>")&&(o=o.slice(5,-6).trim()),this.value=o,this.textContent="",this._cpFN=$.bind(this.__CP__,"click",o=>{try{navigator.clipboard.writeText(this.value),layer.toast("复制到粘贴板成功","success")}catch(o){layer.toast("复制到粘贴板失败","error")}}),this._runFN=$.bind(this.__RUN__,"click",o=>{this.dispatchEvent(new CustomEvent("run",{detail:this.value}))})}unmounted(){$.unbind(this.__CP__,"click",this._cpFN),$.unbind(this.__RUN__,"click",this._runFN)}attributeChangedCallback(o,e,r){if(e!==r)switch(o){case"lang":this.props.lang=r.toLowerCase(),this.__LANG__.textContent=this.props.lang;break;case"value":this.value=r,this.removeAttribute("value")}}}
|
||||||
|
|
||||||
if(!customElements.get('wc-code')){
|
if(!customElements.get('wc-code')){
|
||||||
customElements.define('wc-code', Code)
|
customElements.define('wc-code', Code)
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,9 @@
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2014-10-10 00:45:09
|
* @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 表示定位/布局的属性
|
* 1 display float position overflow z-index 表示定位/布局的属性
|
||||||
|
|
@ -22,57 +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 */
|
/* 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, 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;}
|
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 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;}
|
|
||||||
[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;}
|
||||||
|
[anot],[\:repeat],[\:if] {visibility: hidden;}
|
||||||
|
|
||||||
.noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
|
.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 {
|
:root {
|
||||||
--color-teal-1: #4db6ac;
|
/* primary */
|
||||||
--color-teal-2: #26a69a;
|
--color-teal-a: rgba(72, 201, 176, 0.5);
|
||||||
--color-teal-3: #009688;
|
--color-teal-1: rgb(72, 201, 176);
|
||||||
--color-green-1: #81c784;
|
--color-teal-2: rgb(26, 188, 156);
|
||||||
--color-green-2: #66bb6a;
|
--color-teal-3: rgb(22, 160, 133);
|
||||||
--color-green-3: #4caf50;
|
/* success */
|
||||||
--color-purple-1: #9575cd;
|
--color-green-a: rgba(88, 214, 141, 0.5);
|
||||||
--color-purple-2: #9575cd;
|
--color-green-1: rgb(88, 214, 141);
|
||||||
--color-purple-3: #673ab7;
|
--color-green-2: rgb(46, 204, 113);
|
||||||
--color-blue-1: #64b5f6;
|
--color-green-3: rgb(39, 173, 96);
|
||||||
--color-blue-2: #42a5f5;
|
/* info */
|
||||||
--color-blue-3: #2196f3;
|
--color-blue-a: rgba(100, 181, 246, 0.5);
|
||||||
--color-red-1: #ff5061;
|
--color-blue-1: rgb(100, 181, 246);
|
||||||
--color-red-2: #eb3b48;
|
--color-blue-2: rgb(66, 165, 245);
|
||||||
--color-red-3: #ce3742;
|
--color-blue-3: rgb(33, 150, 243);
|
||||||
--color-orange-1: #ffb618;
|
/* danger */
|
||||||
--color-orange-2: #f39c12;
|
--color-red-a: rgba(255, 107, 129, 0.5);
|
||||||
--color-orange-3: #e67e22;
|
--color-red-1: rgb(255, 107, 129);
|
||||||
--color-plain-1: #f2f5fc;
|
--color-red-2: rgb(255, 71, 87);
|
||||||
--color-plain-2: #e8ebf4;
|
--color-red-3: rgb(230, 52, 67);
|
||||||
--color-plain-3: #dae1e9;
|
/* warning */
|
||||||
--color-grey-1: #bdbdbd;
|
--color-orange-a: rgba(244, 211, 19, 0.5);
|
||||||
--color-grey-2: #9e9e9e;
|
--color-orange-1: rgb(244, 211, 19);
|
||||||
--color-grey-3: #757575;
|
--color-orange-2: rgb(241, 196, 15);
|
||||||
--color-dark-1: #62778d;
|
--color-orange-3: rgb(205, 167, 13);
|
||||||
--color-dark-2: #526273;
|
/* default1 */
|
||||||
--color-dark-3: #425064;
|
--color-plain-a: rgba(150, 204, 248, 0.5);
|
||||||
|
--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.5);
|
||||||
|
--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(87, 96, 111, 0.5);
|
||||||
|
--color-dark-1: rgb(87, 96, 111);
|
||||||
|
--color-dark-2: rgb(52, 73, 94);
|
||||||
|
--color-dark-3: rgb(44, 62, 80);
|
||||||
}
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
|
* @date 2021-02-05 16:32:07
|
||||||
|
* @version v1.0.3
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if(!customElements.get('wc-')){
|
||||||
|
customElements.define('wc-', )
|
||||||
|
}
|
||||||
|
|
@ -1,310 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2020-12-08 11:30:52
|
* @date 2021-02-05 16:32:07
|
||||||
* @version v1.0.0
|
* @version v1.0.3
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import "../icon/index.js"
|
|
||||||
import $ from "../utils.js"
|
|
||||||
|
|
||||||
export default class CheckboxItem extends HTMLElement {
|
|
||||||
|
|
||||||
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ["color","value","checked","readonly","disabled"]
|
|
||||||
}
|
|
||||||
|
|
||||||
props = {
|
|
||||||
color: '',
|
|
||||||
value: '',
|
|
||||||
checked: false,
|
|
||||||
readonly: false,
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
Object.defineProperty(this, 'root', {
|
|
||||||
value: this.attachShadow({ mode: 'open' }),
|
|
||||||
writable: true,
|
|
||||||
enumerable: false,
|
|
||||||
configurable: true
|
|
||||||
})
|
|
||||||
|
|
||||||
this.root.innerHTML = `<style>* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
--color-teal-1: #4db6ac;
|
|
||||||
--color-teal-2: #26a69a;
|
|
||||||
--color-teal-3: #009688;
|
|
||||||
--color-green-1: #81c784;
|
|
||||||
--color-green-2: #66bb6a;
|
|
||||||
--color-green-3: #4caf50;
|
|
||||||
--color-purple-1: #9575cd;
|
|
||||||
--color-purple-2: #9575cd;
|
|
||||||
--color-purple-3: #673ab7;
|
|
||||||
--color-blue-1: #64b5f6;
|
|
||||||
--color-blue-2: #42a5f5;
|
|
||||||
--color-blue-3: #2196f3;
|
|
||||||
--color-red-1: #ff5061;
|
|
||||||
--color-red-2: #eb3b48;
|
|
||||||
--color-red-3: #ce3742;
|
|
||||||
--color-orange-1: #ffb618;
|
|
||||||
--color-orange-2: #f39c12;
|
|
||||||
--color-orange-3: #e67e22;
|
|
||||||
--color-plain-1: #f2f5fc;
|
|
||||||
--color-plain-2: #e8ebf4;
|
|
||||||
--color-plain-3: #dae1e9;
|
|
||||||
--color-grey-1: #bdbdbd;
|
|
||||||
--color-grey-2: #9e9e9e;
|
|
||||||
--color-grey-3: #757575;
|
|
||||||
--color-dark-1: #62778d;
|
|
||||||
--color-dark-2: #526273;
|
|
||||||
--color-dark-3: #425064; }
|
|
||||||
|
|
||||||
: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: var(--color-grey-3); }
|
|
||||||
: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: var(--color-red-1); }
|
|
||||||
:host([color='red']) label.checked .dot {
|
|
||||||
border-color: var(--color-red-1); }
|
|
||||||
:host([color='red']) label.checked .dot::after {
|
|
||||||
background: var(--color-red-1); }
|
|
||||||
|
|
||||||
:host([color='blue']) label.checked {
|
|
||||||
color: var(--color-blue-1); }
|
|
||||||
:host([color='blue']) label.checked .dot {
|
|
||||||
border-color: var(--color-blue-1); }
|
|
||||||
:host([color='blue']) label.checked .dot::after {
|
|
||||||
background: var(--color-blue-1); }
|
|
||||||
|
|
||||||
:host([color='green']) label.checked {
|
|
||||||
color: var(--color-green-1); }
|
|
||||||
:host([color='green']) label.checked .dot {
|
|
||||||
border-color: var(--color-green-1); }
|
|
||||||
:host([color='green']) label.checked .dot::after {
|
|
||||||
background: var(--color-green-1); }
|
|
||||||
|
|
||||||
:host([color='teal']) label.checked {
|
|
||||||
color: var(--color-teal-1); }
|
|
||||||
:host([color='teal']) label.checked .dot {
|
|
||||||
border-color: var(--color-teal-1); }
|
|
||||||
:host([color='teal']) label.checked .dot::after {
|
|
||||||
background: var(--color-teal-1); }
|
|
||||||
|
|
||||||
:host([color='orange']) label.checked {
|
|
||||||
color: var(--color-orange-1); }
|
|
||||||
:host([color='orange']) label.checked .dot {
|
|
||||||
border-color: var(--color-orange-1); }
|
|
||||||
:host([color='orange']) label.checked .dot::after {
|
|
||||||
background: var(--color-orange-1); }
|
|
||||||
|
|
||||||
:host([color='dark']) label.checked {
|
|
||||||
color: var(--color-dark-1); }
|
|
||||||
:host([color='dark']) label.checked .dot {
|
|
||||||
border-color: var(--color-dark-1); }
|
|
||||||
:host([color='dark']) label.checked .dot::after {
|
|
||||||
background: var(--color-dark-1); }
|
|
||||||
|
|
||||||
:host([color='purple']) label.checked {
|
|
||||||
color: var(--color-purple-1); }
|
|
||||||
:host([color='purple']) label.checked .dot {
|
|
||||||
border-color: var(--color-purple-1); }
|
|
||||||
:host([color='purple']) label.checked .dot::after {
|
|
||||||
background: var(--color-purple-1); }
|
|
||||||
</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 = false
|
|
||||||
}
|
|
||||||
|
|
||||||
_checkGroup() {
|
|
||||||
this._isInGroup = this.parentNode.tagName === 'WC-CHECKBOX'
|
|
||||||
if (this._isInGroup && this.parentNode.root) {
|
|
||||||
if (this.parentNode.value.includes(this.value)) {
|
|
||||||
this.checked = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get value() {
|
|
||||||
return this.props.value
|
|
||||||
}
|
|
||||||
|
|
||||||
set value(val) {
|
|
||||||
this.props.value = val
|
|
||||||
}
|
|
||||||
|
|
||||||
get checked() {
|
|
||||||
return this.props.checked
|
|
||||||
}
|
|
||||||
|
|
||||||
set checked(val) {
|
|
||||||
this.props.checked = !!val
|
|
||||||
var { checked, color } = this.props
|
|
||||||
this.__SWITCH__.classList.toggle('checked', checked)
|
|
||||||
this.__ICO__.setAttribute('is', 'checkbox-' + (checked ? 'on' : 'off'))
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
this.__ICO__.setAttribute('color', color)
|
|
||||||
} else {
|
|
||||||
this.__ICO__.removeAttribute('color')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get readOnly() {
|
|
||||||
return this.props.readonly
|
|
||||||
}
|
|
||||||
|
|
||||||
set readOnly(val) {
|
|
||||||
var type = typeof val
|
|
||||||
|
|
||||||
if (val === this.props.readonly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
|
||||||
this.props.readonly = true
|
|
||||||
this.setAttribute('readonly', '')
|
|
||||||
} else {
|
|
||||||
this.props.readonly = false
|
|
||||||
this.removeAttribute('readonly')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get disabled() {
|
|
||||||
return this.props.disabled
|
|
||||||
}
|
|
||||||
|
|
||||||
set disabled(val) {
|
|
||||||
var type = typeof val
|
|
||||||
|
|
||||||
if (val === this.props.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
|
||||||
this.props.disabled = true
|
|
||||||
this.setAttribute('disabled', '')
|
|
||||||
} else {
|
|
||||||
this.props.disabled = false
|
|
||||||
this.removeAttribute('disabled')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
this._checkGroup()
|
|
||||||
|
|
||||||
this._handlClick = $.bind(this, 'click', ev => {
|
|
||||||
ev.preventDefault()
|
|
||||||
|
|
||||||
if (this.disabled || this.readOnly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.checked = !this.checked
|
|
||||||
|
|
||||||
if (this._isInGroup) {
|
|
||||||
this.parentNode.dispatchEvent(
|
|
||||||
new CustomEvent('child-picked', {
|
|
||||||
detail: { value: this.value, checked: this.checked }
|
|
||||||
})
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnectedCallback() {
|
|
||||||
$.unbind(this, 'click', this._handlClick)
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, old, val) {
|
|
||||||
if (val === null || old === val) {return}
|
|
||||||
switch (name) {
|
|
||||||
case 'value':
|
|
||||||
case 'color':
|
|
||||||
this.props[name] = val
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'checked':
|
|
||||||
case 'readonly':
|
|
||||||
case 'disabled':
|
|
||||||
var k = name
|
|
||||||
if (k === 'readonly') {
|
|
||||||
k = 'readOnly'
|
|
||||||
}
|
|
||||||
this[k] = true
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
import"../icon/index.js";import $ from"../utils.js";export default class CheckboxItem extends HTMLElement{static get observedAttributes(){return["color","value","checked","readonly","disabled"]}props={color:"",value:"",checked:!1,readonly:!1,disabled:!1};constructor(){super(),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;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:var(--color-grey-3)}:host .dot{--size: 18px;padding:2px;margin-right:3px}:host([readonly]){opacity:.8}:host([disabled]){cursor:not-allowed;opacity:.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([type=danger]) label.checked{color:var(--color-red-1)}:host([type=danger]) label.checked .dot{border-color:var(--color-red-1)}:host([type=danger]) label.checked .dot::after{background:var(--color-red-1)}:host([type=info]) label.checked{color:var(--color-blue-1)}:host([type=info]) label.checked .dot{border-color:var(--color-blue-1)}:host([type=info]) label.checked .dot::after{background:var(--color-blue-1)}:host([type=success]) label.checked{color:var(--color-green-1)}:host([type=success]) label.checked .dot{border-color:var(--color-green-1)}:host([type=success]) label.checked .dot::after{background:var(--color-green-1)}:host([type=primary]) label.checked{color:var(--color-teal-1)}:host([type=primary]) label.checked .dot{border-color:var(--color-teal-1)}:host([type=primary]) label.checked .dot::after{background:var(--color-teal-1)}:host([type=warning]) label.checked{color:var(--color-orange-1)}:host([type=warning]) label.checked .dot{border-color:var(--color-orange-1)}:host([type=warning]) label.checked .dot::after{background:var(--color-orange-1)}:host([type=inverse]) label.checked{color:var(--color-dark-1)}:host([type=inverse]) label.checked .dot{border-color:var(--color-dark-1)}:host([type=inverse]) label.checked .dot::after{background:var(--color-dark-1)}:host([color=purple]) label.checked{color:var(--color-purple-1)}:host([color=purple]) label.checked .dot{border-color:var(--color-purple-1)}:host([color=purple]) label.checked .dot::after{background:var(--color-purple-1)}</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(o!==t)switch(e){case"value":case"color":this.props[e]=t;break;case"checked":case"readonly":case"disabled":var r=e;"readonly"===r&&(r="readOnly"),this[r]=!0}}}
|
||||||
|
|
||||||
if(!customElements.get('wc-checkbox-item')){
|
if(!customElements.get('wc-checkbox-item')){
|
||||||
customElements.define('wc-checkbox-item', CheckboxItem)
|
customElements.define('wc-checkbox-item', CheckboxItem)
|
||||||
|
|
|
||||||
|
|
@ -1,141 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2020-12-08 11:30:52
|
* @date 2021-02-05 16:32:07
|
||||||
* @version v1.0.0
|
* @version v1.0.3
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import $ from "../utils.js"
|
|
||||||
import "./checkbox-item.js"
|
|
||||||
|
|
||||||
export default class Checkbox extends HTMLElement {
|
|
||||||
|
|
||||||
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ["value"]
|
|
||||||
}
|
|
||||||
|
|
||||||
props = {
|
|
||||||
value: []
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
Object.defineProperty(this, 'root', {
|
|
||||||
value: this.attachShadow({ mode: 'open' }),
|
|
||||||
writable: true,
|
|
||||||
enumerable: false,
|
|
||||||
configurable: true
|
|
||||||
})
|
|
||||||
|
|
||||||
this.root.innerHTML = `<style>* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
--color-teal-1: #4db6ac;
|
|
||||||
--color-teal-2: #26a69a;
|
|
||||||
--color-teal-3: #009688;
|
|
||||||
--color-green-1: #81c784;
|
|
||||||
--color-green-2: #66bb6a;
|
|
||||||
--color-green-3: #4caf50;
|
|
||||||
--color-purple-1: #9575cd;
|
|
||||||
--color-purple-2: #9575cd;
|
|
||||||
--color-purple-3: #673ab7;
|
|
||||||
--color-blue-1: #64b5f6;
|
|
||||||
--color-blue-2: #42a5f5;
|
|
||||||
--color-blue-3: #2196f3;
|
|
||||||
--color-red-1: #ff5061;
|
|
||||||
--color-red-2: #eb3b48;
|
|
||||||
--color-red-3: #ce3742;
|
|
||||||
--color-orange-1: #ffb618;
|
|
||||||
--color-orange-2: #f39c12;
|
|
||||||
--color-orange-3: #e67e22;
|
|
||||||
--color-plain-1: #f2f5fc;
|
|
||||||
--color-plain-2: #e8ebf4;
|
|
||||||
--color-plain-3: #dae1e9;
|
|
||||||
--color-grey-1: #bdbdbd;
|
|
||||||
--color-grey-2: #9e9e9e;
|
|
||||||
--color-grey-3: #757575;
|
|
||||||
--color-dark-1: #62778d;
|
|
||||||
--color-dark-2: #526273;
|
|
||||||
--color-dark-3: #425064; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
display: inline-flex; }
|
|
||||||
</style>
|
|
||||||
<slot />
|
|
||||||
`
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
_updateChildrenStat() {
|
|
||||||
Array.from(this.children).forEach(it => {
|
|
||||||
if (it.tagName === 'WC-CHECKBOX-ITEM' && it.root) {
|
|
||||||
if (this.value.includes(it.value)) {
|
|
||||||
it.checked = true
|
|
||||||
} else {
|
|
||||||
it.checked = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
get value() {
|
|
||||||
return this.props.value
|
|
||||||
}
|
|
||||||
|
|
||||||
set value(val) {
|
|
||||||
if (val === this.props.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.props.value = val
|
|
||||||
this._updateChildrenStat()
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
this._pickedFn = $.bind(this, 'child-picked', ev => {
|
|
||||||
var tmp = [...this.props.value]
|
|
||||||
var idx = tmp.indexOf(ev.detail.value)
|
|
||||||
if (ev.detail.checked) {
|
|
||||||
if (idx < 0) {
|
|
||||||
tmp.push(ev.detail.value)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (~idx) {
|
|
||||||
tmp.splice(idx, 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.props.value = tmp
|
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnectedCallback() {
|
|
||||||
$.unbind(this, 'child-picked', this._pickedFn)
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, old, val) {
|
|
||||||
if (val === null || old === val) {return}
|
|
||||||
switch (name) {
|
|
||||||
case 'value':
|
|
||||||
if (val) {
|
|
||||||
this.value = val.split(/,\s*?/)
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
import $ from"../utils.js";import"./checkbox-item.js";export default class Checkbox extends HTMLElement{static get observedAttributes(){return["value"]}props={value:[]};constructor(){super(),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}</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(t!==i)switch(e){case"value":i&&(this.value=i.split(/,\s*?/))}}}
|
||||||
|
|
||||||
if(!customElements.get('wc-checkbox')){
|
if(!customElements.get('wc-checkbox')){
|
||||||
customElements.define('wc-checkbox', Checkbox)
|
customElements.define('wc-checkbox', Checkbox)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
import"./button.js";import"./link.js";import"./input.js";import"./textarea.js";import"./number.js";import"./radio.js";import"./checkbox.js";import"./switch.js";import"./select.js";import"./star.js";
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,13 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
|
* @date 2021-02-05 16:32:07
|
||||||
|
* @version v1.0.3
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import"../icon/index.js";import $ from"../utils.js";const IS_FIREFOX=!!window.sidebar;export default class Link extends HTMLElement{static get observedAttributes(){return["to","autofocus","disabled","lazy"]}props={to:null,autofocus:"",disabled:!1,lazy:0};constructor(){super(),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{position:relative;display:inline-flex;user-select:none;-moz-user-select:none;font-size:14px;cursor:pointer}:host .link{display:flex;justify-content:center;align-items:center;width:100%;padding:var(--padding, 0 2px);line-height:1;font-size:inherit;font-family:inherit;outline:none;color:inherit;cursor:inherit;text-decoration:none;transition:color .15s linear}:host .link::-moz-focus-inner{border:none}:host::after{position:absolute;bottom:-2px;left:0;width:100%;height:1px;border-bottom:1px dashed var(--color-plain-3);content:"";opacity:0;transition:opacity .15s linear}:host(:not([disabled]):focus-within)::after{height:2px;border-width:2px;opacity:1}:host(:not([disabled]):hover)::after,:host([underline])::after{opacity:1}:host([loading]),:host([disabled]){cursor:not-allowed;opacity:.6}:host([type=danger]){color:var(--color-red-2)}:host([type=danger])::after{border-color:var(--color-red-1)}:host([type=danger]:not([disabled]):hover){color:var(--color-red-1)}:host([type=danger]:not([disabled]):active){color:var(--color-red-3)}:host([type=info]){color:var(--color-blue-2)}:host([type=info])::after{border-color:var(--color-blue-1)}:host([type=info]:not([disabled]):hover){color:var(--color-blue-1)}:host([type=info]:not([disabled]):active){color:var(--color-blue-3)}:host([type=success]){color:var(--color-green-2)}:host([type=success])::after{border-color:var(--color-green-1)}:host([type=success]:not([disabled]):hover){color:var(--color-green-1)}:host([type=success]:not([disabled]):active){color:var(--color-green-3)}:host([type=primary]){color:var(--color-teal-2)}:host([type=primary])::after{border-color:var(--color-teal-1)}:host([type=primary]:not([disabled]):hover){color:var(--color-teal-1)}:host([type=primary]:not([disabled]):active){color:var(--color-teal-3)}:host([type=warning]){color:var(--color-orange-2)}:host([type=warning])::after{border-color:var(--color-orange-1)}:host([type=warning]:not([disabled]):hover){color:var(--color-orange-1)}:host([type=warning]:not([disabled]):active){color:var(--color-orange-3)}:host([type=inverse]){color:var(--color-dark-2)}:host([type=inverse])::after{border-color:var(--color-dark-1)}:host([type=inverse]:not([disabled]):hover){color:var(--color-dark-1)}:host([type=inverse]:not([disabled]):active){color:var(--color-dark-3)}:host([type=default]){color:var(--color-grey-2)}:host([type=default])::after{border-color:var(--color-grey-1)}:host([type=default]:not([disabled]):hover){color:var(--color-grey-1)}:host([type=default]:not([disabled]):active){color:var(--color-grey-3)}</style> <a tabindex="0" class="link"> <slot /> </a> ',this.__LINK__=this.root.children[1]}get disabled(){return this.props.disabled}set disabled(o){var e=typeof o;o!==this.props.disabled&&("boolean"===e&&o||"boolean"!==e?(this.props.disabled=!0,this.setAttribute("disabled",""),this.__LINK__.removeAttribute("tabindex")):(this.props.disabled=!1,this.removeAttribute("disabled"),this.__LINK__.setAttribute("tabindex",0)))}connectedCallback(){this.stamp=0,this._handleClick=$.bind(this.__LINK__,"click",o=>{var{disabled:e,lazy:t}=this.props,r=Date.now();return e?(o.stopPropagation(),void o.preventDefault()):t&&r-this.stamp<t?(o.preventDefault(),void o.stopPropagation()):void(this.stamp=r)})}disconnectedCallback(){$.unbind(this.__LINK__,"click",this._handleClick)}attributeChangedCallback(o,e,t){if(e!==t)switch(o){case"autofocus":this.__LINK__.setAttribute("autofocus",""),IS_FIREFOX&&setTimeout(o=>{this.__LINK__.focus()},10);break;case"to":null===t?this.__LINK__.removeAttribute("href"):this.__LINK__.setAttribute("href",t);break;case"lazy":this.props.lazy=t>>0;break;case"disabled":this[o]=null!==t}}}
|
||||||
|
|
||||||
|
if(!customElements.get('wc-link')){
|
||||||
|
customElements.define('wc-link', Link)
|
||||||
|
}
|
||||||
|
|
@ -1,412 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2020-12-08 11:30:52
|
* @date 2021-02-05 16:32:07
|
||||||
* @version v1.0.0
|
* @version v1.0.3
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import "../scroll/index.js"
|
|
||||||
import "../icon/index.js"
|
|
||||||
import $ from "../utils.js"
|
|
||||||
|
|
||||||
export default class Number extends HTMLElement {
|
|
||||||
|
|
||||||
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ["value","max","min","step","autofocus","readonly","disabled"]
|
|
||||||
}
|
|
||||||
|
|
||||||
props = {
|
|
||||||
value: 0,
|
|
||||||
max: null,
|
|
||||||
min: null,
|
|
||||||
step: 1,
|
|
||||||
autofocus: false,
|
|
||||||
readonly: false,
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
Object.defineProperty(this, 'root', {
|
|
||||||
value: this.attachShadow({ mode: 'open' }),
|
|
||||||
writable: true,
|
|
||||||
enumerable: false,
|
|
||||||
configurable: true
|
|
||||||
})
|
|
||||||
|
|
||||||
this.root.innerHTML = `<style>@charset "UTF-8";
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
--color-teal-1: #4db6ac;
|
|
||||||
--color-teal-2: #26a69a;
|
|
||||||
--color-teal-3: #009688;
|
|
||||||
--color-green-1: #81c784;
|
|
||||||
--color-green-2: #66bb6a;
|
|
||||||
--color-green-3: #4caf50;
|
|
||||||
--color-purple-1: #9575cd;
|
|
||||||
--color-purple-2: #9575cd;
|
|
||||||
--color-purple-3: #673ab7;
|
|
||||||
--color-blue-1: #64b5f6;
|
|
||||||
--color-blue-2: #42a5f5;
|
|
||||||
--color-blue-3: #2196f3;
|
|
||||||
--color-red-1: #ff5061;
|
|
||||||
--color-red-2: #eb3b48;
|
|
||||||
--color-red-3: #ce3742;
|
|
||||||
--color-orange-1: #ffb618;
|
|
||||||
--color-orange-2: #f39c12;
|
|
||||||
--color-orange-3: #e67e22;
|
|
||||||
--color-plain-1: #f2f5fc;
|
|
||||||
--color-plain-2: #e8ebf4;
|
|
||||||
--color-plain-3: #dae1e9;
|
|
||||||
--color-grey-1: #bdbdbd;
|
|
||||||
--color-grey-2: #9e9e9e;
|
|
||||||
--color-grey-3: #757575;
|
|
||||||
--color-dark-1: #62778d;
|
|
||||||
--color-dark-2: #526273;
|
|
||||||
--color-dark-3: #425064; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
overflow: hidden;
|
|
||||||
display: inline-block;
|
|
||||||
width: 128px;
|
|
||||||
height: 32px;
|
|
||||||
user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
color: var(--color-dark-2);
|
|
||||||
border-radius: 2px; }
|
|
||||||
|
|
||||||
.label {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
line-height: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
border: 1px solid var(--color-plain-3);
|
|
||||||
border-radius: inherit;
|
|
||||||
background: var(--bg-color, #fff);
|
|
||||||
color: inherit;
|
|
||||||
cursor: text;
|
|
||||||
/* ----- */ }
|
|
||||||
.label span {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 32px;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--bg-color, --color-plain-1);
|
|
||||||
font-size: 18px;
|
|
||||||
cursor: pointer; }
|
|
||||||
.label span:first-child {
|
|
||||||
border-radius: 2px 0 0 2px;
|
|
||||||
border-right: 1px solid var(--color-plain-3); }
|
|
||||||
.label span:last-child {
|
|
||||||
border-radius: 0 2px 2px 0;
|
|
||||||
border-left: 1px solid var(--color-plain-3); }
|
|
||||||
.label span.disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.6; }
|
|
||||||
.label input {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 5px;
|
|
||||||
border: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
color: inherit;
|
|
||||||
text-align: center;
|
|
||||||
font-size: inherit;
|
|
||||||
font-family: inherit;
|
|
||||||
background: none;
|
|
||||||
outline: none;
|
|
||||||
box-shadow: none;
|
|
||||||
cursor: inherit; }
|
|
||||||
.label input::placeholder {
|
|
||||||
color: var(--color-grey-1); }
|
|
||||||
.label .icon {
|
|
||||||
padding: 0 5px;
|
|
||||||
--size: 20px; }
|
|
||||||
|
|
||||||
/* --- */
|
|
||||||
:host([readonly]) .label {
|
|
||||||
cursor: default;
|
|
||||||
opacity: 0.8; }
|
|
||||||
:host([readonly]) .label span {
|
|
||||||
cursor: inherit; }
|
|
||||||
|
|
||||||
:host([disabled]) .label {
|
|
||||||
background: var(--color-plain-1);
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.6; }
|
|
||||||
:host([disabled]) .label span {
|
|
||||||
cursor: inherit; }
|
|
||||||
|
|
||||||
:host(:focus-within) {
|
|
||||||
box-shadow: 0 0 2px #88f7df; }
|
|
||||||
|
|
||||||
:host(:focus-within[readonly]) {
|
|
||||||
box-shadow: 0 0 2px #f3be4d; }
|
|
||||||
|
|
||||||
/* 额外样式 */
|
|
||||||
:host([round]) {
|
|
||||||
border-radius: 21px; }
|
|
||||||
:host([round]) .label span:first-child {
|
|
||||||
border-radius: 21px 0 0 21px; }
|
|
||||||
:host([round]) .label span:last-child {
|
|
||||||
border-radius: 0 21px 21px 0; }
|
|
||||||
|
|
||||||
:host([size='large']) {
|
|
||||||
width: 192px;
|
|
||||||
height: 42px; }
|
|
||||||
:host([size='large']) .label {
|
|
||||||
font-size: 16px; }
|
|
||||||
:host([size='large']) .label span {
|
|
||||||
width: 48px; }
|
|
||||||
:host([size='large']) .prepend,
|
|
||||||
:host([size='large']) .append {
|
|
||||||
height: 40px; }
|
|
||||||
|
|
||||||
:host([size='medium']) {
|
|
||||||
width: 144px;
|
|
||||||
height: 36px; }
|
|
||||||
:host([size='medium']) .label span {
|
|
||||||
width: 36px; }
|
|
||||||
:host([size='medium']) .prepend,
|
|
||||||
:host([size='medium']) .append {
|
|
||||||
height: 34px; }
|
|
||||||
|
|
||||||
:host([size='mini']) {
|
|
||||||
width: 96px;
|
|
||||||
height: 24px; }
|
|
||||||
:host([size='mini']) .label {
|
|
||||||
font-size: 12px; }
|
|
||||||
:host([size='mini']) .label span {
|
|
||||||
width: 28px; }
|
|
||||||
:host([size='mini']) .icon {
|
|
||||||
--size: 16px; }
|
|
||||||
:host([size='mini']) .prepend,
|
|
||||||
:host([size='mini']) .append {
|
|
||||||
height: 18px; }
|
|
||||||
</style>
|
|
||||||
<div class="label">
|
|
||||||
<span data-act="-">-</span>
|
|
||||||
<!-- <wc-icon class="icon" is="minus"></wc-icon> -->
|
|
||||||
<input value="0" maxlength="9" />
|
|
||||||
<span data-act="+">+</span>
|
|
||||||
<!-- <wc-icon class="icon" is="plus"></wc-icon> -->
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
|
|
||||||
|
|
||||||
this.__OUTER__ = this.root.children[1]
|
|
||||||
this.__INPUT__ = this.__OUTER__.children[1]
|
|
||||||
}
|
|
||||||
|
|
||||||
get readOnly() {
|
|
||||||
return this.props.readonly
|
|
||||||
}
|
|
||||||
|
|
||||||
set readOnly(val) {
|
|
||||||
var type = typeof val
|
|
||||||
|
|
||||||
if (val === this.props.readonly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
|
||||||
this.props.readonly = true
|
|
||||||
this.setAttribute('readonly', '')
|
|
||||||
this.__INPUT__.setAttribute('readonly', '')
|
|
||||||
} else {
|
|
||||||
this.props.readonly = false
|
|
||||||
this.removeAttribute('readonly')
|
|
||||||
this.__INPUT__.removeAttribute('readonly')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get disabled() {
|
|
||||||
return this.props.disabled
|
|
||||||
}
|
|
||||||
|
|
||||||
set disabled(val) {
|
|
||||||
var type = typeof val
|
|
||||||
|
|
||||||
if (val === this.props.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
|
||||||
this.props.disabled = true
|
|
||||||
this.setAttribute('disabled', '')
|
|
||||||
this.__INPUT__.setAttribute('disabled', '')
|
|
||||||
} else {
|
|
||||||
this.props.disabled = false
|
|
||||||
this.removeAttribute('disabled')
|
|
||||||
this.__INPUT__.removeAttribute('disabled')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get value() {
|
|
||||||
return this.props.value
|
|
||||||
}
|
|
||||||
|
|
||||||
set value(val) {
|
|
||||||
var n = +val
|
|
||||||
if (n === n) {
|
|
||||||
val = n
|
|
||||||
} else {
|
|
||||||
val = 0
|
|
||||||
}
|
|
||||||
this.props.value = val
|
|
||||||
this.__INPUT__.value = val
|
|
||||||
|
|
||||||
this._checkActionEnable()
|
|
||||||
}
|
|
||||||
|
|
||||||
_checkActionEnable() {
|
|
||||||
var { max, min, value } = this.props
|
|
||||||
var n = value
|
|
||||||
|
|
||||||
if (min !== null) {
|
|
||||||
if (min > n) {
|
|
||||||
n = min
|
|
||||||
}
|
|
||||||
this.__OUTER__.children[0].classList.toggle('disabled', value <= min)
|
|
||||||
}
|
|
||||||
if (max !== null) {
|
|
||||||
if (max < n) {
|
|
||||||
n = max
|
|
||||||
}
|
|
||||||
this.__OUTER__.children[2].classList.toggle('disabled', value >= max)
|
|
||||||
}
|
|
||||||
if (n !== value) {
|
|
||||||
this.props.value = n
|
|
||||||
this.__INPUT__.value = n
|
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_updateValue(act) {
|
|
||||||
var { max, min, value, step } = this.props
|
|
||||||
if (act === '+') {
|
|
||||||
if (max !== null && max < value + step) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
value += step
|
|
||||||
} else {
|
|
||||||
if (min !== null && min > value - step) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
value -= step
|
|
||||||
}
|
|
||||||
this.props.value = +value.toFixed(2)
|
|
||||||
this.__INPUT__.value = this.props.value
|
|
||||||
this._checkActionEnable()
|
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
// 键盘事件
|
|
||||||
this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
|
|
||||||
if (this.disabled || this.readOnly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// up: 38, down: 40
|
|
||||||
if (ev.keyCode === 38 || ev.keyCode === 40) {
|
|
||||||
ev.preventDefault()
|
|
||||||
return this._updateValue(ev.keyCode === 38 ? '+' : '-')
|
|
||||||
}
|
|
||||||
// 回车触发submit事件
|
|
||||||
if (ev.keyCode === 13) {
|
|
||||||
ev.preventDefault()
|
|
||||||
this.dispatchEvent(
|
|
||||||
new CustomEvent('submit', {
|
|
||||||
detail: this.value
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
this._handleChange = $.catch(this.__INPUT__, 'change', ev => {
|
|
||||||
if (isFinite(this.__INPUT__.value)) {
|
|
||||||
this.props.value = +this.__INPUT__.value
|
|
||||||
if (!this.__INPUT__.value.endsWith('.')) {
|
|
||||||
this.__INPUT__.value = this.props.value
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.__INPUT__.value = this.props.value = 0
|
|
||||||
}
|
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
})
|
|
||||||
|
|
||||||
this._handleAction = $.bind(this.__OUTER__, 'click', ev => {
|
|
||||||
if (this.disabled || this.readOnly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
var target = ev.target
|
|
||||||
|
|
||||||
if (target.tagName === 'SPAN' || target.parentNode === 'SPAN') {
|
|
||||||
var act = target.dataset.act || target.parentNode.dataset.act
|
|
||||||
|
|
||||||
this._updateValue(act)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnectedCallback() {
|
|
||||||
$.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, old, val) {
|
|
||||||
if (val === null || old === val) {return}
|
|
||||||
switch (name) {
|
|
||||||
case 'autofocus':
|
|
||||||
this.__INPUT__.setAttribute('autofocus', '')
|
|
||||||
// 辣鸡火狐, 要触发一下focus, 才能聚焦
|
|
||||||
setTimeout(_ => {
|
|
||||||
this.__INPUT__.focus()
|
|
||||||
}, 10)
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'value':
|
|
||||||
this.value = val >> 0
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'step':
|
|
||||||
case 'max':
|
|
||||||
case 'min':
|
|
||||||
var n = +val
|
|
||||||
if (n === n) {
|
|
||||||
this.props[name] = n
|
|
||||||
}
|
|
||||||
this._checkActionEnable()
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'readonly':
|
|
||||||
case 'disabled':
|
|
||||||
var k = name
|
|
||||||
if (k === 'readonly') {
|
|
||||||
k = 'readOnly'
|
|
||||||
}
|
|
||||||
this[k] = true
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
import"../scroll/index.js";import"../icon/index.js";import $ from"../utils.js";export default class Number extends HTMLElement{static get observedAttributes(){return["value","max","min","step","autofocus","readonly","disabled"]}props={value:0,max:null,min:null,step:1,autofocus:!1,readonly:!1,disabled:!1};constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML='<style>undefined</style> <div class="label"> <span data-act="-">-</span> \x3c!-- <wc-icon class="icon" is="minus"></wc-icon> --\x3e <input value="0" maxlength="9" /> <span data-act="+">+</span> \x3c!-- <wc-icon class="icon" is="plus"></wc-icon> --\x3e </div> ',this.__OUTER__=this.root.children[1],this.__INPUT__=this.__OUTER__.children[1]}get readOnly(){return this.props.readonly}set readOnly(e){var t=typeof e;e!==this.props.readonly&&("boolean"===t&&e||"boolean"!==t?(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&&("boolean"===t&&e||"boolean"!==t?(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.props.value}set value(e){var t=+e;e=t==t?t:0,this.props.value=e,this.__INPUT__.value=e,this._checkActionEnable()}_checkActionEnable(){var{max:e,min:t,value:s}=this.props,i=s;null!==t&&(t>i&&(i=t),this.__OUTER__.children[0].classList.toggle("disabled",s<=t)),null!==e&&(e<i&&(i=e),this.__OUTER__.children[2].classList.toggle("disabled",s>=e)),i!==s&&(this.props.value=i,this.__INPUT__.value=i,this.dispatchEvent(new CustomEvent("input")))}_updateValue(e){var{max:t,min:s,value:i,step:a}=this.props;if("+"===e){if(null!==t&&t<i+a)return;i+=a}else{if(null!==s&&s>i-a)return;i-=a}this.props.value=+i.toFixed(2),this.__INPUT__.value=this.props.value,this._checkActionEnable(),this.dispatchEvent(new CustomEvent("input"))}connectedCallback(){this._handleSubmit=$.catch(this.__INPUT__,"keydown",e=>{if(!this.disabled&&!this.readOnly)return 38===e.keyCode||40===e.keyCode?(e.preventDefault(),this._updateValue(38===e.keyCode?"+":"-")):void(13===e.keyCode&&(e.preventDefault(),this.dispatchEvent(new CustomEvent("submit",{detail:this.value}))))}),this._handleChange=$.catch(this.__INPUT__,"change",e=>{isFinite(this.__INPUT__.value)?(this.props.value=+this.__INPUT__.value,this.__INPUT__.value.endsWith(".")||(this.__INPUT__.value=this.props.value)):this.__INPUT__.value=this.props.value=0,this.dispatchEvent(new CustomEvent("input"))}),this._handleAction=$.bind(this.__OUTER__,"click",e=>{if(!this.disabled&&!this.readOnly){var t=e.target;if("SPAN"===t.tagName||"SPAN"===t.parentNode){var s=t.dataset.act||t.parentNode.dataset.act;this._updateValue(s)}}})}disconnectedCallback(){$.unbind(this.__INPUT__,"keydown",this._handleSubmit)}attributeChangedCallback(e,t,s){if(t!==s)switch(e){case"autofocus":this.__INPUT__.setAttribute("autofocus",""),setTimeout(e=>{this.__INPUT__.focus()},10);break;case"value":this.value=s>>0;break;case"step":case"max":case"min":var i=+s;i==i&&(this.props[e]=i),this._checkActionEnable();break;case"readonly":case"disabled":var a=e;"readonly"===a&&(a="readOnly"),this[a]=!0}}}
|
||||||
|
|
||||||
if(!customElements.get('wc-number')){
|
if(!customElements.get('wc-number')){
|
||||||
customElements.define('wc-number', Number)
|
customElements.define('wc-number', Number)
|
||||||
|
|
|
||||||
|
|
@ -1,162 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2020-12-08 11:30:52
|
* @date 2021-02-05 16:32:07
|
||||||
* @version v1.0.0
|
* @version v1.0.3
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
export default class Progress extends HTMLElement {
|
|
||||||
|
|
||||||
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ["value","max"]
|
|
||||||
}
|
|
||||||
|
|
||||||
props = {
|
|
||||||
value: 0,
|
|
||||||
max: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
Object.defineProperty(this, 'root', {
|
|
||||||
value: this.attachShadow({ mode: 'open' }),
|
|
||||||
writable: true,
|
|
||||||
enumerable: false,
|
|
||||||
configurable: true
|
|
||||||
})
|
|
||||||
|
|
||||||
this.root.innerHTML = `<style>* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
--color-teal-1: #4db6ac;
|
|
||||||
--color-teal-2: #26a69a;
|
|
||||||
--color-teal-3: #009688;
|
|
||||||
--color-green-1: #81c784;
|
|
||||||
--color-green-2: #66bb6a;
|
|
||||||
--color-green-3: #4caf50;
|
|
||||||
--color-purple-1: #9575cd;
|
|
||||||
--color-purple-2: #9575cd;
|
|
||||||
--color-purple-3: #673ab7;
|
|
||||||
--color-blue-1: #64b5f6;
|
|
||||||
--color-blue-2: #42a5f5;
|
|
||||||
--color-blue-3: #2196f3;
|
|
||||||
--color-red-1: #ff5061;
|
|
||||||
--color-red-2: #eb3b48;
|
|
||||||
--color-red-3: #ce3742;
|
|
||||||
--color-orange-1: #ffb618;
|
|
||||||
--color-orange-2: #f39c12;
|
|
||||||
--color-orange-3: #e67e22;
|
|
||||||
--color-plain-1: #f2f5fc;
|
|
||||||
--color-plain-2: #e8ebf4;
|
|
||||||
--color-plain-3: #dae1e9;
|
|
||||||
--color-grey-1: #bdbdbd;
|
|
||||||
--color-grey-2: #9e9e9e;
|
|
||||||
--color-grey-3: #757575;
|
|
||||||
--color-dark-1: #62778d;
|
|
||||||
--color-dark-2: #526273;
|
|
||||||
--color-dark-3: #425064; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
display: flex;
|
|
||||||
align-items: center; }
|
|
||||||
:host label {
|
|
||||||
flex: 1;
|
|
||||||
height: var(--size, 10px);
|
|
||||||
border-radius: 9px;
|
|
||||||
background: var(--color-plain-2); }
|
|
||||||
:host label span {
|
|
||||||
display: block;
|
|
||||||
width: 0;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 9px;
|
|
||||||
background: var(--color-teal-1); }
|
|
||||||
|
|
||||||
:host([size='large']) label {
|
|
||||||
height: 18px; }
|
|
||||||
|
|
||||||
:host([size='medium']) label {
|
|
||||||
height: 14px; }
|
|
||||||
|
|
||||||
:host([size='mini']) label {
|
|
||||||
height: 6px; }
|
|
||||||
|
|
||||||
:host([color='red']) label span {
|
|
||||||
background: var(--color-red-1); }
|
|
||||||
|
|
||||||
:host([color='blue']) label span {
|
|
||||||
background: var(--color-blue-1); }
|
|
||||||
|
|
||||||
:host([color='green']) label span {
|
|
||||||
background: var(--color-green-1); }
|
|
||||||
|
|
||||||
:host([color='orange']) label span {
|
|
||||||
background: var(--color-orange-1); }
|
|
||||||
|
|
||||||
:host([color='dark']) label span {
|
|
||||||
background: var(--color-dark-1); }
|
|
||||||
|
|
||||||
:host([color='purple']) label span {
|
|
||||||
background: var(--color-purple-1); }
|
|
||||||
</style>
|
|
||||||
<label><span></span></label>
|
|
||||||
`
|
|
||||||
|
|
||||||
this.__THUMB__ = this.root.children[1].lastElementChild
|
|
||||||
}
|
|
||||||
|
|
||||||
get value() {
|
|
||||||
return this.props.value
|
|
||||||
}
|
|
||||||
|
|
||||||
set value(val) {
|
|
||||||
this.props.value = +val
|
|
||||||
this.calculate()
|
|
||||||
}
|
|
||||||
|
|
||||||
calculate() {
|
|
||||||
var { max, value } = this.props
|
|
||||||
this.__THUMB__.style.width = `${(100 * value) / max}%`
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
this.calculate()
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, old, val) {
|
|
||||||
if (val === null || old === val) {return}
|
|
||||||
switch (name) {
|
|
||||||
case 'max':
|
|
||||||
var max = +val
|
|
||||||
if (max !== max || max < 1) {
|
|
||||||
max = 1
|
|
||||||
}
|
|
||||||
this.props.max = max
|
|
||||||
this.calculate()
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'value':
|
|
||||||
var v = +val
|
|
||||||
if (v === v) {
|
|
||||||
this.props.value = v
|
|
||||||
this.calculate()
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
export default class Progress extends HTMLElement{static get observedAttributes(){return["value","max"]}props={value:0,max:1};constructor(){super(),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;align-items:center}:host label{flex:1;height:var(--size, 10px);border-radius:9px;background:var(--color-plain-2)}:host label span{display:block;width:0;height:100%;border-radius:9px;background:var(--color-teal-1)}:host([size=large]) label{height:18px}:host([size=medium]) label{height:14px}:host([size=mini]) label{height:6px}:host([type=danger]) label span{background:var(--color-red-1)}:host([type=info]) label span{background:var(--color-blue-1)}:host([type=success]) label span{background:var(--color-green-1)}:host([type=warning]) label span{background:var(--color-orange-1)}:host([type=inverse]) label span{background:var(--color-dark-1)}:host([color=purple]) label span{background:var(--color-purple-1)}</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"max":var r=+l;(r!=r||r<1)&&(r=1),this.props.max=r,this.calculate();break;case"value":var t=+l;t==t&&(this.props.value=t,this.calculate())}}}
|
||||||
|
|
||||||
if(!customElements.get('wc-progress')){
|
if(!customElements.get('wc-progress')){
|
||||||
customElements.define('wc-progress', Progress)
|
customElements.define('wc-progress', Progress)
|
||||||
|
|
|
||||||
|
|
@ -1,307 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2020-12-08 11:30:52
|
* @date 2021-02-05 16:32:07
|
||||||
* @version v1.0.0
|
* @version v1.0.3
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import $ from "../utils.js"
|
|
||||||
|
|
||||||
export default class RadioItem extends HTMLElement {
|
|
||||||
|
|
||||||
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ["value","checked","readonly","disabled"]
|
|
||||||
}
|
|
||||||
|
|
||||||
props = {
|
|
||||||
value: '',
|
|
||||||
checked: false,
|
|
||||||
readonly: false,
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
Object.defineProperty(this, 'root', {
|
|
||||||
value: this.attachShadow({ mode: 'open' }),
|
|
||||||
writable: true,
|
|
||||||
enumerable: false,
|
|
||||||
configurable: true
|
|
||||||
})
|
|
||||||
|
|
||||||
this.root.innerHTML = `<style>* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
--color-teal-1: #4db6ac;
|
|
||||||
--color-teal-2: #26a69a;
|
|
||||||
--color-teal-3: #009688;
|
|
||||||
--color-green-1: #81c784;
|
|
||||||
--color-green-2: #66bb6a;
|
|
||||||
--color-green-3: #4caf50;
|
|
||||||
--color-purple-1: #9575cd;
|
|
||||||
--color-purple-2: #9575cd;
|
|
||||||
--color-purple-3: #673ab7;
|
|
||||||
--color-blue-1: #64b5f6;
|
|
||||||
--color-blue-2: #42a5f5;
|
|
||||||
--color-blue-3: #2196f3;
|
|
||||||
--color-red-1: #ff5061;
|
|
||||||
--color-red-2: #eb3b48;
|
|
||||||
--color-red-3: #ce3742;
|
|
||||||
--color-orange-1: #ffb618;
|
|
||||||
--color-orange-2: #f39c12;
|
|
||||||
--color-orange-3: #e67e22;
|
|
||||||
--color-plain-1: #f2f5fc;
|
|
||||||
--color-plain-2: #e8ebf4;
|
|
||||||
--color-plain-3: #dae1e9;
|
|
||||||
--color-grey-1: #bdbdbd;
|
|
||||||
--color-grey-2: #9e9e9e;
|
|
||||||
--color-grey-3: #757575;
|
|
||||||
--color-dark-1: #62778d;
|
|
||||||
--color-dark-2: #526273;
|
|
||||||
--color-dark-3: #425064; }
|
|
||||||
|
|
||||||
: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: var(--color-grey-3); }
|
|
||||||
: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 var(--color-grey-1);
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #fff; }
|
|
||||||
:host .dot::after {
|
|
||||||
display: block;
|
|
||||||
visibility: hidden;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--color-grey-1);
|
|
||||||
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: var(--color-red-1); }
|
|
||||||
:host([color='red']) label.checked .dot {
|
|
||||||
border-color: var(--color-red-1); }
|
|
||||||
:host([color='red']) label.checked .dot::after {
|
|
||||||
background: var(--color-red-1); }
|
|
||||||
|
|
||||||
:host([color='blue']) label.checked {
|
|
||||||
color: var(--color-blue-1); }
|
|
||||||
:host([color='blue']) label.checked .dot {
|
|
||||||
border-color: var(--color-blue-1); }
|
|
||||||
:host([color='blue']) label.checked .dot::after {
|
|
||||||
background: var(--color-blue-1); }
|
|
||||||
|
|
||||||
:host([color='green']) label.checked {
|
|
||||||
color: var(--color-green-1); }
|
|
||||||
:host([color='green']) label.checked .dot {
|
|
||||||
border-color: var(--color-green-1); }
|
|
||||||
:host([color='green']) label.checked .dot::after {
|
|
||||||
background: var(--color-green-1); }
|
|
||||||
|
|
||||||
:host([color='teal']) label.checked {
|
|
||||||
color: var(--color-teal-1); }
|
|
||||||
:host([color='teal']) label.checked .dot {
|
|
||||||
border-color: var(--color-teal-1); }
|
|
||||||
:host([color='teal']) label.checked .dot::after {
|
|
||||||
background: var(--color-teal-1); }
|
|
||||||
|
|
||||||
:host([color='orange']) label.checked {
|
|
||||||
color: var(--color-orange-1); }
|
|
||||||
:host([color='orange']) label.checked .dot {
|
|
||||||
border-color: var(--color-orange-1); }
|
|
||||||
:host([color='orange']) label.checked .dot::after {
|
|
||||||
background: var(--color-orange-1); }
|
|
||||||
|
|
||||||
:host([color='dark']) label.checked {
|
|
||||||
color: var(--color-dark-1); }
|
|
||||||
:host([color='dark']) label.checked .dot {
|
|
||||||
border-color: var(--color-dark-1); }
|
|
||||||
:host([color='dark']) label.checked .dot::after {
|
|
||||||
background: var(--color-dark-1); }
|
|
||||||
|
|
||||||
:host([color='purple']) label.checked {
|
|
||||||
color: var(--color-purple-1); }
|
|
||||||
:host([color='purple']) label.checked .dot {
|
|
||||||
border-color: var(--color-purple-1); }
|
|
||||||
:host([color='purple']) label.checked .dot::after {
|
|
||||||
background: var(--color-purple-1); }
|
|
||||||
</style>
|
|
||||||
<label>
|
|
||||||
<span class="dot"></span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
`
|
|
||||||
|
|
||||||
|
|
||||||
this.__SWITCH__ = this.root.lastElementChild
|
|
||||||
}
|
|
||||||
|
|
||||||
get value() {
|
|
||||||
return this.props.value
|
|
||||||
}
|
|
||||||
|
|
||||||
set value(val) {
|
|
||||||
this.props.value = val
|
|
||||||
}
|
|
||||||
|
|
||||||
get checked() {
|
|
||||||
return this.props.checked
|
|
||||||
}
|
|
||||||
|
|
||||||
set checked(val) {
|
|
||||||
this.props.checked = !!val
|
|
||||||
this.__SWITCH__.classList.toggle('checked', this.props.checked)
|
|
||||||
}
|
|
||||||
|
|
||||||
get readOnly() {
|
|
||||||
return this.props.readonly
|
|
||||||
}
|
|
||||||
|
|
||||||
set readOnly(val) {
|
|
||||||
var type = typeof val
|
|
||||||
|
|
||||||
if (val === this.props.readonly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
|
||||||
this.props.readonly = true
|
|
||||||
this.setAttribute('readonly', '')
|
|
||||||
} else {
|
|
||||||
this.props.readonly = false
|
|
||||||
this.removeAttribute('readonly')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get disabled() {
|
|
||||||
return this.props.disabled
|
|
||||||
}
|
|
||||||
|
|
||||||
set disabled(val) {
|
|
||||||
var type = typeof val
|
|
||||||
|
|
||||||
if (val === this.props.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
|
||||||
this.props.disabled = true
|
|
||||||
this.setAttribute('disabled', '')
|
|
||||||
} else {
|
|
||||||
this.props.disabled = false
|
|
||||||
this.removeAttribute('disabled')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
if (this.value === this.parentNode.value) {
|
|
||||||
this.checked = true
|
|
||||||
}
|
|
||||||
|
|
||||||
this._handleClick = $.catch(this, 'click', ev => {
|
|
||||||
if (this.disabled || this.readOnly || this.checked) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.parentNode.dispatchEvent(
|
|
||||||
new CustomEvent('child-picked', { detail: this.value })
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnectedCallback() {
|
|
||||||
$.unbind(this, 'click', this._handleClick)
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, old, val) {
|
|
||||||
if (val === null || old === val) {return}
|
|
||||||
switch (name) {
|
|
||||||
case 'value':
|
|
||||||
this.value = val
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'checked':
|
|
||||||
case 'readonly':
|
|
||||||
case 'disabled':
|
|
||||||
var k = name
|
|
||||||
if (k === 'readonly') {
|
|
||||||
k = 'readOnly'
|
|
||||||
}
|
|
||||||
this[k] = true
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
import $ from"../utils.js";export default class RadioItem extends HTMLElement{static get observedAttributes(){return["value","checked","readonly","disabled"]}props={value:"",checked:!1,readonly:!1,disabled:!1};constructor(){super(),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;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:var(--color-grey-3)}: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 var(--color-grey-1);border-radius:50%;background:#fff}:host .dot::after{display:block;visibility:hidden;width:12px;height:12px;border-radius:50%;background:var(--color-grey-1);content:""}:host([readonly]){opacity:.8}:host([disabled]){cursor:not-allowed;opacity:.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([type=danger]) label.checked{color:var(--color-red-1)}:host([type=danger]) label.checked .dot{border-color:var(--color-red-1)}:host([type=danger]) label.checked .dot::after{background:var(--color-red-1)}:host([type=info]) label.checked{color:var(--color-blue-1)}:host([type=info]) label.checked .dot{border-color:var(--color-blue-1)}:host([type=info]) label.checked .dot::after{background:var(--color-blue-1)}:host([type=success]) label.checked{color:var(--color-green-1)}:host([type=success]) label.checked .dot{border-color:var(--color-green-1)}:host([type=success]) label.checked .dot::after{background:var(--color-green-1)}:host([type=primary]) label.checked{color:var(--color-teal-1)}:host([type=primary]) label.checked .dot{border-color:var(--color-teal-1)}:host([type=primary]) label.checked .dot::after{background:var(--color-teal-1)}:host([type=warning]) label.checked{color:var(--color-orange-1)}:host([type=warning]) label.checked .dot{border-color:var(--color-orange-1)}:host([type=warning]) label.checked .dot::after{background:var(--color-orange-1)}:host([type=inverse]) label.checked{color:var(--color-dark-1)}:host([type=inverse]) label.checked .dot{border-color:var(--color-dark-1)}:host([type=inverse]) label.checked .dot::after{background:var(--color-dark-1)}:host([color=purple]) label.checked{color:var(--color-purple-1)}:host([color=purple]) label.checked .dot{border-color:var(--color-purple-1)}:host([color=purple]) label.checked .dot::after{background:var(--color-purple-1)}</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(o!==t)switch(e){case"value":this.value=t;break;case"checked":case"readonly":case"disabled":var r=e;"readonly"===r&&(r="readOnly"),this[r]=!0}}}
|
||||||
|
|
||||||
if(!customElements.get('wc-radio-item')){
|
if(!customElements.get('wc-radio-item')){
|
||||||
customElements.define('wc-radio-item', RadioItem)
|
customElements.define('wc-radio-item', RadioItem)
|
||||||
|
|
|
||||||
|
|
@ -1,129 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2020-12-08 11:30:52
|
* @date 2021-02-05 16:32:07
|
||||||
* @version v1.0.0
|
* @version v1.0.3
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import $ from "../utils.js"
|
|
||||||
import "./radio-item.js"
|
|
||||||
|
|
||||||
export default class Radio extends HTMLElement {
|
|
||||||
|
|
||||||
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ["value"]
|
|
||||||
}
|
|
||||||
|
|
||||||
props = {
|
|
||||||
value: null
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
Object.defineProperty(this, 'root', {
|
|
||||||
value: this.attachShadow({ mode: 'open' }),
|
|
||||||
writable: true,
|
|
||||||
enumerable: false,
|
|
||||||
configurable: true
|
|
||||||
})
|
|
||||||
|
|
||||||
this.root.innerHTML = `<style>* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
--color-teal-1: #4db6ac;
|
|
||||||
--color-teal-2: #26a69a;
|
|
||||||
--color-teal-3: #009688;
|
|
||||||
--color-green-1: #81c784;
|
|
||||||
--color-green-2: #66bb6a;
|
|
||||||
--color-green-3: #4caf50;
|
|
||||||
--color-purple-1: #9575cd;
|
|
||||||
--color-purple-2: #9575cd;
|
|
||||||
--color-purple-3: #673ab7;
|
|
||||||
--color-blue-1: #64b5f6;
|
|
||||||
--color-blue-2: #42a5f5;
|
|
||||||
--color-blue-3: #2196f3;
|
|
||||||
--color-red-1: #ff5061;
|
|
||||||
--color-red-2: #eb3b48;
|
|
||||||
--color-red-3: #ce3742;
|
|
||||||
--color-orange-1: #ffb618;
|
|
||||||
--color-orange-2: #f39c12;
|
|
||||||
--color-orange-3: #e67e22;
|
|
||||||
--color-plain-1: #f2f5fc;
|
|
||||||
--color-plain-2: #e8ebf4;
|
|
||||||
--color-plain-3: #dae1e9;
|
|
||||||
--color-grey-1: #bdbdbd;
|
|
||||||
--color-grey-2: #9e9e9e;
|
|
||||||
--color-grey-3: #757575;
|
|
||||||
--color-dark-1: #62778d;
|
|
||||||
--color-dark-2: #526273;
|
|
||||||
--color-dark-3: #425064; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
display: inline-flex; }
|
|
||||||
</style>
|
|
||||||
<slot />
|
|
||||||
`
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
_updateChildrenStat() {
|
|
||||||
Array.from(this.children).forEach(it => {
|
|
||||||
if (it.tagName === 'WC-RADIO-ITEM' && it.root) {
|
|
||||||
if (it.value === this.props.value) {
|
|
||||||
it.checked = true
|
|
||||||
} else {
|
|
||||||
it.checked = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
get value() {
|
|
||||||
return this.props.value
|
|
||||||
}
|
|
||||||
|
|
||||||
set value(val) {
|
|
||||||
if (val === this.props.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.props.value = val
|
|
||||||
this._updateChildrenStat()
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
this._pickedFn = $.bind(this, 'child-picked', ev => {
|
|
||||||
log('radio picked: ', ev.detail)
|
|
||||||
this.value = ev.detail
|
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnectedCallback() {
|
|
||||||
$.unbind(this, 'child-picked', this._pickedFn)
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, old, val) {
|
|
||||||
if (val === null || old === val) {return}
|
|
||||||
switch (name) {
|
|
||||||
case 'value':
|
|
||||||
this.value = val
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
import $ from"../utils.js";import"./radio-item.js";export default class Radio extends HTMLElement{static get observedAttributes(){return["value"]}props={value:null};constructor(){super(),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}</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(t!==i)switch(e){case"value":this.value=i}}}
|
||||||
|
|
||||||
if(!customElements.get('wc-radio')){
|
if(!customElements.get('wc-radio')){
|
||||||
customElements.define('wc-radio', Radio)
|
customElements.define('wc-radio', Radio)
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,300 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2020-12-08 11:30:52
|
* @date 2021-02-05 16:32:07
|
||||||
* @version v1.0.0
|
* @version v1.0.3
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import $ from "../utils.js"
|
|
||||||
|
|
||||||
export default class Star extends HTMLElement {
|
|
||||||
|
|
||||||
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ["value","text","size","color","'allow-half'","'show-value'","starSize","disabled"]
|
|
||||||
}
|
|
||||||
|
|
||||||
props = {
|
|
||||||
value: 0,
|
|
||||||
text: [],
|
|
||||||
size: '',
|
|
||||||
color: '',
|
|
||||||
'allow-half': false,
|
|
||||||
'show-value': false,
|
|
||||||
starSize: 32, // 星星的宽度, 用于实现半星
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
Object.defineProperty(this, 'root', {
|
|
||||||
value: this.attachShadow({ mode: 'open' }),
|
|
||||||
writable: true,
|
|
||||||
enumerable: false,
|
|
||||||
configurable: true
|
|
||||||
})
|
|
||||||
|
|
||||||
this.root.innerHTML = `<style>* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
--color-teal-1: #4db6ac;
|
|
||||||
--color-teal-2: #26a69a;
|
|
||||||
--color-teal-3: #009688;
|
|
||||||
--color-green-1: #81c784;
|
|
||||||
--color-green-2: #66bb6a;
|
|
||||||
--color-green-3: #4caf50;
|
|
||||||
--color-purple-1: #9575cd;
|
|
||||||
--color-purple-2: #9575cd;
|
|
||||||
--color-purple-3: #673ab7;
|
|
||||||
--color-blue-1: #64b5f6;
|
|
||||||
--color-blue-2: #42a5f5;
|
|
||||||
--color-blue-3: #2196f3;
|
|
||||||
--color-red-1: #ff5061;
|
|
||||||
--color-red-2: #eb3b48;
|
|
||||||
--color-red-3: #ce3742;
|
|
||||||
--color-orange-1: #ffb618;
|
|
||||||
--color-orange-2: #f39c12;
|
|
||||||
--color-orange-3: #e67e22;
|
|
||||||
--color-plain-1: #f2f5fc;
|
|
||||||
--color-plain-2: #e8ebf4;
|
|
||||||
--color-plain-3: #dae1e9;
|
|
||||||
--color-grey-1: #bdbdbd;
|
|
||||||
--color-grey-2: #9e9e9e;
|
|
||||||
--color-grey-3: #757575;
|
|
||||||
--color-dark-1: #62778d;
|
|
||||||
--color-dark-2: #526273;
|
|
||||||
--color-dark-3: #425064; }
|
|
||||||
|
|
||||||
: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 0.1s easein-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: var(--color-red-1); }
|
|
||||||
|
|
||||||
:host([color='teal']) label span {
|
|
||||||
color: var(--color-teal-1); }
|
|
||||||
|
|
||||||
:host([color='green']) label span {
|
|
||||||
color: var(--color-green-1); }
|
|
||||||
|
|
||||||
:host([color='grey']) label span {
|
|
||||||
color: var(--color-grey-1); }
|
|
||||||
|
|
||||||
:host([color='blue']) label span {
|
|
||||||
color: var(--color-blue-1); }
|
|
||||||
|
|
||||||
:host([color='purple']) label span {
|
|
||||||
color: var(--color-purple-1); }
|
|
||||||
|
|
||||||
:host([color='orange']) label span {
|
|
||||||
color: var(--color-orange-1); }
|
|
||||||
|
|
||||||
: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(val) {
|
|
||||||
var v = +val
|
|
||||||
var tmp = val >> 0
|
|
||||||
if (v === v && v > 0) {
|
|
||||||
val = v
|
|
||||||
} else {
|
|
||||||
val = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
if (val > 5) {
|
|
||||||
val = 5
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.value = val
|
|
||||||
this._updateDraw(-1)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 更新图标渲染
|
|
||||||
* i: int
|
|
||||||
* f: float
|
|
||||||
*/
|
|
||||||
_updateDraw(i, f = 0) {
|
|
||||||
var _last = 'star-half'
|
|
||||||
var { value, tmp = { i: 0, f: 0 } } = this.props
|
|
||||||
|
|
||||||
if (i === -1) {
|
|
||||||
i = Math.floor(value)
|
|
||||||
f = +(value % 1).toFixed(1)
|
|
||||||
if (i > 0 && i === value) {
|
|
||||||
i--
|
|
||||||
f = 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.props['allow-half']) {
|
|
||||||
f = f > 0 ? 1 : 0
|
|
||||||
}
|
|
||||||
// 减少DOM操作
|
|
||||||
if (i === tmp.i && f === tmp.f) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (f > 0.5) {
|
|
||||||
_last = 'star-full'
|
|
||||||
}
|
|
||||||
|
|
||||||
this.__STARS__.forEach((it, k) => {
|
|
||||||
it.setAttribute('is', k < i ? 'star-full' : 'star')
|
|
||||||
it.setAttribute('color', k < i ? this.props.color : 'grey')
|
|
||||||
})
|
|
||||||
|
|
||||||
if (f > 0) {
|
|
||||||
this.__STARS__[i].setAttribute('is', _last)
|
|
||||||
this.__STARS__[i].setAttribute('color', this.props.color)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 缓存结果
|
|
||||||
this.props.tmp = { i, f }
|
|
||||||
|
|
||||||
if (i === 0 && f === 0) {
|
|
||||||
this.__TEXT__.textContent = ''
|
|
||||||
} else {
|
|
||||||
if (this.props.text.length === 5) {
|
|
||||||
this.__TEXT__.textContent = this.props.text[i]
|
|
||||||
} else {
|
|
||||||
if (this.props['show-value']) {
|
|
||||||
this.__TEXT__.textContent = i + f
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
$.catch(this.__BOX__, 'mousemove', ev => {
|
|
||||||
if (this.props.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (ev.target.tagName === 'WC-ICON') {
|
|
||||||
let idx = +ev.target.dataset.idx
|
|
||||||
this._updateDraw(idx, +(ev.offsetX / this.props.starSize).toFixed(1))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
$.catch(this.__BOX__, 'click', ev => {
|
|
||||||
var { tmp, disabled } = this.props
|
|
||||||
if (disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (ev.target.tagName === 'WC-ICON') {
|
|
||||||
this.props.value = tmp.i + tmp.f
|
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
$.catch(this.__BOX__, 'mouseleave', ev => {
|
|
||||||
if (this.props.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this._updateDraw(-1)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, old, val) {
|
|
||||||
if (val === null || old === val) {return}
|
|
||||||
switch (name) {
|
|
||||||
case 'size':
|
|
||||||
this.props.starSize = this.__STARS__[0].clientWidth
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'allow-half':
|
|
||||||
case 'show-value':
|
|
||||||
case 'disabled':
|
|
||||||
this.props[name] = true
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'color':
|
|
||||||
if (val) {
|
|
||||||
this.props.color = val
|
|
||||||
}
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'text':
|
|
||||||
if (val) {
|
|
||||||
val = val.split('|')
|
|
||||||
if (val.length === 5) {
|
|
||||||
this.props.text = val.map(it => it.trim())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break
|
|
||||||
|
|
||||||
case 'value':
|
|
||||||
this.value = val
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
import $ from"../utils.js";export default class Star extends HTMLElement{static get observedAttributes(){return["value","text","size","color","'allow-half'","'show-value'","starSize","disabled"]}props={value:0,text:[],size:"",color:"","allow-half":!1,"show-value":!1,starSize:32,disabled:!1};constructor(){super(),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;-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:1;cursor:inherit}label wc-icon{margin:0 3px;transition:transform .1s easein-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([type=danger]) label span{color:var(--color-red-1)}:host([type=primary]) label span{color:var(--color-teal-1)}:host([type=success]) label span{color:var(--color-green-1)}:host([type=default]) label span{color:var(--color-grey-1)}:host([type=info]) label span{color:var(--color-blue-1)}:host([color=purple]) label span{color:var(--color-purple-1)}:host([type=warning]) label span{color:var(--color-orange-1)}:host([disabled]){cursor:default;opacity:.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(e!==s)switch(t){case"size":this.props.starSize=this.__STARS__[0].clientWidth;break;case"allow-half":case"show-value":case"disabled":this.props[t]=!0;break;case"color":s&&(this.props.color=s);break;case"text":s&&5===(s=s.split("|")).length&&(this.props.text=s.map(t=>t.trim()));break;case"value":this.value=s}}}
|
||||||
|
|
||||||
if(!customElements.get('wc-star')){
|
if(!customElements.get('wc-star')){
|
||||||
customElements.define('wc-star', Star)
|
customElements.define('wc-star', Star)
|
||||||
|
|
|
||||||
|
|
@ -1,240 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2020-12-08 11:30:52
|
* @date 2021-02-05 16:32:07
|
||||||
* @version v1.0.0
|
* @version v1.0.3
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import $ from "../utils.js"
|
|
||||||
export default class Switch extends HTMLElement {
|
|
||||||
|
|
||||||
|
|
||||||
static get observedAttributes() {
|
|
||||||
return ["'active-text'","'inactive-text'","checked","disabled"]
|
|
||||||
}
|
|
||||||
|
|
||||||
props = {
|
|
||||||
'active-text': null,
|
|
||||||
'inactive-text': null,
|
|
||||||
checked: false,
|
|
||||||
disabled: false
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
Object.defineProperty(this, 'root', {
|
|
||||||
value: this.attachShadow({ mode: 'open' }),
|
|
||||||
writable: true,
|
|
||||||
enumerable: false,
|
|
||||||
configurable: true
|
|
||||||
})
|
|
||||||
|
|
||||||
this.root.innerHTML = `<style>* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
:host {
|
|
||||||
--color-teal-1: #4db6ac;
|
|
||||||
--color-teal-2: #26a69a;
|
|
||||||
--color-teal-3: #009688;
|
|
||||||
--color-green-1: #81c784;
|
|
||||||
--color-green-2: #66bb6a;
|
|
||||||
--color-green-3: #4caf50;
|
|
||||||
--color-purple-1: #9575cd;
|
|
||||||
--color-purple-2: #9575cd;
|
|
||||||
--color-purple-3: #673ab7;
|
|
||||||
--color-blue-1: #64b5f6;
|
|
||||||
--color-blue-2: #42a5f5;
|
|
||||||
--color-blue-3: #2196f3;
|
|
||||||
--color-red-1: #ff5061;
|
|
||||||
--color-red-2: #eb3b48;
|
|
||||||
--color-red-3: #ce3742;
|
|
||||||
--color-orange-1: #ffb618;
|
|
||||||
--color-orange-2: #f39c12;
|
|
||||||
--color-orange-3: #e67e22;
|
|
||||||
--color-plain-1: #f2f5fc;
|
|
||||||
--color-plain-2: #e8ebf4;
|
|
||||||
--color-plain-3: #dae1e9;
|
|
||||||
--color-grey-1: #bdbdbd;
|
|
||||||
--color-grey-2: #9e9e9e;
|
|
||||||
--color-grey-3: #757575;
|
|
||||||
--color-dark-1: #62778d;
|
|
||||||
--color-dark-2: #526273;
|
|
||||||
--color-dark-3: #425064; }
|
|
||||||
|
|
||||||
: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: 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: 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: var(--color-red-1); }
|
|
||||||
|
|
||||||
:host([color='blue']) label.checked {
|
|
||||||
background: var(--color-blue-1); }
|
|
||||||
|
|
||||||
:host([color='green']) label.checked {
|
|
||||||
background: var(--color-green-1); }
|
|
||||||
|
|
||||||
:host([color='teal']) label.checked {
|
|
||||||
background: var(--color-teal-1); }
|
|
||||||
|
|
||||||
:host([color='orange']) label.checked {
|
|
||||||
background: var(--color-orange-1); }
|
|
||||||
|
|
||||||
:host([color='dark']) 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
|
|
||||||
}
|
|
||||||
|
|
||||||
get value() {
|
|
||||||
return this.props.checked
|
|
||||||
}
|
|
||||||
|
|
||||||
set value(val) {
|
|
||||||
this.checked = val
|
|
||||||
}
|
|
||||||
|
|
||||||
get checked() {
|
|
||||||
return this.props.checked
|
|
||||||
}
|
|
||||||
|
|
||||||
set checked(val) {
|
|
||||||
this.props.checked = !!val
|
|
||||||
this.__SWITCH__.classList.toggle('checked', this.props.checked)
|
|
||||||
}
|
|
||||||
|
|
||||||
get disabled() {
|
|
||||||
return this.props.disabled
|
|
||||||
}
|
|
||||||
|
|
||||||
set disabled(val) {
|
|
||||||
var type = typeof val
|
|
||||||
|
|
||||||
if (val === this.props.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if ((type === 'boolean' && val) || type !== 'boolean') {
|
|
||||||
this.props.disabled = true
|
|
||||||
this.setAttribute('disabled', '')
|
|
||||||
} else {
|
|
||||||
this.props.disabled = false
|
|
||||||
this.removeAttribute('disabled')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
this._handleClick = $.bind(this, 'click', ev => {
|
|
||||||
if (this.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.checked = !this.checked
|
|
||||||
if (this.checked) {
|
|
||||||
if (this.props['active-text'] !== null) {
|
|
||||||
this.textContent = this.props['active-text']
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (this.props['inactive-text'] !== null) {
|
|
||||||
this.textContent = this.props['inactive-text']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnectedCallback() {
|
|
||||||
$.unbind(this, 'click', this._handleClick)
|
|
||||||
}
|
|
||||||
|
|
||||||
attributeChangedCallback(name, old, val) {
|
|
||||||
if (val === null || old === val) {return}
|
|
||||||
switch (name) {
|
|
||||||
case 'checked':
|
|
||||||
case 'disabled':
|
|
||||||
this[name] = true
|
|
||||||
break
|
|
||||||
case 'active-text':
|
|
||||||
case 'inactive-text':
|
|
||||||
this.props[name] = val + ''
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
import $ from"../utils.js";export default class Switch extends HTMLElement{static get observedAttributes(){return["'active-text'","'inactive-text'","checked","disabled"]}props={"active-text":null,"inactive-text":null,checked:!1,disabled:!1};constructor(){super(),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-block}: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}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(t!==i)switch(e){case"checked":case"disabled":this[e]=!0;break;case"active-text":case"inactive-text":this.props[e]=i+""}}}
|
||||||
|
|
||||||
if(!customElements.get('wc-switch')){
|
if(!customElements.get('wc-switch')){
|
||||||
customElements.define('wc-switch', Switch)
|
customElements.define('wc-switch', Switch)
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,12 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @authors yutent (yutent.io@gmail.com)
|
* @authors yutent (yutent.io@gmail.com)
|
||||||
* @date 2020-12-23 15:31:02
|
* @date 2021-02-05 16:32:07
|
||||||
* @version v1.0.0
|
* @version v1.0.3
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
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"]}props={is:""};constructor(){super(),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{--color-teal-1: #4db6ac;--color-teal-2: #26a69a;--color-teal-3: #009688;--color-green-1: #81c784;--color-green-2: #66bb6a;--color-green-3: #4caf50;--color-purple-1: #9575cd;--color-purple-2: #9575cd;--color-purple-3: #673ab7;--color-blue-1: #64b5f6;--color-blue-2: #42a5f5;--color-blue-3: #2196f3;--color-red-1: #ff5061;--color-red-2: #eb3b48;--color-red-3: #ce3742;--color-orange-1: #ffb618;--color-orange-2: #f39c12;--color-orange-3: #e67e22;--color-plain-1: #f2f5fc;--color-plain-2: #e8ebf4;--color-plain-3: #dae1e9;--color-grey-1: #bdbdbd;--color-grey-2: #9e9e9e;--color-grey-3: #757575;--color-dark-1: #62778d;--color-dark-2: #526273;--color-dark-3: #425064}: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:var(--color-red-1)}:host([color='blue']){color:var(--color-blue-1)}:host([color='green']){color:var(--color-green-1)}:host([color='teal']){color:var(--color-teal-1)}:host([color='orange']){color:var(--color-orange-1)}:host([color='dark']){color:var(--color-dark-1)}:host([color='purple']){color:var(--color-purple-1)}:host([color='grey']){color:var(--color-grey-1)}@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,r=dict[o];this.__ICO__&&o&&r&&(this.__ICO__.innerHTML="loading"===o?r:`<path d="${r}" />`,this.__ICO__.classList.toggle("load","loading"===o))}attributeChangedCallback(o,r,e){if(null!==e&&r!==e)switch(o){case"is":this.props.is=e,e?this.drawPath():this.removeAttribute("is")}}}
|
import SVG_DICT from"./svg.js";let dict=SVG_DICT;window.EXT_SVG_DICT&&Object.assign(dict,EXT_SVG_DICT);export default class Icon extends HTMLElement{static get observedAttributes(){return["is"]}props={is:""};constructor(){super(),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, 32px);height:var(--size, 32px);color:inherit}:host(:not([is])){display:none}.icon{display:block;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:36px;height:36px}:host([size=mini]){width:26px;height:26px}:host([red]){color:var(--color-red-1)}:host([blue]){color:var(--color-blue-1)}:host([green]){color:var(--color-green-1)}:host([orange]){color:var(--color-orange-1)}:host([grey]){color:var(--color-grey-1)}:host([dark]){color:var(--color-dark-1)}@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(t){t&&this.setAttribute("is",t)}drawPath(){var{is:t}=this.props,o=dict[t];this.__ICO__&&t&&o&&(this.__ICO__.innerHTML="loading"===t?o:`<path d="${o}" />`,this.__ICO__.classList.toggle("load","loading"===t))}attributeChangedCallback(t,o,e){if(o!==e)switch(t){case"is":this.props.is=e,e?this.drawPath():this.removeAttribute("is")}}}
|
||||||
|
|
||||||
if(!customElements.get('wc-icon')){
|
if(!customElements.get('wc-icon')){
|
||||||
customElements.define('wc-icon', Icon)
|
customElements.define('wc-icon', Icon)
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue