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