w-component-vue 2.4.13 → 2.4.14

package/docs/examples/app.umd.js

@@ -1,5 +1,5 @@
 /*!
- * app v2.4.13
+ * app v2.4.14
  * (c) 2018-2021 yuda-lyu(semisphere)
  * Released under the MIT License.
  */
@@ -20,5 +20,5 @@
    *
    * Date: 2023-09-17T03:16:38.052Z
    */
-!function(n,e){n.exports=function(){function n(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,o)}return t}function e(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?n(Object(o),!0).forEach((function(n){a(e,n,o[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))}))}return e}function t(n){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},t(n)}function o(n,e){if(!(n instanceof e))throw new TypeError("Cannot call a class as a function")}function r(n,e){for(var t=0;t<e.length;t++){var o=e[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(n,s(o.key),o)}}function i(n,e,t){return e&&r(n.prototype,e),t&&r(n,t),Object.defineProperty(n,"prototype",{writable:!1}),n}function a(n,e,t){return(e=s(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function l(n,e){if("object"!=typeof n||null===n)return n;var t=n[Symbol.toPrimitive];if(void 0!==t){var o=t.call(n,e||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(n)}function s(n){var e=l(n,"string");return"symbol"==typeof e?e:String(e)}var c={backdrop:!0,button:!0,navbar:!0,title:!0,toolbar:!0,className:"",container:"body",filter:null,fullscreen:!0,inheritedAttributes:["crossOrigin","decoding","isMap","loading","referrerPolicy","sizes","srcset","useMap"],initialCoverage:.9,initialViewIndex:0,inline:!1,interval:5e3,keyboard:!0,focus:!0,loading:!0,loop:!0,minWidth:200,minHeight:100,movable:!0,rotatable:!0,scalable:!0,zoomable:!0,zoomOnTouch:!0,zoomOnWheel:!0,slideOnTouch:!0,toggleOnDblclick:!0,tooltip:!0,transition:!0,zIndex:2015,zIndexInline:0,zoomRatio:.1,minZoomRatio:.01,maxZoomRatio:100,url:"src",ready:null,show:null,shown:null,hide:null,hidden:null,view:null,viewed:null,move:null,moved:null,rotate:null,rotated:null,scale:null,scaled:null,zoom:null,zoomed:null,play:null,stop:null},d='<div class="viewer-container" tabindex="-1" touch-action="none"><div class="viewer-canvas"></div><div class="viewer-footer"><div class="viewer-title"></div><div class="viewer-toolbar"></div><div class="viewer-navbar"><ul class="viewer-list" role="navigation"></ul></div></div><div class="viewer-tooltip" role="alert" aria-hidden="true"></div><div class="viewer-button" data-viewer-action="mix" role="button"></div><div class="viewer-player"></div></div>',u="undefined"!=typeof window&&void 0!==window.document,p=u?window:{},m=!(!u||!p.document.documentElement)&&"ontouchstart"in p.document.documentElement,v=!!u&&"PointerEvent"in p,g="viewer",h="move",f="switch",b="zoom",y="".concat(g,"-active"),k="".concat(g,"-close"),x="".concat(g,"-fade"),C="".concat(g,"-fixed"),S="".concat(g,"-fullscreen"),w="".concat(g,"-fullscreen-exit"),W="".concat(g,"-hide"),_="".concat(g,"-hide-md-down"),I="".concat(g,"-hide-sm-down"),T="".concat(g,"-hide-xs-down"),A="".concat(g,"-in"),B="".concat(g,"-invisible"),H="".concat(g,"-loading"),P="".concat(g,"-move"),F="".concat(g,"-open"),L="".concat(g,"-show"),j="".concat(g,"-transition"),R="click",D="dblclick",z="dragstart",V="focusin",Z="keydown",$="load",G="error",E=m?"touchend touchcancel":"mouseup",X=m?"touchmove":"mousemove",N=m?"touchstart":"mousedown",M=v?"pointerdown":N,O=v?"pointermove":X,K=v?"pointerup pointercancel":E,Y="resize",J="transitionend",U="wheel",Q="ready",q="show",nn="shown",en="hide",tn="hidden",on="view",rn="viewed",an="move",ln="moved",sn="rotate",cn="rotated",dn="scale",un="scaled",pn="zoom",mn="zoomed",vn="play",gn="stop",hn="".concat(g,"Action"),fn=/\s\s*/,bn=["zoom-in","zoom-out","one-to-one","reset","prev","play","next","rotate-left","rotate-right","flip-horizontal","flip-vertical"];function yn(n){return"string"==typeof n}var kn=Number.isNaN||p.isNaN;function xn(n){return"number"==typeof n&&!kn(n)}function Cn(n){return void 0===n}function Sn(n){return"object"===t(n)&&null!==n}var wn=Object.prototype.hasOwnProperty;function Wn(n){if(!Sn(n))return!1;try{var e=n.constructor,t=e.prototype;return e&&t&&wn.call(t,"isPrototypeOf")}catch(n){return!1}}function _n(n){return"function"==typeof n}function In(n,e){if(n&&_n(e))if(Array.isArray(n)||xn(n.length)){var t,o=n.length;for(t=0;t<o&&!1!==e.call(n,n[t],t,n);t+=1);}else Sn(n)&&Object.keys(n).forEach((function(t){e.call(n,n[t],t,n)}));return n}var Tn=Object.assign||function(n){for(var e=arguments.length,t=new Array(e>1?e-1:0),o=1;o<e;o++)t[o-1]=arguments[o];return Sn(n)&&t.length>0&&t.forEach((function(e){Sn(e)&&Object.keys(e).forEach((function(t){n[t]=e[t]}))})),n},An=/^(?:width|height|left|top|marginLeft|marginTop)$/;function Bn(n,e){var t=n.style;In(e,(function(n,e){An.test(e)&&xn(n)&&(n+="px"),t[e]=n}))}function Hn(n){return yn(n)?n.replace(/&(?!amp;|quot;|#39;|lt;|gt;)/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;"):n}function Pn(n,e){return!(!n||!e)&&(n.classList?n.classList.contains(e):n.className.indexOf(e)>-1)}function Fn(n,e){if(n&&e)if(xn(n.length))In(n,(function(n){Fn(n,e)}));else if(n.classList)n.classList.add(e);else{var t=n.className.trim();t?t.indexOf(e)<0&&(n.className="".concat(t," ").concat(e)):n.className=e}}function Ln(n,e){n&&e&&(xn(n.length)?In(n,(function(n){Ln(n,e)})):n.classList?n.classList.remove(e):n.className.indexOf(e)>=0&&(n.className=n.className.replace(e,"")))}function jn(n,e,t){e&&(xn(n.length)?In(n,(function(n){jn(n,e,t)})):t?Fn(n,e):Ln(n,e))}var Rn=/([a-z\d])([A-Z])/g;function Dn(n){return n.replace(Rn,"$1-$2").toLowerCase()}function zn(n,e){return Sn(n[e])?n[e]:n.dataset?n.dataset[e]:n.getAttribute("data-".concat(Dn(e)))}function Vn(n,e,t){Sn(t)?n[e]=t:n.dataset?n.dataset[e]=t:n.setAttribute("data-".concat(Dn(e)),t)}var Zn=function(){var n=!1;if(u){var e=!1,t=function(){},o=Object.defineProperty({},"once",{get:function(){return n=!0,e},set:function(n){e=n}});p.addEventListener("test",t,o),p.removeEventListener("test",t,o)}return n}();function $n(n,e,t){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},r=t;e.trim().split(fn).forEach((function(e){if(!Zn){var i=n.listeners;i&&i[e]&&i[e][t]&&(r=i[e][t],delete i[e][t],0===Object.keys(i[e]).length&&delete i[e],0===Object.keys(i).length&&delete n.listeners)}n.removeEventListener(e,r,o)}))}function Gn(n,e,t){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},r=t;e.trim().split(fn).forEach((function(e){if(o.once&&!Zn){var i=n.listeners,a=void 0===i?{}:i;r=function(){delete a[e][t],n.removeEventListener(e,r,o);for(var i=arguments.length,l=new Array(i),s=0;s<i;s++)l[s]=arguments[s];t.apply(n,l)},a[e]||(a[e]={}),a[e][t]&&n.removeEventListener(e,a[e][t],o),a[e][t]=r,n.listeners=a}n.addEventListener(e,r,o)}))}function En(n,t,o,r){var i;return _n(Event)&&_n(CustomEvent)?i=new CustomEvent(t,e({bubbles:!0,cancelable:!0,detail:o},r)):(i=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,o),n.dispatchEvent(i)}function Xn(n){var e=n.getBoundingClientRect();return{left:e.left+(window.pageXOffset-document.documentElement.clientLeft),top:e.top+(window.pageYOffset-document.documentElement.clientTop)}}function Nn(n){var e=n.rotate,t=n.scaleX,o=n.scaleY,r=n.translateX,i=n.translateY,a=[];xn(r)&&0!==r&&a.push("translateX(".concat(r,"px)")),xn(i)&&0!==i&&a.push("translateY(".concat(i,"px)")),xn(e)&&0!==e&&a.push("rotate(".concat(e,"deg)")),xn(t)&&1!==t&&a.push("scaleX(".concat(t,")")),xn(o)&&1!==o&&a.push("scaleY(".concat(o,")"));var l=a.length?a.join(" "):"none";return{WebkitTransform:l,msTransform:l,transform:l}}function Mn(n){return yn(n)?decodeURIComponent(n.replace(/^.*\//,"").replace(/[?&#].*$/,"")):""}var On=p.navigator&&/Version\/\d+(\.\d+)+?\s+Safari/i.test(p.navigator.userAgent);function Kn(n,e,t){var o=document.createElement("img");if(n.naturalWidth&&!On)return t(n.naturalWidth,n.naturalHeight),o;var r=document.body||document.documentElement;return o.onload=function(){t(o.width,o.height),On||r.removeChild(o)},In(e.inheritedAttributes,(function(e){var t=n.getAttribute(e);null!==t&&o.setAttribute(e,t)})),o.src=n.src,On||(o.style.cssText="left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;",r.appendChild(o)),o}function Yn(n){switch(n){case 2:return T;case 3:return I;case 4:return _;default:return""}}function Jn(n){var t=e({},n),o=[];return In(n,(function(n,e){delete t[e],In(t,(function(e){var t=Math.abs(n.startX-e.startX),r=Math.abs(n.startY-e.startY),i=Math.abs(n.endX-e.endX),a=Math.abs(n.endY-e.endY),l=Math.sqrt(t*t+r*r),s=(Math.sqrt(i*i+a*a)-l)/l;o.push(s)}))})),o.sort((function(n,e){return Math.abs(n)<Math.abs(e)})),o[0]}function Un(n,t){var o=n.pageX,r=n.pageY,i={endX:o,endY:r};return t?i:e({timeStamp:Date.now(),startX:o,startY:r},i)}function Qn(n){var e=0,t=0,o=0;return In(n,(function(n){var r=n.startX,i=n.startY;e+=r,t+=i,o+=1})),{pageX:e/=o,pageY:t/=o}}var qn,ne={render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initBody:function(){var n=this.element.ownerDocument,e=n.body||n.documentElement;this.body=e,this.scrollbarWidth=window.innerWidth-n.documentElement.clientWidth,this.initialBodyPaddingRight=e.style.paddingRight,this.initialBodyComputedPaddingRight=window.getComputedStyle(e).paddingRight},initContainer:function(){this.containerData={width:window.innerWidth,height:window.innerHeight}},initViewer:function(){var n,e=this.options,t=this.parent;e.inline&&(n={width:Math.max(t.offsetWidth,e.minWidth),height:Math.max(t.offsetHeight,e.minHeight)},this.parentData=n),!this.fulled&&n||(n=this.containerData),this.viewerData=Tn({},n)},renderViewer:function(){this.options.inline&&!this.fulled&&Bn(this.viewer,this.viewerData)},initList:function(){var n=this,e=this.element,t=this.options,o=this.list,r=[];o.innerHTML="",In(this.images,(function(e,i){var a=e.src,l=e.alt||Mn(a),s=n.getImageURL(e);if(a||s){var c=document.createElement("li"),d=document.createElement("img");In(t.inheritedAttributes,(function(n){var t=e.getAttribute(n);null!==t&&d.setAttribute(n,t)})),t.navbar&&(d.src=a||s),d.alt=l,d.setAttribute("data-original-url",s||a),c.setAttribute("data-index",i),c.setAttribute("data-viewer-action","view"),c.setAttribute("role","button"),t.keyboard&&c.setAttribute("tabindex",0),c.appendChild(d),o.appendChild(c),r.push(c)}})),this.items=r,In(r,(function(e){var o,r,i=e.firstElementChild;Vn(i,"filled",!0),t.loading&&Fn(e,H),Gn(i,$,o=function(o){$n(i,G,r),t.loading&&Ln(e,H),n.loadImage(o)},{once:!0}),Gn(i,G,r=function(){$n(i,$,o),t.loading&&Ln(e,H)},{once:!0})})),t.transition&&Gn(e,rn,(function(){Fn(o,j)}),{once:!0})},renderList:function(){var n=this.index,e=this.items[n];if(e){var t=e.nextElementSibling,o=parseInt(window.getComputedStyle(t||e).marginLeft,10),r=e.offsetWidth,i=r+o;Bn(this.list,Tn({width:i*this.length-o},Nn({translateX:(this.viewerData.width-r)/2-i*n})))}},resetList:function(){var n=this.list;n.innerHTML="",Ln(n,j),Bn(n,Nn({translateX:0}))},initImage:function(n){var e,t=this,o=this.options,r=this.image,i=this.viewerData,a=this.footer.offsetHeight,l=i.width,s=Math.max(i.height-a,a),c=this.imageData||{};this.imageInitializing={abort:function(){e.onload=null}},e=Kn(r,o,(function(e,r){var i=e/r,a=Math.max(0,Math.min(1,o.initialCoverage)),d=l,u=s;t.imageInitializing=!1,s*i>l?u=l/i:d=s*i,a=xn(a)?a:.9,d=Math.min(d*a,e),u=Math.min(u*a,r);var p=(l-d)/2,m=(s-u)/2,v={left:p,top:m,x:p,y:m,width:d,height:u,oldRatio:1,ratio:d/e,aspectRatio:i,naturalWidth:e,naturalHeight:r},g=Tn({},v);o.rotatable&&(v.rotate=c.rotate||0,g.rotate=0),o.scalable&&(v.scaleX=c.scaleX||1,v.scaleY=c.scaleY||1,g.scaleX=1,g.scaleY=1),t.imageData=v,t.initialImageData=g,n&&n()}))},renderImage:function(n){var e=this,t=this.image,o=this.imageData;if(Bn(t,Tn({width:o.width,height:o.height,marginLeft:o.x,marginTop:o.y},Nn(o))),n)if((this.viewing||this.moving||this.rotating||this.scaling||this.zooming)&&this.options.transition&&Pn(t,j)){var r=function(){e.imageRendering=!1,n()};this.imageRendering={abort:function(){$n(t,J,r)}},Gn(t,J,r,{once:!0})}else n()},resetImage:function(){var n=this.image;n&&(this.viewing&&this.viewing.abort(),n.parentNode.removeChild(n),this.image=null,this.title.innerHTML="")}},ee={bind:function(){var n=this.options,e=this.viewer,t=this.canvas,o=this.element.ownerDocument;Gn(e,R,this.onClick=this.click.bind(this)),Gn(e,z,this.onDragStart=this.dragstart.bind(this)),Gn(t,M,this.onPointerDown=this.pointerdown.bind(this)),Gn(o,O,this.onPointerMove=this.pointermove.bind(this)),Gn(o,K,this.onPointerUp=this.pointerup.bind(this)),Gn(o,Z,this.onKeyDown=this.keydown.bind(this)),Gn(window,Y,this.onResize=this.resize.bind(this)),n.zoomable&&n.zoomOnWheel&&Gn(e,U,this.onWheel=this.wheel.bind(this),{passive:!1,capture:!0}),n.toggleOnDblclick&&Gn(t,D,this.onDblclick=this.dblclick.bind(this))},unbind:function(){var n=this.options,e=this.viewer,t=this.canvas,o=this.element.ownerDocument;$n(e,R,this.onClick),$n(e,z,this.onDragStart),$n(t,M,this.onPointerDown),$n(o,O,this.onPointerMove),$n(o,K,this.onPointerUp),$n(o,Z,this.onKeyDown),$n(window,Y,this.onResize),n.zoomable&&n.zoomOnWheel&&$n(e,U,this.onWheel,{passive:!1,capture:!0}),n.toggleOnDblclick&&$n(t,D,this.onDblclick)}},te={click:function(n){var e=this.options,t=this.imageData,o=n.target,r=zn(o,hn);switch(r||"img"!==o.localName||"li"!==o.parentElement.localName||(r=zn(o=o.parentElement,hn)),m&&n.isTrusted&&o===this.canvas&&clearTimeout(this.clickCanvasTimeout),r){case"mix":this.played?this.stop():e.inline?this.fulled?this.exit():this.full():this.hide();break;case"hide":this.pointerMoved||this.hide();break;case"view":this.view(zn(o,"index"));break;case"zoom-in":this.zoom(.1,!0);break;case"zoom-out":this.zoom(-.1,!0);break;case"one-to-one":this.toggle();break;case"reset":this.reset();break;case"prev":this.prev(e.loop);break;case"play":this.play(e.fullscreen);break;case"next":this.next(e.loop);break;case"rotate-left":this.rotate(-90);break;case"rotate-right":this.rotate(90);break;case"flip-horizontal":this.scaleX(-t.scaleX||-1);break;case"flip-vertical":this.scaleY(-t.scaleY||-1);break;default:this.played&&this.stop()}},dblclick:function(n){n.preventDefault(),this.viewed&&n.target===this.image&&(m&&n.isTrusted&&clearTimeout(this.doubleClickImageTimeout),this.toggle(n.isTrusted?n:n.detail&&n.detail.originalEvent))},load:function(){var n=this;this.timeout&&(clearTimeout(this.timeout),this.timeout=!1);var e=this.element,t=this.options,o=this.image,r=this.index,i=this.viewerData;Ln(o,B),t.loading&&Ln(this.canvas,H),o.style.cssText="height:0;"+"margin-left:".concat(i.width/2,"px;")+"margin-top:".concat(i.height/2,"px;")+"max-width:none!important;position:relative;width:0;",this.initImage((function(){jn(o,P,t.movable),jn(o,j,t.transition),n.renderImage((function(){n.viewed=!0,n.viewing=!1,_n(t.viewed)&&Gn(e,rn,t.viewed,{once:!0}),En(e,rn,{originalImage:n.images[r],index:r,image:o},{cancelable:!1})}))}))},loadImage:function(n){var e=n.target,t=e.parentNode,o=t.offsetWidth||30,r=t.offsetHeight||50,i=!!zn(e,"filled");Kn(e,this.options,(function(n,t){var a=n/t,l=o,s=r;r*a>o?i?l=r*a:s=o/a:i?s=o/a:l=r*a,Bn(e,Tn({width:l,height:s},Nn({translateX:(o-l)/2,translateY:(r-s)/2})))}))},keydown:function(n){var e=this.options;if(e.keyboard){var t=n.keyCode||n.which||n.charCode;if(13===t&&this.viewer.contains(n.target)&&this.click(n),this.fulled)switch(t){case 27:this.played?this.stop():e.inline?this.fulled&&this.exit():this.hide();break;case 32:this.played&&this.stop();break;case 37:this.played&&this.playing?this.playing.prev():this.prev(e.loop);break;case 38:n.preventDefault(),this.zoom(e.zoomRatio,!0);break;case 39:this.played&&this.playing?this.playing.next():this.next(e.loop);break;case 40:n.preventDefault(),this.zoom(-e.zoomRatio,!0);break;case 48:case 49:n.ctrlKey&&(n.preventDefault(),this.toggle())}}},dragstart:function(n){"img"===n.target.localName&&n.preventDefault()},pointerdown:function(n){var e=this.options,t=this.pointers,o=n.buttons,r=n.button;if(this.pointerMoved=!1,!(!this.viewed||this.showing||this.viewing||this.hiding||("mousedown"===n.type||"pointerdown"===n.type&&"mouse"===n.pointerType)&&(xn(o)&&1!==o||xn(r)&&0!==r||n.ctrlKey))){n.preventDefault(),n.changedTouches?In(n.changedTouches,(function(n){t[n.identifier]=Un(n)})):t[n.pointerId||0]=Un(n);var i=!!e.movable&&h;e.zoomOnTouch&&e.zoomable&&Object.keys(t).length>1?i=b:e.slideOnTouch&&("touch"===n.pointerType||"touchstart"===n.type)&&this.isSwitchable()&&(i=f),!e.transition||i!==h&&i!==b||Ln(this.image,j),this.action=i}},pointermove:function(n){var e=this.pointers,t=this.action;this.viewed&&t&&(n.preventDefault(),n.changedTouches?In(n.changedTouches,(function(n){Tn(e[n.identifier]||{},Un(n,!0))})):Tn(e[n.pointerId||0]||{},Un(n,!0)),this.change(n))},pointerup:function(n){var e,t=this,o=this.options,r=this.action,i=this.pointers;n.changedTouches?In(n.changedTouches,(function(n){e=i[n.identifier],delete i[n.identifier]})):(e=i[n.pointerId||0],delete i[n.pointerId||0]),r&&(n.preventDefault(),!o.transition||r!==h&&r!==b||Fn(this.image,j),this.action=!1,m&&r!==b&&e&&Date.now()-e.timeStamp<500&&(clearTimeout(this.clickCanvasTimeout),clearTimeout(this.doubleClickImageTimeout),o.toggleOnDblclick&&this.viewed&&n.target===this.image?this.imageClicked?(this.imageClicked=!1,this.doubleClickImageTimeout=setTimeout((function(){En(t.image,D,{originalEvent:n})}),50)):(this.imageClicked=!0,this.doubleClickImageTimeout=setTimeout((function(){t.imageClicked=!1}),500)):(this.imageClicked=!1,o.backdrop&&"static"!==o.backdrop&&n.target===this.canvas&&(this.clickCanvasTimeout=setTimeout((function(){En(t.canvas,R,{originalEvent:n})}),50)))))},resize:function(){var n=this;if(this.isShown&&!this.hiding&&(this.fulled&&(this.close(),this.initBody(),this.open()),this.initContainer(),this.initViewer(),this.renderViewer(),this.renderList(),this.viewed&&this.initImage((function(){n.renderImage()})),this.played)){if(this.options.fullscreen&&this.fulled&&!(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement))return void this.stop();In(this.player.getElementsByTagName("img"),(function(e){Gn(e,$,n.loadImage.bind(n),{once:!0}),En(e,$)}))}},wheel:function(n){var e=this;if(this.viewed&&(n.preventDefault(),!this.wheeling)){this.wheeling=!0,setTimeout((function(){e.wheeling=!1}),50);var t=Number(this.options.zoomRatio)||.1,o=1;n.deltaY?o=n.deltaY>0?1:-1:n.wheelDelta?o=-n.wheelDelta/120:n.detail&&(o=n.detail>0?1:-1),this.zoom(-o*t,!0,null,n)}}},oe={show:function(){var n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.element,t=this.options;if(t.inline||this.showing||this.isShown||this.showing)return this;if(!this.ready)return this.build(),this.ready&&this.show(n),this;if(_n(t.show)&&Gn(e,q,t.show,{once:!0}),!1===En(e,q)||!this.ready)return this;this.hiding&&this.transitioning.abort(),this.showing=!0,this.open();var o=this.viewer;if(Ln(o,W),o.setAttribute("role","dialog"),o.setAttribute("aria-labelledby",this.title.id),o.setAttribute("aria-modal",!0),o.removeAttribute("aria-hidden"),t.transition&&!n){var r=this.shown.bind(this);this.transitioning={abort:function(){$n(o,J,r),Ln(o,A)}},Fn(o,j),o.initialOffsetWidth=o.offsetWidth,Gn(o,J,r,{once:!0}),Fn(o,A)}else Fn(o,A),this.shown();return this},hide:function(){var n=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.element,o=this.options;if(o.inline||this.hiding||!this.isShown&&!this.showing)return this;if(_n(o.hide)&&Gn(t,en,o.hide,{once:!0}),!1===En(t,en))return this;this.showing&&this.transitioning.abort(),this.hiding=!0,this.played?this.stop():this.viewing&&this.viewing.abort();var r=this.viewer,i=this.image,a=function(){Ln(r,A),n.hidden()};if(o.transition&&!e){var l=function e(t){t&&t.target===r&&($n(r,J,e),n.hidden())},s=function(){Pn(r,j)?(Gn(r,J,l),Ln(r,A)):a()};this.transitioning={abort:function(){n.viewed&&Pn(i,j)?$n(i,J,s):Pn(r,j)&&$n(r,J,l)}},this.viewed&&Pn(i,j)?(Gn(i,J,s,{once:!0}),this.zoomTo(0,!1,null,null,!0)):s()}else a();return this},view:function(){var n=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.options.initialViewIndex;if(e=Number(e)||0,this.hiding||this.played||e<0||e>=this.length||this.viewed&&e===this.index)return this;if(!this.isShown)return this.index=e,this.show();this.viewing&&this.viewing.abort();var t=this.element,o=this.options,r=this.title,i=this.canvas,a=this.items[e],l=a.querySelector("img"),s=zn(l,"originalUrl"),c=l.getAttribute("alt"),d=document.createElement("img");if(In(o.inheritedAttributes,(function(n){var e=l.getAttribute(n);null!==e&&d.setAttribute(n,e)})),d.src=s,d.alt=c,_n(o.view)&&Gn(t,on,o.view,{once:!0}),!1===En(t,on,{originalImage:this.images[e],index:e,image:d})||!this.isShown||this.hiding||this.played)return this;var u=this.items[this.index];u&&(Ln(u,y),u.removeAttribute("aria-selected")),Fn(a,y),a.setAttribute("aria-selected",!0),o.focus&&a.focus(),this.image=d,this.viewed=!1,this.index=e,this.imageData={},Fn(d,B),o.loading&&Fn(i,H),i.innerHTML="",i.appendChild(d),this.renderList(),r.innerHTML="";var p,m,v=function(){var e=n.imageData,t=Array.isArray(o.title)?o.title[1]:o.title;r.innerHTML=Hn(_n(t)?t.call(n,d,e):"".concat(c," (").concat(e.naturalWidth," × ").concat(e.naturalHeight,")"))};return Gn(t,rn,v,{once:!0}),this.viewing={abort:function(){$n(t,rn,v),d.complete?n.imageRendering?n.imageRendering.abort():n.imageInitializing&&n.imageInitializing.abort():(d.src="",$n(d,$,p),n.timeout&&clearTimeout(n.timeout))}},d.complete?this.load():(Gn(d,$,p=function(){$n(d,G,m),n.load()},{once:!0}),Gn(d,G,m=function(){$n(d,$,p),n.timeout&&(clearTimeout(n.timeout),n.timeout=!1),Ln(d,B),o.loading&&Ln(n.canvas,H)},{once:!0}),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout((function(){Ln(d,B),n.timeout=!1}),1e3)),this},prev:function(){var n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.index-1;return e<0&&(e=n?this.length-1:0),this.view(e),this},next:function(){var n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.length-1,t=this.index+1;return t>e&&(t=n?0:e),this.view(t),this},move:function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n,t=this.imageData;return this.moveTo(Cn(n)?n:t.x+Number(n),Cn(e)?e:t.y+Number(e)),this},moveTo:function(n){var e=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r=this.element,i=this.options,a=this.imageData;if(n=Number(n),t=Number(t),this.viewed&&!this.played&&i.movable){var l=a.x,s=a.y,c=!1;if(xn(n)?c=!0:n=l,xn(t)?c=!0:t=s,c){if(_n(i.move)&&Gn(r,an,i.move,{once:!0}),!1===En(r,an,{x:n,y:t,oldX:l,oldY:s,originalEvent:o}))return this;a.x=n,a.y=t,a.left=n,a.top=t,this.moving=!0,this.renderImage((function(){e.moving=!1,_n(i.moved)&&Gn(r,ln,i.moved,{once:!0}),En(r,ln,{x:n,y:t,oldX:l,oldY:s,originalEvent:o},{cancelable:!1})}))}}return this},rotate:function(n){return this.rotateTo((this.imageData.rotate||0)+Number(n)),this},rotateTo:function(n){var e=this,t=this.element,o=this.options,r=this.imageData;if(xn(n=Number(n))&&this.viewed&&!this.played&&o.rotatable){var i=r.rotate;if(_n(o.rotate)&&Gn(t,sn,o.rotate,{once:!0}),!1===En(t,sn,{degree:n,oldDegree:i}))return this;r.rotate=n,this.rotating=!0,this.renderImage((function(){e.rotating=!1,_n(o.rotated)&&Gn(t,cn,o.rotated,{once:!0}),En(t,cn,{degree:n,oldDegree:i},{cancelable:!1})}))}return this},scaleX:function(n){return this.scale(n,this.imageData.scaleY),this},scaleY:function(n){return this.scale(this.imageData.scaleX,n),this},scale:function(n){var e=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n,o=this.element,r=this.options,i=this.imageData;if(n=Number(n),t=Number(t),this.viewed&&!this.played&&r.scalable){var a=i.scaleX,l=i.scaleY,s=!1;if(xn(n)?s=!0:n=a,xn(t)?s=!0:t=l,s){if(_n(r.scale)&&Gn(o,dn,r.scale,{once:!0}),!1===En(o,dn,{scaleX:n,scaleY:t,oldScaleX:a,oldScaleY:l}))return this;i.scaleX=n,i.scaleY=t,this.scaling=!0,this.renderImage((function(){e.scaling=!1,_n(r.scaled)&&Gn(o,un,r.scaled,{once:!0}),En(o,un,{scaleX:n,scaleY:t,oldScaleX:a,oldScaleY:l},{cancelable:!1})}))}}return this},zoom:function(n){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,r=this.imageData;return n=(n=Number(n))<0?1/(1-n):1+n,this.zoomTo(r.width*n/r.naturalWidth,e,t,o),this},zoomTo:function(n){var e=this,t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,i=arguments.length>4&&void 0!==arguments[4]&&arguments[4],a=this.element,l=this.options,s=this.pointers,c=this.imageData,d=c.x,u=c.y,p=c.width,m=c.height,v=c.naturalWidth,g=c.naturalHeight;if(xn(n=Math.max(0,n))&&this.viewed&&!this.played&&(i||l.zoomable)){if(!i){var h=Math.max(.01,l.minZoomRatio),f=Math.min(100,l.maxZoomRatio);n=Math.min(Math.max(n,h),f)}if(r)switch(r.type){case"wheel":l.zoomRatio>=.055&&n>.95&&n<1.05&&(n=1);break;case"pointermove":case"touchmove":case"mousemove":n>.99&&n<1.01&&(n=1)}var b=v*n,y=g*n,k=b-p,x=y-m,C=c.ratio;if(_n(l.zoom)&&Gn(a,pn,l.zoom,{once:!0}),!1===En(a,pn,{ratio:n,oldRatio:C,originalEvent:r}))return this;if(this.zooming=!0,r){var S=Xn(this.viewer),w=s&&Object.keys(s).length>0?Qn(s):{pageX:r.pageX,pageY:r.pageY};c.x-=k*((w.pageX-S.left-d)/p),c.y-=x*((w.pageY-S.top-u)/m)}else Wn(o)&&xn(o.x)&&xn(o.y)?(c.x-=k*((o.x-d)/p),c.y-=x*((o.y-u)/m)):(c.x-=k/2,c.y-=x/2);c.left=c.x,c.top=c.y,c.width=b,c.height=y,c.oldRatio=C,c.ratio=n,this.renderImage((function(){e.zooming=!1,_n(l.zoomed)&&Gn(a,mn,l.zoomed,{once:!0}),En(a,mn,{ratio:n,oldRatio:C,originalEvent:r},{cancelable:!1})})),t&&this.tooltip()}return this},play:function(){var n=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(!this.isShown||this.played)return this;var t=this.element,o=this.options;if(_n(o.play)&&Gn(t,vn,o.play,{once:!0}),!1===En(t,vn))return this;var r=this.player,i=this.loadImage.bind(this),a=[],l=0,s=0;if(this.played=!0,this.onLoadWhenPlay=i,e&&this.requestFullscreen(e),Fn(r,L),In(this.items,(function(n,e){var t=n.querySelector("img"),c=document.createElement("img");c.src=zn(t,"originalUrl"),c.alt=t.getAttribute("alt"),c.referrerPolicy=t.referrerPolicy,l+=1,Fn(c,x),jn(c,j,o.transition),Pn(n,y)&&(Fn(c,A),s=e),a.push(c),Gn(c,$,i,{once:!0}),r.appendChild(c)})),xn(o.interval)&&o.interval>0){var c=function e(){clearTimeout(n.playing.timeout),Ln(a[s],A),Fn(a[s=(s-=1)>=0?s:l-1],A),n.playing.timeout=setTimeout(e,o.interval)},d=function e(){clearTimeout(n.playing.timeout),Ln(a[s],A),Fn(a[s=(s+=1)<l?s:0],A),n.playing.timeout=setTimeout(e,o.interval)};l>1&&(this.playing={prev:c,next:d,timeout:setTimeout(d,o.interval)})}return this},stop:function(){var n=this;if(!this.played)return this;var e=this.element,t=this.options;if(_n(t.stop)&&Gn(e,gn,t.stop,{once:!0}),!1===En(e,gn))return this;var o=this.player;return clearTimeout(this.playing.timeout),this.playing=!1,this.played=!1,In(o.getElementsByTagName("img"),(function(e){$n(e,$,n.onLoadWhenPlay)})),Ln(o,L),o.innerHTML="",this.exitFullscreen(),this},full:function(){var n=this,e=this.options,t=this.viewer,o=this.image,r=this.list;return!this.isShown||this.played||this.fulled||!e.inline||(this.fulled=!0,this.open(),Fn(this.button,w),e.transition&&(Ln(r,j),this.viewed&&Ln(o,j)),Fn(t,C),t.setAttribute("role","dialog"),t.setAttribute("aria-labelledby",this.title.id),t.setAttribute("aria-modal",!0),t.removeAttribute("style"),Bn(t,{zIndex:e.zIndex}),e.focus&&this.enforceFocus(),this.initContainer(),this.viewerData=Tn({},this.containerData),this.renderList(),this.viewed&&this.initImage((function(){n.renderImage((function(){e.transition&&setTimeout((function(){Fn(o,j),Fn(r,j)}),0)}))}))),this},exit:function(){var n=this,e=this.options,t=this.viewer,o=this.image,r=this.list;return this.isShown&&!this.played&&this.fulled&&e.inline?(this.fulled=!1,this.close(),Ln(this.button,w),e.transition&&(Ln(r,j),this.viewed&&Ln(o,j)),e.focus&&this.clearEnforceFocus(),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.removeAttribute("aria-modal"),Ln(t,C),Bn(t,{zIndex:e.zIndexInline}),this.viewerData=Tn({},this.parentData),this.renderViewer(),this.renderList(),this.viewed&&this.initImage((function(){n.renderImage((function(){e.transition&&setTimeout((function(){Fn(o,j),Fn(r,j)}),0)}))})),this):this},tooltip:function(){var n=this,e=this.options,t=this.tooltipBox,o=this.imageData;return this.viewed&&!this.played&&e.tooltip?(t.textContent="".concat(Math.round(100*o.ratio),"%"),this.tooltipping?clearTimeout(this.tooltipping):e.transition?(this.fading&&En(t,J),Fn(t,L),Fn(t,x),Fn(t,j),t.removeAttribute("aria-hidden"),t.initialOffsetWidth=t.offsetWidth,Fn(t,A)):(Fn(t,L),t.removeAttribute("aria-hidden")),this.tooltipping=setTimeout((function(){e.transition?(Gn(t,J,(function(){Ln(t,L),Ln(t,x),Ln(t,j),t.setAttribute("aria-hidden",!0),n.fading=!1}),{once:!0}),Ln(t,A),n.fading=!0):(Ln(t,L),t.setAttribute("aria-hidden",!0)),n.tooltipping=!1}),1e3),this):this},toggle:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return 1===this.imageData.ratio?this.zoomTo(this.imageData.oldRatio,!0,null,n):this.zoomTo(1,!0,null,n),this},reset:function(){return this.viewed&&!this.played&&(this.imageData=Tn({},this.initialImageData),this.renderImage()),this},update:function(){var n=this,e=this.element,t=this.options,o=this.isImg;if(o&&!e.parentNode)return this.destroy();var r=[];if(In(o?[e]:e.querySelectorAll("img"),(function(e){_n(t.filter)?t.filter.call(n,e)&&r.push(e):n.getImageURL(e)&&r.push(e)})),!r.length)return this;if(this.images=r,this.length=r.length,this.ready){var i=[];if(In(this.items,(function(n,e){var t=n.querySelector("img"),o=r[e];o&&t&&o.src===t.src&&o.alt===t.alt||i.push(e)})),Bn(this.list,{width:"auto"}),this.initList(),this.isShown)if(this.length){if(this.viewed){var a=i.indexOf(this.index);if(a>=0)this.viewed=!1,this.view(Math.max(Math.min(this.index-a,this.length-1),0));else{var l=this.items[this.index];Fn(l,y),l.setAttribute("aria-selected",!0)}}}else this.image=null,this.viewed=!1,this.index=0,this.imageData={},this.canvas.innerHTML="",this.title.innerHTML=""}else this.build();return this},destroy:function(){var n=this.element,e=this.options;return n[g]?(this.destroyed=!0,this.ready?(this.played&&this.stop(),e.inline?(this.fulled&&this.exit(),this.unbind()):this.isShown?(this.viewing&&(this.imageRendering?this.imageRendering.abort():this.imageInitializing&&this.imageInitializing.abort()),this.hiding&&this.transitioning.abort(),this.hidden()):this.showing&&(this.transitioning.abort(),this.hidden()),this.ready=!1,this.viewer.parentNode.removeChild(this.viewer)):e.inline&&(this.delaying?this.delaying.abort():this.initializing&&this.initializing.abort()),e.inline||$n(n,R,this.onStart),n[g]=void 0,this):this}},re={getImageURL:function(n){var e=this.options.url;return e=yn(e)?n.getAttribute(e):_n(e)?e.call(this,n):""},enforceFocus:function(){var n=this;this.clearEnforceFocus(),Gn(document,V,this.onFocusin=function(e){var t=n.viewer,o=e.target;if(o!==document&&o!==t&&!t.contains(o)){for(;o;){if(null!==o.getAttribute("tabindex")||"true"===o.getAttribute("aria-modal"))return;o=o.parentElement}t.focus()}})},clearEnforceFocus:function(){this.onFocusin&&($n(document,V,this.onFocusin),this.onFocusin=null)},open:function(){var n=this.body;Fn(n,F),this.scrollbarWidth>0&&(n.style.paddingRight="".concat(this.scrollbarWidth+(parseFloat(this.initialBodyComputedPaddingRight)||0),"px"))},close:function(){var n=this.body;Ln(n,F),this.scrollbarWidth>0&&(n.style.paddingRight=this.initialBodyPaddingRight)},shown:function(){var n=this.element,e=this.options,t=this.viewer;this.fulled=!0,this.isShown=!0,this.render(),this.bind(),this.showing=!1,e.focus&&(t.focus(),this.enforceFocus()),_n(e.shown)&&Gn(n,nn,e.shown,{once:!0}),!1!==En(n,nn)&&this.ready&&this.isShown&&!this.hiding&&this.view(this.index)},hidden:function(){var n=this.element,e=this.options,t=this.viewer;e.fucus&&this.clearEnforceFocus(),this.close(),this.unbind(),Fn(t,W),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.removeAttribute("aria-modal"),t.setAttribute("aria-hidden",!0),this.resetList(),this.resetImage(),this.fulled=!1,this.viewed=!1,this.isShown=!1,this.hiding=!1,this.destroyed||(_n(e.hidden)&&Gn(n,tn,e.hidden,{once:!0}),En(n,tn,null,{cancelable:!1}))},requestFullscreen:function(n){var e=this.element.ownerDocument;if(this.fulled&&!(e.fullscreenElement||e.webkitFullscreenElement||e.mozFullScreenElement||e.msFullscreenElement)){var t=e.documentElement;t.requestFullscreen?Wn(n)?t.requestFullscreen(n):t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT):t.mozRequestFullScreen?t.mozRequestFullScreen():t.msRequestFullscreen&&t.msRequestFullscreen()}},exitFullscreen:function(){var n=this.element.ownerDocument;this.fulled&&(n.fullscreenElement||n.webkitFullscreenElement||n.mozFullScreenElement||n.msFullscreenElement)&&(n.exitFullscreen?n.exitFullscreen():n.webkitExitFullscreen?n.webkitExitFullscreen():n.mozCancelFullScreen?n.mozCancelFullScreen():n.msExitFullscreen&&n.msExitFullscreen())},change:function(n){var e=this.options,t=this.pointers,o=t[Object.keys(t)[0]];if(o){var r=o.endX-o.startX,i=o.endY-o.startY;switch(this.action){case h:0===r&&0===i||(this.pointerMoved=!0,this.move(r,i,n));break;case b:this.zoom(Jn(t),!1,null,n);break;case f:this.action="switched";var a=Math.abs(r);a>1&&a>Math.abs(i)&&(this.pointers={},r>1?this.prev(e.loop):r<-1&&this.next(e.loop))}In(t,(function(n){n.startX=n.endX,n.startY=n.endY}))}},isSwitchable:function(){var n=this.imageData,e=this.viewerData;return this.length>1&&n.x>=0&&n.y>=0&&n.width<=e.width&&n.height<=e.height}},ie=p.Viewer,ae=(qn=-1,function(){return qn+=1}),le=function(){function n(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(o(this,n),!e||1!==e.nodeType)throw new Error("The first argument is required and must be an element.");this.element=e,this.options=Tn({},c,Wn(t)&&t),this.action=!1,this.fading=!1,this.fulled=!1,this.hiding=!1,this.imageClicked=!1,this.imageData={},this.index=this.options.initialViewIndex,this.isImg=!1,this.isShown=!1,this.length=0,this.moving=!1,this.played=!1,this.playing=!1,this.pointers={},this.ready=!1,this.rotating=!1,this.scaling=!1,this.showing=!1,this.timeout=!1,this.tooltipping=!1,this.viewed=!1,this.viewing=!1,this.wheeling=!1,this.zooming=!1,this.pointerMoved=!1,this.id=ae(),this.init()}return i(n,[{key:"init",value:function(){var n=this,e=this.element,t=this.options;if(!e[g]){e[g]=this,t.focus&&!t.keyboard&&(t.focus=!1);var o="img"===e.localName,r=[];if(In(o?[e]:e.querySelectorAll("img"),(function(e){_n(t.filter)?t.filter.call(n,e)&&r.push(e):n.getImageURL(e)&&r.push(e)})),this.isImg=o,this.length=r.length,this.images=r,this.initBody(),Cn(document.createElement(g).style.transition)&&(t.transition=!1),t.inline){var i=0,a=function(){var e;(i+=1)===n.length&&(n.initializing=!1,n.delaying={abort:function(){clearTimeout(e)}},e=setTimeout((function(){n.delaying=!1,n.build()}),0))};this.initializing={abort:function(){In(r,(function(n){n.complete||($n(n,$,a),$n(n,G,a))}))}},In(r,(function(n){var e,t;n.complete?a():(Gn(n,$,e=function(){$n(n,G,t),a()},{once:!0}),Gn(n,G,t=function(){$n(n,$,e),a()},{once:!0}))}))}else Gn(e,R,this.onStart=function(e){var o=e.target;"img"!==o.localName||_n(t.filter)&&!t.filter.call(n,o)||n.view(n.images.indexOf(o))})}}},{key:"build",value:function(){if(!this.ready){var n=this.element,e=this.options,t=n.parentNode,o=document.createElement("div");o.innerHTML=d;var r=o.querySelector(".".concat(g,"-container")),i=r.querySelector(".".concat(g,"-title")),a=r.querySelector(".".concat(g,"-toolbar")),l=r.querySelector(".".concat(g,"-navbar")),s=r.querySelector(".".concat(g,"-button")),c=r.querySelector(".".concat(g,"-canvas"));if(this.parent=t,this.viewer=r,this.title=i,this.toolbar=a,this.navbar=l,this.button=s,this.canvas=c,this.footer=r.querySelector(".".concat(g,"-footer")),this.tooltipBox=r.querySelector(".".concat(g,"-tooltip")),this.player=r.querySelector(".".concat(g,"-player")),this.list=r.querySelector(".".concat(g,"-list")),r.id="".concat(g).concat(this.id),i.id="".concat(g,"Title").concat(this.id),Fn(i,e.title?Yn(Array.isArray(e.title)?e.title[0]:e.title):W),Fn(l,e.navbar?Yn(e.navbar):W),jn(s,W,!e.button),e.keyboard&&s.setAttribute("tabindex",0),e.backdrop&&(Fn(r,"".concat(g,"-backdrop")),e.inline||"static"===e.backdrop||Vn(c,hn,"hide")),yn(e.className)&&e.className&&e.className.split(fn).forEach((function(n){Fn(r,n)})),e.toolbar){var u=document.createElement("ul"),p=Wn(e.toolbar),m=bn.slice(0,3),v=bn.slice(7,9),h=bn.slice(9);p||Fn(a,Yn(e.toolbar)),In(p?e.toolbar:bn,(function(n,t){var o=p&&Wn(n),r=p?Dn(t):n,i=o&&!Cn(n.show)?n.show:n;if(i&&(e.zoomable||-1===m.indexOf(r))&&(e.rotatable||-1===v.indexOf(r))&&(e.scalable||-1===h.indexOf(r))){var a=o&&!Cn(n.size)?n.size:n,l=o&&!Cn(n.click)?n.click:n,s=document.createElement("li");e.keyboard&&s.setAttribute("tabindex",0),s.setAttribute("role","button"),Fn(s,"".concat(g,"-").concat(r)),_n(l)||Vn(s,hn,r),xn(i)&&Fn(s,Yn(i)),-1!==["small","large"].indexOf(a)?Fn(s,"".concat(g,"-").concat(a)):"play"===r&&Fn(s,"".concat(g,"-large")),_n(l)&&Gn(s,R,l),u.appendChild(s)}})),a.appendChild(u)}else Fn(a,W);if(!e.rotatable){var f=a.querySelectorAll('li[class*="rotate"]');Fn(f,B),In(f,(function(n){a.appendChild(n)}))}if(e.inline)Fn(s,S),Bn(r,{zIndex:e.zIndexInline}),"static"===window.getComputedStyle(t).position&&Bn(t,{position:"relative"}),t.insertBefore(r,n.nextSibling);else{Fn(s,k),Fn(r,C),Fn(r,x),Fn(r,W),Bn(r,{zIndex:e.zIndex});var b=e.container;yn(b)&&(b=n.ownerDocument.querySelector(b)),b||(b=this.body),b.appendChild(r)}e.inline&&(this.render(),this.bind(),this.isShown=!0),this.ready=!0,_n(e.ready)&&Gn(n,Q,e.ready,{once:!0}),!1!==En(n,Q)?this.ready&&e.inline&&this.view(this.index):this.ready=!1}}}],[{key:"noConflict",value:function(){return window.Viewer=ie,n}},{key:"setDefaults",value:function(n){Tn(c,Wn(n)&&n)}}]),n}();return Tn(le.prototype,ne,ee,te,oe,re),le}()}({get exports(){return aS},set exports(n){aS=n}});var lS=aS;async function sS(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=!0,r=null,i=$l();if(na(t)||(t={}),!sa(n))return i.reject("eleImg is not a HTMLElement"),i;if(r=n,null!==e){if(!sa(e))return i.reject("eleGroup is not a HTMLElement"),i;o=!1,r=e}if(!o){let n=Oo(e.querySelectorAll("img"));if(0===n)return i.reject("eleGroup does not contain any img"),i;1===n&&(o=!0)}let a={button:!1,navbar:!1,title:!1,toolbar:{zoomIn:4,zoomOut:4,oneToOne:4,reset:4,prev:0,play:0,next:0,rotateLeft:4,rotateRight:4,flipHorizontal:4,flipVertical:4},tooltip:!1,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!1,keyboard:!0};o||(a=function(){let n={button:!1,navbar:!1,title:!1,toolbar:{zoomIn:4,zoomOut:4,oneToOne:4,reset:4,prev:0,play:0,next:0,rotateLeft:4,rotateRight:4,flipHorizontal:4,flipVertical:4},tooltip:!1,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!1,keyboard:!0};return n.navbar=!0,n.toolbar.prev=4,n.toolbar.next=4,n}()),a=iS(a,pi(t));let l=!1;a.hide=function(){l||(l=!0,c.hide(!0))},a.hidden=function(){c.destroy(),i.resolve("close")};let s=function(){let n=eg();return lS||n.Viewer}(),c=new s(r,a);return c.show(),i}async function cS(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=arguments.length>3?arguments[3]:void 0;return Ca(o)||(o=["https://cdn.jsdelivr.net/npm/viewerjs@1.11.5/dist/viewer.min.css","https://cdn.jsdelivr.net/npm/viewerjs@1.11.5/dist/viewer.min.js"]),await cC(o),sS(n,e,t)}const dS={components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.css","https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.js"]},images:{type:Array,default:()=>[]},imageStyle:{type:Object,default:()=>{}},opt:{type:Object,default:()=>{}},multiple:{type:Boolean,default:!1}},data:function(){return{loading:!0}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{n.loading=!1,n.$nextTick((()=>{Ve(fn(n,"$refs.wiv",[]),((n,e)=>{Zf(n,{duration:200,delay:100*e})}))}))}))},computed:{useImageStyle:function(){return iS({margin:"5px"},this.imageStyle)}},methods:{showImg:function(n){let e=this,t=null;e.multiple&&(t=e.$refs.wig),cS(n.currentTarget,t,e.opt,e.pathItems).catch((n=>{console.log(n)}))}}};var uS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",[n.loading?t("WIconLoading"):n._e(),n._v(" "),t("div",{ref:"wig",style:n.loading?"heigh:0px; max-height:0px; overflow-y:hidden;":""},n._l(n.images,(function(e,o){return t("div",{key:o,ref:"wiv",refInFor:!0,staticStyle:{display:"inline-block",opacity:"0","user-select":"none",cursor:"pointer",outline:"none"},attrs:{tabindex:"0"},on:{keyup:function(e){return!e.type.indexOf("key")&&n._k(e.keyCode,"enter",13,e.key,"Enter")?null:n.showImg.apply(null,arguments)},click:n.showImg}},[t("img",{style:n.useImageStyle,attrs:{src:e}})])})),0)],1)};uS._withStripped=!0;const pS={components:{demolink:iu,WImageViewerDyn:wa({render:uS,staticRenderFns:[]},(function(n){n&&n("data-v-4cd21020_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WImageViewerDyn.vue"},media:void 0})}),dS,"data-v-4cd21020",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WImageViewerDyn:{opt1:{images:["https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/001.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/002.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/003.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/004.jpg"],imageStyle:{maxWidth:"300px",maxHeight:"300px"},opt:{}},opt2:{images:["https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/005.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/006.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/007.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/008.jpg"],imageStyle:{maxWidth:"300px",maxHeight:"300px"},opt:{}}},actions:[]}}};var mS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-viewer-dyn",casename:"one image"}}),n._v(" "),t("w-image-viewer-dyn",{attrs:{images:n.WImageViewerDyn.opt1.images,imageStyle:n.WImageViewerDyn.opt1.imageStyle,opt:n.WImageViewerDyn.opt1.opt}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-viewer-dyn",casename:"multiple image with navbar"}}),n._v(" "),t("w-image-viewer-dyn",{attrs:{images:n.WImageViewerDyn.opt2.images,imageStyle:n.WImageViewerDyn.opt2.imageStyle,opt:n.WImageViewerDyn.opt2.opt,multiple:!0}})],1)])])};mS._withStripped=!0;const vS=wa({render:mS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-image-viewer-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/fengyuanchen/viewerjs",target:"_blank",rel:"noreferrer noopener"}},[n._v("Viewer.js")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//fengyuanchen.github.io/viewerjs/",target:"_blank",rel:"noreferrer noopener"}},[n._v("Viewer.js examples")])])}]},(function(n){n&&n("data-v-587827e7_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWImageViewerDyn.vue"},media:void 0})}),pS,"data-v-587827e7",false,undefined,!1,_a,void 0,void 0);var gS=4294967295,hS=Math.min;function fS(n,e){if((n=Wi(n))<1||n>9007199254740991)return[];var t=gS,o=hS(n,gS);e=ze(e),n-=gS;for(var r=ee(o,e);++t<n;)e(t);return r}function bS(){return new function(n,e){let t=null;os(n)||(n=0),n=ji(n),ma(e)||(e=!1);let o=function(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=0,t=[];mp(n)&&(n=0),n=ji(n);let o=Vi();return o.get=function(){return t.length>0?(e+=1,t.splice(0,1)[0]):null},o.cb=function(){e-=1,e<0&&(e=0),t.length>0&&o.emit("message",t)},o.push=function(r){t.push(r),(n<=0||e<n)&&o.emit("message",t)},o.clear=function(){e=0,t=[]},o}(n);return o.on("message",(async function(n){let e=o.get();if(!e)return;await Pp(1);let t,r=fn(e,"id"),i=fn(e,"fun"),a=fn(e,"input");t=Zi(i)?await jp(i)(...a):{state:"error",msg:"fun is not a function"},o.emit(r,t),o.cb()})),function(n){let r=$l(),i=Ni();t=i;for(var a=arguments.length,l=new Array(a>1?a-1:0),s=1;s<a;s++)l[s-1]=arguments[s];let c={id:i,fun:n,input:l};return o.push(c),o.once(i,(n=>{e?i===t?"success"===n.state?r.resolve(n.msg):r.reject(n.msg):r.reject({reason:"cancelled"}):"success"===n.state?r.resolve(n.msg):r.reject(n.msg)})),r}}(arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,arguments.length>1&&void 0!==arguments[1]&&arguments[1])}let yS=!1;var kS={directives:{domresize:Mi()},components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.css","https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.js"]},images:{type:Array,default:()=>[]},imageWidth:{type:Number,default:300},imageWidthSoft:{type:Number,default:null},colNum:{type:Number,default:null},space:{type:Number,default:15},imageStyle:{type:Object,default:()=>{}},arrangeWhenFinish:{type:Boolean,default:!1},numParallel:{type:Number,default:5},opt:{type:Object,default:()=>{}}},data:function(){return{dbc:Mu(),loading:!0,first:!1,widthPanel:0,heightPanel:0,imageCols:[],imageLocs:[],useImageStyle:{},uesImageWidth:0,imagesRes:[]}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{n.loading=!1}))},computed:{changeImages:function(){let n=this.images;return this.refreshDebounce({images:n}),""},changeStyle:function(){let n=this,e=n.widthPanel,t=n.imageWidth,o=n.imageStyle,r=n.colNum,i=n.space;return n.refreshDebounce({widthPanel:e,imageWidth:t,imageStyle:o,colNum:r,space:i}),""}},methods:{resize:function(n){let e=this,t=fn(e,"$el.offsetWidth",0);yS||e.widthPanel!==t&&(e.widthPanel=t)},getImgSize:function(n,e){let t=$l(),o=`g${Ni()}`,r=document.createElement("img");r.src=n,r.style.maxWidth=`${e}px`;let i=document.createElement("div");return i.id=`img-${o}`,i.style.position="absolute",i.style.width=0,i.style.height=0,i.style.opacity=0,i.style.overflow="hidden",i.appendChild(r),document.body.appendChild(i),r.onload=function(){t.resolve({src:n,id:o,w:r.clientWidth,h:r.clientHeight,err:null}),ca(i)},r.onerror=function(e){t.reject({src:n,w:0,h:0,err:e}),ca(i)},t},getImgsSize:function(n,e){let t=this,o=Vi(),r=bS(t.numParallel);t.imagesRes=[];let i=-1;return Ve(t.images,((a,l)=>{r(t.getImgSize,a,n).then((n=>{i++;let r=i;t.arrangeWhenFinish&&(r=l);let a={...n,name:(s=n.src,s.split("\\").pop().split("/").pop()),ind:r,evKey:e};var s;t.imagesRes[r]=a,o.emit("get",a)})).catch((n=>{console.log(n)}))})),o},refreshDebounce:function(){let n=this;n.dbc((()=>{n.refresh()}))},refresh:function(){let n=this,e=null,t=null;if(ha(n.imageWidthSoft)&&n.imageWidthSoft>0)t=(n.widthPanel+n.space)/(n.imageWidthSoft+n.space),t=Math.floor(t),t=Math.max(t,1),e=(n.widthPanel-n.space*(t-1))/t;else if(Ri(n.colNum))t=ji(n.colNum),e=(n.widthPanel-(t-1)*n.space)/t,e=Math.floor(e);else if(ha(n.imageWidth)&&n.imageWidth>0){e=n.imageWidth;let o=n.widthPanel+n.space;o=Math.max(o,0);let r=e+n.space;r=Math.max(r,1),t=Math.floor(o/r)}else console.log("invalid colNum or imageWidth or imageWidthSoft",n.colNum,n.imageWidth,n.imageWidthSoft),t=4,e=300;n.uesImageWidth=e;let o={...n.imageStyle,"max-width":`${e}px`,"user-select":"none",cursor:"pointer",outline:"none"};function r(){n.imageCols=Io(fS(t),(()=>[])),n.imageLocs=Io(fS(t),(()=>0))}function i(e){if(!ya(n.imageCols))return;let t=function(){let e=n.imageLocs[0],t=0;return Ve(n.imageLocs,((n,o)=>{e>n&&(e=n,t=o)})),t}();try{n.imageCols[t].push(e),n.imageLocs[t]+=e.h+n.space+53}catch(n){}}function a(){r(),Ve(n.imagesRes,(n=>{i(n)}))}n.useImageStyle=o,n.first?a():function(){let t=$l();r();let o=Ni(),l=Oo(n.images),s=n.getImgsSize(e,o),c=0;s.on("get",(e=>{e.evKey===o&&(i(e),c++,c>=l&&(n.first=!0,n.arrangeWhenFinish&&a(),t.resolve()))}))}()},showImg:function(n,e){let t=this;yS=!0,cS(n.currentTarget,null,t.opt,t.pathItems).finally((()=>{yS=!1})),t.$emit("click",e)}}};const xS=kS;var CS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],attrs:{changeImages:n.changeImages,changeStyle:n.changeStyle},on:{domresize:n.resize}},[t("div",{staticStyle:{"margin-top":"-1px",height:"1px"}}),n._v(" "),n.loading?t("WIconLoading"):n._e(),n._v(" "),t("div",{style:n.loading?"heigh:0px; max-height:0px; overflow-y:hidden;":""},n._l(n.imageCols,(function(e,o){return t("div",{key:"c-"+o,style:"display:table-cell; vertical-align:top; margin:0; padding-left:"+(o>0?n.space:0)+"px;"},n._l(e,(function(e,o){return t("div",{key:"kimg-"+o,class:n.first?"":"fadeIn",style:"margin:"+(o>0?n.space:0)+"px 0 0 0; width:"+n.uesImageWidth+"px; user-select:none; outline:none;",attrs:{tabindex:"0"}},[t("div",{style:"display:flex;"},[t("img",{style:n.useImageStyle,attrs:{src:e.src},on:{keyup:function(t){return!t.type.indexOf("key")&&n._k(t.keyCode,"enter",13,t.key,"Enter")?null:function(t){n.showImg(t,e)}.apply(null,arguments)},click:function(t){n.showImg(t,e)}}})]),n._v(" "),t("div",{staticStyle:{background:"rgba(0,0,0,0.65)",padding:"5px"}},[t("input",{staticClass:"inp",staticStyle:{"font-size":"0.8rem",color:"#fff"},attrs:{type:"text",_spellcheck:"false",readonly:""},domProps:{value:e.name}})]),n._v(" "),t("div",{staticStyle:{background:"rgba(200,200,200,0.5)",padding:"3px 5px"}},[t("input",{staticClass:"inp",staticStyle:{"font-size":"0.7rem",opacity:"0.75"},attrs:{type:"text",_spellcheck:"false",readonly:""},domProps:{value:e.src}})])])})),0)})),0)],1)};CS._withStripped=!0;const SS={components:{demolink:iu,WImageCascadingDyn:wa({render:CS,staticRenderFns:[]},(function(n){n&&n("data-v-09df0876_0",{source:"\n.inp[data-v-09df0876] {\r\n    font: inherit;\r\n    height: 1rem;\r\n    line-height: 1rem;\r\n    width: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    display: block;\r\n    background: transparent;\r\n    border-style: none;\n}\n.inp[data-v-09df0876]:focus {\r\n    outline: none;\n}\n.fadeIn[data-v-09df0876] {\r\n    animation: aniFadeIn-data-v-09df0876 0.3s;\n}\n@keyframes aniFadeIn-data-v-09df0876\r\n{\nfrom {opacity: 0;}\nto {opacity: 1}\n}\r\n",map:{version:3,sources:["D:\\- 006 -        開源\\開源-JS-103-2-w-component-vue\\w-component-vue\\src\\components\\WImageCascadingDyn.vue"],names:[],mappings:";AAolBA;IACA,aAAA;IACA,YAAA;IACA,iBAAA;IACA,WAAA;IACA,SAAA;IACA,UAAA;IACA,cAAA;IACA,uBAAA;IACA,kBAAA;AACA;AACA;IACA,aAAA;AACA;AACA;IACA,yCAAA;AACA;AACA;;AAEA,MAAA,UAAA,CAAA;AACA,IAAA,UAAA;AACA",file:"WImageCascadingDyn.vue",sourcesContent:["<template>\r\n    <div\r\n        :changeImages=\"changeImages\"\r\n        :changeStyle=\"changeStyle\"\r\n        v-domresize\r\n        @domresize=\"resize\"\r\n    >\r\n\r\n        \x3c!-- 初始化無圖片時先撐開寬度 --\x3e\r\n        <div style=\"margin-top:-1px; height:1px;\"></div>\r\n\r\n        <WIconLoading v-if=\"loading\"></WIconLoading>\r\n\r\n        <div :style=\"`${loading?'heigh:0px; max-height:0px; overflow-y:hidden;':''}`\">\r\n\r\n            <div\r\n                :style=\"`display:table-cell; vertical-align:top; margin:0; padding-left:${kimgs>0?space:0}px;`\"\r\n                :key=\"`c-${kimgs}`\"\r\n                v-for=\"(imgs,kimgs) in imageCols\"\r\n            >\r\n\r\n                <div\r\n                    :class=\"`${first?'':'fadeIn'}`\"\r\n                    :style=\"`margin:${kimg>0?space:0}px 0 0 0; width:${uesImageWidth}px; user-select:none; outline:none;`\"\r\n                    tabindex=\"0\"\r\n                    :key=\"`kimg-${kimg}`\"\r\n                    v-for=\"(img,kimg) in imgs\"\r\n                >\r\n\r\n                    <div :style=\"`display:flex;`\">\r\n                        <img\r\n                            :style=\"useImageStyle\"\r\n                            :src=\"img.src\"\r\n                            @keyup.enter=\"(e)=>{showImg(e,img)}\"\r\n                            @click=\"(e)=>{showImg(e,img)}\"\r\n                        >\r\n                    </div>\r\n\r\n                    <div style=\"background:rgba(0,0,0,0.65); padding:5px;\">\r\n                        <input\r\n                            type=\"text\"\r\n                            class=\"inp\"\r\n                            style=\"font-size:0.8rem; color:#fff;\"\r\n                            _spellcheck=\"false\"\r\n                            readonly\r\n                            :value=\"img.name\"\r\n                        >\r\n                    </div>\r\n\r\n                    <div style=\"background:rgba(200,200,200,0.5); padding:3px 5px;\">\r\n                        <input\r\n                            type=\"text\"\r\n                            class=\"inp\"\r\n                            style=\"font-size:0.7rem; opacity:0.75;\"\r\n                            _spellcheck=\"false\"\r\n                            readonly\r\n                            :value=\"img.src\"\r\n                        >\r\n                    </div>\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport each from 'lodash-es/each.js'\r\nimport map from 'lodash-es/map.js'\r\nimport get from 'lodash-es/get.js'\r\nimport times from 'lodash-es/times.js'\r\nimport size from 'lodash-es/size.js'\r\nimport isNumber from 'lodash-es/isNumber.js'\r\nimport importResources from 'wsemi/src/importResources.mjs'\r\nimport domShowImagesDyn from 'wsemi/src/domShowImagesDyn.mjs'\r\nimport ispint from 'wsemi/src/ispint.mjs'\r\nimport cint from 'wsemi/src/cint.mjs'\r\nimport isarr from 'wsemi/src/isarr.mjs'\r\nimport genPm from 'wsemi/src/genPm.mjs'\r\nimport genID from 'wsemi/src/genID.mjs'\r\nimport pmQueue from 'wsemi/src/pmQueue.mjs'\r\nimport domRemove from 'wsemi/src/domRemove.mjs'\r\nimport evem from 'wsemi/src/evem.mjs'\r\nimport debounce from 'wsemi/src/debounce.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport WIconLoading from './WIconLoading.vue'\r\n\r\n\r\n//showViewer, 得要跨組件共用, 因彈出viewer會影響全部組件\r\nlet showViewer = false\r\n\r\n\r\nfunction getFileName(str) {\r\n    return str.split('\\\\').pop().split('/').pop()\r\n}\r\n\r\n\r\n/**\r\n * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入viewerjs組件js與css檔案位置字串陣列，預設詳見原始碼處props->pathItems->default\r\n * @vue-prop {Array} [images=[]] 輸入圖片網址陣列，預設[]\r\n * @vue-prop {Number} [imageWidth=300] 輸入圖片寬度數字，單位為px，預設300\r\n * @vue-prop {Number} [imageWidthSoft=null] 輸入自動計算最小需滿足的圖片寬度數字，單位為px，預設null\r\n * @vue-prop {Number} [colNum=null] 輸入組件寬度圖片欄位(水平向有幾張圖片)數量數字，預設null\r\n * @vue-prop {Number} [space=15] 輸入圖片間間距長度數字，單位為px，預設15\r\n * @vue-prop {Object} [imageStyle={}] 輸入圖片style物件，預設{}\r\n * @vue-prop {Object} [arrangeWhenFinish=false] 輸入是否於圖片載入完畢時依照原本圖片順序排序布林值，預設false\r\n * @vue-prop {Number} [numParallel=5] 輸入同時載入圖片數量數字，預設5\r\n * @vue-prop {Object} [opt={}] 輸入viewerjs設定物件，預設使用optOne或optMuti，若img僅一個則使用optOne，反之使用optMuti\r\n * @vue-prop {Boolean} [multiple=false] 輸入\r\n */\r\nexport default {\r\n    directives: {\r\n        domresize: domResize(),\r\n    },\r\n    components: {\r\n        WIconLoading,\r\n    },\r\n    props: {\r\n        pathItems: {\r\n            type: Array,\r\n            default: () => [ //預設值詳見 wsemi/src/domShowImagesDyn.mjs, 因此處有預載, 故所使用viewerjs的版本得相同\r\n                'https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.css',\r\n                'https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.js',\r\n            ],\r\n        },\r\n        images: {\r\n            type: Array,\r\n            default: () => [],\r\n        },\r\n        imageWidth: {\r\n            type: Number,\r\n            default: 300,\r\n        },\r\n        imageWidthSoft: {\r\n            type: Number,\r\n            default: null,\r\n        },\r\n        colNum: {\r\n            type: Number,\r\n            default: null,\r\n        },\r\n        space: {\r\n            type: Number,\r\n            default: 15,\r\n        },\r\n        imageStyle: {\r\n            type: Object,\r\n            default: () => {},\r\n        },\r\n        arrangeWhenFinish: {\r\n            type: Boolean,\r\n            default: false,\r\n        },\r\n        numParallel: {\r\n            type: Number,\r\n            default: 5,\r\n        },\r\n        opt: {\r\n            type: Object,\r\n            default: () => {},\r\n        },\r\n    },\r\n    data: function() {\r\n        return {\r\n            dbc: debounce(),\r\n\r\n            loading: true,\r\n            first: false,\r\n\r\n            widthPanel: 0,\r\n            heightPanel: 0,\r\n            imageCols: [],\r\n            imageLocs: [],\r\n            useImageStyle: {},\r\n            uesImageWidth: 0,\r\n\r\n            imagesRes: [],\r\n\r\n        }\r\n    },\r\n    mounted: function() {\r\n        //console.log('mounted')\r\n\r\n        let vo = this\r\n\r\n        //importResources\r\n        importResources(vo.pathItems)\r\n            .then((res) => {\r\n                //console.log('res', res)\r\n\r\n                //loading\r\n                vo.loading = false\r\n\r\n            })\r\n\r\n    },\r\n    computed: {\r\n\r\n        changeImages: function() {\r\n            // console.log('computed changeImages')\r\n\r\n            let vo = this\r\n\r\n            let images = vo.images\r\n\r\n            //refreshDebounce\r\n            vo.refreshDebounce({ images })\r\n\r\n            return ''\r\n        },\r\n\r\n        changeStyle: function() {\r\n            // console.log('computed changeStyle')\r\n\r\n            let vo = this\r\n\r\n            //for trigger\r\n            let widthPanel = vo.widthPanel\r\n            let imageWidth = vo.imageWidth\r\n            let imageStyle = vo.imageStyle\r\n            let colNum = vo.colNum\r\n            let space = vo.space\r\n\r\n            //refreshDebounce\r\n            vo.refreshDebounce({ widthPanel, imageWidth, imageStyle, colNum, space })\r\n\r\n            return ''\r\n        },\r\n\r\n    },\r\n    methods: {\r\n\r\n        resize: function(msg) {\r\n            // console.log('methods resize', msg)\r\n\r\n            let vo = this\r\n\r\n            //widthPanel\r\n            let widthPanel = get(vo, '$el.offsetWidth', 0)\r\n\r\n            //check, 因開啟viewer會改變視窗尺寸, 進而觸發resize, 會導致觸發changeStyle並重算圖片, 故得使用showViewer判斷是否為開啟viewer狀態, 避免重算圖片\r\n            if (showViewer) {\r\n                return\r\n            }\r\n\r\n            //check\r\n            if (vo.widthPanel === widthPanel) {\r\n                return\r\n            }\r\n\r\n            //save\r\n            vo.widthPanel = widthPanel\r\n\r\n        },\r\n\r\n        getImgSize: function(src, uesImageWidth) {\r\n            //console.log('methods getImgSize', src, uesImageWidth)\r\n\r\n            // let vo = this\r\n\r\n            //pm\r\n            let pm = genPm()\r\n\r\n            //id\r\n            let id = `g${genID()}`\r\n\r\n            //img\r\n            let img = document.createElement('img')\r\n            img.src = src\r\n            img.style.maxWidth = `${uesImageWidth}px`\r\n\r\n            //div\r\n            let div = document.createElement('div')\r\n            div.id = `img-${id}`\r\n            div.style.position = 'absolute'\r\n            div.style.width = 0\r\n            div.style.height = 0\r\n            div.style.opacity = 0\r\n            div.style.overflow = 'hidden'\r\n            div.appendChild(img)\r\n\r\n            //body\r\n            document.body.appendChild(div)\r\n\r\n            //onload\r\n            img.onload = function() {\r\n                // setTimeout(() => {\r\n                //     pm.resolve({\r\n                //         src,\r\n                //         id,\r\n                //         w: img.clientWidth,\r\n                //         h: img.clientHeight,\r\n                //         err: null,\r\n                //     })\r\n                //     domRemove(div)\r\n                // }, random(10, 2500))\r\n                pm.resolve({\r\n                    src,\r\n                    id,\r\n                    w: img.clientWidth,\r\n                    h: img.clientHeight,\r\n                    err: null,\r\n                })\r\n                domRemove(div)\r\n            }\r\n\r\n            //onerror\r\n            img.onerror = function(err) {\r\n                pm.reject({\r\n                    src,\r\n                    w: 0,\r\n                    h: 0,\r\n                    err,\r\n                })\r\n                domRemove(div)\r\n            }\r\n\r\n            return pm\r\n        },\r\n\r\n        getImgsSize: function(uesImageWidth, evKey) {\r\n            //console.log('methods getImgsSize', uesImageWidth, evKey)\r\n\r\n            let vo = this\r\n\r\n            //ev\r\n            let ev = evem()\r\n\r\n            //pmQueue\r\n            let pmq = pmQueue(vo.numParallel) //1次取得numParallel個圖片\r\n\r\n            //getImgSize\r\n            vo.imagesRes = []\r\n            let j = -1\r\n            each(vo.images, (src, k) => {\r\n                pmq(vo.getImgSize, src, uesImageWidth)\r\n                    .then((r) => {\r\n                        j++\r\n\r\n                        //ind\r\n                        let ind = j\r\n                        if (vo.arrangeWhenFinish) { //需依照原始順序排序\r\n                            ind = k\r\n                        }\r\n\r\n                        //o\r\n                        let o = {\r\n                            ...r,\r\n                            name: getFileName(r.src),\r\n                            ind,\r\n                            evKey,\r\n                        }\r\n\r\n                        //save imagesRes\r\n                        vo.imagesRes[ind] = o\r\n\r\n                        //emit\r\n                        ev.emit('get', o)\r\n\r\n                    })\r\n                    .catch((err) => {\r\n                        console.log(err)\r\n                    })\r\n            })\r\n\r\n            return ev\r\n        },\r\n\r\n        refreshDebounce: function() {\r\n            //console.log('methods refreshDebounce')\r\n\r\n            let vo = this\r\n\r\n            //dbc\r\n            vo.dbc(() => {\r\n\r\n                //refresh\r\n                vo.refresh()\r\n\r\n            })\r\n\r\n        },\r\n\r\n        refresh: function() {\r\n            // console.log('methods refresh')\r\n\r\n            let vo = this\r\n\r\n            //uesImageWidth, colNum\r\n            let uesImageWidth = null\r\n            let colNum = null\r\n            if (isNumber(vo.imageWidthSoft) && vo.imageWidthSoft > 0) {\r\n                // console.log('優先使用imageWidthSoft計算colNum與imageWidth')\r\n\r\n                //colNum\r\n                colNum = (vo.widthPanel + vo.space) / (vo.imageWidthSoft + vo.space)\r\n                colNum = Math.floor(colNum)\r\n                colNum = Math.max(colNum, 1)\r\n                // console.log('colNum', colNum)\r\n\r\n                //uesImageWidth\r\n                uesImageWidth = (vo.widthPanel - vo.space * (colNum - 1)) / colNum\r\n                // console.log('uesImageWidth', uesImageWidth)\r\n\r\n            }\r\n            else if (ispint(vo.colNum)) {\r\n                // console.log('次先使用colNum計算imageWidth')\r\n\r\n                //colNum\r\n                colNum = cint(vo.colNum)\r\n\r\n                //uesImageWidth\r\n                uesImageWidth = (vo.widthPanel - (colNum - 1) * vo.space) / colNum\r\n                uesImageWidth = Math.floor(uesImageWidth)\r\n\r\n            }\r\n            else if (isNumber(vo.imageWidth) && vo.imageWidth > 0) {\r\n                // console.log('最後使用imageWidth計算colNum')\r\n\r\n                //uesImageWidth\r\n                uesImageWidth = vo.imageWidth\r\n\r\n                //colNum\r\n                let wa = vo.widthPanel + vo.space\r\n                wa = Math.max(wa, 0)\r\n                let wis = uesImageWidth + vo.space\r\n                wis = Math.max(wis, 1)\r\n                colNum = Math.floor(wa / wis)\r\n\r\n            }\r\n            else {\r\n                console.log('invalid colNum or imageWidth or imageWidthSoft', vo.colNum, vo.imageWidth, vo.imageWidthSoft)\r\n                colNum = 4\r\n                uesImageWidth = 300\r\n            }\r\n            vo.uesImageWidth = uesImageWidth\r\n\r\n            //useImageStyle\r\n            let useImageStyle = {\r\n                ...vo.imageStyle,\r\n                'max-width': `${uesImageWidth}px`,\r\n                'user-select': 'none',\r\n                'cursor': 'pointer',\r\n                'outline': 'none',\r\n            }\r\n            vo.useImageStyle = useImageStyle\r\n\r\n            function getMinHeightCol() {\r\n                let hmin = vo.imageLocs[0]\r\n                let ihmin = 0\r\n                each(vo.imageLocs, (v, i) => {\r\n                    if (hmin > v) {\r\n                        hmin = v\r\n                        ihmin = i\r\n                    }\r\n                })\r\n                return ihmin\r\n            }\r\n\r\n            function resetImageColsAndLocs() {\r\n                vo.imageCols = map(times(colNum), () => {\r\n                    return []\r\n                })\r\n                vo.imageLocs = map(times(colNum), () => {\r\n                    return 0\r\n                })\r\n            }\r\n\r\n            function pushImage(img) {\r\n\r\n                //check, 開發階段可能hot reload組件導致出現上一輪事件\r\n                if (!isarr(vo.imageCols)) {\r\n                    return\r\n                }\r\n\r\n                //getMinHeightCol\r\n                let i = getMinHeightCol()\r\n\r\n                try {\r\n\r\n                    //push\r\n                    vo.imageCols[i].push(img)\r\n\r\n                    //update\r\n                    vo.imageLocs[i] += img.h + vo.space + (29 + 24) //29是圖名區高度, 24是位址區高度\r\n\r\n                }\r\n                catch (err) { }\r\n\r\n            }\r\n\r\n            function build() {\r\n\r\n                //pm\r\n                let pm = genPm()\r\n\r\n                //resetImageColsAndLocs\r\n                resetImageColsAndLocs()\r\n\r\n                //evKey\r\n                let evKey = genID()\r\n\r\n                //num\r\n                let num = size(vo.images)\r\n\r\n                //getImgsSize\r\n                let ev = vo.getImgsSize(uesImageWidth, evKey)\r\n\r\n                //pushImage\r\n                let n = 0\r\n                ev.on('get', (img) => {\r\n                    // console.log('get', img)\r\n\r\n                    //check\r\n                    if (img.evKey !== evKey) {\r\n                        return\r\n                    }\r\n\r\n                    //pushImage\r\n                    pushImage(img)\r\n\r\n                    //check\r\n                    n++\r\n                    if (n >= num) {\r\n\r\n                        //first\r\n                        vo.first = true\r\n\r\n                        //arrange\r\n                        if (vo.arrangeWhenFinish) {\r\n                            arrange()\r\n                        }\r\n\r\n                        //resolve\r\n                        pm.resolve()\r\n\r\n                    }\r\n\r\n                })\r\n\r\n                return pm\r\n            }\r\n\r\n            function arrange() {\r\n\r\n                //resetImageColsAndLocs\r\n                resetImageColsAndLocs()\r\n\r\n                //pushImage\r\n                each(vo.imagesRes, (img) => {\r\n                    pushImage(img)\r\n                })\r\n\r\n            }\r\n\r\n            if (!vo.first) {\r\n                // console.log('build')\r\n                build()\r\n            }\r\n            else {\r\n                // console.log('arrange')\r\n                arrange()\r\n            }\r\n\r\n        },\r\n\r\n        showImg: function(e, img) {\r\n            // console.log('methods showImg', e, img)\r\n\r\n            let vo = this\r\n\r\n            //showViewer\r\n            showViewer = true\r\n\r\n            //domShowImagesDyn\r\n            domShowImagesDyn(e.currentTarget, null, vo.opt, vo.pathItems)\r\n                .finally(() => {\r\n\r\n                    //showViewer\r\n                    showViewer = false\r\n\r\n                })\r\n\r\n            //emit\r\n            vo.$emit('click', img)\r\n\r\n        },\r\n\r\n    },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.inp {\r\n    font: inherit;\r\n    height: 1rem;\r\n    line-height: 1rem;\r\n    width: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    display: block;\r\n    background: transparent;\r\n    border-style: none;\r\n}\r\n.inp:focus {\r\n    outline: none;\r\n}\r\n.fadeIn {\r\n    animation: aniFadeIn 0.3s;\r\n}\r\n@keyframes aniFadeIn\r\n{\r\n    from {opacity: 0;}\r\n    to {opacity: 1}\r\n}\r\n</style>\r\n"]},media:void 0})}),xS,"data-v-09df0876",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WImageCascadingDyn:{opt1:{images:["https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/001.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/002.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/003.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/004.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/005.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/006.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/007.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/008.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/009.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/010.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/011.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/012.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/013.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/014.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/015.jpg"],imageStyle:{},opt:{}}},actions:[]}}};var wS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-cascading-dyn",casename:"default(imageWidth=300)"}}),n._v(" "),t("w-image-cascading-dyn",{attrs:{images:n.WImageCascadingDyn.opt1.images,imageStyle:n.WImageCascadingDyn.opt1.imageStyle,opt:n.WImageCascadingDyn.opt1.opt}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-cascading-dyn",casename:"imageWidth"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px","font-size":"0.9rem"}},[n._v("\n                colNum=(645-3*15)/150=4\n            ")]),n._v(" "),t("w-image-cascading-dyn",{staticStyle:{width:"645px"},attrs:{imageWidth:150,images:n.WImageCascadingDyn.opt1.images,imageStyle:n.WImageCascadingDyn.opt1.imageStyle,opt:n.WImageCascadingDyn.opt1.opt}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-cascading-dyn",casename:"colNum"}}),n._v(" "),t("w-image-cascading-dyn",{staticStyle:{"max-width":"1200px"},attrs:{colNum:5,images:n.WImageCascadingDyn.opt1.images,imageStyle:n.WImageCascadingDyn.opt1.imageStyle,opt:n.WImageCascadingDyn.opt1.opt}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-cascading-dyn",casename:"imageWidthSoft"}}),n._v(" "),t("w-image-cascading-dyn",{staticStyle:{width:"100%"},attrs:{imageWidthSoft:300,images:n.WImageCascadingDyn.opt1.images,imageStyle:n.WImageCascadingDyn.opt1.imageStyle,opt:n.WImageCascadingDyn.opt1.opt}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-cascading-dyn",casename:"arrangeWhenFinish"}}),n._v(" "),t("w-image-cascading-dyn",{staticStyle:{"max-width":"1200px"},attrs:{arrangeWhenFinish:!0,images:n.WImageCascadingDyn.opt1.images,imageStyle:n.WImageCascadingDyn.opt1.imageStyle,opt:n.WImageCascadingDyn.opt1.opt}})],1)])])};wS._withStripped=!0;const WS=wa({render:wS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-image-cascading-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/fengyuanchen/fooderjs",target:"_blank",rel:"noreferrer noopener"}},[n._v("Viewer.js")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//fengyuanchen.github.io/fooderjs/",target:"_blank",rel:"noreferrer noopener"}},[n._v("Viewer.js examples")])])}]},(function(n){n&&n("data-v-eea15d5c_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWImageCascadingDyn.vue"},media:void 0})}),SS,"data-v-eea15d5c",false,undefined,!1,_a,void 0,void 0);const _S={components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/w-ckeditor-vue/dist/ckeditor.js","https://cdn.jsdelivr.net/npm/w-ckeditor-vue@2.0.5/dist/w-ckeditor-vue.umd.js"]},value:{type:String,default:""},settings:{type:Object,default:()=>{}},height:{type:Number,default:250},editable:{type:Boolean,default:!0}},data:function(){return{cmpName:"WIconLoading"}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{if("loaded"!==e){let n=window["w-ckeditor-vue"];n.default&&(n=n.default),dC().component("w-ckeditor-vue",n)}n.cmpName="w-ckeditor-vue"}))},computed:{},methods:{}};var IS=function(){var n=this,e=n.$createElement;return(n._self._c||e)(n.cmpName,{ref:"$self",tag:"component",attrs:{settings:n.settings,height:n.height,editable:n.editable,value:n.value},on:{input:function(e){n.$emit("input",e)}}})};IS._withStripped=!0;const TS={components:{demolink:iu,WCkeditorVueDyn:wa({render:IS,staticRenderFns:[]},(function(n){n&&n("data-v-f7ce9c5e_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WCkeditorVueDyn.vue"},media:void 0})}),_S,"data-v-f7ce9c5e",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WCkeditorVueDyn:{content:"abc中文123",settings:{language:"zh",toolbar:{items:["heading","|","fontSize","fontColor","fontBackgroundColor","|","bold","italic","underline","strikethrough","|","subscript","superscript","|","alignment","bulletedList","numberedList","|","redo","undo","|","removeFormat"]}}},actions:[]}}};var AS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-ckeditor-vue-dyn",casename:"default"}}),n._v(" "),t("w-ckeditor-vue-dyn",{staticStyle:{width:"620px"},model:{value:n.WCkeditorVueDyn.content,callback:function(e){n.$set(n.WCkeditorVueDyn,"content",e)},expression:"WCkeditorVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-ckeditor-vue-dyn",casename:"height"}}),n._v(" "),t("w-ckeditor-vue-dyn",{staticStyle:{width:"620px"},attrs:{height:200},model:{value:n.WCkeditorVueDyn.content,callback:function(e){n.$set(n.WCkeditorVueDyn,"content",e)},expression:"WCkeditorVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-ckeditor-vue-dyn",casename:"settings"}}),n._v(" "),t("w-ckeditor-vue-dyn",{staticStyle:{width:"620px"},attrs:{settings:n.WCkeditorVueDyn.settings},model:{value:n.WCkeditorVueDyn.content,callback:function(e){n.$set(n.WCkeditorVueDyn,"content",e)},expression:"WCkeditorVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-ckeditor-vue-dyn",casename:"not editable"}}),n._v(" "),t("w-ckeditor-vue-dyn",{staticStyle:{width:"620px"},attrs:{editable:!1},model:{value:n.WCkeditorVueDyn.content,callback:function(e){n.$set(n.WCkeditorVueDyn,"content",e)},expression:"WCkeditorVueDyn.content"}})],1)])])};AS._withStripped=!0;const BS=wa({render:AS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-ckeditor-vue-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("div",{staticStyle:{color:"#f26","margin-bottom":"5px"}},[n._v("* Can not support IE11")]),n._v(" "),t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/ckeditor/ckeditor5",target:"_blank",rel:"noreferrer noopener"}},[n._v("ckeditor 5")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("ckeditor 5 examples")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/ckeditor/ckeditor5-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("ckeditor5-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/yuda-lyu/w-ckeditor-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-ckeditor-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//yuda-lyu.github.io/w-ckeditor-vue/examples/ex-default.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-ckeditor-vue examples")])])}]},(function(n){n&&n("data-v-6e51589c_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWCkeditorVueDyn.vue"},media:void 0})}),TS,"data-v-6e51589c",false,undefined,!1,_a,void 0,void 0);const HS={components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/tinymce@5.10.7/tinymce.min.js","https://cdn.jsdelivr.net/npm/w-tinymce-vue@2.0.6/dist/w-tinymce-vue.umd.js"]},value:{type:String,default:""},settings:{type:Object,default:()=>{}},height:{type:Number,default:250},editable:{type:Boolean,default:!0}},data:function(){return{cmpName:"WIconLoading"}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{if("loaded"!==e){let n=window["w-tinymce-vue"];n.default&&(n=n.default),dC().component("w-tinymce-vue",n)}n.cmpName="w-tinymce-vue"}))},computed:{},methods:{}};var PS=function(){var n=this,e=n.$createElement;return(n._self._c||e)(n.cmpName,{ref:"$self",tag:"component",attrs:{settings:n.settings,height:n.height,editable:n.editable,value:n.value},on:{input:function(e){n.$emit("input",e)}}})};PS._withStripped=!0;const FS={components:{demolink:iu,WTinymceVueDyn:wa({render:PS,staticRenderFns:[]},(function(n){n&&n("data-v-af8011cc_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WTinymceVueDyn.vue"},media:void 0})}),HS,"data-v-af8011cc",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WTinymceVueDyn:{content:"abc中文123",settings:{menubar:"",plugins:"",toolbar:"fontsizeselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent"}},actions:[]}}};var LS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-tinymce-vue-dyn",casename:"default"}}),n._v(" "),t("w-tinymce-vue-dyn",{staticStyle:{width:"620px"},model:{value:n.WTinymceVueDyn.content,callback:function(e){n.$set(n.WTinymceVueDyn,"content",e)},expression:"WTinymceVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-tinymce-vue-dyn",casename:"height"}}),n._v(" "),t("w-tinymce-vue-dyn",{staticStyle:{width:"620px"},attrs:{height:200},model:{value:n.WTinymceVueDyn.content,callback:function(e){n.$set(n.WTinymceVueDyn,"content",e)},expression:"WTinymceVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-tinymce-vue-dyn",casename:"settings"}}),n._v(" "),t("w-tinymce-vue-dyn",{staticStyle:{width:"620px"},attrs:{settings:n.WTinymceVueDyn.settings},model:{value:n.WTinymceVueDyn.content,callback:function(e){n.$set(n.WTinymceVueDyn,"content",e)},expression:"WTinymceVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-tinymce-vue-dyn",casename:"not editable"}}),n._v(" "),t("w-tinymce-vue-dyn",{staticStyle:{width:"620px"},attrs:{editable:!1},model:{value:n.WTinymceVueDyn.content,callback:function(e){n.$set(n.WTinymceVueDyn,"content",e)},expression:"WTinymceVueDyn.content"}})],1)])])};LS._withStripped=!0;const jS=wa({render:LS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-tinymce-vue-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/tinymce/tinymce",target:"_blank",rel:"noreferrer noopener"}},[n._v("tinymce")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//www.tiny.cloud/docs/demo/full-featured/",target:"_blank",rel:"noreferrer noopener"}},[n._v("tinymce examples")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/tinymce/tinymce-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("tinymce-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/yuda-lyu/w-tinymce-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-tinymce-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//yuda-lyu.github.io/w-tinymce-vue/examples/ex-default.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-tinymce-vue examples")])])}]},(function(n){n&&n("data-v-6bfd8eeb_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWTinymceVueDyn.vue"},media:void 0})}),FS,"data-v-6bfd8eeb",false,undefined,!1,_a,void 0,void 0);const RS={components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js","https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.min.css","https://cdn.jsdelivr.net/npm/w-quill-vue@2.0.5/dist/w-quill-vue.umd.js"]},value:{type:String,default:""},settings:{type:Object,default:()=>{}},height:{type:Number,default:250},editable:{type:Boolean,default:!0}},data:function(){return{cmpName:"WIconLoading"}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{if("loaded"!==e){let n=window["w-quill-vue"];n.default&&(n=n.default),dC().component("w-quill-vue",n)}n.cmpName="w-quill-vue"}))},computed:{},methods:{}};var DS=function(){var n=this,e=n.$createElement;return(n._self._c||e)(n.cmpName,{ref:"$self",tag:"component",attrs:{settings:n.settings,height:n.height,editable:n.editable,value:n.value},on:{input:function(e){n.$emit("input",e)}}})};DS._withStripped=!0;const zS={components:{demolink:iu,WQuillVueDyn:wa({render:DS,staticRenderFns:[]},(function(n){n&&n("data-v-682dcf88_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WQuillVueDyn.vue"},media:void 0})}),RS,"data-v-682dcf88",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WQuillVueDyn:{content:"abc中文123",settings:{modules:{toolbar:[{size:["small",!1,"large","huge"]}]}}},actions:[]}}};var VS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-quill-vue-dyn",casename:"default"}}),n._v(" "),t("w-quill-vue-dyn",{staticStyle:{width:"620px"},model:{value:n.WQuillVueDyn.content,callback:function(e){n.$set(n.WQuillVueDyn,"content",e)},expression:"WQuillVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-quill-vue-dyn",casename:"height"}}),n._v(" "),t("w-quill-vue-dyn",{staticStyle:{width:"620px"},attrs:{height:200},model:{value:n.WQuillVueDyn.content,callback:function(e){n.$set(n.WQuillVueDyn,"content",e)},expression:"WQuillVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-quill-vue-dyn",casename:"settings"}}),n._v(" "),t("w-quill-vue-dyn",{staticStyle:{width:"620px"},attrs:{settings:n.WQuillVueDyn.settings},model:{value:n.WQuillVueDyn.content,callback:function(e){n.$set(n.WQuillVueDyn,"content",e)},expression:"WQuillVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-quill-vue-dyn",casename:"not editable"}}),n._v(" "),t("w-quill-vue-dyn",{staticStyle:{width:"620px"},attrs:{editable:!1},model:{value:n.WQuillVueDyn.content,callback:function(e){n.$set(n.WQuillVueDyn,"content",e)},expression:"WQuillVueDyn.content"}})],1)])])};VS._withStripped=!0;const ZS=wa({render:VS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-quill-vue-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/quilljs/quill",target:"_blank",rel:"noreferrer noopener"}},[n._v("quill")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//quilljs.com/playground/",target:"_blank",rel:"noreferrer noopener"}},[n._v("quill examples")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/surmon-china/vue-quill-editor",target:"_blank",rel:"noreferrer noopener"}},[n._v("vue-quill-editor")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/yuda-lyu/w-quill-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-quill-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//yuda-lyu.github.io/w-quill-vue/examples/ex-default.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-quill-vue examples")])])}]},(function(n){n&&n("data-v-063263b0_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWQuillVueDyn.vue"},media:void 0})}),zS,"data-v-063263b0",false,undefined,!1,_a,void 0,void 0);let $S={tooltip:[],popup:[]};function GS(n,e){$S[n].push(e)}function ES(n,e){return hc($S[n])===e}function XS(n,e){kc($S[n],e)}let NS={mode:"wysiwyg",theme:"classic",lang:"zh_TW",counter:{enable:!1,type:"markdown"},tab:"\t",typewriterMode:!0,toolbarConfig:{pin:!0},cache:{enable:!1},toolbar:["headings","bold","italic","strike","link","|","list","ordered-list","outdent","indent","|","quote","line","insert-before","insert-after","|","table","|","undo","redo","|","edit-mode","export"],hint:{parse:!0,delay:0,extend:[]},preview:{maxWidth:1e10,delay:0,actions:[],hljs:{style:"monokai",lineNumber:!0}}};var MS={directives:{domresize:Mi()},components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/vditor@3.10.5/dist/index.css","https://cdn.jsdelivr.net/npm/vditor@3.10.5/dist/index.min.js"]},value:{type:String,default:""},height:{type:Number,default:250},settings:{type:Object,default:()=>{}},keyHint:{type:[String,Array],default:""},hintBorderRadius:{type:Number,default:4},hintBackgroundColor:{type:String,default:"#fff"},hintShadow:{type:Boolean,default:!0},hintShadowStyle:{type:String,default:"0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)"},cmpZIndex:{type:Number,default:3e3},editable:{type:Boolean,default:!0}},data:function(){return{loading:!0,mmkey:Ni(),bp:null,mode:"popup",kind:"click",isolated:!0,transitionTime:200,triggerWidth:null,contentStyle:"",contentEditor:null,showPopper:!1,placement:"bottom-start",placementDistX:0,placementDistY:-15,valueTrans:"",useHint:""}},mounted:function(){let n=this;(async function(){await Nu((()=>void 0!==n.$el)),await cC(n.pathItems);let e=window.Vditor;await Nu((()=>sa(fn(n,"$refs.divVditor"))));let t=n.$refs.divVditor;n.contentEditor=new e(t,n.useSettings),await Nu((()=>na(fn(n,"contentEditor.vditor")))),n.loading=!1,n.valueTrans=n.value,n.contentEditor.setValue(n.value)})().catch((n=>{console.log(n)}));let e="change-show-popper";n.bp=new Nd(n,n.funGetDivTrigger,n.funGetDivContent,"showPopper",e,{addTriggerMode:GS,checkTriggerEffMode:ES,removeTriggerMode:XS}),n.bp.on(e,(e=>{e||(n.useHint="")})),n.bp.mounted()},beforeDestroy:function(){let n=this;n.contentEditor&&(n.contentEditor.destroy(),n.contentEditor=null),n.bp&&n.bp.destroy()},computed:{keyHints:function(){let n=this,e=n.keyHint;return Ao(n.keyHint)&&(e=[n.keyHint]),e},useSettings:function(){let n=this,e={...NS,...n.settings};e.height=n.height;let t=[];return Ve(n.keyHints,(n=>{if(!Ao(n))return!0;let e={key:n,hint:async e=>[{html:`<div name="tar" tpht="${n}" style="display:none;"></div>`,value:""}]};t.push(e)})),e.hint.extend=t,e.input=e=>{n.valueTrans=e,n.detectAndShowHint(e),n.$emit("input",e)},e},changeValue:function(){let n=this.value;return this.relaValue(n),""},changeEditable:function(){let n=this.editable;return this.relaEditable(n),""},changeShowPopper:function(){let n=this,e=n.showPopper;return n.isolated||n.updateValue(e,"changeShowPopper"),""},useHintBorderRadius:function(){let n=this;return ha(n.hintBorderRadius)?`border-radius:${n.hintBorderRadius}px;`:""},useHintBackgroundColor:function(){return Qi(this.hintBackgroundColor)},useHintShadow:function(){if(!this.hintShadow)return"";let n=qi(this.hintShadowStyle,";","");return""!==n?`box-shadow:${n};`:""}},methods:{relaValue:function(){let n=this;n.loading||n.value!==n.valueTrans&&(n.valueTrans=n.value,n.contentEditor.setValue(n.value))},relaEditable:function(){let n=this;(async function(){await Nu((()=>!n.loading)),n.editable?n.contentEditor.enable():n.contentEditor.disabled()})().catch((n=>{console.log(n)}))},funGetDivTrigger:function(){let n=this,e=null;try{e=n.$el.querySelector('[class="vditor-hint"]')}catch(n){}return e},funGetDivContent:function(){return fn(this,"$refs.divContent",null)},findAnchor:function(){let n=this,e=$l(),t=0,o=setInterval((()=>{t++;let r=n.funGetDivTrigger();sa(r)&&(clearInterval(o),e.resolve(r)),t>100&&(clearInterval(o),e.reject("can not find the ele"))}),50);return e},getUseHint:function(n){let e="";try{e=n.querySelector('div[name="tar"]').getAttribute("tpht")}catch(n){}return e},detectAndShowHint:function(n){let e=this;Ca(e.keyHints)&&e.findAnchor().then((n=>{"none"!==n.style.display&&(e.useHint=e.getUseHint(n),e.evShow("click","call"),e.contentEditor.blur())})).catch((n=>{console.log(n)}))},evShow:function(n,e){let t=this;Zi(fn(t,"bp.evShow"))&&t.bp.evShow(n,e)},evHide:function(n,e){let t=this;Zi(fn(t,"bp.evHide"))&&t.bp.evHide(n,e)},updatePopper:function(n,e){let t=this;Zi(fn(t,"bp.updatePopper"))&&t.bp.updatePopper(n,e)},updateValue:function(n,e){let t=this;Zi(fn(t,"bp.updateValue"))&&t.bp.updateValue(n,e)},insertValue:function(n,e){let t=this;if(Zi(fn(t,"contentEditor.insertValue"))){t.contentEditor.insertValue(n);let e=t.contentEditor.getValue();Ve(t.keyHints,(n=>{e=e.replaceAll(`/ ${n}`,"")})),t.valueTrans=t.value,t.contentEditor.setValue(e),t.$emit("input",e)}}}};const OS=MS;var KS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{attrs:{changeValue:n.changeValue,changeEditable:n.changeEditable,changeShowPopper:n.changeShowPopper}},[n.loading?t("WIconLoading"):n._e(),n._v(" "),t("div",{staticClass:"WVditorFix",style:n.loading?"heigh:0px; max-height:0px; overflow-y:hidden;":""},[t("div",{ref:"divVditor"}),n._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:n.showPopper,expression:"showPopper"},{name:"domresize",rawName:"v-domresize"}],ref:"divContent",staticClass:"WPopperFix",style:"z-index:"+n.cmpZIndex+";",on:{domresize:n.updatePopper}},[n.showPopper?t("div",{style:n.contentStyle+" background:"+n.useHintBackgroundColor+"; "+n.useHintBorderRadius+" "+n.useHintShadow},[n._t("content",null,{hint:n.useHint,funInsert:function(e){n.insertValue(e,"slot")},funHide:function(){n.updateValue(!1,"slot")}})],2):n._e()])])],1)};KS._withStripped=!0;const YS={components:{demolink:iu,WVditorDyn:wa({render:KS,staticRenderFns:[]},(function(n){n&&n("data-v-1b13d5b5_0",{source:'\n.WPopperFix[data-popper-reference-hidden][data-v-1b13d5b5] {\r\n    visibility: hidden;\r\n    pointer-events: none;\n}\n.WVditorFix[data-v-1b13d5b5] .vditor-reset {\r\n    font-size: inherit;\n}\n.WVditorFix[data-v-1b13d5b5] div.vditor-hint:has(div[name="tar"]) { /* 使觸發區divTrigger(原本彈窗)完全透明 */\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n    outline: none;\n}\r\n',map:{version:3,sources:["D:\\- 006 -        開源\\開源-JS-103-2-w-component-vue\\w-component-vue\\src\\components\\WVditorDyn.vue"],names:[],mappings:";AAmxBA;IACA,kBAAA;IACA,oBAAA;AACA;AACA;IACA,kBAAA;AACA;AACA,oEAAA,6BAAA;IACA,kBAAA;IACA,oBAAA;IACA,aAAA;AACA",file:"WVditorDyn.vue",sourcesContent:["<template>\r\n    <div\r\n        :changeValue=\"changeValue\"\r\n        :changeEditable=\"changeEditable\"\r\n        :changeShowPopper=\"changeShowPopper\"\r\n    >\r\n\r\n        <WIconLoading v-if=\"loading\"></WIconLoading>\r\n\r\n        <div\r\n            class=\"WVditorFix\"\r\n            :style=\"`${loading?'heigh:0px; max-height:0px; overflow-y:hidden;':''}`\"\r\n        >\r\n\r\n            <div ref=\"divVditor\"></div>\r\n\r\n            <div\r\n                ref=\"divContent\"\r\n                class=\"WPopperFix\"\r\n                :style=\"`z-index:${cmpZIndex};`\"\r\n                v-show=\"showPopper\"\r\n                v-domresize\r\n                @domresize=\"updatePopper\"\r\n            >\r\n                <div\r\n                    :style=\"`${contentStyle} background:${useHintBackgroundColor}; ${useHintBorderRadius} ${useHintShadow}`\"\r\n                    v-if=\"showPopper\"\r\n                >\r\n                    <slot\r\n                        name=\"content\"\r\n                        :hint=\"useHint\"\r\n                        :funInsert=\"(v)=>{insertValue(v,'slot')}\"\r\n                        :funHide=\"()=>{updateValue(false,'slot')}\"\r\n                    ></slot>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport get from 'lodash-es/get.js'\r\nimport each from 'lodash-es/each.js'\r\nimport last from 'lodash-es/last.js'\r\nimport pull from 'lodash-es/pull.js'\r\nimport isNumber from 'lodash-es/isNumber.js'\r\nimport genID from 'wsemi/src/genID.mjs'\r\nimport genPm from 'wsemi/src/genPm.mjs'\r\nimport replace from 'wsemi/src/replace.mjs'\r\nimport waitFun from 'wsemi/src/waitFun.mjs'\r\nimport isfun from 'wsemi/src/isfun.mjs'\r\nimport isestr from 'wsemi/src/isestr.mjs'\r\nimport iseobj from 'wsemi/src/iseobj.mjs'\r\nimport isearr from 'wsemi/src/isearr.mjs'\r\nimport isEle from 'wsemi/src/isEle.mjs'\r\nimport importResources from 'wsemi/src/importResources.mjs'\r\nimport convertColor from '../js/convertColor.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport BuildPopper from '../js/buildPopper.mjs'\r\nimport WIconLoading from './WIconLoading.vue'\r\n\r\n\r\n//tootip與popup不共用已出現項目清單, 避免互相影響\r\nlet kpRespList = {\r\n    tooltip: [],\r\n    popup: [],\r\n}\r\nfunction addTriggerMode(mode, mmkey) {\r\n    kpRespList[mode].push(mmkey)\r\n}\r\nfunction checkTriggerEffMode(mode, mmkey) {\r\n    return last(kpRespList[mode]) === mmkey\r\n}\r\nfunction removeTriggerMode(mode, mmkey) {\r\n    pull(kpRespList[mode], mmkey)\r\n}\r\n\r\n\r\nlet def_settings = {\r\n    mode: 'wysiwyg', //sv: 雙欄位, ir:即時渲染, wysiwyg:所見即所得\r\n    // debugger: true,\r\n    // height: 500,\r\n    // placeholder: '請輸入Markdown格式文字',\r\n    theme: 'classic',\r\n    lang: 'zh_TW',\r\n    counter: {\r\n        enable: false,\r\n        type: 'markdown',\r\n    },\r\n    tab: '\\t',\r\n    typewriterMode: true,\r\n    toolbarConfig: {\r\n        pin: true\r\n    },\r\n    cache: {\r\n        enable: false\r\n    },\r\n    toolbar: [\r\n        // 'emoji',\r\n        'headings',\r\n        'bold',\r\n        'italic',\r\n        'strike',\r\n        'link',\r\n        '|',\r\n        'list',\r\n        'ordered-list',\r\n        // 'check',\r\n        'outdent',\r\n        'indent',\r\n        '|',\r\n        'quote',\r\n        'line',\r\n        // 'code',\r\n        // 'inline-code',\r\n        'insert-before',\r\n        'insert-after',\r\n        '|',\r\n        // 'record',\r\n        'table',\r\n        '|',\r\n        'undo',\r\n        'redo',\r\n        '|',\r\n        'edit-mode',\r\n        // 'content-theme',\r\n        // 'code-theme',\r\n        'export',\r\n        // {\r\n        //     name: 'more',\r\n        //     toolbar: [\r\n        //         'fullscreen',\r\n        //         'both',\r\n        //         // 'preview',\r\n        //         // 'info',\r\n        //         // 'help',\r\n        //     ],\r\n        // },\r\n        // {\r\n        //     hotkey: '⇧⌘S',\r\n        //     name: 'sponsor',\r\n        //     tipPosition: 's',\r\n        //     tip: 'toolbar icon tip',\r\n        //     className: 'right',\r\n        //     icon: '<svg></svg>',\r\n        //     click: () => {\r\n        //         console.log('toolbar click')\r\n        //     },\r\n        // },\r\n    ],\r\n    hint: {\r\n        parse: true,\r\n        delay: 0,\r\n        extend: [\r\n            // {\r\n            //     key: 'md',\r\n            //     hint: async (value) => {\r\n            //         console.log('hint.extend hint', value)\r\n            //         let ts = [\r\n            //             {\r\n            //                 html: '<h6>md1</h6>',\r\n            //                 value: '[google](https://www.google.com/)',\r\n            //             },\r\n            //             {\r\n            //                 html: `<div>md2 <span style=\"color:#f26;\">test2</span></div>`,\r\n            //                 value: 'vvv2',\r\n            //             },\r\n            //         ]\r\n            //         return ts\r\n            //     },\r\n            // },\r\n        ],\r\n    },\r\n    // input: (msg) => {\r\n    //     console.log('input', msg)\r\n    // },\r\n    preview: {\r\n        maxWidth: 1e10,\r\n        delay: 0,\r\n        actions: [], //['desktop', 'tablet', 'mobile', 'mp-wechat', 'zhihu'] //移除分享按鈕\r\n        hljs: {\r\n            style: 'monokai',\r\n            lineNumber: true\r\n        },\r\n        // parse: (ele) => { //預覽回調\r\n        //     console.log('preview.parse', ele) //僅分割預覽之預覽區有效\r\n        //     return ele\r\n        // },\r\n        // transform: (h) => { //渲染之前回調\r\n        //     console.log('preview.transform', h) //僅分割預覽之預覽區有效\r\n        //     return h\r\n        // },\r\n    },\r\n}\r\n\r\n\r\n/**\r\n * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入vditor套件的css與js檔案位置字串陣列，預設詳見原始碼處props->pathItems->default\r\n * @vue-prop {String} [value=''] 輸入富文本字串，預設為''\r\n * @vue-prop {Number} [height=250] 輸入高度數字，單位為px，預設為250\r\n * @vue-prop {Object} [settings={}] 輸入vditor設定物件，預設值為{}，內部預設值詳見vditor原始碼\r\n * @vue-prop {String|Array} [keyHint=''] 輸入打字時調用提示區字串或陣列，例如若給予'ht'，則輸入「/ ht」或「@ ht」則可顯示提示區，或給予['ht','kw']陣列，預設為''\r\n * @vue-prop {Number} [hintBorderRadius=4] 輸入提示窗框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [hintBackgroundColor='rgba(60,60,60,0.75)'] 輸入提示窗背景顏色字串，預設'rgba(60,60,60,0.75)'\r\n * @vue-prop {Boolean} [hintShadow=true] 輸入提示窗是否顯示陰影布林值，預設true\r\n * @vue-prop {String} [hintShadowStyle=''] 輸入提示窗陰影顏色字串，預設值詳見props\r\n * @vue-prop {Number} [cmpZIndex=3000] 輸入提示窗使用z-index數字，預設3000\r\n * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true\r\n */\r\nexport default {\r\n    directives: {\r\n        domresize: domResize(),\r\n    },\r\n    components: {\r\n        WIconLoading,\r\n    },\r\n    props: {\r\n        pathItems: {\r\n            type: Array,\r\n            default: () => [\r\n                'https://cdn.jsdelivr.net/npm/vditor@3.10.5/dist/index.css',\r\n                'https://cdn.jsdelivr.net/npm/vditor@3.10.5/dist/index.min.js',\r\n            ],\r\n        },\r\n        value: {\r\n            type: String,\r\n            default: '',\r\n        },\r\n        height: {\r\n            type: Number,\r\n            default: 250,\r\n        },\r\n        settings: {\r\n            type: Object,\r\n            default: () => {},\r\n        },\r\n        keyHint: {\r\n            type: [String, Array],\r\n            default: '',\r\n        },\r\n        hintBorderRadius: {\r\n            type: Number,\r\n            default: 4,\r\n        },\r\n        hintBackgroundColor: {\r\n            type: String,\r\n            default: '#fff',\r\n        },\r\n        hintShadow: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n        hintShadowStyle: {\r\n            type: String,\r\n            default: '0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)',\r\n        },\r\n        cmpZIndex: {\r\n            type: Number,\r\n            default: 3000,\r\n        },\r\n        editable: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n    },\r\n    data: function() {\r\n        return {\r\n\r\n            loading: true,\r\n\r\n            mmkey: genID(), //beforeMount內無法變更data, mounted內會晚於computed, 故優先放於data生成\r\n            // mmkey: (() => {\r\n            //     let id = genID()\r\n            //     console.log('data gen mmkey', id)\r\n            //     return id\r\n            // })(),\r\n\r\n            bp: null,\r\n\r\n            mode: 'popup', //tooltip, popup\r\n            kind: 'click', //hover, click\r\n            isolated: true, //因完全使用事件觸發, 故isolated=true\r\n            transitionTime: 200,\r\n            triggerWidth: null,\r\n            contentStyle: '',\r\n\r\n            contentEditor: null,\r\n\r\n            showPopper: false,\r\n            placement: 'bottom-start', //定位左下\r\n            placementDistX: 0,\r\n            placementDistY: -15,\r\n\r\n            valueTrans: '',\r\n\r\n            useHint: '',\r\n\r\n        }\r\n    },\r\n    mounted: function() {\r\n        //console.log('mounted')\r\n\r\n        let vo = this\r\n\r\n        async function core() {\r\n\r\n            //wait $el\r\n            await waitFun(() => {\r\n                return vo.$el !== undefined\r\n            })\r\n\r\n            //importResources\r\n            await importResources(vo.pathItems)\r\n            // console.log('res', res)\r\n\r\n            //Vditor\r\n            let Vditor = window['Vditor']\r\n            // console.log('Vditor', Vditor)\r\n\r\n            //wait divVditor, 因loading=false之後才能開始顯示divVditor, 故須等待divVditor是否出現\r\n            await waitFun(() => {\r\n                let ele = get(vo, '$refs.divVditor')\r\n                return isEle(ele)\r\n            })\r\n\r\n            //divVditor\r\n            let divVditor = vo.$refs.divVditor\r\n            // console.log('divVditor', divVditor)\r\n\r\n            //contentEditor\r\n            vo.contentEditor = new Vditor(divVditor, vo.useSettings)\r\n            // console.log('contentEditor', vo.contentEditor)\r\n\r\n            //wait contentEditor, 因new Vditor後會需一小段時間初始化, 故須等待vditor來判斷vditor是否初始化完成\r\n            await waitFun(() => {\r\n                // let getCurrentMode = get(vo, 'contentEditor.getCurrentMode') //因contentEditor.getCurrentMode是原型已為function, 故無法用此做判斷\r\n                // return isfun(getCurrentMode)\r\n                let v = get(vo, 'contentEditor.vditor')\r\n                return iseobj(v)\r\n            })\r\n            // console.log(`vo.contentEditor.getCurrentMode()`, vo.contentEditor.getCurrentMode())\r\n\r\n            //loading, 組件不依照loading顯隱, loading為依賴、組件完成載入、組件初始化後才改為false\r\n            vo.loading = false\r\n\r\n            //update valueTrans, 於mounted進行第1次賦值觸發, 故直接更新valueTrans, 避免emit出去再進來更新\r\n            vo.valueTrans = vo.value\r\n\r\n            //setValue, 於mounted進行第1次賦值, 之後給computed偵測修改\r\n            vo.contentEditor.setValue(vo.value)\r\n\r\n            // //emit, 於組件內初始化第一次觸發故不須emit\r\n            // vo.$emit('input', value)\r\n\r\n        }\r\n\r\n        //core\r\n        core()\r\n            .catch((err) => {\r\n                console.log(err)\r\n            })\r\n\r\n        //BuildPopper\r\n        let keyShow = 'showPopper'\r\n        let evNameValue = 'change-show-popper'\r\n        vo.bp = new BuildPopper(vo,\r\n            vo.funGetDivTrigger,\r\n            vo.funGetDivContent,\r\n            keyShow,\r\n            evNameValue,\r\n            {\r\n                addTriggerMode,\r\n                checkTriggerEffMode,\r\n                removeTriggerMode,\r\n            })\r\n\r\n        //監聽evNameValue\r\n        vo.bp.on(evNameValue, (showPopper) => {\r\n            // console.log(vo.mmkey, 'bp.on', evNameValue, showPopper)\r\n            if (!showPopper) { //僅處理隱藏事件\r\n                vo.useHint = '' //隱藏時清空useHint\r\n            }\r\n        })\r\n\r\n        //mounted\r\n        vo.bp.mounted()\r\n\r\n    },\r\n    beforeDestroy: function() {\r\n        //console.log('beforeDestroy')\r\n\r\n        let vo = this\r\n\r\n        //destroy\r\n        if (vo.contentEditor) {\r\n            vo.contentEditor.destroy()\r\n            vo.contentEditor = null\r\n        }\r\n\r\n        //destroy\r\n        if (vo.bp) {\r\n            vo.bp.destroy()\r\n        }\r\n\r\n    },\r\n    computed: {\r\n\r\n        keyHints: function() {\r\n            let vo = this\r\n\r\n            //hts\r\n            let hts = vo.keyHint\r\n            if (isestr(vo.keyHint)) {\r\n                hts = [vo.keyHint]\r\n            }\r\n            // console.log('hts', hts)\r\n\r\n            return hts\r\n        },\r\n\r\n        useSettings: function() {\r\n            //console.log('computed useSettings')\r\n\r\n            let vo = this\r\n\r\n            let st = {\r\n                ...def_settings,\r\n                ...vo.settings,\r\n            }\r\n            // console.log('st', st)\r\n\r\n            //add height\r\n            st.height = vo.height\r\n\r\n            //extend\r\n            let extend = []\r\n            each(vo.keyHints, (v) => {\r\n                if (!isestr(v)) {\r\n                    return true //跳出換下一個\r\n                }\r\n                let ht = {\r\n                    key: v,\r\n                    hint: async (value) => {\r\n                        // console.log('hint.extend hint', value)\r\n                        let ts = [\r\n                            {\r\n                                html: `<div name=\"tar\" tpht=\"${v}\" style=\"display:none;\"></div>`,\r\n                                value: '',\r\n                            },\r\n                        ]\r\n                        return ts\r\n                    },\r\n                }\r\n                extend.push(ht)\r\n            })\r\n            st.hint.extend = extend\r\n            // console.log('st.hint.extend', st.hint.extend)\r\n\r\n            //add input\r\n            st.input = (value) => {\r\n                // console.log(vo.mmkey, 'input', value)\r\n\r\n                //update valueTrans, 由組件內input觸發, 故直接更新valueTrans, 避免emit出去再進來更新\r\n                vo.valueTrans = value\r\n\r\n                //detectAndShowHint\r\n                vo.detectAndShowHint(value)\r\n\r\n                //emit\r\n                vo.$emit('input', value)\r\n\r\n            }\r\n\r\n            // console.log('st', st)\r\n            return st\r\n        },\r\n\r\n        changeValue: function() {\r\n            // console.log('computed changeValue')\r\n\r\n            let vo = this\r\n\r\n            //trigger\r\n            let value = vo.value\r\n\r\n            //relaValue\r\n            vo.relaValue(value)\r\n\r\n            return ''\r\n        },\r\n\r\n        changeEditable: function() {\r\n            //console.log('computed changeEditable')\r\n\r\n            let vo = this\r\n\r\n            //trigger\r\n            let editable = vo.editable\r\n\r\n            //relaEditable\r\n            vo.relaEditable(editable)\r\n\r\n            return ''\r\n        },\r\n\r\n        changeShowPopper: function () {\r\n            //console.log('computed changeShowPopper')\r\n\r\n            let vo = this\r\n\r\n            //trigger\r\n            let showPopper = vo.showPopper\r\n            let isolated = vo.isolated\r\n\r\n            //updateValue\r\n            if (!isolated) {\r\n                vo.updateValue(showPopper, 'changeShowPopper')\r\n            }\r\n\r\n            return ''\r\n        },\r\n\r\n        useHintBorderRadius: function() {\r\n            //console.log('computed useHintBorderRadius')\r\n\r\n            let vo = this\r\n\r\n            if (isNumber(vo.hintBorderRadius)) {\r\n                return `border-radius:${vo.hintBorderRadius}px;`\r\n            }\r\n            return ''\r\n        },\r\n\r\n        useHintBackgroundColor: function() {\r\n            //console.log('computed useHintBackgroundColor')\r\n\r\n            let vo = this\r\n\r\n            return convertColor(vo.hintBackgroundColor)\r\n        },\r\n\r\n        useHintShadow: function() {\r\n            //console.log('computed useHintShadow')\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.hintShadow) {\r\n                return ''\r\n            }\r\n\r\n            //hintShadowStyle\r\n            let s = replace(vo.hintShadowStyle, ';', '')\r\n            if (s !== '') {\r\n                return `box-shadow:${s};`\r\n            }\r\n\r\n            return ''\r\n        },\r\n\r\n    },\r\n    methods: {\r\n\r\n        relaValue: function() {\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            //避免使用waitFun, 因多組件value非同步更新, 會導致打字時或hint時連動觸發更新value問題\r\n            //第1次調用value為空字串, 第2次loading可能為true, 此處統一處理loading=false情形\r\n            if (vo.loading) {\r\n                return\r\n            }\r\n\r\n            //check, 避免多組件時使用hint會反覆觸發\r\n            if (vo.value === vo.valueTrans) {\r\n                return\r\n            }\r\n\r\n            //update valueTrans, 由組件外變更value觸發, 故須再另外儲存至valueTrans\r\n            vo.valueTrans = vo.value\r\n\r\n            //setValue\r\n            vo.contentEditor.setValue(vo.value)\r\n\r\n            // //emit, 由外部變更value觸發故不須emit\r\n            // vo.$emit('input', value)\r\n\r\n        },\r\n\r\n        relaEditable: function() {\r\n\r\n            let vo = this\r\n\r\n            async function core() {\r\n\r\n                //wait\r\n                await waitFun(() => {\r\n                    return !vo.loading\r\n                })\r\n\r\n                //editable\r\n                if (vo.editable) {\r\n                    vo.contentEditor.enable()\r\n                }\r\n                else {\r\n                    vo.contentEditor.disabled()\r\n                }\r\n\r\n            }\r\n\r\n            //core\r\n            core()\r\n                .catch((err) => {\r\n                    console.log(err)\r\n                })\r\n\r\n        },\r\n\r\n        funGetDivTrigger: function() {\r\n            let vo = this\r\n            let divTrigger = null\r\n            try {\r\n                // let eles = vo.$el.querySelectorAll('[class=\"vditor-hint\"]')\r\n                // divTrigger = eles[0]\r\n                divTrigger = vo.$el.querySelector('[class=\"vditor-hint\"]')\r\n            }\r\n            catch (err) {}\r\n            return divTrigger\r\n        },\r\n\r\n        funGetDivContent: function() {\r\n            let vo = this\r\n            let divContent = get(vo, '$refs.divContent', null)\r\n            return divContent\r\n        },\r\n\r\n        findAnchor: function() {\r\n            let vo = this\r\n\r\n            let pm = genPm()\r\n\r\n            let n = 0\r\n            let t = setInterval(() => {\r\n                n++\r\n\r\n                //funGetDivTrigger\r\n                let ele = vo.funGetDivTrigger()\r\n\r\n                //check\r\n                if (isEle(ele)) {\r\n                    clearInterval(t)\r\n                    pm.resolve(ele)\r\n                }\r\n\r\n                //check\r\n                if (n > 100) {\r\n                    clearInterval(t)\r\n                    pm.reject('can not find the ele')\r\n                }\r\n\r\n            }, 50)\r\n\r\n            return pm\r\n        },\r\n\r\n        getUseHint: function(divTrigger) {\r\n            // let vo = this\r\n\r\n            //tpht\r\n            let tpht = ''\r\n            try {\r\n                tpht = divTrigger.querySelector('div[name=\"tar\"]').getAttribute('tpht')\r\n            }\r\n            catch (err) {}\r\n\r\n            return tpht\r\n        },\r\n\r\n        detectAndShowHint: function(v) {\r\n            let vo = this\r\n\r\n            //check\r\n            if (!isearr(vo.keyHints)) {\r\n                return\r\n            }\r\n\r\n            //findAnchor\r\n            vo.findAnchor()\r\n                .then((divTrigger) => {\r\n                    // console.log('divTrigger', divTrigger)\r\n\r\n                    //check\r\n                    if (divTrigger.style.display === 'none') {\r\n                        return\r\n                    }\r\n                    // console.log('divTrigger', divTrigger)\r\n\r\n                    //完全透明\r\n                    // divTrigger.style.opacity = 0 //因顯示之後再偵測隱藏會有顯隱問題, 使用者體驗不佳, 改為使用css強制隱藏\r\n\r\n                    //顯示時取得與儲存useHint\r\n                    vo.useHint = vo.getUseHint(divTrigger)\r\n                    // console.log('divTrigger', divTrigger, 'useHint', vo.useHint)\r\n\r\n                    //evShow\r\n                    vo.evShow('click', 'call')\r\n\r\n                    //blur, 編輯器移除焦點, 避免使用者此時通過鍵盤刪除或再變更\r\n                    vo.contentEditor.blur()\r\n\r\n                })\r\n                .catch((err) => {\r\n                    console.log(err)\r\n                })\r\n\r\n        },\r\n\r\n        evShow: function(kind, from) {\r\n            let vo = this\r\n            let f = get(vo, 'bp.evShow')\r\n            if (isfun(f)) {\r\n                vo.bp.evShow(kind, from)\r\n            }\r\n        },\r\n\r\n        evHide: function(kind, from) {\r\n            let vo = this\r\n            let f = get(vo, 'bp.evHide')\r\n            if (isfun(f)) {\r\n                vo.bp.evHide(kind, from)\r\n            }\r\n        },\r\n\r\n        updatePopper: function(msg, from) {\r\n            let vo = this\r\n            let f = get(vo, 'bp.updatePopper')\r\n            if (isfun(f)) {\r\n                vo.bp.updatePopper(msg, from)\r\n            }\r\n        },\r\n\r\n        updateValue: function(value, from) {\r\n            let vo = this\r\n            let f = get(vo, 'bp.updateValue')\r\n            if (isfun(f)) {\r\n                vo.bp.updateValue(value, from)\r\n            }\r\n        },\r\n\r\n        insertValue: function(v, from) {\r\n            let vo = this\r\n            let f = get(vo, 'contentEditor.insertValue')\r\n            if (isfun(f)) {\r\n\r\n                //insertValue\r\n                vo.contentEditor.insertValue(v)\r\n\r\n                //取得當前value\r\n                let value = vo.contentEditor.getValue()\r\n\r\n                //取代hint符號\r\n                // console.log('value(ori)', value)\r\n                each(vo.keyHints, (keyHint) => {\r\n                    value = value.replaceAll(`/ ${keyHint}`, '')\r\n                })\r\n                // console.log('value(replace)', value)\r\n\r\n                //update valueTrans, 由組件內insertValue觸發, 故直接更新valueTrans, 避免emit出去再進來更新\r\n                vo.valueTrans = vo.value\r\n\r\n                //setValue\r\n                vo.contentEditor.setValue(value)\r\n\r\n                //emit\r\n                vo.$emit('input', value)\r\n\r\n            }\r\n        },\r\n\r\n    },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.WPopperFix[data-popper-reference-hidden] {\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n}\r\n.WVditorFix >>> .vditor-reset {\r\n    font-size: inherit;\r\n}\r\n.WVditorFix >>> div.vditor-hint:has(div[name=\"tar\"]) { /* 使觸發區divTrigger(原本彈窗)完全透明 */\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n    outline: none;\r\n}\r\n</style>\r\n\r\n"]},media:void 0})}),OS,"data-v-1b13d5b5",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WVditorDyn:{content:"abc中文123\n[google](//www.google.com/)",items1:["foo","bar","fizz","buzz"],items2:["class","attr","prop","type"]},actions:[]}}};var JS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"default"}}),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"height"}}),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{height:400},model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"fontSize"}}),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px","font-size":"0.85rem"},model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"fullwidth"}}),n._v(" "),t("w-vditor-dyn",{staticStyle:{"font-size":"0.85rem"},model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"slot & keyHint(string)"}}),n._v(" "),t("div",{staticStyle:{color:"#f26","font-size":"0.8rem"}},[n._v("* type [/ ht] to show popup")]),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{keyHint:"ht"},scopedSlots:n._u([{key:"content",fn:function(e){return[t("div",{staticStyle:{padding:"4px 0px"}},n._l(n.WVditorDyn.items1,(function(o,r){return t("div",{key:r,staticClass:"cpitem cpitem-white",on:{click:function(n){e.funInsert(o),e.funHide()}}},[n._v("\n                            Item "+n._s(o)+"\n                        ")])})),0)]}}]),model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"slot & keyHint(string) & hintBorderRadius"}}),n._v(" "),t("div",{staticStyle:{color:"#f26","font-size":"0.8rem"}},[n._v("* type [/ ht] to show popup")]),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{keyHint:"ht",hintBorderRadius:0},scopedSlots:n._u([{key:"content",fn:function(e){return[t("div",{staticStyle:{padding:"4px 0px"}},n._l(n.WVditorDyn.items1,(function(o,r){return t("div",{key:r,staticClass:"cpitem cpitem-white",on:{click:function(n){e.funInsert(o),e.funHide()}}},[n._v("\n                            Item "+n._s(o)+"\n                        ")])})),0)]}}]),model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"slot & keyHint(string) & hintBackgroundColor"}}),n._v(" "),t("div",{staticStyle:{color:"#f26","font-size":"0.8rem"}},[n._v("* type [/ ht] to show popup")]),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{keyHint:"ht",hintBackgroundColor:"#333"},scopedSlots:n._u([{key:"content",fn:function(e){return[t("div",{staticStyle:{padding:"4px 0px"}},n._l(n.WVditorDyn.items1,(function(o,r){return t("div",{key:r,staticClass:"cpitem cpitem-black",staticStyle:{color:"#fff"},on:{click:function(n){e.funInsert(o),e.funHide()}}},[n._v("\n                            Item "+n._s(o)+"\n                        ")])})),0)]}}]),model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"slot & keyHint(array)"}}),n._v(" "),t("div",{staticStyle:{color:"#f26","font-size":"0.8rem"}},[n._v("* type [/ ht] or [/ kw] to show popup")]),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{keyHint:["ht","kw"]},scopedSlots:n._u([{key:"content",fn:function(e){return[t("div",{staticStyle:{padding:"4px 0px"}},["ht"===e.hint?n._l(n.WVditorDyn.items1,(function(o,r){return t("div",{key:r,staticClass:"cpitem cpitem-white",on:{click:function(n){e.funInsert(o),e.funHide()}}},[n._v("\n                                Item "+n._s(o)+"\n                            ")])})):n._e(),n._v(" "),"kw"===e.hint?n._l(n.WVditorDyn.items2,(function(o,r){return t("div",{key:r,staticClass:"cpitem cpitem-white",on:{click:function(n){e.funInsert(o),e.funHide()}}},[n._v("\n                                Item "+n._s(o)+"\n                            ")])})):n._e()],2)]}}]),model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"not editable"}}),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{editable:!1},model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1)])])};JS._withStripped=!0;const US=wa({render:JS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-vditor-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/Vanessa219/vditor",target:"_blank",rel:"noreferrer noopener"}},[n._v("vditor")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//b3log.org/vditor/",target:"_blank",rel:"noreferrer noopener"}},[n._v("vditor examples")])])}]},(function(n){n&&n("data-v-21a0c6d4_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWVditorDyn.vue"},media:void 0})}),YS,"data-v-21a0c6d4",false,undefined,!1,_a,void 0,void 0);const QS={components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.51/dist/w-leaflet-vue.umd.js"]},opt:{type:Object,default:()=>{}}},data:function(){return{cmpName:"WIconLoading"}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{if("loaded"!==e){let n=window["w-leaflet-vue"];n.default&&(n=n.default),dC().component("w-leaflet-vue",n)}n.cmpName="w-leaflet-vue"}))},computed:{},methods:{}};var qS=function(){var n=this,e=n.$createElement;return(n._self._c||e)(n.cmpName,{ref:"$self",tag:"component",attrs:{opt:n.opt}})};qS._withStripped=!0;var nw={components:{demolink:iu,WLeafletVueDyn:wa({render:qS,staticRenderFns:[]},(function(n){n&&n("data-v-466291e1_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WLeafletVueDyn.vue"},media:void 0})}),QS,"data-v-466291e1",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){let n=window.dataRain,e=[];for(let t=0;t<n.length;t++){let o=n[t];e.push([o.latLng[0],o.latLng[1],o.rain])}return{WLeafletVueDyn:{pointSets:{pointSets:[{title:"pointSet A",msg:"msg from pointSet A",points:[{title:"point A-1",msg:"msg from data A-1",latLng:[24.2,121.27]},{title:"point A-2",msg:"msg from data A-2",latLng:[23.9,120.97]}],visible:!0},{title:"pointSet B",msg:"msg from pointSet B",points:[{title:"point B-1",msg:"msg from data B-1",latLng:[23.3,120.57]},{title:"point B-2",msg:"msg from data B-2",latLng:[23,120.87]}],visible:!1}]},polygonSets:{center:[25,121.58],zoom:10,polygonSets:[{title:"polygonSet A",msg:"msg from polygonSet A",latLngs:[[[24.96,121.41],[25.11,121.47],[25.06,121.69],[24.99,121.61],[24.95,121.53]],[[24.98,121.45],[25.07,121.49],[25.06,121.54],[25,121.5]],[[25.017,121.48],[25.032,121.49],[25.036,121.5],[25.02,121.502]],[[24.99,121.54],[25.056,121.56],[25.05,121.61],[25,121.59]],[[24.92,121.6],[25.045,121.75],[24.99,121.79],[24.93,121.74]],[[24.961,121.523],[24.979,121.551],[24.95,121.674],[24.887,121.606]]],visible:!0},{title:"polygonSet B",msg:"msg from polygonSet B",latLngs:[[[24.971,121.372],[24.976,121.434],[24.937,121.473],[24.918,121.418]],[[24.9,121.14],[24.97,121.09],[25.05,121.177],[24.95,121.32]]],visible:!1}]},contourSets:{center:[24.084,121.068],zoom:8,contourSets:[{title:"contourSet A",msg:"msg from contourSet A",points:[[24.325,120.786,0],[23.944,120.968,10],[24.884,121.234,20],[24.579,121.345,80],[24.664,121.761,40],[23.803,121.397,30],[23.727,120.772,0],[23.539,120.975,0],[23.612,121.434,0],[23.193,120.355,22],[23.456,120.89,42],[23.28,120.551,25],[23.162,121.247,5]],visible:!0},{title:"contourSet B",msg:"msg from contourSet B",points:[[22.607,120.416,0],[22.967,120.663,15],[22.592,120.922,20],[22.717,120.644,45]],visible:!1}]},largeSet:{center:[24.084,121.068],zoom:8,contourSets:[{title:"Rain contour",msg:"data from CWB",points:e,polygonClipOuter:window.dataRainClip,gradient:{0:"rgba(255, 255, 255, 0)",.2:"rgb(254, 178, 76)",.4:"rgb(252, 78, 42)",.6:"rgb(220, 58, 38)",.8:"rgb(200, 40, 23)",1:"rgb(180, 30, 60)"},visible:!0,order:0}],pointSets:[{title:"Rain point",msg:"data from CWB",points:n,visible:!1,order:1,tooltip:function(n){console.log("tooltip v",n);let e="";return e+='<div style="padding:5px 10px;">',e+='<div style="width:150px; color:#222; margin-bottom:5px; white-space:nowrap;"><span style="font-size:0.9rem; color:#f26;">['+n.point.title+']</span> <span style="font-size:0.8rem; ">'+n.point.msg+"</span></div>",e+='<div style="font-size:0.7rem; color:#666; white-space:normal;">降雨量 '+n.point.rain+" cm</div>",e+="</div>",e}}]}},actions:[]}}};const ew=nw;var tw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-leaflet-vue-dyn",casename:"pointSets"}}),n._v(" "),t("w-leaflet-vue-dyn",{staticStyle:{width:"100%",height:"600px"},attrs:{opt:n.WLeafletVueDyn.pointSets}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-leaflet-vue-dyn",casename:"polygonSets"}}),n._v(" "),t("w-leaflet-vue-dyn",{staticStyle:{width:"100%",height:"600px"},attrs:{opt:n.WLeafletVueDyn.polygonSets}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-leaflet-vue-dyn",casename:"contourSets"}}),n._v(" "),t("w-leaflet-vue-dyn",{staticStyle:{width:"100%",height:"600px"},attrs:{opt:n.WLeafletVueDyn.contourSets}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-leaflet-vue-dyn",casename:"contourSet for rain data"}}),n._v(" "),t("w-leaflet-vue-dyn",{staticStyle:{width:"100%",height:"600px"},attrs:{opt:n.WLeafletVueDyn.largeSet}})],1)])])};tw._withStripped=!0;const ow=wa({render:tw,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-leaflet-vue-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//leafletjs.com/",target:"_blank",rel:"noreferrer noopener"}},[n._v("leaflet")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//leafletjs.com/examples.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("leaflet examples")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//vue2-leaflet.netlify.app/",target:"_blank",rel:"noreferrer noopener"}},[n._v("Vue2Leaflet")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/yuda-lyu/w-leaflet-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-leaflet-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//yuda-lyu.github.io/w-leaflet-vue/examples/app.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-leaflet-vue examples")])])}]},(function(n){n&&n("data-v-ebd00252_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWLeafletVueDyn.vue"},media:void 0})}),ew,"data-v-ebd00252",false,undefined,!1,_a,void 0,void 0);function rw(n,e){return Ao(n)&&os(e)?0===(e=ji(e))?n:rs(n,n.length-e):""}function iw(n){let e=0,t=0,o=0,r=Oo(n);Ve(n,(n=>{Ti(n)?e+=1:To(n)?t+=1:Qo(n)&&(o+=1)}));let i="";return e===r?i="num":t===r?i="str":o===r?i="obj":e+t===r?i="str":console.log("eles in array are non-homogeneous",n),i}function aw(n,e){let t=[];if("num"!==e&&"str"!==e&&"files"!==e)throw new Error(`invalid type[${e}]`);if("num"===e)t=Io(n,((n,e)=>({key:e,payload:n,value:Ai(n)})));else if("files"===e)t=Io(n,((n,e)=>({key:e,payload:n,value:ls(n)})));else if("str"===e){let e=Io(n,(n=>function(n){let e=fn(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},"excludeString");if(va(e)||(e=!1),!Ao(n))return"";let t=n=>n>="0"&&n<="9"||"."===n||"-"===n||"+"===n,o=Fl(n);if(e){let n=o.split("");for(let e=0;e<n.length;e++)if(t(n[e])){o=as(o,e),n=dv(n,e);break}n=gx(n);for(let e=0;e<n.length;e++)if(t(n[e])){o=rw(o,e);break}}return o}(n,{excludeString:!0}))),o=0;Ve(e,(n=>{Ti(n)&&o++}));let r=o===Oo(e);t=Io(n,((n,t)=>{let o=n;return r?(o=e[t],o=Ai(o)):o=ls(o),{key:t,payload:n,value:o}}))}return t}function lw(n,e){let t=es(n,"value");return Io(t,e?"key":"payload")}function sw(n,e){let t=function(n,e){let t=pi(n);return t.sort(((n,t)=>n[e].localeCompare(t[e],"standard",{numeric:!0}))),t}(n,"value");return Io(t,e?"key":"payload")}function cw(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,o)}return t}function dw(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?cw(Object(t),!0).forEach((function(e){er(n,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):cw(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function uw(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!Ca(n))return{};let t=fn(e,"delimiter");Ao(t)||(t="❯");let o=fn(e,"bindRoot");Ao(o)||(o="root");let r=fn(e,"soryItems"),i=Io(n,((n,e)=>{"folder"!==n.type&&"file"!==n.type&&(n.type="file");let o=(n=>{let e=Zl(n=(n=n.replace(/\\\\/g,"\\")).replace(/\\/g,"/"),"/");return{ss:e,cfp:zl(e,t)}})(n.path);return{ind:e,type:n.type,ss:o.ss,data:pi(n)}})),a=n=>{let e=Oo(n),o=[];for(let r=0;r<e;r++){let e=[];for(let t=0;t<=r;t++)e.push(n[t]);let i=zl(e,t);o.push({id:i,name:n[r]})}return o},l=-1,s=[],c={};Ve(i,(n=>{let e=[o],r=o,i=Oo(n.ss)-1;Ve(n.ss,((o,d)=>{let u=d<i||"folder"===n.type;e.push(o);let p=null,m=null;d===i&&(p=n.ind,m=n.data);let v=zl(e,t),g=a(e);if(ss(c,v)){let e=c[v],t="folder"===fn(e,"_type","");if(!t&&u)throw console.log("kpLv[id]",e),console.log("v",n),new Error(`id[${v}] is unrecognized from a file to folder`);if(!t&&!u)throw console.log("kpLv[id]",e),console.log("v",n),new Error(`id[${v}] get repeat data from two files`);if(t&&!u)throw console.log("kpLv[id]",e),console.log("v",n),new Error(`id[${v}] is unrecognized from a folder to file`);if(na(c[v].data)&&na(m))throw console.log("kpLv[id]",e),console.log("v",n),new Error(`id[${v}] get repeat data from two folders`);if(null===c[v].data&&na(m)){c[v]._indOri=p,c[v].data=m;let n=c[v]._indNormalize,e=s[n];s[n]=dw(dw({},m),{},{type:e.type,path:e.path})}}else{l++;let n=l,t=null;t=u?{_indOri:p,_indNormalize:n,ns:Oo(e),ts:pi(e),pathInfors:g,_type:"folder",type:"array",numOfChilren:-1,id:v,parentId:r,text:o,children:[],data:m}:{_indOri:p,_indNormalize:n,ns:Oo(e),ts:pi(e),pathInfors:g,_type:"file",type:"node",numOfChilren:-1,id:v,parentId:r,text:o,data:m},c[v]=t,s.push(dw(dw({},fn(c[v],"data",{})),{},{type:c[v]._type,path:"/"+zl(e,"/")}))}r=v}))}));let d=Hp(c);if(d=es(d,"id"),d=es(d,"ns"),Zi(r)){let n=[];Ve(Dk(d,"ns"),((e,t)=>{Ve(Dk(e,"parentId"),((e,o)=>{let i=r(e,o,t);n=[...n,...i]}))})),d=n}let u=[],p=[];Ve(d,(n=>{"folder"===n._type?u.push(n):p.push(n)}));let m=Dk(u,"ns"),v=Dk(p,"ns"),g=kv(Io(u,"ns")),h=kv(Io(p,"ns")),f=null;{let n=[o];f=[{_indOri:null,_indNormalize:null,ns:Oo(n),ts:pi(n),pathInfors:a(n),_type:"folder",type:"array",numOfChilren:-1,id:o,parentId:"",text:o,children:[],data:null}]}let b={};b[o]="0.children";let y={};y[o]="0";for(let n=2;n<=g;n++){Ve(m[n],(n=>{let e=fn(b,n.parentId,"");if(!Ao(e))throw console.log("kpPathFd",b),console.log("v",n,n.parentId),new Error(`invalid parentId[${n.parentId}] in folder`);let t=fn(f,e);if(ya(t)||sx(f,e,[]),t=fn(f,e),!na(mx(t,{id:n.id}))){t.push(dw(dw({},n),{},{children:[]}));let o=`${e}.${Oo(t)-1}`;b[n.id]=`${o}.children`,y[n.id]=o}}))}let k=pi(f),x={};for(let n=2;n<=h;n++){Ve(v[n],(n=>{let e=fn(b,n.parentId,"");if(!Ao(e))throw console.log("kpPathFd",b),console.log("v",n,n.parentId),new Error(`invalid parentId[${n.parentId}] in file`);let t=fn(f,e);if(!ya(t))throw console.log("treeItems",f),console.log("k",e),console.log("v",n),new Error("無預先建置資料夾");if(!na(mx(t,{id:n.id}))){t.push(n);let o=`${e}.${Oo(t)-1}`;x[n.id]=o,y[n.id]=o}}))}return{treeItems:f,treeItemsFolder:k,kpPath:y,fpsNormalize:s}}var pw={directives:{domresize:Mi()},components:{WIcon:Ha,WTree:Kx,WListVertical:Qv,WDrawer:ag,WButtonChip:Iu,WButtonCircle:tu},props:{items:{type:Array,default:()=>[]},bindRoot:{type:String,default:"root"},funSortTree:{type:Function,default:null},showTree:{type:Boolean,default:!0},defaultShowTreeFirst:{type:Boolean,default:!0},treeWidth:{type:Number,default:250},treeWidthMin:{type:Number,default:null},treeWidthMax:{type:Number,default:null},treeAfloat:{type:Boolean,default:!1},treeDefItemHeight:{type:Number,default:30},treeDefaultDisplayLevel:{type:Number,default:null},treePaddingStyle:{type:Object,default:()=>({v:0,h:0})},treeIndent:{type:Number,default:.7},treeItemTextFontSize:{type:String,default:"0.85rem"},treeItemTextColor:{type:String,default:"#444"},treeItemTextColorHover:{type:String,default:"#222"},treeItemTextColorActive:{type:String,default:"#000"},treeFolderIcon:{type:String,default:vl},treeFolderIconSize:{type:Number,default:20},treeFolderIconColor:{type:String,default:"#888"},treeFolderIconColorHover:{type:String,default:"#777"},treeFolderIconColorActive:{type:String,default:"#666"},treeItemBackgroundColor:{type:String,default:"transparent"},treeItemBackgroundColorHover:{type:String,default:"rgba(200,200,200,0.2)"},treeItemBackgroundColorActive:{type:String,default:"rgba(100,100,100,0.2)"},treeItemRippleColor:{type:String,default:"rgba(200,200,200,0.4)"},treeBackgroundColor:{type:String,default:"#fff"},treeDrawerBarSize:{type:Number,default:2},treeDrawerBarColor:{type:String,default:"#ddd"},treeToggleIconSize:{type:Number,default:24},treeToggleIconColor:{type:String,default:"grey"},treeToggleIconDisabledColor:{type:String,default:"grey lighten-1"},treeToggleIconBackgroundColor:{type:String,default:"transparent"},treeToggleIconBackgroundColorHover:{type:String,default:"rgba(128,128,128,0.15)"},lineBetweenPathAndListWidth:{type:Number,default:1},lineBetweenPathAndListColor:{type:String,default:"#ddd"},listDefItemHeight:{type:Number,default:30},listPaddingStyle:{type:Object,default:()=>({v:0,h:6})},listItemTextFontSize:{type:String,default:"0.85rem"},listItemTextColor:{type:String,default:"#444"},listItemTextColorHover:{type:String,default:"#222"},listItemTextColorActive:{type:String,default:"#000"},listFolderIcon:{type:String,default:vl},listFileIcon:{type:String,default:"M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"},listItemIconSize:{type:Number,default:22},listItemIconColor:{type:String,default:"#888"},listItemIconColorHover:{type:String,default:"#777"},listItemIconColorActive:{type:String,default:"#666"},listItemBackgroundColor:{type:String,default:"transparent"},listItemBackgroundColorHover:{type:String,default:"rgba(200,200,200,0.2)"},listItemBackgroundColorActive:{type:String,default:"rgba(100,100,100,0.2)"},listItemRippleColor:{type:String,default:"rgba(255,255,255,0.4)"},listBackgroundColor:{type:String,default:"#fff"},btnDisplayTreeIconShow:{type:String,default:"M17,12L12,17V14H8V10H12V7L17,12M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z"},btnDisplayTreeIconHide:{type:String,default:"M7,12L12,7V10H16V14H12V17L7,12M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z"},btnDisplayTreeIconSize:{type:Number,default:20},btnDisplayTreeIconColor:{type:String,default:"grey darken-1"},btnDisplayTreeIconColorHover:{type:String,default:"grey darken-2"},btnDisplayTreeIconColorFocus:{type:String,default:"grey darken-3"},btnDisplayTreeBackgroundColor:{type:String,default:"transparent"},btnDisplayTreeBackgroundColorHover:{type:String,default:"rgba(200,200,200,0.3)"},btnDisplayTreeBackgroundColorFocus:{type:String,default:"rgba(180,180,180,0.3)"},pathBtnTextColor:{type:String,default:"#444"},pathBtnTextColorHover:{type:String,default:"#222"},pathBtnTextFontSize:{type:String,default:"0.85rem"},pathBtnBackgroundColor:{type:String,default:"transparent"},pathBtnBackgroundColorHover:{type:String,default:"rgb(236,236,236)"},pathSepIcon:{type:String,default:tl},pathSepIconColor:{type:String,default:"#888"},pathSepIconSize:{type:Number,default:18},pathBackgroundColor:{type:String,default:"#fff"},noSelectedText:{type:String,default:"No selected folder"},draggable:{type:Boolean,default:!1},dgTextDisabled:{type:String,default:"Can not drop here"},dgTextDisabledColor:{type:String,default:"#812"},dgTextDisabledPaddingLeft:{type:Number,default:15},dgTextDisabledFontSize:{type:String,default:"0.9rem"},dgTextDisabledBackgroundColor:{type:String,default:"rgba(255,220,240,0.6)"},dgInsertLineColor:{type:String,default:"#29f"},dgInsertBackgroundColor:{type:String,default:"rgba(80,150,255,0.15)"},dgBelongBackgroundColor:{type:String,default:"rgba(80,150,255,0.3)"},dgPreviewOpacity:{type:Number,default:1},dgPreviewDisabledOpacity:{type:Number,default:1},dgPreviewBorderWidth:{type:Number,default:0},dgPreviewBorderColor:{type:String,default:"#f26"},dgPreviewBackground:{type:String,default:"transparent"},operatable:{type:Boolean,default:!1},operateItemTextForRename:{type:String,default:"Rename"},operateItemTextForInsertChild:{type:String,default:"Create sub folder"},operateItemTextForDelete:{type:String,default:"Delete folder"},operateItemIconForRename:{type:String,default:wl},operateItemIconForInsertChild:{type:String,default:"M13 19C13 19.34 13.04 19.67 13.09 20H4C2.9 20 2 19.11 2 18V6C2 4.89 2.89 4 4 4H10L12 6H20C21.1 6 22 6.89 22 8V13.81C21.39 13.46 20.72 13.22 20 13.09V8H4V18H13.09C13.04 18.33 13 18.66 13 19M20 18V15H18V18H15V20H18V23H20V20H23V18H20Z"},operateItemIconForDelete:{type:String,default:"M13 19C13 19.34 13.04 19.67 13.09 20H4C2.9 20 2 19.11 2 18V6C2 4.89 2.89 4 4 4H10L12 6H20C21.1 6 22 6.89 22 8V13.81C21.39 13.46 20.72 13.22 20 13.09V8H4V18H13.09C13.04 18.33 13 18.66 13 19M22.54 16.88L21.12 15.47L19 17.59L16.88 15.47L15.47 16.88L17.59 19L15.47 21.12L16.88 22.54L19 20.41L21.12 22.54L22.54 21.12L20.41 19L22.54 16.88Z"},operateItemPaddingStyle:{type:Object,default:()=>({v:10,h:12})},operatePanelWidth:{type:Number,default:170},operatePanelHeight:{type:Number,default:null},operateBtnTooltip:{type:String,default:"Operations"},operateBtnBackgroundColor:{type:String,default:"transparent"},operateBtnBackgroundColorHover:{type:String,default:"rgba(230,230,230,0.7)"},operateBtnBackgroundColorFocus:{type:String,default:"rgba(230,230,230,0.9)"},operateItemBackgroundColor:{type:String,default:"transparent"},operateItemBackgroundColorHover:{type:String,default:"rgba(200,200,200,0.2)"},operateItemHeight:{type:Number,default:42},operateItemTextColor:{type:String,default:"#444"},operateItemTextColorHover:{type:String,default:"#222"},operateItemIconSize:{type:Number,default:22},operateItemIconColor:{type:String,default:"#444"},operateItemIconColorHover:{type:String,default:"#222"},editorRenameContentBackgroundColor:{type:String,default:"white"},editorRenameFooterBackgroundColor:{type:String,default:"grey lighten-5"},editorRenameInputTextColor:{type:String,default:"grey darken-3"},editorRenameInputTextBottomLineBorderColor:{type:String,default:"grey lighten-1"},editorRenameInputTextBottomLineBorderColorHover:{type:String,default:"grey"},editorRenameInputTextBottomLineBorderColorFocus:{type:String,default:"blue darken-1"},editorRenameCancelBtnText:{type:String,default:"Cancel"},editorRenameCancelBtnTextColor:{type:String,default:"grey darken-3"},editorRenameCancelBtnTextColorHover:{type:String,default:"grey darken-2"},editorRenameCancelBtnIcon:{type:String,default:ll},editorRenameCancelBtnIconSize:{type:Number,default:22},editorRenameCancelBtnIconColor:{type:String,default:"grey darken-1"},editorRenameCancelBtnIconColorHover:{type:String,default:"grey darken-2"},editorRenameCancelBtnIconRippleColor:{type:String,default:"rgba(200,200,200,0.4)"},editorRenameCancelBtnBackgroundColor:{type:String,default:"white"},editorRenameCancelBtnBackgroundColorHover:{type:String,default:"grey lighten-3"},editorRenameSaveBtnText:{type:String,default:"Save"},editorRenameSaveBtnTextColor:{type:String,default:"grey darken-3"},editorRenameSaveBtnTextColorHover:{type:String,default:"grey darken-2"},editorRenameSaveBtnIcon:{type:String,default:sl},editorRenameSaveBtnIconSize:{type:Number,default:22},editorRenameSaveBtnIconColor:{type:String,default:"grey darken-1"},editorRenameSaveBtnIconColorHover:{type:String,default:"grey darken-2"},editorRenameSaveBtnIconRippleColor:{type:String,default:"rgba(200,200,200,0.4)"},editorRenameSaveBtnBackgroundColor:{type:String,default:"white"},editorRenameSaveBtnBackgroundColorHover:{type:String,default:"grey lighten-3"}},data:function(){return{panelWidth:0,panelHeight:0,pathHeight:0,showTreeTrans:!0,treeWidthTrans:200,itemsTrans:[],kpPath:null,treeItemsFolder:null,treeItems:null,treeItemActive:null,pathInfors:[],listItems:[],listItemActive:null}},computed:{changeShowTree:function(){return this.showTreeTrans=this.showTree,""},changeTreeWidth:function(){return this.treeWidthTrans=this.treeWidth,""},changeItems:function(){return this.convertItems(this.items),""},useTreeItemHeightMin:function(){return Math.max(this.treeToggleIconSize,this.treeDefItemHeight)},effTreeBackgroundColor:function(){return Qi(this.treeBackgroundColor)},effListBackgroundColor:function(){return Qi(this.listBackgroundColor)},effPathBackgroundColor:function(){return Qi(this.pathBackgroundColor)},effLineBetweenPathAndListColor:function(){return Qi(this.lineBetweenPathAndListColor)},effTreeFolderIconColor:function(){return Qi(this.treeFolderIconColor)},effTreeFolderIconColorHover:function(){return Qi(this.treeFolderIconColorHover)},effTreeFolderIconColorActive:function(){return Qi(this.treeFolderIconColorActive)},useTreeItemTextFontSize:function(){let n=this.treeItemTextFontSize;return n=qi(n,";",""),`font-size:${n};`},useListItemTextFontSize:function(){let n=this.listItemTextFontSize;return n=qi(n,";",""),`font-size:${n};`},effListItemIconColor:function(){return Qi(this.listItemIconColor)},effListItemIconColorHover:function(){return Qi(this.listItemIconColorHover)},effListItemIconColorActive:function(){return Qi(this.listItemIconColorActive)},usePathBtnTextFontSize:function(){let n=this.pathBtnTextFontSize;return n=qi(n,";",""),`font-size:${n};`},effPathBtnTextColor:function(){return Qi(this.pathBtnTextColor)},listHeight:function(){return this.panelHeight-this.pathHeight},btnDisplayTreeInDrawerHeightMin:function(){let n=ba(this.treePaddingStyle,{returnObj:!0}),e=n.top,t=n.bottom;return this.treeDefItemHeight+e+t}},methods:{resizePanel:function(n){this.panelWidth=n.snew.offsetWidth,this.panelHeight=n.snew.offsetHeight},resizePath:function(n){this.pathHeight=n.snew.offsetHeight},soryItems:function(n,e,t){let o=this;return n=function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!Ca(n))return[];if(1===Oo(n))return n;let t=fn(e,"localeCompare");va(t)||(t=!1);let o=fn(e,"returnIndex");va(o)||(o=!1);let r=fn(e,"compareKey",null),i=null;i=t?sw:lw;let a,l=iw(n);if(""===l)return[];if("obj"===l){if(!Ao(r))return[];let e=Io(n,((n,e)=>fn(n,r,""))),l=iw(e);if("num"!==l&&"str"!==l)return[];{t&&(l="files");let r=i(aw(e,l),!0);a=o?r:Io(r,(e=>n[e]))}}else"num"!==l&&"str"!==l||(t&&(l="files"),a=i(aw(n,l),o));return a}(n,{compareKey:"text",localeCompare:!0}),Zi(o.funSortTree)&&(n=o.funSortTree(n)),n},showTreeFirstFolder:function(){let n=this.bindRoot;this.triggerClickTreeFolderById(n)},convertItems:function(){let n=this;(async function(){let e=uw(n.items,{bindRoot:n.bindRoot,soryItems:n.soryItems});n.itemsTrans=e.fpsNormalize,n.treeItemsFolder=e.treeItemsFolder,n.treeItems=e.treeItems,n.kpPath=e.kpPath,n.defaultShowTreeFirst&&n.showTreeFirstFolder()})().catch((n=>{console.log(n)}))},emitShowTreeDelay:function(n){let e=this;setTimeout((()=>{e.emitShowTree(n)}),1)},emitShowTree:function(n){this.showTreeTrans=n,this.$emit("update:showTree",n)},emitDrawerWidth:function(n){this.treeWidthTrans=n,this.$emit("update:treeWidth",n)},getTreeFolderIconColor:function(n){let e=this,t=fn(n,"isHover");va(t)||(t=!1);let o=fn(n,"isActive");return va(o)||(o=!1),o?e.effTreeFolderIconColorActive:t?e.effTreeFolderIconColorHover:e.effTreeFolderIconColor},getListItemIconColor:function(n){let e=this,t=fn(n,"isHover");va(t)||(t=!1);let o=fn(n,"isActive");return va(o)||(o=!1),o?e.effListItemIconColorActive:t?e.effListItemIconColorHover:e.effListItemIconColor},listFolder:function(n){let e=this,t=Io(n,(n=>{let t="",o="";return"folder"===n._type?(t=n.text,o=e.listFolderIcon):(t=n.text,o=e.listFileIcon),{text:t,icon:o,data:n}}));e.listItems=t},displayFolderById:function(n,e){let t=this,o=t.kpPath[n],r=fn(t.treeItems,o),i=`${o}.children`,a=fn(t.treeItems,i);t.listFolder(a);let l=fn(r,"pathInfors",[]);t.pathInfors=l},ckTreeFolder:function(n){let e=this,t=fn(n,"data",null),o=fn(n,"data.id","");e.displayFolderById(o,"ckTreeFolder"),e.$emit("click-folder",{from:"tree",item:t}),e.$emit("click",{type:"folder",from:"tree",item:t}),e.$nextTick((()=>{e.listItemActive=null}))},ckListItem:function(n){let e=this,t=fn(n,"item.data",null),o=fn(n,"item.data.id","");"folder"===fn(n,"item.data._type","")?(e.displayFolderById(o,"ckListItem"),e.$emit("click-folder",{from:"list",item:t}),e.$emit("click",{type:"folder",from:"list",item:t}),setTimeout((()=>{e.treeItemActive=null,e.listItemActive=null}),300)):(e.$emit("click-file",{from:"list",item:t}),e.$emit("click",{type:"file",from:"list",item:t}))},ckPathFolder:function(n){let e=this,t=fn(n,"id","");e.displayFolderById(t,"ckPathFolder"),e.$emit("click-folder",{from:"path",item:n}),e.$emit("click",{type:"folder",from:"path",item:n}),e.$nextTick((()=>{e.treeItemActive=null,e.listItemActive=null}))},toggleTreeFoldersByFun:function(n){return this.$refs.wt.toggleItemsByFun(n)},toggleTreeFoldersAll:function(n,e){return this.$refs.wt.toggleItemsAll(n,e)},triggerClickTreeFolderById:function(n){let e={data:{id:n}};this.ckTreeFolder(e),this.treeItemActive={id:n}},triggerClickTreeFolderByFun:async function(n){let e=this;if(!Zi(n))return;let t=[];Ve(e.kpPath,(n=>{let o=fn(e.treeItems,n,"");t.push(o)}));let o=n({treeItemsFolder:e.treeItemsFolder,treeItems:e.treeItems,kpPath:e.kpPath,treeItemsSpread:t});Xu(o)&&(o=await o);let r=fn(o,"id");Ao(r)?e.triggerClickTreeFolderById(r):console.log("invalid id",r)},useFunOperateItem:function(n){let e=["Rename","InsertChild","Delete"];return fn(n,"item.id","")===this.bindRoot&&(e=["InsertChild"]),e},changeData:function(n){},changeItem:function(n){let e=this,t=n=>{let e=Oo(n)-1;if(e<1)throw new Error(`n1${e} < 1`);let t=e-1;if(t<0)throw new Error(`n2${t} < 0`);let o=fn(n,e,{}),r=fn(o,"text","");if(!Ao(r))throw new Error("node.text is not a string");let i=fn(n,t,{}),a="/"+zl([...fn(i,"ts",[]),r],"/");return{...o,type:"folder",path:a}},o=[];if("add"===n.mode){if("belongto"!==n.kind)throw console.log(n),new Error(`kind[${n.kind}] is not supported`);let r=t(n.pathInforsNew);o=pi(e.itemsTrans),o.push(r)}else if("delete"===n.mode){let r=t(n.pathInforsOri),i=Oo(r.path),a=pi(e.itemsTrans);o=[],Ve(a,(n=>{rs(n.path,i)!==r.path&&o.push(n)}))}else if("move"===n.mode||"rename"===n.mode){let t=n.pathInforsOri,r=n.pathInforsNew,i="/"+zl(Io(t,"text"),"/"),a=Oo(i),l="/"+zl(Io(r,"text"),"/");o=pi(e.itemsTrans),o=Io(o,(n=>{if(rs(n.path,a)===i){let e=as(n.path,a);n.path=l+e}return n}))}o=(n=>{let t=Oo(e.bindRoot)+1;return n=Io(n,(n=>(n.path=as(n.path,t),n)))})(o),e.$emit("update:items",o),e.$emit("change-item",n)},clickOperateItem:function(n){this.$emit("click-operate-item",n)}}};const mw=pw;var vw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],attrs:{changeShowTree:n.changeShowTree,changeTreeWidth:n.changeTreeWidth,changeItems:n.changeItems},on:{domresize:n.resizePanel}},[t("WDrawer",{style:"width:"+n.panelWidth+"px; height:"+n.panelHeight+"px;",attrs:{afloat:n.treeAfloat,drawerWidth:n.treeWidthTrans,drawerWidthMin:n.treeWidthMin,drawerWidthMax:n.treeWidthMax,dragDrawerWidth:!0,drawerBarColor:n.treeDrawerBarColor,drawerBarSize:n.treeDrawerBarSize,value:n.showTreeTrans},on:{input:n.emitShowTree,"update:drawerWidth":n.emitDrawerWidth},scopedSlots:n._u([{key:"drawer",fn:function(e){return[t("div",{style:"position:relative; height:100%; background:"+n.effTreeBackgroundColor+";"},[t("WTree",{ref:"wt",style:"width:"+e.width+"px; min-width:"+e.width+"px;",attrs:{viewHeightMax:n.panelHeight,defItemHeight:n.treeDefItemHeight,defaultDisplayLevel:n.treeDefaultDisplayLevel,data:n.treeItemsFolder,activable:!0,itemActive:n.treeItemActive,paddingStyle:n.treePaddingStyle,indent:n.treeIndent,iconSize:n.treeToggleIconSize,iconToggleColor:n.treeToggleIconColor,iconToggleDisabledColor:n.treeToggleIconDisabledColor,iconToggleBackgroundColor:n.treeToggleIconBackgroundColor,iconToggleBackgroundColorHover:n.treeToggleIconBackgroundColorHover,itemTextColor:n.treeItemTextColor,itemTextColorHover:n.treeItemTextColorHover,itemTextColorActive:n.treeItemTextColorActive,itemBackgroundColor:n.treeItemBackgroundColor,itemBackgroundColorHover:n.treeItemBackgroundColorHover,itemBackgroundColorActive:n.treeItemBackgroundColorActive,itemRippleColor:n.treeItemRippleColor,draggable:n.draggable,dgTextDisabled:n.dgTextDisabled,dgTextDisabledColor:n.dgTextDisabledColor,dgTextDisabledPaddingLeft:n.dgTextDisabledPaddingLeft,dgTextDisabledFontSize:n.dgTextDisabledFontSize,dgTextDisabledBackgroundColor:n.dgTextDisabledBackgroundColor,dgInsertLineColor:n.dgInsertLineColor,dgInsertBackgroundColor:n.dgInsertBackgroundColor,dgBelongBackgroundColor:n.dgBelongBackgroundColor,dgPreviewOpacity:n.dgPreviewOpacity,dgPreviewDisabledOpacity:n.dgPreviewDisabledOpacity,dgPreviewBorderWidth:n.dgPreviewBorderWidth,dgPreviewBorderColor:n.dgPreviewBorderColor,dgPreviewBackground:n.dgPreviewBackground,operatable:n.operatable,operateItemTextForRename:n.operateItemTextForRename,_operateItemTextForInsertBefore:"operateItemTextForInsertBefore",operateItemTextForInsertChild:n.operateItemTextForInsertChild,_operateItemTextForInsertAfter:"operateItemTextForInsertAfter",operateItemTextForDelete:n.operateItemTextForDelete,operateItemIconForRename:n.operateItemIconForRename,_operateItemIconForInsertBefore:"operateItemIconForInsertBefore",operateItemIconForInsertChild:n.operateItemIconForInsertChild,_operateItemIconForInsertAfter:"operateItemIconForInsertAfter",operateItemIconForDelete:n.operateItemIconForDelete,operateItemPaddingStyle:n.operateItemPaddingStyle,operatePanelWidth:n.operatePanelWidth,operatePanelHeight:n.operatePanelHeight,operateBtnTooltip:n.operateBtnTooltip,operateBtnBackgroundColor:n.operateBtnBackgroundColor,operateBtnBackgroundColorHover:n.operateBtnBackgroundColorHover,operateBtnBackgroundColorFocus:n.operateBtnBackgroundColorFocus,operateItemBackgroundColor:n.operateItemBackgroundColor,operateItemBackgroundColorHover:n.operateItemBackgroundColorHover,operateItemHeight:n.operateItemHeight,operateItemTextColor:n.operateItemTextColor,operateItemTextColorHover:n.operateItemTextColorHover,operateItemIconSize:n.operateItemIconSize,operateItemIconColor:n.operateItemIconColor,operateItemIconColorHover:n.operateItemIconColorHover,funOperateItem:n.useFunOperateItem,editorRenameContentBackgroundColor:n.editorRenameContentBackgroundColor,editorRenameFooterBackgroundColor:n.editorRenameFooterBackgroundColor,editorRenameInputTextColor:n.editorRenameInputTextColor,editorRenameInputTextBottomLineBorderColor:n.editorRenameInputTextBottomLineBorderColor,editorRenameInputTextBottomLineBorderColorHover:n.editorRenameInputTextBottomLineBorderColorHover,editorRenameInputTextBottomLineBorderColorFocus:n.editorRenameInputTextBottomLineBorderColorFocus,editorRenameCancelBtnText:n.editorRenameCancelBtnText,editorRenameCancelBtnTextColor:n.editorRenameCancelBtnTextColor,editorRenameCancelBtnTextColorHover:n.editorRenameCancelBtnTextColorHover,editorRenameCancelBtnIcon:n.editorRenameCancelBtnIcon,editorRenameCancelBtnIconSize:n.editorRenameCancelBtnIconSize,editorRenameCancelBtnIconColor:n.editorRenameCancelBtnIconColor,editorRenameCancelBtnIconColorHover:n.editorRenameCancelBtnIconColorHover,editorRenameCancelBtnIconRippleColor:n.editorRenameCancelBtnIconRippleColor,editorRenameCancelBtnBackgroundColor:n.editorRenameCancelBtnBackgroundColor,editorRenameCancelBtnBackgroundColorHover:n.editorRenameCancelBtnBackgroundColorHover,editorRenameSaveBtnText:n.editorRenameSaveBtnText,editorRenameSaveBtnTextColor:n.editorRenameSaveBtnTextColor,editorRenameSaveBtnTextColorHover:n.editorRenameSaveBtnTextColorHover,editorRenameSaveBtnIcon:n.editorRenameSaveBtnIcon,editorRenameSaveBtnIconSize:n.editorRenameSaveBtnIconSize,editorRenameSaveBtnIconColor:n.editorRenameSaveBtnIconColor,editorRenameSaveBtnIconColorHover:n.editorRenameSaveBtnIconColorHover,editorRenameSaveBtnIconRippleColor:n.editorRenameSaveBtnIconRippleColor,editorRenameSaveBtnBackgroundColor:n.editorRenameSaveBtnBackgroundColor,editorRenameSaveBtnBackgroundColorHover:n.editorRenameSaveBtnBackgroundColorHover,_render:"render"},on:{"update:data":[function(e){n.treeItemsFolder=e},n.changeData],"update:itemActive":function(e){n.treeItemActive=e},"update:item-active":function(e){n.treeItemActive=e},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem},scopedSlots:n._u([{key:"item",fn:function(e){return[t("div",{style:n.useTreeItemTextFontSize+" min-height:"+n.treeDefItemHeight+"px; line-height:"+n.treeDefItemHeight+"px;"},[n._t("folder-item",(function(){return[t("div",{style:"display:flex;"},[t("div",{style:"height:"+n.treeDefItemHeight+"px; padding-right:4px; display:flex; align-items:center;",on:{click:function(t){return n.ckTreeFolder(e)}}},[t("WIcon",{attrs:{icon:n.treeFolderIcon,color:n.getTreeFolderIconColor(e),colorHover:n.getTreeFolderIconColor(e),size:n.treeFolderIconSize}})],1),n._v(" "),t("div",{style:"cursor:pointer; user-select:none;",on:{click:function(t){return n.ckTreeFolder(e)}}},[n._v("\n                                        "+n._s(e.data.text)+"\n                                    ")])])]}),{item:Object.assign({},e.data,{icon:n.treeFolderIcon,iconColor:n.getTreeFolderIconColor(e),iconSize:n.treeFolderIconSize}),isHover:e.isHover,isActive:e.isActive,funClickFolderItem:function(){n.ckTreeFolder(e)}})],2)]}}],null,!0)}),n._v(" "),n.showTreeTrans?t("div",{style:"position:absolute; top:"+(n.useTreeItemHeightMin-(n.btnDisplayTreeIconSize+4))/2+"px; right:"+(8+(n.operatable?n.btnDisplayTreeIconSize+4:0))+"px;"},[t("WButtonCircle",{staticStyle:{display:"block"},attrs:{paddingStyle:{h:2,v:2},icon:n.showTreeTrans?n.btnDisplayTreeIconHide:n.btnDisplayTreeIconShow,iconSize:n.btnDisplayTreeIconSize,iconColor:n.btnDisplayTreeIconColor,iconColorHover:n.btnDisplayTreeIconColorHover,iconColorFocus:n.btnDisplayTreeIconColorFocus,backgroundColor:n.btnDisplayTreeBackgroundColor,backgroundColorHover:n.btnDisplayTreeBackgroundColorHover,backgroundColorFocus:n.btnDisplayTreeBackgroundColorFocus,shadow:!1},on:{click:function(e){return n.emitShowTreeDelay(!n.showTreeTrans)}}})],1):n._e()],1)]}},{key:"content",fn:function(e){return[t("div",{style:"height:100%; overflow:hidden;"},[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],style:"width:"+e.width+"px; min-width:"+e.width+"px; border-bottom:"+n.lineBetweenPathAndListWidth+"px solid "+n.effLineBetweenPathAndListColor+"; background:"+n.effPathBackgroundColor+";",on:{domresize:n.resizePath}},[t("div",{style:"padding-left:5px; display:flex; align-items:flex-start;"},[n.showTreeTrans?n._e():t("div",{style:"min-height:"+(n.btnDisplayTreeIconSize+8)+"px; padding-right:2px; display:flex; align-items:center;"},[t("WButtonCircle",{staticStyle:{display:"block"},attrs:{paddingStyle:{h:2,v:2},icon:n.showTreeTrans?n.btnDisplayTreeIconHide:n.btnDisplayTreeIconShow,iconSize:n.btnDisplayTreeIconSize,iconColor:n.btnDisplayTreeIconColor,iconColorHover:n.btnDisplayTreeIconColorHover,iconColorFocus:n.btnDisplayTreeIconColorFocus,backgroundColor:n.btnDisplayTreeBackgroundColor,backgroundColorHover:n.btnDisplayTreeBackgroundColorHover,backgroundColorFocus:n.btnDisplayTreeBackgroundColorFocus,shadow:!1},on:{click:function(e){return n.emitShowTreeDelay(!n.showTreeTrans)}}})],1),n._v(" "),0===n.pathInfors.length?t("div",{style:"min-height:"+(n.btnDisplayTreeIconSize+8)+"px; padding-left:4px; color:"+n.effPathBtnTextColor+"; "+n.usePathBtnTextFontSize+" display:flex; align-items:center;"},[n._v("\n                            "+n._s(n.noSelectedText)+"\n                        ")]):n._e(),n._v(" "),t("div",{style:"display:flex; flex-wrap:wrap;"},n._l(n.pathInfors,(function(e,o){return t("div",{key:"kpi-"+o,style:"min-height:"+(n.btnDisplayTreeIconSize+8)+"px;"},[t("div",{style:"min-height:"+(n.btnDisplayTreeIconSize+8)+"px; display:flex; align-items:center;"},[t("WIcon",{attrs:{icon:n.pathSepIcon,color:n.pathSepIconColor,colorHover:n.pathSepIconColor,size:n.pathSepIconSize}}),n._v(" "),t("WButtonChip",{attrs:{paddingStyle:{h:6,v:0},borderWidth:{},borderRadius:4,shadow:!1,text:e.name,textColor:n.pathBtnTextColor,textColorHover:n.pathBtnTextColorHover,_textColorActive:"pathBtnTextColorActive",textFontSize:n.pathBtnTextFontSize,_icon:"pathSepIcon",_iconColor:"pathSepIconColor",_iconSize:"pathSepIconSize",backgroundColor:n.pathBtnBackgroundColor,backgroundColorHover:n.pathBtnBackgroundColorHover,_backgroundColorActive:"pathBtnBackgroundColorActive"},on:{click:function(t){return n.ckPathFolder(e)}}})],1)])})),0)])]),n._v(" "),t("div",{style:"height:"+n.listHeight+"px; background:"+n.effListBackgroundColor+";"},[t("WListVertical",{style:"width:"+e.width+"px; min-width:"+e.width+"px; height:"+n.listHeight+"px;",attrs:{items:n.listItems,itemActive:n.listItemActive,itemCursorPointer:!1,paddingStyle:n.listPaddingStyle,itemBackgroundColor:n.listItemBackgroundColor,itemBackgroundColorHover:n.listItemBackgroundColorHover,itemBackgroundColorActive:n.listItemBackgroundColorActive,itemTextColor:n.listItemTextColor,itemTextColorHover:n.listItemTextColorHover,itemTextColorActive:n.listItemTextColorActive,itemIconSize:n.listItemIconSize,_itemIconColor:"listItemIconColor",_itemIconColorHover:"listItemIconColorHover",_itemIconColorActive:"listItemIconColorActive",itemRippleColor:n.listItemRippleColor,_click:"ckListItem","_v-if":"listItems.length>0"},on:{"update:itemActive":function(e){n.listItemActive=e},"update:item-active":function(e){n.listItemActive=e}},scopedSlots:n._u([{key:"header",fn:function(){return[n._t("list-head",null,{items:n.listItems})]},proxy:!0},{key:"item",fn:function(e){return[t("div",{style:"position:relative; "+n.useListItemTextFontSize+" min-height:"+n.listDefItemHeight+"px; line-height:"+n.listDefItemHeight+"px;"},[n._t("list-item",(function(){return[t("div",{style:"display:flex;"},[t("div",{style:"height:"+n.listDefItemHeight+"px; padding-right:4px; display:flex; align-items:center; cursor:pointer;",on:{click:function(t){return n.ckListItem(e)}}},[t("WIcon",{attrs:{icon:e.item.icon,color:n.getListItemIconColor(e),colorHover:n.getListItemIconColor(e),size:n.listItemIconSize}})],1),n._v(" "),n._t("list-item-text-left",null,{item:e.item,isHover:e.isHover,isActive:e.isActive}),n._v(" "),t("div",{style:"cursor:pointer; user-select:none;",on:{click:function(t){return n.ckListItem(e)}}},[n._v("\n                                            "+n._s(e.item.text)+"\n                                        ")]),n._v(" "),n._t("list-item-text-right",null,{item:e.item,isHover:e.isHover,isActive:e.isActive})],2)]}),{item:Object.assign({},e.item,{iconColor:n.getListItemIconColor(e),iconSize:n.listItemIconSize}),isHover:e.isHover,isActive:e.isActive,funClickListItem:function(){n.ckListItem(e)}}),n._v(" "),t("div",{style:"position:absolute; top:0px; right:0px;"},[n._t("list-item-cover",null,{item:e.item,isHover:e.isHover,isActive:e.isActive})],2),n._v(" "),n._t("list-item-sub",null,{item:e.item,isHover:e.isHover,isActive:e.isActive})],2)]}},{key:"footer",fn:function(){return[n._t("list-foot",null,{items:n.listItems})]},proxy:!0}],null,!0)})],1)])]}}])})],1)};vw._withStripped=!0;var gw={components:{demolink:iu,WIcon:Ha,WExplorer:wa({render:vw,staticRenderFns:[]},(function(n){n&&n("data-v-49cba4a4_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WExplorer.vue"},media:void 0})}),mw,"data-v-49cba4a4",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{mdiCommentEditOutline:dl,mdiChevronDoubleRight:el,mdiDeleteVariant:ul,WExplorer:{bShowTree:!0,treeWidth:275,funSortTree:null,fps:[{type:"file",path:"/Applications/Calendar.app",size:"256.5mb",tester:"Perter",priority:"L4"},{type:"file",path:"/Applications/Chrome.app",size:"496.7mb",tester:"Chloe",priority:"L4"},{type:"file",path:"/Applications/Webstorm.app",size:"128.6mb",tester:"Adrian",priority:"L4"},{type:"folder",path:"/Applications/Webs",size:"",tester:"",priority:""},{type:"file",path:"/Applications/Webs/web_infors.json",size:"92.2kb",tester:"Carl",priority:"L3"},{type:"file",path:"/Applications/Webs/Shareco/shareco-s1.txt",size:"5.4kb",tester:"Charissa",priority:"L4"},{type:"file",path:"/Applications/Webs/Shareco/shareco-s2.txt",size:"7.3kb",tester:"Dexter",priority:"L4"},{type:"folder",path:"/Applications/Webs/Guess",size:"",tester:"",priority:""},{type:"file",path:"/Applications/Webs/Guess/guess-s3.txt",size:"21.6kb",tester:"Ashley",priority:"L4"},{type:"file",path:"/Applications/Webs/Guess/guess-s4.txt",size:"82.7kb",tester:"Dwight",priority:"L4"},{type:"file",path:"/Applications//Systems/Regulator.ini",size:"2.5kb",tester:"Laura",priority:"L5"},{type:"file",path:"/Applications/Systems/Regulator/vers/1-settings.st",size:"56.2kb",tester:"Mavis",priority:"L5"},{type:"file",path:"/Applications/Systems/Regulator/vers/2-settings.st",size:"87.2kb",tester:"Geraint",priority:"L5"},{type:"file",path:"/Applications/Systems/Regulator/vers/3-settings.st",size:"224.2kb",tester:"Penelope",priority:"L5"},{type:"file",path:"/Applications/Systems/Regulator/vers/10-settings.st",size:"72.7kb",tester:"Heman",priority:"L5"},{type:"file",path:"/Applications/Systems/Regulator/vers/111-settings.st",size:"91.2kb",tester:"Tessa",priority:"L5"},{type:"file",path:"/Applications//Systems/device1.iso",size:"1.2gb",tester:"Una",priority:"L2"},{type:"file",path:"/Applications//Systems/device2.iso",size:"1.3gb",tester:"Jasper",priority:"L2"},{type:"file",path:"/Applications//Systems/device3.iso",size:"1.1gb",tester:"Violet",priority:"L2"},{type:"file",path:"/Applications//Systems/device4.iso",size:"1.7gb",tester:"Perter",priority:"L2"},{type:"file",path:"/Applications//Systems/device5.iso",size:"2.0gb",tester:"Winifred",priority:"L2"},{type:"file",path:"/Applications//Systems/device6.iso",size:"1.7gb",tester:"Lance",priority:"L2"},{type:"file",path:"/Applications//Systems/device7.iso",size:"2.1gb",tester:"Marvin",priority:"L2"},{type:"file",path:"/Applications//Systems/device8.iso",size:"1.5gb",tester:"Nat",priority:"L2"},{type:"file",path:"/Applications//Systems/device9.iso",size:"1.8gb",tester:"Nahum",priority:"L2"},{type:"file",path:"/Applications//Systems/device10.iso",size:"1.6gb",tester:"Nicholas",priority:"L2"},{type:"file",path:"/Applications//Systems/device11.iso",size:"1.2gb",tester:"Ralph",priority:"L2"},{type:"file",path:"/Applications//Systems/device12.iso",size:"2.2gb",tester:"Rudolph",priority:"L2"},{type:"file",path:"/Applications//Systems/device13.iso",size:"1.9gb",tester:"Rory",priority:"L2"},{type:"file",path:"/Applications//Systems/device14.iso",size:"1.2gb",tester:"Jacqueline",priority:"L2"},{type:"file",path:"/Applications//Systems/device15.iso",size:"1.7gb",tester:"Kathy",priority:"L2"},{type:"file",path:"/Applications//Systems/device16.iso",size:"1.1gb",tester:"Melinda",priority:"L2"},{type:"file",path:"/Applications//Systems/device17.iso",size:"1.9gb",tester:"Sharon",priority:"L2"},{type:"file",path:"/Applications//Systems/device18.iso",size:"1.2gb",tester:"Philippa",priority:"L2"},{type:"file",path:"/Applications//Systems/device19.iso",size:"1.5gb",tester:"Thelma",priority:"L2"},{type:"file",path:"/Applications//Systems/device20.iso",size:"1.4gb",tester:"Stewart",priority:"L2"},{type:"file",path:"/Documents/design-simple/src/index.txt",size:"6.7kb",tester:"Steve",priority:"L1"},{type:"file",path:"/Documents/design-simple/src/bootstrap.txt",size:"251.7kb",tester:"Theobald",priority:"L1"},{type:"file",path:"/Documents/design-material/src/btn.txt",size:"241.2b",tester:"Padraic",priority:"L1"},{type:"file",path:"/Documents/design-material/src/card.txt",size:"4.7kb",tester:"Napoleon",priority:"L1"},{type:"file",path:"/Documents/design-material/src/window.txt",size:"7.2kb",tester:"Lionel",priority:"L1"},{type:"file",path:"/Downloads/October.pdf",size:"16.9kb",tester:"Olive",priority:"L1"},{type:"file",path:"/Downloads/November.pdf",size:"94.5kb",tester:"Molly",priority:"L1"},{type:"file",path:"/Downloads/Tutorial.html",size:"22.7kb",tester:"Melanie",priority:"L1"},{type:"folder",path:"/Uploads",size:"",tester:"",priority:""},{type:"file",path:"/Videos/Tutorials/Basic layouts.mp4",size:"862.7mb",tester:"Lindsay",priority:"L3"},{type:"file",path:"/Videos/Tutorials/Advanced techniques.mp4",size:"626.5mb",tester:"Jarvis",priority:"L3"},{type:"file",path:"/Videos/Tutorials/All about app.mp4",size:"796.2mb",tester:"Gaston",priority:"L3"},{type:"file",path:"/Videos/Intro.mov",size:"852.8mb",tester:"Dermot",priority:"L3"},{type:"file",path:"/Videos/Conference introduction.avi",size:"676.7mb",tester:"Hector",priority:"L3"},{type:"folder",path:"/Videos/Empty",size:"",tester:"",priority:""}]},actions:[{mode:"eleclick",selector:'span[class="v-chip__content"]'}]}},methods:{ckItem:function(n){console.log("ckItem",n)},ckFolder:function(n){console.log("ckFolder",n)},ckFile:function(n){console.log("ckFile",n)},toggleTreeFoldersByFun:function(n,e){console.log("toggleTreeFoldersByFun",n,e);this.$refs.ref_toggleTreeFoldersByFun.toggleTreeFoldersByFun((t=>(console.log("toggleTreeFoldersByFun rows",t),{row:t[n],toUnfolding:e})))},toggleTreeFoldersAll:function(n,e){console.log("toggleTreeFoldersAll",n,e);this.$refs.ref_toggleTreeFoldersAll.toggleTreeFoldersAll(n,e)},ckTriggerClickTreeFolderById:function(n){console.log("ckTriggerClickTreeFolderById",n);this.$refs.we_triggerClickTreeFolderById.triggerClickTreeFolderById(n)},ckTriggerClickTreeFolderByFun:function(n){console.log("ckTriggerClickTreeFolderByFun",n);this.$refs.we_triggerClickTreeFolderByFun.triggerClickTreeFolderByFun((e=>{console.log("cb msg",e);for(let t=0;t<e.treeItemsSpread.length;t++){let o=e.treeItemsSpread[t];if(o.text===n)return console.log("find and click",o),o}return null}))},ckFunSortTree:function(n){console.log("ckFunSortTree",n);let e=this,t=n=>(console.log("rs",n),n.reverse(),n);e.WExplorer.funSortTree="default"===n?null:t},getFolderInfor:function(n){console.log("getFolderInfor",n);let e=0,t=0;for(let o=0;o<n.items.length;o++){let r=n.items[o].data._type;"folder"===r?e++:"file"===r&&t++}return`There are ${e} folder(s) and ${t} file(s) in this folder`},clickOperateItem:function(n){console.log("clickOperateItem",n);let e=n.rowItem.index;n.operateItem(e,n.opItem.key,(function(){return new Promise((function(n,e){n({text:"new-"+Math.floor(1e3*Math.random()),type:"folder",size:"test",tester:"test",priority:"test"})}))}))},changeItem:function(n){console.log("changeItem",n)}}};const hw=gw;var fw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"default"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeWidth"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"10px","font-size":"0.8rem"}},[n._v("treeWidth: "+n._s(n.WExplorer.treeWidth))]),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeWidth:n.WExplorer.treeWidth},on:{"update:treeWidth":function(e){return n.$set(n.WExplorer,"treeWidth",e)},"update:tree-width":function(e){return n.$set(n.WExplorer,"treeWidth",e)}}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeWidthMin & treeWidthMax"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeWidthMin:100,treeWidthMax:400}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeBackgroundColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeBackgroundColor:"#f8f8f8"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"showTree"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"10px"}},[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){n.WExplorer.bShowTree=!n.WExplorer.bShowTree}}},[n._v("Show("+n._s(n.WExplorer.bShowTree)+")")])],1),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,showTree:n.WExplorer.bShowTree},on:{"update:showTree":function(e){return n.$set(n.WExplorer,"bShowTree",e)},"update:show-tree":function(e){return n.$set(n.WExplorer,"bShowTree",e)}}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeAfloat"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeAfloat:!0}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeDefaultDisplayLevel"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeDefaultDisplayLevel:1}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeDefItemHeight & listDefItemHeight"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeDefItemHeight:22,listDefItemHeight:22}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treePaddingStyle"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treePaddingStyle:{v:4,h:4}}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeIndent"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeIndent:.5}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeFolderIcon & treeFolderIconSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeFolderIcon:"fas fa-folder-open",treeFolderIconSize:18}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeItemTextFontSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeItemTextFontSize:"0.75rem"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeItemTextColor & treeItemTextColorHover & treeItemTextColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeItemTextColor:"#a84",treeItemTextColorHover:"#864",treeItemTextColorActive:"#862"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeFolderIconColor & treeFolderIconColorHover & treeFolderIconColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeFolderIconColor:"#ea6",treeFolderIconColorHover:"#c84",treeFolderIconColorActive:"#a62"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeItemBackgroundColor & treeItemBackgroundColorHover & treeItemBackgroundColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeItemBackgroundColor:"transparent",treeItemBackgroundColorHover:"#FFF3E0",treeItemBackgroundColorActive:"#FFE0B2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeItemRippleColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeItemRippleColor:"rgba(130, 180, 255, 0.4)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"bindRoot"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,bindRoot:"本機"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeToggleIconSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeToggleIconSize:18}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeToggleIconColor & treeToggleIconBackgroundColor & treeToggleIconBackgroundColorHover"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeToggleIconColor:"#f58",treeToggleIconBackgroundColor:"rgba(255,200,200,0.5)",treeToggleIconBackgroundColorHover:"#fcc"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"pathBackgroundColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,pathBackgroundColor:"#f8f8f8"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"pathSepIcon & pathSepIconColor & pathSepIconSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,pathSepIcon:"fas fa-angle-double-right",pathSepIconColor:"#00C853",pathSepIconSize:14}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"pathBtnTextFontSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,pathBtnTextFontSize:"0.75rem"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"pathBtnTextColor & pathBtnTextColorHover"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,pathBtnTextColor:"#EF5350",pathBtnTextColorHover:"#EC407A"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"pathBtnBackgroundColor & pathBtnBackgroundColorHover"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,pathBtnBackgroundColor:"#EDE7F6",pathBtnBackgroundColorHover:"#D1C4E9"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"btnDisplayTreeIconShow & btnDisplayTreeIconHide & btnDisplayTreeIconSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,btnDisplayTreeIconShow:"fas fa-arrow-circle-right",btnDisplayTreeIconHide:"fas fa-arrow-circle-left",btnDisplayTreeIconSize:22}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"btnDisplayTreeIconColor & btnDisplayTreeIconColorHover & btnDisplayTreeIconColorFocus"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,btnDisplayTreeIconColor:"rgb(240,70,120)",btnDisplayTreeIconColorHover:"rgb(240,50,100)",btnDisplayTreeIconColorFocus:"rgb(255,70,120)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"btnDisplayTreeBackgroundColor & btnDisplayTreeBackgroundColorHover & btnDisplayTreeBackgroundColorFocus"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,btnDisplayTreeBackgroundColor:"rgba(241,241,255,0.7)",btnDisplayTreeBackgroundColorHover:"rgb(220,220,255)",btnDisplayTreeBackgroundColorFocus:"rgb(200,200,255)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listPaddingStyle"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listPaddingStyle:{v:2,h:8}}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listBackgroundColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listBackgroundColor:"#f8f8f8"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listFolderIcon & listFileIcon & listIconSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listFolderIcon:"fas fa-folder-open",listFileIcon:"fas fa-tablet-alt",listIconSize:18}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listItemTextFontSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listItemTextFontSize:"0.75rem"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listItemTextColor & listItemTextColorHover & listItemTextColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listItemTextColor:"#a84",listItemTextColorHover:"#864",listItemTextColorActive:"#862"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listItemIconColor & listItemIconColorHover & listItemIconColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listItemIconColor:"#ea6",listItemIconColorHover:"#c84",listItemIconColorActive:"#a62"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listItemBackgroundColor & listItemBackgroundColorHover & listItemBackgroundColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listItemBackgroundColor:"transparent",listItemBackgroundColorHover:"#FFF3E0",listItemBackgroundColorActive:"#FFE0B2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listItemRippleColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listItemRippleColor:"rgba(130, 180, 255, 0.4)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"defaultShowTreeFirst"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,defaultShowTreeFirst:!1}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"defaultShowTreeFirst & noSelectedText"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,defaultShowTreeFirst:!1,noSelectedText:"尚未選擇資料夾"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"events"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem,"click-folder":n.ckFolder,"click-file":n.ckFile}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"small text"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeItemTextFontSize:"0.75rem",listItemTextFontSize:"0.75rem",pathBtnTextFontSize:"0.75rem"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeDrawerBarSize & treeDrawerBarColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeDrawerBarSize:5,treeDrawerBarColor:"rgba(0,0,0,0.1)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"lineBetweenPathAndListWidth & lineBetweenPathAndListColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,lineBetweenPathAndListWidth:5,lineBetweenPathAndListColor:"rgba(0,0,0,0.1)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"dark mode"}}),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"40px",background:"#777"}},[t("w-explorer",{staticStyle:{width:"700px",height:"400px",background:"#333","border-radius":"5px",overflow:"hidden","box-shadow":"0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)"},attrs:{items:n.WExplorer.fps,treeItemTextColor:"#ddd",treeItemTextColorHover:"#eee",treeItemTextColorActive:"#fff",treeFolderIconColor:"#FFCC80",treeFolderIconColorHover:"#FFCC80",treeFolderIconColorActive:"#FFB74D",treeItemBackgroundColor:"transparent",treeItemBackgroundColorHover:"rgba(150,150,150,0.4)",treeItemBackgroundColorActive:"rgba(150,150,150,0.2)",treeBackgroundColor:"#333",treeToggleIconColor:"rgba(255,255,255,0.6)",treeToggleIconBackgroundColor:"transparent",treeToggleIconBackgroundColorHover:"rgba(150,150,150,0.2)",pathBtnTextColor:"#ddd",pathBtnTextColorHover:"#eee",pathBtnBackgroundColor:"transparent",pathBtnBackgroundColorHover:"rgba(150,150,150,0.2)",pathBackgroundColor:"#333",btnDisplayTreeIconColor:"#ccc",btnDisplayTreeIconColorHover:"#eee",btnDisplayTreeIconColorFocus:"#eee",btnDisplayTreeBackgroundColor:"transparent",btnDisplayTreeBackgroundColorHover:"rgba(150,150,150,0.2)",btnDisplayTreeBackgroundColorFocus:"rgba(150,150,150,0.1)",listItemTextColor:"#ddd",listItemTextColorHover:"#eee",listItemTextColorActive:"#fff",listItemIconColor:"#FFCC80",listItemIconColorHover:"#FFCC80",listItemIconColorActive:"#FFB74D",listItemBackgroundColor:"transparent",listItemBackgroundColorHover:"rgba(150,150,150,0.4)",listItemBackgroundColorActive:"rgba(150,150,150,0.2)",listBackgroundColor:"#333",treeDrawerBarSize:1,treeDrawerBarColor:"rgba(150,150,150,0.4)",lineBetweenPathAndListWidth:1,lineBetweenPathAndListColor:"rgba(150,150,150,0.4)",treeItemTextFontSize:"0.75rem",listItemTextFontSize:"0.75rem",pathBtnTextFontSize:"0.75rem"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"toggleTreeFoldersByFun"}}),n._v(" "),t("div",[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(0,!0)}}},[n._v("show(rows[0])")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(0,!1)}}},[n._v("hide(rows[0])")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(1,!0)}}},[n._v("show(rows[1])")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(1,!1)}}},[n._v("hide(rows[1])")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(2,!0)}}},[n._v("show(rows[2])")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(2,!1)}}},[n._v("hide(rows[2])")])],1),n._v(" "),t("w-explorer",{ref:"ref_toggleTreeFoldersByFun",staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"toggleTreeFoldersAll"}}),n._v(" "),t("div",[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersAll(!0)}}},[n._v("display all")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersAll(!1)}}},[n._v("hide all")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersAll(null,1)}}},[n._v("display to level1")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersAll(null,2)}}},[n._v("display to level2")])],1),n._v(" "),t("w-explorer",{ref:"ref_toggleTreeFoldersAll",staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"triggerClickTreeFolderById"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"10px"}},[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckTriggerClickTreeFolderById("root")}}},[n._v("click(root)")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckTriggerClickTreeFolderById("root❯Applications")}}},[n._v("click(Applications)")])],1),n._v(" "),t("w-explorer",{ref:"we_triggerClickTreeFolderById",staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"triggerClickTreeFolderByFun"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"10px"}},[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckTriggerClickTreeFolderByFun("Applications")}}},[n._v("click(Applications)")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckTriggerClickTreeFolderByFun("Webs")}}},[n._v("click(Webs)")])],1),n._v(" "),t("w-explorer",{ref:"we_triggerClickTreeFolderByFun",staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"funSortTree"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"10px"}},[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckFunSortTree("funSortTree")}}},[n._v("funSortTree(reverse)")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckFunSortTree("default")}}},[n._v("default")])],1),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,funSortTree:n.WExplorer.funSortTree}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot folder-item"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},scopedSlots:n._u([{key:"folder-item",fn:function(e){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("div",{staticStyle:{"padding-right":"5px",cursor:"pointer"},on:{click:function(n){return e.funClickFolderItem()}}},[t("w-icon",{attrs:{icon:e.item.icon,_color:"props.item.iconColor",color:"#d7a72b",size:e.item.iconSize}})],1),n._v(" "),t("div",{staticStyle:{cursor:"pointer"},on:{click:function(n){return e.funClickFolderItem()}}},[n._v("\n                            "+n._s(e.item.text)+"\n                        ")])])]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot list-item-cover"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem},scopedSlots:n._u([{key:"list-item-cover",fn:function(e){return["file"===e.item.data._type?t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("div",{staticStyle:{padding:"0px 5px",color:"#6fb57e",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-shield")}}},[t("i",{staticClass:"fas fa-shield-virus"})]),n._v(" "),t("div",{staticStyle:{"padding-right":"5px"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 5px",color:"#b894be",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-dice")}}},[t("i",{staticClass:"fas fa-dice"})]),n._v(" "),t("div",{staticStyle:{"padding-right":"5px"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 5px",color:"#c79f6b",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-wired")}}},[t("i",{staticClass:"fas fa-network-wired"})]),n._v(" "),t("div",{staticStyle:{"padding-right":"5px"}})]):n._e()]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot list-item & list-item-cover & list-head & list-foot"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem},scopedSlots:n._u([{key:"list-item",fn:function(e){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("div",{staticStyle:{"padding-right":"5px",cursor:"pointer"},on:{click:function(n){return e.funClickListItem()}}},[t("w-icon",{attrs:{icon:e.item.icon,_color:"props.item.iconColor",color:"#d7a72b",size:e.item.iconSize}})],1),n._v(" "),t("div",{staticStyle:{cursor:"pointer"},on:{click:function(n){return e.funClickListItem()}}},[n._v("\n                            "+n._s(e.item.data.text)+"\n                        ")])])]}},{key:"list-head",fn:function(e){return[t("div",{staticStyle:{display:"flex","align-items":"stretch"}},[t("div",{staticStyle:{width:"100%"}},[t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{color:"#999","font-size":"0.7rem","text-align":"center"}},[n._v("\n                                    name\n                                ")])])]),n._v(" "),t("div",{staticStyle:{margin:"3px 0px","border-right":"1px solid #ddd"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"60px",color:"#999","font-size":"0.7rem","text-align":"center"}},[n._v("\n                                size\n                            ")])]),n._v(" "),t("div",{staticStyle:{margin:"3px 0px","border-right":"1px solid #ddd"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"60px",color:"#999","font-size":"0.7rem","text-align":"center"}},[n._v("\n                                tester\n                            ")])]),n._v(" "),t("div",{staticStyle:{margin:"3px 0px","border-right":"1px solid #ddd"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"16px",color:"#999","font-size":"0.7rem","text-align":"center"}},[n._v("\n                                i\n                            ")])]),n._v(" "),t("div",{staticStyle:{margin:"3px 0px","border-right":"1px solid #ddd"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"16px",color:"#999","font-size":"0.7rem","text-align":"center"}},[n._v("\n                                s\n                            ")])]),n._v(" "),t("div",{staticStyle:{margin:"3px 0px","border-right":"1px solid #ddd"}}),n._v(" "),t("div",{staticStyle:{"padding-right":"calc( 8px - 2px - 1px )"}})])]}},{key:"list-foot",fn:function(e){return[t("div",{staticStyle:{padding:"1px 3px",background:"#f8f8f8","border-top":"1px solid #ddd","font-size":"0.7rem",color:"#888"}},[n._v("\n                        "+n._s(n.getFolderInfor(e))+"\n                    ")])]}},{key:"list-item-cover",fn:function(e){return["file"===e.item.data._type?t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"60px",color:"#999","font-size":"0.7rem","text-align":"right",cursor:"pointer"},on:{click:function(e){return n.ckItem("text-size")}}},[n._v("\n                                "+n._s(e.item.data.data.size)+"\n                            ")])]),n._v(" "),t("div",{staticStyle:{"padding-right":"1px"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"60px",color:"#3448a9","font-size":"0.7rem","text-align":"right",cursor:"pointer"},on:{click:function(e){return n.ckItem("text-tester")}}},[n._v("\n                                "+n._s(e.item.data.data.tester)+"\n                            ")])]),n._v(" "),t("div",{staticStyle:{"padding-right":"1px"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"16px",color:"#996887",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-branch")}}},[t("i",{staticClass:"fas fa-code-branch"})])]),n._v(" "),t("div",{staticStyle:{"padding-right":"1px"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"16px",color:"#777",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-cog")}}},[t("i",{staticClass:"fas fa-cog"})])])]):n._e()]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot list-item-sub"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem},scopedSlots:n._u([{key:"list-item-sub",fn:function(e){return["file"===e.item.data._type?t("div",{style:"transition:all 0.3s; padding:3px; background:"+(e.isHover?"#e2e2e2":"#fbf4f2")+"; border-bottom:1px solid #ddd; font-size:0.7rem; line-height:0.7rem; display:flex; align-items:center; justify-content:flex-end;"},[t("div",{staticStyle:{padding:"0px 5px",display:"flex","align-items":"center"}},[t("div",{staticStyle:{"padding-right":"3px",color:"#888"}},[n._v("\n                                priority:\n                            ")]),n._v(" "),t("div",{staticStyle:{width:"20px",color:"#2e31af","text-align":"left",cursor:"pointer"},on:{click:function(e){return n.ckItem("text-priority")}}},[n._v("\n                                "+n._s(e.item.data.data.priority)+"\n                            ")])]),n._v(" "),t("div",{staticStyle:{padding:"0px 5px",color:"#6fb57e",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-shield")}}},[t("i",{staticClass:"fas fa-shield-virus"})]),n._v(" "),t("div",{staticStyle:{padding:"0px 5px",color:"#b894be",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-dice")}}},[t("i",{staticClass:"fas fa-dice"})]),n._v(" "),t("div",{staticStyle:{padding:"0px 5px",color:"#c79f6b",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-wired")}}},[t("i",{staticClass:"fas fa-network-wired"})])]):n._e()]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot list-item-text-left"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem},scopedSlots:n._u([{key:"list-item-text-left",fn:function(e){return["file"===e.item.data._type?t("div",{style:"display:flex; align-items:center;"},[t("div",{style:"transition:all 0.3s; padding:3px 4px; border-radius:0px; font-size:0.7rem; line-height:0.7rem; color:#fff; cursor:pointer; background:"+(e.isHover?"#62a":"#84a")+";"},[t("div",{on:{click:function(e){return n.ckItem("text-priority")}}},[n._v("\n                                "+n._s(e.item.data.data.priority)+"\n                            ")])]),n._v(" "),t("div",{staticStyle:{"padding-right":"5px"}})]):n._e()]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot list-item-text-right"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem},scopedSlots:n._u([{key:"list-item-text-right",fn:function(e){return["file"===e.item.data._type?t("div",{style:"display:flex; align-items:center;"},[t("div",{staticStyle:{"padding-right":"5px"}}),n._v(" "),t("div",{style:"transition:all 0.3s; padding:3px 5px; border-radius:4px; font-size:0.7rem; line-height:0.7rem; color:#fff; cursor:pointer; background:"+(e.isHover?"#f26":"#f48")+";"},[t("div",{on:{click:function(e){return n.ckItem("text-tester")}}},[n._v("\n                                "+n._s(e.item.data.data.tester)+"\n                            ")])])]):n._e()]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"draggable"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using draggable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,draggable:!0},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"draggable & dgPreviewOpacity & dgPreviewBorderWidth & dgBelongBackgroundColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using draggable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,draggable:!0,dgPreviewOpacity:.9,dgPreviewBorderWidth:3,dgPreviewBorderColor:"rgba(255,100,200,1)",dgPreviewBackground:"rgba(255,100,200,0.2)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"draggable & dgInsertLineColor & dgInsertBackgroundColor & dgBelongBackgroundColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using draggable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,draggable:!0,dgInsertLineColor:"rgba(120,220,150,0.9)",dgInsertBackgroundColor:"rgba(50,220,100,0.1)",dgBelongBackgroundColor:"rgba(50,220,100,0.2)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"draggable & dgTextDisabled & dgTextDisabledColor & dgTextDisabledPaddingLeft & dgTextDisabledFontSize & dgTextDisabledBackgroundColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using draggable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,draggable:!0,dgTextDisabled:"禁止拖曳至自己子節點當中",dgTextDisabledColor:"pink accent-3",dgTextDisabledPaddingLeft:13,dgTextDisabledFontSize:"0.8rem",dgTextDisabledBackgroundColor:"rgba(255,255,255,0.8)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operateBtnTooltip & operateItemTextForRename & perateItemTextForInsertChild & operateItemTextForDelete"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateBtnTooltip:"編輯",operateItemTextForRename:"變更項目名稱",operateItemTextForInsertChild:"插入子項目",operateItemTextForDelete:"刪除項目"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operatePanelWidth & operatePanelHeight & operateItemIconSize & operateItemPaddingStyle"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateItemIconSize:18,operateItemPaddingStyle:{v:5,h:5},operatePanelWidth:130,operatePanelHeight:90},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operateItemHeight & operateItemIconSize & operateItemPaddingStyle"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateItemIconSize:18,operateItemPaddingStyle:{v:5,h:5},operateItemHeight:29.2},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operateBtnBackgroundColor & operateBtnBackgroundColorHover & operateBtnBackgroundColorFocus"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateBtnBackgroundColor:"rgba(230,230,230,0.4)",operateBtnBackgroundColorHover:"rgba(230,230,255,0.8)",operateBtnBackgroundColorFocus:"rgba(210,210,255,0.8)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operateItemBackgroundColor & operateItemBackgroundColorHover & operateItemTextColor & operateItemTextColorHover & operateItemIconColor & operateItemIconColorHover"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateItemBackgroundColor:"blue-grey darken-1",operateItemBackgroundColorHover:"blue-grey",operateItemTextColor:"grey lighten-4",operateItemTextColorHover:"white",operateItemIconColor:"grey lighten-4",operateItemIconColorHover:"white"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operateItemIconForRename & operateItemIconForInsertChild & operateItemIconForDelete"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateItemIconForRename:n.mdiCommentEditOutline,operateItemIconForInsertChild:n.mdiChevronDoubleRight,operateItemIconForDelete:n.mdiDeleteVariant},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameContentBackgroundColor & editorRenameFooterBackgroundColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameContentBackgroundColor:"#f2f2f2",editorRenameFooterBackgroundColor:"#EFEBE9"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameInputTextColor & editorRenameInputTextBottomLineBorderColor & editorRenameInputTextBottomLineBorderColorHover & editorRenameInputTextBottomLineBorderColorFocus"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameInputTextColor:"#444",editorRenameInputTextBottomLineBorderColor:"#888",editorRenameInputTextBottomLineBorderColorHover:"#aaa",editorRenameInputTextBottomLineBorderColorFocus:"#666"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameCancelBtnText & editorRenameCancelBtnTextColor & editorRenameCancelBtnTextColorHover"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameCancelBtnText:"取消",editorRenameCancelBtnTextColor:"#444",editorRenameCancelBtnTextColorHover:"#222"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameCancelBtnIcon & editorRenameCancelBtnIconSize & editorRenameCancelBtnIconColor & editorRenameCancelBtnIconColorHover & editorRenameCancelBtnIconRippleColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameCancelBtnIcon:"fas fa-times",editorRenameCancelBtnIconSize:24,editorRenameCancelBtnIconColor:"#444",editorRenameCancelBtnIconColorHover:"#222",editorRenameCancelBtnIconRippleColor:"rgba(200,200,200,0.3)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameCancelBtnBackgroundColor & editorRenameCancelBtnBackgroundColorHover"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameCancelBtnBackgroundColor:"#EFEBE9",editorRenameCancelBtnBackgroundColorHover:"#D7CCC8"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameSaveBtnText & editorRenameSaveBtnTextColor & editorRenameSaveBtnTextColorHover"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameSaveBtnText:"儲存",editorRenameSaveBtnTextColor:"#444",editorRenameSaveBtnTextColorHover:"#222"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameSaveBtnIcon & editorRenameSaveBtnIconSize & editorRenameSaveBtnIconColor & editorRenameSaveBtnIconColorHover & editorRenameSaveBtnIconRippleColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameSaveBtnIcon:"fas fa-check",editorRenameSaveBtnIconSize:24,editorRenameSaveBtnIconColor:"#444",editorRenameSaveBtnIconColorHover:"#222",editorRenameSaveBtnIconRippleColor:"rgba(200,200,200,0.3)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameSaveBtnBackgroundColor & editorRenameSaveBtnBackgroundColorHover"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameSaveBtnBackgroundColor:"#EFEBE9",editorRenameSaveBtnBackgroundColorHover:"#D7CCC8"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & draggable"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable or draggable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,draggable:!0},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1)])])};fw._withStripped=!0;const bw=wa({render:fw,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-explorer")])])}]},(function(n){n&&n("data-v-1f58fff4_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWExplorer.vue"},media:void 0})}),hw,"data-v-1f58fff4",false,undefined,!1,_a,void 0,void 0);var yw={components:{},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200}},data:function(){let n=function(n){let e=n,t=e/2*Math.sqrt(3),o=e/4*3,r=(()=>{let n=[];for(let t=0;t<6;t++){let o=Math.PI/3*(t+.5),r=.5+.5*Math.cos(o),i=.5+.5*Math.sin(o);r*=e,i*=e,n.push({x:r,y:i})}return n})(),i=Io(r,(n=>`${n.x},${n.y}`));i=zl(i," ");let a=[];Ve([{dx:6,cs:["#003366","#336699","#3366CC","#003399","#000099","#0000CC","#000066"]},{dx:5,cs:["#006666","#006699","#0099CC","#0066CC","#0033CC","#0000FF","#3333FF","#333399"]},{dx:4,cs:["#669999","#009999","#33CCCC","#00CCFF","#0099FF","#0066FF","#3366FF","#3333CC","#666699"]},{dx:3,cs:["#339966","#00CC99","#00FFCC","#00FFFF","#33CCFF","#3399FF","#6699FF","#6666FF","#6600FF","#6600CC"]},{dx:2,cs:["#339933","#00CC66","#00FF99","#66FFCC","#66FFFF","#66CCFF","#99CCFF","#9999FF","#9966FF","#9933FF","#9900FF"]},{dx:1,cs:["#006600","#00CC00","#00FF00","#66FF99","#99FFCC","#CCFFFF","#CCCCFF","#CC99FF","#CC66FF","#CC33FF","#CC00FF","#9900CC"]},{dx:0,cs:["#003300","#009933","#33CC33","#66FF66","#99FF99","#CCFFCC","#FFFFFF","#FFCCFF","#FF99FF","#FF66FF","#FF00FF","#CC00CC","#660066"]},{dx:1,cs:["#336600","#009900","#66FF33","#99FF66","#CCFF99","#FFFFCC","#FFCCCC","#FF99CC","#FF66CC","#FF33CC","#CC0099","#993399"]},{dx:2,cs:["#333300","#669900","#99FF33","#CCFF66","#FFFF99","#FFCC99","#FF9999","#FF6699","#FF3399","#CC3399","#990099"]},{dx:3,cs:["#666633","#99CC00","#CCFF33","#FFFF66","#FFCC66","#FF9966","#FF6666","#FF0066","#CC6699","#993366"]},{dx:4,cs:["#999966","#CCCC00","#FFFF00","#FFCC00","#FF9933","#FF6600","#FF5050","#CC0066","#660033"]},{dx:5,cs:["#996633","#CC9900","#FF9900","#CC6600","#FF3300","#FF0000","#CC0000","#990033"]},{dx:6,cs:["#663300","#996600","#CC3300","#993300","#990000","#800000","#993333"]}],((n,e)=>{Ve(n.cs,((r,i)=>{let l={x:(t+0)*i+n.dx*(t/2),y:(o+0)*e,color:r};Ao(r)&&a.push(l)}))}));let l=ng(Io(a,"x")),s=kv(Io(a,"x")),c=ng(Io(a,"y")),d=kv(Io(a,"y"));return s+=t+2,d+=e+1,{cpgs:i,colors:a,xmin:l,xmax:s,ymin:c,ymax:d}}(18);return{valueTrans:null,cpgs:n.cpgs,colors:n.colors,xmin:n.xmin,xmax:n.xmax,ymin:n.ymin,ymax:n.ymax,pick:null}},computed:{changeValue:function(){return this.valueTrans=Qi(this.value),""},changePick:function(){let n=this,e=null;return Ve(n.colors,(t=>{n.jdColor2(t.color,n.valueTrans)&&(e=t)})),n.pick=e,""},width:function(){return this.size},height:function(){return this.width/10*9}},methods:{jdColor2:function(n,e){return pc.toRgbString(n)===pc.toRgbString(e)},ckColor:function(n){this.valueTrans=n.color,this.$emit("input",n.color)}}};const kw=yw;var xw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; width:"+n.width+"px; height:"+n.height+"px;",attrs:{changeValue:n.changeValue,changePick:n.changePick}},[t("div",{staticStyle:{display:"flex"}},[t("svg",{attrs:{viewBox:"0 0 "+n.xmax+" "+n.ymax,width:n.width,height:n.height,xmlns:"http://www.w3.org/2000/svg"}},[n._l(n.colors,(function(e,o){return t("polygon",{key:"kc-"+o,style:"fill:"+e.color+"; stroke:"+e.color+"; stroke-width:1px; cursor:pointer; user-select:none;",attrs:{transform:"translate("+e.x+", "+e.y+")",points:n.cpgs},on:{click:function(t){return n.ckColor(e)}}})})),n._v(" "),n.pick?[t("polygon",{style:"fill:transparent; stroke:#000; stroke-width:4px; cursor:pointer; user-select:none;",attrs:{transform:"translate("+n.pick.x+", "+n.pick.y+")",points:n.cpgs},on:{click:function(e){return n.ckColor(n.pick)}}}),n._v(" "),t("polygon",{style:"fill:transparent; stroke:#fff; stroke-width:2px; cursor:pointer; user-select:none;",attrs:{transform:"translate("+n.pick.x+", "+n.pick.y+")",points:n.cpgs},on:{click:function(e){return n.ckColor(n.pick)}}})]:n._e()],2)])])};xw._withStripped=!0;const Cw=wa({render:xw,staticRenderFns:[]},(function(n){n&&n("data-v-5129771d_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickHexagon.vue"},media:void 0})}),kw,"data-v-5129771d",false,undefined,!1,_a,void 0,void 0);const Sw={components:{demolink:iu,WColorPickHexagon:Cw},props:{},data:function(){return{WColorPickHexagon:{colorPick:"#FF6600"},actions:[]}},methods:{}};var ww=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hexagon",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHexagon.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHexagon.colorPick))])]),n._v(" "),t("w-color-pick-hexagon",{model:{value:n.WColorPickHexagon.colorPick,callback:function(e){n.$set(n.WColorPickHexagon,"colorPick",e)},expression:"WColorPickHexagon.colorPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hexagon",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHexagon.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHexagon.colorPick))])]),n._v(" "),t("w-color-pick-hexagon",{attrs:{size:150},model:{value:n.WColorPickHexagon.colorPick,callback:function(e){n.$set(n.WColorPickHexagon,"colorPick",e)},expression:"WColorPickHexagon.colorPick"}})],1)])])};ww._withStripped=!0;const Ww=wa({render:ww,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-hexagon")])])}]},(function(n){n&&n("data-v-33799eae_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickHexagon.vue"},media:void 0})}),Sw,"data-v-33799eae",false,undefined,!1,_a,void 0,void 0);var _w={components:{},props:{value:{type:String,default:"#FFFFFF"},colorLeft:{type:String,default:"#FFFFFF"},colorRight:{type:String,default:"#000000"},colorNum:{type:Number,default:10},width:{type:Number,default:200},height:{type:Number,default:20}},data:function(){return{aimg:"data:image/svg+xml;base64,ICAgICAgICAgICAgICAgIDxzdmcgdmlld0JveD0iMCAwIDEwIDEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNkZGQiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmYiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjUiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmYiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNkZGQiIC8+DQogICAgICAgICAgICAgICAgPC9zdmc+",valueTrans:null,colorLeftTrans:null,colorRightTrans:null,s:20,pick:null}},computed:{changeValue:function(){let n=this;return n.valueTrans=Qi(n.value),n.colorLeftTrans=Qi(n.colorLeft),n.colorRightTrans=Qi(n.colorRight),""},colors:function(){let n=this,e={0:n.colorLeftTrans,1:n.colorRightTrans},t=pc.interp(e),o=[];for(let e=0;e<n.colorNum;e++){let r=e/Math.max(n.colorNum-1,1),i=t(r);o.push({r:r,x:e*n.s,y:0,color:i})}return o},changePick:function(){let n=this,e=null;return Ve(n.colors,(t=>{n.jdColor2(t.color,n.valueTrans)&&(e=t)})),n.pick=e,""}},methods:{jdColor2:function(n,e){return pc.toRgbString(n)===pc.toRgbString(e)},ckColor:function(n){this.valueTrans=n.color,this.$emit("input",n.color)}}};const Iw=_w;var Tw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; width:"+n.width+"px; height:"+n.height+"px;",attrs:{changeValue:n.changeValue,changePick:n.changePick}},[t("div",{style:"position:relative; width:"+n.width+"px; height:"+n.height+"px;"},[t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            background-image: url("+n.aimg+");\n            background-repeat:repeat;\n        "}),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n        "},[t("div",{staticStyle:{display:"flex"}},[t("svg",{attrs:{viewBox:"0 0 "+n.colors.length*n.s+" "+n.s,width:n.width,height:n.height,preserveAspectRatio:"none",xmlns:"http://www.w3.org/2000/svg"}},[n._l(n.colors,(function(e,o){return t("rect",{key:"kc-"+o,style:"fill:"+e.color+"; stroke-width:0px; cursor:pointer; user-select:none;",attrs:{x:e.x,y:e.y,width:n.s,height:n.s},on:{click:function(t){return n.ckColor(e)}}})})),n._v(" "),n.pick?[t("rect",{style:"fill:transparent; stroke:#000; stroke-width:1px; cursor:pointer; user-select:none;",attrs:{x:n.pick.x,y:n.pick.y,width:n.s,height:n.s}}),n._v(" "),t("rect",{style:"fill:transparent; stroke:#fff; stroke-width:2px; cursor:pointer; user-select:none;",attrs:{x:n.pick.x+2,y:n.pick.y+2,width:n.s-4,height:n.s-4}})]:n._e()],2)])])])])};Tw._withStripped=!0;const Aw=wa({render:Tw,staticRenderFns:[]},(function(n){n&&n("data-v-00439135_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickStripe.vue"},media:void 0})}),Iw,"data-v-00439135",false,undefined,!1,_a,void 0,void 0);var Bw={components:{WColorPickHexagon:Cw,WColorPickStripe:Aw},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200},space:{type:Number,default:5}},data:function(){return{valueTrans:null}},computed:{changeValue:function(){return this.valueTrans=Qi(this.value),""},hexagonSize:function(){return this.size},hexagonWidth:function(){return this.size},hexagonHeight:function(){return this.hexagonWidth/10*9},stripeWidth:function(){return this.size},stripeHeight:function(){return this.stripeWidth/10},width:function(){return this.size},height:function(){let n=this;return n.hexagonHeight+n.space+n.stripeHeight}},methods:{ckColor:function(n){n=(n=pc.toHexString(n)).toUpperCase(),this.valueTrans=n,this.$emit("input",n)}}};const Hw=Bw;var Pw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; width:"+n.width+"px; height:"+n.height+"px;",attrs:{changeValue:n.changeValue}},[t("div",{staticStyle:{display:"flex"}},[t("WColorPickHexagon",{attrs:{size:n.hexagonSize,value:n.valueTrans},on:{input:n.ckColor}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{staticStyle:{display:"flex"}},[t("WColorPickStripe",{attrs:{width:n.stripeWidth,height:n.stripeHeight,colorNum:10,value:n.valueTrans},on:{input:n.ckColor}})],1)])};Pw._withStripped=!0;const Fw=wa({render:Pw,staticRenderFns:[]},(function(n){n&&n("data-v-6e058096_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickHexagonGray.vue"},media:void 0})}),Hw,"data-v-6e058096",false,undefined,!1,_a,void 0,void 0);const Lw={components:{demolink:iu,WColorPickHexagonGray:Fw},props:{},data:function(){return{WColorPickHexagonGray:{colorPick:"#FF6600"},actions:[]}},methods:{}};var jw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hexagon-gray",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHexagonGray.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHexagonGray.colorPick))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-pick-hexagon-gray",{model:{value:n.WColorPickHexagonGray.colorPick,callback:function(e){n.$set(n.WColorPickHexagonGray,"colorPick",e)},expression:"WColorPickHexagonGray.colorPick"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hexagon-gray",casename:"space"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHexagonGray.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHexagonGray.colorPick))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-pick-hexagon-gray",{attrs:{space:15},model:{value:n.WColorPickHexagonGray.colorPick,callback:function(e){n.$set(n.WColorPickHexagonGray,"colorPick",e)},expression:"WColorPickHexagonGray.colorPick"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hexagon-gray",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHexagonGray.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHexagonGray.colorPick))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-pick-hexagon-gray",{attrs:{size:150},model:{value:n.WColorPickHexagonGray.colorPick,callback:function(e){n.$set(n.WColorPickHexagonGray,"colorPick",e)},expression:"WColorPickHexagonGray.colorPick"}})],1)])],1)])])};jw._withStripped=!0;const Rw=wa({render:jw,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-hexagon-gray")])])}]},(function(n){n&&n("data-v-a4514172_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickHexagonGray.vue"},media:void 0})}),Lw,"data-v-a4514172",false,undefined,!1,_a,void 0,void 0);var Dw={components:{},props:{value:{type:String,default:"#FFFFFF"},color:{type:String,default:"#FFFFFF"},colorLeftTop:{type:String,default:"#FFFFFF"},colorBottom:{type:String,default:"#000000"},width:{type:Number,default:200},height:{type:Number,default:200},cursorSize:{type:Number,default:14}},data:function(){return{valueTrans:"#fff",colorTrans:"#fff",colorLeftTopTrans:"#fff",colorBottomTrans:"#fff",curMousedown:!1,curLocLeft:0,curLocTop:0}},mounted:function(){let n=this;n.windowMousemove=e=>{n.curMousedown&&n.updateCurLocByEvent(e)},window.addEventListener("mousemove",n.windowMousemove,!1),n.windowMouseup=e=>{n.curMousedown=!1},window.addEventListener("mouseup",n.windowMouseup,!1)},beforeDestroy:function(){window.removeEventListener("mousemove",this.windowMousemove,!1),window.removeEventListener("mouseup",this.windowMouseup,!1)},computed:{changeParams:function(){let n=this;n.valueTrans=Qi(n.value);let e=Qi(n.color);return e={h:pc.toHsv(e).h,s:1,v:1},e=pc.toHexString(e),n.colorTrans=e,n.colorLeftTopTrans=Qi(n.colorLeftTop),n.colorBottomTrans=Qi(n.colorBottom),n.updateCurLocByValue(),""},changeColor:function(){return this.updateColor(this.color),""}},methods:{updateCurLocByEvent:function(n){let e=this,t=e.$el.getBoundingClientRect(),o=n.clientX-t.left,r=n.clientY-t.top;o=Math.min(Math.max(o,0),e.width-1),r=Math.min(Math.max(r,0),e.height-1),e.curLocLeft=o,e.curLocTop=r,e.updateColor()},updateCurLocByValue:function(){let n=this,e=pc.toHsv(n.valueTrans),t=e.s*(n.width-1),o=(1-e.v)*(n.height-1),r=pc.toHsv(n.colorTrans);e.h===r.h&&(n.curLocLeft=t,n.curLocTop=o)},updateColor:function(){let n=this,e=n.width-1,t=0;e-0>0&&(t=(n.curLocLeft-0)/(e-0));let o,r,i,a=n.height-1,l=0;a-0>0&&(l=(n.curLocTop-0)/(a-0)),o=n.colorTrans,r=n.colorLeftTopTrans,i=pc.mix(o,t,r,1-t,"toRgbString"),o=i,r=n.colorBottomTrans,i=pc.mix(o,1-l,r,l,"toHexString"),i=i.toUpperCase(),n.$emit("input",i)},mousedownCur:function(n){this.curMousedown=!0,this.updateCurLocByEvent(n)}}};const zw=Dw;var Vw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block;",attrs:{changeParams:n.changeParams,changeColor:n.changeColor}},[t("div",{style:"position:relative; width:"+n.width+"px; height:"+n.height+"px;"},[t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            background:linear-gradient(to right, "+n.colorLeftTop+", "+n.colorTrans+");\n        "}),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            background:linear-gradient(to top, "+n.colorBottom+", transparent);\n        "}),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2)-1)+"px; top:"+(n.curLocTop-Math.floor(n.cursorSize/2)-1)+"px;\n            width:"+(n.cursorSize+2)+"px; height:"+(n.cursorSize+2)+"px;\n            background:transparent;\n            border-radius:50%;\n            border:1px solid #666;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2))+"px; top:"+(n.curLocTop-Math.floor(n.cursorSize/2))+"px;\n            width:"+n.cursorSize+"px; height:"+n.cursorSize+"px;\n            background:transparent;\n            border-radius:50%;\n            border:1px solid #fff;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}})])])};Vw._withStripped=!0;const Zw=wa({render:Vw,staticRenderFns:[]},(function(n){n&&n("data-v-fd9322ee_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickHsv.vue"},media:void 0})}),zw,"data-v-fd9322ee",false,undefined,!1,_a,void 0,void 0);const $w={components:{demolink:iu,WColorPickHsv:Zw},props:{},data:function(){return{WColorPickHsv:{colorPick1:"#FF9800",colorPanel1:"#FF9800",colorPick2:"#B35977",colorPanel2:"#930031"},actions:[]}},methods:{}};var Gw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hsv",casename:"default"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Pick:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPick1))])]),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Corner:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPanel1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPanel1))])]),n._v(" "),t("w-color-pick-hsv",{attrs:{color:n.WColorPickHsv.colorPanel1},model:{value:n.WColorPickHsv.colorPick1,callback:function(e){n.$set(n.WColorPickHsv,"colorPick1",e)},expression:"WColorPickHsv.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hsv",casename:"color"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Pick:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPick2))])]),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Corner:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPanel2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPanel2))])]),n._v(" "),t("w-color-pick-hsv",{attrs:{color:n.WColorPickHsv.colorPanel2},model:{value:n.WColorPickHsv.colorPick2,callback:function(e){n.$set(n.WColorPickHsv,"colorPick2",e)},expression:"WColorPickHsv.colorPick2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hsv",casename:"cursorSize"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Pick:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPick1))])]),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Corner:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPanel1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPanel1))])]),n._v(" "),t("w-color-pick-hsv",{attrs:{color:n.WColorPickHsv.colorPanel1,cursorSize:10},model:{value:n.WColorPickHsv.colorPick1,callback:function(e){n.$set(n.WColorPickHsv,"colorPick1",e)},expression:"WColorPickHsv.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hsv",casename:"width & height"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Pick:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPick1))])]),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Corner:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPanel1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPanel1))])]),n._v(" "),t("w-color-pick-hsv",{attrs:{color:n.WColorPickHsv.colorPanel1,width:150,height:150},model:{value:n.WColorPickHsv.colorPick1,callback:function(e){n.$set(n.WColorPickHsv,"colorPick1",e)},expression:"WColorPickHsv.colorPick1"}})],1)])])};Gw._withStripped=!0;const Ew=wa({render:Gw,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-hsv")])])}]},(function(n){n&&n("data-v-4498ba40_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickHsv.vue"},media:void 0})}),$w,"data-v-4498ba40",false,undefined,!1,_a,void 0,void 0);var Xw={components:{},props:{value:{type:String,default:"#FF0000"},width:{type:Number,default:200},height:{type:Number,default:20},cursorSize:{type:Number,default:7}},data:function(){return{valueTrans:"#fff",curMousedown:!1,curLocLeft:0}},mounted:function(){let n=this;n.plotBackground(),n.windowMousemove=e=>{n.curMousedown&&n.updateCurLocByEvent(e)},window.addEventListener("mousemove",n.windowMousemove,!1),n.windowMouseup=e=>{n.curMousedown=!1},window.addEventListener("mouseup",n.windowMouseup,!1)},beforeDestroy:function(){window.removeEventListener("mousemove",this.windowMousemove,!1),window.removeEventListener("mouseup",this.windowMouseup,!1)},computed:{changeValue:function(){let n=this;return n.valueTrans=Qi(n.value),n.updateCurLocByValue(),""}},methods:{plotBackground:function(){let n=this;(async function(){await Nu((()=>sa(n.$refs.cvs)));let e=n.$refs.cvs;e.width=n.width,e.height=n.height;let t=e.getContext("2d"),o=n.width-1;for(let e=0;e<=o;e++){let r={h:e/o*360,s:1,v:1};r=pc.toHexString(r),t.fillStyle=r,t.fillRect(e,0,1,n.height)}})().catch((n=>{console.log(n)}))},updateCurLocByEvent:function(n){let e=this,t=e.$el.getBoundingClientRect(),o=n.clientX-t.left;o=Math.min(Math.max(o,0),e.width-1),e.curLocLeft=o,e.updateColor()},updateCurLocByValue:function(){let n=this,e=pc.toHsv(n.valueTrans).h/360*(n.width-1);n.curLocLeft=e},updateColor:function(){let n=this,e=n.width-1,t=0;e-0-1>0&&(t=(n.curLocLeft-0)/(e-0));let o={h:360*t,s:1,v:1};o=pc.toHexString(o),o=o.toUpperCase(),n.$emit("input",o)},mousedownCur:function(n){this.curMousedown=!0,this.updateCurLocByEvent(n)}}};const Nw=Xw;var Mw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block;",attrs:{changeValue:n.changeValue}},[t("div",{style:"position:relative; width:"+n.width+"px; height:"+n.height+"px;"},[t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            overflow:hidden;\n        "},[t("div",{staticStyle:{display:"flex"}},[t("canvas",{ref:"cvs",style:"width:"+n.width+"px; height:"+n.height+"px;"})])]),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2)-1)+"px; top:-1px;\n            width:"+(n.cursorSize+2)+"px; height:"+(n.height+2)+"px;\n            background:transparent;\n            border:1px solid #666;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2))+"px; top:0px;\n            width:"+n.cursorSize+"px; height:"+n.height+"px;\n            background:transparent;\n            border:1px solid #fff;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}})])])};Mw._withStripped=!0;const Ow=wa({render:Mw,staticRenderFns:[]},(function(n){n&&n("data-v-9d7f91a6_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickHue.vue"},media:void 0})}),Nw,"data-v-9d7f91a6",false,undefined,!1,_a,void 0,void 0);const Kw={components:{demolink:iu,WColorPickHue:Ow},props:{},data:function(){return{WColorPickHue:{colorPick:"#FF9800"},actions:[]}},methods:{}};var Yw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hue",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHue.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHue.colorPick))])]),n._v(" "),t("w-color-pick-hue",{model:{value:n.WColorPickHue.colorPick,callback:function(e){n.$set(n.WColorPickHue,"colorPick",e)},expression:"WColorPickHue.colorPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hue",casename:"cursorSize"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHue.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHue.colorPick))])]),n._v(" "),t("w-color-pick-hue",{attrs:{cursorSize:5},model:{value:n.WColorPickHue.colorPick,callback:function(e){n.$set(n.WColorPickHue,"colorPick",e)},expression:"WColorPickHue.colorPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hue",casename:"width & height"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHue.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHue.colorPick))])]),n._v(" "),t("w-color-pick-hue",{attrs:{width:150,height:15},model:{value:n.WColorPickHue.colorPick,callback:function(e){n.$set(n.WColorPickHue,"colorPick",e)},expression:"WColorPickHue.colorPick"}})],1)])])};Yw._withStripped=!0;const Jw=wa({render:Yw,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-hue")])])}]},(function(n){n&&n("data-v-159b3516_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickHue.vue"},media:void 0})}),Kw,"data-v-159b3516",false,undefined,!1,_a,void 0,void 0);const Uw={components:{},props:{value:{type:Number,default:1},color:{type:String,default:"#000000"},width:{type:Number,default:200},height:{type:Number,default:20},cursorSize:{type:Number,default:7}},data:function(){return{aimg:"data:image/svg+xml;base64,ICAgICAgICAgICAgICAgIDxzdmcgdmlld0JveD0iMCAwIDEwIDEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNkZGQiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmYiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjUiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmYiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNkZGQiIC8+DQogICAgICAgICAgICAgICAgPC9zdmc+",valueTrans:1,colorTrans:"#000",curMousedown:!1,curLocLeft:0}},mounted:function(){let n=this;n.windowMousemove=e=>{n.curMousedown&&n.updateCurLocByEvent(e)},window.addEventListener("mousemove",n.windowMousemove,!1),n.windowMouseup=e=>{n.curMousedown=!1},window.addEventListener("mouseup",n.windowMouseup,!1)},beforeDestroy:function(){window.removeEventListener("mousemove",this.windowMousemove,!1),window.removeEventListener("mouseup",this.windowMouseup,!1)},computed:{changeValue:function(){let n=this;return n.valueTrans=n.value,n.updateCurLocByValue(),""},changeColor:function(){return this.colorTrans=Qi(this.color),""}},methods:{updateCurLocByEvent:function(n){let e=this,t=e.$el.getBoundingClientRect(),o=n.clientX-t.left;o=Math.min(Math.max(o,0),e.width-1),e.curLocLeft=o,e.updateAlpha()},updateCurLocByValue:function(){let n=this,e=n.valueTrans*(n.width-1);n.curLocLeft=e},updateAlpha:function(){let n=this,e=n.width-1,t=0;e-0-1>0&&(t=(n.curLocLeft-0)/(e-0));let o=t;n.$emit("input",o)},mousedownCur:function(n){this.curMousedown=!0,this.updateCurLocByEvent(n)}}};var Qw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block;",attrs:{changeValue:n.changeValue,changeColor:n.changeColor}},[t("div",{style:"position:relative; width:"+n.width+"px; height:"+n.height+"px;"},[t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            background-image: url("+n.aimg+");\n            background-repeat:repeat;\n        "},[n._e()]),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            background:linear-gradient(to left, "+n.colorTrans+", transparent);\n        "}),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2)-1)+"px; top:-1px;\n            width:"+(n.cursorSize+2)+"px; height:"+(n.height+2)+"px;\n            background:transparent;\n            border:1px solid #666;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2))+"px; top:0px;\n            width:"+n.cursorSize+"px; height:"+n.height+"px;\n            background:transparent;\n            border:1px solid #fff;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}})])])};Qw._withStripped=!0;const qw=wa({render:Qw,staticRenderFns:[]},(function(n){n&&n("data-v-5c96a8b6_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickAlpha.vue"},media:void 0})}),Uw,"data-v-5c96a8b6",false,undefined,!1,_a,void 0,void 0);const nW={components:{demolink:iu,WColorPickAlpha:qw},props:{},data:function(){return{WColorPickAlpha:{alphaPick:.5,colorPanel1:"#FF9800",colorPanel2:"#0075C3",colorPanel3:"#930031",colorPanel4:"#95A300"},actions:[]}},methods:{}};var eW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-alpha",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v("Alpha:")]),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickAlpha.alphaPick.toFixed(2)))])]),n._v(" "),t("w-color-pick-alpha",{attrs:{color:n.WColorPickAlpha.colorPanel1},model:{value:n.WColorPickAlpha.alphaPick,callback:function(e){n.$set(n.WColorPickAlpha,"alphaPick",e)},expression:"WColorPickAlpha.alphaPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-alpha",casename:"color"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v("Alpha:")]),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickAlpha.alphaPick.toFixed(2)))])]),n._v(" "),t("w-color-pick-alpha",{attrs:{color:n.WColorPickAlpha.colorPanel2},model:{value:n.WColorPickAlpha.alphaPick,callback:function(e){n.$set(n.WColorPickAlpha,"alphaPick",e)},expression:"WColorPickAlpha.alphaPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-alpha",casename:"cursorSize"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v("Alpha:")]),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickAlpha.alphaPick.toFixed(2)))])]),n._v(" "),t("w-color-pick-alpha",{attrs:{color:n.WColorPickAlpha.colorPanel3,cursorSize:5},model:{value:n.WColorPickAlpha.alphaPick,callback:function(e){n.$set(n.WColorPickAlpha,"alphaPick",e)},expression:"WColorPickAlpha.alphaPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-alpha",casename:"width & height"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v("Alpha:")]),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickAlpha.alphaPick.toFixed(2)))])]),n._v(" "),t("w-color-pick-alpha",{attrs:{color:n.WColorPickAlpha.colorPanel4,width:150,height:15},model:{value:n.WColorPickAlpha.alphaPick,callback:function(e){n.$set(n.WColorPickAlpha,"alphaPick",e)},expression:"WColorPickAlpha.alphaPick"}})],1)])])};eW._withStripped=!0;const tW=wa({render:eW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-alpha")])])}]},(function(n){n&&n("data-v-413b1442_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickAlpha.vue"},media:void 0})}),nW,"data-v-413b1442",false,undefined,!1,_a,void 0,void 0);const oW={components:{demolink:iu,WColorPickStripe:Aw},props:{},data:function(){return{WColorPickStripe:{colorPick1:"rgb(255, 255, 255, 1)",colorPick2:"rgba(68, 23, 255, 0.533)",colorPick3:"rgb(208, 141, 208, 1)"},actions:[]}},methods:{}};var rW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-stripe",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickStripe.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickStripe.colorPick1))])]),n._v(" "),t("w-color-pick-stripe",{model:{value:n.WColorPickStripe.colorPick1,callback:function(e){n.$set(n.WColorPickStripe,"colorPick1",e)},expression:"WColorPickStripe.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-stripe",casename:"width & height"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickStripe.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickStripe.colorPick1))])]),n._v(" "),t("w-color-pick-stripe",{attrs:{width:150,height:15},model:{value:n.WColorPickStripe.colorPick1,callback:function(e){n.$set(n.WColorPickStripe,"colorPick1",e)},expression:"WColorPickStripe.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-stripe",casename:"colorLeft & colorRight"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickStripe.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickStripe.colorPick2))])]),n._v(" "),t("w-color-pick-stripe",{attrs:{colorLeft:"rgba(153, 51, 255, 0.2)",colorRight:"rgba(0, 0, 255, 0.8)"},model:{value:n.WColorPickStripe.colorPick2,callback:function(e){n.$set(n.WColorPickStripe,"colorPick2",e)},expression:"WColorPickStripe.colorPick2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-stripe",casename:"colorNum"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickStripe.colorPick3+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickStripe.colorPick3))])]),n._v(" "),t("w-color-pick-stripe",{attrs:{colorLeft:"#FFCCFF",colorRight:"#660066",width:280,colorNum:14},model:{value:n.WColorPickStripe.colorPick3,callback:function(e){n.$set(n.WColorPickStripe,"colorPick3",e)},expression:"WColorPickStripe.colorPick3"}})],1)])])};rW._withStripped=!0;const iW=wa({render:rW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-stripe")])])}]},(function(n){n&&n("data-v-6cc15c3f_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickStripe.vue"},media:void 0})}),oW,"data-v-6cc15c3f",false,undefined,!1,_a,void 0,void 0);var aW={components:{WColorPickHexagonGray:Fw,WColorPickAlpha:qw},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200},spaceGray:{type:Number,default:5},spaceAlpha:{type:Number,default:8}},data:function(){return{colorPure:"#fff",colorAlpha:1,pick:null}},computed:{changeValue:function(){let n=this,e=Qi(n.value),t=pc.toRgba(e),o={r:t.r,g:t.g,b:t.b},r=pc.toRgbString(o),i=t.a;return n.colorPure=r,n.colorAlpha=i,""},hexagonGrayWidth:function(){return this.size},hexagonGrayHeight:function(){return this.hexagonGrayWidth+this.spaceGray},alphaWidth:function(){return this.size},alphaHeight:function(){return this.alphaWidth/10},width:function(){return this.size},height:function(){let n=this;return n.hexagonGrayHeight+n.spaceAlpha+n.alphaHeight}},methods:{updateColor:function(n,e,t){let o=pc.toRgba(n);o.a=e;let r=pc.toRgbaString(o);this.$emit("input",r)}}};const lW=aW;var sW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; width:"+n.width+"px; height:"+n.height+"px;",attrs:{changeValue:n.changeValue}},[t("div",{staticStyle:{display:"flex"}},[t("WColorPickHexagonGray",{attrs:{size:n.size,space:n.spaceGray,value:n.colorPure},on:{input:function(e){n.colorPure=e,n.updateColor(n.colorPure,n.colorAlpha,"hexagonGray")}}})],1),n._v(" "),t("div",{style:"height:"+n.spaceAlpha+"px;"}),n._v(" "),t("div",{staticStyle:{display:"flex"}},[t("WColorPickAlpha",{attrs:{width:n.alphaWidth,height:n.alphaHeight,cursorSize:7,value:n.colorAlpha,color:n.colorPure},on:{input:function(e){n.colorAlpha=e,n.updateColor(n.colorPure,n.colorAlpha,"alpha")}}})],1)])};sW._withStripped=!0;const cW=wa({render:sW,staticRenderFns:[]},(function(n){n&&n("data-v-58cd89e6_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorSelectPanelBlock.vue"},media:void 0})}),lW,"data-v-58cd89e6",false,undefined,!1,_a,void 0,void 0);const dW={components:{demolink:iu,WColorSelectPanelBlock:cW},props:{},data:function(){return{WColorSelectPanelBlock:{colorPick1:"rgba(255, 102, 0, 1)",colorPick2:"rgba(102, 0, 255, 0.533)",colorPick3:"rgba(153, 255, 51, 0.72)"},actions:[]}},methods:{}};var uW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-block",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelBlock.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelBlock.colorPick1))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-block",{model:{value:n.WColorSelectPanelBlock.colorPick1,callback:function(e){n.$set(n.WColorSelectPanelBlock,"colorPick1",e)},expression:"WColorSelectPanelBlock.colorPick1"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-block",casename:"spaceGray & spaceAlpha"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelBlock.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelBlock.colorPick2))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-block",{attrs:{spaceGray:15,spaceAlpha:15},model:{value:n.WColorSelectPanelBlock.colorPick2,callback:function(e){n.$set(n.WColorSelectPanelBlock,"colorPick2",e)},expression:"WColorSelectPanelBlock.colorPick2"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-block",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelBlock.colorPick3+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelBlock.colorPick3))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-block",{attrs:{size:150},model:{value:n.WColorSelectPanelBlock.colorPick3,callback:function(e){n.$set(n.WColorSelectPanelBlock,"colorPick3",e)},expression:"WColorSelectPanelBlock.colorPick3"}})],1)])],1)])])};uW._withStripped=!0;const pW=wa({render:uW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-select-panel-block")])])}]},(function(n){n&&n("data-v-6bd3b615_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorSelectPanelBlock.vue"},media:void 0})}),dW,"data-v-6bd3b615",false,undefined,!1,_a,void 0,void 0);var mW={components:{WColorPickHsv:Zw,WColorPickHue:Ow,WColorPickAlpha:qw},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200},space:{type:Number,default:10}},data:function(){return{lock:!1,valueTrans:null,colorHue:"#f00",colorPure:"#fff",colorAlpha:1}},computed:{changeParams:function(){let n=this;if(n.value===n.valueTrans)return;if(n.lock)return;n.lock=!0,n.valueTrans=Qi(n.value);let e=pc.toHsva(n.value),t="#f00";{let n={h:e.h,s:1,v:1};t=pc.toHexString(n)}let o="#fff";{let n={h:e.h,s:e.s,v:e.v};o=pc.toHexString(n)}let r=1;return r=e.a,n.colorHue=t,n.colorPure=o,n.colorAlpha=r,""},hsvWidth:function(){return this.size},hsvHeight:function(){return this.hsvWidth},hueWidth:function(){return this.size},hueHeight:function(){return this.hueWidth/10},alphaWidth:function(){return this.size},alphaHeight:function(){return this.alphaWidth/10},width:function(){return this.size},height:function(){let n=this;return n.hsvHeight+n.space+n.hueHeight+n.space+n.alphaHeight}},methods:{updateColor:function(n,e){let t=this;if(t.lock&&"hsv"===e)return void(t.lock=!1);let o=pc.toHsva(t.colorHue),r=pc.toHsva(t.colorPure),i={h:o.h,s:r.s,v:r.v,a:t.colorAlpha};i=pc.toRgbaString(i),t.valueTrans=i,t.$emit("input",i)}}};const vW=mW;var gW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; width:"+n.width+"px; height:"+n.height+"px;",attrs:{changeParams:n.changeParams}},[t("div",{staticStyle:{display:"flex"}},[t("WColorPickHsv",{attrs:{width:n.hsvWidth,height:n.hsvHeight,cursorSize:14,color:n.colorHue},on:{input:function(e){n.updateColor(e,"hsv")}},model:{value:n.colorPure,callback:function(e){n.colorPure=e},expression:"colorPure"}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{staticStyle:{display:"flex"}},[t("WColorPickHue",{attrs:{width:n.hueWidth,height:n.hueHeight,cursorSize:7},on:{input:function(e){n.updateColor(e,"hue")}},model:{value:n.colorHue,callback:function(e){n.colorHue=e},expression:"colorHue"}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{staticStyle:{display:"flex"}},[t("WColorPickAlpha",{attrs:{width:n.alphaWidth,height:n.alphaHeight,colorNum:10,color:n.colorPure},on:{input:function(e){n.updateColor(e,"alpha")}},model:{value:n.colorAlpha,callback:function(e){n.colorAlpha=e},expression:"colorAlpha"}})],1)])};gW._withStripped=!0;const hW=wa({render:gW,staticRenderFns:[]},(function(n){n&&n("data-v-d9a3578a_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorSelectPanelHsva.vue"},media:void 0})}),vW,"data-v-d9a3578a",false,undefined,!1,_a,void 0,void 0);const fW={components:{demolink:iu,WColorSelectPanelHsva:hW},props:{},data:function(){return{WColorSelectPanelHsva:{colorPick1:"rgba(255, 50, 100, 0.5)",colorPick2:"rgba(81, 188, 108, 0.613)",colorPick3:"rgba(100, 50, 255, 0.75)"},actions:[]}},methods:{}};var bW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-hsva",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelHsva.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelHsva.colorPick1))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-hsva",{model:{value:n.WColorSelectPanelHsva.colorPick1,callback:function(e){n.$set(n.WColorSelectPanelHsva,"colorPick1",e)},expression:"WColorSelectPanelHsva.colorPick1"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-hsva",casename:"space"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelHsva.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelHsva.colorPick2))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-hsva",{attrs:{space:15},model:{value:n.WColorSelectPanelHsva.colorPick2,callback:function(e){n.$set(n.WColorSelectPanelHsva,"colorPick2",e)},expression:"WColorSelectPanelHsva.colorPick2"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-hsva",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelHsva.colorPick3+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelHsva.colorPick3))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-hsva",{attrs:{size:150},model:{value:n.WColorSelectPanelHsva.colorPick3,callback:function(e){n.$set(n.WColorSelectPanelHsva,"colorPick3",e)},expression:"WColorSelectPanelHsva.colorPick3"}})],1)])],1)])])};bW._withStripped=!0;const yW=wa({render:bW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-select-panel-hsva")])])}]},(function(n){n&&n("data-v-0a15f52a_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorSelectPanelHsva.vue"},media:void 0})}),fW,"data-v-0a15f52a",false,undefined,!1,_a,void 0,void 0);var kW={components:{WColorSelectPanelBlock:cW,WColorSelectPanelHsva:hW},props:{value:{type:String,default:"#FFFFFF"},type:{type:String,default:"LUMP"},size:{type:Number,default:200},space:{type:Number,default:10},backgroundColor:{type:String,default:"transparent"}},data:function(){return{valueTrans:"#fff",typeTrans:"LUMP"}},computed:{changeValue:function(){return this.valueTrans=Qi(this.value),""},changeType:function(){return this.typeTrans=this.type,""},useBackgroundColor:function(){return Qi(this.backgroundColor)}},methods:{updateColor:function(n,e){this.valueTrans=n,this.$emit("input",n)}}};const xW=kW;var CW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; background:"+n.useBackgroundColor+";",attrs:{changeValue:n.changeValue,changeType:n.changeType}},[t("div",{style:"padding:"+n.space+"px;"},["LUMP"===n.typeTrans?t("div",{staticStyle:{display:"flex"}},[t("WColorSelectPanelBlock",{attrs:{size:n.size,spaceGray:5,spaceAlpha:8,value:n.valueTrans},on:{input:function(e){n.updateColor(e,"block")}}})],1):n._e(),n._v(" "),"HSVA"===n.typeTrans?t("div",{staticStyle:{display:"flex"}},[t("WColorSelectPanelHsva",{attrs:{_size:"size*0.8875",size:n.size,space:10,value:n.valueTrans},on:{input:function(e){n.updateColor(e,"hsva")}}})],1):n._e()])])};CW._withStripped=!0;const SW=wa({render:CW,staticRenderFns:[]},(function(n){n&&n("data-v-1308475d_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorSelectPanel.vue"},media:void 0})}),xW,"data-v-1308475d",false,undefined,!1,_a,void 0,void 0);const wW={components:{demolink:iu,WInputRadio:qb,WColorSelectPanel:SW},props:{},data:function(){return{WColorSelectPanel:{type:"HSVA",colorPick1:"rgba(255, 255, 255, 1)",colorPick2:"rgba(51, 51, 255, 0.533)",colorPick3:"rgba(51, 204, 204, 0.95)",colorPick4:"rgba(0, 204, 0, 0.874)",colorPick5:"rgba(153, 204, 0, 0.874)"},actions:[]}},methods:{}};var WW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanel.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanel.colorPick1))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",border:"1px solid #ddd"}},[t("w-color-select-panel",{model:{value:n.WColorSelectPanel.colorPick1,callback:function(e){n.$set(n.WColorSelectPanel,"colorPick1",e)},expression:"WColorSelectPanel.colorPick1"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel",casename:"type"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanel.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanel.colorPick2))])]),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("w-input-radio",{attrs:{arrange:"horizontal",paddingStyle:{top:0,right:10,bottom:0,left:0},items:["LUMP","HSVA"]},model:{value:n.WColorSelectPanel.type,callback:function(e){n.$set(n.WColorSelectPanel,"type",e)},expression:"WColorSelectPanel.type"}})],1),n._v(" "),t("div",{staticStyle:{display:"inline-block",border:"1px solid #ddd"}},[t("w-color-select-panel",{attrs:{type:n.WColorSelectPanel.type},model:{value:n.WColorSelectPanel.colorPick2,callback:function(e){n.$set(n.WColorSelectPanel,"colorPick2",e)},expression:"WColorSelectPanel.colorPick2"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanel.colorPick3+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanel.colorPick3))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",border:"1px solid #ddd"}},[t("w-color-select-panel",{attrs:{size:150},model:{value:n.WColorSelectPanel.colorPick3,callback:function(e){n.$set(n.WColorSelectPanel,"colorPick3",e)},expression:"WColorSelectPanel.colorPick3"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel",casename:"space"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanel.colorPick4+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanel.colorPick4))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",border:"1px solid #ddd"}},[t("w-color-select-panel",{attrs:{space:0},model:{value:n.WColorSelectPanel.colorPick4,callback:function(e){n.$set(n.WColorSelectPanel,"colorPick4",e)},expression:"WColorSelectPanel.colorPick4"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel",casename:"backgroundColor"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanel.colorPick5+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanel.colorPick5))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"30px",background:"#222"}},[t("w-color-select-panel",{attrs:{backgroundColor:"#111"},model:{value:n.WColorSelectPanel.colorPick5,callback:function(e){n.$set(n.WColorSelectPanel,"colorPick5",e)},expression:"WColorSelectPanel.colorPick5"}})],1)],1)])])};WW._withStripped=!0;const _W=wa({render:WW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-select-panel")])])}]},(function(n){n&&n("data-v-1b12121f_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorSelectPanel.vue"},media:void 0})}),wW,"data-v-1b12121f",false,undefined,!1,_a,void 0,void 0);var IW={components:{WGroupChipRadio:Lu,WPanelLabelItem:Bm,WText:xp,WSlider:af},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200},borderColor:{type:String,default:"#ddd"},borderColorHover:{type:String,default:"#ccc"},borderColorActive:{type:String,default:"#777"},backgroundColor:{type:String,default:"transparent"},menuBorderRadius:{type:Number,default:4},menuBackgroundColor:{type:String,default:"#fff"},menuBackgroundColorHover:{type:String,default:"#f9f9f9"},menuBackgroundColorActive:{type:String,default:"#f2f2f2"},menuTextColor:{type:String,default:"#444"},menuTextColorHover:{type:String,default:"#222"},menuTextColorActive:{type:String,default:"#000"},menuTextFontSize:{type:String,default:"0.8rem"},inputBorderRadius:{type:Number,default:4},inputBorderColor:{type:String,default:"#ccc"},inputBorderColorHover:{type:String,default:"#b5b5b5"},inputBorderColorActive:{type:String,default:"#aaa"},inputBackgroundColor:{type:String,default:"#fff"},inputBackgroundColorHover:{type:String,default:"#fafafa"},inputBackgroundColorActive:{type:String,default:"#f2f2f2"},inputTextColor:{type:String,default:"#000"},inputTextFontSize:{type:String,default:"0.8rem"},inputTextWidth:{type:Number,default:38},inputTextHeight:{type:Number,default:18},inputLabelWidth:{type:Number,default:12},inputLabelColor:{type:String,default:"#666"},inputLabelFontSize:{type:String,default:"0.8rem"},barProgHeight:{type:Number,default:4},barProgColor:{type:String,default:"#74a4d9"},barProgBackgroundColor:{type:String,default:"#eee"},barSliderSize:{type:Number,default:10},barSliderBackgroundColor:{type:String,default:"#1565C0"},barSliderBackgroundColorHover:{type:String,default:"#1976D2"}},data:function(){return{methods:[{text:"RGBA"},{text:"HSVA"}],methodSelect:{text:"RGBA"},lock:!1,valueTrans:null,r:255,g:255,b:255,h:360,s:1,v:1,a:1,rt:255,gt:255,bt:255,ht:360,st:1,vt:1,at:1}},computed:{changeValue:function(){let n=this;n.valueTrans=Qi(n.value);let e=pc.toRgba(n.valueTrans),t=pc.toHsva(n.valueTrans);return n.r=e.r,n.rt=e.r,n.g=e.g,n.gt=e.g,n.b=e.b,n.bt=e.b,n.a=e.a,n.at=e.a,n.h=t.h,n.ht=t.h,n.s=t.s,n.st=t.s,n.v=t.v,n.vt=t.v,""},sliderWidth:function(){let n=this,e=n.size-n.inputTextWidth-n.inputLabelWidth-13;return e=Math.max(e,0),e},useBorderColor:function(){return Qi(this.borderColor)},useBackgroundColor:function(){return Qi(this.backgroundColor)}},methods:{cki255:function(n){if(!os(n))return 0;let e=n;return(n=ji(n))<0?n=0:n>255&&(n=255),n===ji(e)?e:n},cki360:function(n){if(!os(n))return 0;let e=n;return(n=ji(n))<0?n=0:n>360&&(n=360),n===ji(e)?e:n},ckd1:function(n){if(!pp(n))return 0;let e=n;return(n=Ai(n))<0?n=0:n>1&&(n=1),n===Ai(e)?e:n},updateColorCore:function(){let n=this,e=!1,t=!1;{let t=ji(n.rt);n.r!==t&&(n.r=t,e=!0)}{let t=ji(n.gt);n.g!==t&&(n.g=t,e=!0)}{let t=ji(n.bt);n.b!==t&&(n.b=t,e=!0)}{let t=Ai(n.at);n.a!==t&&(n.a=t,e=!0)}{let e=ji(n.ht);n.h!==e&&(n.h=e,t=!0)}{let e=Ai(n.st);n.s!==e&&(n.s=e,t=!0)}{let e=Ai(n.vt);n.v!==e&&(n.v=e,t=!0)}let o=null;e?o={r:n.r,g:n.g,b:n.b,a:n.a}:t&&(o={h:n.h,s:n.s,v:n.v,a:n.a}),na(o)&&(o=pc.toRgbaString(o),n.valueTrans=o,n.$emit("input",o))},updateColor:function(n,e,t){let o=this;setTimeout((()=>{o.updateColorCore()}),1)}}};const TW=IW;var AW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block;",attrs:{changeValue:n.changeValue}},[t("div",{style:"padding-left:10px; margin-bottom:-1px;"},[t("WGroupChipRadio",{attrs:{items:n.methods,paddingStyle:{v:1,h:6},group:!0,groupBorderRadiusStyle:{top:!0},groupShift:0,borderRadius:n.menuBorderRadius,borderColor:n.borderColor,borderColorHover:n.borderColorHover,borderColorActive:n.borderColorActive,backgroundColor:n.menuBackgroundColor,backgroundColorHover:n.menuBackgroundColorHover,backgroundColorActive:n.menuBackgroundColorActive,textColor:n.menuTextColor,textColorHover:n.menuTextColorHover,textColorActive:n.menuTextColorActive,textFontSize:n.menuTextFontSize,marginStyle:{},shadowActive:!1},model:{value:n.methodSelect,callback:function(e){n.methodSelect=e},expression:"methodSelect"}})],1),n._v(" "),t("div",{style:"padding:10px; border:1px solid "+n.useBorderColor+"; background:"+n.useBackgroundColor+";"},[t("div",{directives:[{name:"show",rawName:"v-show",value:"RGBA"===n.methodSelect.text,expression:"methodSelect.text==='RGBA'"}]},[t("WPanelLabelItem",{attrs:{label:"R",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"r")}},model:{value:n.rt,callback:function(e){n.rt=e},expression:"rt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.r},on:{input:function(e){n.rt=e,n.updateColor(e,"","rs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"G",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"g")}},model:{value:n.gt,callback:function(e){n.gt=e},expression:"gt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.g},on:{input:function(e){n.gt=e,n.updateColor(e,"","gs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"B",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"b")}},model:{value:n.bt,callback:function(e){n.bt=e},expression:"bt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.b},on:{input:function(e){n.bt=e,n.updateColor(e,"","bs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"A",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"a")}},model:{value:n.at,callback:function(e){n.at=e},expression:"at"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.a},on:{input:function(e){n.at=e,n.updateColor(e,"","as")}}})],1)]},proxy:!0}])})],1),n._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:"HSVA"===n.methodSelect.text,expression:"methodSelect.text==='HSVA'"}]},[t("WPanelLabelItem",{attrs:{label:"H",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.cki360,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"h")}},model:{value:n.ht,callback:function(e){n.ht=e},expression:"ht"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:360,valueStep:1,valueDecimal:0,value:n.h},on:{input:function(e){n.ht=e,n.updateColor(e,"","hs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"S",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"s")}},model:{value:n.st,callback:function(e){n.st=e},expression:"st"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.s},on:{input:function(e){n.st=e,n.updateColor(e,"","ss")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"V",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"v")}},model:{value:n.vt,callback:function(e){n.vt=e},expression:"vt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.v},on:{input:function(e){n.vt=e,n.updateColor(e,"","bs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"A",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"a")}},model:{value:n.at,callback:function(e){n.at=e},expression:"at"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.a},on:{input:function(e){n.at=e,n.updateColor(e,"","as")}}})],1)]},proxy:!0}])})],1)])])};AW._withStripped=!0;const BW=wa({render:AW,staticRenderFns:[]},(function(n){n&&n("data-v-76492b0d_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorSelectInput.vue"},media:void 0})}),TW,"data-v-76492b0d",false,undefined,!1,_a,void 0,void 0);const HW={components:{demolink:iu,WColorSelectInput:BW},props:{},data:function(){return{WColorSelectInput:{colorPick1:"rgba(121, 51, 255, 0.53)",colorPick2:"rgba(121, 51, 255, 0.53)",colorPick3:"rgba(121, 51, 255, 0.53)",colorPick4:"rgba(121, 51, 255, 0.53)",colorPick5:"rgba(121, 51, 255, 0.53)",colorPick6:"rgba(121, 51, 255, 0.53)",colorPick7:"rgba(121, 51, 255, 0.53)",colorPick8:"rgba(121, 51, 255, 0.53)",colorPick9:"rgba(121, 51, 255, 0.53)",colorPick10:"rgba(121, 51, 255, 0.53)",colorPick11:"rgba(121, 51, 255, 0.53)",colorPick12:"rgba(121, 51, 255, 0.53)",colorPick13:"rgba(121, 51, 255, 0.53)",colorPick14:"rgba(121, 51, 255, 0.53)",colorPick15:"rgba(121, 51, 255, 0.53)",colorPick16:"rgba(121, 51, 255, 0.53)",colorPick17:"rgba(121, 51, 255, 0.53)",colorPick18:"rgba(121, 51, 255, 0.53)"},actions:[]}},methods:{}};var PW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick1))])]),n._v(" "),t("w-color-select-input",{model:{value:n.WColorSelectInput.colorPick1,callback:function(e){n.$set(n.WColorSelectInput,"colorPick1",e)},expression:"WColorSelectInput.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick2))])]),n._v(" "),t("w-color-select-input",{attrs:{size:150},model:{value:n.WColorSelectInput.colorPick2,callback:function(e){n.$set(n.WColorSelectInput,"colorPick2",e)},expression:"WColorSelectInput.colorPick2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"borderColor & borderColorHover & borderColorActive"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick3+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick3))])]),n._v(" "),t("w-color-select-input",{attrs:{borderColor:"#ccc",borderColorHover:"#b2b2b2",borderColorActive:"#999"},model:{value:n.WColorSelectInput.colorPick3,callback:function(e){n.$set(n.WColorSelectInput,"colorPick3",e)},expression:"WColorSelectInput.colorPick3"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"menuBorderRadius"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick4+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick4))])]),n._v(" "),t("w-color-select-input",{attrs:{menuBorderRadius:0},model:{value:n.WColorSelectInput.colorPick4,callback:function(e){n.$set(n.WColorSelectInput,"colorPick4",e)},expression:"WColorSelectInput.colorPick4"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"menuBackgroundColor & menuBackgroundColorHover & menuBackgroundColorActive"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick5+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick5))])]),n._v(" "),t("w-color-select-input",{attrs:{menuBackgroundColor:"#f2f2ff",menuBackgroundColorHover:"#e2e2ee",menuBackgroundColorActive:"#ddf"},model:{value:n.WColorSelectInput.colorPick5,callback:function(e){n.$set(n.WColorSelectInput,"colorPick5",e)},expression:"WColorSelectInput.colorPick5"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"menuTextColor & menuTextColorHover & menuTextColorActive"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick6+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick6))])]),n._v(" "),t("w-color-select-input",{attrs:{menuTextColor:"#666",menuTextColorHover:"#444",menuTextColorActive:"#222"},model:{value:n.WColorSelectInput.colorPick6,callback:function(e){n.$set(n.WColorSelectInput,"colorPick6",e)},expression:"WColorSelectInput.colorPick6"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"menuTextFontSize"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick7+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick7))])]),n._v(" "),t("w-color-select-input",{attrs:{menuTextFontSize:"0.75rem"},model:{value:n.WColorSelectInput.colorPick7,callback:function(e){n.$set(n.WColorSelectInput,"colorPick7",e)},expression:"WColorSelectInput.colorPick7"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputBorderRadius"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick8+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick8))])]),n._v(" "),t("w-color-select-input",{attrs:{inputBorderRadius:0},model:{value:n.WColorSelectInput.colorPick8,callback:function(e){n.$set(n.WColorSelectInput,"colorPick8",e)},expression:"WColorSelectInput.colorPick8"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputBorderColor & inputBorderColorHover & inputBorderColorActive"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick9+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick9))])]),n._v(" "),t("w-color-select-input",{attrs:{inputBorderColor:"#aaa",inputBorderColorHover:"#999",inputBorderColorActive:"#888"},model:{value:n.WColorSelectInput.colorPick9,callback:function(e){n.$set(n.WColorSelectInput,"colorPick9",e)},expression:"WColorSelectInput.colorPick9"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:" inputBackgroundColor & inputBackgroundColorHover & inputBackgroundColorActive"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick10+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick10))])]),n._v(" "),t("w-color-select-input",{attrs:{inputBackgroundColor:"#fff",inputBackgroundColorHover:"#f2f2ff",inputBackgroundColorActive:"#eeeeff"},model:{value:n.WColorSelectInput.colorPick10,callback:function(e){n.$set(n.WColorSelectInput,"colorPick10",e)},expression:"WColorSelectInput.colorPick10"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputTextColor"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick11+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick11))])]),n._v(" "),t("w-color-select-input",{attrs:{inputTextColor:"#329"},model:{value:n.WColorSelectInput.colorPick11,callback:function(e){n.$set(n.WColorSelectInput,"colorPick11",e)},expression:"WColorSelectInput.colorPick11"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputTextFontSize & inputTextWidth & inputTextHeight"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick12+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick12))])]),n._v(" "),t("w-color-select-input",{attrs:{inputTextFontSize:"0.75rem",inputTextWidth:36,inputTextHeight:16},model:{value:n.WColorSelectInput.colorPick12,callback:function(e){n.$set(n.WColorSelectInput,"colorPick12",e)},expression:"WColorSelectInput.colorPick12"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputLabelColor"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick13+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick13))])]),n._v(" "),t("w-color-select-input",{attrs:{inputLabelColor:"#f26"},model:{value:n.WColorSelectInput.colorPick13,callback:function(e){n.$set(n.WColorSelectInput,"colorPick13",e)},expression:"WColorSelectInput.colorPick13"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputLabelWidth & inputLabelFontSize"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick14+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick14))])]),n._v(" "),t("w-color-select-input",{attrs:{inputLabelWidth:10,inputLabelFontSize:"0.75rem"},model:{value:n.WColorSelectInput.colorPick14,callback:function(e){n.$set(n.WColorSelectInput,"colorPick14",e)},expression:"WColorSelectInput.colorPick14"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"barProgHeight"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick15+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick15))])]),n._v(" "),t("w-color-select-input",{attrs:{barProgHeight:6},model:{value:n.WColorSelectInput.colorPick15,callback:function(e){n.$set(n.WColorSelectInput,"colorPick15",e)},expression:"WColorSelectInput.colorPick15"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"barProgColor & barProgBackgroundColor & barSliderBackgroundColor & barSliderBackgroundColorHover"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick16+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick16))])]),n._v(" "),t("w-color-select-input",{attrs:{barProgColor:"#F48FB1",barProgBackgroundColor:"#FCE4EC",barSliderBackgroundColor:"#E91E63",barSliderBackgroundColorHover:"#D81B60"},model:{value:n.WColorSelectInput.colorPick16,callback:function(e){n.$set(n.WColorSelectInput,"colorPick16",e)},expression:"WColorSelectInput.colorPick16"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"barSliderSize"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick17+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick17))])]),n._v(" "),t("w-color-select-input",{attrs:{barSliderSize:14},model:{value:n.WColorSelectInput.colorPick17,callback:function(e){n.$set(n.WColorSelectInput,"colorPick17",e)},expression:"WColorSelectInput.colorPick17"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"menuBorderRadius & borderColor & borderColorHover & borderColorActive & menuBackgroundColor & menuBackgroundColorHover & menuBackgroundColorActive & menuTextColor & menuTextColorHover & menuTextColorActive & menuTextFontSize & inputBorderColor & inputBorderColorHover & inputBorderColorActive & inputBackgroundColor & inputBackgroundColorHover & inputBackgroundColorActive & inputTextColor & inputLabelColor & barProgColor & barProgBackgroundColor & barSliderBackgroundColor & barSliderBackgroundColorHover"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick18+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick18))])]),n._v(" "),t("div",{staticStyle:{padding:"20px",background:"#222"}},[t("w-color-select-input",{attrs:{borderColor:"#444",borderColorHover:"#666",borderColorActive:"#888",backgroundColor:"#111",menuBorderRadius:5,menuBackgroundColor:"#111",menuBackgroundColorHover:"#222",menuBackgroundColorActive:"#333",menuTextColor:"#b2b2b2",menuTextColorHover:"#ccc",menuTextColorActive:"#ddd",menuTextFontSize:"0.75rem",inputBorderColor:"#444",inputBorderColorHover:"#555",inputBorderColorActive:"#666",inputBackgroundColor:"#000",inputBackgroundColorHover:"#111",inputBackgroundColorActive:"#222",inputTextColor:"#ddd",inputLabelColor:"#b9b9b9",barProgColor:"#0097A7",barProgBackgroundColor:"#333",barSliderBackgroundColor:"#4DD0E1",barSliderBackgroundColorHover:"#80DEEA"},model:{value:n.WColorSelectInput.colorPick18,callback:function(e){n.$set(n.WColorSelectInput,"colorPick18",e)},expression:"WColorSelectInput.colorPick18"}})],1)],1)])])};PW._withStripped=!0;const FW=wa({render:PW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-select-input")])])}]},(function(n){n&&n("data-v-f176ed42_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorSelectInput.vue"},media:void 0})}),HW,"data-v-f176ed42",false,undefined,!1,_a,void 0,void 0);var LW={directives:{domresize:Mi()},components:{WPopup:Bp,WColorSelectPanel:SW,WColorSelectInput:BW,WButtonChip:Iu,WIcon:Ha},props:{value:{type:String,default:"#FFFFFF"},type:{type:String,default:"HSVA"},size:{type:Number,default:200},space:{type:Number,default:10},colorBlockSize:{type:Number,default:20},colorBlockBorderWidth:{type:Number,default:1},colorBlockBorderColor:{type:String,default:"#ddd"},showColorText:{type:Boolean,default:!0},colorTextColor:{type:String,default:"#000"},colorTextFontSize:{type:String,default:"0.8rem"},panelBackgroundColor:{type:String,default:"#fff"},toolBackgroundColor:{type:String,default:"#f5f5f5"},menuIconLump:{type:String,default:"M12,5.32L18,8.69V15.31L12,18.68L6,15.31V8.69L12,5.32M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z"},menuIconHsva:{type:String,default:"M19 3V21H15V3H19M14 3V21H10V3H14M9 3V21H5V3H9Z"},menuIconEyeDropper:{type:String,default:"M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z"},menuIconColor:{type:String,default:"#aaa"},menuIconColorHover:{type:String,default:"#999"},menuIconColorActive:{type:String,default:"#666"},menuIconSize:{type:Number,default:20},borderColor:{type:String,default:"#ddd"},borderColorHover:{type:String,default:"#ccc"},borderColorActive:{type:String,default:"#777"},menuBorderRadius:{type:Number,default:4},menuTextColor:{type:String,default:"#444"},menuTextColorHover:{type:String,default:"#222"},menuTextColorActive:{type:String,default:"#000"},menuTextFontSize:{type:String,default:"0.8rem"},menuBackgroundColor:{type:String,default:"#fff"},menuBackgroundColorHover:{type:String,default:"#f9f9f9"},menuBackgroundColorActive:{type:String,default:"#f2f2f2"},inputBorderRadius:{type:Number,default:4},inputBorderColor:{type:String,default:"#ccc"},inputBorderColorHover:{type:String,default:"#b5b5b5"},inputBorderColorActive:{type:String,default:"#aaa"},inputBackgroundColor:{type:String,default:"#fff"},inputBackgroundColorHover:{type:String,default:"#fafafa"},inputBackgroundColorActive:{type:String,default:"#f2f2f2"},inputTextColor:{type:String,default:"#000"},inputTextFontSize:{type:String,default:"0.8rem"},inputTextWidth:{type:Number,default:38},inputTextHeight:{type:Number,default:18},inputLabelWidth:{type:Number,default:12},inputLabelColor:{type:String,default:"#666"},inputLabelFontSize:{type:String,default:"0.8rem"},barProgHeight:{type:Number,default:4},barProgColor:{type:String,default:"#74a4d9"},barProgBackgroundColor:{type:String,default:"#eee"},barSliderSize:{type:Number,default:10},barSliderBackgroundColor:{type:String,default:"#1565C0"},barSliderBackgroundColorHover:{type:String,default:"#1976D2"},popupPlacementDist:{type:Number,default:5},btnText:{type:String,default:"OK"},btnRippleColor:{type:String,default:"rgba(255,255,255,0.4)"},btnPaddingStyle:{type:Object,default:()=>({v:1,h:5})},btnTextColor:{type:String,default:"#000"},btnTextColorHover:{type:String,default:"#222"},btnTextColorActive:{type:String,default:"#222"},btnTextFontSize:{type:String,default:"0.8rem"},btnBorderRadius:{type:Number,default:4},btnBackgroundColor:{type:String,default:"rgb(241,241,241)"},btnBackgroundColorHover:{type:String,default:"rgb(236,236,236)"},btnBackgroundColorActive:{type:String,default:"rgb(236,236,236)"},btnShadow:{type:Boolean,default:!0},editable:{type:Boolean,default:!0}},data:function(){return{mdiLoading:"M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z",show:!1,typeTrans:"HSVA",loadingEyeDropper:!1,layoutType:"horizontal",layoutOverflowY:!1,layoutMinY:300,layoutMaxY:300,selectPanelHeight:0,selectInputHeight:0,valueOri:null,valueNew:null}},computed:{changeValue:function(){let n=this;return n.valueOri=Qi(n.value),n.valueNew=n.valueOri,""},changeType:function(){return this.typeTrans=this.type,""},hasEyeDropper:function(){return Zi(window.EyeDropper)},useColorBlockBorderColor:function(){return Qi(this.colorBlockBorderColor)},useColorTextColor:function(){return Qi(this.colorTextColor)},usePanelBackgroundColor:function(){return Qi(this.panelBackgroundColor)},useToolBackgroundColor:function(){return Qi(this.toolBackgroundColor)},useBorderColor:function(){return Qi(this.borderColor)},usePanelOverflow:function(){let n=this,e=`overflow-y:auto; min-height:${n.layoutMinY}px;`;return n.layoutOverflowY&&(e+=`max-height:${n.layoutMaxY}px;`),e}},methods:{resize:function(n){let e=this;if(!e.show)return;let t=fn(n,"snew.windowWidth",0)>=2*(e.size+20)+3*e.space;e.layoutType=t?"horizontal":"vertical"},resizeContent:function(n){let e=this;if(!e.show)return;let t=fn(n,"snew.windowHeight",0);try{let n=dm(e.$refs.ct),o=500;e.layoutOverflowY=n.top+o>t,e.layoutMaxY=Math.max(t-n.top-30,e.layoutMinY)}catch(n){}},resizeSelectPanel:function(n){if(!this.show)return;let e=fn(n,"snew.clientHeight",0);this.selectPanelHeight=e},resizeSelectInput:function(n){if(!this.show)return;let e=fn(n,"snew.clientHeight",0);this.selectInputHeight=e},openEyeDropper:function(){let n=this;n.hasEyeDropper&&(n.loadingEyeDropper=!0,(new window.EyeDropper).open().then((e=>{let t=fn(e,"sRGBHex","#fff");n.valueNew=t})).catch((n=>{console.log(n)})).finally((()=>{n.loadingEyeDropper=!1})))},clickColor:function(){let n=this;n.editable&&(n.$emit("input",n.valueNew),n.show=!1)}}};const jW=LW;var RW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("WPopup",{directives:[{name:"domresize",rawName:"v-domresize"}],attrs:{minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,placementDistY:n.popupPlacementDist,editable:n.editable,changeValue:n.changeValue,changeType:n.changeType},on:{domresize:n.resize},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("div",{},[t("div",{staticStyle:{display:"flex","align-items":"center",cursor:"pointer",outline:"none"},on:{click:n.clickColor}},[t("div",{style:"border:"+n.colorBlockBorderWidth+"px solid "+n.useColorBlockBorderColor+"; width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; background:"+n.valueOri+";"}),n._v(" "),n.showColorText?[t("div",{style:"padding-left:5px;"}),n._v(" "),t("div",{style:"font-size:"+n.colorTextFontSize+"; color:"+n.useColorTextColor+";"},[n._v("\n                        "+n._s(n.valueOri)+"\n                    ")])]:n._e()],2)])]},proxy:!0},{key:"content",fn:function(){return[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],ref:"ct",style:"background:"+n.usePanelBackgroundColor+"; "+n.usePanelOverflow,on:{domresize:n.resizeContent}},[t("div",{style:"display:flex; padding:"+n.space+"px; border-bottom:1px solid "+n.useBorderColor+"; background:"+n.useToolBackgroundColor+";"},[t("div",{},[t("WIcon",{staticStyle:{cursor:"pointer"},attrs:{icon:n.menuIconHsva,color:"HSVA"===n.typeTrans?n.menuIconColorActive:n.menuIconColor,colorHover:"HSVA"===n.typeTrans?n.menuIconColorActive:n.menuIconColorHover,size:n.menuIconSize},on:{click:function(e){n.typeTrans="HSVA",n.$emit("update:type","HSVA")}}})],1),n._v(" "),t("div",{},[t("WIcon",{staticStyle:{cursor:"pointer"},attrs:{icon:n.menuIconLump,color:"LUMP"===n.typeTrans?n.menuIconColorActive:n.menuIconColor,colorHover:"LUMP"===n.typeTrans?n.menuIconColorActive:n.menuIconColorHover,size:n.menuIconSize},on:{click:function(e){n.typeTrans="LUMP",n.$emit("update:type","LUMP")}}})],1),n._v(" "),n.hasEyeDropper?t("div",{},[t("WIcon",{class:{"icon-spinner":n.loadingEyeDropper},staticStyle:{cursor:"pointer"},attrs:{icon:n.loadingEyeDropper?n.mdiLoading:n.menuIconEyeDropper,color:n.loadingEyeDropper?n.menuIconColor:n.menuIconColorActive,colorHover:n.loadingEyeDropper?n.menuIconColor:n.menuIconColorActive,size:n.menuIconSize},on:{click:n.openEyeDropper}})],1):n._e(),n._v(" "),t("div",{style:"width:100%;"}),n._v(" "),t("div",{ref:"mtb",style:"display:flex; align-items:center;"},[t("div",{style:"display:flex; align-items:center; border:"+n.colorBlockBorderWidth+"px solid "+n.useColorBlockBorderColor+";"},[t("div",{style:"width:"+n.colorBlockSize+"px; min-width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; background:"+n.valueOri+";"}),n._v(" "),t("div",{style:"width:"+n.colorBlockSize+"px; min-width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; background:"+n.valueNew+";"})]),n._v(" "),t("div",{style:"padding-left:"+n.space+"px;"}),n._v(" "),t("WButtonChip",{attrs:{text:n.btnText,rippleColor:n.btnRippleColor,paddingStyle:n.btnPaddingStyle,textColor:n.btnTextColor,textColorHover:n.btnTextColorHover,textColorActive:n.btnTextColorActive,textFontSize:n.btnTextFontSize,borderRadius:n.btnBorderRadius,_borderColor:"btnBorderColor",_borderColorHover:"btnBorderColorHover",_borderColorActive:"btnBorderColorActive",backgroundColor:n.btnBackgroundColor,backgroundColorHover:n.btnBackgroundColorHover,backgroundColorActive:n.btnBackgroundColorActive,shadow:n.btnShadow},on:{click:n.clickColor}})],1)]),n._v(" "),t("div",{style:"padding:"+n.space+"px;"},[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],staticStyle:{display:"flex"},on:{domresize:n.resizeSelectPanel}},[t("WColorSelectPanel",{attrs:{type:n.typeTrans,size:n.size,space:0,backgroundColor:"transparent",menuIconLump:n.menuIconLump,menuIconHsva:n.menuIconHsva,menuIconColor:n.menuIconColor,menuIconColorHover:n.menuIconColorHover,menuIconColorActive:n.menuIconColorActive,menuIconSize:n.menuIconSize},model:{value:n.valueNew,callback:function(e){n.valueNew=e},expression:"valueNew"}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],staticStyle:{display:"flex"},on:{domresize:n.resizeSelectInput}},[t("WColorSelectInput",{attrs:{size:Math.max(n.size-22,0),backgroundColor:"transparent",borderColor:n.borderColor,borderColorHover:n.borderColorHover,borderColorActive:n.borderColorActive,menuBorderRadius:n.menuBorderRadius,menuBackgroundColor:n.menuBackgroundColor,menuBackgroundColorHover:n.menuBackgroundColorHover,menuBackgroundColorActive:n.menuBackgroundColorActive,menuTextColor:n.menuTextColor,menuTextColorHover:n.menuTextColorHover,menuTextColorActive:n.menuTextColorActive,menuTextFontSize:n.menuTextFontSize,inputBorderRadius:n.inputBorderRadius,inputBorderColor:n.inputBorderColor,inputBorderColorHover:n.inputBorderColorHover,inputBorderColorActive:n.inputBorderColorActive,inputBackgroundColor:n.inputBackgroundColor,inputBackgroundColorHover:n.inputBackgroundColorHover,inputBackgroundColorActive:n.inputBackgroundColorActive,inputTextColor:n.inputTextColor,inputTextFontSize:n.inputTextFontSize,inputTextWidth:n.inputTextWidth,inputTextHeight:n.inputTextHeight,inputLabelWidth:n.inputLabelWidth,inputLabelColor:n.inputLabelColor,inputLabelFontSize:n.inputLabelFontSize,barProgHeight:n.barProgHeight,barProgColor:n.barProgColor,barProgBackgroundColor:n.barProgBackgroundColor,barSliderSize:n.barSliderSize,barSliderBackgroundColor:n.barSliderBackgroundColor,barSliderBackgroundColorHover:n.barSliderBackgroundColorHover},model:{value:n.valueNew,callback:function(e){n.valueNew=e},expression:"valueNew"}})],1)])])]},proxy:!0}]),model:{value:n.show,callback:function(e){n.show=e},expression:"show"}})};RW._withStripped=!0;const DW={components:{demolink:iu,WInputRadio:qb,WColorSelect:wa({render:RW,staticRenderFns:[]},(function(n){n&&n("data-v-ba5071e2_0",{source:"\n.icon-spinner[data-v-ba5071e2] {\r\n    animation: spin-animation-data-v-ba5071e2 1.5s infinite;\r\n    display: inline-block;\n}\n@keyframes spin-animation-data-v-ba5071e2 {\n0% {\r\n        transform: rotate(0deg);\n}\n100% {\r\n        transform: rotate(359deg);\n}\n}\r\n",map:{version:3,sources:["D:\\- 006 -        開源\\開源-JS-103-2-w-component-vue\\w-component-vue\\src\\components\\WColorSelect.vue"],names:[],mappings:";AA+wBA;IACA,uDAAA;IACA,qBAAA;AACA;AACA;AACA;QACA,uBAAA;AACA;AACA;QACA,yBAAA;AACA;AACA",file:"WColorSelect.vue",sourcesContent:["<template>\r\n    <WPopup\r\n        :minWidth=\"null\"\r\n        :maxWidth=\"null\"\r\n        :autoFitMinWidth=\"false\"\r\n        :autoFitMaxWidth=\"false\"\r\n        :placementDistY=\"popupPlacementDist\"\r\n        :editable=\"editable\"\r\n        v-model=\"show\"\r\n        :changeValue=\"changeValue\"\r\n        :changeType=\"changeType\"\r\n        v-domresize\r\n        @domresize=\"resize\"\r\n    >\r\n\r\n        <template v-slot:trigger>\r\n\r\n            <div style=\"\">\r\n                \x3c!-- 盡量不要讓display:flex暴露至外層 --\x3e\r\n                <div\r\n                    style=\"display:flex; align-items:center; cursor:pointer; outline:none;\"\r\n                    @click=\"clickColor\"\r\n                >\r\n\r\n                    <div :style=\"`border:${colorBlockBorderWidth}px solid ${useColorBlockBorderColor}; width:${colorBlockSize}px; height:${colorBlockSize}px; background:${valueOri};`\"></div>\r\n\r\n                    <template v-if=\"showColorText\">\r\n\r\n                        <div :style=\"`padding-left:5px;`\"></div>\r\n\r\n                        <div :style=\"`font-size:${colorTextFontSize}; color:${useColorTextColor};`\">\r\n                            {{valueOri}}\r\n                        </div>\r\n\r\n                    </template>\r\n\r\n                </div>\r\n            </div>\r\n\r\n        </template>\r\n\r\n        <template v-slot:content>\r\n\r\n            <div\r\n                ref=\"ct\"\r\n                :style=\"`background:${usePanelBackgroundColor}; ${usePanelOverflow}`\"\r\n                v-domresize\r\n                @domresize=\"resizeContent\"\r\n            >\r\n\r\n                \x3c!-- 上方選單區 --\x3e\r\n                <div :style=\"`display:flex; padding:${space}px; border-bottom:1px solid ${useBorderColor}; background:${useToolBackgroundColor};`\">\r\n\r\n                    <div style=\"\">\r\n                        <WIcon\r\n                            style=\"cursor:pointer;\"\r\n                            :icon=\"menuIconHsva\"\r\n                            :color=\"typeTrans==='HSVA'?menuIconColorActive:menuIconColor\"\r\n                            :colorHover=\"typeTrans==='HSVA'?menuIconColorActive:menuIconColorHover\"\r\n                            :size=\"menuIconSize\"\r\n                            @click=\"typeTrans='HSVA';$emit('update:type','HSVA')\"\r\n                        ></WIcon>\r\n                    </div>\r\n\r\n                    <div style=\"\">\r\n                        <WIcon\r\n                            style=\"cursor:pointer;\"\r\n                            :icon=\"menuIconLump\"\r\n                            :color=\"typeTrans==='LUMP'?menuIconColorActive:menuIconColor\"\r\n                            :colorHover=\"typeTrans==='LUMP'?menuIconColorActive:menuIconColorHover\"\r\n                            :size=\"menuIconSize\"\r\n                            @click=\"typeTrans='LUMP';$emit('update:type','LUMP')\"\r\n                        ></WIcon>\r\n                    </div>\r\n\r\n                    <div style=\"\" v-if=\"hasEyeDropper\">\r\n                        <WIcon\r\n                            :class=\"{'icon-spinner':loadingEyeDropper}\"\r\n                            style=\"cursor:pointer;\"\r\n                            :icon=\"loadingEyeDropper?mdiLoading:menuIconEyeDropper\"\r\n                            :color=\"loadingEyeDropper?menuIconColor:menuIconColorActive\"\r\n                            :colorHover=\"loadingEyeDropper?menuIconColor:menuIconColorActive\"\r\n                            :size=\"menuIconSize\"\r\n                            @click=\"openEyeDropper\"\r\n                        ></WIcon>\r\n                    </div>\r\n\r\n                    <div :style=\"`width:100%;`\"></div>\r\n\r\n                    <div\r\n                        ref=\"mtb\"\r\n                        :style=\"`display:flex; align-items:center;`\"\r\n                    >\r\n\r\n                        <div :style=\"`display:flex; align-items:center; border:${colorBlockBorderWidth}px solid ${useColorBlockBorderColor};`\">\r\n\r\n                            <div :style=\"`width:${colorBlockSize}px; min-width:${colorBlockSize}px; height:${colorBlockSize}px; background:${valueOri};`\"></div>\r\n\r\n                            <div :style=\"`width:${colorBlockSize}px; min-width:${colorBlockSize}px; height:${colorBlockSize}px; background:${valueNew};`\"></div>\r\n\r\n                        </div>\r\n\r\n                        <div :style=\"`padding-left:${space}px;`\"></div>\r\n\r\n                        <WButtonChip\r\n                            :text=\"btnText\"\r\n                            :rippleColor=\"btnRippleColor\"\r\n                            :paddingStyle=\"btnPaddingStyle\"\r\n                            :textColor=\"btnTextColor\"\r\n                            :textColorHover=\"btnTextColorHover\"\r\n                            :textColorActive=\"btnTextColorActive\"\r\n                            :textFontSize=\"btnTextFontSize\"\r\n                            :borderRadius=\"btnBorderRadius\"\r\n                            _borderColor=\"btnBorderColor\"\r\n                            _borderColorHover=\"btnBorderColorHover\"\r\n                            _borderColorActive=\"btnBorderColorActive\"\r\n                            :backgroundColor=\"btnBackgroundColor\"\r\n                            :backgroundColorHover=\"btnBackgroundColorHover\"\r\n                            :backgroundColorActive=\"btnBackgroundColorActive\"\r\n                            :shadow=\"btnShadow\"\r\n                            @click=\"clickColor\"\r\n                        ></WButtonChip>\r\n\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <div :style=\"`padding:${space}px;`\">\r\n\r\n                    \x3c!-- 顏色選擇區 --\x3e\r\n                    <div\r\n                        style=\"display:flex;\"\r\n                        v-domresize\r\n                        @domresize=\"resizeSelectPanel\"\r\n                    >\r\n                        <WColorSelectPanel\r\n                            :type=\"typeTrans\"\r\n                            :size=\"size\"\r\n                            :space=\"0\"\r\n                            :backgroundColor=\"'transparent'\"\r\n                            :menuIconLump=\"menuIconLump\"\r\n                            :menuIconHsva=\"menuIconHsva\"\r\n                            :menuIconColor=\"menuIconColor\"\r\n                            :menuIconColorHover=\"menuIconColorHover\"\r\n                            :menuIconColorActive=\"menuIconColorActive\"\r\n                            :menuIconSize=\"menuIconSize\"\r\n                            v-model=\"valueNew\"\r\n                        ></WColorSelectPanel>\r\n                    </div>\r\n\r\n                    <div :style=\"`height:${space}px;`\"></div>\r\n\r\n                    \x3c!-- 顏色數值區 --\x3e\r\n                    <div\r\n                        style=\"display:flex;\"\r\n                        v-domresize\r\n                        @domresize=\"resizeSelectInput\"\r\n                    >\r\n                        <WColorSelectInput\r\n                            :size=\"Math.max(size-22,0)\"\r\n                            :backgroundColor=\"'transparent'\"\r\n                            :borderColor=\"borderColor\"\r\n                            :borderColorHover=\"borderColorHover\"\r\n                            :borderColorActive=\"borderColorActive\"\r\n                            :menuBorderRadius=\"menuBorderRadius\"\r\n                            :menuBackgroundColor=\"menuBackgroundColor\"\r\n                            :menuBackgroundColorHover=\"menuBackgroundColorHover\"\r\n                            :menuBackgroundColorActive=\"menuBackgroundColorActive\"\r\n                            :menuTextColor=\"menuTextColor\"\r\n                            :menuTextColorHover=\"menuTextColorHover\"\r\n                            :menuTextColorActive=\"menuTextColorActive\"\r\n                            :menuTextFontSize=\"menuTextFontSize\"\r\n                            :inputBorderRadius=\"inputBorderRadius\"\r\n                            :inputBorderColor=\"inputBorderColor\"\r\n                            :inputBorderColorHover=\"inputBorderColorHover\"\r\n                            :inputBorderColorActive=\"inputBorderColorActive\"\r\n                            :inputBackgroundColor=\"inputBackgroundColor\"\r\n                            :inputBackgroundColorHover=\"inputBackgroundColorHover\"\r\n                            :inputBackgroundColorActive=\"inputBackgroundColorActive\"\r\n                            :inputTextColor=\"inputTextColor\"\r\n                            :inputTextFontSize=\"inputTextFontSize\"\r\n                            :inputTextWidth=\"inputTextWidth\"\r\n                            :inputTextHeight=\"inputTextHeight\"\r\n                            :inputLabelWidth=\"inputLabelWidth\"\r\n                            :inputLabelColor=\"inputLabelColor\"\r\n                            :inputLabelFontSize=\"inputLabelFontSize\"\r\n                            :barProgHeight=\"barProgHeight\"\r\n                            :barProgColor=\"barProgColor\"\r\n                            :barProgBackgroundColor=\"barProgBackgroundColor\"\r\n                            :barSliderSize=\"barSliderSize\"\r\n                            :barSliderBackgroundColor=\"barSliderBackgroundColor\"\r\n                            :barSliderBackgroundColorHover=\"barSliderBackgroundColorHover\"\r\n                            v-model=\"valueNew\"\r\n                        ></WColorSelectInput>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </template>\r\n\r\n    </WPopup>\r\n</template>\r\n\r\n<script>\r\nimport { mdiHexagonSlice6, mdiViewParallel, mdiEyedropper, mdiLoading } from '@mdi/js'\r\nimport get from 'lodash-es/get.js'\r\nimport isfun from 'wsemi/src/isfun.mjs'\r\nimport domGetBoudRect from 'wsemi/src/domGetBoudRect.mjs'\r\nimport convertColor from '../js/convertColor.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport WPopup from './WPopup.vue'\r\nimport WColorSelectPanel from './WColorSelectPanel.vue'\r\nimport WColorSelectInput from './WColorSelectInput.vue'\r\nimport WButtonChip from './WButtonChip.vue'\r\nimport WIcon from './WIcon.vue'\r\n\r\n\r\n/**\r\n * @vue-prop {String} [value='#FFFFFF'] 輸入顏色字串，預設'#FFFFFF'\r\n * @vue-prop {String} [type='HSVA'] 輸入選擇顏色方式字串，可選'LUMP'、'HSVA'，預設'HSVA'\r\n * @vue-prop {Number} [size=200] 輸入尺寸數字，代表組件基礎寬度與將自動計算高度，單位px，預設200\r\n * @vue-prop {Number} [space=10] 輸入子組件間距數字，單位px，預設10\r\n * @vue-prop {Number} [colorBlockSize=20] 輸入色塊長與寬度數字，單位px，預設20\r\n * @vue-prop {Number} [colorBlockBorderWidth=1] 輸入色塊框線寬度數字，單位px，預設1\r\n * @vue-prop {String} [colorBlockBorderColor='#ddd'] 輸入色塊框線顏色字串，預設'#ddd'\r\n * @vue-prop {Boolean} [showColorText=true] 輸入是否顯示當前RGBA顏色文字布林值，預設true\r\n * @vue-prop {String} [colorTextColor='#000'] 輸入當前RGBA顏色文字顏色字串，預設'#000'\r\n * @vue-prop {String} [colorTextFontSize='0.8rem'] 輸入當前RGBA顏色文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {String} [panelBackgroundColor='#fff'] 輸入彈窗背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [toolBackgroundColor='#f5f5f5'] 輸入彈窗背景顏色字串，預設'#f5f5f5'\r\n * @vue-prop {String} [menuIconLump=mdiHexagonSlice6] 輸入選單LUMP模式圖標字串，預設mdiHexagonSlice6\r\n * @vue-prop {String} [menuIconHsva=mdiViewParallel] mdiViewParallel\r\n * @vue-prop {String} [menuIconEyeDropper=mdiEyedropper] 輸入取色滴管圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設使用mdi的圖標(mdiEyedropper)\r\n * @vue-prop {String} [menuIconColor='#aaa'] 輸入選單圖標顏色字串，預設'#aaa'\r\n * @vue-prop {String} [menuIconColorHover='#999'] 輸入滑鼠移入時選單圖標顏色字串，預設'#999'\r\n * @vue-prop {String} [menuIconColorActive='#666'] 輸入主動模式時選單圖標顏色字串，預設'#666'\r\n * @vue-prop {Number} [menuIconSize=20] 輸入選單圖標尺寸數字，單位為px，預設20\r\n * @vue-prop {String} [borderColor='#ddd'] 輸入邊框顏色字串，預設'#ddd'\r\n * @vue-prop {String} [borderColorHover='#ccc'] 輸入滑鼠移入時邊框顏色字串，預設'#ccc'\r\n * @vue-prop {String} [borderColorActive='#777'] 輸入主動模式時邊框顏色字串，預設'#777'\r\n * @vue-prop {Number} [menuBorderRadius=4] 輸入框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [menuTextColor='#444'] 輸入選單文字顏色字串，預設'#444'\r\n * @vue-prop {String} [menuTextColorHover='#222'] 輸入滑鼠移入時選單文字顏色字串，預設'#222'\r\n * @vue-prop {String} [menuTextColorActive='#000'] 輸入主動模式時選單文字顏色字串，預設'#000'\r\n * @vue-prop {String} [menuTextFontSize='0.8rem'] 輸入選單文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {String} [menuBackgroundColor='#fff'] 輸入選單背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [menuBackgroundColorHover='#f9f9f9'] 輸入滑鼠移入時選單背景顏色字串，預設'#f9f9f9'\r\n * @vue-prop {String} [menuBackgroundColorActive='#f2f2f2'] 輸入主動模式時選單背景顏色字串，預設'#f2f2f2'\r\n * @vue-prop {Number} [inputBorderRadius=4] 輸入顏色數字輸入區邊框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [inputBorderColor='#ccc'] 輸入顏色數字輸入區邊框顏色字串，預設'#ccc'\r\n * @vue-prop {String} [inputBorderColorHover='#b5b5b5'] 輸入滑鼠移入時顏色數字輸入區邊框顏色字串，預設'#b5b5b5'\r\n * @vue-prop {String} [inputBorderColorActive='#aaa'] 輸入主動模式時顏色數字輸入區邊框顏色字串，預設'#aaa'\r\n * @vue-prop {String} [inputBackgroundColor='#fff'] 輸入顏色數字輸入區背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [inputBackgroundColorHover='#fafafa'] 輸入滑鼠移入時顏色數字輸入區背景顏色字串，預設'#fafafa'\r\n * @vue-prop {String} [inputBackgroundColorActive='#f2f2f2'] 輸入主動模式時顏色數字輸入區背景顏色字串，預設'#f2f2f2'\r\n * @vue-prop {String} [inputTextColor='#000'] 輸入顏色數字輸入區文字顏色字串，預設'#000'\r\n * @vue-prop {String} [inputTextFontSize='0.8rem'] 輸入顏色數字輸入區文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [inputTextWidth=38] 輸入顏色數字輸入區寬度數字，單位為px，預設38\r\n * @vue-prop {Number} [inputTextHeight=18] 輸入顏色數字輸入區高度數字，單位為px，預設18\r\n * @vue-prop {Number} [inputLabelWidth=12] 輸入顏色數字輸入區標題寬度數字，單位為px，預設12\r\n * @vue-prop {String} [inputLabelColor='#666'] 輸入文字顏色字串，預設'#666'\r\n * @vue-prop {String} [inputLabelFontSize='0.8rem'] 輸入文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [barProgHeight=4] 輸入值域條高度數字，單位為px，預設4\r\n * @vue-prop {String} [barProgColor='#74a4d9'] 輸入值域條顏色字串，預設'#74a4d9'\r\n * @vue-prop {String} [barProgBackgroundColor='#eee'] 輸入值域條背景顏色字串，預設'#eee'\r\n * @vue-prop {Number} [barSliderSize=10] 輸入拖曳球尺寸數字，單位為px，預設10\r\n * @vue-prop {String} [barSliderBackgroundColor='#1565C0'] 輸入拖曳球背景顏色字串，預設'#1565C0'\r\n * @vue-prop {String} [barSliderBackgroundColorHover='#1976D2'] 輸入滑鼠移入時拖曳球背景顏色字串，預設'#1976D2'\r\n * @vue-prop {Number} [popupPlacementDist=5] 輸入彈窗距離觸發元素距離數字，單位為px，預設5\r\n * @vue-prop {String} [btnText='OK'] 輸入確認按鈕之文字字串，預設'OK'\r\n * @vue-prop {String} [btnRippleColor='rgba(255,255,255,0.4)'] 輸入確認按鈕之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'\r\n * @vue-prop {Object} [btnPaddingStyle={v:1,h:5}] 輸入確認按鈕之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:1,h:5}\r\n * @vue-prop {String} [btnTextColor='#000'] 輸入確認按鈕之文字顏色字串，預設'#000'\r\n * @vue-prop {String} [btnTextColorHover='#222'] 輸入滑鼠移入時確認按鈕之文字顏色字串，預設'#222'\r\n * @vue-prop {String} [btnTextColorActive='#222'] 輸入主動模式時確認按鈕之文字顏色字串，預設'#222'\r\n * @vue-prop {String} [btnTextFontSize='0.8rem'] 輸入確認按鈕之文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [btnBorderRadius=4] 輸入確認按鈕之框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [btnBackgroundColor='rgb(241,241,241)'] 輸入確認按鈕之背景顏色字串，預設'rgb(241,241,241)'\r\n * @vue-prop {String} [btnBackgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'\r\n * @vue-prop {String} [btnBackgroundColorActive='rgb(236,236,236)'] 輸入主動模式時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'\r\n * @vue-prop {Boolean} [btnShadow=true] 輸入確認按鈕之是否顯示陰影布林值，預設true\r\n * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true\r\n */\r\nexport default {\r\n    directives: {\r\n        domresize: domResize(),\r\n    },\r\n    components: {\r\n        WPopup,\r\n        WColorSelectPanel,\r\n        WColorSelectInput,\r\n        WButtonChip,\r\n        WIcon,\r\n    },\r\n    props: {\r\n        value: {\r\n            type: String,\r\n            default: '#FFFFFF',\r\n        },\r\n        type: {\r\n            type: String,\r\n            default: 'HSVA',\r\n        },\r\n        size: {\r\n            type: Number,\r\n            default: 200,\r\n        },\r\n        space: {\r\n            type: Number,\r\n            default: 10,\r\n        },\r\n        colorBlockSize: {\r\n            type: Number,\r\n            default: 20,\r\n        },\r\n        colorBlockBorderWidth: {\r\n            type: Number,\r\n            default: 1,\r\n        },\r\n        colorBlockBorderColor: {\r\n            type: String,\r\n            default: '#ddd',\r\n        },\r\n        showColorText: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n        colorTextColor: {\r\n            type: String,\r\n            default: '#000',\r\n        },\r\n        colorTextFontSize: {\r\n            type: String,\r\n            default: '0.8rem',\r\n        },\r\n        panelBackgroundColor: {\r\n            type: String,\r\n            default: '#fff',\r\n        },\r\n        toolBackgroundColor: {\r\n            type: String,\r\n            default: '#f5f5f5',\r\n        },\r\n        menuIconLump: {\r\n            type: String,\r\n            default: mdiHexagonSlice6,\r\n        },\r\n        menuIconHsva: {\r\n            type: String,\r\n            default: mdiViewParallel,\r\n        },\r\n        menuIconEyeDropper: {\r\n            type: String,\r\n            default: mdiEyedropper,\r\n        },\r\n        menuIconColor: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        menuIconColorHover: {\r\n            type: String,\r\n            default: '#999',\r\n        },\r\n        menuIconColorActive: {\r\n            type: String,\r\n            default: '#666',\r\n        },\r\n        menuIconSize: {\r\n            type: Number,\r\n            default: 20,\r\n        },\r\n        borderColor: {\r\n            type: String,\r\n            default: '#ddd',\r\n        },\r\n        borderColorHover: {\r\n            type: String,\r\n            default: '#ccc',\r\n        },\r\n        borderColorActive: {\r\n            type: String,\r\n            default: '#777',\r\n        },\r\n        menuBorderRadius: {\r\n            type: Number,\r\n            default: 4,\r\n        },\r\n        menuTextColor: {\r\n            type: String,\r\n            default: '#444',\r\n        },\r\n        menuTextColorHover: {\r\n            type: String,\r\n            default: '#222',\r\n        },\r\n        menuTextColorActive: {\r\n            type: String,\r\n            default: '#000',\r\n        },\r\n        menuTextFontSize: {\r\n            type: String,\r\n            default: '0.8rem',\r\n        },\r\n        menuBackgroundColor: {\r\n            type: String,\r\n            default: '#fff',\r\n        },\r\n        menuBackgroundColorHover: {\r\n            type: String,\r\n            default: '#f9f9f9',\r\n        },\r\n        menuBackgroundColorActive: {\r\n            type: String,\r\n            default: '#f2f2f2',\r\n        },\r\n        inputBorderRadius: {\r\n            type: Number,\r\n            default: 4,\r\n        },\r\n        inputBorderColor: {\r\n            type: String,\r\n            default: '#ccc',\r\n        },\r\n        inputBorderColorHover: {\r\n            type: String,\r\n            default: '#b5b5b5',\r\n        },\r\n        inputBorderColorActive: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        inputBackgroundColor: {\r\n            type: String,\r\n            default: '#fff',\r\n        },\r\n        inputBackgroundColorHover: {\r\n            type: String,\r\n            default: '#fafafa',\r\n        },\r\n        inputBackgroundColorActive: {\r\n            type: String,\r\n            default: '#f2f2f2',\r\n        },\r\n        inputTextColor: {\r\n            type: String,\r\n            default: '#000',\r\n        },\r\n        inputTextFontSize: {\r\n            type: String,\r\n            default: '0.8rem',\r\n        },\r\n        inputTextWidth: {\r\n            type: Number,\r\n            default: 38,\r\n        },\r\n        inputTextHeight: {\r\n            type: Number,\r\n            default: 18,\r\n        },\r\n        inputLabelWidth: {\r\n            type: Number,\r\n            default: 12,\r\n        },\r\n        inputLabelColor: {\r\n            type: String,\r\n            default: '#666',\r\n        },\r\n        inputLabelFontSize: {\r\n            type: String,\r\n            default: '0.8rem',\r\n        },\r\n        barProgHeight: {\r\n            type: Number,\r\n            default: 4,\r\n        },\r\n        barProgColor: {\r\n            type: String,\r\n            default: '#74a4d9',\r\n        },\r\n        barProgBackgroundColor: {\r\n            type: String,\r\n            default: '#eee',\r\n        },\r\n        barSliderSize: {\r\n            type: Number,\r\n            default: 10,\r\n        },\r\n        barSliderBackgroundColor: {\r\n            type: String,\r\n            default: '#1565C0',\r\n        },\r\n        barSliderBackgroundColorHover: {\r\n            type: String,\r\n            default: '#1976D2',\r\n        },\r\n        popupPlacementDist: {\r\n            type: Number,\r\n            default: 5,\r\n        },\r\n        btnText: {\r\n            type: String,\r\n            default: 'OK',\r\n        },\r\n        btnRippleColor: {\r\n            type: String,\r\n            default: 'rgba(255,255,255,0.4)',\r\n        },\r\n        btnPaddingStyle: {\r\n            type: Object,\r\n            default: () => {\r\n                return {\r\n                    v: 1,\r\n                    h: 5,\r\n                }\r\n            },\r\n        },\r\n        btnTextColor: {\r\n            type: String,\r\n            default: '#000',\r\n        },\r\n        btnTextColorHover: {\r\n            type: String,\r\n            default: '#222',\r\n        },\r\n        btnTextColorActive: {\r\n            type: String,\r\n            default: '#222',\r\n        },\r\n        btnTextFontSize: {\r\n            type: String,\r\n            default: '0.8rem',\r\n        },\r\n        btnBorderRadius: {\r\n            type: Number,\r\n            default: 4,\r\n        },\r\n        btnBackgroundColor: {\r\n            type: String,\r\n            default: 'rgb(241,241,241)',\r\n        },\r\n        btnBackgroundColorHover: {\r\n            type: String,\r\n            default: 'rgb(236,236,236)',\r\n        },\r\n        btnBackgroundColorActive: {\r\n            type: String,\r\n            default: 'rgb(236,236,236)',\r\n        },\r\n        btnShadow: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n        editable: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n    },\r\n    data: function() {\r\n        return {\r\n            mdiLoading,\r\n\r\n            show: false,\r\n\r\n            typeTrans: 'HSVA',\r\n\r\n            loadingEyeDropper: false,\r\n\r\n            layoutType: 'horizontal',\r\n            layoutOverflowY: false,\r\n            layoutMinY: 300,\r\n            layoutMaxY: 300,\r\n\r\n            selectPanelHeight: 0,\r\n            selectInputHeight: 0,\r\n\r\n            valueOri: null,\r\n            valueNew: null,\r\n\r\n        }\r\n    },\r\n    computed: {\r\n\r\n        changeValue: function() {\r\n            let vo = this\r\n            vo.valueOri = convertColor(vo.value)\r\n            vo.valueNew = vo.valueOri\r\n            return ''\r\n        },\r\n\r\n        changeType: function() {\r\n            let vo = this\r\n            vo.typeTrans = vo.type\r\n            return ''\r\n        },\r\n\r\n        hasEyeDropper: function() {\r\n            // let vo = this\r\n            let b = isfun(window.EyeDropper)\r\n            // console.log('window.EyeDropper', window.EyeDropper)\r\n            return b\r\n        },\r\n\r\n        useColorBlockBorderColor: function() {\r\n            let vo = this\r\n            return convertColor(vo.colorBlockBorderColor)\r\n        },\r\n\r\n        useColorTextColor: function() {\r\n            let vo = this\r\n            return convertColor(vo.colorTextColor)\r\n        },\r\n\r\n        usePanelBackgroundColor: function() {\r\n            let vo = this\r\n            return convertColor(vo.panelBackgroundColor)\r\n        },\r\n\r\n        useToolBackgroundColor: function() {\r\n            let vo = this\r\n            return convertColor(vo.toolBackgroundColor)\r\n        },\r\n\r\n        useBorderColor: function() {\r\n            let vo = this\r\n            return convertColor(vo.borderColor)\r\n        },\r\n\r\n        usePanelOverflow: function() {\r\n            let vo = this\r\n            let of = `overflow-y:auto; min-height:${vo.layoutMinY}px;`\r\n            if (vo.layoutOverflowY) {\r\n                of += `max-height:${vo.layoutMaxY}px;`\r\n            }\r\n            return of\r\n        },\r\n\r\n    },\r\n    methods: {\r\n\r\n        resize: function(msg) {\r\n            // console.log('methods resize', msg)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.show) {\r\n                return\r\n            }\r\n\r\n            let w = get(msg, 'snew.windowWidth', 0)\r\n            // let h = get(msg, 'snew.windowHeight', 0)\r\n            // console.log('w', w, 'h', h, b)\r\n\r\n            //layoutType\r\n            let b = w >= 2 * (vo.size + 20) + 3 * vo.space //20為組件設定, 不提供外部更改故可直接給\r\n            vo.layoutType = b ? 'horizontal' : 'vertical'\r\n            // console.log('layoutType', vo.layoutType)\r\n\r\n        },\r\n\r\n        resizeContent: function(msg) {\r\n            // console.log('methods resizeContent', msg)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.show) {\r\n                return\r\n            }\r\n\r\n            // let w = get(msg, 'snew.windowWidth', 0)\r\n            let h = get(msg, 'snew.windowHeight', 0)\r\n\r\n            try {\r\n\r\n                // console.log('vo.$refs.ct', vo.$refs.ct)\r\n                let rt = domGetBoudRect(vo.$refs.ct)\r\n                // console.log('rt', rt)\r\n\r\n                //hc, 概估組件size=200時高度\r\n                let hc = 500\r\n\r\n                //layoutOverflowY\r\n                vo.layoutOverflowY = rt.top + hc > h\r\n                // console.log('layoutOverflowY', vo.layoutOverflowY)\r\n\r\n                //layoutMaxY\r\n                vo.layoutMaxY = Math.max(h - rt.top - 30, vo.layoutMinY) //30是概估與底部的留白距離\r\n                // console.log('layoutMaxY', vo.layoutMaxY)\r\n\r\n            }\r\n            catch (err) {}\r\n\r\n        },\r\n\r\n        resizeSelectPanel: function(msg) {\r\n            // console.log('methods resizeSelectPanel', msg)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.show) {\r\n                return\r\n            }\r\n\r\n            let h = get(msg, 'snew.clientHeight', 0)\r\n\r\n            //save\r\n            vo.selectPanelHeight = h\r\n\r\n        },\r\n\r\n        resizeSelectInput: function(msg) {\r\n            // console.log('methods resizeSelectInput', msg)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.show) {\r\n                return\r\n            }\r\n\r\n            let h = get(msg, 'snew.clientHeight', 0)\r\n\r\n            //save\r\n            vo.selectInputHeight = h\r\n\r\n        },\r\n\r\n        openEyeDropper: function() {\r\n            // console.log('methods openEyeDropper')\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.hasEyeDropper) {\r\n                return\r\n            }\r\n\r\n            vo.loadingEyeDropper = true\r\n\r\n            let eyeDropper = new window.EyeDropper()\r\n            eyeDropper\r\n                .open()\r\n                .then((res) => {\r\n                    // console.log('res', res)\r\n                    let hex = get(res, 'sRGBHex', '#fff')\r\n                    vo.valueNew = hex\r\n                })\r\n                .catch((err) => {\r\n                    console.log(err)\r\n                })\r\n                .finally(() => {\r\n                    vo.loadingEyeDropper = false\r\n                })\r\n\r\n        },\r\n\r\n        clickColor: function() {\r\n            // console.log('methods clickColor')\r\n\r\n            let vo = this\r\n\r\n            //check, 不可編輯時跳出\r\n            if (!vo.editable) {\r\n                return\r\n            }\r\n\r\n            //emit\r\n            vo.$emit('input', vo.valueNew)\r\n\r\n            //hide\r\n            vo.show = false\r\n\r\n        },\r\n\r\n    },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.icon-spinner {\r\n    animation: spin-animation 1.5s infinite;\r\n    display: inline-block;\r\n}\r\n@keyframes spin-animation {\r\n    0% {\r\n        transform: rotate(0deg);\r\n    }\r\n    100% {\r\n        transform: rotate(359deg);\r\n    }\r\n}\r\n</style>\r\n"]},media:void 0})}),jW,"data-v-ba5071e2",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{mdiHexagonOutline:"M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z",mdiGradientHorizontal:"M9 13V11H11V13M11 15V13H13V15M11 11V9H13V11M9 9V7H11V9M9 17V15H11V17M3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5M18 15V17H16V15M18 11V13H16V11M18 7V9H16V7M11 5V7H13V5H15V7H13V9H15V11H13V13H15V15H13V17H15V19H13V17H11V19H5V5Z",mdiRouter:"M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2M12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20M13 13V16H15L12 19L9 16H11V13M5 13H8V15L11 12L8 9V11H5M11 11V8H9L12 5L15 8H13V11M19 11H16V9L13 12L16 15V13H19",WColorSelect:{displayColorText:"show",colorPick1:"rgba(121, 51, 255, 0.53)",colorPick2:"rgba(121, 51, 255, 0.53)",colorPick3:"rgba(121, 51, 255, 0.53)",colorPick4:"rgba(121, 51, 255, 0.53)",colorPick5:"rgba(121, 51, 255, 0.53)",colorPick6:"rgba(121, 51, 255, 0.53)",colorPick7:"rgba(121, 51, 255, 0.53)",colorPick8:"rgba(121, 51, 255, 0.53)",colorPick9:"rgba(121, 51, 255, 0.53)",colorPick10:"rgba(121, 51, 255, 0.53)",colorPick11:"rgba(121, 51, 255, 0.53)",colorPick12:"rgba(121, 51, 255, 0.53)",colorPick13:"rgba(121, 51, 255, 0.53)",colorPick14:"rgba(121, 51, 255, 0.53)",colorPick15:"rgba(121, 51, 255, 0.53)",colorPick16:"rgba(121, 51, 255, 0.53)",colorPick17:"rgba(121, 51, 255, 0.53)",colorPick18:"rgba(121, 51, 255, 0.53)",colorPick19:"rgba(121, 51, 255, 0.53)",colorPick20:"rgba(121, 51, 255, 0.53)",colorPick21:"rgba(121, 51, 255, 0.53)",colorPick22:"rgba(121, 51, 255, 0.53)",colorPick23:"rgba(121, 51, 255, 0.53)",colorPick24:"rgba(121, 51, 255, 0.53)",colorPick25:"rgba(121, 51, 255, 0.53)",colorPick26:"rgba(121, 51, 255, 0.53)",colorPick27:"rgba(121, 51, 255, 0.53)",colorPick28:"rgba(121, 51, 255, 0.53)",colorPick29:"rgba(121, 51, 255, 0.53)",colorPick30:"rgba(121, 51, 255, 0.53)",colorPick31:"rgba(121, 51, 255, 0.53)",colorPick32:"rgba(121, 51, 255, 0.53)",colorPick33:"rgba(121, 51, 255, 0.53)",colorPick34:"rgba(121, 51, 255, 0.53)",colorPick35:"rgba(121, 51, 255, 0.53)"},actions:[]}},methods:{}};var zW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"default"}}),n._v(" "),t("w-color-select",{model:{value:n.WColorSelect.colorPick1,callback:function(e){n.$set(n.WColorSelect,"colorPick1",e)},expression:"WColorSelect.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"size"}}),n._v(" "),t("w-color-select",{attrs:{size:250},model:{value:n.WColorSelect.colorPick2,callback:function(e){n.$set(n.WColorSelect,"colorPick2",e)},expression:"WColorSelect.colorPick2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorBlockSize"}}),n._v(" "),t("w-color-select",{attrs:{colorBlockSize:24},model:{value:n.WColorSelect.colorPick3,callback:function(e){n.$set(n.WColorSelect,"colorPick3",e)},expression:"WColorSelect.colorPick3"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorBlockBorderWidth"}}),n._v(" "),t("w-color-select",{attrs:{colorBlockBorderWidth:3},model:{value:n.WColorSelect.colorPick4,callback:function(e){n.$set(n.WColorSelect,"colorPick4",e)},expression:"WColorSelect.colorPick4"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorBlockBorderColor"}}),n._v(" "),t("w-color-select",{attrs:{colorBlockBorderColor:"#000"},model:{value:n.WColorSelect.colorPick5,callback:function(e){n.$set(n.WColorSelect,"colorPick5",e)},expression:"WColorSelect.colorPick5"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"showColorText"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("w-input-radio",{attrs:{arrange:"horizontal",paddingStyle:{top:0,right:10,bottom:0,left:0},items:["show","hide"]},model:{value:n.WColorSelect.displayColorText,callback:function(e){n.$set(n.WColorSelect,"displayColorText",e)},expression:"WColorSelect.displayColorText"}})],1),n._v(" "),t("w-color-select",{attrs:{showColorText:"show"===n.WColorSelect.displayColorText},model:{value:n.WColorSelect.colorPick6,callback:function(e){n.$set(n.WColorSelect,"colorPick6",e)},expression:"WColorSelect.colorPick6"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorTextColor"}}),n._v(" "),t("w-color-select",{attrs:{colorTextColor:"#66a"},model:{value:n.WColorSelect.colorPick7,callback:function(e){n.$set(n.WColorSelect,"colorPick7",e)},expression:"WColorSelect.colorPick7"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorTextFontSize"}}),n._v(" "),t("w-color-select",{attrs:{colorTextFontSize:"0.75rem"},model:{value:n.WColorSelect.colorPick8,callback:function(e){n.$set(n.WColorSelect,"colorPick8",e)},expression:"WColorSelect.colorPick8"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"panelBackgroundColor"}}),n._v(" "),t("w-color-select",{attrs:{panelBackgroundColor:"#e5e5e5"},model:{value:n.WColorSelect.colorPick9,callback:function(e){n.$set(n.WColorSelect,"colorPick9",e)},expression:"WColorSelect.colorPick9"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"toolBackgroundColor"}}),n._v(" "),t("w-color-select",{attrs:{toolBackgroundColor:"#f2f2f2"},model:{value:n.WColorSelect.colorPick10,callback:function(e){n.$set(n.WColorSelect,"colorPick10",e)},expression:"WColorSelect.colorPick10"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuIconLump & menuIconHsva & menuIconEyeDropper"}}),n._v(" "),t("w-color-select",{attrs:{menuIconLump:n.mdiHexagonOutline,menuIconHsva:n.mdiGradientHorizontal,menuIconEyeDropper:n.mdiRouter},model:{value:n.WColorSelect.colorPick11,callback:function(e){n.$set(n.WColorSelect,"colorPick11",e)},expression:"WColorSelect.colorPick11"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuIconColor & menuIconColorHover & menuIconColorActive"}}),n._v(" "),t("w-color-select",{attrs:{menuIconColor:"#ccc",menuIconColorHover:"#aaa",menuIconColorActive:"rgb(70, 103, 181)"},model:{value:n.WColorSelect.colorPick12,callback:function(e){n.$set(n.WColorSelect,"colorPick12",e)},expression:"WColorSelect.colorPick12"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuIconSize"}}),n._v(" "),t("w-color-select",{attrs:{menuIconSize:24},model:{value:n.WColorSelect.colorPick13,callback:function(e){n.$set(n.WColorSelect,"colorPick13",e)},expression:"WColorSelect.colorPick13"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnText"}}),n._v(" "),t("w-color-select",{attrs:{btnText:"Save"},model:{value:n.WColorSelect.colorPick14,callback:function(e){n.$set(n.WColorSelect,"colorPick14",e)},expression:"WColorSelect.colorPick14"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnPaddingStyle"}}),n._v(" "),t("w-color-select",{attrs:{btnPaddingStyle:{v:1,h:4}},model:{value:n.WColorSelect.colorPick15,callback:function(e){n.$set(n.WColorSelect,"colorPick15",e)},expression:"WColorSelect.colorPick15"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnTextColor & btnTextColorHover & btnTextColorActive"}}),n._v(" "),t("w-color-select",{attrs:{btnTextColor:"#777",btnTextColorHover:"#666",btnTextColorActive:"#666"},model:{value:n.WColorSelect.colorPick16,callback:function(e){n.$set(n.WColorSelect,"colorPick16",e)},expression:"WColorSelect.colorPick16"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnTextFontSize"}}),n._v(" "),t("w-color-select",{attrs:{btnTextFontSize:"0.75rem"},model:{value:n.WColorSelect.colorPick17,callback:function(e){n.$set(n.WColorSelect,"colorPick17",e)},expression:"WColorSelect.colorPick17"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnBorderRadius"}}),n._v(" "),t("w-color-select",{attrs:{btnBorderRadius:0},model:{value:n.WColorSelect.colorPick18,callback:function(e){n.$set(n.WColorSelect,"colorPick18",e)},expression:"WColorSelect.colorPick18"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnBackgroundColor & btnBackgroundColorHover & btnBackgroundColorActive"}}),n._v(" "),t("w-color-select",{attrs:{btnBackgroundColor:"#f2f2f2",btnBackgroundColorHover:"#fff",btnBackgroundColorActive:"#fff"},model:{value:n.WColorSelect.colorPick19,callback:function(e){n.$set(n.WColorSelect,"colorPick19",e)},expression:"WColorSelect.colorPick19"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuTextColor & menuTextColorHover & menuTextColorActive"}}),n._v(" "),t("w-color-select",{attrs:{menuTextColor:"#888",menuTextColorHover:"#666",menuTextColorActive:"rgb(70, 103, 181)"},model:{value:n.WColorSelect.colorPick20,callback:function(e){n.$set(n.WColorSelect,"colorPick20",e)},expression:"WColorSelect.colorPick20"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuTextFontSize"}}),n._v(" "),t("w-color-select",{attrs:{menuTextFontSize:"0.75rem"},model:{value:n.WColorSelect.colorPick21,callback:function(e){n.$set(n.WColorSelect,"colorPick21",e)},expression:"WColorSelect.colorPick21"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuBorderRadius"}}),n._v(" "),t("w-color-select",{attrs:{menuBorderRadius:0},model:{value:n.WColorSelect.colorPick22,callback:function(e){n.$set(n.WColorSelect,"colorPick22",e)},expression:"WColorSelect.colorPick22"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuBackgroundColor & menuBackgroundColorHover & menuBackgroundColorActive"}}),n._v(" "),t("w-color-select",{attrs:{menuBackgroundColor:"transparent",menuBackgroundColorHover:"rgba(255,255,255,0.2)",menuBackgroundColorActive:"rgba(70, 103, 181, 0.2)"},model:{value:n.WColorSelect.colorPick23,callback:function(e){n.$set(n.WColorSelect,"colorPick23",e)},expression:"WColorSelect.colorPick23"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputBorderRadius"}}),n._v(" "),t("w-color-select",{attrs:{inputBorderRadius:0},model:{value:n.WColorSelect.colorPick24,callback:function(e){n.$set(n.WColorSelect,"colorPick24",e)},expression:"WColorSelect.colorPick24"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputBorderColor & inputBorderColorHover & inputBorderColorActive"}}),n._v(" "),t("w-color-select",{attrs:{inputBorderColor:"#aaa",inputBorderColorHover:"#999",inputBorderColorActive:"rgb(70, 103, 181)"},model:{value:n.WColorSelect.colorPick25,callback:function(e){n.$set(n.WColorSelect,"colorPick25",e)},expression:"WColorSelect.colorPick25"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:" inputBackgroundColor & inputBackgroundColorHover & inputBackgroundColorActive"}}),n._v(" "),t("w-color-select",{attrs:{inputBackgroundColor:"#fff",inputBackgroundColorHover:"#f2f2ff",inputBackgroundColorActive:"#eeeeff"},model:{value:n.WColorSelect.colorPick26,callback:function(e){n.$set(n.WColorSelect,"colorPick26",e)},expression:"WColorSelect.colorPick26"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputTextColor"}}),n._v(" "),t("w-color-select",{attrs:{inputTextColor:"#329"},model:{value:n.WColorSelect.colorPick27,callback:function(e){n.$set(n.WColorSelect,"colorPick27",e)},expression:"WColorSelect.colorPick27"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputTextFontSize & inputTextWidth & inputTextHeight"}}),n._v(" "),t("w-color-select",{attrs:{inputTextFontSize:"0.75rem",inputTextWidth:36,inputTextHeight:16},model:{value:n.WColorSelect.colorPick28,callback:function(e){n.$set(n.WColorSelect,"colorPick28",e)},expression:"WColorSelect.colorPick28"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputLabelColor"}}),n._v(" "),t("w-color-select",{attrs:{inputLabelColor:"#f26"},model:{value:n.WColorSelect.colorPick29,callback:function(e){n.$set(n.WColorSelect,"colorPick29",e)},expression:"WColorSelect.colorPick29"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputLabelWidth & inputLabelFontSize"}}),n._v(" "),t("w-color-select",{attrs:{inputLabelWidth:10,inputLabelFontSize:"0.75rem"},model:{value:n.WColorSelect.colorPick30,callback:function(e){n.$set(n.WColorSelect,"colorPick30",e)},expression:"WColorSelect.colorPick30"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"barProgHeight"}}),n._v(" "),t("w-color-select",{attrs:{barProgHeight:6},model:{value:n.WColorSelect.colorPick31,callback:function(e){n.$set(n.WColorSelect,"colorPick31",e)},expression:"WColorSelect.colorPick31"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"barProgColor & barProgBackgroundColor & barSliderBackgroundColor & barSliderBackgroundColorHover"}}),n._v(" "),t("w-color-select",{attrs:{barProgColor:"#F48FB1",barProgBackgroundColor:"#FCE4EC",barSliderBackgroundColor:"#E91E63",barSliderBackgroundColorHover:"#D81B60"},model:{value:n.WColorSelect.colorPick32,callback:function(e){n.$set(n.WColorSelect,"colorPick32",e)},expression:"WColorSelect.colorPick32"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"barSliderSize"}}),n._v(" "),t("w-color-select",{attrs:{barSliderSize:14},model:{value:n.WColorSelect.colorPick33,callback:function(e){n.$set(n.WColorSelect,"colorPick33",e)},expression:"WColorSelect.colorPick33"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorBlockBorderColor & colorTextColor & borderColor & borderColorHover & borderColorActive & menuBackgroundColor & menuBackgroundColorHover & menuBackgroundColorActive & menuTextColor & menuTextColorHover & menuTextColorActive & menuTextFontSize & inputBorderColor & inputBorderColorHover & inputBorderColorActive & inputBackgroundColor & inputBackgroundColorHover & inputBackgroundColorActive & inputTextColor & inputLabelColor & barProgColor & barProgBackgroundColor & barSliderBackgroundColor & barSliderBackgroundColorHover & btnTextColor & btnTextColorHover & btnTextColorActive & btnBackgroundColor & btnBackgroundColorHover & btnBackgroundColorActive"}}),n._v(" "),t("div",{staticStyle:{display:"flex",padding:"20px",background:"#222"}},[t("w-color-select",{attrs:{colorBlockBorderColor:"#888",colorTextColor:"#ddd",panelBackgroundColor:"#111",toolBackgroundColor:"#222",menuIconColor:"#666",menuIconColorHover:"#777",menuIconColorActive:"#ddd",borderColor:"#333",borderColorHover:"#333",borderColorActive:"#444",backgroundColor:"#111",menuBackgroundColor:"#111",menuBackgroundColorHover:"#222",menuBackgroundColorActive:"#333",menuTextColor:"#b2b2b2",menuTextColorHover:"#ccc",menuTextColorActive:"#ddd",menuTextFontSize:"0.75rem",inputBorderColor:"#444",inputBorderColorHover:"#555",inputBorderColorActive:"#666",inputBackgroundColor:"#000",inputBackgroundColorHover:"#111",inputBackgroundColorActive:"#222",inputTextColor:"#999",inputLabelColor:"#888",barProgColor:"#888",barProgBackgroundColor:"#222",barSliderBackgroundColor:"#ccc",barSliderBackgroundColorHover:"#ddd",btnTextColor:"#eee",btnTextColorHover:"#fff",btnTextColorActive:"#fff",btnBackgroundColor:"#444",btnBackgroundColorHover:"#555",btnBackgroundColorActive:"#555"},model:{value:n.WColorSelect.colorPick34,callback:function(e){n.$set(n.WColorSelect,"colorPick34",e)},expression:"WColorSelect.colorPick34"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"not editable"}}),n._v(" "),t("w-color-select",{attrs:{editable:!1},model:{value:n.WColorSelect.colorPick35,callback:function(e){n.$set(n.WColorSelect,"colorPick35",e)},expression:"WColorSelect.colorPick35"}})],1)])])};zW._withStripped=!0;var VW={components:{WListHorizontal:za,AppZoneWBadge:pu,AppZoneWPanelStripe:fu,AppZoneWPanelBulge:Du,AppZoneWPanelAvatar:Eu,AppZoneWPanelScrolly:ip,AppZoneWPanelLabelItem:Fm,AppZoneWPanelDivideHorizontal:$m,AppZoneWPanelDivideVertical:Km,AppZoneWPanelScale:nv,AppZoneWIcon:ov,AppZoneWImageLazy:cv,AppZoneWDropfiles:yv,AppZoneWDialog:Bv,AppZoneWConfirm:Rv,AppZoneWTooltip:Vv,AppZoneWPopup:Gv,AppZoneWPopupEditText:Kv,AppZoneWDrawer:cg,AppZoneWButtonChip:mg,AppZoneWButtonCircle:hg,AppZoneWSlider:cf,AppZoneWProgressBar:gf,AppZoneWProgressCircle:kf,AppZoneWSwitch:_f,AppZoneWCheckbox:Ff,AppZoneWLevelGrade:Vf,AppZoneWAlert:Qf,AppZoneWGroupTags:tb,AppZoneWGroupDragdrop:sb,AppZoneWGroupBaggage:gb,AppZoneWListVertical:bb,AppZoneWListHorizontal:xb,AppZoneWListExpand:Hb,AppZoneWListRadio:Zb,AppZoneWListCheck:Eb,AppZoneWInputCheckbox:Jb,AppZoneWInputRadio:ty,AppZoneWGroupChipCheck:iy,AppZoneWGroupChipRadio:sy,AppZoneWGroupIconCheck:gy,AppZoneWGroupIconRadio:ky,AppZoneWText:Sy,AppZoneWTextInt:By,AppZoneWTextarea:Fy,AppZoneWTextSelect:Dy,AppZoneWTextSuggest:$y,AppZoneWTimeday:qy,AppZoneWTimeminute:pk,AppZoneWTimedayRange:yk,AppZoneWTimeminuteRange:_k,AppZoneWDynamicList:Bk,AppZoneWSegmentsVertical:Ek,AppZoneWJsonView:eC,AppZoneWTree:iC,AppZoneWHighchartsVueDyn:gC,AppZoneWHighchartsBitmapDyn:xC,AppZoneWHighstockVueDyn:_C,AppZoneWEchartsVueDyn:PC,AppZoneWThreejsVueDyn:DC,AppZoneWAggridVueDyn:XC,AppZoneWTableDyn:QC,AppZoneWImageViewerDyn:vS,AppZoneWImageCascadingDyn:WS,AppZoneWCkeditorVueDyn:BS,AppZoneWTinymceVueDyn:jS,AppZoneWQuillVueDyn:ZS,AppZoneWVditorDyn:US,AppZoneWLeafletVueDyn:ow,AppZoneWExplorer:bw,AppZoneWColorPickHexagon:Ww,AppZoneWColorPickHexagonGray:Rw,AppZoneWColorPickHsv:Ew,AppZoneWColorPickHue:Jw,AppZoneWColorPickAlpha:tW,AppZoneWColorPickStripe:iW,AppZoneWColorSelectPanelBlock:pW,AppZoneWColorSelectPanelHsva:yW,AppZoneWColorSelectPanel:_W,AppZoneWColorSelectInput:FW,AppZoneWColorSelect:wa({render:zW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-select")])])}]},(function(n){n&&n("data-v-b2211fb2_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorSelect.vue"},media:void 0})}),DW,"data-v-b2211fb2",false,undefined,!1,_a,void 0,void 0)},data:function(){return{kebabCase:Jn,cmpsL1:[{name:"basic",cmps:[{name:"WBadge"},{name:"WSwitch"},{name:"WCheckbox"},{name:"WIcon"},{name:"WImageLazy"},{name:"WDropfiles"},{name:"WSlider"},{name:"WProgressBar"},{name:"WProgressCircle"}]},{name:"special",cmps:[{name:"WLevelGrade"}]},{name:"panel",cmps:[{name:"WPanelStripe"},{name:"WPanelBulge"},{name:"WPanelAvatar"},{name:"WPanelScrolly"},{name:"WPanelLabelItem"},{name:"WPanelDivideHorizontal"},{name:"WPanelDivideVertical"},{name:"WPanelScale"}]},{name:"button",cmps:[{name:"WButtonChip"},{name:"WButtonCircle"}]},{name:"group",cmps:[{name:"WInputCheckbox"},{name:"WInputRadio"},{name:"WGroupChipCheck"},{name:"WGroupChipRadio"},{name:"WGroupIconCheck"},{name:"WGroupIconRadio"},{name:"WGroupTags"},{name:"WGroupDragdrop"},{name:"WGroupBaggage"}]},{name:"list",cmps:[{name:"WListHorizontal"},{name:"WListVertical"},{name:"WListExpand"},{name:"WListRadio"},{name:"WListCheck"},{name:"WDynamicList"},{name:"WSegmentsVertical"}]},{name:"text",cmps:[{name:"WText"},{name:"WTextarea"},{name:"WTextInt"},{name:"WTextSelect"},{name:"WTextSuggest"}]},{name:"time",cmps:[{name:"WTimeday"},{name:"WTimeminute"},{name:"WTimedayRange"},{name:"WTimeminuteRange"}]},{name:"color",cmps:[{name:"pick",cmps:[{name:"WColorPickHexagon"},{name:"WColorPickHexagonGray"},{name:"WColorPickHsv"},{name:"WColorPickHue"},{name:"WColorPickAlpha"},{name:"WColorPickStripe"}]},{name:"select",cmps:[{name:"WColorSelectPanelBlock"},{name:"WColorSelectPanelHsva"},{name:"WColorSelectPanel"},{name:"WColorSelectInput"},{name:"WColorSelect"}]}]},{name:"tree",cmps:[{name:"WTree"},{name:"WExplorer"},{name:"WJsonView"}]},{name:"window",cmps:[{name:"WAlert"},{name:"WDialog"},{name:"WConfirm"},{name:"WTooltip"},{name:"WPopup"},{name:"WPopupEditText"},{name:"WDrawer"}]},{name:"dynamic",cmps:[{name:"plot",cmps:[{name:"WHighchartsVueDyn"},{name:"WHighchartsBitmapDyn"},{name:"WHighstockVueDyn"},{name:"WEchartsVueDyn"},{name:"WThreejsVueDyn"}]},{name:"table",cmps:[{name:"WAggridVueDyn"},{name:"WTableDyn"}]},{name:"map",cmps:[{name:"WLeafletVueDyn"}]},{name:"imageViewer",cmps:[{name:"WImageViewerDyn"},{name:"WImageCascadingDyn"}]},{name:"editor",cmps:[{name:"WTinymceVueDyn"},{name:"WCkeditorVueDyn"},{name:"WQuillVueDyn"},{name:"WVditorDyn"}]}]}],indP1:null,cmpP1:null,cmpsL2:null,indP2:null,cmpP2:null,cmpsL3:null,indP3:null,cmpP3:null,cmpsL4:null,cmpPick:""}},mounted:function(){let n=this;n.indP1=0,n.indP2=0,n.indP3=0;let e=function(n){if(!Ao(n))return{};if(!Ao(n=fn(n=lt(n,"?"),"[1]")))return{};let e=lt(n,"&");return e=Io(e,(function(n){return lt(n,"=")})),e=function(n){for(var e=-1,t=null==n?0:n.length,o={};++e<t;){var r=n[e];o[r[0]]=r[1]}return o}(e),e}(location.href);n.viewPick(fn(e,"cmp",""))},computed:{changeMenus:function(){let n=this;return n.modifyMenus(n.indP1,n.indP2,n.indP3),""},isNarrow:function(){return window.innerWidth<1e3}},methods:{modifyMenus:function(){let n=this,e="";setTimeout((()=>{n.cmpP1=fn(n.cmpsL1,n.indP1,{}),n.cmpsL2=fn(n.cmpP1,"cmps",[]);let t=fn(n.cmpP1,"name","");t&&(e=t)}),50),setTimeout((()=>{let t=fn(n.cmpP1,"cmps",[]);n.cmpP2=fn(t,n.indP2,{}),n.cmpsL3=fn(n.cmpP2,"cmps",[]);let o=fn(n.cmpP2,"name","");o&&(e=o)}),100),setTimeout((()=>{let t=fn(n.cmpP2,"cmps",[]);n.cmpP3=fn(t,n.indP3,{}),n.cmpsL4=fn(n.cmpP3,"cmps",[]);let o=fn(n.cmpP3,"name","");o&&(e=o),n.cmpPick=e}),150)},getInd:function(n,e){let t=-1;return Ve(e,((e,o)=>{if(n.name===e.name)return t=o,!1})),t},viewPick:function(n){let e=this,t=Jn(n),o="",r=[],i=n=>{Ve(n,((n,e)=>{r.push(e);let a=fn(n,"name",""),l=Jn(a),s=fn(n,"cmps",[]);r.join("."),l===t&&(o=JSON.parse(JSON.stringify(r))),s.length>0&&i(s),r.pop()}))};i(e.cmpsL1),e.indP1=fn(o,0,0),e.indP2=fn(o,1,0),e.indP3=fn(o,2,0)}}};const ZW=VW;var $W=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("v-app",{staticStyle:{"font-family":"inherit"},attrs:{changeMenus:n.changeMenus}},[n.isNarrow?n._e():[t("a",{staticClass:"github-corner",staticStyle:{position:"fixed",top:"0",right:"0",border:"0","z-index":"10000"},attrs:{href:"https://github.com/yuda-lyu/w-component-vue","aria-label":"View source on GitHub",target:"_blank",rel:"noreferrer noopener"}},[t("svg",{staticStyle:{fill:"rgba(0,0,0,0.25)",color:"#fff",position:"absolute",top:"0",border:"0",right:"0"},attrs:{width:"80",height:"80",viewBox:"0 0 250 250","aria-hidden":"true"}},[t("path",{attrs:{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"}}),t("path",{staticClass:"octo-arm",staticStyle:{"transform-origin":"130px 106px"},attrs:{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"currentColor"}}),t("path",{staticClass:"octo-body",attrs:{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"currentColor"}})])])],n._v(" "),t("div",{staticStyle:{background:"#f5f5f5"}},[n.cmpsL1&&n.cmpsL1.length>0?t("div",{staticStyle:{width:"calc( 100vw - 20px )","overflow-x":"auto"}},[t("WListHorizontal",{attrs:{items:n.cmpsL1,itemActive:n.cmpP1,itemBackgroundColor:"transparent",itemBackgroundColorHover:"#eee",itemBackgroundColorActive:"#eee",keyText:"name",paddingStyle:{v:12,h:20}},on:{"update:itemActive":[function(e){n.cmpP1=e},function(e){n.indP3=0,n.indP2=0,n.indP1=n.getInd(e,n.cmpsL1)}],"update:item-active":function(e){n.cmpP1=e}},scopedSlots:n._u([{key:"item",fn:function(e){return[t("div",{},[n._v("\n                        "+n._s(n.kebabCase(e.item.name))+"\n                    ")])]}}],null,!1,2540628071)}),n._v(" "),t("div",{staticStyle:{height:"1px",background:"#ddd"}})],1):n._e(),n._v(" "),n.cmpsL2&&n.cmpsL2.length>0?t("div",{staticStyle:{width:"calc( 100vw - 20px )","overflow-x":"auto"}},[t("div",{staticStyle:{height:"3px",background:"#fff"}}),n._v(" "),t("WListHorizontal",{attrs:{items:n.cmpsL2,itemActive:n.cmpP2,itemBackgroundColor:"transparent",itemBackgroundColorHover:"#eee",itemBackgroundColorActive:"#eee",keyText:"name",paddingStyle:{v:12,h:20}},on:{"update:itemActive":[function(e){n.cmpP2=e},function(e){n.indP3=0,n.indP2=n.getInd(e,n.cmpsL2)}],"update:item-active":function(e){n.cmpP2=e}},scopedSlots:n._u([{key:"item",fn:function(e){return[t("div",{},[n._v("\n                        "+n._s(n.kebabCase(e.item.name))+"\n                    ")])]}}],null,!1,2540628071)}),n._v(" "),t("div",{staticStyle:{height:"1px",background:"#ddd"}})],1):n._e(),n._v(" "),n.cmpsL3&&n.cmpsL3.length>0?t("div",{staticStyle:{width:"calc( 100vw - 20px )","overflow-x":"auto"}},[t("div",{staticStyle:{height:"3px",background:"#fff"}}),n._v(" "),t("WListHorizontal",{attrs:{items:n.cmpsL3,itemActive:n.cmpP3,itemBackgroundColor:"transparent",itemBackgroundColorHover:"#eee",itemBackgroundColorActive:"#eee",keyText:"name",paddingStyle:{v:12,h:20}},on:{"update:itemActive":[function(e){n.cmpP3=e},function(e){n.indP3=n.getInd(e,n.cmpsL3)}],"update:item-active":function(e){n.cmpP3=e}},scopedSlots:n._u([{key:"item",fn:function(e){return[t("div",{},[n._v("\n                        "+n._s(n.kebabCase(e.item.name))+"\n                    ")])]}}],null,!1,2540628071)}),n._v(" "),t("div",{staticStyle:{height:"1px",background:"#ddd"}})],1):n._e()]),n._v(" "),t("div",["WBadge"===n.cmpPick?t("AppZoneWBadge"):n._e(),n._v(" "),"WPanelStripe"===n.cmpPick?t("AppZoneWPanelStripe"):n._e(),n._v(" "),"WPanelBulge"===n.cmpPick?t("AppZoneWPanelBulge"):n._e(),n._v(" "),"WPanelAvatar"===n.cmpPick?t("AppZoneWPanelAvatar"):n._e(),n._v(" "),"WPanelScrolly"===n.cmpPick?t("AppZoneWPanelScrolly"):n._e(),n._v(" "),"WPanelLabelItem"===n.cmpPick?t("AppZoneWPanelLabelItem"):n._e(),n._v(" "),"WPanelDivideHorizontal"===n.cmpPick?t("AppZoneWPanelDivideHorizontal"):n._e(),n._v(" "),"WPanelDivideVertical"===n.cmpPick?t("AppZoneWPanelDivideVertical"):n._e(),n._v(" "),"WPanelScale"===n.cmpPick?t("AppZoneWPanelScale"):n._e(),n._v(" "),"WIcon"===n.cmpPick?t("AppZoneWIcon"):n._e(),n._v(" "),"WImageLazy"===n.cmpPick?t("AppZoneWImageLazy"):n._e(),n._v(" "),"WDropfiles"===n.cmpPick?t("AppZoneWDropfiles"):n._e(),n._v(" "),"WButtonChip"===n.cmpPick?t("AppZoneWButtonChip"):n._e(),n._v(" "),"WButtonCircle"===n.cmpPick?t("AppZoneWButtonCircle"):n._e(),n._v(" "),"WSlider"===n.cmpPick?t("AppZoneWSlider"):n._e(),n._v(" "),"WProgressBar"===n.cmpPick?t("AppZoneWProgressBar"):n._e(),n._v(" "),"WProgressCircle"===n.cmpPick?t("AppZoneWProgressCircle"):n._e(),n._v(" "),"WSwitch"===n.cmpPick?t("AppZoneWSwitch"):n._e(),n._v(" "),"WCheckbox"===n.cmpPick?t("AppZoneWCheckbox"):n._e(),n._v(" "),"WLevelGrade"===n.cmpPick?t("AppZoneWLevelGrade"):n._e(),n._v(" "),"WAlert"===n.cmpPick?t("AppZoneWAlert"):n._e(),n._v(" "),"WDialog"===n.cmpPick?t("AppZoneWDialog"):n._e(),n._v(" "),"WConfirm"===n.cmpPick?t("AppZoneWConfirm"):n._e(),n._v(" "),"WTooltip"===n.cmpPick?t("AppZoneWTooltip"):n._e(),n._v(" "),"WPopup"===n.cmpPick?t("AppZoneWPopup"):n._e(),n._v(" "),"WPopupEditText"===n.cmpPick?t("AppZoneWPopupEditText"):n._e(),n._v(" "),"WDrawer"===n.cmpPick?t("AppZoneWDrawer"):n._e(),n._v(" "),"WGroupTags"===n.cmpPick?t("AppZoneWGroupTags"):n._e(),n._v(" "),"WGroupDragdrop"===n.cmpPick?t("AppZoneWGroupDragdrop"):n._e(),n._v(" "),"WGroupBaggage"===n.cmpPick?t("AppZoneWGroupBaggage"):n._e(),n._v(" "),"WListVertical"===n.cmpPick?t("AppZoneWListVertical"):n._e(),n._v(" "),"WListHorizontal"===n.cmpPick?t("AppZoneWListHorizontal"):n._e(),n._v(" "),"WInputRadio"===n.cmpPick?t("AppZoneWInputRadio"):n._e(),n._v(" "),"WInputCheckbox"===n.cmpPick?t("AppZoneWInputCheckbox"):n._e(),n._v(" "),"WListExpand"===n.cmpPick?t("AppZoneWListExpand"):n._e(),n._v(" "),"WListRadio"===n.cmpPick?t("AppZoneWListRadio"):n._e(),n._v(" "),"WListCheck"===n.cmpPick?t("AppZoneWListCheck"):n._e(),n._v(" "),"WGroupChipCheck"===n.cmpPick?t("AppZoneWGroupChipCheck"):n._e(),n._v(" "),"WGroupChipRadio"===n.cmpPick?t("AppZoneWGroupChipRadio"):n._e(),n._v(" "),"WGroupIconCheck"===n.cmpPick?t("AppZoneWGroupIconCheck"):n._e(),n._v(" "),"WGroupIconRadio"===n.cmpPick?t("AppZoneWGroupIconRadio"):n._e(),n._v(" "),"WText"===n.cmpPick?t("AppZoneWText"):n._e(),n._v(" "),"WTextInt"===n.cmpPick?t("AppZoneWTextInt"):n._e(),n._v(" "),"WTextarea"===n.cmpPick?t("AppZoneWTextarea"):n._e(),n._v(" "),"WTextSelect"===n.cmpPick?t("AppZoneWTextSelect"):n._e(),n._v(" "),"WTextSuggest"===n.cmpPick?t("AppZoneWTextSuggest"):n._e(),n._v(" "),"WTimeday"===n.cmpPick?t("AppZoneWTimeday"):n._e(),n._v(" "),"WTimeminute"===n.cmpPick?t("AppZoneWTimeminute"):n._e(),n._v(" "),"WTimedayRange"===n.cmpPick?t("AppZoneWTimedayRange"):n._e(),n._v(" "),"WTimeminuteRange"===n.cmpPick?t("AppZoneWTimeminuteRange"):n._e(),n._v(" "),"WDynamicList"===n.cmpPick?t("AppZoneWDynamicList"):n._e(),n._v(" "),"WSegmentsVertical"===n.cmpPick?t("AppZoneWSegmentsVertical"):n._e(),n._v(" "),"WJsonView"===n.cmpPick?t("AppZoneWJsonView"):n._e(),n._v(" "),"WTree"===n.cmpPick?t("AppZoneWTree"):n._e(),n._v(" "),"WHighchartsVueDyn"===n.cmpPick?t("AppZoneWHighchartsVueDyn"):n._e(),n._v(" "),"WHighchartsBitmapDyn"===n.cmpPick?t("AppZoneWHighchartsBitmapDyn"):n._e(),n._v(" "),"WHighstockVueDyn"===n.cmpPick?t("AppZoneWHighstockVueDyn"):n._e(),n._v(" "),"WEchartsVueDyn"===n.cmpPick?t("AppZoneWEchartsVueDyn"):n._e(),n._v(" "),"WThreejsVueDyn"===n.cmpPick?t("AppZoneWThreejsVueDyn"):n._e(),n._v(" "),"WAggridVueDyn"===n.cmpPick?t("AppZoneWAggridVueDyn"):n._e(),n._v(" "),"WTableDyn"===n.cmpPick?t("AppZoneWTableDyn"):n._e(),n._v(" "),"WImageViewerDyn"===n.cmpPick?t("AppZoneWImageViewerDyn"):n._e(),n._v(" "),"WImageCascadingDyn"===n.cmpPick?t("AppZoneWImageCascadingDyn"):n._e(),n._v(" "),"WCkeditorVueDyn"===n.cmpPick?t("AppZoneWCkeditorVueDyn"):n._e(),n._v(" "),"WTinymceVueDyn"===n.cmpPick?t("AppZoneWTinymceVueDyn"):n._e(),n._v(" "),"WQuillVueDyn"===n.cmpPick?t("AppZoneWQuillVueDyn"):n._e(),n._v(" "),"WVditorDyn"===n.cmpPick?t("AppZoneWVditorDyn"):n._e(),n._v(" "),"WLeafletVueDyn"===n.cmpPick?t("AppZoneWLeafletVueDyn"):n._e(),n._v(" "),"WExplorer"===n.cmpPick?t("AppZoneWExplorer"):n._e(),n._v(" "),"WColorPickHexagon"===n.cmpPick?t("AppZoneWColorPickHexagon"):n._e(),n._v(" "),"WColorPickHexagonGray"===n.cmpPick?t("AppZoneWColorPickHexagonGray"):n._e(),n._v(" "),"WColorPickHsv"===n.cmpPick?t("AppZoneWColorPickHsv"):n._e(),n._v(" "),"WColorPickHue"===n.cmpPick?t("AppZoneWColorPickHue"):n._e(),n._v(" "),"WColorPickAlpha"===n.cmpPick?t("AppZoneWColorPickAlpha"):n._e(),n._v(" "),"WColorPickStripe"===n.cmpPick?t("AppZoneWColorPickStripe"):n._e(),n._v(" "),"WColorSelectPanelBlock"===n.cmpPick?t("AppZoneWColorSelectPanelBlock"):n._e(),n._v(" "),"WColorSelectPanelHsva"===n.cmpPick?t("AppZoneWColorSelectPanelHsva"):n._e(),n._v(" "),"WColorSelectPanel"===n.cmpPick?t("AppZoneWColorSelectPanel"):n._e(),n._v(" "),"WColorSelectInput"===n.cmpPick?t("AppZoneWColorSelectInput"):n._e(),n._v(" "),"WColorSelect"===n.cmpPick?t("AppZoneWColorSelect"):n._e()],1)],2)};$W._withStripped=!0;return wa({render:$W,staticRenderFns:[]},(function(n){n&&n("data-v-d8b1e9aa_0",{source:"\n.v-application--wrap {\n    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */\n    width: 100vw !important;\n    max-width: 100vw !important;\n    font-family: inherit;\n    background: #fff;\n}\n/* 組件所須全域樣式 */\n.head1 {\n    padding: 0px 0px 20px 0px;\n    font-size: 2.5rem;\n}\n.bkh { /* 寬 */\n    padding:20px;\n}\n@media screen and (max-width:800px){ /* 中 */\n.bkh {\n        padding:10px;\n}\n}\n@media screen and (max-width:400px){ /* 窄 */\n.bkh {\n        padding:5px;\n}\n}\n.bk { /* 寬 */\n    display: inline-block;\n    vertical-align: top;\n    padding: 0px 80px 60px 0px;\n}\n@media screen and (max-width:1000px){ /* 中窄 */\n.bk {\n        display: block;\n        padding: 0px 0px 50px 0px;\n}\n}\n.cpitem {\n    transition: all 0.3s;\n    padding: 5px 15px;\n    cursor: pointer;\n}\n.cpitem-white {\n    background: #fff;\n}\n.cpitem-white:hover {\n    background: #eee;\n}\n.cpitem-black {\n    background: #333;\n}\n.cpitem-black:hover {\n    background: #555;\n}\n",map:{version:3,sources:["D:\\- 006 -        開源\\開源-JS-103-2-w-component-vue\\w-component-vue\\src\\App.vue"],names:[],mappings:";AAowBA;IACA,2DAAA;IACA,uBAAA;IACA,2BAAA;IACA,oBAAA;IACA,gBAAA;AACA;AACA,aAAA;AACA;IACA,yBAAA;IACA,iBAAA;AACA;AACA,OAAA,MAAA;IACA,YAAA;AACA;AACA,qCAAA,MAAA;AACA;QACA,YAAA;AACA;AACA;AACA,qCAAA,MAAA;AACA;QACA,WAAA;AACA;AACA;AACA,MAAA,MAAA;IACA,qBAAA;IACA,mBAAA;IACA,0BAAA;AACA;AACA,sCAAA,OAAA;AACA;QACA,cAAA;QACA,yBAAA;AACA;AACA;AACA;IACA,oBAAA;IACA,iBAAA;IACA,eAAA;AACA;AACA;IACA,gBAAA;AACA;AACA;IACA,gBAAA;AACA;AACA;IACA,gBAAA;AACA;AACA;IACA,gBAAA;AACA",file:"App.vue",sourcesContent:["<template>\n    <v-app\n        style=\"font-family:inherit;\"\n        :changeMenus=\"changeMenus\"\n    >\n\n\n        <template v-if=\"!isNarrow\">\n            <a href=\"https://github.com/yuda-lyu/w-component-vue\" class=\"github-corner\" style=\"position:fixed; top:0; right:0; border:0; z-index:10000;\" aria-label=\"View source on GitHub\" target=\"_blank\" rel=\"noreferrer noopener\">\n                <svg width=\"80\" height=\"80\" viewBox=\"0 0 250 250\" style=\"fill:rgba(0,0,0,0.25); color:#fff; position: absolute; top: 0; border: 0; right: 0;\" aria-hidden=\"true\"><path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path><path d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\" fill=\"currentColor\" style=\"transform-origin: 130px 106px;\" class=\"octo-arm\"></path><path d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\" fill=\"currentColor\" class=\"octo-body\"></path></svg>\n            </a>\n        </template>\n\n\n        <div style=\"background:#f5f5f5;\">\n\n            <div style=\"width:calc( 100vw - 20px ); overflow-x:auto;\" v-if=\"cmpsL1 && cmpsL1.length>0\">\n                <WListHorizontal\n                    :items=\"cmpsL1\"\n                    :itemActive.sync=\"cmpP1\"\n                    :itemBackgroundColor=\"'transparent'\"\n                    :itemBackgroundColorHover=\"'#eee'\"\n                    :itemBackgroundColorActive=\"'#eee'\"\n                    :keyText=\"'name'\"\n                    :paddingStyle=\"{v:12,h:20}\"\n                    @update:itemActive=\"(v)=>{indP3=0;indP2=0;indP1=getInd(v,cmpsL1)}\"\n                >\n                    <template v-slot:item=\"props\">\n                        <div style=\"\">\n                            {{kebabCase(props.item.name)}}\n                        </div>\n                    </template>\n                </WListHorizontal>\n                <div style=\"height:1px; background:#ddd;\"></div>\n            </div>\n\n            <div style=\"width:calc( 100vw - 20px ); overflow-x:auto;\" v-if=\"cmpsL2 && cmpsL2.length>0\">\n                <div style=\"height:3px; background:#fff;\"></div>\n                <WListHorizontal\n                    :items=\"cmpsL2\"\n                    :itemActive.sync=\"cmpP2\"\n                    :itemBackgroundColor=\"'transparent'\"\n                    :itemBackgroundColorHover=\"'#eee'\"\n                    :itemBackgroundColorActive=\"'#eee'\"\n                    :keyText=\"'name'\"\n                    :paddingStyle=\"{v:12,h:20}\"\n                    @update:itemActive=\"(v)=>{indP3=0;indP2=getInd(v,cmpsL2)}\"\n                >\n                    <template v-slot:item=\"props\">\n                        <div style=\"\">\n                            {{kebabCase(props.item.name)}}\n                        </div>\n                    </template>\n                </WListHorizontal>\n                <div style=\"height:1px; background:#ddd;\"></div>\n            </div>\n\n            <div style=\"width:calc( 100vw - 20px ); overflow-x:auto;\" v-if=\"cmpsL3 && cmpsL3.length>0\">\n                <div style=\"height:3px; background:#fff;\"></div>\n                <WListHorizontal\n                    :items=\"cmpsL3\"\n                    :itemActive.sync=\"cmpP3\"\n                    :itemBackgroundColor=\"'transparent'\"\n                    :itemBackgroundColorHover=\"'#eee'\"\n                    :itemBackgroundColorActive=\"'#eee'\"\n                    :keyText=\"'name'\"\n                    :paddingStyle=\"{v:12,h:20}\"\n                    @update:itemActive=\"(v)=>{indP3=getInd(v,cmpsL3)}\"\n                >\n                    <template v-slot:item=\"props\">\n                        <div style=\"\">\n                            {{kebabCase(props.item.name)}}\n                        </div>\n                    </template>\n                </WListHorizontal>\n                <div style=\"height:1px; background:#ddd;\"></div>\n            </div>\n\n        </div>\n\n\n        <div>\n\n            <AppZoneWBadge v-if=\"cmpPick==='WBadge'\"></AppZoneWBadge>\n\n            <AppZoneWPanelStripe v-if=\"cmpPick==='WPanelStripe'\"></AppZoneWPanelStripe>\n\n            <AppZoneWPanelBulge v-if=\"cmpPick==='WPanelBulge'\"></AppZoneWPanelBulge>\n\n            <AppZoneWPanelAvatar v-if=\"cmpPick==='WPanelAvatar'\"></AppZoneWPanelAvatar>\n\n            <AppZoneWPanelScrolly v-if=\"cmpPick==='WPanelScrolly'\"></AppZoneWPanelScrolly>\n\n            <AppZoneWPanelLabelItem v-if=\"cmpPick==='WPanelLabelItem'\"></AppZoneWPanelLabelItem>\n\n            <AppZoneWPanelDivideHorizontal v-if=\"cmpPick==='WPanelDivideHorizontal'\"></AppZoneWPanelDivideHorizontal>\n\n            <AppZoneWPanelDivideVertical v-if=\"cmpPick==='WPanelDivideVertical'\"></AppZoneWPanelDivideVertical>\n\n            <AppZoneWPanelScale v-if=\"cmpPick==='WPanelScale'\"></AppZoneWPanelScale>\n\n            <AppZoneWIcon v-if=\"cmpPick==='WIcon'\"></AppZoneWIcon>\n\n            <AppZoneWImageLazy v-if=\"cmpPick==='WImageLazy'\"></AppZoneWImageLazy>\n\n            <AppZoneWDropfiles v-if=\"cmpPick==='WDropfiles'\"></AppZoneWDropfiles>\n\n            <AppZoneWButtonChip v-if=\"cmpPick==='WButtonChip'\"></AppZoneWButtonChip>\n\n            <AppZoneWButtonCircle v-if=\"cmpPick==='WButtonCircle'\"></AppZoneWButtonCircle>\n\n            <AppZoneWSlider v-if=\"cmpPick==='WSlider'\"></AppZoneWSlider>\n\n            <AppZoneWProgressBar v-if=\"cmpPick==='WProgressBar'\"></AppZoneWProgressBar>\n\n            <AppZoneWProgressCircle v-if=\"cmpPick==='WProgressCircle'\"></AppZoneWProgressCircle>\n\n            <AppZoneWSwitch v-if=\"cmpPick==='WSwitch'\"></AppZoneWSwitch>\n\n            <AppZoneWCheckbox v-if=\"cmpPick==='WCheckbox'\"></AppZoneWCheckbox>\n\n            <AppZoneWLevelGrade v-if=\"cmpPick==='WLevelGrade'\"></AppZoneWLevelGrade>\n\n            <AppZoneWAlert v-if=\"cmpPick==='WAlert'\"></AppZoneWAlert>\n\n            <AppZoneWDialog v-if=\"cmpPick==='WDialog'\"></AppZoneWDialog>\n\n            <AppZoneWConfirm v-if=\"cmpPick==='WConfirm'\"></AppZoneWConfirm>\n\n            <AppZoneWTooltip v-if=\"cmpPick==='WTooltip'\"></AppZoneWTooltip>\n\n            <AppZoneWPopup v-if=\"cmpPick==='WPopup'\"></AppZoneWPopup>\n\n            <AppZoneWPopupEditText v-if=\"cmpPick==='WPopupEditText'\"></AppZoneWPopupEditText>\n\n            <AppZoneWDrawer v-if=\"cmpPick==='WDrawer'\"></AppZoneWDrawer>\n\n            <AppZoneWGroupTags v-if=\"cmpPick==='WGroupTags'\"></AppZoneWGroupTags>\n\n            <AppZoneWGroupDragdrop v-if=\"cmpPick==='WGroupDragdrop'\"></AppZoneWGroupDragdrop>\n\n            <AppZoneWGroupBaggage v-if=\"cmpPick==='WGroupBaggage'\"></AppZoneWGroupBaggage>\n\n            <AppZoneWListVertical v-if=\"cmpPick==='WListVertical'\"></AppZoneWListVertical>\n\n            <AppZoneWListHorizontal v-if=\"cmpPick==='WListHorizontal'\"></AppZoneWListHorizontal>\n\n            <AppZoneWInputRadio v-if=\"cmpPick==='WInputRadio'\"></AppZoneWInputRadio>\n\n            <AppZoneWInputCheckbox v-if=\"cmpPick==='WInputCheckbox'\"></AppZoneWInputCheckbox>\n\n            <AppZoneWListExpand v-if=\"cmpPick==='WListExpand'\"></AppZoneWListExpand>\n\n            <AppZoneWListRadio v-if=\"cmpPick==='WListRadio'\"></AppZoneWListRadio>\n\n            <AppZoneWListCheck v-if=\"cmpPick==='WListCheck'\"></AppZoneWListCheck>\n\n            <AppZoneWGroupChipCheck v-if=\"cmpPick==='WGroupChipCheck'\"></AppZoneWGroupChipCheck>\n\n            <AppZoneWGroupChipRadio v-if=\"cmpPick==='WGroupChipRadio'\"></AppZoneWGroupChipRadio>\n\n            <AppZoneWGroupIconCheck v-if=\"cmpPick==='WGroupIconCheck'\"></AppZoneWGroupIconCheck>\n\n            <AppZoneWGroupIconRadio v-if=\"cmpPick==='WGroupIconRadio'\"></AppZoneWGroupIconRadio>\n\n            <AppZoneWText v-if=\"cmpPick==='WText'\"></AppZoneWText>\n\n            <AppZoneWTextInt v-if=\"cmpPick==='WTextInt'\"></AppZoneWTextInt>\n\n            <AppZoneWTextarea v-if=\"cmpPick==='WTextarea'\"></AppZoneWTextarea>\n\n            <AppZoneWTextSelect v-if=\"cmpPick==='WTextSelect'\"></AppZoneWTextSelect>\n\n            <AppZoneWTextSuggest v-if=\"cmpPick==='WTextSuggest'\"></AppZoneWTextSuggest>\n\n            <AppZoneWTimeday v-if=\"cmpPick==='WTimeday'\"></AppZoneWTimeday>\n\n            <AppZoneWTimeminute v-if=\"cmpPick==='WTimeminute'\"></AppZoneWTimeminute>\n\n            <AppZoneWTimedayRange v-if=\"cmpPick==='WTimedayRange'\"></AppZoneWTimedayRange>\n\n            <AppZoneWTimeminuteRange v-if=\"cmpPick==='WTimeminuteRange'\"></AppZoneWTimeminuteRange>\n\n            <AppZoneWDynamicList v-if=\"cmpPick==='WDynamicList'\"></AppZoneWDynamicList>\n\n            <AppZoneWSegmentsVertical v-if=\"cmpPick==='WSegmentsVertical'\"></AppZoneWSegmentsVertical>\n\n            <AppZoneWJsonView v-if=\"cmpPick==='WJsonView'\"></AppZoneWJsonView>\n\n            <AppZoneWTree v-if=\"cmpPick==='WTree'\"></AppZoneWTree>\n\n            <AppZoneWHighchartsVueDyn v-if=\"cmpPick==='WHighchartsVueDyn'\"></AppZoneWHighchartsVueDyn>\n\n            <AppZoneWHighchartsBitmapDyn v-if=\"cmpPick==='WHighchartsBitmapDyn'\"></AppZoneWHighchartsBitmapDyn>\n\n            <AppZoneWHighstockVueDyn v-if=\"cmpPick==='WHighstockVueDyn'\"></AppZoneWHighstockVueDyn>\n\n            <AppZoneWEchartsVueDyn v-if=\"cmpPick==='WEchartsVueDyn'\"></AppZoneWEchartsVueDyn>\n\n            <AppZoneWThreejsVueDyn v-if=\"cmpPick==='WThreejsVueDyn'\"></AppZoneWThreejsVueDyn>\n\n            <AppZoneWAggridVueDyn v-if=\"cmpPick==='WAggridVueDyn'\"></AppZoneWAggridVueDyn>\n\n            <AppZoneWTableDyn v-if=\"cmpPick==='WTableDyn'\"></AppZoneWTableDyn>\n\n            <AppZoneWImageViewerDyn v-if=\"cmpPick==='WImageViewerDyn'\"></AppZoneWImageViewerDyn>\n\n            <AppZoneWImageCascadingDyn v-if=\"cmpPick==='WImageCascadingDyn'\"></AppZoneWImageCascadingDyn>\n\n            <AppZoneWCkeditorVueDyn v-if=\"cmpPick==='WCkeditorVueDyn'\"></AppZoneWCkeditorVueDyn>\n\n            <AppZoneWTinymceVueDyn v-if=\"cmpPick==='WTinymceVueDyn'\"></AppZoneWTinymceVueDyn>\n\n            <AppZoneWQuillVueDyn v-if=\"cmpPick==='WQuillVueDyn'\"></AppZoneWQuillVueDyn>\n\n            <AppZoneWVditorDyn v-if=\"cmpPick==='WVditorDyn'\"></AppZoneWVditorDyn>\n\n            <AppZoneWLeafletVueDyn v-if=\"cmpPick==='WLeafletVueDyn'\"></AppZoneWLeafletVueDyn>\n\n            <AppZoneWExplorer v-if=\"cmpPick==='WExplorer'\"></AppZoneWExplorer>\n\n            <AppZoneWColorPickHexagon v-if=\"cmpPick==='WColorPickHexagon'\"></AppZoneWColorPickHexagon>\n\n            <AppZoneWColorPickHexagonGray v-if=\"cmpPick==='WColorPickHexagonGray'\"></AppZoneWColorPickHexagonGray>\n\n            <AppZoneWColorPickHsv v-if=\"cmpPick==='WColorPickHsv'\"></AppZoneWColorPickHsv>\n\n            <AppZoneWColorPickHue v-if=\"cmpPick==='WColorPickHue'\"></AppZoneWColorPickHue>\n\n            <AppZoneWColorPickAlpha v-if=\"cmpPick==='WColorPickAlpha'\"></AppZoneWColorPickAlpha>\n\n            <AppZoneWColorPickStripe v-if=\"cmpPick==='WColorPickStripe'\"></AppZoneWColorPickStripe>\n\n            <AppZoneWColorSelectPanelBlock v-if=\"cmpPick==='WColorSelectPanelBlock'\"></AppZoneWColorSelectPanelBlock>\n\n            <AppZoneWColorSelectPanelHsva v-if=\"cmpPick==='WColorSelectPanelHsva'\"></AppZoneWColorSelectPanelHsva>\n\n            <AppZoneWColorSelectPanel v-if=\"cmpPick==='WColorSelectPanel'\"></AppZoneWColorSelectPanel>\n\n            <AppZoneWColorSelectInput v-if=\"cmpPick==='WColorSelectInput'\"></AppZoneWColorSelectInput>\n\n            <AppZoneWColorSelect v-if=\"cmpPick==='WColorSelect'\"></AppZoneWColorSelect>\n\n\n        </div>\n\n\n    </v-app>\n</template>\n\n<script>\nimport get from 'lodash-es/get.js'\nimport kebabCase from 'lodash-es/kebabCase.js'\nimport each from 'lodash-es/each.js'\n// import cloneDeep from 'lodash-es/cloneDeep.js'\nimport urlParse from 'wsemi/src/urlParse.mjs'\nimport WListHorizontal from './components/WListHorizontal.vue'\nimport AppZoneWBadge from './AppZoneWBadge.vue'\nimport AppZoneWPanelStripe from './AppZoneWPanelStripe.vue'\nimport AppZoneWPanelBulge from './AppZoneWPanelBulge.vue'\nimport AppZoneWPanelAvatar from './AppZoneWPanelAvatar.vue'\nimport AppZoneWPanelScrolly from './AppZoneWPanelScrolly.vue'\nimport AppZoneWPanelLabelItem from './AppZoneWPanelLabelItem.vue'\nimport AppZoneWPanelDivideHorizontal from './AppZoneWPanelDivideHorizontal.vue'\nimport AppZoneWPanelDivideVertical from './AppZoneWPanelDivideVertical.vue'\nimport AppZoneWPanelScale from './AppZoneWPanelScale.vue'\nimport AppZoneWIcon from './AppZoneWIcon.vue'\nimport AppZoneWImageLazy from './AppZoneWImageLazy.vue'\nimport AppZoneWDropfiles from './AppZoneWDropfiles.vue'\nimport AppZoneWDialog from './AppZoneWDialog.vue'\nimport AppZoneWConfirm from './AppZoneWConfirm.vue'\nimport AppZoneWTooltip from './AppZoneWTooltip.vue'\nimport AppZoneWPopup from './AppZoneWPopup.vue'\nimport AppZoneWPopupEditText from './AppZoneWPopupEditText.vue'\nimport AppZoneWDrawer from './AppZoneWDrawer.vue'\nimport AppZoneWButtonChip from './AppZoneWButtonChip.vue'\nimport AppZoneWButtonCircle from './AppZoneWButtonCircle.vue'\nimport AppZoneWSlider from './AppZoneWSlider.vue'\nimport AppZoneWProgressBar from './AppZoneWProgressBar.vue'\nimport AppZoneWProgressCircle from './AppZoneWProgressCircle.vue'\nimport AppZoneWSwitch from './AppZoneWSwitch.vue'\nimport AppZoneWCheckbox from './AppZoneWCheckbox.vue'\nimport AppZoneWLevelGrade from './AppZoneWLevelGrade.vue'\nimport AppZoneWAlert from './AppZoneWAlert.vue'\nimport AppZoneWGroupTags from './AppZoneWGroupTags.vue'\nimport AppZoneWGroupDragdrop from './AppZoneWGroupDragdrop.vue'\nimport AppZoneWGroupBaggage from './AppZoneWGroupBaggage.vue'\nimport AppZoneWListVertical from './AppZoneWListVertical.vue'\nimport AppZoneWListHorizontal from './AppZoneWListHorizontal.vue'\nimport AppZoneWListExpand from './AppZoneWListExpand.vue'\nimport AppZoneWListRadio from './AppZoneWListRadio.vue'\nimport AppZoneWListCheck from './AppZoneWListCheck.vue'\nimport AppZoneWInputCheckbox from './AppZoneWInputCheckbox.vue'\nimport AppZoneWInputRadio from './AppZoneWInputRadio.vue'\nimport AppZoneWGroupChipCheck from './AppZoneWGroupChipCheck.vue'\nimport AppZoneWGroupChipRadio from './AppZoneWGroupChipRadio.vue'\nimport AppZoneWGroupIconCheck from './AppZoneWGroupIconCheck.vue'\nimport AppZoneWGroupIconRadio from './AppZoneWGroupIconRadio.vue'\nimport AppZoneWText from './AppZoneWText.vue'\nimport AppZoneWTextInt from './AppZoneWTextInt.vue'\nimport AppZoneWTextarea from './AppZoneWTextarea.vue'\nimport AppZoneWTextSelect from './AppZoneWTextSelect.vue'\nimport AppZoneWTextSuggest from './AppZoneWTextSuggest.vue'\nimport AppZoneWTimeday from './AppZoneWTimeday.vue'\nimport AppZoneWTimeminute from './AppZoneWTimeminute.vue'\nimport AppZoneWTimedayRange from './AppZoneWTimedayRange.vue'\nimport AppZoneWTimeminuteRange from './AppZoneWTimeminuteRange.vue'\nimport AppZoneWDynamicList from './AppZoneWDynamicList.vue'\nimport AppZoneWSegmentsVertical from './AppZoneWSegmentsVertical.vue'\nimport AppZoneWJsonView from './AppZoneWJsonView.vue'\nimport AppZoneWTree from './AppZoneWTree.vue'\nimport AppZoneWHighchartsVueDyn from './AppZoneWHighchartsVueDyn.vue'\nimport AppZoneWHighchartsBitmapDyn from './AppZoneWHighchartsBitmapDyn.vue'\nimport AppZoneWHighstockVueDyn from './AppZoneWHighstockVueDyn.vue'\nimport AppZoneWEchartsVueDyn from './AppZoneWEchartsVueDyn.vue'\nimport AppZoneWThreejsVueDyn from './AppZoneWThreejsVueDyn.vue'\nimport AppZoneWAggridVueDyn from './AppZoneWAggridVueDyn.vue'\nimport AppZoneWTableDyn from './AppZoneWTableDyn.vue'\nimport AppZoneWImageViewerDyn from './AppZoneWImageViewerDyn.vue'\nimport AppZoneWImageCascadingDyn from './AppZoneWImageCascadingDyn.vue'\nimport AppZoneWCkeditorVueDyn from './AppZoneWCkeditorVueDyn.vue'\nimport AppZoneWTinymceVueDyn from './AppZoneWTinymceVueDyn.vue'\nimport AppZoneWQuillVueDyn from './AppZoneWQuillVueDyn.vue'\nimport AppZoneWVditorDyn from './AppZoneWVditorDyn.vue'\nimport AppZoneWLeafletVueDyn from './AppZoneWLeafletVueDyn.vue'\nimport AppZoneWExplorer from './AppZoneWExplorer.vue'\nimport AppZoneWColorPickHexagon from './AppZoneWColorPickHexagon.vue'\nimport AppZoneWColorPickHexagonGray from './AppZoneWColorPickHexagonGray.vue'\nimport AppZoneWColorPickHsv from './AppZoneWColorPickHsv.vue'\nimport AppZoneWColorPickHue from './AppZoneWColorPickHue.vue'\nimport AppZoneWColorPickAlpha from './AppZoneWColorPickAlpha.vue'\nimport AppZoneWColorPickStripe from './AppZoneWColorPickStripe.vue'\nimport AppZoneWColorSelectPanelBlock from './AppZoneWColorSelectPanelBlock.vue'\nimport AppZoneWColorSelectPanelHsva from './AppZoneWColorSelectPanelHsva.vue'\nimport AppZoneWColorSelectPanel from './AppZoneWColorSelectPanel.vue'\nimport AppZoneWColorSelectInput from './AppZoneWColorSelectInput.vue'\nimport AppZoneWColorSelect from './AppZoneWColorSelect.vue'\n\n\nexport default {\n    components: {\n        WListHorizontal,\n        AppZoneWBadge,\n        AppZoneWPanelStripe,\n        AppZoneWPanelBulge,\n        AppZoneWPanelAvatar,\n        AppZoneWPanelScrolly,\n        AppZoneWPanelLabelItem,\n        AppZoneWPanelDivideHorizontal,\n        AppZoneWPanelDivideVertical,\n        AppZoneWPanelScale,\n        AppZoneWIcon,\n        AppZoneWImageLazy,\n        AppZoneWDropfiles,\n        AppZoneWDialog,\n        AppZoneWConfirm,\n        AppZoneWTooltip,\n        AppZoneWPopup,\n        AppZoneWPopupEditText,\n        AppZoneWDrawer,\n        AppZoneWButtonChip,\n        AppZoneWButtonCircle,\n        AppZoneWSlider,\n        AppZoneWProgressBar,\n        AppZoneWProgressCircle,\n        AppZoneWSwitch,\n        AppZoneWCheckbox,\n        AppZoneWLevelGrade,\n        AppZoneWAlert,\n        AppZoneWGroupTags,\n        AppZoneWGroupDragdrop,\n        AppZoneWGroupBaggage,\n        AppZoneWListVertical,\n        AppZoneWListHorizontal,\n        AppZoneWListExpand,\n        AppZoneWListRadio,\n        AppZoneWListCheck,\n        AppZoneWInputCheckbox,\n        AppZoneWInputRadio,\n        AppZoneWGroupChipCheck,\n        AppZoneWGroupChipRadio,\n        AppZoneWGroupIconCheck,\n        AppZoneWGroupIconRadio,\n        AppZoneWText,\n        AppZoneWTextInt,\n        AppZoneWTextarea,\n        AppZoneWTextSelect,\n        AppZoneWTextSuggest,\n        AppZoneWTimeday,\n        AppZoneWTimeminute,\n        AppZoneWTimedayRange,\n        AppZoneWTimeminuteRange,\n        AppZoneWDynamicList,\n        AppZoneWSegmentsVertical,\n        AppZoneWJsonView,\n        AppZoneWTree,\n        AppZoneWHighchartsVueDyn,\n        AppZoneWHighchartsBitmapDyn,\n        AppZoneWHighstockVueDyn,\n        AppZoneWEchartsVueDyn,\n        AppZoneWThreejsVueDyn,\n        AppZoneWAggridVueDyn,\n        AppZoneWTableDyn,\n        AppZoneWImageViewerDyn,\n        AppZoneWImageCascadingDyn,\n        AppZoneWCkeditorVueDyn,\n        AppZoneWTinymceVueDyn,\n        AppZoneWQuillVueDyn,\n        AppZoneWVditorDyn,\n        AppZoneWLeafletVueDyn,\n        AppZoneWExplorer,\n        AppZoneWColorPickHexagon,\n        AppZoneWColorPickHexagonGray,\n        AppZoneWColorPickHsv,\n        AppZoneWColorPickHue,\n        AppZoneWColorPickAlpha,\n        AppZoneWColorPickStripe,\n        AppZoneWColorSelectPanelBlock,\n        AppZoneWColorSelectPanelHsva,\n        AppZoneWColorSelectPanel,\n        AppZoneWColorSelectInput,\n        AppZoneWColorSelect,\n    },\n    data: function() {\n        let cmps = [\n            {\n                name: 'basic',\n                cmps: [\n                    { name: 'WBadge' },\n                    { name: 'WSwitch' },\n                    { name: 'WCheckbox' },\n                    { name: 'WIcon' },\n                    { name: 'WImageLazy' },\n                    { name: 'WDropfiles' },\n                    { name: 'WSlider' },\n                    { name: 'WProgressBar' },\n                    { name: 'WProgressCircle' },\n                ]\n            },\n            {\n                name: 'special',\n                cmps: [\n                    { name: 'WLevelGrade' },\n                ]\n            },\n            {\n                name: 'panel',\n                cmps: [\n                    { name: 'WPanelStripe' },\n                    { name: 'WPanelBulge' },\n                    { name: 'WPanelAvatar' },\n                    { name: 'WPanelScrolly' },\n                    { name: 'WPanelLabelItem' },\n                    { name: 'WPanelDivideHorizontal' },\n                    { name: 'WPanelDivideVertical' },\n                    { name: 'WPanelScale' },\n                ]\n            },\n            {\n                name: 'button',\n                cmps: [\n                    { name: 'WButtonChip' },\n                    { name: 'WButtonCircle' },\n                ]\n            },\n            {\n                name: 'group',\n                cmps: [\n                    { name: 'WInputCheckbox' },\n                    { name: 'WInputRadio' },\n                    { name: 'WGroupChipCheck' },\n                    { name: 'WGroupChipRadio' },\n                    { name: 'WGroupIconCheck' },\n                    { name: 'WGroupIconRadio' },\n                    { name: 'WGroupTags' },\n                    { name: 'WGroupDragdrop' },\n                    { name: 'WGroupBaggage' },\n                ]\n            },\n            {\n                name: 'list',\n                cmps: [\n                    { name: 'WListHorizontal' },\n                    { name: 'WListVertical' },\n                    { name: 'WListExpand' },\n                    { name: 'WListRadio' },\n                    { name: 'WListCheck' },\n                    { name: 'WDynamicList' },\n                    { name: 'WSegmentsVertical' },\n                ]\n            },\n            {\n                name: 'text',\n                cmps: [\n                    { name: 'WText' },\n                    { name: 'WTextarea' },\n                    { name: 'WTextInt' },\n                    { name: 'WTextSelect' },\n                    { name: 'WTextSuggest' },\n                ]\n            },\n            {\n                name: 'time',\n                cmps: [\n                    { name: 'WTimeday' },\n                    { name: 'WTimeminute' },\n                    { name: 'WTimedayRange' },\n                    { name: 'WTimeminuteRange' },\n                ]\n            },\n            {\n                name: 'color',\n                cmps: [\n                    {\n                        name: 'pick',\n                        cmps: [\n                            { name: 'WColorPickHexagon' },\n                            { name: 'WColorPickHexagonGray' },\n                            { name: 'WColorPickHsv' },\n                            { name: 'WColorPickHue' },\n                            { name: 'WColorPickAlpha' },\n                            { name: 'WColorPickStripe' },\n                        ]\n                    },\n                    {\n                        name: 'select',\n                        cmps: [\n                            { name: 'WColorSelectPanelBlock' },\n                            { name: 'WColorSelectPanelHsva' },\n                            { name: 'WColorSelectPanel' },\n                            { name: 'WColorSelectInput' },\n                            { name: 'WColorSelect' },\n                        ]\n                    },\n                ]\n            },\n            {\n                name: 'tree',\n                cmps: [\n                    { name: 'WTree' },\n                    { name: 'WExplorer' },\n                    { name: 'WJsonView' },\n                ]\n            },\n            {\n                name: 'window',\n                cmps: [\n                    { name: 'WAlert' },\n                    { name: 'WDialog' },\n                    { name: 'WConfirm' },\n                    { name: 'WTooltip' },\n                    { name: 'WPopup' },\n                    { name: 'WPopupEditText' },\n                    { name: 'WDrawer' },\n                ]\n            },\n            {\n                name: 'dynamic',\n                cmps: [\n                    {\n                        name: 'plot',\n                        cmps: [\n                            { name: 'WHighchartsVueDyn' },\n                            { name: 'WHighchartsBitmapDyn' },\n                            { name: 'WHighstockVueDyn' },\n                            { name: 'WEchartsVueDyn' },\n                            { name: 'WThreejsVueDyn' },\n                        ],\n                    },\n                    {\n                        name: 'table',\n                        cmps: [\n                            { name: 'WAggridVueDyn' },\n                            { name: 'WTableDyn' },\n                        ],\n                    },\n                    {\n                        name: 'map',\n                        cmps: [\n                            { name: 'WLeafletVueDyn' },\n                        ],\n                    },\n                    {\n                        name: 'imageViewer',\n                        cmps: [\n                            { name: 'WImageViewerDyn' },\n                            { name: 'WImageCascadingDyn' },\n                        ],\n                    },\n                    {\n                        name: 'editor',\n                        cmps: [\n                            { name: 'WTinymceVueDyn' },\n                            { name: 'WCkeditorVueDyn' },\n                            { name: 'WQuillVueDyn' },\n                            { name: 'WVditorDyn' },\n                        ],\n                    },\n                ],\n            },\n        ]\n        return {\n            kebabCase,\n\n            cmpsL1: cmps,\n            indP1: null,\n            cmpP1: null,\n\n            cmpsL2: null,\n            indP2: null,\n            cmpP2: null,\n\n            cmpsL3: null,\n            indP3: null,\n            cmpP3: null,\n\n            cmpsL4: null,\n\n            cmpPick: '',\n\n        }\n    },\n    mounted: function() {\n        let vo = this\n\n        //default\n        vo.indP1 = 0\n        vo.indP2 = 0\n        vo.indP3 = 0\n\n        //urlParse, http://localhost:8080/?cmp=w-ckeditor-vue-dyn\n        let p = urlParse(location.href)\n        // console.log('p', p)\n\n        //viewPick\n        vo.viewPick(get(p, 'cmp', ''))\n\n    },\n    computed: {\n\n        changeMenus: function() {\n            let vo = this\n            vo.modifyMenus(vo.indP1, vo.indP2, vo.indP3)\n            return ''\n        },\n\n        isNarrow: function() {\n            return window.innerWidth < 1000\n        },\n\n    },\n    methods: {\n\n        modifyMenus: function() {\n            let vo = this\n\n            let cmpPick = ''\n\n            setTimeout(() => {\n\n                // console.log('call P1')\n                vo.cmpP1 = get(vo.cmpsL1, vo.indP1, {})\n                vo.cmpsL2 = get(vo.cmpP1, `cmps`, [])\n                let _cmpPick = get(vo.cmpP1, `name`, '')\n                if (_cmpPick) {\n                    cmpPick = _cmpPick\n                }\n                // console.log('vo.cmpP1', cloneDeep(vo.cmpP1))\n                // console.log('vo.cmpsL2', cloneDeep(vo.cmpsL2))\n\n            }, 50)\n\n            setTimeout(() => {\n\n                // console.log('call P2')\n                let cmps = get(vo.cmpP1, `cmps`, [])\n                vo.cmpP2 = get(cmps, vo.indP2, {})\n                vo.cmpsL3 = get(vo.cmpP2, `cmps`, [])\n                let _cmpPick = get(vo.cmpP2, `name`, '')\n                if (_cmpPick) {\n                    cmpPick = _cmpPick\n                }\n                // console.log('vo.cmpP2', cloneDeep(vo.cmpP2))\n                // console.log('vo.cmpsL3', cloneDeep(vo.cmpsL3))\n\n            }, 100)\n\n            setTimeout(() => {\n\n                // console.log('call P3')\n                let cmps = get(vo.cmpP2, `cmps`, [])\n                vo.cmpP3 = get(cmps, vo.indP3, {})\n                vo.cmpsL4 = get(vo.cmpP3, `cmps`, [])\n                let _cmpPick = get(vo.cmpP3, `name`, '')\n                if (_cmpPick) {\n                    cmpPick = _cmpPick\n                }\n                // console.log('vo.cmpP3', cloneDeep(vo.cmpP3))\n                // console.log('vo.cmpsL4', cloneDeep(vo.cmpsL4))\n\n                //update\n                vo.cmpPick = cmpPick\n                // console.log('cmpPick', cmpPick)\n\n            }, 150)\n\n        },\n\n        getInd: function(item, items) {\n            // let vo = this\n            let ind = -1\n            each(items, (v, k) => {\n                if (item.name === v.name) {\n                    ind = k\n                    return false //跳出\n                }\n            })\n            return ind\n        },\n\n        viewPick: function(cmpPick) {\n            let vo = this\n            let _cmpPick = kebabCase(cmpPick)\n            let r = ''\n            let rs = []\n            let ls = []\n            let pv = (ts) => {\n                each(ts, (v, k) => {\n                    ls.push(k)\n\n                    //name, _name\n                    let name = get(v, `name`, '')\n                    let _name = kebabCase(name)\n\n                    //cmps\n                    let cmps = get(v, `cmps`, [])\n\n                    //push\n                    let cls = ls.join('.')\n                    let b = _name === _cmpPick\n                    rs.push({\n                        cls,\n                        name,\n                        b,\n                    })\n\n                    //save\n                    if (b) {\n                        r = JSON.parse(JSON.stringify(ls))\n                    }\n\n                    //遞迴pv\n                    if (cmps.length > 0) {\n                        pv(cmps)\n                    }\n\n                    ls.pop()\n                })\n            }\n            pv(vo.cmpsL1)\n            // console.log('rs', rs)\n            // console.log('r', r)\n            vo.indP1 = get(r, 0, 0)\n            vo.indP2 = get(r, 1, 0)\n            vo.indP3 = get(r, 2, 0)\n        },\n\n    }\n}\n<\/script>\n\n<style>\n.v-application--wrap {\n    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */\n    width: 100vw !important;\n    max-width: 100vw !important;\n    font-family: inherit;\n    background: #fff;\n}\n/* 組件所須全域樣式 */\n.head1 {\n    padding: 0px 0px 20px 0px;\n    font-size: 2.5rem;\n}\n.bkh { /* 寬 */\n    padding:20px;\n}\n@media screen and (max-width:800px){ /* 中 */\n    .bkh {\n        padding:10px;\n    }\n}\n@media screen and (max-width:400px){ /* 窄 */\n    .bkh {\n        padding:5px;\n    }\n}\n.bk { /* 寬 */\n    display: inline-block;\n    vertical-align: top;\n    padding: 0px 80px 60px 0px;\n}\n@media screen and (max-width:1000px){ /* 中窄 */\n    .bk {\n        display: block;\n        padding: 0px 0px 50px 0px;\n    }\n}\n.cpitem {\n    transition: all 0.3s;\n    padding: 5px 15px;\n    cursor: pointer;\n}\n.cpitem-white {\n    background: #fff;\n}\n.cpitem-white:hover {\n    background: #eee;\n}\n.cpitem-black {\n    background: #333;\n}\n.cpitem-black:hover {\n    background: #555;\n}\n</style>\n"]},media:void 0})}),ZW,undefined,false,undefined,!1,_a,void 0,void 0)}));
+!function(n,e){n.exports=function(){function n(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,o)}return t}function e(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?n(Object(o),!0).forEach((function(n){a(e,n,o[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))}))}return e}function t(n){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},t(n)}function o(n,e){if(!(n instanceof e))throw new TypeError("Cannot call a class as a function")}function r(n,e){for(var t=0;t<e.length;t++){var o=e[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(n,s(o.key),o)}}function i(n,e,t){return e&&r(n.prototype,e),t&&r(n,t),Object.defineProperty(n,"prototype",{writable:!1}),n}function a(n,e,t){return(e=s(e))in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function l(n,e){if("object"!=typeof n||null===n)return n;var t=n[Symbol.toPrimitive];if(void 0!==t){var o=t.call(n,e||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(n)}function s(n){var e=l(n,"string");return"symbol"==typeof e?e:String(e)}var c={backdrop:!0,button:!0,navbar:!0,title:!0,toolbar:!0,className:"",container:"body",filter:null,fullscreen:!0,inheritedAttributes:["crossOrigin","decoding","isMap","loading","referrerPolicy","sizes","srcset","useMap"],initialCoverage:.9,initialViewIndex:0,inline:!1,interval:5e3,keyboard:!0,focus:!0,loading:!0,loop:!0,minWidth:200,minHeight:100,movable:!0,rotatable:!0,scalable:!0,zoomable:!0,zoomOnTouch:!0,zoomOnWheel:!0,slideOnTouch:!0,toggleOnDblclick:!0,tooltip:!0,transition:!0,zIndex:2015,zIndexInline:0,zoomRatio:.1,minZoomRatio:.01,maxZoomRatio:100,url:"src",ready:null,show:null,shown:null,hide:null,hidden:null,view:null,viewed:null,move:null,moved:null,rotate:null,rotated:null,scale:null,scaled:null,zoom:null,zoomed:null,play:null,stop:null},d='<div class="viewer-container" tabindex="-1" touch-action="none"><div class="viewer-canvas"></div><div class="viewer-footer"><div class="viewer-title"></div><div class="viewer-toolbar"></div><div class="viewer-navbar"><ul class="viewer-list" role="navigation"></ul></div></div><div class="viewer-tooltip" role="alert" aria-hidden="true"></div><div class="viewer-button" data-viewer-action="mix" role="button"></div><div class="viewer-player"></div></div>',u="undefined"!=typeof window&&void 0!==window.document,p=u?window:{},m=!(!u||!p.document.documentElement)&&"ontouchstart"in p.document.documentElement,v=!!u&&"PointerEvent"in p,g="viewer",h="move",f="switch",b="zoom",y="".concat(g,"-active"),k="".concat(g,"-close"),x="".concat(g,"-fade"),C="".concat(g,"-fixed"),S="".concat(g,"-fullscreen"),w="".concat(g,"-fullscreen-exit"),W="".concat(g,"-hide"),_="".concat(g,"-hide-md-down"),I="".concat(g,"-hide-sm-down"),T="".concat(g,"-hide-xs-down"),A="".concat(g,"-in"),B="".concat(g,"-invisible"),H="".concat(g,"-loading"),P="".concat(g,"-move"),F="".concat(g,"-open"),L="".concat(g,"-show"),j="".concat(g,"-transition"),R="click",D="dblclick",z="dragstart",V="focusin",Z="keydown",$="load",G="error",E=m?"touchend touchcancel":"mouseup",X=m?"touchmove":"mousemove",N=m?"touchstart":"mousedown",M=v?"pointerdown":N,O=v?"pointermove":X,K=v?"pointerup pointercancel":E,Y="resize",J="transitionend",U="wheel",Q="ready",q="show",nn="shown",en="hide",tn="hidden",on="view",rn="viewed",an="move",ln="moved",sn="rotate",cn="rotated",dn="scale",un="scaled",pn="zoom",mn="zoomed",vn="play",gn="stop",hn="".concat(g,"Action"),fn=/\s\s*/,bn=["zoom-in","zoom-out","one-to-one","reset","prev","play","next","rotate-left","rotate-right","flip-horizontal","flip-vertical"];function yn(n){return"string"==typeof n}var kn=Number.isNaN||p.isNaN;function xn(n){return"number"==typeof n&&!kn(n)}function Cn(n){return void 0===n}function Sn(n){return"object"===t(n)&&null!==n}var wn=Object.prototype.hasOwnProperty;function Wn(n){if(!Sn(n))return!1;try{var e=n.constructor,t=e.prototype;return e&&t&&wn.call(t,"isPrototypeOf")}catch(n){return!1}}function _n(n){return"function"==typeof n}function In(n,e){if(n&&_n(e))if(Array.isArray(n)||xn(n.length)){var t,o=n.length;for(t=0;t<o&&!1!==e.call(n,n[t],t,n);t+=1);}else Sn(n)&&Object.keys(n).forEach((function(t){e.call(n,n[t],t,n)}));return n}var Tn=Object.assign||function(n){for(var e=arguments.length,t=new Array(e>1?e-1:0),o=1;o<e;o++)t[o-1]=arguments[o];return Sn(n)&&t.length>0&&t.forEach((function(e){Sn(e)&&Object.keys(e).forEach((function(t){n[t]=e[t]}))})),n},An=/^(?:width|height|left|top|marginLeft|marginTop)$/;function Bn(n,e){var t=n.style;In(e,(function(n,e){An.test(e)&&xn(n)&&(n+="px"),t[e]=n}))}function Hn(n){return yn(n)?n.replace(/&(?!amp;|quot;|#39;|lt;|gt;)/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#39;").replace(/</g,"&lt;").replace(/>/g,"&gt;"):n}function Pn(n,e){return!(!n||!e)&&(n.classList?n.classList.contains(e):n.className.indexOf(e)>-1)}function Fn(n,e){if(n&&e)if(xn(n.length))In(n,(function(n){Fn(n,e)}));else if(n.classList)n.classList.add(e);else{var t=n.className.trim();t?t.indexOf(e)<0&&(n.className="".concat(t," ").concat(e)):n.className=e}}function Ln(n,e){n&&e&&(xn(n.length)?In(n,(function(n){Ln(n,e)})):n.classList?n.classList.remove(e):n.className.indexOf(e)>=0&&(n.className=n.className.replace(e,"")))}function jn(n,e,t){e&&(xn(n.length)?In(n,(function(n){jn(n,e,t)})):t?Fn(n,e):Ln(n,e))}var Rn=/([a-z\d])([A-Z])/g;function Dn(n){return n.replace(Rn,"$1-$2").toLowerCase()}function zn(n,e){return Sn(n[e])?n[e]:n.dataset?n.dataset[e]:n.getAttribute("data-".concat(Dn(e)))}function Vn(n,e,t){Sn(t)?n[e]=t:n.dataset?n.dataset[e]=t:n.setAttribute("data-".concat(Dn(e)),t)}var Zn=function(){var n=!1;if(u){var e=!1,t=function(){},o=Object.defineProperty({},"once",{get:function(){return n=!0,e},set:function(n){e=n}});p.addEventListener("test",t,o),p.removeEventListener("test",t,o)}return n}();function $n(n,e,t){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},r=t;e.trim().split(fn).forEach((function(e){if(!Zn){var i=n.listeners;i&&i[e]&&i[e][t]&&(r=i[e][t],delete i[e][t],0===Object.keys(i[e]).length&&delete i[e],0===Object.keys(i).length&&delete n.listeners)}n.removeEventListener(e,r,o)}))}function Gn(n,e,t){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},r=t;e.trim().split(fn).forEach((function(e){if(o.once&&!Zn){var i=n.listeners,a=void 0===i?{}:i;r=function(){delete a[e][t],n.removeEventListener(e,r,o);for(var i=arguments.length,l=new Array(i),s=0;s<i;s++)l[s]=arguments[s];t.apply(n,l)},a[e]||(a[e]={}),a[e][t]&&n.removeEventListener(e,a[e][t],o),a[e][t]=r,n.listeners=a}n.addEventListener(e,r,o)}))}function En(n,t,o,r){var i;return _n(Event)&&_n(CustomEvent)?i=new CustomEvent(t,e({bubbles:!0,cancelable:!0,detail:o},r)):(i=document.createEvent("CustomEvent")).initCustomEvent(t,!0,!0,o),n.dispatchEvent(i)}function Xn(n){var e=n.getBoundingClientRect();return{left:e.left+(window.pageXOffset-document.documentElement.clientLeft),top:e.top+(window.pageYOffset-document.documentElement.clientTop)}}function Nn(n){var e=n.rotate,t=n.scaleX,o=n.scaleY,r=n.translateX,i=n.translateY,a=[];xn(r)&&0!==r&&a.push("translateX(".concat(r,"px)")),xn(i)&&0!==i&&a.push("translateY(".concat(i,"px)")),xn(e)&&0!==e&&a.push("rotate(".concat(e,"deg)")),xn(t)&&1!==t&&a.push("scaleX(".concat(t,")")),xn(o)&&1!==o&&a.push("scaleY(".concat(o,")"));var l=a.length?a.join(" "):"none";return{WebkitTransform:l,msTransform:l,transform:l}}function Mn(n){return yn(n)?decodeURIComponent(n.replace(/^.*\//,"").replace(/[?&#].*$/,"")):""}var On=p.navigator&&/Version\/\d+(\.\d+)+?\s+Safari/i.test(p.navigator.userAgent);function Kn(n,e,t){var o=document.createElement("img");if(n.naturalWidth&&!On)return t(n.naturalWidth,n.naturalHeight),o;var r=document.body||document.documentElement;return o.onload=function(){t(o.width,o.height),On||r.removeChild(o)},In(e.inheritedAttributes,(function(e){var t=n.getAttribute(e);null!==t&&o.setAttribute(e,t)})),o.src=n.src,On||(o.style.cssText="left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;",r.appendChild(o)),o}function Yn(n){switch(n){case 2:return T;case 3:return I;case 4:return _;default:return""}}function Jn(n){var t=e({},n),o=[];return In(n,(function(n,e){delete t[e],In(t,(function(e){var t=Math.abs(n.startX-e.startX),r=Math.abs(n.startY-e.startY),i=Math.abs(n.endX-e.endX),a=Math.abs(n.endY-e.endY),l=Math.sqrt(t*t+r*r),s=(Math.sqrt(i*i+a*a)-l)/l;o.push(s)}))})),o.sort((function(n,e){return Math.abs(n)<Math.abs(e)})),o[0]}function Un(n,t){var o=n.pageX,r=n.pageY,i={endX:o,endY:r};return t?i:e({timeStamp:Date.now(),startX:o,startY:r},i)}function Qn(n){var e=0,t=0,o=0;return In(n,(function(n){var r=n.startX,i=n.startY;e+=r,t+=i,o+=1})),{pageX:e/=o,pageY:t/=o}}var qn,ne={render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initBody:function(){var n=this.element.ownerDocument,e=n.body||n.documentElement;this.body=e,this.scrollbarWidth=window.innerWidth-n.documentElement.clientWidth,this.initialBodyPaddingRight=e.style.paddingRight,this.initialBodyComputedPaddingRight=window.getComputedStyle(e).paddingRight},initContainer:function(){this.containerData={width:window.innerWidth,height:window.innerHeight}},initViewer:function(){var n,e=this.options,t=this.parent;e.inline&&(n={width:Math.max(t.offsetWidth,e.minWidth),height:Math.max(t.offsetHeight,e.minHeight)},this.parentData=n),!this.fulled&&n||(n=this.containerData),this.viewerData=Tn({},n)},renderViewer:function(){this.options.inline&&!this.fulled&&Bn(this.viewer,this.viewerData)},initList:function(){var n=this,e=this.element,t=this.options,o=this.list,r=[];o.innerHTML="",In(this.images,(function(e,i){var a=e.src,l=e.alt||Mn(a),s=n.getImageURL(e);if(a||s){var c=document.createElement("li"),d=document.createElement("img");In(t.inheritedAttributes,(function(n){var t=e.getAttribute(n);null!==t&&d.setAttribute(n,t)})),t.navbar&&(d.src=a||s),d.alt=l,d.setAttribute("data-original-url",s||a),c.setAttribute("data-index",i),c.setAttribute("data-viewer-action","view"),c.setAttribute("role","button"),t.keyboard&&c.setAttribute("tabindex",0),c.appendChild(d),o.appendChild(c),r.push(c)}})),this.items=r,In(r,(function(e){var o,r,i=e.firstElementChild;Vn(i,"filled",!0),t.loading&&Fn(e,H),Gn(i,$,o=function(o){$n(i,G,r),t.loading&&Ln(e,H),n.loadImage(o)},{once:!0}),Gn(i,G,r=function(){$n(i,$,o),t.loading&&Ln(e,H)},{once:!0})})),t.transition&&Gn(e,rn,(function(){Fn(o,j)}),{once:!0})},renderList:function(){var n=this.index,e=this.items[n];if(e){var t=e.nextElementSibling,o=parseInt(window.getComputedStyle(t||e).marginLeft,10),r=e.offsetWidth,i=r+o;Bn(this.list,Tn({width:i*this.length-o},Nn({translateX:(this.viewerData.width-r)/2-i*n})))}},resetList:function(){var n=this.list;n.innerHTML="",Ln(n,j),Bn(n,Nn({translateX:0}))},initImage:function(n){var e,t=this,o=this.options,r=this.image,i=this.viewerData,a=this.footer.offsetHeight,l=i.width,s=Math.max(i.height-a,a),c=this.imageData||{};this.imageInitializing={abort:function(){e.onload=null}},e=Kn(r,o,(function(e,r){var i=e/r,a=Math.max(0,Math.min(1,o.initialCoverage)),d=l,u=s;t.imageInitializing=!1,s*i>l?u=l/i:d=s*i,a=xn(a)?a:.9,d=Math.min(d*a,e),u=Math.min(u*a,r);var p=(l-d)/2,m=(s-u)/2,v={left:p,top:m,x:p,y:m,width:d,height:u,oldRatio:1,ratio:d/e,aspectRatio:i,naturalWidth:e,naturalHeight:r},g=Tn({},v);o.rotatable&&(v.rotate=c.rotate||0,g.rotate=0),o.scalable&&(v.scaleX=c.scaleX||1,v.scaleY=c.scaleY||1,g.scaleX=1,g.scaleY=1),t.imageData=v,t.initialImageData=g,n&&n()}))},renderImage:function(n){var e=this,t=this.image,o=this.imageData;if(Bn(t,Tn({width:o.width,height:o.height,marginLeft:o.x,marginTop:o.y},Nn(o))),n)if((this.viewing||this.moving||this.rotating||this.scaling||this.zooming)&&this.options.transition&&Pn(t,j)){var r=function(){e.imageRendering=!1,n()};this.imageRendering={abort:function(){$n(t,J,r)}},Gn(t,J,r,{once:!0})}else n()},resetImage:function(){var n=this.image;n&&(this.viewing&&this.viewing.abort(),n.parentNode.removeChild(n),this.image=null,this.title.innerHTML="")}},ee={bind:function(){var n=this.options,e=this.viewer,t=this.canvas,o=this.element.ownerDocument;Gn(e,R,this.onClick=this.click.bind(this)),Gn(e,z,this.onDragStart=this.dragstart.bind(this)),Gn(t,M,this.onPointerDown=this.pointerdown.bind(this)),Gn(o,O,this.onPointerMove=this.pointermove.bind(this)),Gn(o,K,this.onPointerUp=this.pointerup.bind(this)),Gn(o,Z,this.onKeyDown=this.keydown.bind(this)),Gn(window,Y,this.onResize=this.resize.bind(this)),n.zoomable&&n.zoomOnWheel&&Gn(e,U,this.onWheel=this.wheel.bind(this),{passive:!1,capture:!0}),n.toggleOnDblclick&&Gn(t,D,this.onDblclick=this.dblclick.bind(this))},unbind:function(){var n=this.options,e=this.viewer,t=this.canvas,o=this.element.ownerDocument;$n(e,R,this.onClick),$n(e,z,this.onDragStart),$n(t,M,this.onPointerDown),$n(o,O,this.onPointerMove),$n(o,K,this.onPointerUp),$n(o,Z,this.onKeyDown),$n(window,Y,this.onResize),n.zoomable&&n.zoomOnWheel&&$n(e,U,this.onWheel,{passive:!1,capture:!0}),n.toggleOnDblclick&&$n(t,D,this.onDblclick)}},te={click:function(n){var e=this.options,t=this.imageData,o=n.target,r=zn(o,hn);switch(r||"img"!==o.localName||"li"!==o.parentElement.localName||(r=zn(o=o.parentElement,hn)),m&&n.isTrusted&&o===this.canvas&&clearTimeout(this.clickCanvasTimeout),r){case"mix":this.played?this.stop():e.inline?this.fulled?this.exit():this.full():this.hide();break;case"hide":this.pointerMoved||this.hide();break;case"view":this.view(zn(o,"index"));break;case"zoom-in":this.zoom(.1,!0);break;case"zoom-out":this.zoom(-.1,!0);break;case"one-to-one":this.toggle();break;case"reset":this.reset();break;case"prev":this.prev(e.loop);break;case"play":this.play(e.fullscreen);break;case"next":this.next(e.loop);break;case"rotate-left":this.rotate(-90);break;case"rotate-right":this.rotate(90);break;case"flip-horizontal":this.scaleX(-t.scaleX||-1);break;case"flip-vertical":this.scaleY(-t.scaleY||-1);break;default:this.played&&this.stop()}},dblclick:function(n){n.preventDefault(),this.viewed&&n.target===this.image&&(m&&n.isTrusted&&clearTimeout(this.doubleClickImageTimeout),this.toggle(n.isTrusted?n:n.detail&&n.detail.originalEvent))},load:function(){var n=this;this.timeout&&(clearTimeout(this.timeout),this.timeout=!1);var e=this.element,t=this.options,o=this.image,r=this.index,i=this.viewerData;Ln(o,B),t.loading&&Ln(this.canvas,H),o.style.cssText="height:0;"+"margin-left:".concat(i.width/2,"px;")+"margin-top:".concat(i.height/2,"px;")+"max-width:none!important;position:relative;width:0;",this.initImage((function(){jn(o,P,t.movable),jn(o,j,t.transition),n.renderImage((function(){n.viewed=!0,n.viewing=!1,_n(t.viewed)&&Gn(e,rn,t.viewed,{once:!0}),En(e,rn,{originalImage:n.images[r],index:r,image:o},{cancelable:!1})}))}))},loadImage:function(n){var e=n.target,t=e.parentNode,o=t.offsetWidth||30,r=t.offsetHeight||50,i=!!zn(e,"filled");Kn(e,this.options,(function(n,t){var a=n/t,l=o,s=r;r*a>o?i?l=r*a:s=o/a:i?s=o/a:l=r*a,Bn(e,Tn({width:l,height:s},Nn({translateX:(o-l)/2,translateY:(r-s)/2})))}))},keydown:function(n){var e=this.options;if(e.keyboard){var t=n.keyCode||n.which||n.charCode;if(13===t&&this.viewer.contains(n.target)&&this.click(n),this.fulled)switch(t){case 27:this.played?this.stop():e.inline?this.fulled&&this.exit():this.hide();break;case 32:this.played&&this.stop();break;case 37:this.played&&this.playing?this.playing.prev():this.prev(e.loop);break;case 38:n.preventDefault(),this.zoom(e.zoomRatio,!0);break;case 39:this.played&&this.playing?this.playing.next():this.next(e.loop);break;case 40:n.preventDefault(),this.zoom(-e.zoomRatio,!0);break;case 48:case 49:n.ctrlKey&&(n.preventDefault(),this.toggle())}}},dragstart:function(n){"img"===n.target.localName&&n.preventDefault()},pointerdown:function(n){var e=this.options,t=this.pointers,o=n.buttons,r=n.button;if(this.pointerMoved=!1,!(!this.viewed||this.showing||this.viewing||this.hiding||("mousedown"===n.type||"pointerdown"===n.type&&"mouse"===n.pointerType)&&(xn(o)&&1!==o||xn(r)&&0!==r||n.ctrlKey))){n.preventDefault(),n.changedTouches?In(n.changedTouches,(function(n){t[n.identifier]=Un(n)})):t[n.pointerId||0]=Un(n);var i=!!e.movable&&h;e.zoomOnTouch&&e.zoomable&&Object.keys(t).length>1?i=b:e.slideOnTouch&&("touch"===n.pointerType||"touchstart"===n.type)&&this.isSwitchable()&&(i=f),!e.transition||i!==h&&i!==b||Ln(this.image,j),this.action=i}},pointermove:function(n){var e=this.pointers,t=this.action;this.viewed&&t&&(n.preventDefault(),n.changedTouches?In(n.changedTouches,(function(n){Tn(e[n.identifier]||{},Un(n,!0))})):Tn(e[n.pointerId||0]||{},Un(n,!0)),this.change(n))},pointerup:function(n){var e,t=this,o=this.options,r=this.action,i=this.pointers;n.changedTouches?In(n.changedTouches,(function(n){e=i[n.identifier],delete i[n.identifier]})):(e=i[n.pointerId||0],delete i[n.pointerId||0]),r&&(n.preventDefault(),!o.transition||r!==h&&r!==b||Fn(this.image,j),this.action=!1,m&&r!==b&&e&&Date.now()-e.timeStamp<500&&(clearTimeout(this.clickCanvasTimeout),clearTimeout(this.doubleClickImageTimeout),o.toggleOnDblclick&&this.viewed&&n.target===this.image?this.imageClicked?(this.imageClicked=!1,this.doubleClickImageTimeout=setTimeout((function(){En(t.image,D,{originalEvent:n})}),50)):(this.imageClicked=!0,this.doubleClickImageTimeout=setTimeout((function(){t.imageClicked=!1}),500)):(this.imageClicked=!1,o.backdrop&&"static"!==o.backdrop&&n.target===this.canvas&&(this.clickCanvasTimeout=setTimeout((function(){En(t.canvas,R,{originalEvent:n})}),50)))))},resize:function(){var n=this;if(this.isShown&&!this.hiding&&(this.fulled&&(this.close(),this.initBody(),this.open()),this.initContainer(),this.initViewer(),this.renderViewer(),this.renderList(),this.viewed&&this.initImage((function(){n.renderImage()})),this.played)){if(this.options.fullscreen&&this.fulled&&!(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement))return void this.stop();In(this.player.getElementsByTagName("img"),(function(e){Gn(e,$,n.loadImage.bind(n),{once:!0}),En(e,$)}))}},wheel:function(n){var e=this;if(this.viewed&&(n.preventDefault(),!this.wheeling)){this.wheeling=!0,setTimeout((function(){e.wheeling=!1}),50);var t=Number(this.options.zoomRatio)||.1,o=1;n.deltaY?o=n.deltaY>0?1:-1:n.wheelDelta?o=-n.wheelDelta/120:n.detail&&(o=n.detail>0?1:-1),this.zoom(-o*t,!0,null,n)}}},oe={show:function(){var n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.element,t=this.options;if(t.inline||this.showing||this.isShown||this.showing)return this;if(!this.ready)return this.build(),this.ready&&this.show(n),this;if(_n(t.show)&&Gn(e,q,t.show,{once:!0}),!1===En(e,q)||!this.ready)return this;this.hiding&&this.transitioning.abort(),this.showing=!0,this.open();var o=this.viewer;if(Ln(o,W),o.setAttribute("role","dialog"),o.setAttribute("aria-labelledby",this.title.id),o.setAttribute("aria-modal",!0),o.removeAttribute("aria-hidden"),t.transition&&!n){var r=this.shown.bind(this);this.transitioning={abort:function(){$n(o,J,r),Ln(o,A)}},Fn(o,j),o.initialOffsetWidth=o.offsetWidth,Gn(o,J,r,{once:!0}),Fn(o,A)}else Fn(o,A),this.shown();return this},hide:function(){var n=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.element,o=this.options;if(o.inline||this.hiding||!this.isShown&&!this.showing)return this;if(_n(o.hide)&&Gn(t,en,o.hide,{once:!0}),!1===En(t,en))return this;this.showing&&this.transitioning.abort(),this.hiding=!0,this.played?this.stop():this.viewing&&this.viewing.abort();var r=this.viewer,i=this.image,a=function(){Ln(r,A),n.hidden()};if(o.transition&&!e){var l=function e(t){t&&t.target===r&&($n(r,J,e),n.hidden())},s=function(){Pn(r,j)?(Gn(r,J,l),Ln(r,A)):a()};this.transitioning={abort:function(){n.viewed&&Pn(i,j)?$n(i,J,s):Pn(r,j)&&$n(r,J,l)}},this.viewed&&Pn(i,j)?(Gn(i,J,s,{once:!0}),this.zoomTo(0,!1,null,null,!0)):s()}else a();return this},view:function(){var n=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.options.initialViewIndex;if(e=Number(e)||0,this.hiding||this.played||e<0||e>=this.length||this.viewed&&e===this.index)return this;if(!this.isShown)return this.index=e,this.show();this.viewing&&this.viewing.abort();var t=this.element,o=this.options,r=this.title,i=this.canvas,a=this.items[e],l=a.querySelector("img"),s=zn(l,"originalUrl"),c=l.getAttribute("alt"),d=document.createElement("img");if(In(o.inheritedAttributes,(function(n){var e=l.getAttribute(n);null!==e&&d.setAttribute(n,e)})),d.src=s,d.alt=c,_n(o.view)&&Gn(t,on,o.view,{once:!0}),!1===En(t,on,{originalImage:this.images[e],index:e,image:d})||!this.isShown||this.hiding||this.played)return this;var u=this.items[this.index];u&&(Ln(u,y),u.removeAttribute("aria-selected")),Fn(a,y),a.setAttribute("aria-selected",!0),o.focus&&a.focus(),this.image=d,this.viewed=!1,this.index=e,this.imageData={},Fn(d,B),o.loading&&Fn(i,H),i.innerHTML="",i.appendChild(d),this.renderList(),r.innerHTML="";var p,m,v=function(){var e=n.imageData,t=Array.isArray(o.title)?o.title[1]:o.title;r.innerHTML=Hn(_n(t)?t.call(n,d,e):"".concat(c," (").concat(e.naturalWidth," × ").concat(e.naturalHeight,")"))};return Gn(t,rn,v,{once:!0}),this.viewing={abort:function(){$n(t,rn,v),d.complete?n.imageRendering?n.imageRendering.abort():n.imageInitializing&&n.imageInitializing.abort():(d.src="",$n(d,$,p),n.timeout&&clearTimeout(n.timeout))}},d.complete?this.load():(Gn(d,$,p=function(){$n(d,G,m),n.load()},{once:!0}),Gn(d,G,m=function(){$n(d,$,p),n.timeout&&(clearTimeout(n.timeout),n.timeout=!1),Ln(d,B),o.loading&&Ln(n.canvas,H)},{once:!0}),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout((function(){Ln(d,B),n.timeout=!1}),1e3)),this},prev:function(){var n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.index-1;return e<0&&(e=n?this.length-1:0),this.view(e),this},next:function(){var n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.length-1,t=this.index+1;return t>e&&(t=n?0:e),this.view(t),this},move:function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n,t=this.imageData;return this.moveTo(Cn(n)?n:t.x+Number(n),Cn(e)?e:t.y+Number(e)),this},moveTo:function(n){var e=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r=this.element,i=this.options,a=this.imageData;if(n=Number(n),t=Number(t),this.viewed&&!this.played&&i.movable){var l=a.x,s=a.y,c=!1;if(xn(n)?c=!0:n=l,xn(t)?c=!0:t=s,c){if(_n(i.move)&&Gn(r,an,i.move,{once:!0}),!1===En(r,an,{x:n,y:t,oldX:l,oldY:s,originalEvent:o}))return this;a.x=n,a.y=t,a.left=n,a.top=t,this.moving=!0,this.renderImage((function(){e.moving=!1,_n(i.moved)&&Gn(r,ln,i.moved,{once:!0}),En(r,ln,{x:n,y:t,oldX:l,oldY:s,originalEvent:o},{cancelable:!1})}))}}return this},rotate:function(n){return this.rotateTo((this.imageData.rotate||0)+Number(n)),this},rotateTo:function(n){var e=this,t=this.element,o=this.options,r=this.imageData;if(xn(n=Number(n))&&this.viewed&&!this.played&&o.rotatable){var i=r.rotate;if(_n(o.rotate)&&Gn(t,sn,o.rotate,{once:!0}),!1===En(t,sn,{degree:n,oldDegree:i}))return this;r.rotate=n,this.rotating=!0,this.renderImage((function(){e.rotating=!1,_n(o.rotated)&&Gn(t,cn,o.rotated,{once:!0}),En(t,cn,{degree:n,oldDegree:i},{cancelable:!1})}))}return this},scaleX:function(n){return this.scale(n,this.imageData.scaleY),this},scaleY:function(n){return this.scale(this.imageData.scaleX,n),this},scale:function(n){var e=this,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n,o=this.element,r=this.options,i=this.imageData;if(n=Number(n),t=Number(t),this.viewed&&!this.played&&r.scalable){var a=i.scaleX,l=i.scaleY,s=!1;if(xn(n)?s=!0:n=a,xn(t)?s=!0:t=l,s){if(_n(r.scale)&&Gn(o,dn,r.scale,{once:!0}),!1===En(o,dn,{scaleX:n,scaleY:t,oldScaleX:a,oldScaleY:l}))return this;i.scaleX=n,i.scaleY=t,this.scaling=!0,this.renderImage((function(){e.scaling=!1,_n(r.scaled)&&Gn(o,un,r.scaled,{once:!0}),En(o,un,{scaleX:n,scaleY:t,oldScaleX:a,oldScaleY:l},{cancelable:!1})}))}}return this},zoom:function(n){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,r=this.imageData;return n=(n=Number(n))<0?1/(1-n):1+n,this.zoomTo(r.width*n/r.naturalWidth,e,t,o),this},zoomTo:function(n){var e=this,t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,i=arguments.length>4&&void 0!==arguments[4]&&arguments[4],a=this.element,l=this.options,s=this.pointers,c=this.imageData,d=c.x,u=c.y,p=c.width,m=c.height,v=c.naturalWidth,g=c.naturalHeight;if(xn(n=Math.max(0,n))&&this.viewed&&!this.played&&(i||l.zoomable)){if(!i){var h=Math.max(.01,l.minZoomRatio),f=Math.min(100,l.maxZoomRatio);n=Math.min(Math.max(n,h),f)}if(r)switch(r.type){case"wheel":l.zoomRatio>=.055&&n>.95&&n<1.05&&(n=1);break;case"pointermove":case"touchmove":case"mousemove":n>.99&&n<1.01&&(n=1)}var b=v*n,y=g*n,k=b-p,x=y-m,C=c.ratio;if(_n(l.zoom)&&Gn(a,pn,l.zoom,{once:!0}),!1===En(a,pn,{ratio:n,oldRatio:C,originalEvent:r}))return this;if(this.zooming=!0,r){var S=Xn(this.viewer),w=s&&Object.keys(s).length>0?Qn(s):{pageX:r.pageX,pageY:r.pageY};c.x-=k*((w.pageX-S.left-d)/p),c.y-=x*((w.pageY-S.top-u)/m)}else Wn(o)&&xn(o.x)&&xn(o.y)?(c.x-=k*((o.x-d)/p),c.y-=x*((o.y-u)/m)):(c.x-=k/2,c.y-=x/2);c.left=c.x,c.top=c.y,c.width=b,c.height=y,c.oldRatio=C,c.ratio=n,this.renderImage((function(){e.zooming=!1,_n(l.zoomed)&&Gn(a,mn,l.zoomed,{once:!0}),En(a,mn,{ratio:n,oldRatio:C,originalEvent:r},{cancelable:!1})})),t&&this.tooltip()}return this},play:function(){var n=this,e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(!this.isShown||this.played)return this;var t=this.element,o=this.options;if(_n(o.play)&&Gn(t,vn,o.play,{once:!0}),!1===En(t,vn))return this;var r=this.player,i=this.loadImage.bind(this),a=[],l=0,s=0;if(this.played=!0,this.onLoadWhenPlay=i,e&&this.requestFullscreen(e),Fn(r,L),In(this.items,(function(n,e){var t=n.querySelector("img"),c=document.createElement("img");c.src=zn(t,"originalUrl"),c.alt=t.getAttribute("alt"),c.referrerPolicy=t.referrerPolicy,l+=1,Fn(c,x),jn(c,j,o.transition),Pn(n,y)&&(Fn(c,A),s=e),a.push(c),Gn(c,$,i,{once:!0}),r.appendChild(c)})),xn(o.interval)&&o.interval>0){var c=function e(){clearTimeout(n.playing.timeout),Ln(a[s],A),Fn(a[s=(s-=1)>=0?s:l-1],A),n.playing.timeout=setTimeout(e,o.interval)},d=function e(){clearTimeout(n.playing.timeout),Ln(a[s],A),Fn(a[s=(s+=1)<l?s:0],A),n.playing.timeout=setTimeout(e,o.interval)};l>1&&(this.playing={prev:c,next:d,timeout:setTimeout(d,o.interval)})}return this},stop:function(){var n=this;if(!this.played)return this;var e=this.element,t=this.options;if(_n(t.stop)&&Gn(e,gn,t.stop,{once:!0}),!1===En(e,gn))return this;var o=this.player;return clearTimeout(this.playing.timeout),this.playing=!1,this.played=!1,In(o.getElementsByTagName("img"),(function(e){$n(e,$,n.onLoadWhenPlay)})),Ln(o,L),o.innerHTML="",this.exitFullscreen(),this},full:function(){var n=this,e=this.options,t=this.viewer,o=this.image,r=this.list;return!this.isShown||this.played||this.fulled||!e.inline||(this.fulled=!0,this.open(),Fn(this.button,w),e.transition&&(Ln(r,j),this.viewed&&Ln(o,j)),Fn(t,C),t.setAttribute("role","dialog"),t.setAttribute("aria-labelledby",this.title.id),t.setAttribute("aria-modal",!0),t.removeAttribute("style"),Bn(t,{zIndex:e.zIndex}),e.focus&&this.enforceFocus(),this.initContainer(),this.viewerData=Tn({},this.containerData),this.renderList(),this.viewed&&this.initImage((function(){n.renderImage((function(){e.transition&&setTimeout((function(){Fn(o,j),Fn(r,j)}),0)}))}))),this},exit:function(){var n=this,e=this.options,t=this.viewer,o=this.image,r=this.list;return this.isShown&&!this.played&&this.fulled&&e.inline?(this.fulled=!1,this.close(),Ln(this.button,w),e.transition&&(Ln(r,j),this.viewed&&Ln(o,j)),e.focus&&this.clearEnforceFocus(),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.removeAttribute("aria-modal"),Ln(t,C),Bn(t,{zIndex:e.zIndexInline}),this.viewerData=Tn({},this.parentData),this.renderViewer(),this.renderList(),this.viewed&&this.initImage((function(){n.renderImage((function(){e.transition&&setTimeout((function(){Fn(o,j),Fn(r,j)}),0)}))})),this):this},tooltip:function(){var n=this,e=this.options,t=this.tooltipBox,o=this.imageData;return this.viewed&&!this.played&&e.tooltip?(t.textContent="".concat(Math.round(100*o.ratio),"%"),this.tooltipping?clearTimeout(this.tooltipping):e.transition?(this.fading&&En(t,J),Fn(t,L),Fn(t,x),Fn(t,j),t.removeAttribute("aria-hidden"),t.initialOffsetWidth=t.offsetWidth,Fn(t,A)):(Fn(t,L),t.removeAttribute("aria-hidden")),this.tooltipping=setTimeout((function(){e.transition?(Gn(t,J,(function(){Ln(t,L),Ln(t,x),Ln(t,j),t.setAttribute("aria-hidden",!0),n.fading=!1}),{once:!0}),Ln(t,A),n.fading=!0):(Ln(t,L),t.setAttribute("aria-hidden",!0)),n.tooltipping=!1}),1e3),this):this},toggle:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return 1===this.imageData.ratio?this.zoomTo(this.imageData.oldRatio,!0,null,n):this.zoomTo(1,!0,null,n),this},reset:function(){return this.viewed&&!this.played&&(this.imageData=Tn({},this.initialImageData),this.renderImage()),this},update:function(){var n=this,e=this.element,t=this.options,o=this.isImg;if(o&&!e.parentNode)return this.destroy();var r=[];if(In(o?[e]:e.querySelectorAll("img"),(function(e){_n(t.filter)?t.filter.call(n,e)&&r.push(e):n.getImageURL(e)&&r.push(e)})),!r.length)return this;if(this.images=r,this.length=r.length,this.ready){var i=[];if(In(this.items,(function(n,e){var t=n.querySelector("img"),o=r[e];o&&t&&o.src===t.src&&o.alt===t.alt||i.push(e)})),Bn(this.list,{width:"auto"}),this.initList(),this.isShown)if(this.length){if(this.viewed){var a=i.indexOf(this.index);if(a>=0)this.viewed=!1,this.view(Math.max(Math.min(this.index-a,this.length-1),0));else{var l=this.items[this.index];Fn(l,y),l.setAttribute("aria-selected",!0)}}}else this.image=null,this.viewed=!1,this.index=0,this.imageData={},this.canvas.innerHTML="",this.title.innerHTML=""}else this.build();return this},destroy:function(){var n=this.element,e=this.options;return n[g]?(this.destroyed=!0,this.ready?(this.played&&this.stop(),e.inline?(this.fulled&&this.exit(),this.unbind()):this.isShown?(this.viewing&&(this.imageRendering?this.imageRendering.abort():this.imageInitializing&&this.imageInitializing.abort()),this.hiding&&this.transitioning.abort(),this.hidden()):this.showing&&(this.transitioning.abort(),this.hidden()),this.ready=!1,this.viewer.parentNode.removeChild(this.viewer)):e.inline&&(this.delaying?this.delaying.abort():this.initializing&&this.initializing.abort()),e.inline||$n(n,R,this.onStart),n[g]=void 0,this):this}},re={getImageURL:function(n){var e=this.options.url;return e=yn(e)?n.getAttribute(e):_n(e)?e.call(this,n):""},enforceFocus:function(){var n=this;this.clearEnforceFocus(),Gn(document,V,this.onFocusin=function(e){var t=n.viewer,o=e.target;if(o!==document&&o!==t&&!t.contains(o)){for(;o;){if(null!==o.getAttribute("tabindex")||"true"===o.getAttribute("aria-modal"))return;o=o.parentElement}t.focus()}})},clearEnforceFocus:function(){this.onFocusin&&($n(document,V,this.onFocusin),this.onFocusin=null)},open:function(){var n=this.body;Fn(n,F),this.scrollbarWidth>0&&(n.style.paddingRight="".concat(this.scrollbarWidth+(parseFloat(this.initialBodyComputedPaddingRight)||0),"px"))},close:function(){var n=this.body;Ln(n,F),this.scrollbarWidth>0&&(n.style.paddingRight=this.initialBodyPaddingRight)},shown:function(){var n=this.element,e=this.options,t=this.viewer;this.fulled=!0,this.isShown=!0,this.render(),this.bind(),this.showing=!1,e.focus&&(t.focus(),this.enforceFocus()),_n(e.shown)&&Gn(n,nn,e.shown,{once:!0}),!1!==En(n,nn)&&this.ready&&this.isShown&&!this.hiding&&this.view(this.index)},hidden:function(){var n=this.element,e=this.options,t=this.viewer;e.fucus&&this.clearEnforceFocus(),this.close(),this.unbind(),Fn(t,W),t.removeAttribute("role"),t.removeAttribute("aria-labelledby"),t.removeAttribute("aria-modal"),t.setAttribute("aria-hidden",!0),this.resetList(),this.resetImage(),this.fulled=!1,this.viewed=!1,this.isShown=!1,this.hiding=!1,this.destroyed||(_n(e.hidden)&&Gn(n,tn,e.hidden,{once:!0}),En(n,tn,null,{cancelable:!1}))},requestFullscreen:function(n){var e=this.element.ownerDocument;if(this.fulled&&!(e.fullscreenElement||e.webkitFullscreenElement||e.mozFullScreenElement||e.msFullscreenElement)){var t=e.documentElement;t.requestFullscreen?Wn(n)?t.requestFullscreen(n):t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT):t.mozRequestFullScreen?t.mozRequestFullScreen():t.msRequestFullscreen&&t.msRequestFullscreen()}},exitFullscreen:function(){var n=this.element.ownerDocument;this.fulled&&(n.fullscreenElement||n.webkitFullscreenElement||n.mozFullScreenElement||n.msFullscreenElement)&&(n.exitFullscreen?n.exitFullscreen():n.webkitExitFullscreen?n.webkitExitFullscreen():n.mozCancelFullScreen?n.mozCancelFullScreen():n.msExitFullscreen&&n.msExitFullscreen())},change:function(n){var e=this.options,t=this.pointers,o=t[Object.keys(t)[0]];if(o){var r=o.endX-o.startX,i=o.endY-o.startY;switch(this.action){case h:0===r&&0===i||(this.pointerMoved=!0,this.move(r,i,n));break;case b:this.zoom(Jn(t),!1,null,n);break;case f:this.action="switched";var a=Math.abs(r);a>1&&a>Math.abs(i)&&(this.pointers={},r>1?this.prev(e.loop):r<-1&&this.next(e.loop))}In(t,(function(n){n.startX=n.endX,n.startY=n.endY}))}},isSwitchable:function(){var n=this.imageData,e=this.viewerData;return this.length>1&&n.x>=0&&n.y>=0&&n.width<=e.width&&n.height<=e.height}},ie=p.Viewer,ae=(qn=-1,function(){return qn+=1}),le=function(){function n(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(o(this,n),!e||1!==e.nodeType)throw new Error("The first argument is required and must be an element.");this.element=e,this.options=Tn({},c,Wn(t)&&t),this.action=!1,this.fading=!1,this.fulled=!1,this.hiding=!1,this.imageClicked=!1,this.imageData={},this.index=this.options.initialViewIndex,this.isImg=!1,this.isShown=!1,this.length=0,this.moving=!1,this.played=!1,this.playing=!1,this.pointers={},this.ready=!1,this.rotating=!1,this.scaling=!1,this.showing=!1,this.timeout=!1,this.tooltipping=!1,this.viewed=!1,this.viewing=!1,this.wheeling=!1,this.zooming=!1,this.pointerMoved=!1,this.id=ae(),this.init()}return i(n,[{key:"init",value:function(){var n=this,e=this.element,t=this.options;if(!e[g]){e[g]=this,t.focus&&!t.keyboard&&(t.focus=!1);var o="img"===e.localName,r=[];if(In(o?[e]:e.querySelectorAll("img"),(function(e){_n(t.filter)?t.filter.call(n,e)&&r.push(e):n.getImageURL(e)&&r.push(e)})),this.isImg=o,this.length=r.length,this.images=r,this.initBody(),Cn(document.createElement(g).style.transition)&&(t.transition=!1),t.inline){var i=0,a=function(){var e;(i+=1)===n.length&&(n.initializing=!1,n.delaying={abort:function(){clearTimeout(e)}},e=setTimeout((function(){n.delaying=!1,n.build()}),0))};this.initializing={abort:function(){In(r,(function(n){n.complete||($n(n,$,a),$n(n,G,a))}))}},In(r,(function(n){var e,t;n.complete?a():(Gn(n,$,e=function(){$n(n,G,t),a()},{once:!0}),Gn(n,G,t=function(){$n(n,$,e),a()},{once:!0}))}))}else Gn(e,R,this.onStart=function(e){var o=e.target;"img"!==o.localName||_n(t.filter)&&!t.filter.call(n,o)||n.view(n.images.indexOf(o))})}}},{key:"build",value:function(){if(!this.ready){var n=this.element,e=this.options,t=n.parentNode,o=document.createElement("div");o.innerHTML=d;var r=o.querySelector(".".concat(g,"-container")),i=r.querySelector(".".concat(g,"-title")),a=r.querySelector(".".concat(g,"-toolbar")),l=r.querySelector(".".concat(g,"-navbar")),s=r.querySelector(".".concat(g,"-button")),c=r.querySelector(".".concat(g,"-canvas"));if(this.parent=t,this.viewer=r,this.title=i,this.toolbar=a,this.navbar=l,this.button=s,this.canvas=c,this.footer=r.querySelector(".".concat(g,"-footer")),this.tooltipBox=r.querySelector(".".concat(g,"-tooltip")),this.player=r.querySelector(".".concat(g,"-player")),this.list=r.querySelector(".".concat(g,"-list")),r.id="".concat(g).concat(this.id),i.id="".concat(g,"Title").concat(this.id),Fn(i,e.title?Yn(Array.isArray(e.title)?e.title[0]:e.title):W),Fn(l,e.navbar?Yn(e.navbar):W),jn(s,W,!e.button),e.keyboard&&s.setAttribute("tabindex",0),e.backdrop&&(Fn(r,"".concat(g,"-backdrop")),e.inline||"static"===e.backdrop||Vn(c,hn,"hide")),yn(e.className)&&e.className&&e.className.split(fn).forEach((function(n){Fn(r,n)})),e.toolbar){var u=document.createElement("ul"),p=Wn(e.toolbar),m=bn.slice(0,3),v=bn.slice(7,9),h=bn.slice(9);p||Fn(a,Yn(e.toolbar)),In(p?e.toolbar:bn,(function(n,t){var o=p&&Wn(n),r=p?Dn(t):n,i=o&&!Cn(n.show)?n.show:n;if(i&&(e.zoomable||-1===m.indexOf(r))&&(e.rotatable||-1===v.indexOf(r))&&(e.scalable||-1===h.indexOf(r))){var a=o&&!Cn(n.size)?n.size:n,l=o&&!Cn(n.click)?n.click:n,s=document.createElement("li");e.keyboard&&s.setAttribute("tabindex",0),s.setAttribute("role","button"),Fn(s,"".concat(g,"-").concat(r)),_n(l)||Vn(s,hn,r),xn(i)&&Fn(s,Yn(i)),-1!==["small","large"].indexOf(a)?Fn(s,"".concat(g,"-").concat(a)):"play"===r&&Fn(s,"".concat(g,"-large")),_n(l)&&Gn(s,R,l),u.appendChild(s)}})),a.appendChild(u)}else Fn(a,W);if(!e.rotatable){var f=a.querySelectorAll('li[class*="rotate"]');Fn(f,B),In(f,(function(n){a.appendChild(n)}))}if(e.inline)Fn(s,S),Bn(r,{zIndex:e.zIndexInline}),"static"===window.getComputedStyle(t).position&&Bn(t,{position:"relative"}),t.insertBefore(r,n.nextSibling);else{Fn(s,k),Fn(r,C),Fn(r,x),Fn(r,W),Bn(r,{zIndex:e.zIndex});var b=e.container;yn(b)&&(b=n.ownerDocument.querySelector(b)),b||(b=this.body),b.appendChild(r)}e.inline&&(this.render(),this.bind(),this.isShown=!0),this.ready=!0,_n(e.ready)&&Gn(n,Q,e.ready,{once:!0}),!1!==En(n,Q)?this.ready&&e.inline&&this.view(this.index):this.ready=!1}}}],[{key:"noConflict",value:function(){return window.Viewer=ie,n}},{key:"setDefaults",value:function(n){Tn(c,Wn(n)&&n)}}]),n}();return Tn(le.prototype,ne,ee,te,oe,re),le}()}({get exports(){return aS},set exports(n){aS=n}});var lS=aS;async function sS(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=!0,r=null,i=$l();if(na(t)||(t={}),!sa(n))return i.reject("eleImg is not a HTMLElement"),i;if(r=n,null!==e){if(!sa(e))return i.reject("eleGroup is not a HTMLElement"),i;o=!1,r=e}if(!o){let n=Oo(e.querySelectorAll("img"));if(0===n)return i.reject("eleGroup does not contain any img"),i;1===n&&(o=!0)}let a={button:!1,navbar:!1,title:!1,toolbar:{zoomIn:4,zoomOut:4,oneToOne:4,reset:4,prev:0,play:0,next:0,rotateLeft:4,rotateRight:4,flipHorizontal:4,flipVertical:4},tooltip:!1,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!1,keyboard:!0};o||(a=function(){let n={button:!1,navbar:!1,title:!1,toolbar:{zoomIn:4,zoomOut:4,oneToOne:4,reset:4,prev:0,play:0,next:0,rotateLeft:4,rotateRight:4,flipHorizontal:4,flipVertical:4},tooltip:!1,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!1,keyboard:!0};return n.navbar=!0,n.toolbar.prev=4,n.toolbar.next=4,n}()),a=iS(a,pi(t));let l=!1;a.hide=function(){l||(l=!0,c.hide(!0))},a.hidden=function(){c.destroy(),i.resolve("close")};let s=function(){let n=eg();return lS||n.Viewer}(),c=new s(r,a);return c.show(),i}async function cS(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=arguments.length>3?arguments[3]:void 0;return Ca(o)||(o=["https://cdn.jsdelivr.net/npm/viewerjs@1.11.5/dist/viewer.min.css","https://cdn.jsdelivr.net/npm/viewerjs@1.11.5/dist/viewer.min.js"]),await cC(o),sS(n,e,t)}const dS={components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.css","https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.js"]},images:{type:Array,default:()=>[]},imageStyle:{type:Object,default:()=>{}},opt:{type:Object,default:()=>{}},multiple:{type:Boolean,default:!1}},data:function(){return{loading:!0}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{n.loading=!1,n.$nextTick((()=>{Ve(fn(n,"$refs.wiv",[]),((n,e)=>{Zf(n,{duration:200,delay:100*e})}))}))}))},computed:{useImageStyle:function(){return iS({margin:"5px"},this.imageStyle)}},methods:{showImg:function(n){let e=this,t=null;e.multiple&&(t=e.$refs.wig),cS(n.currentTarget,t,e.opt,e.pathItems).catch((n=>{console.log(n)}))}}};var uS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",[n.loading?t("WIconLoading"):n._e(),n._v(" "),t("div",{ref:"wig",style:n.loading?"heigh:0px; max-height:0px; overflow-y:hidden;":""},n._l(n.images,(function(e,o){return t("div",{key:o,ref:"wiv",refInFor:!0,staticStyle:{display:"inline-block",opacity:"0","user-select":"none",cursor:"pointer",outline:"none"},attrs:{tabindex:"0"},on:{keyup:function(e){return!e.type.indexOf("key")&&n._k(e.keyCode,"enter",13,e.key,"Enter")?null:n.showImg.apply(null,arguments)},click:n.showImg}},[t("img",{style:n.useImageStyle,attrs:{src:e}})])})),0)],1)};uS._withStripped=!0;const pS={components:{demolink:iu,WImageViewerDyn:wa({render:uS,staticRenderFns:[]},(function(n){n&&n("data-v-4cd21020_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WImageViewerDyn.vue"},media:void 0})}),dS,"data-v-4cd21020",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WImageViewerDyn:{opt1:{images:["https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/001.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/002.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/003.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/004.jpg"],imageStyle:{maxWidth:"300px",maxHeight:"300px"},opt:{}},opt2:{images:["https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/005.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/006.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/007.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/view/008.jpg"],imageStyle:{maxWidth:"300px",maxHeight:"300px"},opt:{}}},actions:[]}}};var mS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-viewer-dyn",casename:"one image"}}),n._v(" "),t("w-image-viewer-dyn",{attrs:{images:n.WImageViewerDyn.opt1.images,imageStyle:n.WImageViewerDyn.opt1.imageStyle,opt:n.WImageViewerDyn.opt1.opt}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-viewer-dyn",casename:"multiple image with navbar"}}),n._v(" "),t("w-image-viewer-dyn",{attrs:{images:n.WImageViewerDyn.opt2.images,imageStyle:n.WImageViewerDyn.opt2.imageStyle,opt:n.WImageViewerDyn.opt2.opt,multiple:!0}})],1)])])};mS._withStripped=!0;const vS=wa({render:mS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-image-viewer-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/fengyuanchen/viewerjs",target:"_blank",rel:"noreferrer noopener"}},[n._v("Viewer.js")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//fengyuanchen.github.io/viewerjs/",target:"_blank",rel:"noreferrer noopener"}},[n._v("Viewer.js examples")])])}]},(function(n){n&&n("data-v-587827e7_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWImageViewerDyn.vue"},media:void 0})}),pS,"data-v-587827e7",false,undefined,!1,_a,void 0,void 0);var gS=4294967295,hS=Math.min;function fS(n,e){if((n=Wi(n))<1||n>9007199254740991)return[];var t=gS,o=hS(n,gS);e=ze(e),n-=gS;for(var r=ee(o,e);++t<n;)e(t);return r}function bS(){return new function(n,e){let t=null;os(n)||(n=0),n=ji(n),ma(e)||(e=!1);let o=function(){let n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=0,t=[];mp(n)&&(n=0),n=ji(n);let o=Vi();return o.get=function(){return t.length>0?(e+=1,t.splice(0,1)[0]):null},o.cb=function(){e-=1,e<0&&(e=0),t.length>0&&o.emit("message",t)},o.push=function(r){t.push(r),(n<=0||e<n)&&o.emit("message",t)},o.clear=function(){e=0,t=[]},o}(n);return o.on("message",(async function(n){let e=o.get();if(!e)return;await Pp(1);let t,r=fn(e,"id"),i=fn(e,"fun"),a=fn(e,"input");t=Zi(i)?await jp(i)(...a):{state:"error",msg:"fun is not a function"},o.emit(r,t),o.cb()})),function(n){let r=$l(),i=Ni();t=i;for(var a=arguments.length,l=new Array(a>1?a-1:0),s=1;s<a;s++)l[s-1]=arguments[s];let c={id:i,fun:n,input:l};return o.push(c),o.once(i,(n=>{e?i===t?"success"===n.state?r.resolve(n.msg):r.reject(n.msg):r.reject({reason:"cancelled"}):"success"===n.state?r.resolve(n.msg):r.reject(n.msg)})),r}}(arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,arguments.length>1&&void 0!==arguments[1]&&arguments[1])}let yS=!1;var kS={directives:{domresize:Mi()},components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.css","https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.js"]},images:{type:Array,default:()=>[]},imageWidth:{type:Number,default:300},imageWidthSoft:{type:Number,default:null},colNum:{type:Number,default:null},space:{type:Number,default:15},imageStyle:{type:Object,default:()=>{}},arrangeWhenFinish:{type:Boolean,default:!1},numParallel:{type:Number,default:5},opt:{type:Object,default:()=>{}}},data:function(){return{dbc:Mu(),loading:!0,first:!1,widthPanel:0,heightPanel:0,imageCols:[],imageLocs:[],useImageStyle:{},uesImageWidth:0,imagesRes:[]}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{n.loading=!1}))},computed:{changeImages:function(){let n=this.images;return this.refreshDebounce({images:n}),""},changeStyle:function(){let n=this,e=n.widthPanel,t=n.imageWidth,o=n.imageStyle,r=n.colNum,i=n.space;return n.refreshDebounce({widthPanel:e,imageWidth:t,imageStyle:o,colNum:r,space:i}),""}},methods:{resize:function(n){let e=this,t=fn(e,"$el.offsetWidth",0);yS||e.widthPanel!==t&&(e.widthPanel=t)},getImgSize:function(n,e){let t=$l(),o=`g${Ni()}`,r=document.createElement("img");r.src=n,r.style.maxWidth=`${e}px`;let i=document.createElement("div");return i.id=`img-${o}`,i.style.position="absolute",i.style.width=0,i.style.height=0,i.style.opacity=0,i.style.overflow="hidden",i.appendChild(r),document.body.appendChild(i),r.onload=function(){t.resolve({src:n,id:o,w:r.clientWidth,h:r.clientHeight,err:null}),ca(i)},r.onerror=function(e){t.reject({src:n,w:0,h:0,err:e}),ca(i)},t},getImgsSize:function(n,e){let t=this,o=Vi(),r=bS(t.numParallel);t.imagesRes=[];let i=-1;return Ve(t.images,((a,l)=>{r(t.getImgSize,a,n).then((n=>{i++;let r=i;t.arrangeWhenFinish&&(r=l);let a={...n,name:(s=n.src,s.split("\\").pop().split("/").pop()),ind:r,evKey:e};var s;t.imagesRes[r]=a,o.emit("get",a)})).catch((n=>{console.log(n)}))})),o},refreshDebounce:function(){let n=this;n.dbc((()=>{n.refresh()}))},refresh:function(){let n=this,e=null,t=null;if(ha(n.imageWidthSoft)&&n.imageWidthSoft>0)t=(n.widthPanel+n.space)/(n.imageWidthSoft+n.space),t=Math.floor(t),t=Math.max(t,1),e=(n.widthPanel-n.space*(t-1))/t;else if(Ri(n.colNum))t=ji(n.colNum),e=(n.widthPanel-(t-1)*n.space)/t,e=Math.floor(e);else if(ha(n.imageWidth)&&n.imageWidth>0){e=n.imageWidth;let o=n.widthPanel+n.space;o=Math.max(o,0);let r=e+n.space;r=Math.max(r,1),t=Math.floor(o/r)}else console.log("invalid colNum or imageWidth or imageWidthSoft",n.colNum,n.imageWidth,n.imageWidthSoft),t=4,e=300;n.uesImageWidth=e;let o={...n.imageStyle,"max-width":`${e}px`,"user-select":"none",cursor:"pointer",outline:"none"};function r(){n.imageCols=Io(fS(t),(()=>[])),n.imageLocs=Io(fS(t),(()=>0))}function i(e){if(!ya(n.imageCols))return;let t=function(){let e=n.imageLocs[0],t=0;return Ve(n.imageLocs,((n,o)=>{e>n&&(e=n,t=o)})),t}();try{n.imageCols[t].push(e),n.imageLocs[t]+=e.h+n.space+53}catch(n){}}function a(){r(),Ve(n.imagesRes,(n=>{i(n)}))}n.useImageStyle=o,n.first?a():function(){let t=$l();r();let o=Ni(),l=Oo(n.images),s=n.getImgsSize(e,o),c=0;s.on("get",(e=>{e.evKey===o&&(i(e),c++,c>=l&&(n.first=!0,n.arrangeWhenFinish&&a(),t.resolve()))}))}()},showImg:function(n,e){let t=this;yS=!0,cS(n.currentTarget,null,t.opt,t.pathItems).finally((()=>{yS=!1})),t.$emit("click",e)}}};const xS=kS;var CS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],attrs:{changeImages:n.changeImages,changeStyle:n.changeStyle},on:{domresize:n.resize}},[t("div",{staticStyle:{"margin-top":"-1px",height:"1px"}}),n._v(" "),n.loading?t("WIconLoading"):n._e(),n._v(" "),t("div",{style:n.loading?"heigh:0px; max-height:0px; overflow-y:hidden;":""},n._l(n.imageCols,(function(e,o){return t("div",{key:"c-"+o,style:"display:table-cell; vertical-align:top; margin:0; padding-left:"+(o>0?n.space:0)+"px;"},n._l(e,(function(e,o){return t("div",{key:"kimg-"+o,class:n.first?"":"fadeIn",style:"margin:"+(o>0?n.space:0)+"px 0 0 0; width:"+n.uesImageWidth+"px; user-select:none; outline:none;",attrs:{tabindex:"0"}},[t("div",{style:"display:flex;"},[t("img",{style:n.useImageStyle,attrs:{src:e.src},on:{keyup:function(t){return!t.type.indexOf("key")&&n._k(t.keyCode,"enter",13,t.key,"Enter")?null:function(t){n.showImg(t,e)}.apply(null,arguments)},click:function(t){n.showImg(t,e)}}})]),n._v(" "),t("div",{staticStyle:{background:"rgba(0,0,0,0.65)",padding:"5px"}},[t("input",{staticClass:"inp",staticStyle:{"font-size":"0.8rem",color:"#fff"},attrs:{type:"text",_spellcheck:"false",readonly:""},domProps:{value:e.name}})]),n._v(" "),t("div",{staticStyle:{background:"rgba(200,200,200,0.5)",padding:"3px 5px"}},[t("input",{staticClass:"inp",staticStyle:{"font-size":"0.7rem",opacity:"0.75"},attrs:{type:"text",_spellcheck:"false",readonly:""},domProps:{value:e.src}})])])})),0)})),0)],1)};CS._withStripped=!0;const SS={components:{demolink:iu,WImageCascadingDyn:wa({render:CS,staticRenderFns:[]},(function(n){n&&n("data-v-09df0876_0",{source:"\n.inp[data-v-09df0876] {\r\n    font: inherit;\r\n    height: 1rem;\r\n    line-height: 1rem;\r\n    width: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    display: block;\r\n    background: transparent;\r\n    border-style: none;\n}\n.inp[data-v-09df0876]:focus {\r\n    outline: none;\n}\n.fadeIn[data-v-09df0876] {\r\n    animation: aniFadeIn-data-v-09df0876 0.3s;\n}\n@keyframes aniFadeIn-data-v-09df0876\r\n{\nfrom {opacity: 0;}\nto {opacity: 1}\n}\r\n",map:{version:3,sources:["D:\\- 006 -        開源\\開源-JS-103-2-w-component-vue\\w-component-vue\\src\\components\\WImageCascadingDyn.vue"],names:[],mappings:";AAolBA;IACA,aAAA;IACA,YAAA;IACA,iBAAA;IACA,WAAA;IACA,SAAA;IACA,UAAA;IACA,cAAA;IACA,uBAAA;IACA,kBAAA;AACA;AACA;IACA,aAAA;AACA;AACA;IACA,yCAAA;AACA;AACA;;AAEA,MAAA,UAAA,CAAA;AACA,IAAA,UAAA;AACA",file:"WImageCascadingDyn.vue",sourcesContent:["<template>\r\n    <div\r\n        :changeImages=\"changeImages\"\r\n        :changeStyle=\"changeStyle\"\r\n        v-domresize\r\n        @domresize=\"resize\"\r\n    >\r\n\r\n        \x3c!-- 初始化無圖片時先撐開寬度 --\x3e\r\n        <div style=\"margin-top:-1px; height:1px;\"></div>\r\n\r\n        <WIconLoading v-if=\"loading\"></WIconLoading>\r\n\r\n        <div :style=\"`${loading?'heigh:0px; max-height:0px; overflow-y:hidden;':''}`\">\r\n\r\n            <div\r\n                :style=\"`display:table-cell; vertical-align:top; margin:0; padding-left:${kimgs>0?space:0}px;`\"\r\n                :key=\"`c-${kimgs}`\"\r\n                v-for=\"(imgs,kimgs) in imageCols\"\r\n            >\r\n\r\n                <div\r\n                    :class=\"`${first?'':'fadeIn'}`\"\r\n                    :style=\"`margin:${kimg>0?space:0}px 0 0 0; width:${uesImageWidth}px; user-select:none; outline:none;`\"\r\n                    tabindex=\"0\"\r\n                    :key=\"`kimg-${kimg}`\"\r\n                    v-for=\"(img,kimg) in imgs\"\r\n                >\r\n\r\n                    <div :style=\"`display:flex;`\">\r\n                        <img\r\n                            :style=\"useImageStyle\"\r\n                            :src=\"img.src\"\r\n                            @keyup.enter=\"(e)=>{showImg(e,img)}\"\r\n                            @click=\"(e)=>{showImg(e,img)}\"\r\n                        >\r\n                    </div>\r\n\r\n                    <div style=\"background:rgba(0,0,0,0.65); padding:5px;\">\r\n                        <input\r\n                            type=\"text\"\r\n                            class=\"inp\"\r\n                            style=\"font-size:0.8rem; color:#fff;\"\r\n                            _spellcheck=\"false\"\r\n                            readonly\r\n                            :value=\"img.name\"\r\n                        >\r\n                    </div>\r\n\r\n                    <div style=\"background:rgba(200,200,200,0.5); padding:3px 5px;\">\r\n                        <input\r\n                            type=\"text\"\r\n                            class=\"inp\"\r\n                            style=\"font-size:0.7rem; opacity:0.75;\"\r\n                            _spellcheck=\"false\"\r\n                            readonly\r\n                            :value=\"img.src\"\r\n                        >\r\n                    </div>\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport each from 'lodash-es/each.js'\r\nimport map from 'lodash-es/map.js'\r\nimport get from 'lodash-es/get.js'\r\nimport times from 'lodash-es/times.js'\r\nimport size from 'lodash-es/size.js'\r\nimport isNumber from 'lodash-es/isNumber.js'\r\nimport importResources from 'wsemi/src/importResources.mjs'\r\nimport domShowImagesDyn from 'wsemi/src/domShowImagesDyn.mjs'\r\nimport ispint from 'wsemi/src/ispint.mjs'\r\nimport cint from 'wsemi/src/cint.mjs'\r\nimport isarr from 'wsemi/src/isarr.mjs'\r\nimport genPm from 'wsemi/src/genPm.mjs'\r\nimport genID from 'wsemi/src/genID.mjs'\r\nimport pmQueue from 'wsemi/src/pmQueue.mjs'\r\nimport domRemove from 'wsemi/src/domRemove.mjs'\r\nimport evem from 'wsemi/src/evem.mjs'\r\nimport debounce from 'wsemi/src/debounce.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport WIconLoading from './WIconLoading.vue'\r\n\r\n\r\n//showViewer, 得要跨組件共用, 因彈出viewer會影響全部組件\r\nlet showViewer = false\r\n\r\n\r\nfunction getFileName(str) {\r\n    return str.split('\\\\').pop().split('/').pop()\r\n}\r\n\r\n\r\n/**\r\n * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入viewerjs組件js與css檔案位置字串陣列，預設詳見原始碼處props->pathItems->default\r\n * @vue-prop {Array} [images=[]] 輸入圖片網址陣列，預設[]\r\n * @vue-prop {Number} [imageWidth=300] 輸入圖片寬度數字，單位為px，預設300\r\n * @vue-prop {Number} [imageWidthSoft=null] 輸入自動計算最小需滿足的圖片寬度數字，單位為px，預設null\r\n * @vue-prop {Number} [colNum=null] 輸入組件寬度圖片欄位(水平向有幾張圖片)數量數字，預設null\r\n * @vue-prop {Number} [space=15] 輸入圖片間間距長度數字，單位為px，預設15\r\n * @vue-prop {Object} [imageStyle={}] 輸入圖片style物件，預設{}\r\n * @vue-prop {Object} [arrangeWhenFinish=false] 輸入是否於圖片載入完畢時依照原本圖片順序排序布林值，預設false\r\n * @vue-prop {Number} [numParallel=5] 輸入同時載入圖片數量數字，預設5\r\n * @vue-prop {Object} [opt={}] 輸入viewerjs設定物件，預設使用optOne或optMuti，若img僅一個則使用optOne，反之使用optMuti\r\n * @vue-prop {Boolean} [multiple=false] 輸入\r\n */\r\nexport default {\r\n    directives: {\r\n        domresize: domResize(),\r\n    },\r\n    components: {\r\n        WIconLoading,\r\n    },\r\n    props: {\r\n        pathItems: {\r\n            type: Array,\r\n            default: () => [ //預設值詳見 wsemi/src/domShowImagesDyn.mjs, 因此處有預載, 故所使用viewerjs的版本得相同\r\n                'https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.css',\r\n                'https://cdn.jsdelivr.net/npm/viewerjs@1.10.5/dist/viewer.min.js',\r\n            ],\r\n        },\r\n        images: {\r\n            type: Array,\r\n            default: () => [],\r\n        },\r\n        imageWidth: {\r\n            type: Number,\r\n            default: 300,\r\n        },\r\n        imageWidthSoft: {\r\n            type: Number,\r\n            default: null,\r\n        },\r\n        colNum: {\r\n            type: Number,\r\n            default: null,\r\n        },\r\n        space: {\r\n            type: Number,\r\n            default: 15,\r\n        },\r\n        imageStyle: {\r\n            type: Object,\r\n            default: () => {},\r\n        },\r\n        arrangeWhenFinish: {\r\n            type: Boolean,\r\n            default: false,\r\n        },\r\n        numParallel: {\r\n            type: Number,\r\n            default: 5,\r\n        },\r\n        opt: {\r\n            type: Object,\r\n            default: () => {},\r\n        },\r\n    },\r\n    data: function() {\r\n        return {\r\n            dbc: debounce(),\r\n\r\n            loading: true,\r\n            first: false,\r\n\r\n            widthPanel: 0,\r\n            heightPanel: 0,\r\n            imageCols: [],\r\n            imageLocs: [],\r\n            useImageStyle: {},\r\n            uesImageWidth: 0,\r\n\r\n            imagesRes: [],\r\n\r\n        }\r\n    },\r\n    mounted: function() {\r\n        //console.log('mounted')\r\n\r\n        let vo = this\r\n\r\n        //importResources\r\n        importResources(vo.pathItems)\r\n            .then((res) => {\r\n                //console.log('res', res)\r\n\r\n                //loading\r\n                vo.loading = false\r\n\r\n            })\r\n\r\n    },\r\n    computed: {\r\n\r\n        changeImages: function() {\r\n            // console.log('computed changeImages')\r\n\r\n            let vo = this\r\n\r\n            let images = vo.images\r\n\r\n            //refreshDebounce\r\n            vo.refreshDebounce({ images })\r\n\r\n            return ''\r\n        },\r\n\r\n        changeStyle: function() {\r\n            // console.log('computed changeStyle')\r\n\r\n            let vo = this\r\n\r\n            //for trigger\r\n            let widthPanel = vo.widthPanel\r\n            let imageWidth = vo.imageWidth\r\n            let imageStyle = vo.imageStyle\r\n            let colNum = vo.colNum\r\n            let space = vo.space\r\n\r\n            //refreshDebounce\r\n            vo.refreshDebounce({ widthPanel, imageWidth, imageStyle, colNum, space })\r\n\r\n            return ''\r\n        },\r\n\r\n    },\r\n    methods: {\r\n\r\n        resize: function(msg) {\r\n            // console.log('methods resize', msg)\r\n\r\n            let vo = this\r\n\r\n            //widthPanel\r\n            let widthPanel = get(vo, '$el.offsetWidth', 0)\r\n\r\n            //check, 因開啟viewer會改變視窗尺寸, 進而觸發resize, 會導致觸發changeStyle並重算圖片, 故得使用showViewer判斷是否為開啟viewer狀態, 避免重算圖片\r\n            if (showViewer) {\r\n                return\r\n            }\r\n\r\n            //check\r\n            if (vo.widthPanel === widthPanel) {\r\n                return\r\n            }\r\n\r\n            //save\r\n            vo.widthPanel = widthPanel\r\n\r\n        },\r\n\r\n        getImgSize: function(src, uesImageWidth) {\r\n            //console.log('methods getImgSize', src, uesImageWidth)\r\n\r\n            // let vo = this\r\n\r\n            //pm\r\n            let pm = genPm()\r\n\r\n            //id\r\n            let id = `g${genID()}`\r\n\r\n            //img\r\n            let img = document.createElement('img')\r\n            img.src = src\r\n            img.style.maxWidth = `${uesImageWidth}px`\r\n\r\n            //div\r\n            let div = document.createElement('div')\r\n            div.id = `img-${id}`\r\n            div.style.position = 'absolute'\r\n            div.style.width = 0\r\n            div.style.height = 0\r\n            div.style.opacity = 0\r\n            div.style.overflow = 'hidden'\r\n            div.appendChild(img)\r\n\r\n            //body\r\n            document.body.appendChild(div)\r\n\r\n            //onload\r\n            img.onload = function() {\r\n                // setTimeout(() => {\r\n                //     pm.resolve({\r\n                //         src,\r\n                //         id,\r\n                //         w: img.clientWidth,\r\n                //         h: img.clientHeight,\r\n                //         err: null,\r\n                //     })\r\n                //     domRemove(div)\r\n                // }, random(10, 2500))\r\n                pm.resolve({\r\n                    src,\r\n                    id,\r\n                    w: img.clientWidth,\r\n                    h: img.clientHeight,\r\n                    err: null,\r\n                })\r\n                domRemove(div)\r\n            }\r\n\r\n            //onerror\r\n            img.onerror = function(err) {\r\n                pm.reject({\r\n                    src,\r\n                    w: 0,\r\n                    h: 0,\r\n                    err,\r\n                })\r\n                domRemove(div)\r\n            }\r\n\r\n            return pm\r\n        },\r\n\r\n        getImgsSize: function(uesImageWidth, evKey) {\r\n            //console.log('methods getImgsSize', uesImageWidth, evKey)\r\n\r\n            let vo = this\r\n\r\n            //ev\r\n            let ev = evem()\r\n\r\n            //pmQueue\r\n            let pmq = pmQueue(vo.numParallel) //1次取得numParallel個圖片\r\n\r\n            //getImgSize\r\n            vo.imagesRes = []\r\n            let j = -1\r\n            each(vo.images, (src, k) => {\r\n                pmq(vo.getImgSize, src, uesImageWidth)\r\n                    .then((r) => {\r\n                        j++\r\n\r\n                        //ind\r\n                        let ind = j\r\n                        if (vo.arrangeWhenFinish) { //需依照原始順序排序\r\n                            ind = k\r\n                        }\r\n\r\n                        //o\r\n                        let o = {\r\n                            ...r,\r\n                            name: getFileName(r.src),\r\n                            ind,\r\n                            evKey,\r\n                        }\r\n\r\n                        //save imagesRes\r\n                        vo.imagesRes[ind] = o\r\n\r\n                        //emit\r\n                        ev.emit('get', o)\r\n\r\n                    })\r\n                    .catch((err) => {\r\n                        console.log(err)\r\n                    })\r\n            })\r\n\r\n            return ev\r\n        },\r\n\r\n        refreshDebounce: function() {\r\n            //console.log('methods refreshDebounce')\r\n\r\n            let vo = this\r\n\r\n            //dbc\r\n            vo.dbc(() => {\r\n\r\n                //refresh\r\n                vo.refresh()\r\n\r\n            })\r\n\r\n        },\r\n\r\n        refresh: function() {\r\n            // console.log('methods refresh')\r\n\r\n            let vo = this\r\n\r\n            //uesImageWidth, colNum\r\n            let uesImageWidth = null\r\n            let colNum = null\r\n            if (isNumber(vo.imageWidthSoft) && vo.imageWidthSoft > 0) {\r\n                // console.log('優先使用imageWidthSoft計算colNum與imageWidth')\r\n\r\n                //colNum\r\n                colNum = (vo.widthPanel + vo.space) / (vo.imageWidthSoft + vo.space)\r\n                colNum = Math.floor(colNum)\r\n                colNum = Math.max(colNum, 1)\r\n                // console.log('colNum', colNum)\r\n\r\n                //uesImageWidth\r\n                uesImageWidth = (vo.widthPanel - vo.space * (colNum - 1)) / colNum\r\n                // console.log('uesImageWidth', uesImageWidth)\r\n\r\n            }\r\n            else if (ispint(vo.colNum)) {\r\n                // console.log('次先使用colNum計算imageWidth')\r\n\r\n                //colNum\r\n                colNum = cint(vo.colNum)\r\n\r\n                //uesImageWidth\r\n                uesImageWidth = (vo.widthPanel - (colNum - 1) * vo.space) / colNum\r\n                uesImageWidth = Math.floor(uesImageWidth)\r\n\r\n            }\r\n            else if (isNumber(vo.imageWidth) && vo.imageWidth > 0) {\r\n                // console.log('最後使用imageWidth計算colNum')\r\n\r\n                //uesImageWidth\r\n                uesImageWidth = vo.imageWidth\r\n\r\n                //colNum\r\n                let wa = vo.widthPanel + vo.space\r\n                wa = Math.max(wa, 0)\r\n                let wis = uesImageWidth + vo.space\r\n                wis = Math.max(wis, 1)\r\n                colNum = Math.floor(wa / wis)\r\n\r\n            }\r\n            else {\r\n                console.log('invalid colNum or imageWidth or imageWidthSoft', vo.colNum, vo.imageWidth, vo.imageWidthSoft)\r\n                colNum = 4\r\n                uesImageWidth = 300\r\n            }\r\n            vo.uesImageWidth = uesImageWidth\r\n\r\n            //useImageStyle\r\n            let useImageStyle = {\r\n                ...vo.imageStyle,\r\n                'max-width': `${uesImageWidth}px`,\r\n                'user-select': 'none',\r\n                'cursor': 'pointer',\r\n                'outline': 'none',\r\n            }\r\n            vo.useImageStyle = useImageStyle\r\n\r\n            function getMinHeightCol() {\r\n                let hmin = vo.imageLocs[0]\r\n                let ihmin = 0\r\n                each(vo.imageLocs, (v, i) => {\r\n                    if (hmin > v) {\r\n                        hmin = v\r\n                        ihmin = i\r\n                    }\r\n                })\r\n                return ihmin\r\n            }\r\n\r\n            function resetImageColsAndLocs() {\r\n                vo.imageCols = map(times(colNum), () => {\r\n                    return []\r\n                })\r\n                vo.imageLocs = map(times(colNum), () => {\r\n                    return 0\r\n                })\r\n            }\r\n\r\n            function pushImage(img) {\r\n\r\n                //check, 開發階段可能hot reload組件導致出現上一輪事件\r\n                if (!isarr(vo.imageCols)) {\r\n                    return\r\n                }\r\n\r\n                //getMinHeightCol\r\n                let i = getMinHeightCol()\r\n\r\n                try {\r\n\r\n                    //push\r\n                    vo.imageCols[i].push(img)\r\n\r\n                    //update\r\n                    vo.imageLocs[i] += img.h + vo.space + (29 + 24) //29是圖名區高度, 24是位址區高度\r\n\r\n                }\r\n                catch (err) { }\r\n\r\n            }\r\n\r\n            function build() {\r\n\r\n                //pm\r\n                let pm = genPm()\r\n\r\n                //resetImageColsAndLocs\r\n                resetImageColsAndLocs()\r\n\r\n                //evKey\r\n                let evKey = genID()\r\n\r\n                //num\r\n                let num = size(vo.images)\r\n\r\n                //getImgsSize\r\n                let ev = vo.getImgsSize(uesImageWidth, evKey)\r\n\r\n                //pushImage\r\n                let n = 0\r\n                ev.on('get', (img) => {\r\n                    // console.log('get', img)\r\n\r\n                    //check\r\n                    if (img.evKey !== evKey) {\r\n                        return\r\n                    }\r\n\r\n                    //pushImage\r\n                    pushImage(img)\r\n\r\n                    //check\r\n                    n++\r\n                    if (n >= num) {\r\n\r\n                        //first\r\n                        vo.first = true\r\n\r\n                        //arrange\r\n                        if (vo.arrangeWhenFinish) {\r\n                            arrange()\r\n                        }\r\n\r\n                        //resolve\r\n                        pm.resolve()\r\n\r\n                    }\r\n\r\n                })\r\n\r\n                return pm\r\n            }\r\n\r\n            function arrange() {\r\n\r\n                //resetImageColsAndLocs\r\n                resetImageColsAndLocs()\r\n\r\n                //pushImage\r\n                each(vo.imagesRes, (img) => {\r\n                    pushImage(img)\r\n                })\r\n\r\n            }\r\n\r\n            if (!vo.first) {\r\n                // console.log('build')\r\n                build()\r\n            }\r\n            else {\r\n                // console.log('arrange')\r\n                arrange()\r\n            }\r\n\r\n        },\r\n\r\n        showImg: function(e, img) {\r\n            // console.log('methods showImg', e, img)\r\n\r\n            let vo = this\r\n\r\n            //showViewer\r\n            showViewer = true\r\n\r\n            //domShowImagesDyn\r\n            domShowImagesDyn(e.currentTarget, null, vo.opt, vo.pathItems)\r\n                .finally(() => {\r\n\r\n                    //showViewer\r\n                    showViewer = false\r\n\r\n                })\r\n\r\n            //emit\r\n            vo.$emit('click', img)\r\n\r\n        },\r\n\r\n    },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.inp {\r\n    font: inherit;\r\n    height: 1rem;\r\n    line-height: 1rem;\r\n    width: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    display: block;\r\n    background: transparent;\r\n    border-style: none;\r\n}\r\n.inp:focus {\r\n    outline: none;\r\n}\r\n.fadeIn {\r\n    animation: aniFadeIn 0.3s;\r\n}\r\n@keyframes aniFadeIn\r\n{\r\n    from {opacity: 0;}\r\n    to {opacity: 1}\r\n}\r\n</style>\r\n"]},media:void 0})}),xS,"data-v-09df0876",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WImageCascadingDyn:{opt1:{images:["https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/001.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/002.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/003.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/004.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/005.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/006.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/007.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/008.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/009.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/010.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/011.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/012.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/013.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/014.jpg","https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/img/food/015.jpg"],imageStyle:{},opt:{}}},actions:[]}}};var wS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-cascading-dyn",casename:"default(imageWidth=300)"}}),n._v(" "),t("w-image-cascading-dyn",{attrs:{images:n.WImageCascadingDyn.opt1.images,imageStyle:n.WImageCascadingDyn.opt1.imageStyle,opt:n.WImageCascadingDyn.opt1.opt}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-cascading-dyn",casename:"imageWidth"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px","font-size":"0.9rem"}},[n._v("\n                colNum=(645-3*15)/150=4\n            ")]),n._v(" "),t("w-image-cascading-dyn",{staticStyle:{width:"645px"},attrs:{imageWidth:150,images:n.WImageCascadingDyn.opt1.images,imageStyle:n.WImageCascadingDyn.opt1.imageStyle,opt:n.WImageCascadingDyn.opt1.opt}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-cascading-dyn",casename:"colNum"}}),n._v(" "),t("w-image-cascading-dyn",{staticStyle:{"max-width":"1200px"},attrs:{colNum:5,images:n.WImageCascadingDyn.opt1.images,imageStyle:n.WImageCascadingDyn.opt1.imageStyle,opt:n.WImageCascadingDyn.opt1.opt}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-cascading-dyn",casename:"imageWidthSoft"}}),n._v(" "),t("w-image-cascading-dyn",{staticStyle:{width:"100%"},attrs:{imageWidthSoft:300,images:n.WImageCascadingDyn.opt1.images,imageStyle:n.WImageCascadingDyn.opt1.imageStyle,opt:n.WImageCascadingDyn.opt1.opt}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-image-cascading-dyn",casename:"arrangeWhenFinish"}}),n._v(" "),t("w-image-cascading-dyn",{staticStyle:{"max-width":"1200px"},attrs:{arrangeWhenFinish:!0,images:n.WImageCascadingDyn.opt1.images,imageStyle:n.WImageCascadingDyn.opt1.imageStyle,opt:n.WImageCascadingDyn.opt1.opt}})],1)])])};wS._withStripped=!0;const WS=wa({render:wS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-image-cascading-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/fengyuanchen/fooderjs",target:"_blank",rel:"noreferrer noopener"}},[n._v("Viewer.js")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//fengyuanchen.github.io/fooderjs/",target:"_blank",rel:"noreferrer noopener"}},[n._v("Viewer.js examples")])])}]},(function(n){n&&n("data-v-eea15d5c_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWImageCascadingDyn.vue"},media:void 0})}),SS,"data-v-eea15d5c",false,undefined,!1,_a,void 0,void 0);const _S={components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/w-ckeditor-vue/dist/ckeditor.js","https://cdn.jsdelivr.net/npm/w-ckeditor-vue@2.0.5/dist/w-ckeditor-vue.umd.js"]},value:{type:String,default:""},settings:{type:Object,default:()=>{}},height:{type:Number,default:250},editable:{type:Boolean,default:!0}},data:function(){return{cmpName:"WIconLoading"}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{if("loaded"!==e){let n=window["w-ckeditor-vue"];n.default&&(n=n.default),dC().component("w-ckeditor-vue",n)}n.cmpName="w-ckeditor-vue"}))},computed:{},methods:{}};var IS=function(){var n=this,e=n.$createElement;return(n._self._c||e)(n.cmpName,{ref:"$self",tag:"component",attrs:{settings:n.settings,height:n.height,editable:n.editable,value:n.value},on:{input:function(e){n.$emit("input",e)}}})};IS._withStripped=!0;const TS={components:{demolink:iu,WCkeditorVueDyn:wa({render:IS,staticRenderFns:[]},(function(n){n&&n("data-v-f7ce9c5e_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WCkeditorVueDyn.vue"},media:void 0})}),_S,"data-v-f7ce9c5e",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WCkeditorVueDyn:{content:"abc中文123",settings:{language:"zh",toolbar:{items:["heading","|","fontSize","fontColor","fontBackgroundColor","|","bold","italic","underline","strikethrough","|","subscript","superscript","|","alignment","bulletedList","numberedList","|","redo","undo","|","removeFormat"]}}},actions:[]}}};var AS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-ckeditor-vue-dyn",casename:"default"}}),n._v(" "),t("w-ckeditor-vue-dyn",{staticStyle:{width:"620px"},model:{value:n.WCkeditorVueDyn.content,callback:function(e){n.$set(n.WCkeditorVueDyn,"content",e)},expression:"WCkeditorVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-ckeditor-vue-dyn",casename:"height"}}),n._v(" "),t("w-ckeditor-vue-dyn",{staticStyle:{width:"620px"},attrs:{height:200},model:{value:n.WCkeditorVueDyn.content,callback:function(e){n.$set(n.WCkeditorVueDyn,"content",e)},expression:"WCkeditorVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-ckeditor-vue-dyn",casename:"settings"}}),n._v(" "),t("w-ckeditor-vue-dyn",{staticStyle:{width:"620px"},attrs:{settings:n.WCkeditorVueDyn.settings},model:{value:n.WCkeditorVueDyn.content,callback:function(e){n.$set(n.WCkeditorVueDyn,"content",e)},expression:"WCkeditorVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-ckeditor-vue-dyn",casename:"not editable"}}),n._v(" "),t("w-ckeditor-vue-dyn",{staticStyle:{width:"620px"},attrs:{editable:!1},model:{value:n.WCkeditorVueDyn.content,callback:function(e){n.$set(n.WCkeditorVueDyn,"content",e)},expression:"WCkeditorVueDyn.content"}})],1)])])};AS._withStripped=!0;const BS=wa({render:AS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-ckeditor-vue-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("div",{staticStyle:{color:"#f26","margin-bottom":"5px"}},[n._v("* Can not support IE11")]),n._v(" "),t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/ckeditor/ckeditor5",target:"_blank",rel:"noreferrer noopener"}},[n._v("ckeditor 5")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("ckeditor 5 examples")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/ckeditor/ckeditor5-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("ckeditor5-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/yuda-lyu/w-ckeditor-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-ckeditor-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//yuda-lyu.github.io/w-ckeditor-vue/examples/ex-default.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-ckeditor-vue examples")])])}]},(function(n){n&&n("data-v-6e51589c_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWCkeditorVueDyn.vue"},media:void 0})}),TS,"data-v-6e51589c",false,undefined,!1,_a,void 0,void 0);const HS={components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/tinymce@5.10.7/tinymce.min.js","https://cdn.jsdelivr.net/npm/w-tinymce-vue@2.0.6/dist/w-tinymce-vue.umd.js"]},value:{type:String,default:""},settings:{type:Object,default:()=>{}},height:{type:Number,default:250},editable:{type:Boolean,default:!0}},data:function(){return{cmpName:"WIconLoading"}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{if("loaded"!==e){let n=window["w-tinymce-vue"];n.default&&(n=n.default),dC().component("w-tinymce-vue",n)}n.cmpName="w-tinymce-vue"}))},computed:{},methods:{}};var PS=function(){var n=this,e=n.$createElement;return(n._self._c||e)(n.cmpName,{ref:"$self",tag:"component",attrs:{settings:n.settings,height:n.height,editable:n.editable,value:n.value},on:{input:function(e){n.$emit("input",e)}}})};PS._withStripped=!0;const FS={components:{demolink:iu,WTinymceVueDyn:wa({render:PS,staticRenderFns:[]},(function(n){n&&n("data-v-af8011cc_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WTinymceVueDyn.vue"},media:void 0})}),HS,"data-v-af8011cc",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WTinymceVueDyn:{content:"abc中文123",settings:{menubar:"",plugins:"",toolbar:"fontsizeselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent"}},actions:[]}}};var LS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-tinymce-vue-dyn",casename:"default"}}),n._v(" "),t("w-tinymce-vue-dyn",{staticStyle:{width:"620px"},model:{value:n.WTinymceVueDyn.content,callback:function(e){n.$set(n.WTinymceVueDyn,"content",e)},expression:"WTinymceVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-tinymce-vue-dyn",casename:"height"}}),n._v(" "),t("w-tinymce-vue-dyn",{staticStyle:{width:"620px"},attrs:{height:200},model:{value:n.WTinymceVueDyn.content,callback:function(e){n.$set(n.WTinymceVueDyn,"content",e)},expression:"WTinymceVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-tinymce-vue-dyn",casename:"settings"}}),n._v(" "),t("w-tinymce-vue-dyn",{staticStyle:{width:"620px"},attrs:{settings:n.WTinymceVueDyn.settings},model:{value:n.WTinymceVueDyn.content,callback:function(e){n.$set(n.WTinymceVueDyn,"content",e)},expression:"WTinymceVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-tinymce-vue-dyn",casename:"not editable"}}),n._v(" "),t("w-tinymce-vue-dyn",{staticStyle:{width:"620px"},attrs:{editable:!1},model:{value:n.WTinymceVueDyn.content,callback:function(e){n.$set(n.WTinymceVueDyn,"content",e)},expression:"WTinymceVueDyn.content"}})],1)])])};LS._withStripped=!0;const jS=wa({render:LS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-tinymce-vue-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/tinymce/tinymce",target:"_blank",rel:"noreferrer noopener"}},[n._v("tinymce")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//www.tiny.cloud/docs/demo/full-featured/",target:"_blank",rel:"noreferrer noopener"}},[n._v("tinymce examples")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/tinymce/tinymce-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("tinymce-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/yuda-lyu/w-tinymce-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-tinymce-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//yuda-lyu.github.io/w-tinymce-vue/examples/ex-default.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-tinymce-vue examples")])])}]},(function(n){n&&n("data-v-6bfd8eeb_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWTinymceVueDyn.vue"},media:void 0})}),FS,"data-v-6bfd8eeb",false,undefined,!1,_a,void 0,void 0);const RS={components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js","https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.min.css","https://cdn.jsdelivr.net/npm/w-quill-vue@2.0.5/dist/w-quill-vue.umd.js"]},value:{type:String,default:""},settings:{type:Object,default:()=>{}},height:{type:Number,default:250},editable:{type:Boolean,default:!0}},data:function(){return{cmpName:"WIconLoading"}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{if("loaded"!==e){let n=window["w-quill-vue"];n.default&&(n=n.default),dC().component("w-quill-vue",n)}n.cmpName="w-quill-vue"}))},computed:{},methods:{}};var DS=function(){var n=this,e=n.$createElement;return(n._self._c||e)(n.cmpName,{ref:"$self",tag:"component",attrs:{settings:n.settings,height:n.height,editable:n.editable,value:n.value},on:{input:function(e){n.$emit("input",e)}}})};DS._withStripped=!0;const zS={components:{demolink:iu,WQuillVueDyn:wa({render:DS,staticRenderFns:[]},(function(n){n&&n("data-v-682dcf88_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WQuillVueDyn.vue"},media:void 0})}),RS,"data-v-682dcf88",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WQuillVueDyn:{content:"abc中文123",settings:{modules:{toolbar:[{size:["small",!1,"large","huge"]}]}}},actions:[]}}};var VS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-quill-vue-dyn",casename:"default"}}),n._v(" "),t("w-quill-vue-dyn",{staticStyle:{width:"620px"},model:{value:n.WQuillVueDyn.content,callback:function(e){n.$set(n.WQuillVueDyn,"content",e)},expression:"WQuillVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-quill-vue-dyn",casename:"height"}}),n._v(" "),t("w-quill-vue-dyn",{staticStyle:{width:"620px"},attrs:{height:200},model:{value:n.WQuillVueDyn.content,callback:function(e){n.$set(n.WQuillVueDyn,"content",e)},expression:"WQuillVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-quill-vue-dyn",casename:"settings"}}),n._v(" "),t("w-quill-vue-dyn",{staticStyle:{width:"620px"},attrs:{settings:n.WQuillVueDyn.settings},model:{value:n.WQuillVueDyn.content,callback:function(e){n.$set(n.WQuillVueDyn,"content",e)},expression:"WQuillVueDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-quill-vue-dyn",casename:"not editable"}}),n._v(" "),t("w-quill-vue-dyn",{staticStyle:{width:"620px"},attrs:{editable:!1},model:{value:n.WQuillVueDyn.content,callback:function(e){n.$set(n.WQuillVueDyn,"content",e)},expression:"WQuillVueDyn.content"}})],1)])])};VS._withStripped=!0;const ZS=wa({render:VS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-quill-vue-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/quilljs/quill",target:"_blank",rel:"noreferrer noopener"}},[n._v("quill")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//quilljs.com/playground/",target:"_blank",rel:"noreferrer noopener"}},[n._v("quill examples")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/surmon-china/vue-quill-editor",target:"_blank",rel:"noreferrer noopener"}},[n._v("vue-quill-editor")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/yuda-lyu/w-quill-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-quill-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//yuda-lyu.github.io/w-quill-vue/examples/ex-default.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-quill-vue examples")])])}]},(function(n){n&&n("data-v-063263b0_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWQuillVueDyn.vue"},media:void 0})}),zS,"data-v-063263b0",false,undefined,!1,_a,void 0,void 0);let $S={tooltip:[],popup:[]};function GS(n,e){$S[n].push(e)}function ES(n,e){return hc($S[n])===e}function XS(n,e){kc($S[n],e)}let NS={mode:"wysiwyg",theme:"classic",lang:"zh_TW",counter:{enable:!1,type:"markdown"},tab:"\t",typewriterMode:!0,toolbarConfig:{pin:!0},cache:{enable:!1},toolbar:["headings","bold","italic","strike","link","|","list","ordered-list","outdent","indent","|","quote","line","insert-before","insert-after","|","table","|","undo","redo","|","edit-mode","export"],hint:{parse:!0,delay:0,extend:[]},preview:{maxWidth:1e10,delay:0,actions:[],hljs:{style:"monokai",lineNumber:!0}}};var MS={directives:{domresize:Mi()},components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/vditor@3.10.5/dist/index.css","https://cdn.jsdelivr.net/npm/vditor@3.10.5/dist/index.min.js"]},value:{type:String,default:""},height:{type:Number,default:250},settings:{type:Object,default:()=>{}},keyHint:{type:[String,Array],default:""},hintBorderRadius:{type:Number,default:4},hintBackgroundColor:{type:String,default:"#fff"},hintShadow:{type:Boolean,default:!0},hintShadowStyle:{type:String,default:"0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)"},cmpZIndex:{type:Number,default:3e3},editable:{type:Boolean,default:!0}},data:function(){return{loading:!0,mmkey:Ni(),bp:null,mode:"popup",kind:"click",isolated:!0,transitionTime:200,triggerWidth:null,contentStyle:"",contentEditor:null,showPopper:!1,placement:"bottom-start",placementDistX:0,placementDistY:-15,valueTrans:"",useHint:""}},mounted:function(){let n=this;(async function(){await Nu((()=>void 0!==n.$el)),await cC(n.pathItems);let e=window.Vditor;await Nu((()=>sa(fn(n,"$refs.divVditor"))));let t=n.$refs.divVditor;n.contentEditor=new e(t,n.useSettings),await Nu((()=>na(fn(n,"contentEditor.vditor")))),n.loading=!1,n.valueTrans=n.value,n.contentEditor.setValue(n.value)})().catch((n=>{console.log(n)}));let e="change-show-popper";n.bp=new Nd(n,n.funGetDivTrigger,n.funGetDivContent,"showPopper",e,{addTriggerMode:GS,checkTriggerEffMode:ES,removeTriggerMode:XS}),n.bp.on(e,(e=>{e||(n.useHint="")})),n.bp.mounted()},beforeDestroy:function(){let n=this;n.contentEditor&&(n.contentEditor.destroy(),n.contentEditor=null),n.bp&&n.bp.destroy()},computed:{keyHints:function(){let n=this,e=n.keyHint;return Ao(n.keyHint)&&(e=[n.keyHint]),e},useSettings:function(){let n=this,e={...NS,...n.settings};e.height=n.height;let t=[];return Ve(n.keyHints,(n=>{if(!Ao(n))return!0;let e={key:n,hint:async e=>[{html:`<div name="tar" tpht="${n}" style="display:none;"></div>`,value:""}]};t.push(e)})),e.hint.extend=t,e.input=e=>{n.valueTrans=e,n.detectAndShowHint(e),n.$emit("input",e)},e},changeValue:function(){let n=this.value;return this.relaValue(n),""},changeEditable:function(){let n=this.editable;return this.relaEditable(n),""},changeShowPopper:function(){let n=this,e=n.showPopper;return n.isolated||n.updateValue(e,"changeShowPopper"),""},useHintBorderRadius:function(){let n=this;return ha(n.hintBorderRadius)?`border-radius:${n.hintBorderRadius}px;`:""},useHintBackgroundColor:function(){return Qi(this.hintBackgroundColor)},useHintShadow:function(){if(!this.hintShadow)return"";let n=qi(this.hintShadowStyle,";","");return""!==n?`box-shadow:${n};`:""}},methods:{relaValue:function(){let n=this;n.loading||n.value!==n.valueTrans&&(n.valueTrans=n.value,n.contentEditor.setValue(n.value))},relaEditable:function(){let n=this;(async function(){await Nu((()=>!n.loading)),n.editable?n.contentEditor.enable():n.contentEditor.disabled()})().catch((n=>{console.log(n)}))},funGetDivTrigger:function(){let n=this,e=null;try{e=n.$el.querySelector('[class="vditor-hint"]')}catch(n){}return e},funGetDivContent:function(){return fn(this,"$refs.divContent",null)},findAnchor:function(){let n=this,e=$l(),t=0,o=setInterval((()=>{t++;let r=n.funGetDivTrigger();sa(r)&&(clearInterval(o),e.resolve(r)),t>100&&(clearInterval(o),e.reject("can not find the ele"))}),50);return e},getUseHint:function(n){let e="";try{e=n.querySelector('div[name="tar"]').getAttribute("tpht")}catch(n){}return e},detectAndShowHint:function(n){let e=this;Ca(e.keyHints)&&e.findAnchor().then((n=>{"none"!==n.style.display&&(e.useHint=e.getUseHint(n),e.evShow("click","call"),e.contentEditor.blur())})).catch((n=>{console.log(n)}))},evShow:function(n,e){let t=this;Zi(fn(t,"bp.evShow"))&&t.bp.evShow(n,e)},evHide:function(n,e){let t=this;Zi(fn(t,"bp.evHide"))&&t.bp.evHide(n,e)},updatePopper:function(n,e){let t=this;Zi(fn(t,"bp.updatePopper"))&&t.bp.updatePopper(n,e)},updateValue:function(n,e){let t=this;Zi(fn(t,"bp.updateValue"))&&t.bp.updateValue(n,e)},insertValue:function(n,e){let t=this;if(Zi(fn(t,"contentEditor.insertValue"))){t.contentEditor.insertValue(n);let e=t.contentEditor.getValue();Ve(t.keyHints,(n=>{e=e.replaceAll(`/ ${n}`,"")})),t.valueTrans=t.value,t.contentEditor.setValue(e),t.$emit("input",e)}}}};const OS=MS;var KS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{attrs:{changeValue:n.changeValue,changeEditable:n.changeEditable,changeShowPopper:n.changeShowPopper}},[n.loading?t("WIconLoading"):n._e(),n._v(" "),t("div",{staticClass:"WVditorFix",style:n.loading?"heigh:0px; max-height:0px; overflow-y:hidden;":""},[t("div",{ref:"divVditor"}),n._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:n.showPopper,expression:"showPopper"},{name:"domresize",rawName:"v-domresize"}],ref:"divContent",staticClass:"WPopperFix",style:"z-index:"+n.cmpZIndex+";",on:{domresize:n.updatePopper}},[n.showPopper?t("div",{style:n.contentStyle+" background:"+n.useHintBackgroundColor+"; "+n.useHintBorderRadius+" "+n.useHintShadow},[n._t("content",null,{hint:n.useHint,funInsert:function(e){n.insertValue(e,"slot")},funHide:function(){n.updateValue(!1,"slot")}})],2):n._e()])])],1)};KS._withStripped=!0;const YS={components:{demolink:iu,WVditorDyn:wa({render:KS,staticRenderFns:[]},(function(n){n&&n("data-v-1b13d5b5_0",{source:'\n.WPopperFix[data-popper-reference-hidden][data-v-1b13d5b5] {\r\n    visibility: hidden;\r\n    pointer-events: none;\n}\n.WVditorFix[data-v-1b13d5b5] .vditor-reset {\r\n    font-size: inherit;\n}\n.WVditorFix[data-v-1b13d5b5] div.vditor-hint:has(div[name="tar"]) { /* 使觸發區divTrigger(原本彈窗)完全透明 */\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n    outline: none;\n}\r\n',map:{version:3,sources:["D:\\- 006 -        開源\\開源-JS-103-2-w-component-vue\\w-component-vue\\src\\components\\WVditorDyn.vue"],names:[],mappings:";AAmxBA;IACA,kBAAA;IACA,oBAAA;AACA;AACA;IACA,kBAAA;AACA;AACA,oEAAA,6BAAA;IACA,kBAAA;IACA,oBAAA;IACA,aAAA;AACA",file:"WVditorDyn.vue",sourcesContent:["<template>\r\n    <div\r\n        :changeValue=\"changeValue\"\r\n        :changeEditable=\"changeEditable\"\r\n        :changeShowPopper=\"changeShowPopper\"\r\n    >\r\n\r\n        <WIconLoading v-if=\"loading\"></WIconLoading>\r\n\r\n        <div\r\n            class=\"WVditorFix\"\r\n            :style=\"`${loading?'heigh:0px; max-height:0px; overflow-y:hidden;':''}`\"\r\n        >\r\n\r\n            <div ref=\"divVditor\"></div>\r\n\r\n            <div\r\n                ref=\"divContent\"\r\n                class=\"WPopperFix\"\r\n                :style=\"`z-index:${cmpZIndex};`\"\r\n                v-show=\"showPopper\"\r\n                v-domresize\r\n                @domresize=\"updatePopper\"\r\n            >\r\n                <div\r\n                    :style=\"`${contentStyle} background:${useHintBackgroundColor}; ${useHintBorderRadius} ${useHintShadow}`\"\r\n                    v-if=\"showPopper\"\r\n                >\r\n                    <slot\r\n                        name=\"content\"\r\n                        :hint=\"useHint\"\r\n                        :funInsert=\"(v)=>{insertValue(v,'slot')}\"\r\n                        :funHide=\"()=>{updateValue(false,'slot')}\"\r\n                    ></slot>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport get from 'lodash-es/get.js'\r\nimport each from 'lodash-es/each.js'\r\nimport last from 'lodash-es/last.js'\r\nimport pull from 'lodash-es/pull.js'\r\nimport isNumber from 'lodash-es/isNumber.js'\r\nimport genID from 'wsemi/src/genID.mjs'\r\nimport genPm from 'wsemi/src/genPm.mjs'\r\nimport replace from 'wsemi/src/replace.mjs'\r\nimport waitFun from 'wsemi/src/waitFun.mjs'\r\nimport isfun from 'wsemi/src/isfun.mjs'\r\nimport isestr from 'wsemi/src/isestr.mjs'\r\nimport iseobj from 'wsemi/src/iseobj.mjs'\r\nimport isearr from 'wsemi/src/isearr.mjs'\r\nimport isEle from 'wsemi/src/isEle.mjs'\r\nimport importResources from 'wsemi/src/importResources.mjs'\r\nimport convertColor from '../js/convertColor.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport BuildPopper from '../js/buildPopper.mjs'\r\nimport WIconLoading from './WIconLoading.vue'\r\n\r\n\r\n//tootip與popup不共用已出現項目清單, 避免互相影響\r\nlet kpRespList = {\r\n    tooltip: [],\r\n    popup: [],\r\n}\r\nfunction addTriggerMode(mode, mmkey) {\r\n    kpRespList[mode].push(mmkey)\r\n}\r\nfunction checkTriggerEffMode(mode, mmkey) {\r\n    return last(kpRespList[mode]) === mmkey\r\n}\r\nfunction removeTriggerMode(mode, mmkey) {\r\n    pull(kpRespList[mode], mmkey)\r\n}\r\n\r\n\r\nlet def_settings = {\r\n    mode: 'wysiwyg', //sv: 雙欄位, ir:即時渲染, wysiwyg:所見即所得\r\n    // debugger: true,\r\n    // height: 500,\r\n    // placeholder: '請輸入Markdown格式文字',\r\n    theme: 'classic',\r\n    lang: 'zh_TW',\r\n    counter: {\r\n        enable: false,\r\n        type: 'markdown',\r\n    },\r\n    tab: '\\t',\r\n    typewriterMode: true,\r\n    toolbarConfig: {\r\n        pin: true\r\n    },\r\n    cache: {\r\n        enable: false\r\n    },\r\n    toolbar: [\r\n        // 'emoji',\r\n        'headings',\r\n        'bold',\r\n        'italic',\r\n        'strike',\r\n        'link',\r\n        '|',\r\n        'list',\r\n        'ordered-list',\r\n        // 'check',\r\n        'outdent',\r\n        'indent',\r\n        '|',\r\n        'quote',\r\n        'line',\r\n        // 'code',\r\n        // 'inline-code',\r\n        'insert-before',\r\n        'insert-after',\r\n        '|',\r\n        // 'record',\r\n        'table',\r\n        '|',\r\n        'undo',\r\n        'redo',\r\n        '|',\r\n        'edit-mode',\r\n        // 'content-theme',\r\n        // 'code-theme',\r\n        'export',\r\n        // {\r\n        //     name: 'more',\r\n        //     toolbar: [\r\n        //         'fullscreen',\r\n        //         'both',\r\n        //         // 'preview',\r\n        //         // 'info',\r\n        //         // 'help',\r\n        //     ],\r\n        // },\r\n        // {\r\n        //     hotkey: '⇧⌘S',\r\n        //     name: 'sponsor',\r\n        //     tipPosition: 's',\r\n        //     tip: 'toolbar icon tip',\r\n        //     className: 'right',\r\n        //     icon: '<svg></svg>',\r\n        //     click: () => {\r\n        //         console.log('toolbar click')\r\n        //     },\r\n        // },\r\n    ],\r\n    hint: {\r\n        parse: true,\r\n        delay: 0,\r\n        extend: [\r\n            // {\r\n            //     key: 'md',\r\n            //     hint: async (value) => {\r\n            //         console.log('hint.extend hint', value)\r\n            //         let ts = [\r\n            //             {\r\n            //                 html: '<h6>md1</h6>',\r\n            //                 value: '[google](https://www.google.com/)',\r\n            //             },\r\n            //             {\r\n            //                 html: `<div>md2 <span style=\"color:#f26;\">test2</span></div>`,\r\n            //                 value: 'vvv2',\r\n            //             },\r\n            //         ]\r\n            //         return ts\r\n            //     },\r\n            // },\r\n        ],\r\n    },\r\n    // input: (msg) => {\r\n    //     console.log('input', msg)\r\n    // },\r\n    preview: {\r\n        maxWidth: 1e10,\r\n        delay: 0,\r\n        actions: [], //['desktop', 'tablet', 'mobile', 'mp-wechat', 'zhihu'] //移除分享按鈕\r\n        hljs: {\r\n            style: 'monokai',\r\n            lineNumber: true\r\n        },\r\n        // parse: (ele) => { //預覽回調\r\n        //     console.log('preview.parse', ele) //僅分割預覽之預覽區有效\r\n        //     return ele\r\n        // },\r\n        // transform: (h) => { //渲染之前回調\r\n        //     console.log('preview.transform', h) //僅分割預覽之預覽區有效\r\n        //     return h\r\n        // },\r\n    },\r\n}\r\n\r\n\r\n/**\r\n * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入vditor套件的css與js檔案位置字串陣列，預設詳見原始碼處props->pathItems->default\r\n * @vue-prop {String} [value=''] 輸入富文本字串，預設為''\r\n * @vue-prop {Number} [height=250] 輸入高度數字，單位為px，預設為250\r\n * @vue-prop {Object} [settings={}] 輸入vditor設定物件，預設值為{}，內部預設值詳見vditor原始碼\r\n * @vue-prop {String|Array} [keyHint=''] 輸入打字時調用提示區字串或陣列，例如若給予'ht'，則輸入「/ ht」或「@ ht」則可顯示提示區，或給予['ht','kw']陣列，預設為''\r\n * @vue-prop {Number} [hintBorderRadius=4] 輸入提示窗框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [hintBackgroundColor='rgba(60,60,60,0.75)'] 輸入提示窗背景顏色字串，預設'rgba(60,60,60,0.75)'\r\n * @vue-prop {Boolean} [hintShadow=true] 輸入提示窗是否顯示陰影布林值，預設true\r\n * @vue-prop {String} [hintShadowStyle=''] 輸入提示窗陰影顏色字串，預設值詳見props\r\n * @vue-prop {Number} [cmpZIndex=3000] 輸入提示窗使用z-index數字，預設3000\r\n * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true\r\n */\r\nexport default {\r\n    directives: {\r\n        domresize: domResize(),\r\n    },\r\n    components: {\r\n        WIconLoading,\r\n    },\r\n    props: {\r\n        pathItems: {\r\n            type: Array,\r\n            default: () => [\r\n                'https://cdn.jsdelivr.net/npm/vditor@3.10.5/dist/index.css',\r\n                'https://cdn.jsdelivr.net/npm/vditor@3.10.5/dist/index.min.js',\r\n            ],\r\n        },\r\n        value: {\r\n            type: String,\r\n            default: '',\r\n        },\r\n        height: {\r\n            type: Number,\r\n            default: 250,\r\n        },\r\n        settings: {\r\n            type: Object,\r\n            default: () => {},\r\n        },\r\n        keyHint: {\r\n            type: [String, Array],\r\n            default: '',\r\n        },\r\n        hintBorderRadius: {\r\n            type: Number,\r\n            default: 4,\r\n        },\r\n        hintBackgroundColor: {\r\n            type: String,\r\n            default: '#fff',\r\n        },\r\n        hintShadow: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n        hintShadowStyle: {\r\n            type: String,\r\n            default: '0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)',\r\n        },\r\n        cmpZIndex: {\r\n            type: Number,\r\n            default: 3000,\r\n        },\r\n        editable: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n    },\r\n    data: function() {\r\n        return {\r\n\r\n            loading: true,\r\n\r\n            mmkey: genID(), //beforeMount內無法變更data, mounted內會晚於computed, 故優先放於data生成\r\n            // mmkey: (() => {\r\n            //     let id = genID()\r\n            //     console.log('data gen mmkey', id)\r\n            //     return id\r\n            // })(),\r\n\r\n            bp: null,\r\n\r\n            mode: 'popup', //tooltip, popup\r\n            kind: 'click', //hover, click\r\n            isolated: true, //因完全使用事件觸發, 故isolated=true\r\n            transitionTime: 200,\r\n            triggerWidth: null,\r\n            contentStyle: '',\r\n\r\n            contentEditor: null,\r\n\r\n            showPopper: false,\r\n            placement: 'bottom-start', //定位左下\r\n            placementDistX: 0,\r\n            placementDistY: -15,\r\n\r\n            valueTrans: '',\r\n\r\n            useHint: '',\r\n\r\n        }\r\n    },\r\n    mounted: function() {\r\n        //console.log('mounted')\r\n\r\n        let vo = this\r\n\r\n        async function core() {\r\n\r\n            //wait $el\r\n            await waitFun(() => {\r\n                return vo.$el !== undefined\r\n            })\r\n\r\n            //importResources\r\n            await importResources(vo.pathItems)\r\n            // console.log('res', res)\r\n\r\n            //Vditor\r\n            let Vditor = window['Vditor']\r\n            // console.log('Vditor', Vditor)\r\n\r\n            //wait divVditor, 因loading=false之後才能開始顯示divVditor, 故須等待divVditor是否出現\r\n            await waitFun(() => {\r\n                let ele = get(vo, '$refs.divVditor')\r\n                return isEle(ele)\r\n            })\r\n\r\n            //divVditor\r\n            let divVditor = vo.$refs.divVditor\r\n            // console.log('divVditor', divVditor)\r\n\r\n            //contentEditor\r\n            vo.contentEditor = new Vditor(divVditor, vo.useSettings)\r\n            // console.log('contentEditor', vo.contentEditor)\r\n\r\n            //wait contentEditor, 因new Vditor後會需一小段時間初始化, 故須等待vditor來判斷vditor是否初始化完成\r\n            await waitFun(() => {\r\n                // let getCurrentMode = get(vo, 'contentEditor.getCurrentMode') //因contentEditor.getCurrentMode是原型已為function, 故無法用此做判斷\r\n                // return isfun(getCurrentMode)\r\n                let v = get(vo, 'contentEditor.vditor')\r\n                return iseobj(v)\r\n            })\r\n            // console.log(`vo.contentEditor.getCurrentMode()`, vo.contentEditor.getCurrentMode())\r\n\r\n            //loading, 組件不依照loading顯隱, loading為依賴、組件完成載入、組件初始化後才改為false\r\n            vo.loading = false\r\n\r\n            //update valueTrans, 於mounted進行第1次賦值觸發, 故直接更新valueTrans, 避免emit出去再進來更新\r\n            vo.valueTrans = vo.value\r\n\r\n            //setValue, 於mounted進行第1次賦值, 之後給computed偵測修改\r\n            vo.contentEditor.setValue(vo.value)\r\n\r\n            // //emit, 於組件內初始化第一次觸發故不須emit\r\n            // vo.$emit('input', value)\r\n\r\n        }\r\n\r\n        //core\r\n        core()\r\n            .catch((err) => {\r\n                console.log(err)\r\n            })\r\n\r\n        //BuildPopper\r\n        let keyShow = 'showPopper'\r\n        let evNameValue = 'change-show-popper'\r\n        vo.bp = new BuildPopper(vo,\r\n            vo.funGetDivTrigger,\r\n            vo.funGetDivContent,\r\n            keyShow,\r\n            evNameValue,\r\n            {\r\n                addTriggerMode,\r\n                checkTriggerEffMode,\r\n                removeTriggerMode,\r\n            })\r\n\r\n        //監聽evNameValue\r\n        vo.bp.on(evNameValue, (showPopper) => {\r\n            // console.log(vo.mmkey, 'bp.on', evNameValue, showPopper)\r\n            if (!showPopper) { //僅處理隱藏事件\r\n                vo.useHint = '' //隱藏時清空useHint\r\n            }\r\n        })\r\n\r\n        //mounted\r\n        vo.bp.mounted()\r\n\r\n    },\r\n    beforeDestroy: function() {\r\n        //console.log('beforeDestroy')\r\n\r\n        let vo = this\r\n\r\n        //destroy\r\n        if (vo.contentEditor) {\r\n            vo.contentEditor.destroy()\r\n            vo.contentEditor = null\r\n        }\r\n\r\n        //destroy\r\n        if (vo.bp) {\r\n            vo.bp.destroy()\r\n        }\r\n\r\n    },\r\n    computed: {\r\n\r\n        keyHints: function() {\r\n            let vo = this\r\n\r\n            //hts\r\n            let hts = vo.keyHint\r\n            if (isestr(vo.keyHint)) {\r\n                hts = [vo.keyHint]\r\n            }\r\n            // console.log('hts', hts)\r\n\r\n            return hts\r\n        },\r\n\r\n        useSettings: function() {\r\n            //console.log('computed useSettings')\r\n\r\n            let vo = this\r\n\r\n            let st = {\r\n                ...def_settings,\r\n                ...vo.settings,\r\n            }\r\n            // console.log('st', st)\r\n\r\n            //add height\r\n            st.height = vo.height\r\n\r\n            //extend\r\n            let extend = []\r\n            each(vo.keyHints, (v) => {\r\n                if (!isestr(v)) {\r\n                    return true //跳出換下一個\r\n                }\r\n                let ht = {\r\n                    key: v,\r\n                    hint: async (value) => {\r\n                        // console.log('hint.extend hint', value)\r\n                        let ts = [\r\n                            {\r\n                                html: `<div name=\"tar\" tpht=\"${v}\" style=\"display:none;\"></div>`,\r\n                                value: '',\r\n                            },\r\n                        ]\r\n                        return ts\r\n                    },\r\n                }\r\n                extend.push(ht)\r\n            })\r\n            st.hint.extend = extend\r\n            // console.log('st.hint.extend', st.hint.extend)\r\n\r\n            //add input\r\n            st.input = (value) => {\r\n                // console.log(vo.mmkey, 'input', value)\r\n\r\n                //update valueTrans, 由組件內input觸發, 故直接更新valueTrans, 避免emit出去再進來更新\r\n                vo.valueTrans = value\r\n\r\n                //detectAndShowHint\r\n                vo.detectAndShowHint(value)\r\n\r\n                //emit\r\n                vo.$emit('input', value)\r\n\r\n            }\r\n\r\n            // console.log('st', st)\r\n            return st\r\n        },\r\n\r\n        changeValue: function() {\r\n            // console.log('computed changeValue')\r\n\r\n            let vo = this\r\n\r\n            //trigger\r\n            let value = vo.value\r\n\r\n            //relaValue\r\n            vo.relaValue(value)\r\n\r\n            return ''\r\n        },\r\n\r\n        changeEditable: function() {\r\n            //console.log('computed changeEditable')\r\n\r\n            let vo = this\r\n\r\n            //trigger\r\n            let editable = vo.editable\r\n\r\n            //relaEditable\r\n            vo.relaEditable(editable)\r\n\r\n            return ''\r\n        },\r\n\r\n        changeShowPopper: function () {\r\n            //console.log('computed changeShowPopper')\r\n\r\n            let vo = this\r\n\r\n            //trigger\r\n            let showPopper = vo.showPopper\r\n            let isolated = vo.isolated\r\n\r\n            //updateValue\r\n            if (!isolated) {\r\n                vo.updateValue(showPopper, 'changeShowPopper')\r\n            }\r\n\r\n            return ''\r\n        },\r\n\r\n        useHintBorderRadius: function() {\r\n            //console.log('computed useHintBorderRadius')\r\n\r\n            let vo = this\r\n\r\n            if (isNumber(vo.hintBorderRadius)) {\r\n                return `border-radius:${vo.hintBorderRadius}px;`\r\n            }\r\n            return ''\r\n        },\r\n\r\n        useHintBackgroundColor: function() {\r\n            //console.log('computed useHintBackgroundColor')\r\n\r\n            let vo = this\r\n\r\n            return convertColor(vo.hintBackgroundColor)\r\n        },\r\n\r\n        useHintShadow: function() {\r\n            //console.log('computed useHintShadow')\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.hintShadow) {\r\n                return ''\r\n            }\r\n\r\n            //hintShadowStyle\r\n            let s = replace(vo.hintShadowStyle, ';', '')\r\n            if (s !== '') {\r\n                return `box-shadow:${s};`\r\n            }\r\n\r\n            return ''\r\n        },\r\n\r\n    },\r\n    methods: {\r\n\r\n        relaValue: function() {\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            //避免使用waitFun, 因多組件value非同步更新, 會導致打字時或hint時連動觸發更新value問題\r\n            //第1次調用value為空字串, 第2次loading可能為true, 此處統一處理loading=false情形\r\n            if (vo.loading) {\r\n                return\r\n            }\r\n\r\n            //check, 避免多組件時使用hint會反覆觸發\r\n            if (vo.value === vo.valueTrans) {\r\n                return\r\n            }\r\n\r\n            //update valueTrans, 由組件外變更value觸發, 故須再另外儲存至valueTrans\r\n            vo.valueTrans = vo.value\r\n\r\n            //setValue\r\n            vo.contentEditor.setValue(vo.value)\r\n\r\n            // //emit, 由外部變更value觸發故不須emit\r\n            // vo.$emit('input', value)\r\n\r\n        },\r\n\r\n        relaEditable: function() {\r\n\r\n            let vo = this\r\n\r\n            async function core() {\r\n\r\n                //wait\r\n                await waitFun(() => {\r\n                    return !vo.loading\r\n                })\r\n\r\n                //editable\r\n                if (vo.editable) {\r\n                    vo.contentEditor.enable()\r\n                }\r\n                else {\r\n                    vo.contentEditor.disabled()\r\n                }\r\n\r\n            }\r\n\r\n            //core\r\n            core()\r\n                .catch((err) => {\r\n                    console.log(err)\r\n                })\r\n\r\n        },\r\n\r\n        funGetDivTrigger: function() {\r\n            let vo = this\r\n            let divTrigger = null\r\n            try {\r\n                // let eles = vo.$el.querySelectorAll('[class=\"vditor-hint\"]')\r\n                // divTrigger = eles[0]\r\n                divTrigger = vo.$el.querySelector('[class=\"vditor-hint\"]')\r\n            }\r\n            catch (err) {}\r\n            return divTrigger\r\n        },\r\n\r\n        funGetDivContent: function() {\r\n            let vo = this\r\n            let divContent = get(vo, '$refs.divContent', null)\r\n            return divContent\r\n        },\r\n\r\n        findAnchor: function() {\r\n            let vo = this\r\n\r\n            let pm = genPm()\r\n\r\n            let n = 0\r\n            let t = setInterval(() => {\r\n                n++\r\n\r\n                //funGetDivTrigger\r\n                let ele = vo.funGetDivTrigger()\r\n\r\n                //check\r\n                if (isEle(ele)) {\r\n                    clearInterval(t)\r\n                    pm.resolve(ele)\r\n                }\r\n\r\n                //check\r\n                if (n > 100) {\r\n                    clearInterval(t)\r\n                    pm.reject('can not find the ele')\r\n                }\r\n\r\n            }, 50)\r\n\r\n            return pm\r\n        },\r\n\r\n        getUseHint: function(divTrigger) {\r\n            // let vo = this\r\n\r\n            //tpht\r\n            let tpht = ''\r\n            try {\r\n                tpht = divTrigger.querySelector('div[name=\"tar\"]').getAttribute('tpht')\r\n            }\r\n            catch (err) {}\r\n\r\n            return tpht\r\n        },\r\n\r\n        detectAndShowHint: function(v) {\r\n            let vo = this\r\n\r\n            //check\r\n            if (!isearr(vo.keyHints)) {\r\n                return\r\n            }\r\n\r\n            //findAnchor\r\n            vo.findAnchor()\r\n                .then((divTrigger) => {\r\n                    // console.log('divTrigger', divTrigger)\r\n\r\n                    //check\r\n                    if (divTrigger.style.display === 'none') {\r\n                        return\r\n                    }\r\n                    // console.log('divTrigger', divTrigger)\r\n\r\n                    //完全透明\r\n                    // divTrigger.style.opacity = 0 //因顯示之後再偵測隱藏會有顯隱問題, 使用者體驗不佳, 改為使用css強制隱藏\r\n\r\n                    //顯示時取得與儲存useHint\r\n                    vo.useHint = vo.getUseHint(divTrigger)\r\n                    // console.log('divTrigger', divTrigger, 'useHint', vo.useHint)\r\n\r\n                    //evShow\r\n                    vo.evShow('click', 'call')\r\n\r\n                    //blur, 編輯器移除焦點, 避免使用者此時通過鍵盤刪除或再變更\r\n                    vo.contentEditor.blur()\r\n\r\n                })\r\n                .catch((err) => {\r\n                    console.log(err)\r\n                })\r\n\r\n        },\r\n\r\n        evShow: function(kind, from) {\r\n            let vo = this\r\n            let f = get(vo, 'bp.evShow')\r\n            if (isfun(f)) {\r\n                vo.bp.evShow(kind, from)\r\n            }\r\n        },\r\n\r\n        evHide: function(kind, from) {\r\n            let vo = this\r\n            let f = get(vo, 'bp.evHide')\r\n            if (isfun(f)) {\r\n                vo.bp.evHide(kind, from)\r\n            }\r\n        },\r\n\r\n        updatePopper: function(msg, from) {\r\n            let vo = this\r\n            let f = get(vo, 'bp.updatePopper')\r\n            if (isfun(f)) {\r\n                vo.bp.updatePopper(msg, from)\r\n            }\r\n        },\r\n\r\n        updateValue: function(value, from) {\r\n            let vo = this\r\n            let f = get(vo, 'bp.updateValue')\r\n            if (isfun(f)) {\r\n                vo.bp.updateValue(value, from)\r\n            }\r\n        },\r\n\r\n        insertValue: function(v, from) {\r\n            let vo = this\r\n            let f = get(vo, 'contentEditor.insertValue')\r\n            if (isfun(f)) {\r\n\r\n                //insertValue\r\n                vo.contentEditor.insertValue(v)\r\n\r\n                //取得當前value\r\n                let value = vo.contentEditor.getValue()\r\n\r\n                //取代hint符號\r\n                // console.log('value(ori)', value)\r\n                each(vo.keyHints, (keyHint) => {\r\n                    value = value.replaceAll(`/ ${keyHint}`, '')\r\n                })\r\n                // console.log('value(replace)', value)\r\n\r\n                //update valueTrans, 由組件內insertValue觸發, 故直接更新valueTrans, 避免emit出去再進來更新\r\n                vo.valueTrans = vo.value\r\n\r\n                //setValue\r\n                vo.contentEditor.setValue(value)\r\n\r\n                //emit\r\n                vo.$emit('input', value)\r\n\r\n            }\r\n        },\r\n\r\n    },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.WPopperFix[data-popper-reference-hidden] {\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n}\r\n.WVditorFix >>> .vditor-reset {\r\n    font-size: inherit;\r\n}\r\n.WVditorFix >>> div.vditor-hint:has(div[name=\"tar\"]) { /* 使觸發區divTrigger(原本彈窗)完全透明 */\r\n    visibility: hidden;\r\n    pointer-events: none;\r\n    outline: none;\r\n}\r\n</style>\r\n\r\n"]},media:void 0})}),OS,"data-v-1b13d5b5",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{WVditorDyn:{content:"abc中文123\n[google](//www.google.com/)",items1:["foo","bar","fizz","buzz"],items2:["class","attr","prop","type"]},actions:[]}}};var JS=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"default"}}),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"height"}}),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{height:400},model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"fontSize"}}),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px","font-size":"0.85rem"},model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"fullwidth"}}),n._v(" "),t("w-vditor-dyn",{staticStyle:{"font-size":"0.85rem"},model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"slot & keyHint(string)"}}),n._v(" "),t("div",{staticStyle:{color:"#f26","font-size":"0.8rem"}},[n._v("* type [/ ht] to show popup")]),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{keyHint:"ht"},scopedSlots:n._u([{key:"content",fn:function(e){return[t("div",{staticStyle:{padding:"4px 0px"}},n._l(n.WVditorDyn.items1,(function(o,r){return t("div",{key:r,staticClass:"cpitem cpitem-white",on:{click:function(n){e.funInsert(o),e.funHide()}}},[n._v("\n                            Item "+n._s(o)+"\n                        ")])})),0)]}}]),model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"slot & keyHint(string) & hintBorderRadius"}}),n._v(" "),t("div",{staticStyle:{color:"#f26","font-size":"0.8rem"}},[n._v("* type [/ ht] to show popup")]),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{keyHint:"ht",hintBorderRadius:0},scopedSlots:n._u([{key:"content",fn:function(e){return[t("div",{staticStyle:{padding:"4px 0px"}},n._l(n.WVditorDyn.items1,(function(o,r){return t("div",{key:r,staticClass:"cpitem cpitem-white",on:{click:function(n){e.funInsert(o),e.funHide()}}},[n._v("\n                            Item "+n._s(o)+"\n                        ")])})),0)]}}]),model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"slot & keyHint(string) & hintBackgroundColor"}}),n._v(" "),t("div",{staticStyle:{color:"#f26","font-size":"0.8rem"}},[n._v("* type [/ ht] to show popup")]),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{keyHint:"ht",hintBackgroundColor:"#333"},scopedSlots:n._u([{key:"content",fn:function(e){return[t("div",{staticStyle:{padding:"4px 0px"}},n._l(n.WVditorDyn.items1,(function(o,r){return t("div",{key:r,staticClass:"cpitem cpitem-black",staticStyle:{color:"#fff"},on:{click:function(n){e.funInsert(o),e.funHide()}}},[n._v("\n                            Item "+n._s(o)+"\n                        ")])})),0)]}}]),model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"slot & keyHint(array)"}}),n._v(" "),t("div",{staticStyle:{color:"#f26","font-size":"0.8rem"}},[n._v("* type [/ ht] or [/ kw] to show popup")]),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{keyHint:["ht","kw"]},scopedSlots:n._u([{key:"content",fn:function(e){return[t("div",{staticStyle:{padding:"4px 0px"}},["ht"===e.hint?n._l(n.WVditorDyn.items1,(function(o,r){return t("div",{key:r,staticClass:"cpitem cpitem-white",on:{click:function(n){e.funInsert(o),e.funHide()}}},[n._v("\n                                Item "+n._s(o)+"\n                            ")])})):n._e(),n._v(" "),"kw"===e.hint?n._l(n.WVditorDyn.items2,(function(o,r){return t("div",{key:r,staticClass:"cpitem cpitem-white",on:{click:function(n){e.funInsert(o),e.funHide()}}},[n._v("\n                                Item "+n._s(o)+"\n                            ")])})):n._e()],2)]}}]),model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-vditor-dyn",casename:"not editable"}}),n._v(" "),t("w-vditor-dyn",{staticStyle:{width:"620px"},attrs:{editable:!1},model:{value:n.WVditorDyn.content,callback:function(e){n.$set(n.WVditorDyn,"content",e)},expression:"WVditorDyn.content"}})],1)])])};JS._withStripped=!0;const US=wa({render:JS,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-vditor-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//github.com/Vanessa219/vditor",target:"_blank",rel:"noreferrer noopener"}},[n._v("vditor")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//b3log.org/vditor/",target:"_blank",rel:"noreferrer noopener"}},[n._v("vditor examples")])])}]},(function(n){n&&n("data-v-21a0c6d4_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWVditorDyn.vue"},media:void 0})}),YS,"data-v-21a0c6d4",false,undefined,!1,_a,void 0,void 0);const QS={components:{WIconLoading:gc},props:{pathItems:{type:Array,default:()=>["https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.53/dist/w-leaflet-vue.umd.js"]},opt:{type:Object,default:()=>{}}},data:function(){return{cmpName:"WIconLoading"}},mounted:function(){let n=this;cC(n.pathItems).then((e=>{if("loaded"!==e){let n=window["w-leaflet-vue"];n.default&&(n=n.default),dC().component("w-leaflet-vue",n)}n.cmpName="w-leaflet-vue"}))},computed:{},methods:{}};var qS=function(){var n=this,e=n.$createElement;return(n._self._c||e)(n.cmpName,{ref:"$self",tag:"component",attrs:{opt:n.opt}})};qS._withStripped=!0;var nw={components:{demolink:iu,WLeafletVueDyn:wa({render:qS,staticRenderFns:[]},(function(n){n&&n("data-v-6c57281f_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WLeafletVueDyn.vue"},media:void 0})}),QS,"data-v-6c57281f",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){let n=window.dataRain,e=[];for(let t=0;t<n.length;t++){let o=n[t];e.push([o.latLng[0],o.latLng[1],o.rain])}return{WLeafletVueDyn:{pointSets:{pointSets:[{title:"pointSet A",msg:"msg from pointSet A",points:[{title:"point A-1",msg:"msg from data A-1",latLng:[24.2,121.27]},{title:"point A-2",msg:"msg from data A-2",latLng:[23.9,120.97]}],visible:!0},{title:"pointSet B",msg:"msg from pointSet B",points:[{title:"point B-1",msg:"msg from data B-1",latLng:[23.3,120.57]},{title:"point B-2",msg:"msg from data B-2",latLng:[23,120.87]}],visible:!1}]},polygonSets:{center:[25,121.58],zoom:10,polygonSets:[{title:"polygonSet A",msg:"msg from polygonSet A",latLngs:[[[24.96,121.41],[25.11,121.47],[25.06,121.69],[24.99,121.61],[24.95,121.53]],[[24.98,121.45],[25.07,121.49],[25.06,121.54],[25,121.5]],[[25.017,121.48],[25.032,121.49],[25.036,121.5],[25.02,121.502]],[[24.99,121.54],[25.056,121.56],[25.05,121.61],[25,121.59]],[[24.92,121.6],[25.045,121.75],[24.99,121.79],[24.93,121.74]],[[24.961,121.523],[24.979,121.551],[24.95,121.674],[24.887,121.606]]],visible:!0},{title:"polygonSet B",msg:"msg from polygonSet B",latLngs:[[[24.971,121.372],[24.976,121.434],[24.937,121.473],[24.918,121.418]],[[24.9,121.14],[24.97,121.09],[25.05,121.177],[24.95,121.32]]],visible:!1}]},contourSets:{center:[24.084,121.068],zoom:8,contourSets:[{title:"contourSet A",msg:"msg from contourSet A",points:[[24.325,120.786,0],[23.944,120.968,10],[24.884,121.234,20],[24.579,121.345,80],[24.664,121.761,40],[23.803,121.397,30],[23.727,120.772,0],[23.539,120.975,0],[23.612,121.434,0],[23.193,120.355,22],[23.456,120.89,42],[23.28,120.551,25],[23.162,121.247,5]],visible:!0},{title:"contourSet B",msg:"msg from contourSet B",points:[[22.607,120.416,0],[22.967,120.663,15],[22.592,120.922,20],[22.717,120.644,45]],visible:!1}]},largeSet:{center:[24.084,121.068],zoom:8,contourSets:[{title:"Rain contour",msg:"data from CWB",points:e,polygonClipOuter:window.dataRainClip,gradient:{0:"rgba(255, 255, 255, 0)",.2:"rgb(254, 178, 76)",.4:"rgb(252, 78, 42)",.6:"rgb(220, 58, 38)",.8:"rgb(200, 40, 23)",1:"rgb(180, 30, 60)"},visible:!0,order:0}],pointSets:[{title:"Rain point",msg:"data from CWB",points:n,visible:!1,order:1,tooltip:function(n){console.log("tooltip v",n);let e="";return e+='<div style="padding:5px 10px;">',e+='<div style="width:150px; color:#222; margin-bottom:5px; white-space:nowrap;"><span style="font-size:0.9rem; color:#f26;">['+n.point.title+']</span> <span style="font-size:0.8rem; ">'+n.point.msg+"</span></div>",e+='<div style="font-size:0.7rem; color:#666; white-space:normal;">降雨量 '+n.point.rain+" cm</div>",e+="</div>",e}}]}},actions:[]}}};const ew=nw;var tw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),n._m(1),n._v(" "),t("div",[t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-leaflet-vue-dyn",casename:"pointSets"}}),n._v(" "),t("w-leaflet-vue-dyn",{staticStyle:{width:"100%",height:"600px"},attrs:{opt:n.WLeafletVueDyn.pointSets}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-leaflet-vue-dyn",casename:"polygonSets"}}),n._v(" "),t("w-leaflet-vue-dyn",{staticStyle:{width:"100%",height:"600px"},attrs:{opt:n.WLeafletVueDyn.polygonSets}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-leaflet-vue-dyn",casename:"contourSets"}}),n._v(" "),t("w-leaflet-vue-dyn",{staticStyle:{width:"100%",height:"600px"},attrs:{opt:n.WLeafletVueDyn.contourSets}})],1),n._v(" "),t("div",{staticClass:"bk",staticStyle:{display:"block"}},[t("demolink",{attrs:{kbname:"w-leaflet-vue-dyn",casename:"contourSet for rain data"}}),n._v(" "),t("w-leaflet-vue-dyn",{staticStyle:{width:"100%",height:"600px"},attrs:{opt:n.WLeafletVueDyn.largeSet}})],1)])])};tw._withStripped=!0;const ow=wa({render:tw,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-leaflet-vue-dyn")])])},function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticStyle:{"font-size":"0.9rem","margin-bottom":"10px"}},[t("span",{staticStyle:{"margin-right":"10px"}},[n._v("Links:")]),n._v(" "),t("a",{attrs:{href:"//leafletjs.com/",target:"_blank",rel:"noreferrer noopener"}},[n._v("leaflet")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//leafletjs.com/examples.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("leaflet examples")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//vue2-leaflet.netlify.app/",target:"_blank",rel:"noreferrer noopener"}},[n._v("Vue2Leaflet")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//github.com/yuda-lyu/w-leaflet-vue",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-leaflet-vue")]),n._v(" "),t("span",{staticStyle:{margin:"0px 10px"}},[n._v("|")]),n._v(" "),t("a",{attrs:{href:"//yuda-lyu.github.io/w-leaflet-vue/examples/app.html",target:"_blank",rel:"noreferrer noopener"}},[n._v("w-leaflet-vue examples")])])}]},(function(n){n&&n("data-v-ebd00252_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWLeafletVueDyn.vue"},media:void 0})}),ew,"data-v-ebd00252",false,undefined,!1,_a,void 0,void 0);function rw(n,e){return Ao(n)&&os(e)?0===(e=ji(e))?n:rs(n,n.length-e):""}function iw(n){let e=0,t=0,o=0,r=Oo(n);Ve(n,(n=>{Ti(n)?e+=1:To(n)?t+=1:Qo(n)&&(o+=1)}));let i="";return e===r?i="num":t===r?i="str":o===r?i="obj":e+t===r?i="str":console.log("eles in array are non-homogeneous",n),i}function aw(n,e){let t=[];if("num"!==e&&"str"!==e&&"files"!==e)throw new Error(`invalid type[${e}]`);if("num"===e)t=Io(n,((n,e)=>({key:e,payload:n,value:Ai(n)})));else if("files"===e)t=Io(n,((n,e)=>({key:e,payload:n,value:ls(n)})));else if("str"===e){let e=Io(n,(n=>function(n){let e=fn(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},"excludeString");if(va(e)||(e=!1),!Ao(n))return"";let t=n=>n>="0"&&n<="9"||"."===n||"-"===n||"+"===n,o=Fl(n);if(e){let n=o.split("");for(let e=0;e<n.length;e++)if(t(n[e])){o=as(o,e),n=dv(n,e);break}n=gx(n);for(let e=0;e<n.length;e++)if(t(n[e])){o=rw(o,e);break}}return o}(n,{excludeString:!0}))),o=0;Ve(e,(n=>{Ti(n)&&o++}));let r=o===Oo(e);t=Io(n,((n,t)=>{let o=n;return r?(o=e[t],o=Ai(o)):o=ls(o),{key:t,payload:n,value:o}}))}return t}function lw(n,e){let t=es(n,"value");return Io(t,e?"key":"payload")}function sw(n,e){let t=function(n,e){let t=pi(n);return t.sort(((n,t)=>n[e].localeCompare(t[e],"standard",{numeric:!0}))),t}(n,"value");return Io(t,e?"key":"payload")}function cw(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,o)}return t}function dw(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?cw(Object(t),!0).forEach((function(e){er(n,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):cw(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function uw(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!Ca(n))return{};let t=fn(e,"delimiter");Ao(t)||(t="❯");let o=fn(e,"bindRoot");Ao(o)||(o="root");let r=fn(e,"soryItems"),i=Io(n,((n,e)=>{"folder"!==n.type&&"file"!==n.type&&(n.type="file");let o=(n=>{let e=Zl(n=(n=n.replace(/\\\\/g,"\\")).replace(/\\/g,"/"),"/");return{ss:e,cfp:zl(e,t)}})(n.path);return{ind:e,type:n.type,ss:o.ss,data:pi(n)}})),a=n=>{let e=Oo(n),o=[];for(let r=0;r<e;r++){let e=[];for(let t=0;t<=r;t++)e.push(n[t]);let i=zl(e,t);o.push({id:i,name:n[r]})}return o},l=-1,s=[],c={};Ve(i,(n=>{let e=[o],r=o,i=Oo(n.ss)-1;Ve(n.ss,((o,d)=>{let u=d<i||"folder"===n.type;e.push(o);let p=null,m=null;d===i&&(p=n.ind,m=n.data);let v=zl(e,t),g=a(e);if(ss(c,v)){let e=c[v],t="folder"===fn(e,"_type","");if(!t&&u)throw console.log("kpLv[id]",e),console.log("v",n),new Error(`id[${v}] is unrecognized from a file to folder`);if(!t&&!u)throw console.log("kpLv[id]",e),console.log("v",n),new Error(`id[${v}] get repeat data from two files`);if(t&&!u)throw console.log("kpLv[id]",e),console.log("v",n),new Error(`id[${v}] is unrecognized from a folder to file`);if(na(c[v].data)&&na(m))throw console.log("kpLv[id]",e),console.log("v",n),new Error(`id[${v}] get repeat data from two folders`);if(null===c[v].data&&na(m)){c[v]._indOri=p,c[v].data=m;let n=c[v]._indNormalize,e=s[n];s[n]=dw(dw({},m),{},{type:e.type,path:e.path})}}else{l++;let n=l,t=null;t=u?{_indOri:p,_indNormalize:n,ns:Oo(e),ts:pi(e),pathInfors:g,_type:"folder",type:"array",numOfChilren:-1,id:v,parentId:r,text:o,children:[],data:m}:{_indOri:p,_indNormalize:n,ns:Oo(e),ts:pi(e),pathInfors:g,_type:"file",type:"node",numOfChilren:-1,id:v,parentId:r,text:o,data:m},c[v]=t,s.push(dw(dw({},fn(c[v],"data",{})),{},{type:c[v]._type,path:"/"+zl(e,"/")}))}r=v}))}));let d=Hp(c);if(d=es(d,"id"),d=es(d,"ns"),Zi(r)){let n=[];Ve(Dk(d,"ns"),((e,t)=>{Ve(Dk(e,"parentId"),((e,o)=>{let i=r(e,o,t);n=[...n,...i]}))})),d=n}let u=[],p=[];Ve(d,(n=>{"folder"===n._type?u.push(n):p.push(n)}));let m=Dk(u,"ns"),v=Dk(p,"ns"),g=kv(Io(u,"ns")),h=kv(Io(p,"ns")),f=null;{let n=[o];f=[{_indOri:null,_indNormalize:null,ns:Oo(n),ts:pi(n),pathInfors:a(n),_type:"folder",type:"array",numOfChilren:-1,id:o,parentId:"",text:o,children:[],data:null}]}let b={};b[o]="0.children";let y={};y[o]="0";for(let n=2;n<=g;n++){Ve(m[n],(n=>{let e=fn(b,n.parentId,"");if(!Ao(e))throw console.log("kpPathFd",b),console.log("v",n,n.parentId),new Error(`invalid parentId[${n.parentId}] in folder`);let t=fn(f,e);if(ya(t)||sx(f,e,[]),t=fn(f,e),!na(mx(t,{id:n.id}))){t.push(dw(dw({},n),{},{children:[]}));let o=`${e}.${Oo(t)-1}`;b[n.id]=`${o}.children`,y[n.id]=o}}))}let k=pi(f),x={};for(let n=2;n<=h;n++){Ve(v[n],(n=>{let e=fn(b,n.parentId,"");if(!Ao(e))throw console.log("kpPathFd",b),console.log("v",n,n.parentId),new Error(`invalid parentId[${n.parentId}] in file`);let t=fn(f,e);if(!ya(t))throw console.log("treeItems",f),console.log("k",e),console.log("v",n),new Error("無預先建置資料夾");if(!na(mx(t,{id:n.id}))){t.push(n);let o=`${e}.${Oo(t)-1}`;x[n.id]=o,y[n.id]=o}}))}return{treeItems:f,treeItemsFolder:k,kpPath:y,fpsNormalize:s}}var pw={directives:{domresize:Mi()},components:{WIcon:Ha,WTree:Kx,WListVertical:Qv,WDrawer:ag,WButtonChip:Iu,WButtonCircle:tu},props:{items:{type:Array,default:()=>[]},bindRoot:{type:String,default:"root"},funSortTree:{type:Function,default:null},showTree:{type:Boolean,default:!0},defaultShowTreeFirst:{type:Boolean,default:!0},treeWidth:{type:Number,default:250},treeWidthMin:{type:Number,default:null},treeWidthMax:{type:Number,default:null},treeAfloat:{type:Boolean,default:!1},treeDefItemHeight:{type:Number,default:30},treeDefaultDisplayLevel:{type:Number,default:null},treePaddingStyle:{type:Object,default:()=>({v:0,h:0})},treeIndent:{type:Number,default:.7},treeItemTextFontSize:{type:String,default:"0.85rem"},treeItemTextColor:{type:String,default:"#444"},treeItemTextColorHover:{type:String,default:"#222"},treeItemTextColorActive:{type:String,default:"#000"},treeFolderIcon:{type:String,default:vl},treeFolderIconSize:{type:Number,default:20},treeFolderIconColor:{type:String,default:"#888"},treeFolderIconColorHover:{type:String,default:"#777"},treeFolderIconColorActive:{type:String,default:"#666"},treeItemBackgroundColor:{type:String,default:"transparent"},treeItemBackgroundColorHover:{type:String,default:"rgba(200,200,200,0.2)"},treeItemBackgroundColorActive:{type:String,default:"rgba(100,100,100,0.2)"},treeItemRippleColor:{type:String,default:"rgba(200,200,200,0.4)"},treeBackgroundColor:{type:String,default:"#fff"},treeDrawerBarSize:{type:Number,default:2},treeDrawerBarColor:{type:String,default:"#ddd"},treeToggleIconSize:{type:Number,default:24},treeToggleIconColor:{type:String,default:"grey"},treeToggleIconDisabledColor:{type:String,default:"grey lighten-1"},treeToggleIconBackgroundColor:{type:String,default:"transparent"},treeToggleIconBackgroundColorHover:{type:String,default:"rgba(128,128,128,0.15)"},lineBetweenPathAndListWidth:{type:Number,default:1},lineBetweenPathAndListColor:{type:String,default:"#ddd"},listDefItemHeight:{type:Number,default:30},listPaddingStyle:{type:Object,default:()=>({v:0,h:6})},listItemTextFontSize:{type:String,default:"0.85rem"},listItemTextColor:{type:String,default:"#444"},listItemTextColorHover:{type:String,default:"#222"},listItemTextColorActive:{type:String,default:"#000"},listFolderIcon:{type:String,default:vl},listFileIcon:{type:String,default:"M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"},listItemIconSize:{type:Number,default:22},listItemIconColor:{type:String,default:"#888"},listItemIconColorHover:{type:String,default:"#777"},listItemIconColorActive:{type:String,default:"#666"},listItemBackgroundColor:{type:String,default:"transparent"},listItemBackgroundColorHover:{type:String,default:"rgba(200,200,200,0.2)"},listItemBackgroundColorActive:{type:String,default:"rgba(100,100,100,0.2)"},listItemRippleColor:{type:String,default:"rgba(255,255,255,0.4)"},listBackgroundColor:{type:String,default:"#fff"},btnDisplayTreeIconShow:{type:String,default:"M17,12L12,17V14H8V10H12V7L17,12M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z"},btnDisplayTreeIconHide:{type:String,default:"M7,12L12,7V10H16V14H12V17L7,12M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z"},btnDisplayTreeIconSize:{type:Number,default:20},btnDisplayTreeIconColor:{type:String,default:"grey darken-1"},btnDisplayTreeIconColorHover:{type:String,default:"grey darken-2"},btnDisplayTreeIconColorFocus:{type:String,default:"grey darken-3"},btnDisplayTreeBackgroundColor:{type:String,default:"transparent"},btnDisplayTreeBackgroundColorHover:{type:String,default:"rgba(200,200,200,0.3)"},btnDisplayTreeBackgroundColorFocus:{type:String,default:"rgba(180,180,180,0.3)"},pathBtnTextColor:{type:String,default:"#444"},pathBtnTextColorHover:{type:String,default:"#222"},pathBtnTextFontSize:{type:String,default:"0.85rem"},pathBtnBackgroundColor:{type:String,default:"transparent"},pathBtnBackgroundColorHover:{type:String,default:"rgb(236,236,236)"},pathSepIcon:{type:String,default:tl},pathSepIconColor:{type:String,default:"#888"},pathSepIconSize:{type:Number,default:18},pathBackgroundColor:{type:String,default:"#fff"},noSelectedText:{type:String,default:"No selected folder"},draggable:{type:Boolean,default:!1},dgTextDisabled:{type:String,default:"Can not drop here"},dgTextDisabledColor:{type:String,default:"#812"},dgTextDisabledPaddingLeft:{type:Number,default:15},dgTextDisabledFontSize:{type:String,default:"0.9rem"},dgTextDisabledBackgroundColor:{type:String,default:"rgba(255,220,240,0.6)"},dgInsertLineColor:{type:String,default:"#29f"},dgInsertBackgroundColor:{type:String,default:"rgba(80,150,255,0.15)"},dgBelongBackgroundColor:{type:String,default:"rgba(80,150,255,0.3)"},dgPreviewOpacity:{type:Number,default:1},dgPreviewDisabledOpacity:{type:Number,default:1},dgPreviewBorderWidth:{type:Number,default:0},dgPreviewBorderColor:{type:String,default:"#f26"},dgPreviewBackground:{type:String,default:"transparent"},operatable:{type:Boolean,default:!1},operateItemTextForRename:{type:String,default:"Rename"},operateItemTextForInsertChild:{type:String,default:"Create sub folder"},operateItemTextForDelete:{type:String,default:"Delete folder"},operateItemIconForRename:{type:String,default:wl},operateItemIconForInsertChild:{type:String,default:"M13 19C13 19.34 13.04 19.67 13.09 20H4C2.9 20 2 19.11 2 18V6C2 4.89 2.89 4 4 4H10L12 6H20C21.1 6 22 6.89 22 8V13.81C21.39 13.46 20.72 13.22 20 13.09V8H4V18H13.09C13.04 18.33 13 18.66 13 19M20 18V15H18V18H15V20H18V23H20V20H23V18H20Z"},operateItemIconForDelete:{type:String,default:"M13 19C13 19.34 13.04 19.67 13.09 20H4C2.9 20 2 19.11 2 18V6C2 4.89 2.89 4 4 4H10L12 6H20C21.1 6 22 6.89 22 8V13.81C21.39 13.46 20.72 13.22 20 13.09V8H4V18H13.09C13.04 18.33 13 18.66 13 19M22.54 16.88L21.12 15.47L19 17.59L16.88 15.47L15.47 16.88L17.59 19L15.47 21.12L16.88 22.54L19 20.41L21.12 22.54L22.54 21.12L20.41 19L22.54 16.88Z"},operateItemPaddingStyle:{type:Object,default:()=>({v:10,h:12})},operatePanelWidth:{type:Number,default:170},operatePanelHeight:{type:Number,default:null},operateBtnTooltip:{type:String,default:"Operations"},operateBtnBackgroundColor:{type:String,default:"transparent"},operateBtnBackgroundColorHover:{type:String,default:"rgba(230,230,230,0.7)"},operateBtnBackgroundColorFocus:{type:String,default:"rgba(230,230,230,0.9)"},operateItemBackgroundColor:{type:String,default:"transparent"},operateItemBackgroundColorHover:{type:String,default:"rgba(200,200,200,0.2)"},operateItemHeight:{type:Number,default:42},operateItemTextColor:{type:String,default:"#444"},operateItemTextColorHover:{type:String,default:"#222"},operateItemIconSize:{type:Number,default:22},operateItemIconColor:{type:String,default:"#444"},operateItemIconColorHover:{type:String,default:"#222"},editorRenameContentBackgroundColor:{type:String,default:"white"},editorRenameFooterBackgroundColor:{type:String,default:"grey lighten-5"},editorRenameInputTextColor:{type:String,default:"grey darken-3"},editorRenameInputTextBottomLineBorderColor:{type:String,default:"grey lighten-1"},editorRenameInputTextBottomLineBorderColorHover:{type:String,default:"grey"},editorRenameInputTextBottomLineBorderColorFocus:{type:String,default:"blue darken-1"},editorRenameCancelBtnText:{type:String,default:"Cancel"},editorRenameCancelBtnTextColor:{type:String,default:"grey darken-3"},editorRenameCancelBtnTextColorHover:{type:String,default:"grey darken-2"},editorRenameCancelBtnIcon:{type:String,default:ll},editorRenameCancelBtnIconSize:{type:Number,default:22},editorRenameCancelBtnIconColor:{type:String,default:"grey darken-1"},editorRenameCancelBtnIconColorHover:{type:String,default:"grey darken-2"},editorRenameCancelBtnIconRippleColor:{type:String,default:"rgba(200,200,200,0.4)"},editorRenameCancelBtnBackgroundColor:{type:String,default:"white"},editorRenameCancelBtnBackgroundColorHover:{type:String,default:"grey lighten-3"},editorRenameSaveBtnText:{type:String,default:"Save"},editorRenameSaveBtnTextColor:{type:String,default:"grey darken-3"},editorRenameSaveBtnTextColorHover:{type:String,default:"grey darken-2"},editorRenameSaveBtnIcon:{type:String,default:sl},editorRenameSaveBtnIconSize:{type:Number,default:22},editorRenameSaveBtnIconColor:{type:String,default:"grey darken-1"},editorRenameSaveBtnIconColorHover:{type:String,default:"grey darken-2"},editorRenameSaveBtnIconRippleColor:{type:String,default:"rgba(200,200,200,0.4)"},editorRenameSaveBtnBackgroundColor:{type:String,default:"white"},editorRenameSaveBtnBackgroundColorHover:{type:String,default:"grey lighten-3"}},data:function(){return{panelWidth:0,panelHeight:0,pathHeight:0,showTreeTrans:!0,treeWidthTrans:200,itemsTrans:[],kpPath:null,treeItemsFolder:null,treeItems:null,treeItemActive:null,pathInfors:[],listItems:[],listItemActive:null}},computed:{changeShowTree:function(){return this.showTreeTrans=this.showTree,""},changeTreeWidth:function(){return this.treeWidthTrans=this.treeWidth,""},changeItems:function(){return this.convertItems(this.items),""},useTreeItemHeightMin:function(){return Math.max(this.treeToggleIconSize,this.treeDefItemHeight)},effTreeBackgroundColor:function(){return Qi(this.treeBackgroundColor)},effListBackgroundColor:function(){return Qi(this.listBackgroundColor)},effPathBackgroundColor:function(){return Qi(this.pathBackgroundColor)},effLineBetweenPathAndListColor:function(){return Qi(this.lineBetweenPathAndListColor)},effTreeFolderIconColor:function(){return Qi(this.treeFolderIconColor)},effTreeFolderIconColorHover:function(){return Qi(this.treeFolderIconColorHover)},effTreeFolderIconColorActive:function(){return Qi(this.treeFolderIconColorActive)},useTreeItemTextFontSize:function(){let n=this.treeItemTextFontSize;return n=qi(n,";",""),`font-size:${n};`},useListItemTextFontSize:function(){let n=this.listItemTextFontSize;return n=qi(n,";",""),`font-size:${n};`},effListItemIconColor:function(){return Qi(this.listItemIconColor)},effListItemIconColorHover:function(){return Qi(this.listItemIconColorHover)},effListItemIconColorActive:function(){return Qi(this.listItemIconColorActive)},usePathBtnTextFontSize:function(){let n=this.pathBtnTextFontSize;return n=qi(n,";",""),`font-size:${n};`},effPathBtnTextColor:function(){return Qi(this.pathBtnTextColor)},listHeight:function(){return this.panelHeight-this.pathHeight},btnDisplayTreeInDrawerHeightMin:function(){let n=ba(this.treePaddingStyle,{returnObj:!0}),e=n.top,t=n.bottom;return this.treeDefItemHeight+e+t}},methods:{resizePanel:function(n){this.panelWidth=n.snew.offsetWidth,this.panelHeight=n.snew.offsetHeight},resizePath:function(n){this.pathHeight=n.snew.offsetHeight},soryItems:function(n,e,t){let o=this;return n=function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!Ca(n))return[];if(1===Oo(n))return n;let t=fn(e,"localeCompare");va(t)||(t=!1);let o=fn(e,"returnIndex");va(o)||(o=!1);let r=fn(e,"compareKey",null),i=null;i=t?sw:lw;let a,l=iw(n);if(""===l)return[];if("obj"===l){if(!Ao(r))return[];let e=Io(n,((n,e)=>fn(n,r,""))),l=iw(e);if("num"!==l&&"str"!==l)return[];{t&&(l="files");let r=i(aw(e,l),!0);a=o?r:Io(r,(e=>n[e]))}}else"num"!==l&&"str"!==l||(t&&(l="files"),a=i(aw(n,l),o));return a}(n,{compareKey:"text",localeCompare:!0}),Zi(o.funSortTree)&&(n=o.funSortTree(n)),n},showTreeFirstFolder:function(){let n=this.bindRoot;this.triggerClickTreeFolderById(n)},convertItems:function(){let n=this;(async function(){let e=uw(n.items,{bindRoot:n.bindRoot,soryItems:n.soryItems});n.itemsTrans=e.fpsNormalize,n.treeItemsFolder=e.treeItemsFolder,n.treeItems=e.treeItems,n.kpPath=e.kpPath,n.defaultShowTreeFirst&&n.showTreeFirstFolder()})().catch((n=>{console.log(n)}))},emitShowTreeDelay:function(n){let e=this;setTimeout((()=>{e.emitShowTree(n)}),1)},emitShowTree:function(n){this.showTreeTrans=n,this.$emit("update:showTree",n)},emitDrawerWidth:function(n){this.treeWidthTrans=n,this.$emit("update:treeWidth",n)},getTreeFolderIconColor:function(n){let e=this,t=fn(n,"isHover");va(t)||(t=!1);let o=fn(n,"isActive");return va(o)||(o=!1),o?e.effTreeFolderIconColorActive:t?e.effTreeFolderIconColorHover:e.effTreeFolderIconColor},getListItemIconColor:function(n){let e=this,t=fn(n,"isHover");va(t)||(t=!1);let o=fn(n,"isActive");return va(o)||(o=!1),o?e.effListItemIconColorActive:t?e.effListItemIconColorHover:e.effListItemIconColor},listFolder:function(n){let e=this,t=Io(n,(n=>{let t="",o="";return"folder"===n._type?(t=n.text,o=e.listFolderIcon):(t=n.text,o=e.listFileIcon),{text:t,icon:o,data:n}}));e.listItems=t},displayFolderById:function(n,e){let t=this,o=t.kpPath[n],r=fn(t.treeItems,o),i=`${o}.children`,a=fn(t.treeItems,i);t.listFolder(a);let l=fn(r,"pathInfors",[]);t.pathInfors=l},ckTreeFolder:function(n){let e=this,t=fn(n,"data",null),o=fn(n,"data.id","");e.displayFolderById(o,"ckTreeFolder"),e.$emit("click-folder",{from:"tree",item:t}),e.$emit("click",{type:"folder",from:"tree",item:t}),e.$nextTick((()=>{e.listItemActive=null}))},ckListItem:function(n){let e=this,t=fn(n,"item.data",null),o=fn(n,"item.data.id","");"folder"===fn(n,"item.data._type","")?(e.displayFolderById(o,"ckListItem"),e.$emit("click-folder",{from:"list",item:t}),e.$emit("click",{type:"folder",from:"list",item:t}),setTimeout((()=>{e.treeItemActive=null,e.listItemActive=null}),300)):(e.$emit("click-file",{from:"list",item:t}),e.$emit("click",{type:"file",from:"list",item:t}))},ckPathFolder:function(n){let e=this,t=fn(n,"id","");e.displayFolderById(t,"ckPathFolder"),e.$emit("click-folder",{from:"path",item:n}),e.$emit("click",{type:"folder",from:"path",item:n}),e.$nextTick((()=>{e.treeItemActive=null,e.listItemActive=null}))},toggleTreeFoldersByFun:function(n){return this.$refs.wt.toggleItemsByFun(n)},toggleTreeFoldersAll:function(n,e){return this.$refs.wt.toggleItemsAll(n,e)},triggerClickTreeFolderById:function(n){let e={data:{id:n}};this.ckTreeFolder(e),this.treeItemActive={id:n}},triggerClickTreeFolderByFun:async function(n){let e=this;if(!Zi(n))return;let t=[];Ve(e.kpPath,(n=>{let o=fn(e.treeItems,n,"");t.push(o)}));let o=n({treeItemsFolder:e.treeItemsFolder,treeItems:e.treeItems,kpPath:e.kpPath,treeItemsSpread:t});Xu(o)&&(o=await o);let r=fn(o,"id");Ao(r)?e.triggerClickTreeFolderById(r):console.log("invalid id",r)},useFunOperateItem:function(n){let e=["Rename","InsertChild","Delete"];return fn(n,"item.id","")===this.bindRoot&&(e=["InsertChild"]),e},changeData:function(n){},changeItem:function(n){let e=this,t=n=>{let e=Oo(n)-1;if(e<1)throw new Error(`n1${e} < 1`);let t=e-1;if(t<0)throw new Error(`n2${t} < 0`);let o=fn(n,e,{}),r=fn(o,"text","");if(!Ao(r))throw new Error("node.text is not a string");let i=fn(n,t,{}),a="/"+zl([...fn(i,"ts",[]),r],"/");return{...o,type:"folder",path:a}},o=[];if("add"===n.mode){if("belongto"!==n.kind)throw console.log(n),new Error(`kind[${n.kind}] is not supported`);let r=t(n.pathInforsNew);o=pi(e.itemsTrans),o.push(r)}else if("delete"===n.mode){let r=t(n.pathInforsOri),i=Oo(r.path),a=pi(e.itemsTrans);o=[],Ve(a,(n=>{rs(n.path,i)!==r.path&&o.push(n)}))}else if("move"===n.mode||"rename"===n.mode){let t=n.pathInforsOri,r=n.pathInforsNew,i="/"+zl(Io(t,"text"),"/"),a=Oo(i),l="/"+zl(Io(r,"text"),"/");o=pi(e.itemsTrans),o=Io(o,(n=>{if(rs(n.path,a)===i){let e=as(n.path,a);n.path=l+e}return n}))}o=(n=>{let t=Oo(e.bindRoot)+1;return n=Io(n,(n=>(n.path=as(n.path,t),n)))})(o),e.$emit("update:items",o),e.$emit("change-item",n)},clickOperateItem:function(n){this.$emit("click-operate-item",n)}}};const mw=pw;var vw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],attrs:{changeShowTree:n.changeShowTree,changeTreeWidth:n.changeTreeWidth,changeItems:n.changeItems},on:{domresize:n.resizePanel}},[t("WDrawer",{style:"width:"+n.panelWidth+"px; height:"+n.panelHeight+"px;",attrs:{afloat:n.treeAfloat,drawerWidth:n.treeWidthTrans,drawerWidthMin:n.treeWidthMin,drawerWidthMax:n.treeWidthMax,dragDrawerWidth:!0,drawerBarColor:n.treeDrawerBarColor,drawerBarSize:n.treeDrawerBarSize,value:n.showTreeTrans},on:{input:n.emitShowTree,"update:drawerWidth":n.emitDrawerWidth},scopedSlots:n._u([{key:"drawer",fn:function(e){return[t("div",{style:"position:relative; height:100%; background:"+n.effTreeBackgroundColor+";"},[t("WTree",{ref:"wt",style:"width:"+e.width+"px; min-width:"+e.width+"px;",attrs:{viewHeightMax:n.panelHeight,defItemHeight:n.treeDefItemHeight,defaultDisplayLevel:n.treeDefaultDisplayLevel,data:n.treeItemsFolder,activable:!0,itemActive:n.treeItemActive,paddingStyle:n.treePaddingStyle,indent:n.treeIndent,iconSize:n.treeToggleIconSize,iconToggleColor:n.treeToggleIconColor,iconToggleDisabledColor:n.treeToggleIconDisabledColor,iconToggleBackgroundColor:n.treeToggleIconBackgroundColor,iconToggleBackgroundColorHover:n.treeToggleIconBackgroundColorHover,itemTextColor:n.treeItemTextColor,itemTextColorHover:n.treeItemTextColorHover,itemTextColorActive:n.treeItemTextColorActive,itemBackgroundColor:n.treeItemBackgroundColor,itemBackgroundColorHover:n.treeItemBackgroundColorHover,itemBackgroundColorActive:n.treeItemBackgroundColorActive,itemRippleColor:n.treeItemRippleColor,draggable:n.draggable,dgTextDisabled:n.dgTextDisabled,dgTextDisabledColor:n.dgTextDisabledColor,dgTextDisabledPaddingLeft:n.dgTextDisabledPaddingLeft,dgTextDisabledFontSize:n.dgTextDisabledFontSize,dgTextDisabledBackgroundColor:n.dgTextDisabledBackgroundColor,dgInsertLineColor:n.dgInsertLineColor,dgInsertBackgroundColor:n.dgInsertBackgroundColor,dgBelongBackgroundColor:n.dgBelongBackgroundColor,dgPreviewOpacity:n.dgPreviewOpacity,dgPreviewDisabledOpacity:n.dgPreviewDisabledOpacity,dgPreviewBorderWidth:n.dgPreviewBorderWidth,dgPreviewBorderColor:n.dgPreviewBorderColor,dgPreviewBackground:n.dgPreviewBackground,operatable:n.operatable,operateItemTextForRename:n.operateItemTextForRename,_operateItemTextForInsertBefore:"operateItemTextForInsertBefore",operateItemTextForInsertChild:n.operateItemTextForInsertChild,_operateItemTextForInsertAfter:"operateItemTextForInsertAfter",operateItemTextForDelete:n.operateItemTextForDelete,operateItemIconForRename:n.operateItemIconForRename,_operateItemIconForInsertBefore:"operateItemIconForInsertBefore",operateItemIconForInsertChild:n.operateItemIconForInsertChild,_operateItemIconForInsertAfter:"operateItemIconForInsertAfter",operateItemIconForDelete:n.operateItemIconForDelete,operateItemPaddingStyle:n.operateItemPaddingStyle,operatePanelWidth:n.operatePanelWidth,operatePanelHeight:n.operatePanelHeight,operateBtnTooltip:n.operateBtnTooltip,operateBtnBackgroundColor:n.operateBtnBackgroundColor,operateBtnBackgroundColorHover:n.operateBtnBackgroundColorHover,operateBtnBackgroundColorFocus:n.operateBtnBackgroundColorFocus,operateItemBackgroundColor:n.operateItemBackgroundColor,operateItemBackgroundColorHover:n.operateItemBackgroundColorHover,operateItemHeight:n.operateItemHeight,operateItemTextColor:n.operateItemTextColor,operateItemTextColorHover:n.operateItemTextColorHover,operateItemIconSize:n.operateItemIconSize,operateItemIconColor:n.operateItemIconColor,operateItemIconColorHover:n.operateItemIconColorHover,funOperateItem:n.useFunOperateItem,editorRenameContentBackgroundColor:n.editorRenameContentBackgroundColor,editorRenameFooterBackgroundColor:n.editorRenameFooterBackgroundColor,editorRenameInputTextColor:n.editorRenameInputTextColor,editorRenameInputTextBottomLineBorderColor:n.editorRenameInputTextBottomLineBorderColor,editorRenameInputTextBottomLineBorderColorHover:n.editorRenameInputTextBottomLineBorderColorHover,editorRenameInputTextBottomLineBorderColorFocus:n.editorRenameInputTextBottomLineBorderColorFocus,editorRenameCancelBtnText:n.editorRenameCancelBtnText,editorRenameCancelBtnTextColor:n.editorRenameCancelBtnTextColor,editorRenameCancelBtnTextColorHover:n.editorRenameCancelBtnTextColorHover,editorRenameCancelBtnIcon:n.editorRenameCancelBtnIcon,editorRenameCancelBtnIconSize:n.editorRenameCancelBtnIconSize,editorRenameCancelBtnIconColor:n.editorRenameCancelBtnIconColor,editorRenameCancelBtnIconColorHover:n.editorRenameCancelBtnIconColorHover,editorRenameCancelBtnIconRippleColor:n.editorRenameCancelBtnIconRippleColor,editorRenameCancelBtnBackgroundColor:n.editorRenameCancelBtnBackgroundColor,editorRenameCancelBtnBackgroundColorHover:n.editorRenameCancelBtnBackgroundColorHover,editorRenameSaveBtnText:n.editorRenameSaveBtnText,editorRenameSaveBtnTextColor:n.editorRenameSaveBtnTextColor,editorRenameSaveBtnTextColorHover:n.editorRenameSaveBtnTextColorHover,editorRenameSaveBtnIcon:n.editorRenameSaveBtnIcon,editorRenameSaveBtnIconSize:n.editorRenameSaveBtnIconSize,editorRenameSaveBtnIconColor:n.editorRenameSaveBtnIconColor,editorRenameSaveBtnIconColorHover:n.editorRenameSaveBtnIconColorHover,editorRenameSaveBtnIconRippleColor:n.editorRenameSaveBtnIconRippleColor,editorRenameSaveBtnBackgroundColor:n.editorRenameSaveBtnBackgroundColor,editorRenameSaveBtnBackgroundColorHover:n.editorRenameSaveBtnBackgroundColorHover,_render:"render"},on:{"update:data":[function(e){n.treeItemsFolder=e},n.changeData],"update:itemActive":function(e){n.treeItemActive=e},"update:item-active":function(e){n.treeItemActive=e},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem},scopedSlots:n._u([{key:"item",fn:function(e){return[t("div",{style:n.useTreeItemTextFontSize+" min-height:"+n.treeDefItemHeight+"px; line-height:"+n.treeDefItemHeight+"px;"},[n._t("folder-item",(function(){return[t("div",{style:"display:flex;"},[t("div",{style:"height:"+n.treeDefItemHeight+"px; padding-right:4px; display:flex; align-items:center;",on:{click:function(t){return n.ckTreeFolder(e)}}},[t("WIcon",{attrs:{icon:n.treeFolderIcon,color:n.getTreeFolderIconColor(e),colorHover:n.getTreeFolderIconColor(e),size:n.treeFolderIconSize}})],1),n._v(" "),t("div",{style:"cursor:pointer; user-select:none;",on:{click:function(t){return n.ckTreeFolder(e)}}},[n._v("\n                                        "+n._s(e.data.text)+"\n                                    ")])])]}),{item:Object.assign({},e.data,{icon:n.treeFolderIcon,iconColor:n.getTreeFolderIconColor(e),iconSize:n.treeFolderIconSize}),isHover:e.isHover,isActive:e.isActive,funClickFolderItem:function(){n.ckTreeFolder(e)}})],2)]}}],null,!0)}),n._v(" "),n.showTreeTrans?t("div",{style:"position:absolute; top:"+(n.useTreeItemHeightMin-(n.btnDisplayTreeIconSize+4))/2+"px; right:"+(8+(n.operatable?n.btnDisplayTreeIconSize+4:0))+"px;"},[t("WButtonCircle",{staticStyle:{display:"block"},attrs:{paddingStyle:{h:2,v:2},icon:n.showTreeTrans?n.btnDisplayTreeIconHide:n.btnDisplayTreeIconShow,iconSize:n.btnDisplayTreeIconSize,iconColor:n.btnDisplayTreeIconColor,iconColorHover:n.btnDisplayTreeIconColorHover,iconColorFocus:n.btnDisplayTreeIconColorFocus,backgroundColor:n.btnDisplayTreeBackgroundColor,backgroundColorHover:n.btnDisplayTreeBackgroundColorHover,backgroundColorFocus:n.btnDisplayTreeBackgroundColorFocus,shadow:!1},on:{click:function(e){return n.emitShowTreeDelay(!n.showTreeTrans)}}})],1):n._e()],1)]}},{key:"content",fn:function(e){return[t("div",{style:"height:100%; overflow:hidden;"},[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],style:"width:"+e.width+"px; min-width:"+e.width+"px; border-bottom:"+n.lineBetweenPathAndListWidth+"px solid "+n.effLineBetweenPathAndListColor+"; background:"+n.effPathBackgroundColor+";",on:{domresize:n.resizePath}},[t("div",{style:"padding-left:5px; display:flex; align-items:flex-start;"},[n.showTreeTrans?n._e():t("div",{style:"min-height:"+(n.btnDisplayTreeIconSize+8)+"px; padding-right:2px; display:flex; align-items:center;"},[t("WButtonCircle",{staticStyle:{display:"block"},attrs:{paddingStyle:{h:2,v:2},icon:n.showTreeTrans?n.btnDisplayTreeIconHide:n.btnDisplayTreeIconShow,iconSize:n.btnDisplayTreeIconSize,iconColor:n.btnDisplayTreeIconColor,iconColorHover:n.btnDisplayTreeIconColorHover,iconColorFocus:n.btnDisplayTreeIconColorFocus,backgroundColor:n.btnDisplayTreeBackgroundColor,backgroundColorHover:n.btnDisplayTreeBackgroundColorHover,backgroundColorFocus:n.btnDisplayTreeBackgroundColorFocus,shadow:!1},on:{click:function(e){return n.emitShowTreeDelay(!n.showTreeTrans)}}})],1),n._v(" "),0===n.pathInfors.length?t("div",{style:"min-height:"+(n.btnDisplayTreeIconSize+8)+"px; padding-left:4px; color:"+n.effPathBtnTextColor+"; "+n.usePathBtnTextFontSize+" display:flex; align-items:center;"},[n._v("\n                            "+n._s(n.noSelectedText)+"\n                        ")]):n._e(),n._v(" "),t("div",{style:"display:flex; flex-wrap:wrap;"},n._l(n.pathInfors,(function(e,o){return t("div",{key:"kpi-"+o,style:"min-height:"+(n.btnDisplayTreeIconSize+8)+"px;"},[t("div",{style:"min-height:"+(n.btnDisplayTreeIconSize+8)+"px; display:flex; align-items:center;"},[t("WIcon",{attrs:{icon:n.pathSepIcon,color:n.pathSepIconColor,colorHover:n.pathSepIconColor,size:n.pathSepIconSize}}),n._v(" "),t("WButtonChip",{attrs:{paddingStyle:{h:6,v:0},borderWidth:{},borderRadius:4,shadow:!1,text:e.name,textColor:n.pathBtnTextColor,textColorHover:n.pathBtnTextColorHover,_textColorActive:"pathBtnTextColorActive",textFontSize:n.pathBtnTextFontSize,_icon:"pathSepIcon",_iconColor:"pathSepIconColor",_iconSize:"pathSepIconSize",backgroundColor:n.pathBtnBackgroundColor,backgroundColorHover:n.pathBtnBackgroundColorHover,_backgroundColorActive:"pathBtnBackgroundColorActive"},on:{click:function(t){return n.ckPathFolder(e)}}})],1)])})),0)])]),n._v(" "),t("div",{style:"height:"+n.listHeight+"px; background:"+n.effListBackgroundColor+";"},[t("WListVertical",{style:"width:"+e.width+"px; min-width:"+e.width+"px; height:"+n.listHeight+"px;",attrs:{items:n.listItems,itemActive:n.listItemActive,itemCursorPointer:!1,paddingStyle:n.listPaddingStyle,itemBackgroundColor:n.listItemBackgroundColor,itemBackgroundColorHover:n.listItemBackgroundColorHover,itemBackgroundColorActive:n.listItemBackgroundColorActive,itemTextColor:n.listItemTextColor,itemTextColorHover:n.listItemTextColorHover,itemTextColorActive:n.listItemTextColorActive,itemIconSize:n.listItemIconSize,_itemIconColor:"listItemIconColor",_itemIconColorHover:"listItemIconColorHover",_itemIconColorActive:"listItemIconColorActive",itemRippleColor:n.listItemRippleColor,_click:"ckListItem","_v-if":"listItems.length>0"},on:{"update:itemActive":function(e){n.listItemActive=e},"update:item-active":function(e){n.listItemActive=e}},scopedSlots:n._u([{key:"header",fn:function(){return[n._t("list-head",null,{items:n.listItems})]},proxy:!0},{key:"item",fn:function(e){return[t("div",{style:"position:relative; "+n.useListItemTextFontSize+" min-height:"+n.listDefItemHeight+"px; line-height:"+n.listDefItemHeight+"px;"},[n._t("list-item",(function(){return[t("div",{style:"display:flex;"},[t("div",{style:"height:"+n.listDefItemHeight+"px; padding-right:4px; display:flex; align-items:center; cursor:pointer;",on:{click:function(t){return n.ckListItem(e)}}},[t("WIcon",{attrs:{icon:e.item.icon,color:n.getListItemIconColor(e),colorHover:n.getListItemIconColor(e),size:n.listItemIconSize}})],1),n._v(" "),n._t("list-item-text-left",null,{item:e.item,isHover:e.isHover,isActive:e.isActive}),n._v(" "),t("div",{style:"cursor:pointer; user-select:none;",on:{click:function(t){return n.ckListItem(e)}}},[n._v("\n                                            "+n._s(e.item.text)+"\n                                        ")]),n._v(" "),n._t("list-item-text-right",null,{item:e.item,isHover:e.isHover,isActive:e.isActive})],2)]}),{item:Object.assign({},e.item,{iconColor:n.getListItemIconColor(e),iconSize:n.listItemIconSize}),isHover:e.isHover,isActive:e.isActive,funClickListItem:function(){n.ckListItem(e)}}),n._v(" "),t("div",{style:"position:absolute; top:0px; right:0px;"},[n._t("list-item-cover",null,{item:e.item,isHover:e.isHover,isActive:e.isActive})],2),n._v(" "),n._t("list-item-sub",null,{item:e.item,isHover:e.isHover,isActive:e.isActive})],2)]}},{key:"footer",fn:function(){return[n._t("list-foot",null,{items:n.listItems})]},proxy:!0}],null,!0)})],1)])]}}])})],1)};vw._withStripped=!0;var gw={components:{demolink:iu,WIcon:Ha,WExplorer:wa({render:vw,staticRenderFns:[]},(function(n){n&&n("data-v-49cba4a4_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WExplorer.vue"},media:void 0})}),mw,"data-v-49cba4a4",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{mdiCommentEditOutline:dl,mdiChevronDoubleRight:el,mdiDeleteVariant:ul,WExplorer:{bShowTree:!0,treeWidth:275,funSortTree:null,fps:[{type:"file",path:"/Applications/Calendar.app",size:"256.5mb",tester:"Perter",priority:"L4"},{type:"file",path:"/Applications/Chrome.app",size:"496.7mb",tester:"Chloe",priority:"L4"},{type:"file",path:"/Applications/Webstorm.app",size:"128.6mb",tester:"Adrian",priority:"L4"},{type:"folder",path:"/Applications/Webs",size:"",tester:"",priority:""},{type:"file",path:"/Applications/Webs/web_infors.json",size:"92.2kb",tester:"Carl",priority:"L3"},{type:"file",path:"/Applications/Webs/Shareco/shareco-s1.txt",size:"5.4kb",tester:"Charissa",priority:"L4"},{type:"file",path:"/Applications/Webs/Shareco/shareco-s2.txt",size:"7.3kb",tester:"Dexter",priority:"L4"},{type:"folder",path:"/Applications/Webs/Guess",size:"",tester:"",priority:""},{type:"file",path:"/Applications/Webs/Guess/guess-s3.txt",size:"21.6kb",tester:"Ashley",priority:"L4"},{type:"file",path:"/Applications/Webs/Guess/guess-s4.txt",size:"82.7kb",tester:"Dwight",priority:"L4"},{type:"file",path:"/Applications//Systems/Regulator.ini",size:"2.5kb",tester:"Laura",priority:"L5"},{type:"file",path:"/Applications/Systems/Regulator/vers/1-settings.st",size:"56.2kb",tester:"Mavis",priority:"L5"},{type:"file",path:"/Applications/Systems/Regulator/vers/2-settings.st",size:"87.2kb",tester:"Geraint",priority:"L5"},{type:"file",path:"/Applications/Systems/Regulator/vers/3-settings.st",size:"224.2kb",tester:"Penelope",priority:"L5"},{type:"file",path:"/Applications/Systems/Regulator/vers/10-settings.st",size:"72.7kb",tester:"Heman",priority:"L5"},{type:"file",path:"/Applications/Systems/Regulator/vers/111-settings.st",size:"91.2kb",tester:"Tessa",priority:"L5"},{type:"file",path:"/Applications//Systems/device1.iso",size:"1.2gb",tester:"Una",priority:"L2"},{type:"file",path:"/Applications//Systems/device2.iso",size:"1.3gb",tester:"Jasper",priority:"L2"},{type:"file",path:"/Applications//Systems/device3.iso",size:"1.1gb",tester:"Violet",priority:"L2"},{type:"file",path:"/Applications//Systems/device4.iso",size:"1.7gb",tester:"Perter",priority:"L2"},{type:"file",path:"/Applications//Systems/device5.iso",size:"2.0gb",tester:"Winifred",priority:"L2"},{type:"file",path:"/Applications//Systems/device6.iso",size:"1.7gb",tester:"Lance",priority:"L2"},{type:"file",path:"/Applications//Systems/device7.iso",size:"2.1gb",tester:"Marvin",priority:"L2"},{type:"file",path:"/Applications//Systems/device8.iso",size:"1.5gb",tester:"Nat",priority:"L2"},{type:"file",path:"/Applications//Systems/device9.iso",size:"1.8gb",tester:"Nahum",priority:"L2"},{type:"file",path:"/Applications//Systems/device10.iso",size:"1.6gb",tester:"Nicholas",priority:"L2"},{type:"file",path:"/Applications//Systems/device11.iso",size:"1.2gb",tester:"Ralph",priority:"L2"},{type:"file",path:"/Applications//Systems/device12.iso",size:"2.2gb",tester:"Rudolph",priority:"L2"},{type:"file",path:"/Applications//Systems/device13.iso",size:"1.9gb",tester:"Rory",priority:"L2"},{type:"file",path:"/Applications//Systems/device14.iso",size:"1.2gb",tester:"Jacqueline",priority:"L2"},{type:"file",path:"/Applications//Systems/device15.iso",size:"1.7gb",tester:"Kathy",priority:"L2"},{type:"file",path:"/Applications//Systems/device16.iso",size:"1.1gb",tester:"Melinda",priority:"L2"},{type:"file",path:"/Applications//Systems/device17.iso",size:"1.9gb",tester:"Sharon",priority:"L2"},{type:"file",path:"/Applications//Systems/device18.iso",size:"1.2gb",tester:"Philippa",priority:"L2"},{type:"file",path:"/Applications//Systems/device19.iso",size:"1.5gb",tester:"Thelma",priority:"L2"},{type:"file",path:"/Applications//Systems/device20.iso",size:"1.4gb",tester:"Stewart",priority:"L2"},{type:"file",path:"/Documents/design-simple/src/index.txt",size:"6.7kb",tester:"Steve",priority:"L1"},{type:"file",path:"/Documents/design-simple/src/bootstrap.txt",size:"251.7kb",tester:"Theobald",priority:"L1"},{type:"file",path:"/Documents/design-material/src/btn.txt",size:"241.2b",tester:"Padraic",priority:"L1"},{type:"file",path:"/Documents/design-material/src/card.txt",size:"4.7kb",tester:"Napoleon",priority:"L1"},{type:"file",path:"/Documents/design-material/src/window.txt",size:"7.2kb",tester:"Lionel",priority:"L1"},{type:"file",path:"/Downloads/October.pdf",size:"16.9kb",tester:"Olive",priority:"L1"},{type:"file",path:"/Downloads/November.pdf",size:"94.5kb",tester:"Molly",priority:"L1"},{type:"file",path:"/Downloads/Tutorial.html",size:"22.7kb",tester:"Melanie",priority:"L1"},{type:"folder",path:"/Uploads",size:"",tester:"",priority:""},{type:"file",path:"/Videos/Tutorials/Basic layouts.mp4",size:"862.7mb",tester:"Lindsay",priority:"L3"},{type:"file",path:"/Videos/Tutorials/Advanced techniques.mp4",size:"626.5mb",tester:"Jarvis",priority:"L3"},{type:"file",path:"/Videos/Tutorials/All about app.mp4",size:"796.2mb",tester:"Gaston",priority:"L3"},{type:"file",path:"/Videos/Intro.mov",size:"852.8mb",tester:"Dermot",priority:"L3"},{type:"file",path:"/Videos/Conference introduction.avi",size:"676.7mb",tester:"Hector",priority:"L3"},{type:"folder",path:"/Videos/Empty",size:"",tester:"",priority:""}]},actions:[{mode:"eleclick",selector:'span[class="v-chip__content"]'}]}},methods:{ckItem:function(n){console.log("ckItem",n)},ckFolder:function(n){console.log("ckFolder",n)},ckFile:function(n){console.log("ckFile",n)},toggleTreeFoldersByFun:function(n,e){console.log("toggleTreeFoldersByFun",n,e);this.$refs.ref_toggleTreeFoldersByFun.toggleTreeFoldersByFun((t=>(console.log("toggleTreeFoldersByFun rows",t),{row:t[n],toUnfolding:e})))},toggleTreeFoldersAll:function(n,e){console.log("toggleTreeFoldersAll",n,e);this.$refs.ref_toggleTreeFoldersAll.toggleTreeFoldersAll(n,e)},ckTriggerClickTreeFolderById:function(n){console.log("ckTriggerClickTreeFolderById",n);this.$refs.we_triggerClickTreeFolderById.triggerClickTreeFolderById(n)},ckTriggerClickTreeFolderByFun:function(n){console.log("ckTriggerClickTreeFolderByFun",n);this.$refs.we_triggerClickTreeFolderByFun.triggerClickTreeFolderByFun((e=>{console.log("cb msg",e);for(let t=0;t<e.treeItemsSpread.length;t++){let o=e.treeItemsSpread[t];if(o.text===n)return console.log("find and click",o),o}return null}))},ckFunSortTree:function(n){console.log("ckFunSortTree",n);let e=this,t=n=>(console.log("rs",n),n.reverse(),n);e.WExplorer.funSortTree="default"===n?null:t},getFolderInfor:function(n){console.log("getFolderInfor",n);let e=0,t=0;for(let o=0;o<n.items.length;o++){let r=n.items[o].data._type;"folder"===r?e++:"file"===r&&t++}return`There are ${e} folder(s) and ${t} file(s) in this folder`},clickOperateItem:function(n){console.log("clickOperateItem",n);let e=n.rowItem.index;n.operateItem(e,n.opItem.key,(function(){return new Promise((function(n,e){n({text:"new-"+Math.floor(1e3*Math.random()),type:"folder",size:"test",tester:"test",priority:"test"})}))}))},changeItem:function(n){console.log("changeItem",n)}}};const hw=gw;var fw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"default"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeWidth"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"10px","font-size":"0.8rem"}},[n._v("treeWidth: "+n._s(n.WExplorer.treeWidth))]),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeWidth:n.WExplorer.treeWidth},on:{"update:treeWidth":function(e){return n.$set(n.WExplorer,"treeWidth",e)},"update:tree-width":function(e){return n.$set(n.WExplorer,"treeWidth",e)}}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeWidthMin & treeWidthMax"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeWidthMin:100,treeWidthMax:400}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeBackgroundColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeBackgroundColor:"#f8f8f8"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"showTree"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"10px"}},[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){n.WExplorer.bShowTree=!n.WExplorer.bShowTree}}},[n._v("Show("+n._s(n.WExplorer.bShowTree)+")")])],1),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,showTree:n.WExplorer.bShowTree},on:{"update:showTree":function(e){return n.$set(n.WExplorer,"bShowTree",e)},"update:show-tree":function(e){return n.$set(n.WExplorer,"bShowTree",e)}}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeAfloat"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeAfloat:!0}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeDefaultDisplayLevel"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeDefaultDisplayLevel:1}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeDefItemHeight & listDefItemHeight"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeDefItemHeight:22,listDefItemHeight:22}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treePaddingStyle"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treePaddingStyle:{v:4,h:4}}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeIndent"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeIndent:.5}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeFolderIcon & treeFolderIconSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeFolderIcon:"fas fa-folder-open",treeFolderIconSize:18}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeItemTextFontSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeItemTextFontSize:"0.75rem"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeItemTextColor & treeItemTextColorHover & treeItemTextColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeItemTextColor:"#a84",treeItemTextColorHover:"#864",treeItemTextColorActive:"#862"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeFolderIconColor & treeFolderIconColorHover & treeFolderIconColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeFolderIconColor:"#ea6",treeFolderIconColorHover:"#c84",treeFolderIconColorActive:"#a62"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeItemBackgroundColor & treeItemBackgroundColorHover & treeItemBackgroundColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeItemBackgroundColor:"transparent",treeItemBackgroundColorHover:"#FFF3E0",treeItemBackgroundColorActive:"#FFE0B2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeItemRippleColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeItemRippleColor:"rgba(130, 180, 255, 0.4)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"bindRoot"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,bindRoot:"本機"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeToggleIconSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeToggleIconSize:18}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeToggleIconColor & treeToggleIconBackgroundColor & treeToggleIconBackgroundColorHover"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeToggleIconColor:"#f58",treeToggleIconBackgroundColor:"rgba(255,200,200,0.5)",treeToggleIconBackgroundColorHover:"#fcc"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"pathBackgroundColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,pathBackgroundColor:"#f8f8f8"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"pathSepIcon & pathSepIconColor & pathSepIconSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,pathSepIcon:"fas fa-angle-double-right",pathSepIconColor:"#00C853",pathSepIconSize:14}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"pathBtnTextFontSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,pathBtnTextFontSize:"0.75rem"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"pathBtnTextColor & pathBtnTextColorHover"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,pathBtnTextColor:"#EF5350",pathBtnTextColorHover:"#EC407A"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"pathBtnBackgroundColor & pathBtnBackgroundColorHover"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,pathBtnBackgroundColor:"#EDE7F6",pathBtnBackgroundColorHover:"#D1C4E9"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"btnDisplayTreeIconShow & btnDisplayTreeIconHide & btnDisplayTreeIconSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,btnDisplayTreeIconShow:"fas fa-arrow-circle-right",btnDisplayTreeIconHide:"fas fa-arrow-circle-left",btnDisplayTreeIconSize:22}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"btnDisplayTreeIconColor & btnDisplayTreeIconColorHover & btnDisplayTreeIconColorFocus"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,btnDisplayTreeIconColor:"rgb(240,70,120)",btnDisplayTreeIconColorHover:"rgb(240,50,100)",btnDisplayTreeIconColorFocus:"rgb(255,70,120)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"btnDisplayTreeBackgroundColor & btnDisplayTreeBackgroundColorHover & btnDisplayTreeBackgroundColorFocus"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,btnDisplayTreeBackgroundColor:"rgba(241,241,255,0.7)",btnDisplayTreeBackgroundColorHover:"rgb(220,220,255)",btnDisplayTreeBackgroundColorFocus:"rgb(200,200,255)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listPaddingStyle"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listPaddingStyle:{v:2,h:8}}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listBackgroundColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listBackgroundColor:"#f8f8f8"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listFolderIcon & listFileIcon & listIconSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listFolderIcon:"fas fa-folder-open",listFileIcon:"fas fa-tablet-alt",listIconSize:18}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listItemTextFontSize"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listItemTextFontSize:"0.75rem"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listItemTextColor & listItemTextColorHover & listItemTextColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listItemTextColor:"#a84",listItemTextColorHover:"#864",listItemTextColorActive:"#862"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listItemIconColor & listItemIconColorHover & listItemIconColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listItemIconColor:"#ea6",listItemIconColorHover:"#c84",listItemIconColorActive:"#a62"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listItemBackgroundColor & listItemBackgroundColorHover & listItemBackgroundColorActive"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listItemBackgroundColor:"transparent",listItemBackgroundColorHover:"#FFF3E0",listItemBackgroundColorActive:"#FFE0B2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"listItemRippleColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,listItemRippleColor:"rgba(130, 180, 255, 0.4)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"defaultShowTreeFirst"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,defaultShowTreeFirst:!1}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"defaultShowTreeFirst & noSelectedText"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,defaultShowTreeFirst:!1,noSelectedText:"尚未選擇資料夾"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"events"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem,"click-folder":n.ckFolder,"click-file":n.ckFile}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"small text"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeItemTextFontSize:"0.75rem",listItemTextFontSize:"0.75rem",pathBtnTextFontSize:"0.75rem"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"treeDrawerBarSize & treeDrawerBarColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,treeDrawerBarSize:5,treeDrawerBarColor:"rgba(0,0,0,0.1)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"lineBetweenPathAndListWidth & lineBetweenPathAndListColor"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,lineBetweenPathAndListWidth:5,lineBetweenPathAndListColor:"rgba(0,0,0,0.1)"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"dark mode"}}),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"40px",background:"#777"}},[t("w-explorer",{staticStyle:{width:"700px",height:"400px",background:"#333","border-radius":"5px",overflow:"hidden","box-shadow":"0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)"},attrs:{items:n.WExplorer.fps,treeItemTextColor:"#ddd",treeItemTextColorHover:"#eee",treeItemTextColorActive:"#fff",treeFolderIconColor:"#FFCC80",treeFolderIconColorHover:"#FFCC80",treeFolderIconColorActive:"#FFB74D",treeItemBackgroundColor:"transparent",treeItemBackgroundColorHover:"rgba(150,150,150,0.4)",treeItemBackgroundColorActive:"rgba(150,150,150,0.2)",treeBackgroundColor:"#333",treeToggleIconColor:"rgba(255,255,255,0.6)",treeToggleIconBackgroundColor:"transparent",treeToggleIconBackgroundColorHover:"rgba(150,150,150,0.2)",pathBtnTextColor:"#ddd",pathBtnTextColorHover:"#eee",pathBtnBackgroundColor:"transparent",pathBtnBackgroundColorHover:"rgba(150,150,150,0.2)",pathBackgroundColor:"#333",btnDisplayTreeIconColor:"#ccc",btnDisplayTreeIconColorHover:"#eee",btnDisplayTreeIconColorFocus:"#eee",btnDisplayTreeBackgroundColor:"transparent",btnDisplayTreeBackgroundColorHover:"rgba(150,150,150,0.2)",btnDisplayTreeBackgroundColorFocus:"rgba(150,150,150,0.1)",listItemTextColor:"#ddd",listItemTextColorHover:"#eee",listItemTextColorActive:"#fff",listItemIconColor:"#FFCC80",listItemIconColorHover:"#FFCC80",listItemIconColorActive:"#FFB74D",listItemBackgroundColor:"transparent",listItemBackgroundColorHover:"rgba(150,150,150,0.4)",listItemBackgroundColorActive:"rgba(150,150,150,0.2)",listBackgroundColor:"#333",treeDrawerBarSize:1,treeDrawerBarColor:"rgba(150,150,150,0.4)",lineBetweenPathAndListWidth:1,lineBetweenPathAndListColor:"rgba(150,150,150,0.4)",treeItemTextFontSize:"0.75rem",listItemTextFontSize:"0.75rem",pathBtnTextFontSize:"0.75rem"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"toggleTreeFoldersByFun"}}),n._v(" "),t("div",[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(0,!0)}}},[n._v("show(rows[0])")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(0,!1)}}},[n._v("hide(rows[0])")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(1,!0)}}},[n._v("show(rows[1])")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(1,!1)}}},[n._v("hide(rows[1])")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(2,!0)}}},[n._v("show(rows[2])")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersByFun(2,!1)}}},[n._v("hide(rows[2])")])],1),n._v(" "),t("w-explorer",{ref:"ref_toggleTreeFoldersByFun",staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"toggleTreeFoldersAll"}}),n._v(" "),t("div",[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersAll(!0)}}},[n._v("display all")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersAll(!1)}}},[n._v("hide all")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersAll(null,1)}}},[n._v("display to level1")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.toggleTreeFoldersAll(null,2)}}},[n._v("display to level2")])],1),n._v(" "),t("w-explorer",{ref:"ref_toggleTreeFoldersAll",staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"triggerClickTreeFolderById"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"10px"}},[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckTriggerClickTreeFolderById("root")}}},[n._v("click(root)")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckTriggerClickTreeFolderById("root❯Applications")}}},[n._v("click(Applications)")])],1),n._v(" "),t("w-explorer",{ref:"we_triggerClickTreeFolderById",staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"triggerClickTreeFolderByFun"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"10px"}},[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckTriggerClickTreeFolderByFun("Applications")}}},[n._v("click(Applications)")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckTriggerClickTreeFolderByFun("Webs")}}},[n._v("click(Webs)")])],1),n._v(" "),t("w-explorer",{ref:"we_triggerClickTreeFolderByFun",staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"funSortTree"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"10px"}},[t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckFunSortTree("funSortTree")}}},[n._v("funSortTree(reverse)")]),n._v(" "),t("v-btn",{staticStyle:{margin:"0px 5px 5px 0px"},attrs:{small:""},on:{click:function(e){return n.ckFunSortTree("default")}}},[n._v("default")])],1),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps,funSortTree:n.WExplorer.funSortTree}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot folder-item"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},scopedSlots:n._u([{key:"folder-item",fn:function(e){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("div",{staticStyle:{"padding-right":"5px",cursor:"pointer"},on:{click:function(n){return e.funClickFolderItem()}}},[t("w-icon",{attrs:{icon:e.item.icon,_color:"props.item.iconColor",color:"#d7a72b",size:e.item.iconSize}})],1),n._v(" "),t("div",{staticStyle:{cursor:"pointer"},on:{click:function(n){return e.funClickFolderItem()}}},[n._v("\n                            "+n._s(e.item.text)+"\n                        ")])])]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot list-item-cover"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem},scopedSlots:n._u([{key:"list-item-cover",fn:function(e){return["file"===e.item.data._type?t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("div",{staticStyle:{padding:"0px 5px",color:"#6fb57e",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-shield")}}},[t("i",{staticClass:"fas fa-shield-virus"})]),n._v(" "),t("div",{staticStyle:{"padding-right":"5px"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 5px",color:"#b894be",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-dice")}}},[t("i",{staticClass:"fas fa-dice"})]),n._v(" "),t("div",{staticStyle:{"padding-right":"5px"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 5px",color:"#c79f6b",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-wired")}}},[t("i",{staticClass:"fas fa-network-wired"})]),n._v(" "),t("div",{staticStyle:{"padding-right":"5px"}})]):n._e()]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot list-item & list-item-cover & list-head & list-foot"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem},scopedSlots:n._u([{key:"list-item",fn:function(e){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("div",{staticStyle:{"padding-right":"5px",cursor:"pointer"},on:{click:function(n){return e.funClickListItem()}}},[t("w-icon",{attrs:{icon:e.item.icon,_color:"props.item.iconColor",color:"#d7a72b",size:e.item.iconSize}})],1),n._v(" "),t("div",{staticStyle:{cursor:"pointer"},on:{click:function(n){return e.funClickListItem()}}},[n._v("\n                            "+n._s(e.item.data.text)+"\n                        ")])])]}},{key:"list-head",fn:function(e){return[t("div",{staticStyle:{display:"flex","align-items":"stretch"}},[t("div",{staticStyle:{width:"100%"}},[t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{color:"#999","font-size":"0.7rem","text-align":"center"}},[n._v("\n                                    name\n                                ")])])]),n._v(" "),t("div",{staticStyle:{margin:"3px 0px","border-right":"1px solid #ddd"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"60px",color:"#999","font-size":"0.7rem","text-align":"center"}},[n._v("\n                                size\n                            ")])]),n._v(" "),t("div",{staticStyle:{margin:"3px 0px","border-right":"1px solid #ddd"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"60px",color:"#999","font-size":"0.7rem","text-align":"center"}},[n._v("\n                                tester\n                            ")])]),n._v(" "),t("div",{staticStyle:{margin:"3px 0px","border-right":"1px solid #ddd"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"16px",color:"#999","font-size":"0.7rem","text-align":"center"}},[n._v("\n                                i\n                            ")])]),n._v(" "),t("div",{staticStyle:{margin:"3px 0px","border-right":"1px solid #ddd"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"16px",color:"#999","font-size":"0.7rem","text-align":"center"}},[n._v("\n                                s\n                            ")])]),n._v(" "),t("div",{staticStyle:{margin:"3px 0px","border-right":"1px solid #ddd"}}),n._v(" "),t("div",{staticStyle:{"padding-right":"calc( 8px - 2px - 1px )"}})])]}},{key:"list-foot",fn:function(e){return[t("div",{staticStyle:{padding:"1px 3px",background:"#f8f8f8","border-top":"1px solid #ddd","font-size":"0.7rem",color:"#888"}},[n._v("\n                        "+n._s(n.getFolderInfor(e))+"\n                    ")])]}},{key:"list-item-cover",fn:function(e){return["file"===e.item.data._type?t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"60px",color:"#999","font-size":"0.7rem","text-align":"right",cursor:"pointer"},on:{click:function(e){return n.ckItem("text-size")}}},[n._v("\n                                "+n._s(e.item.data.data.size)+"\n                            ")])]),n._v(" "),t("div",{staticStyle:{"padding-right":"1px"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"60px",color:"#3448a9","font-size":"0.7rem","text-align":"right",cursor:"pointer"},on:{click:function(e){return n.ckItem("text-tester")}}},[n._v("\n                                "+n._s(e.item.data.data.tester)+"\n                            ")])]),n._v(" "),t("div",{staticStyle:{"padding-right":"1px"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"16px",color:"#996887",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-branch")}}},[t("i",{staticClass:"fas fa-code-branch"})])]),n._v(" "),t("div",{staticStyle:{"padding-right":"1px"}}),n._v(" "),t("div",{staticStyle:{padding:"0px 7px"}},[t("div",{staticStyle:{width:"16px",color:"#777",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-cog")}}},[t("i",{staticClass:"fas fa-cog"})])])]):n._e()]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot list-item-sub"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem},scopedSlots:n._u([{key:"list-item-sub",fn:function(e){return["file"===e.item.data._type?t("div",{style:"transition:all 0.3s; padding:3px; background:"+(e.isHover?"#e2e2e2":"#fbf4f2")+"; border-bottom:1px solid #ddd; font-size:0.7rem; line-height:0.7rem; display:flex; align-items:center; justify-content:flex-end;"},[t("div",{staticStyle:{padding:"0px 5px",display:"flex","align-items":"center"}},[t("div",{staticStyle:{"padding-right":"3px",color:"#888"}},[n._v("\n                                priority:\n                            ")]),n._v(" "),t("div",{staticStyle:{width:"20px",color:"#2e31af","text-align":"left",cursor:"pointer"},on:{click:function(e){return n.ckItem("text-priority")}}},[n._v("\n                                "+n._s(e.item.data.data.priority)+"\n                            ")])]),n._v(" "),t("div",{staticStyle:{padding:"0px 5px",color:"#6fb57e",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-shield")}}},[t("i",{staticClass:"fas fa-shield-virus"})]),n._v(" "),t("div",{staticStyle:{padding:"0px 5px",color:"#b894be",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-dice")}}},[t("i",{staticClass:"fas fa-dice"})]),n._v(" "),t("div",{staticStyle:{padding:"0px 5px",color:"#c79f6b",cursor:"pointer"},on:{click:function(e){return n.ckItem("icon-wired")}}},[t("i",{staticClass:"fas fa-network-wired"})])]):n._e()]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot list-item-text-left"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem},scopedSlots:n._u([{key:"list-item-text-left",fn:function(e){return["file"===e.item.data._type?t("div",{style:"display:flex; align-items:center;"},[t("div",{style:"transition:all 0.3s; padding:3px 4px; border-radius:0px; font-size:0.7rem; line-height:0.7rem; color:#fff; cursor:pointer; background:"+(e.isHover?"#62a":"#84a")+";"},[t("div",{on:{click:function(e){return n.ckItem("text-priority")}}},[n._v("\n                                "+n._s(e.item.data.data.priority)+"\n                            ")])]),n._v(" "),t("div",{staticStyle:{"padding-right":"5px"}})]):n._e()]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"slot list-item-text-right"}}),n._v(" "),t("w-explorer",{staticStyle:{width:"600px",height:"250px"},attrs:{items:n.WExplorer.fps},on:{click:n.ckItem},scopedSlots:n._u([{key:"list-item-text-right",fn:function(e){return["file"===e.item.data._type?t("div",{style:"display:flex; align-items:center;"},[t("div",{staticStyle:{"padding-right":"5px"}}),n._v(" "),t("div",{style:"transition:all 0.3s; padding:3px 5px; border-radius:4px; font-size:0.7rem; line-height:0.7rem; color:#fff; cursor:pointer; background:"+(e.isHover?"#f26":"#f48")+";"},[t("div",{on:{click:function(e){return n.ckItem("text-tester")}}},[n._v("\n                                "+n._s(e.item.data.data.tester)+"\n                            ")])])]):n._e()]}}])})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"draggable"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using draggable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,draggable:!0},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"draggable & dgPreviewOpacity & dgPreviewBorderWidth & dgBelongBackgroundColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using draggable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,draggable:!0,dgPreviewOpacity:.9,dgPreviewBorderWidth:3,dgPreviewBorderColor:"rgba(255,100,200,1)",dgPreviewBackground:"rgba(255,100,200,0.2)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"draggable & dgInsertLineColor & dgInsertBackgroundColor & dgBelongBackgroundColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using draggable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,draggable:!0,dgInsertLineColor:"rgba(120,220,150,0.9)",dgInsertBackgroundColor:"rgba(50,220,100,0.1)",dgBelongBackgroundColor:"rgba(50,220,100,0.2)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"draggable & dgTextDisabled & dgTextDisabledColor & dgTextDisabledPaddingLeft & dgTextDisabledFontSize & dgTextDisabledBackgroundColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using draggable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,draggable:!0,dgTextDisabled:"禁止拖曳至自己子節點當中",dgTextDisabledColor:"pink accent-3",dgTextDisabledPaddingLeft:13,dgTextDisabledFontSize:"0.8rem",dgTextDisabledBackgroundColor:"rgba(255,255,255,0.8)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operateBtnTooltip & operateItemTextForRename & perateItemTextForInsertChild & operateItemTextForDelete"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateBtnTooltip:"編輯",operateItemTextForRename:"變更項目名稱",operateItemTextForInsertChild:"插入子項目",operateItemTextForDelete:"刪除項目"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operatePanelWidth & operatePanelHeight & operateItemIconSize & operateItemPaddingStyle"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateItemIconSize:18,operateItemPaddingStyle:{v:5,h:5},operatePanelWidth:130,operatePanelHeight:90},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operateItemHeight & operateItemIconSize & operateItemPaddingStyle"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateItemIconSize:18,operateItemPaddingStyle:{v:5,h:5},operateItemHeight:29.2},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operateBtnBackgroundColor & operateBtnBackgroundColorHover & operateBtnBackgroundColorFocus"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateBtnBackgroundColor:"rgba(230,230,230,0.4)",operateBtnBackgroundColorHover:"rgba(230,230,255,0.8)",operateBtnBackgroundColorFocus:"rgba(210,210,255,0.8)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operateItemBackgroundColor & operateItemBackgroundColorHover & operateItemTextColor & operateItemTextColorHover & operateItemIconColor & operateItemIconColorHover"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateItemBackgroundColor:"blue-grey darken-1",operateItemBackgroundColorHover:"blue-grey",operateItemTextColor:"grey lighten-4",operateItemTextColorHover:"white",operateItemIconColor:"grey lighten-4",operateItemIconColorHover:"white"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & operateItemIconForRename & operateItemIconForInsertChild & operateItemIconForDelete"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,operateItemIconForRename:n.mdiCommentEditOutline,operateItemIconForInsertChild:n.mdiChevronDoubleRight,operateItemIconForDelete:n.mdiDeleteVariant},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameContentBackgroundColor & editorRenameFooterBackgroundColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameContentBackgroundColor:"#f2f2f2",editorRenameFooterBackgroundColor:"#EFEBE9"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameInputTextColor & editorRenameInputTextBottomLineBorderColor & editorRenameInputTextBottomLineBorderColorHover & editorRenameInputTextBottomLineBorderColorFocus"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameInputTextColor:"#444",editorRenameInputTextBottomLineBorderColor:"#888",editorRenameInputTextBottomLineBorderColorHover:"#aaa",editorRenameInputTextBottomLineBorderColorFocus:"#666"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameCancelBtnText & editorRenameCancelBtnTextColor & editorRenameCancelBtnTextColorHover"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameCancelBtnText:"取消",editorRenameCancelBtnTextColor:"#444",editorRenameCancelBtnTextColorHover:"#222"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameCancelBtnIcon & editorRenameCancelBtnIconSize & editorRenameCancelBtnIconColor & editorRenameCancelBtnIconColorHover & editorRenameCancelBtnIconRippleColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameCancelBtnIcon:"fas fa-times",editorRenameCancelBtnIconSize:24,editorRenameCancelBtnIconColor:"#444",editorRenameCancelBtnIconColorHover:"#222",editorRenameCancelBtnIconRippleColor:"rgba(200,200,200,0.3)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameCancelBtnBackgroundColor & editorRenameCancelBtnBackgroundColorHover"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameCancelBtnBackgroundColor:"#EFEBE9",editorRenameCancelBtnBackgroundColorHover:"#D7CCC8"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameSaveBtnText & editorRenameSaveBtnTextColor & editorRenameSaveBtnTextColorHover"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameSaveBtnText:"儲存",editorRenameSaveBtnTextColor:"#444",editorRenameSaveBtnTextColorHover:"#222"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameSaveBtnIcon & editorRenameSaveBtnIconSize & editorRenameSaveBtnIconColor & editorRenameSaveBtnIconColorHover & editorRenameSaveBtnIconRippleColor"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameSaveBtnIcon:"fas fa-check",editorRenameSaveBtnIconSize:24,editorRenameSaveBtnIconColor:"#444",editorRenameSaveBtnIconColorHover:"#222",editorRenameSaveBtnIconRippleColor:"rgba(200,200,200,0.3)"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & editorRenameSaveBtnBackgroundColor & editorRenameSaveBtnBackgroundColorHover"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,editorRenameSaveBtnBackgroundColor:"#EFEBE9",editorRenameSaveBtnBackgroundColorHover:"#D7CCC8"},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-explorer",casename:"operatable & draggable"}}),n._v(" "),t("div",{staticStyle:{"margin-bottom":"5px",color:"#f26","font-size":"0.8rem"}},[n._v("* Disable show and hide folders when using operatable or draggable")]),n._v(" "),t("w-explorer",{staticStyle:{width:"800px",height:"450px"},attrs:{items:n.WExplorer.fps,operatable:!0,draggable:!0},on:{"update:items":function(e){return n.$set(n.WExplorer,"fps",e)},"click-operate-item":n.clickOperateItem,"change-item":n.changeItem}})],1)])])};fw._withStripped=!0;const bw=wa({render:fw,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-explorer")])])}]},(function(n){n&&n("data-v-1f58fff4_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWExplorer.vue"},media:void 0})}),hw,"data-v-1f58fff4",false,undefined,!1,_a,void 0,void 0);var yw={components:{},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200}},data:function(){let n=function(n){let e=n,t=e/2*Math.sqrt(3),o=e/4*3,r=(()=>{let n=[];for(let t=0;t<6;t++){let o=Math.PI/3*(t+.5),r=.5+.5*Math.cos(o),i=.5+.5*Math.sin(o);r*=e,i*=e,n.push({x:r,y:i})}return n})(),i=Io(r,(n=>`${n.x},${n.y}`));i=zl(i," ");let a=[];Ve([{dx:6,cs:["#003366","#336699","#3366CC","#003399","#000099","#0000CC","#000066"]},{dx:5,cs:["#006666","#006699","#0099CC","#0066CC","#0033CC","#0000FF","#3333FF","#333399"]},{dx:4,cs:["#669999","#009999","#33CCCC","#00CCFF","#0099FF","#0066FF","#3366FF","#3333CC","#666699"]},{dx:3,cs:["#339966","#00CC99","#00FFCC","#00FFFF","#33CCFF","#3399FF","#6699FF","#6666FF","#6600FF","#6600CC"]},{dx:2,cs:["#339933","#00CC66","#00FF99","#66FFCC","#66FFFF","#66CCFF","#99CCFF","#9999FF","#9966FF","#9933FF","#9900FF"]},{dx:1,cs:["#006600","#00CC00","#00FF00","#66FF99","#99FFCC","#CCFFFF","#CCCCFF","#CC99FF","#CC66FF","#CC33FF","#CC00FF","#9900CC"]},{dx:0,cs:["#003300","#009933","#33CC33","#66FF66","#99FF99","#CCFFCC","#FFFFFF","#FFCCFF","#FF99FF","#FF66FF","#FF00FF","#CC00CC","#660066"]},{dx:1,cs:["#336600","#009900","#66FF33","#99FF66","#CCFF99","#FFFFCC","#FFCCCC","#FF99CC","#FF66CC","#FF33CC","#CC0099","#993399"]},{dx:2,cs:["#333300","#669900","#99FF33","#CCFF66","#FFFF99","#FFCC99","#FF9999","#FF6699","#FF3399","#CC3399","#990099"]},{dx:3,cs:["#666633","#99CC00","#CCFF33","#FFFF66","#FFCC66","#FF9966","#FF6666","#FF0066","#CC6699","#993366"]},{dx:4,cs:["#999966","#CCCC00","#FFFF00","#FFCC00","#FF9933","#FF6600","#FF5050","#CC0066","#660033"]},{dx:5,cs:["#996633","#CC9900","#FF9900","#CC6600","#FF3300","#FF0000","#CC0000","#990033"]},{dx:6,cs:["#663300","#996600","#CC3300","#993300","#990000","#800000","#993333"]}],((n,e)=>{Ve(n.cs,((r,i)=>{let l={x:(t+0)*i+n.dx*(t/2),y:(o+0)*e,color:r};Ao(r)&&a.push(l)}))}));let l=ng(Io(a,"x")),s=kv(Io(a,"x")),c=ng(Io(a,"y")),d=kv(Io(a,"y"));return s+=t+2,d+=e+1,{cpgs:i,colors:a,xmin:l,xmax:s,ymin:c,ymax:d}}(18);return{valueTrans:null,cpgs:n.cpgs,colors:n.colors,xmin:n.xmin,xmax:n.xmax,ymin:n.ymin,ymax:n.ymax,pick:null}},computed:{changeValue:function(){return this.valueTrans=Qi(this.value),""},changePick:function(){let n=this,e=null;return Ve(n.colors,(t=>{n.jdColor2(t.color,n.valueTrans)&&(e=t)})),n.pick=e,""},width:function(){return this.size},height:function(){return this.width/10*9}},methods:{jdColor2:function(n,e){return pc.toRgbString(n)===pc.toRgbString(e)},ckColor:function(n){this.valueTrans=n.color,this.$emit("input",n.color)}}};const kw=yw;var xw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; width:"+n.width+"px; height:"+n.height+"px;",attrs:{changeValue:n.changeValue,changePick:n.changePick}},[t("div",{staticStyle:{display:"flex"}},[t("svg",{attrs:{viewBox:"0 0 "+n.xmax+" "+n.ymax,width:n.width,height:n.height,xmlns:"http://www.w3.org/2000/svg"}},[n._l(n.colors,(function(e,o){return t("polygon",{key:"kc-"+o,style:"fill:"+e.color+"; stroke:"+e.color+"; stroke-width:1px; cursor:pointer; user-select:none;",attrs:{transform:"translate("+e.x+", "+e.y+")",points:n.cpgs},on:{click:function(t){return n.ckColor(e)}}})})),n._v(" "),n.pick?[t("polygon",{style:"fill:transparent; stroke:#000; stroke-width:4px; cursor:pointer; user-select:none;",attrs:{transform:"translate("+n.pick.x+", "+n.pick.y+")",points:n.cpgs},on:{click:function(e){return n.ckColor(n.pick)}}}),n._v(" "),t("polygon",{style:"fill:transparent; stroke:#fff; stroke-width:2px; cursor:pointer; user-select:none;",attrs:{transform:"translate("+n.pick.x+", "+n.pick.y+")",points:n.cpgs},on:{click:function(e){return n.ckColor(n.pick)}}})]:n._e()],2)])])};xw._withStripped=!0;const Cw=wa({render:xw,staticRenderFns:[]},(function(n){n&&n("data-v-5129771d_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickHexagon.vue"},media:void 0})}),kw,"data-v-5129771d",false,undefined,!1,_a,void 0,void 0);const Sw={components:{demolink:iu,WColorPickHexagon:Cw},props:{},data:function(){return{WColorPickHexagon:{colorPick:"#FF6600"},actions:[]}},methods:{}};var ww=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hexagon",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHexagon.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHexagon.colorPick))])]),n._v(" "),t("w-color-pick-hexagon",{model:{value:n.WColorPickHexagon.colorPick,callback:function(e){n.$set(n.WColorPickHexagon,"colorPick",e)},expression:"WColorPickHexagon.colorPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hexagon",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHexagon.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHexagon.colorPick))])]),n._v(" "),t("w-color-pick-hexagon",{attrs:{size:150},model:{value:n.WColorPickHexagon.colorPick,callback:function(e){n.$set(n.WColorPickHexagon,"colorPick",e)},expression:"WColorPickHexagon.colorPick"}})],1)])])};ww._withStripped=!0;const Ww=wa({render:ww,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-hexagon")])])}]},(function(n){n&&n("data-v-33799eae_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickHexagon.vue"},media:void 0})}),Sw,"data-v-33799eae",false,undefined,!1,_a,void 0,void 0);var _w={components:{},props:{value:{type:String,default:"#FFFFFF"},colorLeft:{type:String,default:"#FFFFFF"},colorRight:{type:String,default:"#000000"},colorNum:{type:Number,default:10},width:{type:Number,default:200},height:{type:Number,default:20}},data:function(){return{aimg:"data:image/svg+xml;base64,ICAgICAgICAgICAgICAgIDxzdmcgdmlld0JveD0iMCAwIDEwIDEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNkZGQiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmYiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjUiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmYiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNkZGQiIC8+DQogICAgICAgICAgICAgICAgPC9zdmc+",valueTrans:null,colorLeftTrans:null,colorRightTrans:null,s:20,pick:null}},computed:{changeValue:function(){let n=this;return n.valueTrans=Qi(n.value),n.colorLeftTrans=Qi(n.colorLeft),n.colorRightTrans=Qi(n.colorRight),""},colors:function(){let n=this,e={0:n.colorLeftTrans,1:n.colorRightTrans},t=pc.interp(e),o=[];for(let e=0;e<n.colorNum;e++){let r=e/Math.max(n.colorNum-1,1),i=t(r);o.push({r:r,x:e*n.s,y:0,color:i})}return o},changePick:function(){let n=this,e=null;return Ve(n.colors,(t=>{n.jdColor2(t.color,n.valueTrans)&&(e=t)})),n.pick=e,""}},methods:{jdColor2:function(n,e){return pc.toRgbString(n)===pc.toRgbString(e)},ckColor:function(n){this.valueTrans=n.color,this.$emit("input",n.color)}}};const Iw=_w;var Tw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; width:"+n.width+"px; height:"+n.height+"px;",attrs:{changeValue:n.changeValue,changePick:n.changePick}},[t("div",{style:"position:relative; width:"+n.width+"px; height:"+n.height+"px;"},[t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            background-image: url("+n.aimg+");\n            background-repeat:repeat;\n        "}),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n        "},[t("div",{staticStyle:{display:"flex"}},[t("svg",{attrs:{viewBox:"0 0 "+n.colors.length*n.s+" "+n.s,width:n.width,height:n.height,preserveAspectRatio:"none",xmlns:"http://www.w3.org/2000/svg"}},[n._l(n.colors,(function(e,o){return t("rect",{key:"kc-"+o,style:"fill:"+e.color+"; stroke-width:0px; cursor:pointer; user-select:none;",attrs:{x:e.x,y:e.y,width:n.s,height:n.s},on:{click:function(t){return n.ckColor(e)}}})})),n._v(" "),n.pick?[t("rect",{style:"fill:transparent; stroke:#000; stroke-width:1px; cursor:pointer; user-select:none;",attrs:{x:n.pick.x,y:n.pick.y,width:n.s,height:n.s}}),n._v(" "),t("rect",{style:"fill:transparent; stroke:#fff; stroke-width:2px; cursor:pointer; user-select:none;",attrs:{x:n.pick.x+2,y:n.pick.y+2,width:n.s-4,height:n.s-4}})]:n._e()],2)])])])])};Tw._withStripped=!0;const Aw=wa({render:Tw,staticRenderFns:[]},(function(n){n&&n("data-v-00439135_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickStripe.vue"},media:void 0})}),Iw,"data-v-00439135",false,undefined,!1,_a,void 0,void 0);var Bw={components:{WColorPickHexagon:Cw,WColorPickStripe:Aw},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200},space:{type:Number,default:5}},data:function(){return{valueTrans:null}},computed:{changeValue:function(){return this.valueTrans=Qi(this.value),""},hexagonSize:function(){return this.size},hexagonWidth:function(){return this.size},hexagonHeight:function(){return this.hexagonWidth/10*9},stripeWidth:function(){return this.size},stripeHeight:function(){return this.stripeWidth/10},width:function(){return this.size},height:function(){let n=this;return n.hexagonHeight+n.space+n.stripeHeight}},methods:{ckColor:function(n){n=(n=pc.toHexString(n)).toUpperCase(),this.valueTrans=n,this.$emit("input",n)}}};const Hw=Bw;var Pw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; width:"+n.width+"px; height:"+n.height+"px;",attrs:{changeValue:n.changeValue}},[t("div",{staticStyle:{display:"flex"}},[t("WColorPickHexagon",{attrs:{size:n.hexagonSize,value:n.valueTrans},on:{input:n.ckColor}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{staticStyle:{display:"flex"}},[t("WColorPickStripe",{attrs:{width:n.stripeWidth,height:n.stripeHeight,colorNum:10,value:n.valueTrans},on:{input:n.ckColor}})],1)])};Pw._withStripped=!0;const Fw=wa({render:Pw,staticRenderFns:[]},(function(n){n&&n("data-v-6e058096_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickHexagonGray.vue"},media:void 0})}),Hw,"data-v-6e058096",false,undefined,!1,_a,void 0,void 0);const Lw={components:{demolink:iu,WColorPickHexagonGray:Fw},props:{},data:function(){return{WColorPickHexagonGray:{colorPick:"#FF6600"},actions:[]}},methods:{}};var jw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hexagon-gray",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHexagonGray.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHexagonGray.colorPick))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-pick-hexagon-gray",{model:{value:n.WColorPickHexagonGray.colorPick,callback:function(e){n.$set(n.WColorPickHexagonGray,"colorPick",e)},expression:"WColorPickHexagonGray.colorPick"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hexagon-gray",casename:"space"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHexagonGray.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHexagonGray.colorPick))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-pick-hexagon-gray",{attrs:{space:15},model:{value:n.WColorPickHexagonGray.colorPick,callback:function(e){n.$set(n.WColorPickHexagonGray,"colorPick",e)},expression:"WColorPickHexagonGray.colorPick"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hexagon-gray",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHexagonGray.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHexagonGray.colorPick))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-pick-hexagon-gray",{attrs:{size:150},model:{value:n.WColorPickHexagonGray.colorPick,callback:function(e){n.$set(n.WColorPickHexagonGray,"colorPick",e)},expression:"WColorPickHexagonGray.colorPick"}})],1)])],1)])])};jw._withStripped=!0;const Rw=wa({render:jw,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-hexagon-gray")])])}]},(function(n){n&&n("data-v-a4514172_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickHexagonGray.vue"},media:void 0})}),Lw,"data-v-a4514172",false,undefined,!1,_a,void 0,void 0);var Dw={components:{},props:{value:{type:String,default:"#FFFFFF"},color:{type:String,default:"#FFFFFF"},colorLeftTop:{type:String,default:"#FFFFFF"},colorBottom:{type:String,default:"#000000"},width:{type:Number,default:200},height:{type:Number,default:200},cursorSize:{type:Number,default:14}},data:function(){return{valueTrans:"#fff",colorTrans:"#fff",colorLeftTopTrans:"#fff",colorBottomTrans:"#fff",curMousedown:!1,curLocLeft:0,curLocTop:0}},mounted:function(){let n=this;n.windowMousemove=e=>{n.curMousedown&&n.updateCurLocByEvent(e)},window.addEventListener("mousemove",n.windowMousemove,!1),n.windowMouseup=e=>{n.curMousedown=!1},window.addEventListener("mouseup",n.windowMouseup,!1)},beforeDestroy:function(){window.removeEventListener("mousemove",this.windowMousemove,!1),window.removeEventListener("mouseup",this.windowMouseup,!1)},computed:{changeParams:function(){let n=this;n.valueTrans=Qi(n.value);let e=Qi(n.color);return e={h:pc.toHsv(e).h,s:1,v:1},e=pc.toHexString(e),n.colorTrans=e,n.colorLeftTopTrans=Qi(n.colorLeftTop),n.colorBottomTrans=Qi(n.colorBottom),n.updateCurLocByValue(),""},changeColor:function(){return this.updateColor(this.color),""}},methods:{updateCurLocByEvent:function(n){let e=this,t=e.$el.getBoundingClientRect(),o=n.clientX-t.left,r=n.clientY-t.top;o=Math.min(Math.max(o,0),e.width-1),r=Math.min(Math.max(r,0),e.height-1),e.curLocLeft=o,e.curLocTop=r,e.updateColor()},updateCurLocByValue:function(){let n=this,e=pc.toHsv(n.valueTrans),t=e.s*(n.width-1),o=(1-e.v)*(n.height-1),r=pc.toHsv(n.colorTrans);e.h===r.h&&(n.curLocLeft=t,n.curLocTop=o)},updateColor:function(){let n=this,e=n.width-1,t=0;e-0>0&&(t=(n.curLocLeft-0)/(e-0));let o,r,i,a=n.height-1,l=0;a-0>0&&(l=(n.curLocTop-0)/(a-0)),o=n.colorTrans,r=n.colorLeftTopTrans,i=pc.mix(o,t,r,1-t,"toRgbString"),o=i,r=n.colorBottomTrans,i=pc.mix(o,1-l,r,l,"toHexString"),i=i.toUpperCase(),n.$emit("input",i)},mousedownCur:function(n){this.curMousedown=!0,this.updateCurLocByEvent(n)}}};const zw=Dw;var Vw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block;",attrs:{changeParams:n.changeParams,changeColor:n.changeColor}},[t("div",{style:"position:relative; width:"+n.width+"px; height:"+n.height+"px;"},[t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            background:linear-gradient(to right, "+n.colorLeftTop+", "+n.colorTrans+");\n        "}),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            background:linear-gradient(to top, "+n.colorBottom+", transparent);\n        "}),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2)-1)+"px; top:"+(n.curLocTop-Math.floor(n.cursorSize/2)-1)+"px;\n            width:"+(n.cursorSize+2)+"px; height:"+(n.cursorSize+2)+"px;\n            background:transparent;\n            border-radius:50%;\n            border:1px solid #666;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2))+"px; top:"+(n.curLocTop-Math.floor(n.cursorSize/2))+"px;\n            width:"+n.cursorSize+"px; height:"+n.cursorSize+"px;\n            background:transparent;\n            border-radius:50%;\n            border:1px solid #fff;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}})])])};Vw._withStripped=!0;const Zw=wa({render:Vw,staticRenderFns:[]},(function(n){n&&n("data-v-fd9322ee_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickHsv.vue"},media:void 0})}),zw,"data-v-fd9322ee",false,undefined,!1,_a,void 0,void 0);const $w={components:{demolink:iu,WColorPickHsv:Zw},props:{},data:function(){return{WColorPickHsv:{colorPick1:"#FF9800",colorPanel1:"#FF9800",colorPick2:"#B35977",colorPanel2:"#930031"},actions:[]}},methods:{}};var Gw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hsv",casename:"default"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Pick:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPick1))])]),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Corner:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPanel1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPanel1))])]),n._v(" "),t("w-color-pick-hsv",{attrs:{color:n.WColorPickHsv.colorPanel1},model:{value:n.WColorPickHsv.colorPick1,callback:function(e){n.$set(n.WColorPickHsv,"colorPick1",e)},expression:"WColorPickHsv.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hsv",casename:"color"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Pick:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPick2))])]),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Corner:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPanel2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPanel2))])]),n._v(" "),t("w-color-pick-hsv",{attrs:{color:n.WColorPickHsv.colorPanel2},model:{value:n.WColorPickHsv.colorPick2,callback:function(e){n.$set(n.WColorPickHsv,"colorPick2",e)},expression:"WColorPickHsv.colorPick2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hsv",casename:"cursorSize"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Pick:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPick1))])]),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Corner:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPanel1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPanel1))])]),n._v(" "),t("w-color-pick-hsv",{attrs:{color:n.WColorPickHsv.colorPanel1,cursorSize:10},model:{value:n.WColorPickHsv.colorPick1,callback:function(e){n.$set(n.WColorPickHsv,"colorPick1",e)},expression:"WColorPickHsv.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hsv",casename:"width & height"}}),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Pick:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPick1))])]),n._v(" "),t("div",{staticStyle:{"padding-bottom":"5px"}},[t("div",{style:"display:inline-block; vertical-align:middle; width:50px; font-size:0.8rem;"},[n._v("Corner:")]),n._v(" "),t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHsv.colorPanel1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHsv.colorPanel1))])]),n._v(" "),t("w-color-pick-hsv",{attrs:{color:n.WColorPickHsv.colorPanel1,width:150,height:150},model:{value:n.WColorPickHsv.colorPick1,callback:function(e){n.$set(n.WColorPickHsv,"colorPick1",e)},expression:"WColorPickHsv.colorPick1"}})],1)])])};Gw._withStripped=!0;const Ew=wa({render:Gw,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-hsv")])])}]},(function(n){n&&n("data-v-4498ba40_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickHsv.vue"},media:void 0})}),$w,"data-v-4498ba40",false,undefined,!1,_a,void 0,void 0);var Xw={components:{},props:{value:{type:String,default:"#FF0000"},width:{type:Number,default:200},height:{type:Number,default:20},cursorSize:{type:Number,default:7}},data:function(){return{valueTrans:"#fff",curMousedown:!1,curLocLeft:0}},mounted:function(){let n=this;n.plotBackground(),n.windowMousemove=e=>{n.curMousedown&&n.updateCurLocByEvent(e)},window.addEventListener("mousemove",n.windowMousemove,!1),n.windowMouseup=e=>{n.curMousedown=!1},window.addEventListener("mouseup",n.windowMouseup,!1)},beforeDestroy:function(){window.removeEventListener("mousemove",this.windowMousemove,!1),window.removeEventListener("mouseup",this.windowMouseup,!1)},computed:{changeValue:function(){let n=this;return n.valueTrans=Qi(n.value),n.updateCurLocByValue(),""}},methods:{plotBackground:function(){let n=this;(async function(){await Nu((()=>sa(n.$refs.cvs)));let e=n.$refs.cvs;e.width=n.width,e.height=n.height;let t=e.getContext("2d"),o=n.width-1;for(let e=0;e<=o;e++){let r={h:e/o*360,s:1,v:1};r=pc.toHexString(r),t.fillStyle=r,t.fillRect(e,0,1,n.height)}})().catch((n=>{console.log(n)}))},updateCurLocByEvent:function(n){let e=this,t=e.$el.getBoundingClientRect(),o=n.clientX-t.left;o=Math.min(Math.max(o,0),e.width-1),e.curLocLeft=o,e.updateColor()},updateCurLocByValue:function(){let n=this,e=pc.toHsv(n.valueTrans).h/360*(n.width-1);n.curLocLeft=e},updateColor:function(){let n=this,e=n.width-1,t=0;e-0-1>0&&(t=(n.curLocLeft-0)/(e-0));let o={h:360*t,s:1,v:1};o=pc.toHexString(o),o=o.toUpperCase(),n.$emit("input",o)},mousedownCur:function(n){this.curMousedown=!0,this.updateCurLocByEvent(n)}}};const Nw=Xw;var Mw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block;",attrs:{changeValue:n.changeValue}},[t("div",{style:"position:relative; width:"+n.width+"px; height:"+n.height+"px;"},[t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            overflow:hidden;\n        "},[t("div",{staticStyle:{display:"flex"}},[t("canvas",{ref:"cvs",style:"width:"+n.width+"px; height:"+n.height+"px;"})])]),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2)-1)+"px; top:-1px;\n            width:"+(n.cursorSize+2)+"px; height:"+(n.height+2)+"px;\n            background:transparent;\n            border:1px solid #666;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2))+"px; top:0px;\n            width:"+n.cursorSize+"px; height:"+n.height+"px;\n            background:transparent;\n            border:1px solid #fff;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}})])])};Mw._withStripped=!0;const Ow=wa({render:Mw,staticRenderFns:[]},(function(n){n&&n("data-v-9d7f91a6_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickHue.vue"},media:void 0})}),Nw,"data-v-9d7f91a6",false,undefined,!1,_a,void 0,void 0);const Kw={components:{demolink:iu,WColorPickHue:Ow},props:{},data:function(){return{WColorPickHue:{colorPick:"#FF9800"},actions:[]}},methods:{}};var Yw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hue",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHue.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHue.colorPick))])]),n._v(" "),t("w-color-pick-hue",{model:{value:n.WColorPickHue.colorPick,callback:function(e){n.$set(n.WColorPickHue,"colorPick",e)},expression:"WColorPickHue.colorPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hue",casename:"cursorSize"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHue.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHue.colorPick))])]),n._v(" "),t("w-color-pick-hue",{attrs:{cursorSize:5},model:{value:n.WColorPickHue.colorPick,callback:function(e){n.$set(n.WColorPickHue,"colorPick",e)},expression:"WColorPickHue.colorPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-hue",casename:"width & height"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickHue.colorPick+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickHue.colorPick))])]),n._v(" "),t("w-color-pick-hue",{attrs:{width:150,height:15},model:{value:n.WColorPickHue.colorPick,callback:function(e){n.$set(n.WColorPickHue,"colorPick",e)},expression:"WColorPickHue.colorPick"}})],1)])])};Yw._withStripped=!0;const Jw=wa({render:Yw,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-hue")])])}]},(function(n){n&&n("data-v-159b3516_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickHue.vue"},media:void 0})}),Kw,"data-v-159b3516",false,undefined,!1,_a,void 0,void 0);const Uw={components:{},props:{value:{type:Number,default:1},color:{type:String,default:"#000000"},width:{type:Number,default:200},height:{type:Number,default:20},cursorSize:{type:Number,default:7}},data:function(){return{aimg:"data:image/svg+xml;base64,ICAgICAgICAgICAgICAgIDxzdmcgdmlld0JveD0iMCAwIDEwIDEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNkZGQiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmYiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjUiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNmZmYiIC8+DQogICAgICAgICAgICAgICAgICAgIDxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiIGZpbGw9IiNkZGQiIC8+DQogICAgICAgICAgICAgICAgPC9zdmc+",valueTrans:1,colorTrans:"#000",curMousedown:!1,curLocLeft:0}},mounted:function(){let n=this;n.windowMousemove=e=>{n.curMousedown&&n.updateCurLocByEvent(e)},window.addEventListener("mousemove",n.windowMousemove,!1),n.windowMouseup=e=>{n.curMousedown=!1},window.addEventListener("mouseup",n.windowMouseup,!1)},beforeDestroy:function(){window.removeEventListener("mousemove",this.windowMousemove,!1),window.removeEventListener("mouseup",this.windowMouseup,!1)},computed:{changeValue:function(){let n=this;return n.valueTrans=n.value,n.updateCurLocByValue(),""},changeColor:function(){return this.colorTrans=Qi(this.color),""}},methods:{updateCurLocByEvent:function(n){let e=this,t=e.$el.getBoundingClientRect(),o=n.clientX-t.left;o=Math.min(Math.max(o,0),e.width-1),e.curLocLeft=o,e.updateAlpha()},updateCurLocByValue:function(){let n=this,e=n.valueTrans*(n.width-1);n.curLocLeft=e},updateAlpha:function(){let n=this,e=n.width-1,t=0;e-0-1>0&&(t=(n.curLocLeft-0)/(e-0));let o=t;n.$emit("input",o)},mousedownCur:function(n){this.curMousedown=!0,this.updateCurLocByEvent(n)}}};var Qw=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block;",attrs:{changeValue:n.changeValue,changeColor:n.changeColor}},[t("div",{style:"position:relative; width:"+n.width+"px; height:"+n.height+"px;"},[t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            background-image: url("+n.aimg+");\n            background-repeat:repeat;\n        "},[n._e()]),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            background:linear-gradient(to left, "+n.colorTrans+", transparent);\n        "}),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2)-1)+"px; top:-1px;\n            width:"+(n.cursorSize+2)+"px; height:"+(n.height+2)+"px;\n            background:transparent;\n            border:1px solid #666;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:"+(n.curLocLeft-Math.floor(n.cursorSize/2))+"px; top:0px;\n            width:"+n.cursorSize+"px; height:"+n.height+"px;\n            background:transparent;\n            border:1px solid #fff;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}}),n._v(" "),t("div",{style:"\n            position:absolute; left:0px; top:0px;\n            width:"+n.width+"px; height:"+n.height+"px;\n            cursor:pointer;\n            user-select:none;\n            _pointer-events:none;\n            ",on:{mousedown:n.mousedownCur}})])])};Qw._withStripped=!0;const qw=wa({render:Qw,staticRenderFns:[]},(function(n){n&&n("data-v-5c96a8b6_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorPickAlpha.vue"},media:void 0})}),Uw,"data-v-5c96a8b6",false,undefined,!1,_a,void 0,void 0);const nW={components:{demolink:iu,WColorPickAlpha:qw},props:{},data:function(){return{WColorPickAlpha:{alphaPick:.5,colorPanel1:"#FF9800",colorPanel2:"#0075C3",colorPanel3:"#930031",colorPanel4:"#95A300"},actions:[]}},methods:{}};var eW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-alpha",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v("Alpha:")]),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickAlpha.alphaPick.toFixed(2)))])]),n._v(" "),t("w-color-pick-alpha",{attrs:{color:n.WColorPickAlpha.colorPanel1},model:{value:n.WColorPickAlpha.alphaPick,callback:function(e){n.$set(n.WColorPickAlpha,"alphaPick",e)},expression:"WColorPickAlpha.alphaPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-alpha",casename:"color"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v("Alpha:")]),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickAlpha.alphaPick.toFixed(2)))])]),n._v(" "),t("w-color-pick-alpha",{attrs:{color:n.WColorPickAlpha.colorPanel2},model:{value:n.WColorPickAlpha.alphaPick,callback:function(e){n.$set(n.WColorPickAlpha,"alphaPick",e)},expression:"WColorPickAlpha.alphaPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-alpha",casename:"cursorSize"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v("Alpha:")]),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickAlpha.alphaPick.toFixed(2)))])]),n._v(" "),t("w-color-pick-alpha",{attrs:{color:n.WColorPickAlpha.colorPanel3,cursorSize:5},model:{value:n.WColorPickAlpha.alphaPick,callback:function(e){n.$set(n.WColorPickAlpha,"alphaPick",e)},expression:"WColorPickAlpha.alphaPick"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-alpha",casename:"width & height"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v("Alpha:")]),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickAlpha.alphaPick.toFixed(2)))])]),n._v(" "),t("w-color-pick-alpha",{attrs:{color:n.WColorPickAlpha.colorPanel4,width:150,height:15},model:{value:n.WColorPickAlpha.alphaPick,callback:function(e){n.$set(n.WColorPickAlpha,"alphaPick",e)},expression:"WColorPickAlpha.alphaPick"}})],1)])])};eW._withStripped=!0;const tW=wa({render:eW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-alpha")])])}]},(function(n){n&&n("data-v-413b1442_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickAlpha.vue"},media:void 0})}),nW,"data-v-413b1442",false,undefined,!1,_a,void 0,void 0);const oW={components:{demolink:iu,WColorPickStripe:Aw},props:{},data:function(){return{WColorPickStripe:{colorPick1:"rgb(255, 255, 255, 1)",colorPick2:"rgba(68, 23, 255, 0.533)",colorPick3:"rgb(208, 141, 208, 1)"},actions:[]}},methods:{}};var rW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-stripe",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickStripe.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickStripe.colorPick1))])]),n._v(" "),t("w-color-pick-stripe",{model:{value:n.WColorPickStripe.colorPick1,callback:function(e){n.$set(n.WColorPickStripe,"colorPick1",e)},expression:"WColorPickStripe.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-stripe",casename:"width & height"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickStripe.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickStripe.colorPick1))])]),n._v(" "),t("w-color-pick-stripe",{attrs:{width:150,height:15},model:{value:n.WColorPickStripe.colorPick1,callback:function(e){n.$set(n.WColorPickStripe,"colorPick1",e)},expression:"WColorPickStripe.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-stripe",casename:"colorLeft & colorRight"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickStripe.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickStripe.colorPick2))])]),n._v(" "),t("w-color-pick-stripe",{attrs:{colorLeft:"rgba(153, 51, 255, 0.2)",colorRight:"rgba(0, 0, 255, 0.8)"},model:{value:n.WColorPickStripe.colorPick2,callback:function(e){n.$set(n.WColorPickStripe,"colorPick2",e)},expression:"WColorPickStripe.colorPick2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-pick-stripe",casename:"colorNum"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorPickStripe.colorPick3+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorPickStripe.colorPick3))])]),n._v(" "),t("w-color-pick-stripe",{attrs:{colorLeft:"#FFCCFF",colorRight:"#660066",width:280,colorNum:14},model:{value:n.WColorPickStripe.colorPick3,callback:function(e){n.$set(n.WColorPickStripe,"colorPick3",e)},expression:"WColorPickStripe.colorPick3"}})],1)])])};rW._withStripped=!0;const iW=wa({render:rW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-pick-stripe")])])}]},(function(n){n&&n("data-v-6cc15c3f_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorPickStripe.vue"},media:void 0})}),oW,"data-v-6cc15c3f",false,undefined,!1,_a,void 0,void 0);var aW={components:{WColorPickHexagonGray:Fw,WColorPickAlpha:qw},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200},spaceGray:{type:Number,default:5},spaceAlpha:{type:Number,default:8}},data:function(){return{colorPure:"#fff",colorAlpha:1,pick:null}},computed:{changeValue:function(){let n=this,e=Qi(n.value),t=pc.toRgba(e),o={r:t.r,g:t.g,b:t.b},r=pc.toRgbString(o),i=t.a;return n.colorPure=r,n.colorAlpha=i,""},hexagonGrayWidth:function(){return this.size},hexagonGrayHeight:function(){return this.hexagonGrayWidth+this.spaceGray},alphaWidth:function(){return this.size},alphaHeight:function(){return this.alphaWidth/10},width:function(){return this.size},height:function(){let n=this;return n.hexagonGrayHeight+n.spaceAlpha+n.alphaHeight}},methods:{updateColor:function(n,e,t){let o=pc.toRgba(n);o.a=e;let r=pc.toRgbaString(o);this.$emit("input",r)}}};const lW=aW;var sW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; width:"+n.width+"px; height:"+n.height+"px;",attrs:{changeValue:n.changeValue}},[t("div",{staticStyle:{display:"flex"}},[t("WColorPickHexagonGray",{attrs:{size:n.size,space:n.spaceGray,value:n.colorPure},on:{input:function(e){n.colorPure=e,n.updateColor(n.colorPure,n.colorAlpha,"hexagonGray")}}})],1),n._v(" "),t("div",{style:"height:"+n.spaceAlpha+"px;"}),n._v(" "),t("div",{staticStyle:{display:"flex"}},[t("WColorPickAlpha",{attrs:{width:n.alphaWidth,height:n.alphaHeight,cursorSize:7,value:n.colorAlpha,color:n.colorPure},on:{input:function(e){n.colorAlpha=e,n.updateColor(n.colorPure,n.colorAlpha,"alpha")}}})],1)])};sW._withStripped=!0;const cW=wa({render:sW,staticRenderFns:[]},(function(n){n&&n("data-v-58cd89e6_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorSelectPanelBlock.vue"},media:void 0})}),lW,"data-v-58cd89e6",false,undefined,!1,_a,void 0,void 0);const dW={components:{demolink:iu,WColorSelectPanelBlock:cW},props:{},data:function(){return{WColorSelectPanelBlock:{colorPick1:"rgba(255, 102, 0, 1)",colorPick2:"rgba(102, 0, 255, 0.533)",colorPick3:"rgba(153, 255, 51, 0.72)"},actions:[]}},methods:{}};var uW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-block",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelBlock.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelBlock.colorPick1))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-block",{model:{value:n.WColorSelectPanelBlock.colorPick1,callback:function(e){n.$set(n.WColorSelectPanelBlock,"colorPick1",e)},expression:"WColorSelectPanelBlock.colorPick1"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-block",casename:"spaceGray & spaceAlpha"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelBlock.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelBlock.colorPick2))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-block",{attrs:{spaceGray:15,spaceAlpha:15},model:{value:n.WColorSelectPanelBlock.colorPick2,callback:function(e){n.$set(n.WColorSelectPanelBlock,"colorPick2",e)},expression:"WColorSelectPanelBlock.colorPick2"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-block",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelBlock.colorPick3+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelBlock.colorPick3))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-block",{attrs:{size:150},model:{value:n.WColorSelectPanelBlock.colorPick3,callback:function(e){n.$set(n.WColorSelectPanelBlock,"colorPick3",e)},expression:"WColorSelectPanelBlock.colorPick3"}})],1)])],1)])])};uW._withStripped=!0;const pW=wa({render:uW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-select-panel-block")])])}]},(function(n){n&&n("data-v-6bd3b615_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorSelectPanelBlock.vue"},media:void 0})}),dW,"data-v-6bd3b615",false,undefined,!1,_a,void 0,void 0);var mW={components:{WColorPickHsv:Zw,WColorPickHue:Ow,WColorPickAlpha:qw},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200},space:{type:Number,default:10}},data:function(){return{lock:!1,valueTrans:null,colorHue:"#f00",colorPure:"#fff",colorAlpha:1}},computed:{changeParams:function(){let n=this;if(n.value===n.valueTrans)return;if(n.lock)return;n.lock=!0,n.valueTrans=Qi(n.value);let e=pc.toHsva(n.value),t="#f00";{let n={h:e.h,s:1,v:1};t=pc.toHexString(n)}let o="#fff";{let n={h:e.h,s:e.s,v:e.v};o=pc.toHexString(n)}let r=1;return r=e.a,n.colorHue=t,n.colorPure=o,n.colorAlpha=r,""},hsvWidth:function(){return this.size},hsvHeight:function(){return this.hsvWidth},hueWidth:function(){return this.size},hueHeight:function(){return this.hueWidth/10},alphaWidth:function(){return this.size},alphaHeight:function(){return this.alphaWidth/10},width:function(){return this.size},height:function(){let n=this;return n.hsvHeight+n.space+n.hueHeight+n.space+n.alphaHeight}},methods:{updateColor:function(n,e){let t=this;if(t.lock&&"hsv"===e)return void(t.lock=!1);let o=pc.toHsva(t.colorHue),r=pc.toHsva(t.colorPure),i={h:o.h,s:r.s,v:r.v,a:t.colorAlpha};i=pc.toRgbaString(i),t.valueTrans=i,t.$emit("input",i)}}};const vW=mW;var gW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; width:"+n.width+"px; height:"+n.height+"px;",attrs:{changeParams:n.changeParams}},[t("div",{staticStyle:{display:"flex"}},[t("WColorPickHsv",{attrs:{width:n.hsvWidth,height:n.hsvHeight,cursorSize:14,color:n.colorHue},on:{input:function(e){n.updateColor(e,"hsv")}},model:{value:n.colorPure,callback:function(e){n.colorPure=e},expression:"colorPure"}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{staticStyle:{display:"flex"}},[t("WColorPickHue",{attrs:{width:n.hueWidth,height:n.hueHeight,cursorSize:7},on:{input:function(e){n.updateColor(e,"hue")}},model:{value:n.colorHue,callback:function(e){n.colorHue=e},expression:"colorHue"}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{staticStyle:{display:"flex"}},[t("WColorPickAlpha",{attrs:{width:n.alphaWidth,height:n.alphaHeight,colorNum:10,color:n.colorPure},on:{input:function(e){n.updateColor(e,"alpha")}},model:{value:n.colorAlpha,callback:function(e){n.colorAlpha=e},expression:"colorAlpha"}})],1)])};gW._withStripped=!0;const hW=wa({render:gW,staticRenderFns:[]},(function(n){n&&n("data-v-d9a3578a_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorSelectPanelHsva.vue"},media:void 0})}),vW,"data-v-d9a3578a",false,undefined,!1,_a,void 0,void 0);const fW={components:{demolink:iu,WColorSelectPanelHsva:hW},props:{},data:function(){return{WColorSelectPanelHsva:{colorPick1:"rgba(255, 50, 100, 0.5)",colorPick2:"rgba(81, 188, 108, 0.613)",colorPick3:"rgba(100, 50, 255, 0.75)"},actions:[]}},methods:{}};var bW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-hsva",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelHsva.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelHsva.colorPick1))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-hsva",{model:{value:n.WColorSelectPanelHsva.colorPick1,callback:function(e){n.$set(n.WColorSelectPanelHsva,"colorPick1",e)},expression:"WColorSelectPanelHsva.colorPick1"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-hsva",casename:"space"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelHsva.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelHsva.colorPick2))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-hsva",{attrs:{space:15},model:{value:n.WColorSelectPanelHsva.colorPick2,callback:function(e){n.$set(n.WColorSelectPanelHsva,"colorPick2",e)},expression:"WColorSelectPanelHsva.colorPick2"}})],1)])],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel-hsva",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanelHsva.colorPick3+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanelHsva.colorPick3))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"10px",border:"1px solid #ddd"}},[t("div",{staticStyle:{display:"flex"}},[t("w-color-select-panel-hsva",{attrs:{size:150},model:{value:n.WColorSelectPanelHsva.colorPick3,callback:function(e){n.$set(n.WColorSelectPanelHsva,"colorPick3",e)},expression:"WColorSelectPanelHsva.colorPick3"}})],1)])],1)])])};bW._withStripped=!0;const yW=wa({render:bW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-select-panel-hsva")])])}]},(function(n){n&&n("data-v-0a15f52a_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorSelectPanelHsva.vue"},media:void 0})}),fW,"data-v-0a15f52a",false,undefined,!1,_a,void 0,void 0);var kW={components:{WColorSelectPanelBlock:cW,WColorSelectPanelHsva:hW},props:{value:{type:String,default:"#FFFFFF"},type:{type:String,default:"LUMP"},size:{type:Number,default:200},space:{type:Number,default:10},backgroundColor:{type:String,default:"transparent"}},data:function(){return{valueTrans:"#fff",typeTrans:"LUMP"}},computed:{changeValue:function(){return this.valueTrans=Qi(this.value),""},changeType:function(){return this.typeTrans=this.type,""},useBackgroundColor:function(){return Qi(this.backgroundColor)}},methods:{updateColor:function(n,e){this.valueTrans=n,this.$emit("input",n)}}};const xW=kW;var CW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block; background:"+n.useBackgroundColor+";",attrs:{changeValue:n.changeValue,changeType:n.changeType}},[t("div",{style:"padding:"+n.space+"px;"},["LUMP"===n.typeTrans?t("div",{staticStyle:{display:"flex"}},[t("WColorSelectPanelBlock",{attrs:{size:n.size,spaceGray:5,spaceAlpha:8,value:n.valueTrans},on:{input:function(e){n.updateColor(e,"block")}}})],1):n._e(),n._v(" "),"HSVA"===n.typeTrans?t("div",{staticStyle:{display:"flex"}},[t("WColorSelectPanelHsva",{attrs:{_size:"size*0.8875",size:n.size,space:10,value:n.valueTrans},on:{input:function(e){n.updateColor(e,"hsva")}}})],1):n._e()])])};CW._withStripped=!0;const SW=wa({render:CW,staticRenderFns:[]},(function(n){n&&n("data-v-1308475d_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorSelectPanel.vue"},media:void 0})}),xW,"data-v-1308475d",false,undefined,!1,_a,void 0,void 0);const wW={components:{demolink:iu,WInputRadio:qb,WColorSelectPanel:SW},props:{},data:function(){return{WColorSelectPanel:{type:"HSVA",colorPick1:"rgba(255, 255, 255, 1)",colorPick2:"rgba(51, 51, 255, 0.533)",colorPick3:"rgba(51, 204, 204, 0.95)",colorPick4:"rgba(0, 204, 0, 0.874)",colorPick5:"rgba(153, 204, 0, 0.874)"},actions:[]}},methods:{}};var WW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanel.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanel.colorPick1))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",border:"1px solid #ddd"}},[t("w-color-select-panel",{model:{value:n.WColorSelectPanel.colorPick1,callback:function(e){n.$set(n.WColorSelectPanel,"colorPick1",e)},expression:"WColorSelectPanel.colorPick1"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel",casename:"type"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanel.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanel.colorPick2))])]),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("w-input-radio",{attrs:{arrange:"horizontal",paddingStyle:{top:0,right:10,bottom:0,left:0},items:["LUMP","HSVA"]},model:{value:n.WColorSelectPanel.type,callback:function(e){n.$set(n.WColorSelectPanel,"type",e)},expression:"WColorSelectPanel.type"}})],1),n._v(" "),t("div",{staticStyle:{display:"inline-block",border:"1px solid #ddd"}},[t("w-color-select-panel",{attrs:{type:n.WColorSelectPanel.type},model:{value:n.WColorSelectPanel.colorPick2,callback:function(e){n.$set(n.WColorSelectPanel,"colorPick2",e)},expression:"WColorSelectPanel.colorPick2"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanel.colorPick3+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanel.colorPick3))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",border:"1px solid #ddd"}},[t("w-color-select-panel",{attrs:{size:150},model:{value:n.WColorSelectPanel.colorPick3,callback:function(e){n.$set(n.WColorSelectPanel,"colorPick3",e)},expression:"WColorSelectPanel.colorPick3"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel",casename:"space"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanel.colorPick4+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanel.colorPick4))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",border:"1px solid #ddd"}},[t("w-color-select-panel",{attrs:{space:0},model:{value:n.WColorSelectPanel.colorPick4,callback:function(e){n.$set(n.WColorSelectPanel,"colorPick4",e)},expression:"WColorSelectPanel.colorPick4"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-panel",casename:"backgroundColor"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectPanel.colorPick5+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectPanel.colorPick5))])]),n._v(" "),t("div",{staticStyle:{display:"inline-block",padding:"30px",background:"#222"}},[t("w-color-select-panel",{attrs:{backgroundColor:"#111"},model:{value:n.WColorSelectPanel.colorPick5,callback:function(e){n.$set(n.WColorSelectPanel,"colorPick5",e)},expression:"WColorSelectPanel.colorPick5"}})],1)],1)])])};WW._withStripped=!0;const _W=wa({render:WW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-select-panel")])])}]},(function(n){n&&n("data-v-1b12121f_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorSelectPanel.vue"},media:void 0})}),wW,"data-v-1b12121f",false,undefined,!1,_a,void 0,void 0);var IW={components:{WGroupChipRadio:Lu,WPanelLabelItem:Bm,WText:xp,WSlider:af},props:{value:{type:String,default:"#FFFFFF"},size:{type:Number,default:200},borderColor:{type:String,default:"#ddd"},borderColorHover:{type:String,default:"#ccc"},borderColorActive:{type:String,default:"#777"},backgroundColor:{type:String,default:"transparent"},menuBorderRadius:{type:Number,default:4},menuBackgroundColor:{type:String,default:"#fff"},menuBackgroundColorHover:{type:String,default:"#f9f9f9"},menuBackgroundColorActive:{type:String,default:"#f2f2f2"},menuTextColor:{type:String,default:"#444"},menuTextColorHover:{type:String,default:"#222"},menuTextColorActive:{type:String,default:"#000"},menuTextFontSize:{type:String,default:"0.8rem"},inputBorderRadius:{type:Number,default:4},inputBorderColor:{type:String,default:"#ccc"},inputBorderColorHover:{type:String,default:"#b5b5b5"},inputBorderColorActive:{type:String,default:"#aaa"},inputBackgroundColor:{type:String,default:"#fff"},inputBackgroundColorHover:{type:String,default:"#fafafa"},inputBackgroundColorActive:{type:String,default:"#f2f2f2"},inputTextColor:{type:String,default:"#000"},inputTextFontSize:{type:String,default:"0.8rem"},inputTextWidth:{type:Number,default:38},inputTextHeight:{type:Number,default:18},inputLabelWidth:{type:Number,default:12},inputLabelColor:{type:String,default:"#666"},inputLabelFontSize:{type:String,default:"0.8rem"},barProgHeight:{type:Number,default:4},barProgColor:{type:String,default:"#74a4d9"},barProgBackgroundColor:{type:String,default:"#eee"},barSliderSize:{type:Number,default:10},barSliderBackgroundColor:{type:String,default:"#1565C0"},barSliderBackgroundColorHover:{type:String,default:"#1976D2"}},data:function(){return{methods:[{text:"RGBA"},{text:"HSVA"}],methodSelect:{text:"RGBA"},lock:!1,valueTrans:null,r:255,g:255,b:255,h:360,s:1,v:1,a:1,rt:255,gt:255,bt:255,ht:360,st:1,vt:1,at:1}},computed:{changeValue:function(){let n=this;n.valueTrans=Qi(n.value);let e=pc.toRgba(n.valueTrans),t=pc.toHsva(n.valueTrans);return n.r=e.r,n.rt=e.r,n.g=e.g,n.gt=e.g,n.b=e.b,n.bt=e.b,n.a=e.a,n.at=e.a,n.h=t.h,n.ht=t.h,n.s=t.s,n.st=t.s,n.v=t.v,n.vt=t.v,""},sliderWidth:function(){let n=this,e=n.size-n.inputTextWidth-n.inputLabelWidth-13;return e=Math.max(e,0),e},useBorderColor:function(){return Qi(this.borderColor)},useBackgroundColor:function(){return Qi(this.backgroundColor)}},methods:{cki255:function(n){if(!os(n))return 0;let e=n;return(n=ji(n))<0?n=0:n>255&&(n=255),n===ji(e)?e:n},cki360:function(n){if(!os(n))return 0;let e=n;return(n=ji(n))<0?n=0:n>360&&(n=360),n===ji(e)?e:n},ckd1:function(n){if(!pp(n))return 0;let e=n;return(n=Ai(n))<0?n=0:n>1&&(n=1),n===Ai(e)?e:n},updateColorCore:function(){let n=this,e=!1,t=!1;{let t=ji(n.rt);n.r!==t&&(n.r=t,e=!0)}{let t=ji(n.gt);n.g!==t&&(n.g=t,e=!0)}{let t=ji(n.bt);n.b!==t&&(n.b=t,e=!0)}{let t=Ai(n.at);n.a!==t&&(n.a=t,e=!0)}{let e=ji(n.ht);n.h!==e&&(n.h=e,t=!0)}{let e=Ai(n.st);n.s!==e&&(n.s=e,t=!0)}{let e=Ai(n.vt);n.v!==e&&(n.v=e,t=!0)}let o=null;e?o={r:n.r,g:n.g,b:n.b,a:n.a}:t&&(o={h:n.h,s:n.s,v:n.v,a:n.a}),na(o)&&(o=pc.toRgbaString(o),n.valueTrans=o,n.$emit("input",o))},updateColor:function(n,e,t){let o=this;setTimeout((()=>{o.updateColorCore()}),1)}}};const TW=IW;var AW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{style:"display:inline-block;",attrs:{changeValue:n.changeValue}},[t("div",{style:"padding-left:10px; margin-bottom:-1px;"},[t("WGroupChipRadio",{attrs:{items:n.methods,paddingStyle:{v:1,h:6},group:!0,groupBorderRadiusStyle:{top:!0},groupShift:0,borderRadius:n.menuBorderRadius,borderColor:n.borderColor,borderColorHover:n.borderColorHover,borderColorActive:n.borderColorActive,backgroundColor:n.menuBackgroundColor,backgroundColorHover:n.menuBackgroundColorHover,backgroundColorActive:n.menuBackgroundColorActive,textColor:n.menuTextColor,textColorHover:n.menuTextColorHover,textColorActive:n.menuTextColorActive,textFontSize:n.menuTextFontSize,marginStyle:{},shadowActive:!1},model:{value:n.methodSelect,callback:function(e){n.methodSelect=e},expression:"methodSelect"}})],1),n._v(" "),t("div",{style:"padding:10px; border:1px solid "+n.useBorderColor+"; background:"+n.useBackgroundColor+";"},[t("div",{directives:[{name:"show",rawName:"v-show",value:"RGBA"===n.methodSelect.text,expression:"methodSelect.text==='RGBA'"}]},[t("WPanelLabelItem",{attrs:{label:"R",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"r")}},model:{value:n.rt,callback:function(e){n.rt=e},expression:"rt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.r},on:{input:function(e){n.rt=e,n.updateColor(e,"","rs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"G",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"g")}},model:{value:n.gt,callback:function(e){n.gt=e},expression:"gt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.g},on:{input:function(e){n.gt=e,n.updateColor(e,"","gs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"B",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.cki255,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"b")}},model:{value:n.bt,callback:function(e){n.bt=e},expression:"bt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:255,valueStep:1,valueDecimal:0,value:n.b},on:{input:function(e){n.bt=e,n.updateColor(e,"","bs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"A",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"a")}},model:{value:n.at,callback:function(e){n.at=e},expression:"at"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.a},on:{input:function(e){n.at=e,n.updateColor(e,"","as")}}})],1)]},proxy:!0}])})],1),n._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:"HSVA"===n.methodSelect.text,expression:"methodSelect.text==='HSVA'"}]},[t("WPanelLabelItem",{attrs:{label:"H",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.cki360,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"h")}},model:{value:n.ht,callback:function(e){n.ht=e},expression:"ht"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:360,valueStep:1,valueDecimal:0,value:n.h},on:{input:function(e){n.ht=e,n.updateColor(e,"","hs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"S",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"s")}},model:{value:n.st,callback:function(e){n.st=e},expression:"st"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.s},on:{input:function(e){n.st=e,n.updateColor(e,"","ss")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"V",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"v")}},model:{value:n.vt,callback:function(e){n.vt=e},expression:"vt"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.v},on:{input:function(e){n.vt=e,n.updateColor(e,"","bs")}}})],1)]},proxy:!0}])}),n._v(" "),t("div",{staticStyle:{height:"10px"}}),n._v(" "),t("WPanelLabelItem",{attrs:{label:"A",labelFontSize:n.inputLabelFontSize,labelWidth:n.inputLabelWidth,labelColor:n.inputLabelColor},scopedSlots:n._u([{key:"item",fn:function(){return[t("div",{staticStyle:{display:"flex","align-items":"center"}},[t("WText",{style:"width:"+n.inputTextWidth+"px;",attrs:{type:n.ckd1,shadow:!1,bottomLineBorderColor:"transparent",bottomLineBorderColorHover:"transparent",bottomLineBorderColorFocus:"transparent",paddingStyle:{v:0,h:5},iconShiftOuter:-10,borderRadius:n.inputBorderRadius,borderColor:n.inputBorderColor,borderColorHover:n.inputBorderColorHover,borderColorFocus:n.inputBorderColorActive,backgroundColor:n.inputBackgroundColor,backgroundColorHover:n.inputBackgroundColorHover,backgroundColorFocus:n.inputBackgroundColorActive,textColor:n.inputTextColor,textFontSize:n.inputTextFontSize,height:n.inputTextHeight},on:{input:function(e,t){n.updateColor(e,t,"a")}},model:{value:n.at,callback:function(e){n.at=e},expression:"at"}}),n._v(" "),t("div",{staticStyle:{"padding-left":"5px"}}),n._v(" "),t("WSlider",{style:"width:"+n.sliderWidth+"px;",attrs:{progHeight:n.barProgHeight,progColor:n.barProgColor,progBackgroundColor:n.barProgBackgroundColor,sliderSize:n.barSliderSize,sliderBackgroundColor:n.barSliderBackgroundColor,sliderBackgroundColorHover:n.barSliderBackgroundColorHover,valueMin:0,valueMax:1,valueStep:.01,valueDecimal:2,value:n.a},on:{input:function(e){n.at=e,n.updateColor(e,"","as")}}})],1)]},proxy:!0}])})],1)])])};AW._withStripped=!0;const BW=wa({render:AW,staticRenderFns:[]},(function(n){n&&n("data-v-76492b0d_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"WColorSelectInput.vue"},media:void 0})}),TW,"data-v-76492b0d",false,undefined,!1,_a,void 0,void 0);const HW={components:{demolink:iu,WColorSelectInput:BW},props:{},data:function(){return{WColorSelectInput:{colorPick1:"rgba(121, 51, 255, 0.53)",colorPick2:"rgba(121, 51, 255, 0.53)",colorPick3:"rgba(121, 51, 255, 0.53)",colorPick4:"rgba(121, 51, 255, 0.53)",colorPick5:"rgba(121, 51, 255, 0.53)",colorPick6:"rgba(121, 51, 255, 0.53)",colorPick7:"rgba(121, 51, 255, 0.53)",colorPick8:"rgba(121, 51, 255, 0.53)",colorPick9:"rgba(121, 51, 255, 0.53)",colorPick10:"rgba(121, 51, 255, 0.53)",colorPick11:"rgba(121, 51, 255, 0.53)",colorPick12:"rgba(121, 51, 255, 0.53)",colorPick13:"rgba(121, 51, 255, 0.53)",colorPick14:"rgba(121, 51, 255, 0.53)",colorPick15:"rgba(121, 51, 255, 0.53)",colorPick16:"rgba(121, 51, 255, 0.53)",colorPick17:"rgba(121, 51, 255, 0.53)",colorPick18:"rgba(121, 51, 255, 0.53)"},actions:[]}},methods:{}};var PW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"default"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick1+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick1))])]),n._v(" "),t("w-color-select-input",{model:{value:n.WColorSelectInput.colorPick1,callback:function(e){n.$set(n.WColorSelectInput,"colorPick1",e)},expression:"WColorSelectInput.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"size"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick2+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick2))])]),n._v(" "),t("w-color-select-input",{attrs:{size:150},model:{value:n.WColorSelectInput.colorPick2,callback:function(e){n.$set(n.WColorSelectInput,"colorPick2",e)},expression:"WColorSelectInput.colorPick2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"borderColor & borderColorHover & borderColorActive"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick3+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick3))])]),n._v(" "),t("w-color-select-input",{attrs:{borderColor:"#ccc",borderColorHover:"#b2b2b2",borderColorActive:"#999"},model:{value:n.WColorSelectInput.colorPick3,callback:function(e){n.$set(n.WColorSelectInput,"colorPick3",e)},expression:"WColorSelectInput.colorPick3"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"menuBorderRadius"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick4+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick4))])]),n._v(" "),t("w-color-select-input",{attrs:{menuBorderRadius:0},model:{value:n.WColorSelectInput.colorPick4,callback:function(e){n.$set(n.WColorSelectInput,"colorPick4",e)},expression:"WColorSelectInput.colorPick4"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"menuBackgroundColor & menuBackgroundColorHover & menuBackgroundColorActive"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick5+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick5))])]),n._v(" "),t("w-color-select-input",{attrs:{menuBackgroundColor:"#f2f2ff",menuBackgroundColorHover:"#e2e2ee",menuBackgroundColorActive:"#ddf"},model:{value:n.WColorSelectInput.colorPick5,callback:function(e){n.$set(n.WColorSelectInput,"colorPick5",e)},expression:"WColorSelectInput.colorPick5"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"menuTextColor & menuTextColorHover & menuTextColorActive"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick6+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick6))])]),n._v(" "),t("w-color-select-input",{attrs:{menuTextColor:"#666",menuTextColorHover:"#444",menuTextColorActive:"#222"},model:{value:n.WColorSelectInput.colorPick6,callback:function(e){n.$set(n.WColorSelectInput,"colorPick6",e)},expression:"WColorSelectInput.colorPick6"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"menuTextFontSize"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick7+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick7))])]),n._v(" "),t("w-color-select-input",{attrs:{menuTextFontSize:"0.75rem"},model:{value:n.WColorSelectInput.colorPick7,callback:function(e){n.$set(n.WColorSelectInput,"colorPick7",e)},expression:"WColorSelectInput.colorPick7"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputBorderRadius"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick8+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick8))])]),n._v(" "),t("w-color-select-input",{attrs:{inputBorderRadius:0},model:{value:n.WColorSelectInput.colorPick8,callback:function(e){n.$set(n.WColorSelectInput,"colorPick8",e)},expression:"WColorSelectInput.colorPick8"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputBorderColor & inputBorderColorHover & inputBorderColorActive"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick9+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick9))])]),n._v(" "),t("w-color-select-input",{attrs:{inputBorderColor:"#aaa",inputBorderColorHover:"#999",inputBorderColorActive:"#888"},model:{value:n.WColorSelectInput.colorPick9,callback:function(e){n.$set(n.WColorSelectInput,"colorPick9",e)},expression:"WColorSelectInput.colorPick9"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:" inputBackgroundColor & inputBackgroundColorHover & inputBackgroundColorActive"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick10+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick10))])]),n._v(" "),t("w-color-select-input",{attrs:{inputBackgroundColor:"#fff",inputBackgroundColorHover:"#f2f2ff",inputBackgroundColorActive:"#eeeeff"},model:{value:n.WColorSelectInput.colorPick10,callback:function(e){n.$set(n.WColorSelectInput,"colorPick10",e)},expression:"WColorSelectInput.colorPick10"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputTextColor"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick11+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick11))])]),n._v(" "),t("w-color-select-input",{attrs:{inputTextColor:"#329"},model:{value:n.WColorSelectInput.colorPick11,callback:function(e){n.$set(n.WColorSelectInput,"colorPick11",e)},expression:"WColorSelectInput.colorPick11"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputTextFontSize & inputTextWidth & inputTextHeight"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick12+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick12))])]),n._v(" "),t("w-color-select-input",{attrs:{inputTextFontSize:"0.75rem",inputTextWidth:36,inputTextHeight:16},model:{value:n.WColorSelectInput.colorPick12,callback:function(e){n.$set(n.WColorSelectInput,"colorPick12",e)},expression:"WColorSelectInput.colorPick12"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputLabelColor"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick13+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick13))])]),n._v(" "),t("w-color-select-input",{attrs:{inputLabelColor:"#f26"},model:{value:n.WColorSelectInput.colorPick13,callback:function(e){n.$set(n.WColorSelectInput,"colorPick13",e)},expression:"WColorSelectInput.colorPick13"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"inputLabelWidth & inputLabelFontSize"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick14+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick14))])]),n._v(" "),t("w-color-select-input",{attrs:{inputLabelWidth:10,inputLabelFontSize:"0.75rem"},model:{value:n.WColorSelectInput.colorPick14,callback:function(e){n.$set(n.WColorSelectInput,"colorPick14",e)},expression:"WColorSelectInput.colorPick14"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"barProgHeight"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick15+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick15))])]),n._v(" "),t("w-color-select-input",{attrs:{barProgHeight:6},model:{value:n.WColorSelectInput.colorPick15,callback:function(e){n.$set(n.WColorSelectInput,"colorPick15",e)},expression:"WColorSelectInput.colorPick15"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"barProgColor & barProgBackgroundColor & barSliderBackgroundColor & barSliderBackgroundColorHover"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick16+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick16))])]),n._v(" "),t("w-color-select-input",{attrs:{barProgColor:"#F48FB1",barProgBackgroundColor:"#FCE4EC",barSliderBackgroundColor:"#E91E63",barSliderBackgroundColorHover:"#D81B60"},model:{value:n.WColorSelectInput.colorPick16,callback:function(e){n.$set(n.WColorSelectInput,"colorPick16",e)},expression:"WColorSelectInput.colorPick16"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"barSliderSize"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick17+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick17))])]),n._v(" "),t("w-color-select-input",{attrs:{barSliderSize:14},model:{value:n.WColorSelectInput.colorPick17,callback:function(e){n.$set(n.WColorSelectInput,"colorPick17",e)},expression:"WColorSelectInput.colorPick17"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select-input",casename:"menuBorderRadius & borderColor & borderColorHover & borderColorActive & menuBackgroundColor & menuBackgroundColorHover & menuBackgroundColorActive & menuTextColor & menuTextColorHover & menuTextColorActive & menuTextFontSize & inputBorderColor & inputBorderColorHover & inputBorderColorActive & inputBackgroundColor & inputBackgroundColorHover & inputBackgroundColorActive & inputTextColor & inputLabelColor & barProgColor & barProgBackgroundColor & barSliderBackgroundColor & barSliderBackgroundColorHover"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("div",{style:"display:inline-block; vertical-align:middle; border:1px solid #ddd; width:20px; height:20px; background:"+n.WColorSelectInput.colorPick18+";"}),n._v(" "),t("div",{style:"padding-left:5px; font-size:0.8rem; display:inline-block; vertical-align:middle;"},[n._v(n._s(n.WColorSelectInput.colorPick18))])]),n._v(" "),t("div",{staticStyle:{padding:"20px",background:"#222"}},[t("w-color-select-input",{attrs:{borderColor:"#444",borderColorHover:"#666",borderColorActive:"#888",backgroundColor:"#111",menuBorderRadius:5,menuBackgroundColor:"#111",menuBackgroundColorHover:"#222",menuBackgroundColorActive:"#333",menuTextColor:"#b2b2b2",menuTextColorHover:"#ccc",menuTextColorActive:"#ddd",menuTextFontSize:"0.75rem",inputBorderColor:"#444",inputBorderColorHover:"#555",inputBorderColorActive:"#666",inputBackgroundColor:"#000",inputBackgroundColorHover:"#111",inputBackgroundColorActive:"#222",inputTextColor:"#ddd",inputLabelColor:"#b9b9b9",barProgColor:"#0097A7",barProgBackgroundColor:"#333",barSliderBackgroundColor:"#4DD0E1",barSliderBackgroundColorHover:"#80DEEA"},model:{value:n.WColorSelectInput.colorPick18,callback:function(e){n.$set(n.WColorSelectInput,"colorPick18",e)},expression:"WColorSelectInput.colorPick18"}})],1)],1)])])};PW._withStripped=!0;const FW=wa({render:PW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-select-input")])])}]},(function(n){n&&n("data-v-f176ed42_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorSelectInput.vue"},media:void 0})}),HW,"data-v-f176ed42",false,undefined,!1,_a,void 0,void 0);var LW={directives:{domresize:Mi()},components:{WPopup:Bp,WColorSelectPanel:SW,WColorSelectInput:BW,WButtonChip:Iu,WIcon:Ha},props:{value:{type:String,default:"#FFFFFF"},type:{type:String,default:"HSVA"},size:{type:Number,default:200},space:{type:Number,default:10},colorBlockSize:{type:Number,default:20},colorBlockBorderWidth:{type:Number,default:1},colorBlockBorderColor:{type:String,default:"#ddd"},showColorText:{type:Boolean,default:!0},colorTextColor:{type:String,default:"#000"},colorTextFontSize:{type:String,default:"0.8rem"},panelBackgroundColor:{type:String,default:"#fff"},toolBackgroundColor:{type:String,default:"#f5f5f5"},menuIconLump:{type:String,default:"M12,5.32L18,8.69V15.31L12,18.68L6,15.31V8.69L12,5.32M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z"},menuIconHsva:{type:String,default:"M19 3V21H15V3H19M14 3V21H10V3H14M9 3V21H5V3H9Z"},menuIconEyeDropper:{type:String,default:"M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z"},menuIconColor:{type:String,default:"#aaa"},menuIconColorHover:{type:String,default:"#999"},menuIconColorActive:{type:String,default:"#666"},menuIconSize:{type:Number,default:20},borderColor:{type:String,default:"#ddd"},borderColorHover:{type:String,default:"#ccc"},borderColorActive:{type:String,default:"#777"},menuBorderRadius:{type:Number,default:4},menuTextColor:{type:String,default:"#444"},menuTextColorHover:{type:String,default:"#222"},menuTextColorActive:{type:String,default:"#000"},menuTextFontSize:{type:String,default:"0.8rem"},menuBackgroundColor:{type:String,default:"#fff"},menuBackgroundColorHover:{type:String,default:"#f9f9f9"},menuBackgroundColorActive:{type:String,default:"#f2f2f2"},inputBorderRadius:{type:Number,default:4},inputBorderColor:{type:String,default:"#ccc"},inputBorderColorHover:{type:String,default:"#b5b5b5"},inputBorderColorActive:{type:String,default:"#aaa"},inputBackgroundColor:{type:String,default:"#fff"},inputBackgroundColorHover:{type:String,default:"#fafafa"},inputBackgroundColorActive:{type:String,default:"#f2f2f2"},inputTextColor:{type:String,default:"#000"},inputTextFontSize:{type:String,default:"0.8rem"},inputTextWidth:{type:Number,default:38},inputTextHeight:{type:Number,default:18},inputLabelWidth:{type:Number,default:12},inputLabelColor:{type:String,default:"#666"},inputLabelFontSize:{type:String,default:"0.8rem"},barProgHeight:{type:Number,default:4},barProgColor:{type:String,default:"#74a4d9"},barProgBackgroundColor:{type:String,default:"#eee"},barSliderSize:{type:Number,default:10},barSliderBackgroundColor:{type:String,default:"#1565C0"},barSliderBackgroundColorHover:{type:String,default:"#1976D2"},popupPlacementDist:{type:Number,default:5},btnText:{type:String,default:"OK"},btnRippleColor:{type:String,default:"rgba(255,255,255,0.4)"},btnPaddingStyle:{type:Object,default:()=>({v:1,h:5})},btnTextColor:{type:String,default:"#000"},btnTextColorHover:{type:String,default:"#222"},btnTextColorActive:{type:String,default:"#222"},btnTextFontSize:{type:String,default:"0.8rem"},btnBorderRadius:{type:Number,default:4},btnBackgroundColor:{type:String,default:"rgb(241,241,241)"},btnBackgroundColorHover:{type:String,default:"rgb(236,236,236)"},btnBackgroundColorActive:{type:String,default:"rgb(236,236,236)"},btnShadow:{type:Boolean,default:!0},editable:{type:Boolean,default:!0}},data:function(){return{mdiLoading:"M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z",show:!1,typeTrans:"HSVA",loadingEyeDropper:!1,layoutType:"horizontal",layoutOverflowY:!1,layoutMinY:300,layoutMaxY:300,selectPanelHeight:0,selectInputHeight:0,valueOri:null,valueNew:null}},computed:{changeValue:function(){let n=this;return n.valueOri=Qi(n.value),n.valueNew=n.valueOri,""},changeType:function(){return this.typeTrans=this.type,""},hasEyeDropper:function(){return Zi(window.EyeDropper)},useColorBlockBorderColor:function(){return Qi(this.colorBlockBorderColor)},useColorTextColor:function(){return Qi(this.colorTextColor)},usePanelBackgroundColor:function(){return Qi(this.panelBackgroundColor)},useToolBackgroundColor:function(){return Qi(this.toolBackgroundColor)},useBorderColor:function(){return Qi(this.borderColor)},usePanelOverflow:function(){let n=this,e=`overflow-y:auto; min-height:${n.layoutMinY}px;`;return n.layoutOverflowY&&(e+=`max-height:${n.layoutMaxY}px;`),e}},methods:{resize:function(n){let e=this;if(!e.show)return;let t=fn(n,"snew.windowWidth",0)>=2*(e.size+20)+3*e.space;e.layoutType=t?"horizontal":"vertical"},resizeContent:function(n){let e=this;if(!e.show)return;let t=fn(n,"snew.windowHeight",0);try{let n=dm(e.$refs.ct),o=500;e.layoutOverflowY=n.top+o>t,e.layoutMaxY=Math.max(t-n.top-30,e.layoutMinY)}catch(n){}},resizeSelectPanel:function(n){if(!this.show)return;let e=fn(n,"snew.clientHeight",0);this.selectPanelHeight=e},resizeSelectInput:function(n){if(!this.show)return;let e=fn(n,"snew.clientHeight",0);this.selectInputHeight=e},openEyeDropper:function(){let n=this;n.hasEyeDropper&&(n.loadingEyeDropper=!0,(new window.EyeDropper).open().then((e=>{let t=fn(e,"sRGBHex","#fff");n.valueNew=t})).catch((n=>{console.log(n)})).finally((()=>{n.loadingEyeDropper=!1})))},clickColor:function(){let n=this;n.editable&&(n.$emit("input",n.valueNew),n.show=!1)}}};const jW=LW;var RW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("WPopup",{directives:[{name:"domresize",rawName:"v-domresize"}],attrs:{minWidth:null,maxWidth:null,autoFitMinWidth:!1,autoFitMaxWidth:!1,placementDistY:n.popupPlacementDist,editable:n.editable,changeValue:n.changeValue,changeType:n.changeType},on:{domresize:n.resize},scopedSlots:n._u([{key:"trigger",fn:function(){return[t("div",{},[t("div",{staticStyle:{display:"flex","align-items":"center",cursor:"pointer",outline:"none"},on:{click:n.clickColor}},[t("div",{style:"border:"+n.colorBlockBorderWidth+"px solid "+n.useColorBlockBorderColor+"; width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; background:"+n.valueOri+";"}),n._v(" "),n.showColorText?[t("div",{style:"padding-left:5px;"}),n._v(" "),t("div",{style:"font-size:"+n.colorTextFontSize+"; color:"+n.useColorTextColor+";"},[n._v("\n                        "+n._s(n.valueOri)+"\n                    ")])]:n._e()],2)])]},proxy:!0},{key:"content",fn:function(){return[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],ref:"ct",style:"background:"+n.usePanelBackgroundColor+"; "+n.usePanelOverflow,on:{domresize:n.resizeContent}},[t("div",{style:"display:flex; padding:"+n.space+"px; border-bottom:1px solid "+n.useBorderColor+"; background:"+n.useToolBackgroundColor+";"},[t("div",{},[t("WIcon",{staticStyle:{cursor:"pointer"},attrs:{icon:n.menuIconHsva,color:"HSVA"===n.typeTrans?n.menuIconColorActive:n.menuIconColor,colorHover:"HSVA"===n.typeTrans?n.menuIconColorActive:n.menuIconColorHover,size:n.menuIconSize},on:{click:function(e){n.typeTrans="HSVA",n.$emit("update:type","HSVA")}}})],1),n._v(" "),t("div",{},[t("WIcon",{staticStyle:{cursor:"pointer"},attrs:{icon:n.menuIconLump,color:"LUMP"===n.typeTrans?n.menuIconColorActive:n.menuIconColor,colorHover:"LUMP"===n.typeTrans?n.menuIconColorActive:n.menuIconColorHover,size:n.menuIconSize},on:{click:function(e){n.typeTrans="LUMP",n.$emit("update:type","LUMP")}}})],1),n._v(" "),n.hasEyeDropper?t("div",{},[t("WIcon",{class:{"icon-spinner":n.loadingEyeDropper},staticStyle:{cursor:"pointer"},attrs:{icon:n.loadingEyeDropper?n.mdiLoading:n.menuIconEyeDropper,color:n.loadingEyeDropper?n.menuIconColor:n.menuIconColorActive,colorHover:n.loadingEyeDropper?n.menuIconColor:n.menuIconColorActive,size:n.menuIconSize},on:{click:n.openEyeDropper}})],1):n._e(),n._v(" "),t("div",{style:"width:100%;"}),n._v(" "),t("div",{ref:"mtb",style:"display:flex; align-items:center;"},[t("div",{style:"display:flex; align-items:center; border:"+n.colorBlockBorderWidth+"px solid "+n.useColorBlockBorderColor+";"},[t("div",{style:"width:"+n.colorBlockSize+"px; min-width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; background:"+n.valueOri+";"}),n._v(" "),t("div",{style:"width:"+n.colorBlockSize+"px; min-width:"+n.colorBlockSize+"px; height:"+n.colorBlockSize+"px; background:"+n.valueNew+";"})]),n._v(" "),t("div",{style:"padding-left:"+n.space+"px;"}),n._v(" "),t("WButtonChip",{attrs:{text:n.btnText,rippleColor:n.btnRippleColor,paddingStyle:n.btnPaddingStyle,textColor:n.btnTextColor,textColorHover:n.btnTextColorHover,textColorActive:n.btnTextColorActive,textFontSize:n.btnTextFontSize,borderRadius:n.btnBorderRadius,_borderColor:"btnBorderColor",_borderColorHover:"btnBorderColorHover",_borderColorActive:"btnBorderColorActive",backgroundColor:n.btnBackgroundColor,backgroundColorHover:n.btnBackgroundColorHover,backgroundColorActive:n.btnBackgroundColorActive,shadow:n.btnShadow},on:{click:n.clickColor}})],1)]),n._v(" "),t("div",{style:"padding:"+n.space+"px;"},[t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],staticStyle:{display:"flex"},on:{domresize:n.resizeSelectPanel}},[t("WColorSelectPanel",{attrs:{type:n.typeTrans,size:n.size,space:0,backgroundColor:"transparent",menuIconLump:n.menuIconLump,menuIconHsva:n.menuIconHsva,menuIconColor:n.menuIconColor,menuIconColorHover:n.menuIconColorHover,menuIconColorActive:n.menuIconColorActive,menuIconSize:n.menuIconSize},model:{value:n.valueNew,callback:function(e){n.valueNew=e},expression:"valueNew"}})],1),n._v(" "),t("div",{style:"height:"+n.space+"px;"}),n._v(" "),t("div",{directives:[{name:"domresize",rawName:"v-domresize"}],staticStyle:{display:"flex"},on:{domresize:n.resizeSelectInput}},[t("WColorSelectInput",{attrs:{size:Math.max(n.size-22,0),backgroundColor:"transparent",borderColor:n.borderColor,borderColorHover:n.borderColorHover,borderColorActive:n.borderColorActive,menuBorderRadius:n.menuBorderRadius,menuBackgroundColor:n.menuBackgroundColor,menuBackgroundColorHover:n.menuBackgroundColorHover,menuBackgroundColorActive:n.menuBackgroundColorActive,menuTextColor:n.menuTextColor,menuTextColorHover:n.menuTextColorHover,menuTextColorActive:n.menuTextColorActive,menuTextFontSize:n.menuTextFontSize,inputBorderRadius:n.inputBorderRadius,inputBorderColor:n.inputBorderColor,inputBorderColorHover:n.inputBorderColorHover,inputBorderColorActive:n.inputBorderColorActive,inputBackgroundColor:n.inputBackgroundColor,inputBackgroundColorHover:n.inputBackgroundColorHover,inputBackgroundColorActive:n.inputBackgroundColorActive,inputTextColor:n.inputTextColor,inputTextFontSize:n.inputTextFontSize,inputTextWidth:n.inputTextWidth,inputTextHeight:n.inputTextHeight,inputLabelWidth:n.inputLabelWidth,inputLabelColor:n.inputLabelColor,inputLabelFontSize:n.inputLabelFontSize,barProgHeight:n.barProgHeight,barProgColor:n.barProgColor,barProgBackgroundColor:n.barProgBackgroundColor,barSliderSize:n.barSliderSize,barSliderBackgroundColor:n.barSliderBackgroundColor,barSliderBackgroundColorHover:n.barSliderBackgroundColorHover},model:{value:n.valueNew,callback:function(e){n.valueNew=e},expression:"valueNew"}})],1)])])]},proxy:!0}]),model:{value:n.show,callback:function(e){n.show=e},expression:"show"}})};RW._withStripped=!0;const DW={components:{demolink:iu,WInputRadio:qb,WColorSelect:wa({render:RW,staticRenderFns:[]},(function(n){n&&n("data-v-ba5071e2_0",{source:"\n.icon-spinner[data-v-ba5071e2] {\r\n    animation: spin-animation-data-v-ba5071e2 1.5s infinite;\r\n    display: inline-block;\n}\n@keyframes spin-animation-data-v-ba5071e2 {\n0% {\r\n        transform: rotate(0deg);\n}\n100% {\r\n        transform: rotate(359deg);\n}\n}\r\n",map:{version:3,sources:["D:\\- 006 -        開源\\開源-JS-103-2-w-component-vue\\w-component-vue\\src\\components\\WColorSelect.vue"],names:[],mappings:";AA+wBA;IACA,uDAAA;IACA,qBAAA;AACA;AACA;AACA;QACA,uBAAA;AACA;AACA;QACA,yBAAA;AACA;AACA",file:"WColorSelect.vue",sourcesContent:["<template>\r\n    <WPopup\r\n        :minWidth=\"null\"\r\n        :maxWidth=\"null\"\r\n        :autoFitMinWidth=\"false\"\r\n        :autoFitMaxWidth=\"false\"\r\n        :placementDistY=\"popupPlacementDist\"\r\n        :editable=\"editable\"\r\n        v-model=\"show\"\r\n        :changeValue=\"changeValue\"\r\n        :changeType=\"changeType\"\r\n        v-domresize\r\n        @domresize=\"resize\"\r\n    >\r\n\r\n        <template v-slot:trigger>\r\n\r\n            <div style=\"\">\r\n                \x3c!-- 盡量不要讓display:flex暴露至外層 --\x3e\r\n                <div\r\n                    style=\"display:flex; align-items:center; cursor:pointer; outline:none;\"\r\n                    @click=\"clickColor\"\r\n                >\r\n\r\n                    <div :style=\"`border:${colorBlockBorderWidth}px solid ${useColorBlockBorderColor}; width:${colorBlockSize}px; height:${colorBlockSize}px; background:${valueOri};`\"></div>\r\n\r\n                    <template v-if=\"showColorText\">\r\n\r\n                        <div :style=\"`padding-left:5px;`\"></div>\r\n\r\n                        <div :style=\"`font-size:${colorTextFontSize}; color:${useColorTextColor};`\">\r\n                            {{valueOri}}\r\n                        </div>\r\n\r\n                    </template>\r\n\r\n                </div>\r\n            </div>\r\n\r\n        </template>\r\n\r\n        <template v-slot:content>\r\n\r\n            <div\r\n                ref=\"ct\"\r\n                :style=\"`background:${usePanelBackgroundColor}; ${usePanelOverflow}`\"\r\n                v-domresize\r\n                @domresize=\"resizeContent\"\r\n            >\r\n\r\n                \x3c!-- 上方選單區 --\x3e\r\n                <div :style=\"`display:flex; padding:${space}px; border-bottom:1px solid ${useBorderColor}; background:${useToolBackgroundColor};`\">\r\n\r\n                    <div style=\"\">\r\n                        <WIcon\r\n                            style=\"cursor:pointer;\"\r\n                            :icon=\"menuIconHsva\"\r\n                            :color=\"typeTrans==='HSVA'?menuIconColorActive:menuIconColor\"\r\n                            :colorHover=\"typeTrans==='HSVA'?menuIconColorActive:menuIconColorHover\"\r\n                            :size=\"menuIconSize\"\r\n                            @click=\"typeTrans='HSVA';$emit('update:type','HSVA')\"\r\n                        ></WIcon>\r\n                    </div>\r\n\r\n                    <div style=\"\">\r\n                        <WIcon\r\n                            style=\"cursor:pointer;\"\r\n                            :icon=\"menuIconLump\"\r\n                            :color=\"typeTrans==='LUMP'?menuIconColorActive:menuIconColor\"\r\n                            :colorHover=\"typeTrans==='LUMP'?menuIconColorActive:menuIconColorHover\"\r\n                            :size=\"menuIconSize\"\r\n                            @click=\"typeTrans='LUMP';$emit('update:type','LUMP')\"\r\n                        ></WIcon>\r\n                    </div>\r\n\r\n                    <div style=\"\" v-if=\"hasEyeDropper\">\r\n                        <WIcon\r\n                            :class=\"{'icon-spinner':loadingEyeDropper}\"\r\n                            style=\"cursor:pointer;\"\r\n                            :icon=\"loadingEyeDropper?mdiLoading:menuIconEyeDropper\"\r\n                            :color=\"loadingEyeDropper?menuIconColor:menuIconColorActive\"\r\n                            :colorHover=\"loadingEyeDropper?menuIconColor:menuIconColorActive\"\r\n                            :size=\"menuIconSize\"\r\n                            @click=\"openEyeDropper\"\r\n                        ></WIcon>\r\n                    </div>\r\n\r\n                    <div :style=\"`width:100%;`\"></div>\r\n\r\n                    <div\r\n                        ref=\"mtb\"\r\n                        :style=\"`display:flex; align-items:center;`\"\r\n                    >\r\n\r\n                        <div :style=\"`display:flex; align-items:center; border:${colorBlockBorderWidth}px solid ${useColorBlockBorderColor};`\">\r\n\r\n                            <div :style=\"`width:${colorBlockSize}px; min-width:${colorBlockSize}px; height:${colorBlockSize}px; background:${valueOri};`\"></div>\r\n\r\n                            <div :style=\"`width:${colorBlockSize}px; min-width:${colorBlockSize}px; height:${colorBlockSize}px; background:${valueNew};`\"></div>\r\n\r\n                        </div>\r\n\r\n                        <div :style=\"`padding-left:${space}px;`\"></div>\r\n\r\n                        <WButtonChip\r\n                            :text=\"btnText\"\r\n                            :rippleColor=\"btnRippleColor\"\r\n                            :paddingStyle=\"btnPaddingStyle\"\r\n                            :textColor=\"btnTextColor\"\r\n                            :textColorHover=\"btnTextColorHover\"\r\n                            :textColorActive=\"btnTextColorActive\"\r\n                            :textFontSize=\"btnTextFontSize\"\r\n                            :borderRadius=\"btnBorderRadius\"\r\n                            _borderColor=\"btnBorderColor\"\r\n                            _borderColorHover=\"btnBorderColorHover\"\r\n                            _borderColorActive=\"btnBorderColorActive\"\r\n                            :backgroundColor=\"btnBackgroundColor\"\r\n                            :backgroundColorHover=\"btnBackgroundColorHover\"\r\n                            :backgroundColorActive=\"btnBackgroundColorActive\"\r\n                            :shadow=\"btnShadow\"\r\n                            @click=\"clickColor\"\r\n                        ></WButtonChip>\r\n\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <div :style=\"`padding:${space}px;`\">\r\n\r\n                    \x3c!-- 顏色選擇區 --\x3e\r\n                    <div\r\n                        style=\"display:flex;\"\r\n                        v-domresize\r\n                        @domresize=\"resizeSelectPanel\"\r\n                    >\r\n                        <WColorSelectPanel\r\n                            :type=\"typeTrans\"\r\n                            :size=\"size\"\r\n                            :space=\"0\"\r\n                            :backgroundColor=\"'transparent'\"\r\n                            :menuIconLump=\"menuIconLump\"\r\n                            :menuIconHsva=\"menuIconHsva\"\r\n                            :menuIconColor=\"menuIconColor\"\r\n                            :menuIconColorHover=\"menuIconColorHover\"\r\n                            :menuIconColorActive=\"menuIconColorActive\"\r\n                            :menuIconSize=\"menuIconSize\"\r\n                            v-model=\"valueNew\"\r\n                        ></WColorSelectPanel>\r\n                    </div>\r\n\r\n                    <div :style=\"`height:${space}px;`\"></div>\r\n\r\n                    \x3c!-- 顏色數值區 --\x3e\r\n                    <div\r\n                        style=\"display:flex;\"\r\n                        v-domresize\r\n                        @domresize=\"resizeSelectInput\"\r\n                    >\r\n                        <WColorSelectInput\r\n                            :size=\"Math.max(size-22,0)\"\r\n                            :backgroundColor=\"'transparent'\"\r\n                            :borderColor=\"borderColor\"\r\n                            :borderColorHover=\"borderColorHover\"\r\n                            :borderColorActive=\"borderColorActive\"\r\n                            :menuBorderRadius=\"menuBorderRadius\"\r\n                            :menuBackgroundColor=\"menuBackgroundColor\"\r\n                            :menuBackgroundColorHover=\"menuBackgroundColorHover\"\r\n                            :menuBackgroundColorActive=\"menuBackgroundColorActive\"\r\n                            :menuTextColor=\"menuTextColor\"\r\n                            :menuTextColorHover=\"menuTextColorHover\"\r\n                            :menuTextColorActive=\"menuTextColorActive\"\r\n                            :menuTextFontSize=\"menuTextFontSize\"\r\n                            :inputBorderRadius=\"inputBorderRadius\"\r\n                            :inputBorderColor=\"inputBorderColor\"\r\n                            :inputBorderColorHover=\"inputBorderColorHover\"\r\n                            :inputBorderColorActive=\"inputBorderColorActive\"\r\n                            :inputBackgroundColor=\"inputBackgroundColor\"\r\n                            :inputBackgroundColorHover=\"inputBackgroundColorHover\"\r\n                            :inputBackgroundColorActive=\"inputBackgroundColorActive\"\r\n                            :inputTextColor=\"inputTextColor\"\r\n                            :inputTextFontSize=\"inputTextFontSize\"\r\n                            :inputTextWidth=\"inputTextWidth\"\r\n                            :inputTextHeight=\"inputTextHeight\"\r\n                            :inputLabelWidth=\"inputLabelWidth\"\r\n                            :inputLabelColor=\"inputLabelColor\"\r\n                            :inputLabelFontSize=\"inputLabelFontSize\"\r\n                            :barProgHeight=\"barProgHeight\"\r\n                            :barProgColor=\"barProgColor\"\r\n                            :barProgBackgroundColor=\"barProgBackgroundColor\"\r\n                            :barSliderSize=\"barSliderSize\"\r\n                            :barSliderBackgroundColor=\"barSliderBackgroundColor\"\r\n                            :barSliderBackgroundColorHover=\"barSliderBackgroundColorHover\"\r\n                            v-model=\"valueNew\"\r\n                        ></WColorSelectInput>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n            </div>\r\n\r\n        </template>\r\n\r\n    </WPopup>\r\n</template>\r\n\r\n<script>\r\nimport { mdiHexagonSlice6, mdiViewParallel, mdiEyedropper, mdiLoading } from '@mdi/js'\r\nimport get from 'lodash-es/get.js'\r\nimport isfun from 'wsemi/src/isfun.mjs'\r\nimport domGetBoudRect from 'wsemi/src/domGetBoudRect.mjs'\r\nimport convertColor from '../js/convertColor.mjs'\r\nimport domResize from '../js/domResize.mjs'\r\nimport WPopup from './WPopup.vue'\r\nimport WColorSelectPanel from './WColorSelectPanel.vue'\r\nimport WColorSelectInput from './WColorSelectInput.vue'\r\nimport WButtonChip from './WButtonChip.vue'\r\nimport WIcon from './WIcon.vue'\r\n\r\n\r\n/**\r\n * @vue-prop {String} [value='#FFFFFF'] 輸入顏色字串，預設'#FFFFFF'\r\n * @vue-prop {String} [type='HSVA'] 輸入選擇顏色方式字串，可選'LUMP'、'HSVA'，預設'HSVA'\r\n * @vue-prop {Number} [size=200] 輸入尺寸數字，代表組件基礎寬度與將自動計算高度，單位px，預設200\r\n * @vue-prop {Number} [space=10] 輸入子組件間距數字，單位px，預設10\r\n * @vue-prop {Number} [colorBlockSize=20] 輸入色塊長與寬度數字，單位px，預設20\r\n * @vue-prop {Number} [colorBlockBorderWidth=1] 輸入色塊框線寬度數字，單位px，預設1\r\n * @vue-prop {String} [colorBlockBorderColor='#ddd'] 輸入色塊框線顏色字串，預設'#ddd'\r\n * @vue-prop {Boolean} [showColorText=true] 輸入是否顯示當前RGBA顏色文字布林值，預設true\r\n * @vue-prop {String} [colorTextColor='#000'] 輸入當前RGBA顏色文字顏色字串，預設'#000'\r\n * @vue-prop {String} [colorTextFontSize='0.8rem'] 輸入當前RGBA顏色文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {String} [panelBackgroundColor='#fff'] 輸入彈窗背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [toolBackgroundColor='#f5f5f5'] 輸入彈窗背景顏色字串，預設'#f5f5f5'\r\n * @vue-prop {String} [menuIconLump=mdiHexagonSlice6] 輸入選單LUMP模式圖標字串，預設mdiHexagonSlice6\r\n * @vue-prop {String} [menuIconHsva=mdiViewParallel] mdiViewParallel\r\n * @vue-prop {String} [menuIconEyeDropper=mdiEyedropper] 輸入取色滴管圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設使用mdi的圖標(mdiEyedropper)\r\n * @vue-prop {String} [menuIconColor='#aaa'] 輸入選單圖標顏色字串，預設'#aaa'\r\n * @vue-prop {String} [menuIconColorHover='#999'] 輸入滑鼠移入時選單圖標顏色字串，預設'#999'\r\n * @vue-prop {String} [menuIconColorActive='#666'] 輸入主動模式時選單圖標顏色字串，預設'#666'\r\n * @vue-prop {Number} [menuIconSize=20] 輸入選單圖標尺寸數字，單位為px，預設20\r\n * @vue-prop {String} [borderColor='#ddd'] 輸入邊框顏色字串，預設'#ddd'\r\n * @vue-prop {String} [borderColorHover='#ccc'] 輸入滑鼠移入時邊框顏色字串，預設'#ccc'\r\n * @vue-prop {String} [borderColorActive='#777'] 輸入主動模式時邊框顏色字串，預設'#777'\r\n * @vue-prop {Number} [menuBorderRadius=4] 輸入框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [menuTextColor='#444'] 輸入選單文字顏色字串，預設'#444'\r\n * @vue-prop {String} [menuTextColorHover='#222'] 輸入滑鼠移入時選單文字顏色字串，預設'#222'\r\n * @vue-prop {String} [menuTextColorActive='#000'] 輸入主動模式時選單文字顏色字串，預設'#000'\r\n * @vue-prop {String} [menuTextFontSize='0.8rem'] 輸入選單文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {String} [menuBackgroundColor='#fff'] 輸入選單背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [menuBackgroundColorHover='#f9f9f9'] 輸入滑鼠移入時選單背景顏色字串，預設'#f9f9f9'\r\n * @vue-prop {String} [menuBackgroundColorActive='#f2f2f2'] 輸入主動模式時選單背景顏色字串，預設'#f2f2f2'\r\n * @vue-prop {Number} [inputBorderRadius=4] 輸入顏色數字輸入區邊框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [inputBorderColor='#ccc'] 輸入顏色數字輸入區邊框顏色字串，預設'#ccc'\r\n * @vue-prop {String} [inputBorderColorHover='#b5b5b5'] 輸入滑鼠移入時顏色數字輸入區邊框顏色字串，預設'#b5b5b5'\r\n * @vue-prop {String} [inputBorderColorActive='#aaa'] 輸入主動模式時顏色數字輸入區邊框顏色字串，預設'#aaa'\r\n * @vue-prop {String} [inputBackgroundColor='#fff'] 輸入顏色數字輸入區背景顏色字串，預設'#fff'\r\n * @vue-prop {String} [inputBackgroundColorHover='#fafafa'] 輸入滑鼠移入時顏色數字輸入區背景顏色字串，預設'#fafafa'\r\n * @vue-prop {String} [inputBackgroundColorActive='#f2f2f2'] 輸入主動模式時顏色數字輸入區背景顏色字串，預設'#f2f2f2'\r\n * @vue-prop {String} [inputTextColor='#000'] 輸入顏色數字輸入區文字顏色字串，預設'#000'\r\n * @vue-prop {String} [inputTextFontSize='0.8rem'] 輸入顏色數字輸入區文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [inputTextWidth=38] 輸入顏色數字輸入區寬度數字，單位為px，預設38\r\n * @vue-prop {Number} [inputTextHeight=18] 輸入顏色數字輸入區高度數字，單位為px，預設18\r\n * @vue-prop {Number} [inputLabelWidth=12] 輸入顏色數字輸入區標題寬度數字，單位為px，預設12\r\n * @vue-prop {String} [inputLabelColor='#666'] 輸入文字顏色字串，預設'#666'\r\n * @vue-prop {String} [inputLabelFontSize='0.8rem'] 輸入文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [barProgHeight=4] 輸入值域條高度數字，單位為px，預設4\r\n * @vue-prop {String} [barProgColor='#74a4d9'] 輸入值域條顏色字串，預設'#74a4d9'\r\n * @vue-prop {String} [barProgBackgroundColor='#eee'] 輸入值域條背景顏色字串，預設'#eee'\r\n * @vue-prop {Number} [barSliderSize=10] 輸入拖曳球尺寸數字，單位為px，預設10\r\n * @vue-prop {String} [barSliderBackgroundColor='#1565C0'] 輸入拖曳球背景顏色字串，預設'#1565C0'\r\n * @vue-prop {String} [barSliderBackgroundColorHover='#1976D2'] 輸入滑鼠移入時拖曳球背景顏色字串，預設'#1976D2'\r\n * @vue-prop {Number} [popupPlacementDist=5] 輸入彈窗距離觸發元素距離數字，單位為px，預設5\r\n * @vue-prop {String} [btnText='OK'] 輸入確認按鈕之文字字串，預設'OK'\r\n * @vue-prop {String} [btnRippleColor='rgba(255,255,255,0.4)'] 輸入確認按鈕之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'\r\n * @vue-prop {Object} [btnPaddingStyle={v:1,h:5}] 輸入確認按鈕之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:1,h:5}\r\n * @vue-prop {String} [btnTextColor='#000'] 輸入確認按鈕之文字顏色字串，預設'#000'\r\n * @vue-prop {String} [btnTextColorHover='#222'] 輸入滑鼠移入時確認按鈕之文字顏色字串，預設'#222'\r\n * @vue-prop {String} [btnTextColorActive='#222'] 輸入主動模式時確認按鈕之文字顏色字串，預設'#222'\r\n * @vue-prop {String} [btnTextFontSize='0.8rem'] 輸入確認按鈕之文字字型大小字串，預設'0.8rem'\r\n * @vue-prop {Number} [btnBorderRadius=4] 輸入確認按鈕之框圓角度數字，單位為px，預設4\r\n * @vue-prop {String} [btnBackgroundColor='rgb(241,241,241)'] 輸入確認按鈕之背景顏色字串，預設'rgb(241,241,241)'\r\n * @vue-prop {String} [btnBackgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'\r\n * @vue-prop {String} [btnBackgroundColorActive='rgb(236,236,236)'] 輸入主動模式時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'\r\n * @vue-prop {Boolean} [btnShadow=true] 輸入確認按鈕之是否顯示陰影布林值，預設true\r\n * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true\r\n */\r\nexport default {\r\n    directives: {\r\n        domresize: domResize(),\r\n    },\r\n    components: {\r\n        WPopup,\r\n        WColorSelectPanel,\r\n        WColorSelectInput,\r\n        WButtonChip,\r\n        WIcon,\r\n    },\r\n    props: {\r\n        value: {\r\n            type: String,\r\n            default: '#FFFFFF',\r\n        },\r\n        type: {\r\n            type: String,\r\n            default: 'HSVA',\r\n        },\r\n        size: {\r\n            type: Number,\r\n            default: 200,\r\n        },\r\n        space: {\r\n            type: Number,\r\n            default: 10,\r\n        },\r\n        colorBlockSize: {\r\n            type: Number,\r\n            default: 20,\r\n        },\r\n        colorBlockBorderWidth: {\r\n            type: Number,\r\n            default: 1,\r\n        },\r\n        colorBlockBorderColor: {\r\n            type: String,\r\n            default: '#ddd',\r\n        },\r\n        showColorText: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n        colorTextColor: {\r\n            type: String,\r\n            default: '#000',\r\n        },\r\n        colorTextFontSize: {\r\n            type: String,\r\n            default: '0.8rem',\r\n        },\r\n        panelBackgroundColor: {\r\n            type: String,\r\n            default: '#fff',\r\n        },\r\n        toolBackgroundColor: {\r\n            type: String,\r\n            default: '#f5f5f5',\r\n        },\r\n        menuIconLump: {\r\n            type: String,\r\n            default: mdiHexagonSlice6,\r\n        },\r\n        menuIconHsva: {\r\n            type: String,\r\n            default: mdiViewParallel,\r\n        },\r\n        menuIconEyeDropper: {\r\n            type: String,\r\n            default: mdiEyedropper,\r\n        },\r\n        menuIconColor: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        menuIconColorHover: {\r\n            type: String,\r\n            default: '#999',\r\n        },\r\n        menuIconColorActive: {\r\n            type: String,\r\n            default: '#666',\r\n        },\r\n        menuIconSize: {\r\n            type: Number,\r\n            default: 20,\r\n        },\r\n        borderColor: {\r\n            type: String,\r\n            default: '#ddd',\r\n        },\r\n        borderColorHover: {\r\n            type: String,\r\n            default: '#ccc',\r\n        },\r\n        borderColorActive: {\r\n            type: String,\r\n            default: '#777',\r\n        },\r\n        menuBorderRadius: {\r\n            type: Number,\r\n            default: 4,\r\n        },\r\n        menuTextColor: {\r\n            type: String,\r\n            default: '#444',\r\n        },\r\n        menuTextColorHover: {\r\n            type: String,\r\n            default: '#222',\r\n        },\r\n        menuTextColorActive: {\r\n            type: String,\r\n            default: '#000',\r\n        },\r\n        menuTextFontSize: {\r\n            type: String,\r\n            default: '0.8rem',\r\n        },\r\n        menuBackgroundColor: {\r\n            type: String,\r\n            default: '#fff',\r\n        },\r\n        menuBackgroundColorHover: {\r\n            type: String,\r\n            default: '#f9f9f9',\r\n        },\r\n        menuBackgroundColorActive: {\r\n            type: String,\r\n            default: '#f2f2f2',\r\n        },\r\n        inputBorderRadius: {\r\n            type: Number,\r\n            default: 4,\r\n        },\r\n        inputBorderColor: {\r\n            type: String,\r\n            default: '#ccc',\r\n        },\r\n        inputBorderColorHover: {\r\n            type: String,\r\n            default: '#b5b5b5',\r\n        },\r\n        inputBorderColorActive: {\r\n            type: String,\r\n            default: '#aaa',\r\n        },\r\n        inputBackgroundColor: {\r\n            type: String,\r\n            default: '#fff',\r\n        },\r\n        inputBackgroundColorHover: {\r\n            type: String,\r\n            default: '#fafafa',\r\n        },\r\n        inputBackgroundColorActive: {\r\n            type: String,\r\n            default: '#f2f2f2',\r\n        },\r\n        inputTextColor: {\r\n            type: String,\r\n            default: '#000',\r\n        },\r\n        inputTextFontSize: {\r\n            type: String,\r\n            default: '0.8rem',\r\n        },\r\n        inputTextWidth: {\r\n            type: Number,\r\n            default: 38,\r\n        },\r\n        inputTextHeight: {\r\n            type: Number,\r\n            default: 18,\r\n        },\r\n        inputLabelWidth: {\r\n            type: Number,\r\n            default: 12,\r\n        },\r\n        inputLabelColor: {\r\n            type: String,\r\n            default: '#666',\r\n        },\r\n        inputLabelFontSize: {\r\n            type: String,\r\n            default: '0.8rem',\r\n        },\r\n        barProgHeight: {\r\n            type: Number,\r\n            default: 4,\r\n        },\r\n        barProgColor: {\r\n            type: String,\r\n            default: '#74a4d9',\r\n        },\r\n        barProgBackgroundColor: {\r\n            type: String,\r\n            default: '#eee',\r\n        },\r\n        barSliderSize: {\r\n            type: Number,\r\n            default: 10,\r\n        },\r\n        barSliderBackgroundColor: {\r\n            type: String,\r\n            default: '#1565C0',\r\n        },\r\n        barSliderBackgroundColorHover: {\r\n            type: String,\r\n            default: '#1976D2',\r\n        },\r\n        popupPlacementDist: {\r\n            type: Number,\r\n            default: 5,\r\n        },\r\n        btnText: {\r\n            type: String,\r\n            default: 'OK',\r\n        },\r\n        btnRippleColor: {\r\n            type: String,\r\n            default: 'rgba(255,255,255,0.4)',\r\n        },\r\n        btnPaddingStyle: {\r\n            type: Object,\r\n            default: () => {\r\n                return {\r\n                    v: 1,\r\n                    h: 5,\r\n                }\r\n            },\r\n        },\r\n        btnTextColor: {\r\n            type: String,\r\n            default: '#000',\r\n        },\r\n        btnTextColorHover: {\r\n            type: String,\r\n            default: '#222',\r\n        },\r\n        btnTextColorActive: {\r\n            type: String,\r\n            default: '#222',\r\n        },\r\n        btnTextFontSize: {\r\n            type: String,\r\n            default: '0.8rem',\r\n        },\r\n        btnBorderRadius: {\r\n            type: Number,\r\n            default: 4,\r\n        },\r\n        btnBackgroundColor: {\r\n            type: String,\r\n            default: 'rgb(241,241,241)',\r\n        },\r\n        btnBackgroundColorHover: {\r\n            type: String,\r\n            default: 'rgb(236,236,236)',\r\n        },\r\n        btnBackgroundColorActive: {\r\n            type: String,\r\n            default: 'rgb(236,236,236)',\r\n        },\r\n        btnShadow: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n        editable: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n    },\r\n    data: function() {\r\n        return {\r\n            mdiLoading,\r\n\r\n            show: false,\r\n\r\n            typeTrans: 'HSVA',\r\n\r\n            loadingEyeDropper: false,\r\n\r\n            layoutType: 'horizontal',\r\n            layoutOverflowY: false,\r\n            layoutMinY: 300,\r\n            layoutMaxY: 300,\r\n\r\n            selectPanelHeight: 0,\r\n            selectInputHeight: 0,\r\n\r\n            valueOri: null,\r\n            valueNew: null,\r\n\r\n        }\r\n    },\r\n    computed: {\r\n\r\n        changeValue: function() {\r\n            let vo = this\r\n            vo.valueOri = convertColor(vo.value)\r\n            vo.valueNew = vo.valueOri\r\n            return ''\r\n        },\r\n\r\n        changeType: function() {\r\n            let vo = this\r\n            vo.typeTrans = vo.type\r\n            return ''\r\n        },\r\n\r\n        hasEyeDropper: function() {\r\n            // let vo = this\r\n            let b = isfun(window.EyeDropper)\r\n            // console.log('window.EyeDropper', window.EyeDropper)\r\n            return b\r\n        },\r\n\r\n        useColorBlockBorderColor: function() {\r\n            let vo = this\r\n            return convertColor(vo.colorBlockBorderColor)\r\n        },\r\n\r\n        useColorTextColor: function() {\r\n            let vo = this\r\n            return convertColor(vo.colorTextColor)\r\n        },\r\n\r\n        usePanelBackgroundColor: function() {\r\n            let vo = this\r\n            return convertColor(vo.panelBackgroundColor)\r\n        },\r\n\r\n        useToolBackgroundColor: function() {\r\n            let vo = this\r\n            return convertColor(vo.toolBackgroundColor)\r\n        },\r\n\r\n        useBorderColor: function() {\r\n            let vo = this\r\n            return convertColor(vo.borderColor)\r\n        },\r\n\r\n        usePanelOverflow: function() {\r\n            let vo = this\r\n            let of = `overflow-y:auto; min-height:${vo.layoutMinY}px;`\r\n            if (vo.layoutOverflowY) {\r\n                of += `max-height:${vo.layoutMaxY}px;`\r\n            }\r\n            return of\r\n        },\r\n\r\n    },\r\n    methods: {\r\n\r\n        resize: function(msg) {\r\n            // console.log('methods resize', msg)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.show) {\r\n                return\r\n            }\r\n\r\n            let w = get(msg, 'snew.windowWidth', 0)\r\n            // let h = get(msg, 'snew.windowHeight', 0)\r\n            // console.log('w', w, 'h', h, b)\r\n\r\n            //layoutType\r\n            let b = w >= 2 * (vo.size + 20) + 3 * vo.space //20為組件設定, 不提供外部更改故可直接給\r\n            vo.layoutType = b ? 'horizontal' : 'vertical'\r\n            // console.log('layoutType', vo.layoutType)\r\n\r\n        },\r\n\r\n        resizeContent: function(msg) {\r\n            // console.log('methods resizeContent', msg)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.show) {\r\n                return\r\n            }\r\n\r\n            // let w = get(msg, 'snew.windowWidth', 0)\r\n            let h = get(msg, 'snew.windowHeight', 0)\r\n\r\n            try {\r\n\r\n                // console.log('vo.$refs.ct', vo.$refs.ct)\r\n                let rt = domGetBoudRect(vo.$refs.ct)\r\n                // console.log('rt', rt)\r\n\r\n                //hc, 概估組件size=200時高度\r\n                let hc = 500\r\n\r\n                //layoutOverflowY\r\n                vo.layoutOverflowY = rt.top + hc > h\r\n                // console.log('layoutOverflowY', vo.layoutOverflowY)\r\n\r\n                //layoutMaxY\r\n                vo.layoutMaxY = Math.max(h - rt.top - 30, vo.layoutMinY) //30是概估與底部的留白距離\r\n                // console.log('layoutMaxY', vo.layoutMaxY)\r\n\r\n            }\r\n            catch (err) {}\r\n\r\n        },\r\n\r\n        resizeSelectPanel: function(msg) {\r\n            // console.log('methods resizeSelectPanel', msg)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.show) {\r\n                return\r\n            }\r\n\r\n            let h = get(msg, 'snew.clientHeight', 0)\r\n\r\n            //save\r\n            vo.selectPanelHeight = h\r\n\r\n        },\r\n\r\n        resizeSelectInput: function(msg) {\r\n            // console.log('methods resizeSelectInput', msg)\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.show) {\r\n                return\r\n            }\r\n\r\n            let h = get(msg, 'snew.clientHeight', 0)\r\n\r\n            //save\r\n            vo.selectInputHeight = h\r\n\r\n        },\r\n\r\n        openEyeDropper: function() {\r\n            // console.log('methods openEyeDropper')\r\n\r\n            let vo = this\r\n\r\n            //check\r\n            if (!vo.hasEyeDropper) {\r\n                return\r\n            }\r\n\r\n            vo.loadingEyeDropper = true\r\n\r\n            let eyeDropper = new window.EyeDropper()\r\n            eyeDropper\r\n                .open()\r\n                .then((res) => {\r\n                    // console.log('res', res)\r\n                    let hex = get(res, 'sRGBHex', '#fff')\r\n                    vo.valueNew = hex\r\n                })\r\n                .catch((err) => {\r\n                    console.log(err)\r\n                })\r\n                .finally(() => {\r\n                    vo.loadingEyeDropper = false\r\n                })\r\n\r\n        },\r\n\r\n        clickColor: function() {\r\n            // console.log('methods clickColor')\r\n\r\n            let vo = this\r\n\r\n            //check, 不可編輯時跳出\r\n            if (!vo.editable) {\r\n                return\r\n            }\r\n\r\n            //emit\r\n            vo.$emit('input', vo.valueNew)\r\n\r\n            //hide\r\n            vo.show = false\r\n\r\n        },\r\n\r\n    },\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n.icon-spinner {\r\n    animation: spin-animation 1.5s infinite;\r\n    display: inline-block;\r\n}\r\n@keyframes spin-animation {\r\n    0% {\r\n        transform: rotate(0deg);\r\n    }\r\n    100% {\r\n        transform: rotate(359deg);\r\n    }\r\n}\r\n</style>\r\n"]},media:void 0})}),jW,"data-v-ba5071e2",false,undefined,!1,_a,void 0,void 0)},props:{},data:function(){return{mdiHexagonOutline:"M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z",mdiGradientHorizontal:"M9 13V11H11V13M11 15V13H13V15M11 11V9H13V11M9 9V7H11V9M9 17V15H11V17M3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5M18 15V17H16V15M18 11V13H16V11M18 7V9H16V7M11 5V7H13V5H15V7H13V9H15V11H13V13H15V15H13V17H15V19H13V17H11V19H5V5Z",mdiRouter:"M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2M12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20M13 13V16H15L12 19L9 16H11V13M5 13H8V15L11 12L8 9V11H5M11 11V8H9L12 5L15 8H13V11M19 11H16V9L13 12L16 15V13H19",WColorSelect:{displayColorText:"show",colorPick1:"rgba(121, 51, 255, 0.53)",colorPick2:"rgba(121, 51, 255, 0.53)",colorPick3:"rgba(121, 51, 255, 0.53)",colorPick4:"rgba(121, 51, 255, 0.53)",colorPick5:"rgba(121, 51, 255, 0.53)",colorPick6:"rgba(121, 51, 255, 0.53)",colorPick7:"rgba(121, 51, 255, 0.53)",colorPick8:"rgba(121, 51, 255, 0.53)",colorPick9:"rgba(121, 51, 255, 0.53)",colorPick10:"rgba(121, 51, 255, 0.53)",colorPick11:"rgba(121, 51, 255, 0.53)",colorPick12:"rgba(121, 51, 255, 0.53)",colorPick13:"rgba(121, 51, 255, 0.53)",colorPick14:"rgba(121, 51, 255, 0.53)",colorPick15:"rgba(121, 51, 255, 0.53)",colorPick16:"rgba(121, 51, 255, 0.53)",colorPick17:"rgba(121, 51, 255, 0.53)",colorPick18:"rgba(121, 51, 255, 0.53)",colorPick19:"rgba(121, 51, 255, 0.53)",colorPick20:"rgba(121, 51, 255, 0.53)",colorPick21:"rgba(121, 51, 255, 0.53)",colorPick22:"rgba(121, 51, 255, 0.53)",colorPick23:"rgba(121, 51, 255, 0.53)",colorPick24:"rgba(121, 51, 255, 0.53)",colorPick25:"rgba(121, 51, 255, 0.53)",colorPick26:"rgba(121, 51, 255, 0.53)",colorPick27:"rgba(121, 51, 255, 0.53)",colorPick28:"rgba(121, 51, 255, 0.53)",colorPick29:"rgba(121, 51, 255, 0.53)",colorPick30:"rgba(121, 51, 255, 0.53)",colorPick31:"rgba(121, 51, 255, 0.53)",colorPick32:"rgba(121, 51, 255, 0.53)",colorPick33:"rgba(121, 51, 255, 0.53)",colorPick34:"rgba(121, 51, 255, 0.53)",colorPick35:"rgba(121, 51, 255, 0.53)"},actions:[]}},methods:{}};var zW=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"bkh"},[n._m(0),n._v(" "),t("div",[t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"default"}}),n._v(" "),t("w-color-select",{model:{value:n.WColorSelect.colorPick1,callback:function(e){n.$set(n.WColorSelect,"colorPick1",e)},expression:"WColorSelect.colorPick1"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"size"}}),n._v(" "),t("w-color-select",{attrs:{size:250},model:{value:n.WColorSelect.colorPick2,callback:function(e){n.$set(n.WColorSelect,"colorPick2",e)},expression:"WColorSelect.colorPick2"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorBlockSize"}}),n._v(" "),t("w-color-select",{attrs:{colorBlockSize:24},model:{value:n.WColorSelect.colorPick3,callback:function(e){n.$set(n.WColorSelect,"colorPick3",e)},expression:"WColorSelect.colorPick3"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorBlockBorderWidth"}}),n._v(" "),t("w-color-select",{attrs:{colorBlockBorderWidth:3},model:{value:n.WColorSelect.colorPick4,callback:function(e){n.$set(n.WColorSelect,"colorPick4",e)},expression:"WColorSelect.colorPick4"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorBlockBorderColor"}}),n._v(" "),t("w-color-select",{attrs:{colorBlockBorderColor:"#000"},model:{value:n.WColorSelect.colorPick5,callback:function(e){n.$set(n.WColorSelect,"colorPick5",e)},expression:"WColorSelect.colorPick5"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"showColorText"}}),n._v(" "),t("div",{staticStyle:{padding:"5px 0px"}},[t("w-input-radio",{attrs:{arrange:"horizontal",paddingStyle:{top:0,right:10,bottom:0,left:0},items:["show","hide"]},model:{value:n.WColorSelect.displayColorText,callback:function(e){n.$set(n.WColorSelect,"displayColorText",e)},expression:"WColorSelect.displayColorText"}})],1),n._v(" "),t("w-color-select",{attrs:{showColorText:"show"===n.WColorSelect.displayColorText},model:{value:n.WColorSelect.colorPick6,callback:function(e){n.$set(n.WColorSelect,"colorPick6",e)},expression:"WColorSelect.colorPick6"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorTextColor"}}),n._v(" "),t("w-color-select",{attrs:{colorTextColor:"#66a"},model:{value:n.WColorSelect.colorPick7,callback:function(e){n.$set(n.WColorSelect,"colorPick7",e)},expression:"WColorSelect.colorPick7"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorTextFontSize"}}),n._v(" "),t("w-color-select",{attrs:{colorTextFontSize:"0.75rem"},model:{value:n.WColorSelect.colorPick8,callback:function(e){n.$set(n.WColorSelect,"colorPick8",e)},expression:"WColorSelect.colorPick8"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"panelBackgroundColor"}}),n._v(" "),t("w-color-select",{attrs:{panelBackgroundColor:"#e5e5e5"},model:{value:n.WColorSelect.colorPick9,callback:function(e){n.$set(n.WColorSelect,"colorPick9",e)},expression:"WColorSelect.colorPick9"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"toolBackgroundColor"}}),n._v(" "),t("w-color-select",{attrs:{toolBackgroundColor:"#f2f2f2"},model:{value:n.WColorSelect.colorPick10,callback:function(e){n.$set(n.WColorSelect,"colorPick10",e)},expression:"WColorSelect.colorPick10"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuIconLump & menuIconHsva & menuIconEyeDropper"}}),n._v(" "),t("w-color-select",{attrs:{menuIconLump:n.mdiHexagonOutline,menuIconHsva:n.mdiGradientHorizontal,menuIconEyeDropper:n.mdiRouter},model:{value:n.WColorSelect.colorPick11,callback:function(e){n.$set(n.WColorSelect,"colorPick11",e)},expression:"WColorSelect.colorPick11"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuIconColor & menuIconColorHover & menuIconColorActive"}}),n._v(" "),t("w-color-select",{attrs:{menuIconColor:"#ccc",menuIconColorHover:"#aaa",menuIconColorActive:"rgb(70, 103, 181)"},model:{value:n.WColorSelect.colorPick12,callback:function(e){n.$set(n.WColorSelect,"colorPick12",e)},expression:"WColorSelect.colorPick12"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuIconSize"}}),n._v(" "),t("w-color-select",{attrs:{menuIconSize:24},model:{value:n.WColorSelect.colorPick13,callback:function(e){n.$set(n.WColorSelect,"colorPick13",e)},expression:"WColorSelect.colorPick13"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnText"}}),n._v(" "),t("w-color-select",{attrs:{btnText:"Save"},model:{value:n.WColorSelect.colorPick14,callback:function(e){n.$set(n.WColorSelect,"colorPick14",e)},expression:"WColorSelect.colorPick14"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnPaddingStyle"}}),n._v(" "),t("w-color-select",{attrs:{btnPaddingStyle:{v:1,h:4}},model:{value:n.WColorSelect.colorPick15,callback:function(e){n.$set(n.WColorSelect,"colorPick15",e)},expression:"WColorSelect.colorPick15"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnTextColor & btnTextColorHover & btnTextColorActive"}}),n._v(" "),t("w-color-select",{attrs:{btnTextColor:"#777",btnTextColorHover:"#666",btnTextColorActive:"#666"},model:{value:n.WColorSelect.colorPick16,callback:function(e){n.$set(n.WColorSelect,"colorPick16",e)},expression:"WColorSelect.colorPick16"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnTextFontSize"}}),n._v(" "),t("w-color-select",{attrs:{btnTextFontSize:"0.75rem"},model:{value:n.WColorSelect.colorPick17,callback:function(e){n.$set(n.WColorSelect,"colorPick17",e)},expression:"WColorSelect.colorPick17"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnBorderRadius"}}),n._v(" "),t("w-color-select",{attrs:{btnBorderRadius:0},model:{value:n.WColorSelect.colorPick18,callback:function(e){n.$set(n.WColorSelect,"colorPick18",e)},expression:"WColorSelect.colorPick18"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"btnBackgroundColor & btnBackgroundColorHover & btnBackgroundColorActive"}}),n._v(" "),t("w-color-select",{attrs:{btnBackgroundColor:"#f2f2f2",btnBackgroundColorHover:"#fff",btnBackgroundColorActive:"#fff"},model:{value:n.WColorSelect.colorPick19,callback:function(e){n.$set(n.WColorSelect,"colorPick19",e)},expression:"WColorSelect.colorPick19"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuTextColor & menuTextColorHover & menuTextColorActive"}}),n._v(" "),t("w-color-select",{attrs:{menuTextColor:"#888",menuTextColorHover:"#666",menuTextColorActive:"rgb(70, 103, 181)"},model:{value:n.WColorSelect.colorPick20,callback:function(e){n.$set(n.WColorSelect,"colorPick20",e)},expression:"WColorSelect.colorPick20"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuTextFontSize"}}),n._v(" "),t("w-color-select",{attrs:{menuTextFontSize:"0.75rem"},model:{value:n.WColorSelect.colorPick21,callback:function(e){n.$set(n.WColorSelect,"colorPick21",e)},expression:"WColorSelect.colorPick21"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuBorderRadius"}}),n._v(" "),t("w-color-select",{attrs:{menuBorderRadius:0},model:{value:n.WColorSelect.colorPick22,callback:function(e){n.$set(n.WColorSelect,"colorPick22",e)},expression:"WColorSelect.colorPick22"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"menuBackgroundColor & menuBackgroundColorHover & menuBackgroundColorActive"}}),n._v(" "),t("w-color-select",{attrs:{menuBackgroundColor:"transparent",menuBackgroundColorHover:"rgba(255,255,255,0.2)",menuBackgroundColorActive:"rgba(70, 103, 181, 0.2)"},model:{value:n.WColorSelect.colorPick23,callback:function(e){n.$set(n.WColorSelect,"colorPick23",e)},expression:"WColorSelect.colorPick23"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputBorderRadius"}}),n._v(" "),t("w-color-select",{attrs:{inputBorderRadius:0},model:{value:n.WColorSelect.colorPick24,callback:function(e){n.$set(n.WColorSelect,"colorPick24",e)},expression:"WColorSelect.colorPick24"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputBorderColor & inputBorderColorHover & inputBorderColorActive"}}),n._v(" "),t("w-color-select",{attrs:{inputBorderColor:"#aaa",inputBorderColorHover:"#999",inputBorderColorActive:"rgb(70, 103, 181)"},model:{value:n.WColorSelect.colorPick25,callback:function(e){n.$set(n.WColorSelect,"colorPick25",e)},expression:"WColorSelect.colorPick25"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:" inputBackgroundColor & inputBackgroundColorHover & inputBackgroundColorActive"}}),n._v(" "),t("w-color-select",{attrs:{inputBackgroundColor:"#fff",inputBackgroundColorHover:"#f2f2ff",inputBackgroundColorActive:"#eeeeff"},model:{value:n.WColorSelect.colorPick26,callback:function(e){n.$set(n.WColorSelect,"colorPick26",e)},expression:"WColorSelect.colorPick26"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputTextColor"}}),n._v(" "),t("w-color-select",{attrs:{inputTextColor:"#329"},model:{value:n.WColorSelect.colorPick27,callback:function(e){n.$set(n.WColorSelect,"colorPick27",e)},expression:"WColorSelect.colorPick27"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputTextFontSize & inputTextWidth & inputTextHeight"}}),n._v(" "),t("w-color-select",{attrs:{inputTextFontSize:"0.75rem",inputTextWidth:36,inputTextHeight:16},model:{value:n.WColorSelect.colorPick28,callback:function(e){n.$set(n.WColorSelect,"colorPick28",e)},expression:"WColorSelect.colorPick28"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputLabelColor"}}),n._v(" "),t("w-color-select",{attrs:{inputLabelColor:"#f26"},model:{value:n.WColorSelect.colorPick29,callback:function(e){n.$set(n.WColorSelect,"colorPick29",e)},expression:"WColorSelect.colorPick29"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"inputLabelWidth & inputLabelFontSize"}}),n._v(" "),t("w-color-select",{attrs:{inputLabelWidth:10,inputLabelFontSize:"0.75rem"},model:{value:n.WColorSelect.colorPick30,callback:function(e){n.$set(n.WColorSelect,"colorPick30",e)},expression:"WColorSelect.colorPick30"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"barProgHeight"}}),n._v(" "),t("w-color-select",{attrs:{barProgHeight:6},model:{value:n.WColorSelect.colorPick31,callback:function(e){n.$set(n.WColorSelect,"colorPick31",e)},expression:"WColorSelect.colorPick31"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"barProgColor & barProgBackgroundColor & barSliderBackgroundColor & barSliderBackgroundColorHover"}}),n._v(" "),t("w-color-select",{attrs:{barProgColor:"#F48FB1",barProgBackgroundColor:"#FCE4EC",barSliderBackgroundColor:"#E91E63",barSliderBackgroundColorHover:"#D81B60"},model:{value:n.WColorSelect.colorPick32,callback:function(e){n.$set(n.WColorSelect,"colorPick32",e)},expression:"WColorSelect.colorPick32"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"barSliderSize"}}),n._v(" "),t("w-color-select",{attrs:{barSliderSize:14},model:{value:n.WColorSelect.colorPick33,callback:function(e){n.$set(n.WColorSelect,"colorPick33",e)},expression:"WColorSelect.colorPick33"}})],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"colorBlockBorderColor & colorTextColor & borderColor & borderColorHover & borderColorActive & menuBackgroundColor & menuBackgroundColorHover & menuBackgroundColorActive & menuTextColor & menuTextColorHover & menuTextColorActive & menuTextFontSize & inputBorderColor & inputBorderColorHover & inputBorderColorActive & inputBackgroundColor & inputBackgroundColorHover & inputBackgroundColorActive & inputTextColor & inputLabelColor & barProgColor & barProgBackgroundColor & barSliderBackgroundColor & barSliderBackgroundColorHover & btnTextColor & btnTextColorHover & btnTextColorActive & btnBackgroundColor & btnBackgroundColorHover & btnBackgroundColorActive"}}),n._v(" "),t("div",{staticStyle:{display:"flex",padding:"20px",background:"#222"}},[t("w-color-select",{attrs:{colorBlockBorderColor:"#888",colorTextColor:"#ddd",panelBackgroundColor:"#111",toolBackgroundColor:"#222",menuIconColor:"#666",menuIconColorHover:"#777",menuIconColorActive:"#ddd",borderColor:"#333",borderColorHover:"#333",borderColorActive:"#444",backgroundColor:"#111",menuBackgroundColor:"#111",menuBackgroundColorHover:"#222",menuBackgroundColorActive:"#333",menuTextColor:"#b2b2b2",menuTextColorHover:"#ccc",menuTextColorActive:"#ddd",menuTextFontSize:"0.75rem",inputBorderColor:"#444",inputBorderColorHover:"#555",inputBorderColorActive:"#666",inputBackgroundColor:"#000",inputBackgroundColorHover:"#111",inputBackgroundColorActive:"#222",inputTextColor:"#999",inputLabelColor:"#888",barProgColor:"#888",barProgBackgroundColor:"#222",barSliderBackgroundColor:"#ccc",barSliderBackgroundColorHover:"#ddd",btnTextColor:"#eee",btnTextColorHover:"#fff",btnTextColorActive:"#fff",btnBackgroundColor:"#444",btnBackgroundColorHover:"#555",btnBackgroundColorActive:"#555"},model:{value:n.WColorSelect.colorPick34,callback:function(e){n.$set(n.WColorSelect,"colorPick34",e)},expression:"WColorSelect.colorPick34"}})],1)],1),n._v(" "),t("div",{staticClass:"bk"},[t("demolink",{attrs:{kbname:"w-color-select",casename:"not editable"}}),n._v(" "),t("w-color-select",{attrs:{editable:!1},model:{value:n.WColorSelect.colorPick35,callback:function(e){n.$set(n.WColorSelect,"colorPick35",e)},expression:"WColorSelect.colorPick35"}})],1)])])};zW._withStripped=!0;var VW={components:{WListHorizontal:za,AppZoneWBadge:pu,AppZoneWPanelStripe:fu,AppZoneWPanelBulge:Du,AppZoneWPanelAvatar:Eu,AppZoneWPanelScrolly:ip,AppZoneWPanelLabelItem:Fm,AppZoneWPanelDivideHorizontal:$m,AppZoneWPanelDivideVertical:Km,AppZoneWPanelScale:nv,AppZoneWIcon:ov,AppZoneWImageLazy:cv,AppZoneWDropfiles:yv,AppZoneWDialog:Bv,AppZoneWConfirm:Rv,AppZoneWTooltip:Vv,AppZoneWPopup:Gv,AppZoneWPopupEditText:Kv,AppZoneWDrawer:cg,AppZoneWButtonChip:mg,AppZoneWButtonCircle:hg,AppZoneWSlider:cf,AppZoneWProgressBar:gf,AppZoneWProgressCircle:kf,AppZoneWSwitch:_f,AppZoneWCheckbox:Ff,AppZoneWLevelGrade:Vf,AppZoneWAlert:Qf,AppZoneWGroupTags:tb,AppZoneWGroupDragdrop:sb,AppZoneWGroupBaggage:gb,AppZoneWListVertical:bb,AppZoneWListHorizontal:xb,AppZoneWListExpand:Hb,AppZoneWListRadio:Zb,AppZoneWListCheck:Eb,AppZoneWInputCheckbox:Jb,AppZoneWInputRadio:ty,AppZoneWGroupChipCheck:iy,AppZoneWGroupChipRadio:sy,AppZoneWGroupIconCheck:gy,AppZoneWGroupIconRadio:ky,AppZoneWText:Sy,AppZoneWTextInt:By,AppZoneWTextarea:Fy,AppZoneWTextSelect:Dy,AppZoneWTextSuggest:$y,AppZoneWTimeday:qy,AppZoneWTimeminute:pk,AppZoneWTimedayRange:yk,AppZoneWTimeminuteRange:_k,AppZoneWDynamicList:Bk,AppZoneWSegmentsVertical:Ek,AppZoneWJsonView:eC,AppZoneWTree:iC,AppZoneWHighchartsVueDyn:gC,AppZoneWHighchartsBitmapDyn:xC,AppZoneWHighstockVueDyn:_C,AppZoneWEchartsVueDyn:PC,AppZoneWThreejsVueDyn:DC,AppZoneWAggridVueDyn:XC,AppZoneWTableDyn:QC,AppZoneWImageViewerDyn:vS,AppZoneWImageCascadingDyn:WS,AppZoneWCkeditorVueDyn:BS,AppZoneWTinymceVueDyn:jS,AppZoneWQuillVueDyn:ZS,AppZoneWVditorDyn:US,AppZoneWLeafletVueDyn:ow,AppZoneWExplorer:bw,AppZoneWColorPickHexagon:Ww,AppZoneWColorPickHexagonGray:Rw,AppZoneWColorPickHsv:Ew,AppZoneWColorPickHue:Jw,AppZoneWColorPickAlpha:tW,AppZoneWColorPickStripe:iW,AppZoneWColorSelectPanelBlock:pW,AppZoneWColorSelectPanelHsva:yW,AppZoneWColorSelectPanel:_W,AppZoneWColorSelectInput:FW,AppZoneWColorSelect:wa({render:zW,staticRenderFns:[function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"head1"},[t("span",{staticStyle:{cursor:"pointer"},attrs:{title:"open for copy link to view component",onclick:"window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"}},[n._v("w-color-select")])])}]},(function(n){n&&n("data-v-b2211fb2_0",{source:"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",map:{version:3,sources:[],names:[],mappings:"",file:"AppZoneWColorSelect.vue"},media:void 0})}),DW,"data-v-b2211fb2",false,undefined,!1,_a,void 0,void 0)},data:function(){return{kebabCase:Jn,cmpsL1:[{name:"basic",cmps:[{name:"WBadge"},{name:"WSwitch"},{name:"WCheckbox"},{name:"WIcon"},{name:"WImageLazy"},{name:"WDropfiles"},{name:"WSlider"},{name:"WProgressBar"},{name:"WProgressCircle"}]},{name:"special",cmps:[{name:"WLevelGrade"}]},{name:"panel",cmps:[{name:"WPanelStripe"},{name:"WPanelBulge"},{name:"WPanelAvatar"},{name:"WPanelScrolly"},{name:"WPanelLabelItem"},{name:"WPanelDivideHorizontal"},{name:"WPanelDivideVertical"},{name:"WPanelScale"}]},{name:"button",cmps:[{name:"WButtonChip"},{name:"WButtonCircle"}]},{name:"group",cmps:[{name:"WInputCheckbox"},{name:"WInputRadio"},{name:"WGroupChipCheck"},{name:"WGroupChipRadio"},{name:"WGroupIconCheck"},{name:"WGroupIconRadio"},{name:"WGroupTags"},{name:"WGroupDragdrop"},{name:"WGroupBaggage"}]},{name:"list",cmps:[{name:"WListHorizontal"},{name:"WListVertical"},{name:"WListExpand"},{name:"WListRadio"},{name:"WListCheck"},{name:"WDynamicList"},{name:"WSegmentsVertical"}]},{name:"text",cmps:[{name:"WText"},{name:"WTextarea"},{name:"WTextInt"},{name:"WTextSelect"},{name:"WTextSuggest"}]},{name:"time",cmps:[{name:"WTimeday"},{name:"WTimeminute"},{name:"WTimedayRange"},{name:"WTimeminuteRange"}]},{name:"color",cmps:[{name:"pick",cmps:[{name:"WColorPickHexagon"},{name:"WColorPickHexagonGray"},{name:"WColorPickHsv"},{name:"WColorPickHue"},{name:"WColorPickAlpha"},{name:"WColorPickStripe"}]},{name:"select",cmps:[{name:"WColorSelectPanelBlock"},{name:"WColorSelectPanelHsva"},{name:"WColorSelectPanel"},{name:"WColorSelectInput"},{name:"WColorSelect"}]}]},{name:"tree",cmps:[{name:"WTree"},{name:"WExplorer"},{name:"WJsonView"}]},{name:"window",cmps:[{name:"WAlert"},{name:"WDialog"},{name:"WConfirm"},{name:"WTooltip"},{name:"WPopup"},{name:"WPopupEditText"},{name:"WDrawer"}]},{name:"dynamic",cmps:[{name:"plot",cmps:[{name:"WHighchartsVueDyn"},{name:"WHighchartsBitmapDyn"},{name:"WHighstockVueDyn"},{name:"WEchartsVueDyn"},{name:"WThreejsVueDyn"}]},{name:"table",cmps:[{name:"WAggridVueDyn"},{name:"WTableDyn"}]},{name:"map",cmps:[{name:"WLeafletVueDyn"}]},{name:"imageViewer",cmps:[{name:"WImageViewerDyn"},{name:"WImageCascadingDyn"}]},{name:"editor",cmps:[{name:"WTinymceVueDyn"},{name:"WCkeditorVueDyn"},{name:"WQuillVueDyn"},{name:"WVditorDyn"}]}]}],indP1:null,cmpP1:null,cmpsL2:null,indP2:null,cmpP2:null,cmpsL3:null,indP3:null,cmpP3:null,cmpsL4:null,cmpPick:""}},mounted:function(){let n=this;n.indP1=0,n.indP2=0,n.indP3=0;let e=function(n){if(!Ao(n))return{};if(!Ao(n=fn(n=lt(n,"?"),"[1]")))return{};let e=lt(n,"&");return e=Io(e,(function(n){return lt(n,"=")})),e=function(n){for(var e=-1,t=null==n?0:n.length,o={};++e<t;){var r=n[e];o[r[0]]=r[1]}return o}(e),e}(location.href);n.viewPick(fn(e,"cmp",""))},computed:{changeMenus:function(){let n=this;return n.modifyMenus(n.indP1,n.indP2,n.indP3),""},isNarrow:function(){return window.innerWidth<1e3}},methods:{modifyMenus:function(){let n=this,e="";setTimeout((()=>{n.cmpP1=fn(n.cmpsL1,n.indP1,{}),n.cmpsL2=fn(n.cmpP1,"cmps",[]);let t=fn(n.cmpP1,"name","");t&&(e=t)}),50),setTimeout((()=>{let t=fn(n.cmpP1,"cmps",[]);n.cmpP2=fn(t,n.indP2,{}),n.cmpsL3=fn(n.cmpP2,"cmps",[]);let o=fn(n.cmpP2,"name","");o&&(e=o)}),100),setTimeout((()=>{let t=fn(n.cmpP2,"cmps",[]);n.cmpP3=fn(t,n.indP3,{}),n.cmpsL4=fn(n.cmpP3,"cmps",[]);let o=fn(n.cmpP3,"name","");o&&(e=o),n.cmpPick=e}),150)},getInd:function(n,e){let t=-1;return Ve(e,((e,o)=>{if(n.name===e.name)return t=o,!1})),t},viewPick:function(n){let e=this,t=Jn(n),o="",r=[],i=n=>{Ve(n,((n,e)=>{r.push(e);let a=fn(n,"name",""),l=Jn(a),s=fn(n,"cmps",[]);r.join("."),l===t&&(o=JSON.parse(JSON.stringify(r))),s.length>0&&i(s),r.pop()}))};i(e.cmpsL1),e.indP1=fn(o,0,0),e.indP2=fn(o,1,0),e.indP3=fn(o,2,0)}}};const ZW=VW;var $W=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("v-app",{staticStyle:{"font-family":"inherit"},attrs:{changeMenus:n.changeMenus}},[n.isNarrow?n._e():[t("a",{staticClass:"github-corner",staticStyle:{position:"fixed",top:"0",right:"0",border:"0","z-index":"10000"},attrs:{href:"https://github.com/yuda-lyu/w-component-vue","aria-label":"View source on GitHub",target:"_blank",rel:"noreferrer noopener"}},[t("svg",{staticStyle:{fill:"rgba(0,0,0,0.25)",color:"#fff",position:"absolute",top:"0",border:"0",right:"0"},attrs:{width:"80",height:"80",viewBox:"0 0 250 250","aria-hidden":"true"}},[t("path",{attrs:{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"}}),t("path",{staticClass:"octo-arm",staticStyle:{"transform-origin":"130px 106px"},attrs:{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"currentColor"}}),t("path",{staticClass:"octo-body",attrs:{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"currentColor"}})])])],n._v(" "),t("div",{staticStyle:{background:"#f5f5f5"}},[n.cmpsL1&&n.cmpsL1.length>0?t("div",{staticStyle:{width:"calc( 100vw - 20px )","overflow-x":"auto"}},[t("WListHorizontal",{attrs:{items:n.cmpsL1,itemActive:n.cmpP1,itemBackgroundColor:"transparent",itemBackgroundColorHover:"#eee",itemBackgroundColorActive:"#eee",keyText:"name",paddingStyle:{v:12,h:20}},on:{"update:itemActive":[function(e){n.cmpP1=e},function(e){n.indP3=0,n.indP2=0,n.indP1=n.getInd(e,n.cmpsL1)}],"update:item-active":function(e){n.cmpP1=e}},scopedSlots:n._u([{key:"item",fn:function(e){return[t("div",{},[n._v("\n                        "+n._s(n.kebabCase(e.item.name))+"\n                    ")])]}}],null,!1,2540628071)}),n._v(" "),t("div",{staticStyle:{height:"1px",background:"#ddd"}})],1):n._e(),n._v(" "),n.cmpsL2&&n.cmpsL2.length>0?t("div",{staticStyle:{width:"calc( 100vw - 20px )","overflow-x":"auto"}},[t("div",{staticStyle:{height:"3px",background:"#fff"}}),n._v(" "),t("WListHorizontal",{attrs:{items:n.cmpsL2,itemActive:n.cmpP2,itemBackgroundColor:"transparent",itemBackgroundColorHover:"#eee",itemBackgroundColorActive:"#eee",keyText:"name",paddingStyle:{v:12,h:20}},on:{"update:itemActive":[function(e){n.cmpP2=e},function(e){n.indP3=0,n.indP2=n.getInd(e,n.cmpsL2)}],"update:item-active":function(e){n.cmpP2=e}},scopedSlots:n._u([{key:"item",fn:function(e){return[t("div",{},[n._v("\n                        "+n._s(n.kebabCase(e.item.name))+"\n                    ")])]}}],null,!1,2540628071)}),n._v(" "),t("div",{staticStyle:{height:"1px",background:"#ddd"}})],1):n._e(),n._v(" "),n.cmpsL3&&n.cmpsL3.length>0?t("div",{staticStyle:{width:"calc( 100vw - 20px )","overflow-x":"auto"}},[t("div",{staticStyle:{height:"3px",background:"#fff"}}),n._v(" "),t("WListHorizontal",{attrs:{items:n.cmpsL3,itemActive:n.cmpP3,itemBackgroundColor:"transparent",itemBackgroundColorHover:"#eee",itemBackgroundColorActive:"#eee",keyText:"name",paddingStyle:{v:12,h:20}},on:{"update:itemActive":[function(e){n.cmpP3=e},function(e){n.indP3=n.getInd(e,n.cmpsL3)}],"update:item-active":function(e){n.cmpP3=e}},scopedSlots:n._u([{key:"item",fn:function(e){return[t("div",{},[n._v("\n                        "+n._s(n.kebabCase(e.item.name))+"\n                    ")])]}}],null,!1,2540628071)}),n._v(" "),t("div",{staticStyle:{height:"1px",background:"#ddd"}})],1):n._e()]),n._v(" "),t("div",["WBadge"===n.cmpPick?t("AppZoneWBadge"):n._e(),n._v(" "),"WPanelStripe"===n.cmpPick?t("AppZoneWPanelStripe"):n._e(),n._v(" "),"WPanelBulge"===n.cmpPick?t("AppZoneWPanelBulge"):n._e(),n._v(" "),"WPanelAvatar"===n.cmpPick?t("AppZoneWPanelAvatar"):n._e(),n._v(" "),"WPanelScrolly"===n.cmpPick?t("AppZoneWPanelScrolly"):n._e(),n._v(" "),"WPanelLabelItem"===n.cmpPick?t("AppZoneWPanelLabelItem"):n._e(),n._v(" "),"WPanelDivideHorizontal"===n.cmpPick?t("AppZoneWPanelDivideHorizontal"):n._e(),n._v(" "),"WPanelDivideVertical"===n.cmpPick?t("AppZoneWPanelDivideVertical"):n._e(),n._v(" "),"WPanelScale"===n.cmpPick?t("AppZoneWPanelScale"):n._e(),n._v(" "),"WIcon"===n.cmpPick?t("AppZoneWIcon"):n._e(),n._v(" "),"WImageLazy"===n.cmpPick?t("AppZoneWImageLazy"):n._e(),n._v(" "),"WDropfiles"===n.cmpPick?t("AppZoneWDropfiles"):n._e(),n._v(" "),"WButtonChip"===n.cmpPick?t("AppZoneWButtonChip"):n._e(),n._v(" "),"WButtonCircle"===n.cmpPick?t("AppZoneWButtonCircle"):n._e(),n._v(" "),"WSlider"===n.cmpPick?t("AppZoneWSlider"):n._e(),n._v(" "),"WProgressBar"===n.cmpPick?t("AppZoneWProgressBar"):n._e(),n._v(" "),"WProgressCircle"===n.cmpPick?t("AppZoneWProgressCircle"):n._e(),n._v(" "),"WSwitch"===n.cmpPick?t("AppZoneWSwitch"):n._e(),n._v(" "),"WCheckbox"===n.cmpPick?t("AppZoneWCheckbox"):n._e(),n._v(" "),"WLevelGrade"===n.cmpPick?t("AppZoneWLevelGrade"):n._e(),n._v(" "),"WAlert"===n.cmpPick?t("AppZoneWAlert"):n._e(),n._v(" "),"WDialog"===n.cmpPick?t("AppZoneWDialog"):n._e(),n._v(" "),"WConfirm"===n.cmpPick?t("AppZoneWConfirm"):n._e(),n._v(" "),"WTooltip"===n.cmpPick?t("AppZoneWTooltip"):n._e(),n._v(" "),"WPopup"===n.cmpPick?t("AppZoneWPopup"):n._e(),n._v(" "),"WPopupEditText"===n.cmpPick?t("AppZoneWPopupEditText"):n._e(),n._v(" "),"WDrawer"===n.cmpPick?t("AppZoneWDrawer"):n._e(),n._v(" "),"WGroupTags"===n.cmpPick?t("AppZoneWGroupTags"):n._e(),n._v(" "),"WGroupDragdrop"===n.cmpPick?t("AppZoneWGroupDragdrop"):n._e(),n._v(" "),"WGroupBaggage"===n.cmpPick?t("AppZoneWGroupBaggage"):n._e(),n._v(" "),"WListVertical"===n.cmpPick?t("AppZoneWListVertical"):n._e(),n._v(" "),"WListHorizontal"===n.cmpPick?t("AppZoneWListHorizontal"):n._e(),n._v(" "),"WInputRadio"===n.cmpPick?t("AppZoneWInputRadio"):n._e(),n._v(" "),"WInputCheckbox"===n.cmpPick?t("AppZoneWInputCheckbox"):n._e(),n._v(" "),"WListExpand"===n.cmpPick?t("AppZoneWListExpand"):n._e(),n._v(" "),"WListRadio"===n.cmpPick?t("AppZoneWListRadio"):n._e(),n._v(" "),"WListCheck"===n.cmpPick?t("AppZoneWListCheck"):n._e(),n._v(" "),"WGroupChipCheck"===n.cmpPick?t("AppZoneWGroupChipCheck"):n._e(),n._v(" "),"WGroupChipRadio"===n.cmpPick?t("AppZoneWGroupChipRadio"):n._e(),n._v(" "),"WGroupIconCheck"===n.cmpPick?t("AppZoneWGroupIconCheck"):n._e(),n._v(" "),"WGroupIconRadio"===n.cmpPick?t("AppZoneWGroupIconRadio"):n._e(),n._v(" "),"WText"===n.cmpPick?t("AppZoneWText"):n._e(),n._v(" "),"WTextInt"===n.cmpPick?t("AppZoneWTextInt"):n._e(),n._v(" "),"WTextarea"===n.cmpPick?t("AppZoneWTextarea"):n._e(),n._v(" "),"WTextSelect"===n.cmpPick?t("AppZoneWTextSelect"):n._e(),n._v(" "),"WTextSuggest"===n.cmpPick?t("AppZoneWTextSuggest"):n._e(),n._v(" "),"WTimeday"===n.cmpPick?t("AppZoneWTimeday"):n._e(),n._v(" "),"WTimeminute"===n.cmpPick?t("AppZoneWTimeminute"):n._e(),n._v(" "),"WTimedayRange"===n.cmpPick?t("AppZoneWTimedayRange"):n._e(),n._v(" "),"WTimeminuteRange"===n.cmpPick?t("AppZoneWTimeminuteRange"):n._e(),n._v(" "),"WDynamicList"===n.cmpPick?t("AppZoneWDynamicList"):n._e(),n._v(" "),"WSegmentsVertical"===n.cmpPick?t("AppZoneWSegmentsVertical"):n._e(),n._v(" "),"WJsonView"===n.cmpPick?t("AppZoneWJsonView"):n._e(),n._v(" "),"WTree"===n.cmpPick?t("AppZoneWTree"):n._e(),n._v(" "),"WHighchartsVueDyn"===n.cmpPick?t("AppZoneWHighchartsVueDyn"):n._e(),n._v(" "),"WHighchartsBitmapDyn"===n.cmpPick?t("AppZoneWHighchartsBitmapDyn"):n._e(),n._v(" "),"WHighstockVueDyn"===n.cmpPick?t("AppZoneWHighstockVueDyn"):n._e(),n._v(" "),"WEchartsVueDyn"===n.cmpPick?t("AppZoneWEchartsVueDyn"):n._e(),n._v(" "),"WThreejsVueDyn"===n.cmpPick?t("AppZoneWThreejsVueDyn"):n._e(),n._v(" "),"WAggridVueDyn"===n.cmpPick?t("AppZoneWAggridVueDyn"):n._e(),n._v(" "),"WTableDyn"===n.cmpPick?t("AppZoneWTableDyn"):n._e(),n._v(" "),"WImageViewerDyn"===n.cmpPick?t("AppZoneWImageViewerDyn"):n._e(),n._v(" "),"WImageCascadingDyn"===n.cmpPick?t("AppZoneWImageCascadingDyn"):n._e(),n._v(" "),"WCkeditorVueDyn"===n.cmpPick?t("AppZoneWCkeditorVueDyn"):n._e(),n._v(" "),"WTinymceVueDyn"===n.cmpPick?t("AppZoneWTinymceVueDyn"):n._e(),n._v(" "),"WQuillVueDyn"===n.cmpPick?t("AppZoneWQuillVueDyn"):n._e(),n._v(" "),"WVditorDyn"===n.cmpPick?t("AppZoneWVditorDyn"):n._e(),n._v(" "),"WLeafletVueDyn"===n.cmpPick?t("AppZoneWLeafletVueDyn"):n._e(),n._v(" "),"WExplorer"===n.cmpPick?t("AppZoneWExplorer"):n._e(),n._v(" "),"WColorPickHexagon"===n.cmpPick?t("AppZoneWColorPickHexagon"):n._e(),n._v(" "),"WColorPickHexagonGray"===n.cmpPick?t("AppZoneWColorPickHexagonGray"):n._e(),n._v(" "),"WColorPickHsv"===n.cmpPick?t("AppZoneWColorPickHsv"):n._e(),n._v(" "),"WColorPickHue"===n.cmpPick?t("AppZoneWColorPickHue"):n._e(),n._v(" "),"WColorPickAlpha"===n.cmpPick?t("AppZoneWColorPickAlpha"):n._e(),n._v(" "),"WColorPickStripe"===n.cmpPick?t("AppZoneWColorPickStripe"):n._e(),n._v(" "),"WColorSelectPanelBlock"===n.cmpPick?t("AppZoneWColorSelectPanelBlock"):n._e(),n._v(" "),"WColorSelectPanelHsva"===n.cmpPick?t("AppZoneWColorSelectPanelHsva"):n._e(),n._v(" "),"WColorSelectPanel"===n.cmpPick?t("AppZoneWColorSelectPanel"):n._e(),n._v(" "),"WColorSelectInput"===n.cmpPick?t("AppZoneWColorSelectInput"):n._e(),n._v(" "),"WColorSelect"===n.cmpPick?t("AppZoneWColorSelect"):n._e()],1)],2)};$W._withStripped=!0;return wa({render:$W,staticRenderFns:[]},(function(n){n&&n("data-v-d8b1e9aa_0",{source:"\n.v-application--wrap {\n    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */\n    width: 100vw !important;\n    max-width: 100vw !important;\n    font-family: inherit;\n    background: #fff;\n}\n/* 組件所須全域樣式 */\n.head1 {\n    padding: 0px 0px 20px 0px;\n    font-size: 2.5rem;\n}\n.bkh { /* 寬 */\n    padding:20px;\n}\n@media screen and (max-width:800px){ /* 中 */\n.bkh {\n        padding:10px;\n}\n}\n@media screen and (max-width:400px){ /* 窄 */\n.bkh {\n        padding:5px;\n}\n}\n.bk { /* 寬 */\n    display: inline-block;\n    vertical-align: top;\n    padding: 0px 80px 60px 0px;\n}\n@media screen and (max-width:1000px){ /* 中窄 */\n.bk {\n        display: block;\n        padding: 0px 0px 50px 0px;\n}\n}\n.cpitem {\n    transition: all 0.3s;\n    padding: 5px 15px;\n    cursor: pointer;\n}\n.cpitem-white {\n    background: #fff;\n}\n.cpitem-white:hover {\n    background: #eee;\n}\n.cpitem-black {\n    background: #333;\n}\n.cpitem-black:hover {\n    background: #555;\n}\n",map:{version:3,sources:["D:\\- 006 -        開源\\開源-JS-103-2-w-component-vue\\w-component-vue\\src\\App.vue"],names:[],mappings:";AAowBA;IACA,2DAAA;IACA,uBAAA;IACA,2BAAA;IACA,oBAAA;IACA,gBAAA;AACA;AACA,aAAA;AACA;IACA,yBAAA;IACA,iBAAA;AACA;AACA,OAAA,MAAA;IACA,YAAA;AACA;AACA,qCAAA,MAAA;AACA;QACA,YAAA;AACA;AACA;AACA,qCAAA,MAAA;AACA;QACA,WAAA;AACA;AACA;AACA,MAAA,MAAA;IACA,qBAAA;IACA,mBAAA;IACA,0BAAA;AACA;AACA,sCAAA,OAAA;AACA;QACA,cAAA;QACA,yBAAA;AACA;AACA;AACA;IACA,oBAAA;IACA,iBAAA;IACA,eAAA;AACA;AACA;IACA,gBAAA;AACA;AACA;IACA,gBAAA;AACA;AACA;IACA,gBAAA;AACA;AACA;IACA,gBAAA;AACA",file:"App.vue",sourcesContent:["<template>\n    <v-app\n        style=\"font-family:inherit;\"\n        :changeMenus=\"changeMenus\"\n    >\n\n\n        <template v-if=\"!isNarrow\">\n            <a href=\"https://github.com/yuda-lyu/w-component-vue\" class=\"github-corner\" style=\"position:fixed; top:0; right:0; border:0; z-index:10000;\" aria-label=\"View source on GitHub\" target=\"_blank\" rel=\"noreferrer noopener\">\n                <svg width=\"80\" height=\"80\" viewBox=\"0 0 250 250\" style=\"fill:rgba(0,0,0,0.25); color:#fff; position: absolute; top: 0; border: 0; right: 0;\" aria-hidden=\"true\"><path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path><path d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\" fill=\"currentColor\" style=\"transform-origin: 130px 106px;\" class=\"octo-arm\"></path><path d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\" fill=\"currentColor\" class=\"octo-body\"></path></svg>\n            </a>\n        </template>\n\n\n        <div style=\"background:#f5f5f5;\">\n\n            <div style=\"width:calc( 100vw - 20px ); overflow-x:auto;\" v-if=\"cmpsL1 && cmpsL1.length>0\">\n                <WListHorizontal\n                    :items=\"cmpsL1\"\n                    :itemActive.sync=\"cmpP1\"\n                    :itemBackgroundColor=\"'transparent'\"\n                    :itemBackgroundColorHover=\"'#eee'\"\n                    :itemBackgroundColorActive=\"'#eee'\"\n                    :keyText=\"'name'\"\n                    :paddingStyle=\"{v:12,h:20}\"\n                    @update:itemActive=\"(v)=>{indP3=0;indP2=0;indP1=getInd(v,cmpsL1)}\"\n                >\n                    <template v-slot:item=\"props\">\n                        <div style=\"\">\n                            {{kebabCase(props.item.name)}}\n                        </div>\n                    </template>\n                </WListHorizontal>\n                <div style=\"height:1px; background:#ddd;\"></div>\n            </div>\n\n            <div style=\"width:calc( 100vw - 20px ); overflow-x:auto;\" v-if=\"cmpsL2 && cmpsL2.length>0\">\n                <div style=\"height:3px; background:#fff;\"></div>\n                <WListHorizontal\n                    :items=\"cmpsL2\"\n                    :itemActive.sync=\"cmpP2\"\n                    :itemBackgroundColor=\"'transparent'\"\n                    :itemBackgroundColorHover=\"'#eee'\"\n                    :itemBackgroundColorActive=\"'#eee'\"\n                    :keyText=\"'name'\"\n                    :paddingStyle=\"{v:12,h:20}\"\n                    @update:itemActive=\"(v)=>{indP3=0;indP2=getInd(v,cmpsL2)}\"\n                >\n                    <template v-slot:item=\"props\">\n                        <div style=\"\">\n                            {{kebabCase(props.item.name)}}\n                        </div>\n                    </template>\n                </WListHorizontal>\n                <div style=\"height:1px; background:#ddd;\"></div>\n            </div>\n\n            <div style=\"width:calc( 100vw - 20px ); overflow-x:auto;\" v-if=\"cmpsL3 && cmpsL3.length>0\">\n                <div style=\"height:3px; background:#fff;\"></div>\n                <WListHorizontal\n                    :items=\"cmpsL3\"\n                    :itemActive.sync=\"cmpP3\"\n                    :itemBackgroundColor=\"'transparent'\"\n                    :itemBackgroundColorHover=\"'#eee'\"\n                    :itemBackgroundColorActive=\"'#eee'\"\n                    :keyText=\"'name'\"\n                    :paddingStyle=\"{v:12,h:20}\"\n                    @update:itemActive=\"(v)=>{indP3=getInd(v,cmpsL3)}\"\n                >\n                    <template v-slot:item=\"props\">\n                        <div style=\"\">\n                            {{kebabCase(props.item.name)}}\n                        </div>\n                    </template>\n                </WListHorizontal>\n                <div style=\"height:1px; background:#ddd;\"></div>\n            </div>\n\n        </div>\n\n\n        <div>\n\n            <AppZoneWBadge v-if=\"cmpPick==='WBadge'\"></AppZoneWBadge>\n\n            <AppZoneWPanelStripe v-if=\"cmpPick==='WPanelStripe'\"></AppZoneWPanelStripe>\n\n            <AppZoneWPanelBulge v-if=\"cmpPick==='WPanelBulge'\"></AppZoneWPanelBulge>\n\n            <AppZoneWPanelAvatar v-if=\"cmpPick==='WPanelAvatar'\"></AppZoneWPanelAvatar>\n\n            <AppZoneWPanelScrolly v-if=\"cmpPick==='WPanelScrolly'\"></AppZoneWPanelScrolly>\n\n            <AppZoneWPanelLabelItem v-if=\"cmpPick==='WPanelLabelItem'\"></AppZoneWPanelLabelItem>\n\n            <AppZoneWPanelDivideHorizontal v-if=\"cmpPick==='WPanelDivideHorizontal'\"></AppZoneWPanelDivideHorizontal>\n\n            <AppZoneWPanelDivideVertical v-if=\"cmpPick==='WPanelDivideVertical'\"></AppZoneWPanelDivideVertical>\n\n            <AppZoneWPanelScale v-if=\"cmpPick==='WPanelScale'\"></AppZoneWPanelScale>\n\n            <AppZoneWIcon v-if=\"cmpPick==='WIcon'\"></AppZoneWIcon>\n\n            <AppZoneWImageLazy v-if=\"cmpPick==='WImageLazy'\"></AppZoneWImageLazy>\n\n            <AppZoneWDropfiles v-if=\"cmpPick==='WDropfiles'\"></AppZoneWDropfiles>\n\n            <AppZoneWButtonChip v-if=\"cmpPick==='WButtonChip'\"></AppZoneWButtonChip>\n\n            <AppZoneWButtonCircle v-if=\"cmpPick==='WButtonCircle'\"></AppZoneWButtonCircle>\n\n            <AppZoneWSlider v-if=\"cmpPick==='WSlider'\"></AppZoneWSlider>\n\n            <AppZoneWProgressBar v-if=\"cmpPick==='WProgressBar'\"></AppZoneWProgressBar>\n\n            <AppZoneWProgressCircle v-if=\"cmpPick==='WProgressCircle'\"></AppZoneWProgressCircle>\n\n            <AppZoneWSwitch v-if=\"cmpPick==='WSwitch'\"></AppZoneWSwitch>\n\n            <AppZoneWCheckbox v-if=\"cmpPick==='WCheckbox'\"></AppZoneWCheckbox>\n\n            <AppZoneWLevelGrade v-if=\"cmpPick==='WLevelGrade'\"></AppZoneWLevelGrade>\n\n            <AppZoneWAlert v-if=\"cmpPick==='WAlert'\"></AppZoneWAlert>\n\n            <AppZoneWDialog v-if=\"cmpPick==='WDialog'\"></AppZoneWDialog>\n\n            <AppZoneWConfirm v-if=\"cmpPick==='WConfirm'\"></AppZoneWConfirm>\n\n            <AppZoneWTooltip v-if=\"cmpPick==='WTooltip'\"></AppZoneWTooltip>\n\n            <AppZoneWPopup v-if=\"cmpPick==='WPopup'\"></AppZoneWPopup>\n\n            <AppZoneWPopupEditText v-if=\"cmpPick==='WPopupEditText'\"></AppZoneWPopupEditText>\n\n            <AppZoneWDrawer v-if=\"cmpPick==='WDrawer'\"></AppZoneWDrawer>\n\n            <AppZoneWGroupTags v-if=\"cmpPick==='WGroupTags'\"></AppZoneWGroupTags>\n\n            <AppZoneWGroupDragdrop v-if=\"cmpPick==='WGroupDragdrop'\"></AppZoneWGroupDragdrop>\n\n            <AppZoneWGroupBaggage v-if=\"cmpPick==='WGroupBaggage'\"></AppZoneWGroupBaggage>\n\n            <AppZoneWListVertical v-if=\"cmpPick==='WListVertical'\"></AppZoneWListVertical>\n\n            <AppZoneWListHorizontal v-if=\"cmpPick==='WListHorizontal'\"></AppZoneWListHorizontal>\n\n            <AppZoneWInputRadio v-if=\"cmpPick==='WInputRadio'\"></AppZoneWInputRadio>\n\n            <AppZoneWInputCheckbox v-if=\"cmpPick==='WInputCheckbox'\"></AppZoneWInputCheckbox>\n\n            <AppZoneWListExpand v-if=\"cmpPick==='WListExpand'\"></AppZoneWListExpand>\n\n            <AppZoneWListRadio v-if=\"cmpPick==='WListRadio'\"></AppZoneWListRadio>\n\n            <AppZoneWListCheck v-if=\"cmpPick==='WListCheck'\"></AppZoneWListCheck>\n\n            <AppZoneWGroupChipCheck v-if=\"cmpPick==='WGroupChipCheck'\"></AppZoneWGroupChipCheck>\n\n            <AppZoneWGroupChipRadio v-if=\"cmpPick==='WGroupChipRadio'\"></AppZoneWGroupChipRadio>\n\n            <AppZoneWGroupIconCheck v-if=\"cmpPick==='WGroupIconCheck'\"></AppZoneWGroupIconCheck>\n\n            <AppZoneWGroupIconRadio v-if=\"cmpPick==='WGroupIconRadio'\"></AppZoneWGroupIconRadio>\n\n            <AppZoneWText v-if=\"cmpPick==='WText'\"></AppZoneWText>\n\n            <AppZoneWTextInt v-if=\"cmpPick==='WTextInt'\"></AppZoneWTextInt>\n\n            <AppZoneWTextarea v-if=\"cmpPick==='WTextarea'\"></AppZoneWTextarea>\n\n            <AppZoneWTextSelect v-if=\"cmpPick==='WTextSelect'\"></AppZoneWTextSelect>\n\n            <AppZoneWTextSuggest v-if=\"cmpPick==='WTextSuggest'\"></AppZoneWTextSuggest>\n\n            <AppZoneWTimeday v-if=\"cmpPick==='WTimeday'\"></AppZoneWTimeday>\n\n            <AppZoneWTimeminute v-if=\"cmpPick==='WTimeminute'\"></AppZoneWTimeminute>\n\n            <AppZoneWTimedayRange v-if=\"cmpPick==='WTimedayRange'\"></AppZoneWTimedayRange>\n\n            <AppZoneWTimeminuteRange v-if=\"cmpPick==='WTimeminuteRange'\"></AppZoneWTimeminuteRange>\n\n            <AppZoneWDynamicList v-if=\"cmpPick==='WDynamicList'\"></AppZoneWDynamicList>\n\n            <AppZoneWSegmentsVertical v-if=\"cmpPick==='WSegmentsVertical'\"></AppZoneWSegmentsVertical>\n\n            <AppZoneWJsonView v-if=\"cmpPick==='WJsonView'\"></AppZoneWJsonView>\n\n            <AppZoneWTree v-if=\"cmpPick==='WTree'\"></AppZoneWTree>\n\n            <AppZoneWHighchartsVueDyn v-if=\"cmpPick==='WHighchartsVueDyn'\"></AppZoneWHighchartsVueDyn>\n\n            <AppZoneWHighchartsBitmapDyn v-if=\"cmpPick==='WHighchartsBitmapDyn'\"></AppZoneWHighchartsBitmapDyn>\n\n            <AppZoneWHighstockVueDyn v-if=\"cmpPick==='WHighstockVueDyn'\"></AppZoneWHighstockVueDyn>\n\n            <AppZoneWEchartsVueDyn v-if=\"cmpPick==='WEchartsVueDyn'\"></AppZoneWEchartsVueDyn>\n\n            <AppZoneWThreejsVueDyn v-if=\"cmpPick==='WThreejsVueDyn'\"></AppZoneWThreejsVueDyn>\n\n            <AppZoneWAggridVueDyn v-if=\"cmpPick==='WAggridVueDyn'\"></AppZoneWAggridVueDyn>\n\n            <AppZoneWTableDyn v-if=\"cmpPick==='WTableDyn'\"></AppZoneWTableDyn>\n\n            <AppZoneWImageViewerDyn v-if=\"cmpPick==='WImageViewerDyn'\"></AppZoneWImageViewerDyn>\n\n            <AppZoneWImageCascadingDyn v-if=\"cmpPick==='WImageCascadingDyn'\"></AppZoneWImageCascadingDyn>\n\n            <AppZoneWCkeditorVueDyn v-if=\"cmpPick==='WCkeditorVueDyn'\"></AppZoneWCkeditorVueDyn>\n\n            <AppZoneWTinymceVueDyn v-if=\"cmpPick==='WTinymceVueDyn'\"></AppZoneWTinymceVueDyn>\n\n            <AppZoneWQuillVueDyn v-if=\"cmpPick==='WQuillVueDyn'\"></AppZoneWQuillVueDyn>\n\n            <AppZoneWVditorDyn v-if=\"cmpPick==='WVditorDyn'\"></AppZoneWVditorDyn>\n\n            <AppZoneWLeafletVueDyn v-if=\"cmpPick==='WLeafletVueDyn'\"></AppZoneWLeafletVueDyn>\n\n            <AppZoneWExplorer v-if=\"cmpPick==='WExplorer'\"></AppZoneWExplorer>\n\n            <AppZoneWColorPickHexagon v-if=\"cmpPick==='WColorPickHexagon'\"></AppZoneWColorPickHexagon>\n\n            <AppZoneWColorPickHexagonGray v-if=\"cmpPick==='WColorPickHexagonGray'\"></AppZoneWColorPickHexagonGray>\n\n            <AppZoneWColorPickHsv v-if=\"cmpPick==='WColorPickHsv'\"></AppZoneWColorPickHsv>\n\n            <AppZoneWColorPickHue v-if=\"cmpPick==='WColorPickHue'\"></AppZoneWColorPickHue>\n\n            <AppZoneWColorPickAlpha v-if=\"cmpPick==='WColorPickAlpha'\"></AppZoneWColorPickAlpha>\n\n            <AppZoneWColorPickStripe v-if=\"cmpPick==='WColorPickStripe'\"></AppZoneWColorPickStripe>\n\n            <AppZoneWColorSelectPanelBlock v-if=\"cmpPick==='WColorSelectPanelBlock'\"></AppZoneWColorSelectPanelBlock>\n\n            <AppZoneWColorSelectPanelHsva v-if=\"cmpPick==='WColorSelectPanelHsva'\"></AppZoneWColorSelectPanelHsva>\n\n            <AppZoneWColorSelectPanel v-if=\"cmpPick==='WColorSelectPanel'\"></AppZoneWColorSelectPanel>\n\n            <AppZoneWColorSelectInput v-if=\"cmpPick==='WColorSelectInput'\"></AppZoneWColorSelectInput>\n\n            <AppZoneWColorSelect v-if=\"cmpPick==='WColorSelect'\"></AppZoneWColorSelect>\n\n\n        </div>\n\n\n    </v-app>\n</template>\n\n<script>\nimport get from 'lodash-es/get.js'\nimport kebabCase from 'lodash-es/kebabCase.js'\nimport each from 'lodash-es/each.js'\n// import cloneDeep from 'lodash-es/cloneDeep.js'\nimport urlParse from 'wsemi/src/urlParse.mjs'\nimport WListHorizontal from './components/WListHorizontal.vue'\nimport AppZoneWBadge from './AppZoneWBadge.vue'\nimport AppZoneWPanelStripe from './AppZoneWPanelStripe.vue'\nimport AppZoneWPanelBulge from './AppZoneWPanelBulge.vue'\nimport AppZoneWPanelAvatar from './AppZoneWPanelAvatar.vue'\nimport AppZoneWPanelScrolly from './AppZoneWPanelScrolly.vue'\nimport AppZoneWPanelLabelItem from './AppZoneWPanelLabelItem.vue'\nimport AppZoneWPanelDivideHorizontal from './AppZoneWPanelDivideHorizontal.vue'\nimport AppZoneWPanelDivideVertical from './AppZoneWPanelDivideVertical.vue'\nimport AppZoneWPanelScale from './AppZoneWPanelScale.vue'\nimport AppZoneWIcon from './AppZoneWIcon.vue'\nimport AppZoneWImageLazy from './AppZoneWImageLazy.vue'\nimport AppZoneWDropfiles from './AppZoneWDropfiles.vue'\nimport AppZoneWDialog from './AppZoneWDialog.vue'\nimport AppZoneWConfirm from './AppZoneWConfirm.vue'\nimport AppZoneWTooltip from './AppZoneWTooltip.vue'\nimport AppZoneWPopup from './AppZoneWPopup.vue'\nimport AppZoneWPopupEditText from './AppZoneWPopupEditText.vue'\nimport AppZoneWDrawer from './AppZoneWDrawer.vue'\nimport AppZoneWButtonChip from './AppZoneWButtonChip.vue'\nimport AppZoneWButtonCircle from './AppZoneWButtonCircle.vue'\nimport AppZoneWSlider from './AppZoneWSlider.vue'\nimport AppZoneWProgressBar from './AppZoneWProgressBar.vue'\nimport AppZoneWProgressCircle from './AppZoneWProgressCircle.vue'\nimport AppZoneWSwitch from './AppZoneWSwitch.vue'\nimport AppZoneWCheckbox from './AppZoneWCheckbox.vue'\nimport AppZoneWLevelGrade from './AppZoneWLevelGrade.vue'\nimport AppZoneWAlert from './AppZoneWAlert.vue'\nimport AppZoneWGroupTags from './AppZoneWGroupTags.vue'\nimport AppZoneWGroupDragdrop from './AppZoneWGroupDragdrop.vue'\nimport AppZoneWGroupBaggage from './AppZoneWGroupBaggage.vue'\nimport AppZoneWListVertical from './AppZoneWListVertical.vue'\nimport AppZoneWListHorizontal from './AppZoneWListHorizontal.vue'\nimport AppZoneWListExpand from './AppZoneWListExpand.vue'\nimport AppZoneWListRadio from './AppZoneWListRadio.vue'\nimport AppZoneWListCheck from './AppZoneWListCheck.vue'\nimport AppZoneWInputCheckbox from './AppZoneWInputCheckbox.vue'\nimport AppZoneWInputRadio from './AppZoneWInputRadio.vue'\nimport AppZoneWGroupChipCheck from './AppZoneWGroupChipCheck.vue'\nimport AppZoneWGroupChipRadio from './AppZoneWGroupChipRadio.vue'\nimport AppZoneWGroupIconCheck from './AppZoneWGroupIconCheck.vue'\nimport AppZoneWGroupIconRadio from './AppZoneWGroupIconRadio.vue'\nimport AppZoneWText from './AppZoneWText.vue'\nimport AppZoneWTextInt from './AppZoneWTextInt.vue'\nimport AppZoneWTextarea from './AppZoneWTextarea.vue'\nimport AppZoneWTextSelect from './AppZoneWTextSelect.vue'\nimport AppZoneWTextSuggest from './AppZoneWTextSuggest.vue'\nimport AppZoneWTimeday from './AppZoneWTimeday.vue'\nimport AppZoneWTimeminute from './AppZoneWTimeminute.vue'\nimport AppZoneWTimedayRange from './AppZoneWTimedayRange.vue'\nimport AppZoneWTimeminuteRange from './AppZoneWTimeminuteRange.vue'\nimport AppZoneWDynamicList from './AppZoneWDynamicList.vue'\nimport AppZoneWSegmentsVertical from './AppZoneWSegmentsVertical.vue'\nimport AppZoneWJsonView from './AppZoneWJsonView.vue'\nimport AppZoneWTree from './AppZoneWTree.vue'\nimport AppZoneWHighchartsVueDyn from './AppZoneWHighchartsVueDyn.vue'\nimport AppZoneWHighchartsBitmapDyn from './AppZoneWHighchartsBitmapDyn.vue'\nimport AppZoneWHighstockVueDyn from './AppZoneWHighstockVueDyn.vue'\nimport AppZoneWEchartsVueDyn from './AppZoneWEchartsVueDyn.vue'\nimport AppZoneWThreejsVueDyn from './AppZoneWThreejsVueDyn.vue'\nimport AppZoneWAggridVueDyn from './AppZoneWAggridVueDyn.vue'\nimport AppZoneWTableDyn from './AppZoneWTableDyn.vue'\nimport AppZoneWImageViewerDyn from './AppZoneWImageViewerDyn.vue'\nimport AppZoneWImageCascadingDyn from './AppZoneWImageCascadingDyn.vue'\nimport AppZoneWCkeditorVueDyn from './AppZoneWCkeditorVueDyn.vue'\nimport AppZoneWTinymceVueDyn from './AppZoneWTinymceVueDyn.vue'\nimport AppZoneWQuillVueDyn from './AppZoneWQuillVueDyn.vue'\nimport AppZoneWVditorDyn from './AppZoneWVditorDyn.vue'\nimport AppZoneWLeafletVueDyn from './AppZoneWLeafletVueDyn.vue'\nimport AppZoneWExplorer from './AppZoneWExplorer.vue'\nimport AppZoneWColorPickHexagon from './AppZoneWColorPickHexagon.vue'\nimport AppZoneWColorPickHexagonGray from './AppZoneWColorPickHexagonGray.vue'\nimport AppZoneWColorPickHsv from './AppZoneWColorPickHsv.vue'\nimport AppZoneWColorPickHue from './AppZoneWColorPickHue.vue'\nimport AppZoneWColorPickAlpha from './AppZoneWColorPickAlpha.vue'\nimport AppZoneWColorPickStripe from './AppZoneWColorPickStripe.vue'\nimport AppZoneWColorSelectPanelBlock from './AppZoneWColorSelectPanelBlock.vue'\nimport AppZoneWColorSelectPanelHsva from './AppZoneWColorSelectPanelHsva.vue'\nimport AppZoneWColorSelectPanel from './AppZoneWColorSelectPanel.vue'\nimport AppZoneWColorSelectInput from './AppZoneWColorSelectInput.vue'\nimport AppZoneWColorSelect from './AppZoneWColorSelect.vue'\n\n\nexport default {\n    components: {\n        WListHorizontal,\n        AppZoneWBadge,\n        AppZoneWPanelStripe,\n        AppZoneWPanelBulge,\n        AppZoneWPanelAvatar,\n        AppZoneWPanelScrolly,\n        AppZoneWPanelLabelItem,\n        AppZoneWPanelDivideHorizontal,\n        AppZoneWPanelDivideVertical,\n        AppZoneWPanelScale,\n        AppZoneWIcon,\n        AppZoneWImageLazy,\n        AppZoneWDropfiles,\n        AppZoneWDialog,\n        AppZoneWConfirm,\n        AppZoneWTooltip,\n        AppZoneWPopup,\n        AppZoneWPopupEditText,\n        AppZoneWDrawer,\n        AppZoneWButtonChip,\n        AppZoneWButtonCircle,\n        AppZoneWSlider,\n        AppZoneWProgressBar,\n        AppZoneWProgressCircle,\n        AppZoneWSwitch,\n        AppZoneWCheckbox,\n        AppZoneWLevelGrade,\n        AppZoneWAlert,\n        AppZoneWGroupTags,\n        AppZoneWGroupDragdrop,\n        AppZoneWGroupBaggage,\n        AppZoneWListVertical,\n        AppZoneWListHorizontal,\n        AppZoneWListExpand,\n        AppZoneWListRadio,\n        AppZoneWListCheck,\n        AppZoneWInputCheckbox,\n        AppZoneWInputRadio,\n        AppZoneWGroupChipCheck,\n        AppZoneWGroupChipRadio,\n        AppZoneWGroupIconCheck,\n        AppZoneWGroupIconRadio,\n        AppZoneWText,\n        AppZoneWTextInt,\n        AppZoneWTextarea,\n        AppZoneWTextSelect,\n        AppZoneWTextSuggest,\n        AppZoneWTimeday,\n        AppZoneWTimeminute,\n        AppZoneWTimedayRange,\n        AppZoneWTimeminuteRange,\n        AppZoneWDynamicList,\n        AppZoneWSegmentsVertical,\n        AppZoneWJsonView,\n        AppZoneWTree,\n        AppZoneWHighchartsVueDyn,\n        AppZoneWHighchartsBitmapDyn,\n        AppZoneWHighstockVueDyn,\n        AppZoneWEchartsVueDyn,\n        AppZoneWThreejsVueDyn,\n        AppZoneWAggridVueDyn,\n        AppZoneWTableDyn,\n        AppZoneWImageViewerDyn,\n        AppZoneWImageCascadingDyn,\n        AppZoneWCkeditorVueDyn,\n        AppZoneWTinymceVueDyn,\n        AppZoneWQuillVueDyn,\n        AppZoneWVditorDyn,\n        AppZoneWLeafletVueDyn,\n        AppZoneWExplorer,\n        AppZoneWColorPickHexagon,\n        AppZoneWColorPickHexagonGray,\n        AppZoneWColorPickHsv,\n        AppZoneWColorPickHue,\n        AppZoneWColorPickAlpha,\n        AppZoneWColorPickStripe,\n        AppZoneWColorSelectPanelBlock,\n        AppZoneWColorSelectPanelHsva,\n        AppZoneWColorSelectPanel,\n        AppZoneWColorSelectInput,\n        AppZoneWColorSelect,\n    },\n    data: function() {\n        let cmps = [\n            {\n                name: 'basic',\n                cmps: [\n                    { name: 'WBadge' },\n                    { name: 'WSwitch' },\n                    { name: 'WCheckbox' },\n                    { name: 'WIcon' },\n                    { name: 'WImageLazy' },\n                    { name: 'WDropfiles' },\n                    { name: 'WSlider' },\n                    { name: 'WProgressBar' },\n                    { name: 'WProgressCircle' },\n                ]\n            },\n            {\n                name: 'special',\n                cmps: [\n                    { name: 'WLevelGrade' },\n                ]\n            },\n            {\n                name: 'panel',\n                cmps: [\n                    { name: 'WPanelStripe' },\n                    { name: 'WPanelBulge' },\n                    { name: 'WPanelAvatar' },\n                    { name: 'WPanelScrolly' },\n                    { name: 'WPanelLabelItem' },\n                    { name: 'WPanelDivideHorizontal' },\n                    { name: 'WPanelDivideVertical' },\n                    { name: 'WPanelScale' },\n                ]\n            },\n            {\n                name: 'button',\n                cmps: [\n                    { name: 'WButtonChip' },\n                    { name: 'WButtonCircle' },\n                ]\n            },\n            {\n                name: 'group',\n                cmps: [\n                    { name: 'WInputCheckbox' },\n                    { name: 'WInputRadio' },\n                    { name: 'WGroupChipCheck' },\n                    { name: 'WGroupChipRadio' },\n                    { name: 'WGroupIconCheck' },\n                    { name: 'WGroupIconRadio' },\n                    { name: 'WGroupTags' },\n                    { name: 'WGroupDragdrop' },\n                    { name: 'WGroupBaggage' },\n                ]\n            },\n            {\n                name: 'list',\n                cmps: [\n                    { name: 'WListHorizontal' },\n                    { name: 'WListVertical' },\n                    { name: 'WListExpand' },\n                    { name: 'WListRadio' },\n                    { name: 'WListCheck' },\n                    { name: 'WDynamicList' },\n                    { name: 'WSegmentsVertical' },\n                ]\n            },\n            {\n                name: 'text',\n                cmps: [\n                    { name: 'WText' },\n                    { name: 'WTextarea' },\n                    { name: 'WTextInt' },\n                    { name: 'WTextSelect' },\n                    { name: 'WTextSuggest' },\n                ]\n            },\n            {\n                name: 'time',\n                cmps: [\n                    { name: 'WTimeday' },\n                    { name: 'WTimeminute' },\n                    { name: 'WTimedayRange' },\n                    { name: 'WTimeminuteRange' },\n                ]\n            },\n            {\n                name: 'color',\n                cmps: [\n                    {\n                        name: 'pick',\n                        cmps: [\n                            { name: 'WColorPickHexagon' },\n                            { name: 'WColorPickHexagonGray' },\n                            { name: 'WColorPickHsv' },\n                            { name: 'WColorPickHue' },\n                            { name: 'WColorPickAlpha' },\n                            { name: 'WColorPickStripe' },\n                        ]\n                    },\n                    {\n                        name: 'select',\n                        cmps: [\n                            { name: 'WColorSelectPanelBlock' },\n                            { name: 'WColorSelectPanelHsva' },\n                            { name: 'WColorSelectPanel' },\n                            { name: 'WColorSelectInput' },\n                            { name: 'WColorSelect' },\n                        ]\n                    },\n                ]\n            },\n            {\n                name: 'tree',\n                cmps: [\n                    { name: 'WTree' },\n                    { name: 'WExplorer' },\n                    { name: 'WJsonView' },\n                ]\n            },\n            {\n                name: 'window',\n                cmps: [\n                    { name: 'WAlert' },\n                    { name: 'WDialog' },\n                    { name: 'WConfirm' },\n                    { name: 'WTooltip' },\n                    { name: 'WPopup' },\n                    { name: 'WPopupEditText' },\n                    { name: 'WDrawer' },\n                ]\n            },\n            {\n                name: 'dynamic',\n                cmps: [\n                    {\n                        name: 'plot',\n                        cmps: [\n                            { name: 'WHighchartsVueDyn' },\n                            { name: 'WHighchartsBitmapDyn' },\n                            { name: 'WHighstockVueDyn' },\n                            { name: 'WEchartsVueDyn' },\n                            { name: 'WThreejsVueDyn' },\n                        ],\n                    },\n                    {\n                        name: 'table',\n                        cmps: [\n                            { name: 'WAggridVueDyn' },\n                            { name: 'WTableDyn' },\n                        ],\n                    },\n                    {\n                        name: 'map',\n                        cmps: [\n                            { name: 'WLeafletVueDyn' },\n                        ],\n                    },\n                    {\n                        name: 'imageViewer',\n                        cmps: [\n                            { name: 'WImageViewerDyn' },\n                            { name: 'WImageCascadingDyn' },\n                        ],\n                    },\n                    {\n                        name: 'editor',\n                        cmps: [\n                            { name: 'WTinymceVueDyn' },\n                            { name: 'WCkeditorVueDyn' },\n                            { name: 'WQuillVueDyn' },\n                            { name: 'WVditorDyn' },\n                        ],\n                    },\n                ],\n            },\n        ]\n        return {\n            kebabCase,\n\n            cmpsL1: cmps,\n            indP1: null,\n            cmpP1: null,\n\n            cmpsL2: null,\n            indP2: null,\n            cmpP2: null,\n\n            cmpsL3: null,\n            indP3: null,\n            cmpP3: null,\n\n            cmpsL4: null,\n\n            cmpPick: '',\n\n        }\n    },\n    mounted: function() {\n        let vo = this\n\n        //default\n        vo.indP1 = 0\n        vo.indP2 = 0\n        vo.indP3 = 0\n\n        //urlParse, http://localhost:8080/?cmp=w-ckeditor-vue-dyn\n        let p = urlParse(location.href)\n        // console.log('p', p)\n\n        //viewPick\n        vo.viewPick(get(p, 'cmp', ''))\n\n    },\n    computed: {\n\n        changeMenus: function() {\n            let vo = this\n            vo.modifyMenus(vo.indP1, vo.indP2, vo.indP3)\n            return ''\n        },\n\n        isNarrow: function() {\n            return window.innerWidth < 1000\n        },\n\n    },\n    methods: {\n\n        modifyMenus: function() {\n            let vo = this\n\n            let cmpPick = ''\n\n            setTimeout(() => {\n\n                // console.log('call P1')\n                vo.cmpP1 = get(vo.cmpsL1, vo.indP1, {})\n                vo.cmpsL2 = get(vo.cmpP1, `cmps`, [])\n                let _cmpPick = get(vo.cmpP1, `name`, '')\n                if (_cmpPick) {\n                    cmpPick = _cmpPick\n                }\n                // console.log('vo.cmpP1', cloneDeep(vo.cmpP1))\n                // console.log('vo.cmpsL2', cloneDeep(vo.cmpsL2))\n\n            }, 50)\n\n            setTimeout(() => {\n\n                // console.log('call P2')\n                let cmps = get(vo.cmpP1, `cmps`, [])\n                vo.cmpP2 = get(cmps, vo.indP2, {})\n                vo.cmpsL3 = get(vo.cmpP2, `cmps`, [])\n                let _cmpPick = get(vo.cmpP2, `name`, '')\n                if (_cmpPick) {\n                    cmpPick = _cmpPick\n                }\n                // console.log('vo.cmpP2', cloneDeep(vo.cmpP2))\n                // console.log('vo.cmpsL3', cloneDeep(vo.cmpsL3))\n\n            }, 100)\n\n            setTimeout(() => {\n\n                // console.log('call P3')\n                let cmps = get(vo.cmpP2, `cmps`, [])\n                vo.cmpP3 = get(cmps, vo.indP3, {})\n                vo.cmpsL4 = get(vo.cmpP3, `cmps`, [])\n                let _cmpPick = get(vo.cmpP3, `name`, '')\n                if (_cmpPick) {\n                    cmpPick = _cmpPick\n                }\n                // console.log('vo.cmpP3', cloneDeep(vo.cmpP3))\n                // console.log('vo.cmpsL4', cloneDeep(vo.cmpsL4))\n\n                //update\n                vo.cmpPick = cmpPick\n                // console.log('cmpPick', cmpPick)\n\n            }, 150)\n\n        },\n\n        getInd: function(item, items) {\n            // let vo = this\n            let ind = -1\n            each(items, (v, k) => {\n                if (item.name === v.name) {\n                    ind = k\n                    return false //跳出\n                }\n            })\n            return ind\n        },\n\n        viewPick: function(cmpPick) {\n            let vo = this\n            let _cmpPick = kebabCase(cmpPick)\n            let r = ''\n            let rs = []\n            let ls = []\n            let pv = (ts) => {\n                each(ts, (v, k) => {\n                    ls.push(k)\n\n                    //name, _name\n                    let name = get(v, `name`, '')\n                    let _name = kebabCase(name)\n\n                    //cmps\n                    let cmps = get(v, `cmps`, [])\n\n                    //push\n                    let cls = ls.join('.')\n                    let b = _name === _cmpPick\n                    rs.push({\n                        cls,\n                        name,\n                        b,\n                    })\n\n                    //save\n                    if (b) {\n                        r = JSON.parse(JSON.stringify(ls))\n                    }\n\n                    //遞迴pv\n                    if (cmps.length > 0) {\n                        pv(cmps)\n                    }\n\n                    ls.pop()\n                })\n            }\n            pv(vo.cmpsL1)\n            // console.log('rs', rs)\n            // console.log('r', r)\n            vo.indP1 = get(r, 0, 0)\n            vo.indP2 = get(r, 1, 0)\n            vo.indP3 = get(r, 2, 0)\n        },\n\n    }\n}\n<\/script>\n\n<style>\n.v-application--wrap {\n    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */\n    width: 100vw !important;\n    max-width: 100vw !important;\n    font-family: inherit;\n    background: #fff;\n}\n/* 組件所須全域樣式 */\n.head1 {\n    padding: 0px 0px 20px 0px;\n    font-size: 2.5rem;\n}\n.bkh { /* 寬 */\n    padding:20px;\n}\n@media screen and (max-width:800px){ /* 中 */\n    .bkh {\n        padding:10px;\n    }\n}\n@media screen and (max-width:400px){ /* 窄 */\n    .bkh {\n        padding:5px;\n    }\n}\n.bk { /* 寬 */\n    display: inline-block;\n    vertical-align: top;\n    padding: 0px 80px 60px 0px;\n}\n@media screen and (max-width:1000px){ /* 中窄 */\n    .bk {\n        display: block;\n        padding: 0px 0px 50px 0px;\n    }\n}\n.cpitem {\n    transition: all 0.3s;\n    padding: 5px 15px;\n    cursor: pointer;\n}\n.cpitem-white {\n    background: #fff;\n}\n.cpitem-white:hover {\n    background: #eee;\n}\n.cpitem-black {\n    background: #333;\n}\n.cpitem-black:hover {\n    background: #555;\n}\n</style>\n"]},media:void 0})}),ZW,undefined,false,undefined,!1,_a,void 0,void 0)}));
 //# sourceMappingURL=app.umd.js.map