| 1 | {"version":3,"file":"vue-chevron.min.js","sources":["../src/index.js"],"sourcesContent":["let animationId;\nlet lastTime = null;\n\nfunction linear(t) {\n return t;\n}\n\nfunction animate(duration, component) {\n lastTime = component.progress <= 1 ? performance.now() : lastTime;\n const animation = t => {\n let progress = (t - lastTime) / duration;\n if (progress >= 1) {\n window.cancelAnimationFrame(animationId);\n component.clickProgress = 1;\n component.progress = 1;\n return;\n }\n component.progress = component.easing(progress);\n animationId = window.requestAnimationFrame(animation);\n };\n animationId = window.requestAnimationFrame(animation);\n}\n\nfunction calculatePosition(\n pointDown,\n progress,\n lastClickProgress,\n height,\n viewBoxCenterY\n) {\n let progressWithClick =\n lastClickProgress === 1 ? progress : progress + (1 - lastClickProgress);\n\n if (progressWithClick >= 1) {\n progressWithClick = 1;\n }\n\n const topY = viewBoxCenterY + height / 2 - progressWithClick * height;\n const bottomY = viewBoxCenterY - height / 2 + progressWithClick * height;\n\n return pointDown ? topY : bottomY;\n}\n\nexport default {\n name: \"VueChevron\",\n props: {\n pointDown: {\n type: Boolean,\n default: true\n },\n duration: {\n type: Number,\n default: 500\n },\n thickness: {\n type: Number,\n default: 4\n },\n angle: {\n type: Number,\n default: 40\n },\n roundEdges: {\n type: Boolean,\n default: true\n },\n easing: {\n type: Function,\n default: linear\n }\n },\n data() {\n return {\n progress: 1,\n clickProgress: 1,\n reverse: false,\n lineLength: 30\n };\n },\n computed: {\n path() {\n const progress = this.progress;\n const { width, height } = this.triangleSideLengths;\n const { x, y } = this.viewBoxCenter;\n const clickProgress = this.clickProgress;\n\n const sidesY = calculatePosition(\n this.pointDown,\n progress,\n clickProgress,\n height,\n y\n );\n const centerY = calculatePosition(\n !this.pointDown,\n progress,\n clickProgress,\n height,\n y\n );\n return `M${x - width},${sidesY}, ${x},${centerY} ${x + width},${sidesY}`;\n },\n triangleSideLengths() {\n const height = this.lineLength * Math.sin(this.angle * (Math.PI / 180));\n const width = this.lineLength * Math.cos(this.angle * (Math.PI / 180));\n return {\n width,\n height\n };\n },\n viewBoxCenter() {\n const { width, height } = this.viewBoxSize;\n return { x: width / 2, y: height / 2 };\n },\n viewBoxSize() {\n const lineLength = this.lineLength;\n const thickness = this.thickness;\n\n const width = Math.ceil(lineLength * 2 + thickness * 2);\n const height = Math.ceil(\n lineLength * 2 * Math.sin(this.angle * (Math.PI / 180)) + thickness * 2\n );\n return { width, height };\n }\n },\n watch: {\n pointDown: function() {\n this.clickProgress = this.progress;\n this.progress = 0;\n window.cancelAnimationFrame(animationId);\n animate(this.duration, this);\n }\n },\n render(h) {\n const lineCapAndJoin = this.roundEdges ? \"round\" : \"square\";\n const { width, height } = this.viewBoxSize;\n\n return h(\n \"svg\",\n {\n attrs: {\n height: 32,\n width: 32,\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: `0 0 ${width} ${height}`\n }\n },\n [\n h(\"title\", \"vue-chevron\"),\n h(\"path\", {\n attrs: {\n d: this.path,\n fill: \"none\",\n \"stroke-linecap\": lineCapAndJoin,\n \"stroke-width\": this.thickness,\n \"stroke-linejoin\": lineCapAndJoin,\n stroke: \"currentColor\"\n }\n })\n ]\n );\n }\n};\n"],"names":["let"],"mappings":";;;;;2QAAAA"} |