Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VProgressCircular.js 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. import '../../../src/stylus/components/_progress-circular.styl';
  2. // Mixins
  3. import Colorable from '../../mixins/colorable';
  4. import mixins from '../../util/mixins';
  5. /* @vue/component */
  6. export default mixins(Colorable).extend({
  7. name: 'v-progress-circular',
  8. props: {
  9. button: Boolean,
  10. indeterminate: Boolean,
  11. rotate: {
  12. type: [Number, String],
  13. default: 0
  14. },
  15. size: {
  16. type: [Number, String],
  17. default: 32
  18. },
  19. width: {
  20. type: [Number, String],
  21. default: 4
  22. },
  23. value: {
  24. type: [Number, String],
  25. default: 0
  26. }
  27. },
  28. computed: {
  29. calculatedSize: function calculatedSize() {
  30. return Number(this.size) + (this.button ? 8 : 0);
  31. },
  32. circumference: function circumference() {
  33. return 2 * Math.PI * this.radius;
  34. },
  35. classes: function classes() {
  36. return {
  37. 'v-progress-circular--indeterminate': this.indeterminate,
  38. 'v-progress-circular--button': this.button
  39. };
  40. },
  41. normalizedValue: function normalizedValue() {
  42. if (this.value < 0) {
  43. return 0;
  44. }
  45. if (this.value > 100) {
  46. return 100;
  47. }
  48. return parseFloat(this.value);
  49. },
  50. radius: function radius() {
  51. return 20;
  52. },
  53. strokeDashArray: function strokeDashArray() {
  54. return Math.round(this.circumference * 1000) / 1000;
  55. },
  56. strokeDashOffset: function strokeDashOffset() {
  57. return (100 - this.normalizedValue) / 100 * this.circumference + 'px';
  58. },
  59. strokeWidth: function strokeWidth() {
  60. return Number(this.width) / +this.size * this.viewBoxSize * 2;
  61. },
  62. styles: function styles() {
  63. return {
  64. height: this.calculatedSize + 'px',
  65. width: this.calculatedSize + 'px'
  66. };
  67. },
  68. svgStyles: function svgStyles() {
  69. return {
  70. transform: 'rotate(' + Number(this.rotate) + 'deg)'
  71. };
  72. },
  73. viewBoxSize: function viewBoxSize() {
  74. return this.radius / (1 - Number(this.width) / +this.size);
  75. }
  76. },
  77. methods: {
  78. genCircle: function genCircle(h, name, offset) {
  79. return h('circle', {
  80. class: 'v-progress-circular__' + name,
  81. attrs: {
  82. fill: 'transparent',
  83. cx: 2 * this.viewBoxSize,
  84. cy: 2 * this.viewBoxSize,
  85. r: this.radius,
  86. 'stroke-width': this.strokeWidth,
  87. 'stroke-dasharray': this.strokeDashArray,
  88. 'stroke-dashoffset': offset
  89. }
  90. });
  91. },
  92. genSvg: function genSvg(h) {
  93. var children = [this.indeterminate || this.genCircle(h, 'underlay', 0), this.genCircle(h, 'overlay', this.strokeDashOffset)];
  94. return h('svg', {
  95. style: this.svgStyles,
  96. attrs: {
  97. xmlns: 'http://www.w3.org/2000/svg',
  98. viewBox: this.viewBoxSize + ' ' + this.viewBoxSize + ' ' + 2 * this.viewBoxSize + ' ' + 2 * this.viewBoxSize
  99. }
  100. }, children);
  101. }
  102. },
  103. render: function render(h) {
  104. var info = h('div', { staticClass: 'v-progress-circular__info' }, this.$slots.default);
  105. var svg = this.genSvg(h);
  106. return h('div', this.setTextColor(this.color, {
  107. staticClass: 'v-progress-circular',
  108. attrs: {
  109. 'role': 'progressbar',
  110. 'aria-valuemin': 0,
  111. 'aria-valuemax': 100,
  112. 'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue
  113. },
  114. class: this.classes,
  115. style: this.styles,
  116. on: this.$listeners
  117. }), [svg, info]);
  118. }
  119. });
  120. //# sourceMappingURL=VProgressCircular.js.map