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.4KB

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