UNPKG

2.25 kBJavaScriptView Raw
1!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.VueChevron=t()}(this,function(){"use strict";function e(e,t,i,n,r){var s=1===i?t:t+(1-i);s>=1&&(s=1);return e?r+n/2-s*n:r-n/2+s*n}var t,i=null;return{name:"VueChevron",props:{pointDown:{type:Boolean,default:!0},duration:{type:Number,default:1e3},thickness:{type:Number,default:4},angle:{type:Number,default:40},roundEdges:{type:Boolean,default:!0},easing:{type:Function,default:function(e){return(e/=.5)<1?-.5*(Math.sqrt(1-e*e)-1):.5*(Math.sqrt(1-(e-=2)*e)+1)}}},data:function(){return{progress:1,clickProgress:1,reverse:!1,lineLength:30}},computed:{path:function(){var t=this.progress,i=this.triangleSideLengths.width,n=e(this.pointDown,t,this.clickProgress,this.triangleSideLengths.height,this.viewBoxCenter.y),r=e(!this.pointDown,t,this.clickProgress,this.triangleSideLengths.height,this.viewBoxCenter.y);return"M"+(this.viewBoxCenter.x-i)+","+n+", "+this.viewBoxCenter.x+","+r+" "+(this.viewBoxCenter.x+i)+","+n},triangleSideLengths:function(){var e=this.lineLength*Math.sin(this.angle*(Math.PI/180));return{width:this.lineLength*Math.cos(this.angle*(Math.PI/180)),height:e}},viewBoxCenter:function(){var e=this.viewBoxSize;return{x:e.width/2,y:e.height/2}},viewBoxSize:function(){return{width:Math.ceil(2*this.lineLength+2*this.thickness),height:Math.ceil(2*this.lineLength*Math.sin(this.angle*(Math.PI/180))+2*this.thickness)}}},watch:{pointDown:function(e){this.clickProgress=this.progress,this.progress=0,window.cancelAnimationFrame(t),function(e,n){i=n.progress<=1?performance.now():i;var r=function(s){var o=(s-i)/e;if(o>=1)return window.cancelAnimationFrame(t),n.clickProgress=1,void(n.progress=1);n.progress=n.easing(o),t=window.requestAnimationFrame(r)};t=window.requestAnimationFrame(r)}(this.duration,this)}},render:function(e){return e("svg",{attrs:{height:50,width:50,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 "+this.viewBoxSize.width+" "+this.viewBoxSize.height}},[e("title","vue-chevron"),e("path",{attrs:{d:this.path,fill:"none","stroke-linecap":this.roundEdges?"round":"square","stroke-width":this.thickness,"stroke-linejoin":this.roundEdges?"round":"square",stroke:"currentColor"}})])}}});
\No newline at end of file