/**
 * 本模块负责提供一些内置的可复用的HTMLEliment组件
 */ /**
 * 本模块负责提供一些内置的可复用的HTMLEliment组件
 */ ( function ( ) { try { class ClickRemove { param ele constructor ( ele ) { setTimeout ( ( ) => { function remove ( ) { ele . remove ( ) ; document . removeEventListener ( "click" , remove ) ; } document . addEventListener ( "click" , remove ) ; ele . addEventListener ( "click" , e => e . stopPropagation ( ) ) ; } , 100 ) ; } } class Element { param style param hold returns static popupbox ( style = { } , hold ? ) { const box = API . addElement ( "div" , { class : "ui-popup-box" } ) ; const real = box . attachShadow ( { mode : "closed" } ) ; const div = API . addElement ( "div" , { class : "box" } , real ) ; const popup = API . addElement ( "div" , { class : "contain" } , div ) ; API . addCss ( API . getModule ( "ui-popup-box.css" ) , undefined , real ) ; Object . keys ( style ) . forEach ( d => popup . style [ d ] = style [ d ] ) ; hold ? this . close ( div , box ) : new ClickRemove ( box ) ; return < HTMLDivElement > popup ; } param ele param box static close ( ele , box ? ) { const svg = this . svg ( '<svg viewBox="0 0 100 100"><path d="M2 2 L98 98 M 98 2 L2 98Z" stroke-width="10px" stroke="#212121" stroke-linecap="round"></path></svg>' ) ; svg . setAttribute ( "style" , "position: absolute;transform: scale(0.8);right: 10px;top: 10px;" ) ; svg . onclick = ( ) => box ? box . remove ( ) : ele . remove ( ) ; ele . appendChild ( svg ) ; } returns static hr ( ) { const hr = document . createElement ( "div" ) ; const real = hr . attachShadow ( { mode : "closed" } ) ; API . addElement ( "div" , { class : "hr" } , real ) ; API . addCss ( API . getModule ( "hr.css" ) , undefined , real ) ; return < HTMLDivElement > hr ; } param svg returns static svg ( svg ) { const root = document . createElement ( "div" ) ; const real = root . attachShadow ( { mode : "closed" } ) ; API . addElement ( "div" , { class : "icon" } , real , svg ) ; API . addCss ( API . getModule ( "icon.css" ) , undefined , real ) ; return < HTMLDivElement > root ; } param callback param value returns static switch ( callback , value ? ) { const root = document . createElement ( "div" ) ; const real = root . attachShadow ( { mode : "closed" } ) ; const div = API . addElement ( "div" , { class : "switch" } , real , `<span class="bar"></span>
            <span class="knob"><i class="circle"></i></span>` ) ; API . addCss ( API . getModule ( "switch.css" ) , undefined , real ) ; value = value ? true : false ; value && ( div . children [ 0 ] . setAttribute ( "checked" , "checked" ) , div . children [ 1 ] . setAttribute ( "checked" , "checked" ) , div . children [ 1 ] . children [ 0 ] . setAttribute ( "checked" , "checked" ) ) ; div . onclick = ( ) => { value = ! value ; value ? ( div . children [ 0 ] . setAttribute ( "checked" , "checked" ) , div . children [ 1 ] . setAttribute ( "checked" , "checked" ) , div . children [ 1 ] . children [ 0 ] . setAttribute ( "checked" , "checked" ) ) : ( div . children [ 0 ] . removeAttribute ( "checked" ) , div . children [ 1 ] . removeAttribute ( "checked" ) , div . children [ 1 ] . children [ 0 ] . removeAttribute ( "checked" ) ) ; callback . call ( div , value ) ; } ; return root ; } param svg returns static getCss ( ... svg ) { return svg . reduce ( ( s , d ) => { s += `\r\n${ API . getModule ( d ) }` ; return s ; } , "" ) ; } param list param callback param value returns static select ( list , callback , value ? ) { const root = document . createElement ( "div" ) ; const real = root . attachShadow ( { mode : "closed" } ) ; const div = API . addElement ( "div" , { class : "select" } , real ) ; const select = list . reduce ( ( s , d ) => { API . addElement ( "option" , { } , s , < string > d ) ; return s ; } , < HTMLSelectElement > API . addElement ( "select" , { } , div ) ) ; API . addCss ( this . getCss ( "select.css" ) , undefined , real ) ; select . value = value || select . options [ 0 ] . text ; select . onchange = ( ) => callback . call ( div , select . value ) ; return root ; } param callback param text param disabled returns static button ( callback , text ? , disabled = 1 ) { const root = document . createElement ( "div" ) ; const real = root . attachShadow ( { mode : "closed" } ) ; const div = API . addElement ( "div" , { class : "button" } , real , text || "确定" ) ; API . addCss ( this . getCss ( "button.css" ) , undefined , real ) ; div . onclick = ( ) => { div . setAttribute ( "disabled" , "disabled" ) ; callback . call ( div ) ; disabled && setTimeout ( ( ) => div . removeAttribute ( "disabled" ) , disabled * 1000 ) ; } ; return root ; } param callback param text param attribute param pattern param button param disabled returns static input ( callback , text ? , attribute ? , pattern ? , button ? , disabled ? ) { const root = document . createElement ( "div" ) ; const real = root . attachShadow ( { mode : "closed" } ) ; const div = API . addElement ( "div" , { class : "input" } , real ) ; const input = < HTMLInputElement > API . addElement ( "input" , { } , div ) ; API . addCss ( this . getCss ( "input.css" ) , undefined , real ) ; attribute && Object . entries ( attribute ) . forEach ( d => { input . setAttribute ( d [ 0 ] , d [ 1 ] ) ; } ) ; text && ( input . value = text ) ; button ? div . appendChild ( this . button ( function ( ) { if ( pattern && ! pattern . test ( input . value ) ) return toast . warning ( `值 ${ input . value } 不符合要求！` , `正则表达式：${ pattern . toString ( ) }` ) ; callback . call ( input , input . value ) ; } , button , disabled ) ) : input . onchange = ( ) => { if ( pattern && ! pattern . test ( input . value ) ) return toast . warning ( `值 ${ input . value } 不符合要求！` , `正则表达式：${ pattern . toString ( ) }` ) ; callback . call ( input , input . value ) ; } ; return root ; } param callback param multiple param text param accept returns static file ( callback , multiple ? , text = "选择" , accept ? ) { const root = document . createElement ( "div" ) ; const real = root . attachShadow ( { mode : "closed" } ) ; const input = < HTMLInputElement > API . addElement ( "input" , { type : "file" , style : "width: 0;position: absolute;" } , real ) ; accept && ( input . accept = accept . join ( "," ) ) ; multiple && ( input . multiple = true ) ; real . appendChild ( this . button ( ( ) => input . click ( ) , text , 0 ) ) ; input . onchange = ( ) => input . files && callback . call ( input , input . files ) ; return root ; } param list param callback param value returns static checkbox ( list , callback , value = [ ] ) { const root = document . createElement ( "div" ) ; const real = root . attachShadow ( { mode : "closed" } ) ; const div = API . addElement ( "div" , { class : "box" } , real ) ; API . addCss ( this . getCss ( "checkbox.css" ) , undefined , real ) ; const checkboxs = list . reduce ( ( s , d ) => { s . push ( < HTMLDivElement > API . addElement ( "div" , { class : "checkbox" } , div , `<div class="checklabel">
                        <div class="disc-border"></div>
                        <div class="disc"></div>
                    </div>
                    <div class="checkvalue">${ d }</div>` ) ) ; return s ; } , [ ] ) ; const checks = list . reduce ( ( s , d ) => { s . push ( value . includes ( d ) ) ; return s ; } , [ ] ) ; checkboxs . forEach ( ( d , i ) => { checks [ i ] && ( d . children [ 0 ] . children [ 0 ] . setAttribute ( "checked" , "checked" ) , d . children [ 0 ] . children [ 1 ] . setAttribute ( "checked" , "checked" ) ) ; d . onclick = ( ) => { checks [ i ] = ! checks [ i ] ; checks [ i ] ? ( d . children [ 0 ] . children [ 0 ] . setAttribute ( "checked" , "checked" ) , d . children [ 0 ] . children [ 1 ] . setAttribute ( "checked" , "checked" ) ) : ( d . children [ 0 ] . children [ 0 ] . removeAttribute ( "checked" ) , d . children [ 0 ] . children [ 1 ] . removeAttribute ( "checked" ) ) ; callback . call ( div , checks . reduce ( ( s , d , i ) => { d && s . push ( list [ i ] ) ; return s ; } , [ ] ) ) ; } ; } ) ; return root ; } param detail returns static progress ( detail ) { let { min , max , value , color , nocolor , display } = detail ; const root = document . createElement ( "div" ) ; const real = root . attachShadow ( { mode : "closed" } ) ; API . addCss ( API . getCss ( "progress.css" ) , undefined , real ) ; const progress = API . addElement ( "div" , { class : "progress" } , real ) ; const progressContainer = API . addElement ( "div" , { class : "progressContainer" , title : "0%" } , progress ) ; const secondaryProgress = API . addElement ( "div" , { class : "secondaryProgress" , style : "transform: scaleX(0);" } , progressContainer ) ; const primaryProgress = API . addElement ( "div" , { class : "primaryProgress" , style : "transform: scaleX(0);" } , progressContainer ) ; const progressTag = API . addElement ( "div" , { class : "progressTag" , style : "display: none;" } , progress , `<div>${ min }</div><div>${ max }</div>` ) ; Object . defineProperties ( detail , { "color" : { get : ( ) => primaryProgress . style . backgroundColor , set : ( v ) => primaryProgress . style . backgroundColor = v } , "display" : { get : ( ) => progressTag . style . display , set : ( v ) => progressTag . style . display = v ? "" : "none" } , "max" : { get : ( ) => max , set : ( v ) => { if ( v < value || v <= min ) return ; ( < HTMLDivElement > progressTag . children [ 1 ] ) . innerText = max = v ; detail . value = value ; } } , "min" : { get : ( ) => min , set : ( v ) => { if ( v > value || v >= max ) return ; ( < HTMLDivElement > progressTag . children [ 0 ] ) . innerText = min = v ; detail . value = value ; } } , "nocolor" : { get : ( ) => secondaryProgress . style . backgroundColor , set : ( v ) => secondaryProgress . style . backgroundColor = v } , "value" : { get : ( ) => value , set : ( v ) => { if ( v > max || v < min ) return ; const per = Number ( ( ( v - min ) / ( max - min ) ) . toFixed ( 3 ) . slice ( 0 , - 1 ) ) ; primaryProgress . style . transform = `scaleX(${ per })` ; progressContainer . title = ( per * 100 ) + "%" ; } } } ) ; min >= max && ( min = 0 ) ; ( value > max || value < min ) && ( value = 0 ) ; detail . min = min , detail . max = max , detail . value = value , detail . color = color , detail . nocolor = nocolor , detail . display = display ; return root ; } } API . element = { popupbox : ( style ? , hold ? ) => Element . popupbox ( style , hold ) , hr : ( ) => Element . hr ( ) , svg : ( svg ) => Element . svg ( svg ) , switch : ( callback , value ? ) => Element . switch ( callback , value ) , select : ( list , callback , value ? ) => Element . select ( list , callback , value ) , button : ( callback , text ? , disabled ? ) => Element . button ( callback , text , disabled ) , input : ( callback , text ? , attribute ? , pattern ? , button ? , disabled ? ) => Element . input ( callback , text , attribute , pattern , button , disabled ) , file : ( callback , multiple ? , text ? , accept ? ) => Element . file ( callback , multiple , text , accept ) , checkbox : ( list , callback , value ? ) => Element . checkbox ( list , callback , value ) , clickRemove : ( ele ) => new ClickRemove ( ele ) , progress : ( detail ) => Element . progress ( detail ) } ; API . getCss = ( ... svg ) => Element . getCss ( ... svg ) ; } catch ( e ) { toast . error ( "element.js" , e ) ; } } ) ( ) ; declare namespace API { let element ; param svg returns function getCss ( ... svg ) ; } /**
 * 进度条配置信息，双向绑定
 */ interface ProgressDetial { /**
     * 进度起点，必须小于max
     */ min : number ; /**
     * 进度终点，必须大于min
     */ max : number ; /**
     * 当前进度，取值范围[min,max]
     */ value : number ; /**
     * 有进度部分颜色，CSS颜色允许的字符串
     * 默认为rgb(26,115,232)
     */ color ? : string ; /**
     * 剩余部分颜色，CSS颜色允许的字符串
     * 默认为rgb(183, 225, 205)
     */ nocolor ? : string ; /**
     * 是否在进度条下标志起讫信息，默认不显示，只有一行进度条
     */ display ? : boolean ; }