quarkd/lib/circle/index.js

Mobile UI Components built on Web Components.

import{_ as t,a as r}from"../typeof.js";import{_ as e,a as o,b as i,c as n,H as s,d as a,N as c,O as l,B as p}from"../index2.js";import{_ as h}from"../defineProperty.js";import{i as f}from"../util.js";function d(t){var r=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=e(t);if(r){var s=e(this).constructor;i=Reflect.construct(n,arguments,s)}else i=n.apply(this,arguments);return o(this,i)}}var u={right:0,bottom:90,left:180,top:270},y=0,k=function(e){i(a,s);var o=d(a);function a(){var r;t(this,a);for(var e=arguments.length,i=new Array(e),s=0;s<e;s++)i[s]=arguments[s];return r=o.call.apply(o,[this].concat(i)),h(n(r),"rate",0),h(n(r),"strokewidth",2),h(n(r),"size",100),h(n(r),"color","#08f"),h(n(r),"layercolor","#fff"),h(n(r),"fill","none"),h(n(r),"strokelinecap","round"),h(n(r),"anticlockwise",!1),h(n(r),"startposition","top"),h(n(r),"stokeId",""),h(n(r),"gradientColor",null),r}return r(a,[{key:"componentDidMount",value:function(){this.stokeId="quark-circle-".concat(y++)}},{key:"renderLayer",value:function(){var t=Math.PI*(+this.size-+this.strokewidth),r={fill:"none",stroke:this.layercolor,strokeWidth:this.strokewidth,strokeDasharray:t,strokeDashoffset:0},e=this.size/2,o=(this.size-this.strokewidth)/2;return s.h("circle",{class:"circle-wrapper-layer",part:"circle-wrapper-layer",cx:e,cy:e,r:o,style:r})}},{key:"renderHover",value:function(){var t=Math.PI*(+this.size-+this.strokewidth),r=Math.min(100,Math.max(0,+this.rate)),e=f(this.gradientColor)?"url(#".concat(this.stokeId,")"):this.color,o={fill:this.fill,stroke:e,strokeWidth:this.strokewidth,strokeDasharray:t,strokeDashoffset:t-t*(this.anticlockwise?-r:r)/100,strokeLinecap:this.strokelinecap},i=this.size/2,n=(this.size-this.strokewidth)/2;return s.h("circle",{class:"circle-wrapper-hover",part:"circle-wrapper-hover",cx:i,cy:i,r:n,style:o})}},{key:"renderGradient",value:function(){var t=this.gradientColor;if(f(t)){var r=Object.keys(t).sort((function(t,r){return parseFloat(t)-parseFloat(r)})).map((function(r,e){return s.h("stop",{key:e,offset:r,"stop-color":t[r]})}));return s.h("defs",{part:"defs"},s.h("linearGradient",{id:this.stokeId,part:"linearGradient",x1:"100%",y1:"0%",x2:"0%",y2:"0%"},r))}}},{key:"setGradient",value:function(t){this.gradientColor=t}},{key:"render",value:function(){var t={width:this.size+"px",height:this.size+"px"},r={width:this.size+"px",height:this.size+"px",transform:"rotate(".concat(u[this.startposition],"deg)")};return s.h("div",{class:"circle-wrapper",style:t,part:"root"},s.h("svg",{style:r,part:"svg"},this.renderGradient(),this.renderLayer(),this.renderHover()),s.h("div",{class:"circle-wrapper-content",part:"content"},s.h("slot",null)))}}]),a}();a([c({type:Number})],k.prototype,"rate",void 0),a([c({type:Number})],k.prototype,"strokewidth",void 0),a([c({type:Number})],k.prototype,"size",void 0),a([c()],k.prototype,"color",void 0),a([c()],k.prototype,"layercolor",void 0),a([c()],k.prototype,"fill",void 0),a([c()],k.prototype,"strokelinecap",void 0),a([c({type:Boolean})],k.prototype,"anticlockwise",void 0),a([c()],k.prototype,"startposition",void 0),a([l()],k.prototype,"gradientColor",void 0);var v=k=a([p({tag:"quark-circle",style:":host {\n  display: inline-block;\n\n  --quark-circle-transition: all linear 1s;\n  --quark-circle-text-font-size: 3.73333vw;\n}\n\n.circle-wrapper {\n  position: relative;\n  display: inline-block;\n  text-align: center;\n}\n\n.circle-wrapper-hover {\n  /* transform: rotate(270deg); */\n  transform-origin: center;\n  transform-box: fill-box;\n  transition: var(--quark-circle-transition);\n}\n\n.circle-wrapper-content {\n  width: 100%;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--quark-circle-text-font-size);\n}"})],k);export{v as default};