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.

VProgressLinear.js 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  2. import '../../../src/stylus/components/_progress-linear.styl';
  3. // Mixins
  4. import Colorable from '../../mixins/colorable';
  5. // Helpers
  6. import { convertToUnit } from '../../util/helpers';
  7. import mixins from '../../util/mixins';
  8. import { VFadeTransition, VSlideXTransition } from '../transitions';
  9. /* @vue/component */
  10. export default mixins(Colorable).extend({
  11. name: 'v-progress-linear',
  12. props: {
  13. active: {
  14. type: Boolean,
  15. default: true
  16. },
  17. backgroundColor: {
  18. type: String,
  19. default: null
  20. },
  21. backgroundOpacity: {
  22. type: [Number, String],
  23. default: null
  24. },
  25. bufferValue: {
  26. type: [Number, String],
  27. default: 100
  28. },
  29. color: {
  30. type: String,
  31. default: 'primary'
  32. },
  33. height: {
  34. type: [Number, String],
  35. default: 7
  36. },
  37. indeterminate: Boolean,
  38. query: Boolean,
  39. value: {
  40. type: [Number, String],
  41. default: 0
  42. }
  43. },
  44. computed: {
  45. backgroundStyle: function backgroundStyle() {
  46. var backgroundOpacity = this.backgroundOpacity == null ? this.backgroundColor ? 1 : 0.3 : parseFloat(this.backgroundOpacity);
  47. return {
  48. height: this.active ? convertToUnit(this.height) : 0,
  49. opacity: backgroundOpacity,
  50. width: this.normalizedBufer + '%'
  51. };
  52. },
  53. effectiveWidth: function effectiveWidth() {
  54. if (!this.normalizedBufer) {
  55. return 0;
  56. }
  57. return +this.normalizedValue * 100 / +this.normalizedBufer;
  58. },
  59. normalizedBufer: function normalizedBufer() {
  60. if (this.bufferValue < 0) {
  61. return 0;
  62. }
  63. if (this.bufferValue > 100) {
  64. return 100;
  65. }
  66. return parseFloat(this.bufferValue);
  67. },
  68. normalizedValue: function normalizedValue() {
  69. if (this.value < 0) {
  70. return 0;
  71. }
  72. if (this.value > 100) {
  73. return 100;
  74. }
  75. return parseFloat(this.value);
  76. },
  77. styles: function styles() {
  78. var styles = {};
  79. if (!this.active) {
  80. styles.height = 0;
  81. }
  82. if (!this.indeterminate && parseFloat(this.normalizedBufer) !== 100) {
  83. styles.width = this.normalizedBufer + '%';
  84. }
  85. return styles;
  86. }
  87. },
  88. methods: {
  89. genDeterminate: function genDeterminate(h) {
  90. return h('div', this.setBackgroundColor(this.color, {
  91. ref: 'front',
  92. staticClass: 'v-progress-linear__bar__determinate',
  93. style: {
  94. width: this.effectiveWidth + '%'
  95. }
  96. }));
  97. },
  98. genBar: function genBar(h, name) {
  99. return h('div', this.setBackgroundColor(this.color, {
  100. staticClass: 'v-progress-linear__bar__indeterminate',
  101. class: _defineProperty({}, name, true)
  102. }));
  103. },
  104. genIndeterminate: function genIndeterminate(h) {
  105. return h('div', {
  106. ref: 'front',
  107. staticClass: 'v-progress-linear__bar__indeterminate',
  108. class: {
  109. 'v-progress-linear__bar__indeterminate--active': this.active
  110. }
  111. }, [this.genBar(h, 'long'), this.genBar(h, 'short')]);
  112. }
  113. },
  114. render: function render(h) {
  115. var fade = h(VFadeTransition, this.indeterminate ? [this.genIndeterminate(h)] : []);
  116. var slide = h(VSlideXTransition, this.indeterminate ? [] : [this.genDeterminate(h)]);
  117. var bar = h('div', {
  118. staticClass: 'v-progress-linear__bar',
  119. style: this.styles
  120. }, [fade, slide]);
  121. var background = h('div', this.setBackgroundColor(this.backgroundColor || this.color, {
  122. staticClass: 'v-progress-linear__background',
  123. style: this.backgroundStyle
  124. }));
  125. var content = this.$slots.default && h('div', {
  126. staticClass: 'v-progress-linear__content'
  127. }, this.$slots.default);
  128. return h('div', {
  129. staticClass: 'v-progress-linear',
  130. attrs: {
  131. 'role': 'progressbar',
  132. 'aria-valuemin': 0,
  133. 'aria-valuemax': this.normalizedBufer,
  134. 'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue
  135. },
  136. class: {
  137. 'v-progress-linear--query': this.query
  138. },
  139. style: {
  140. height: convertToUnit(this.height)
  141. },
  142. on: this.$listeners
  143. }, [background, bar, content]);
  144. }
  145. });
  146. //# sourceMappingURL=VProgressLinear.js.map