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.

VStepperStep.js 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. // Components
  2. import VIcon from '../VIcon';
  3. // Mixins
  4. import Colorable from '../../mixins/colorable';
  5. import { inject as RegistrableInject } from '../../mixins/registrable';
  6. // Directives
  7. import Ripple from '../../directives/ripple';
  8. // Util
  9. import mixins from '../../util/mixins';
  10. export default mixins(Colorable, RegistrableInject('stepper', 'v-stepper-step', 'v-stepper')
  11. /* @vue/component */
  12. ).extend({
  13. name: 'v-stepper-step',
  14. directives: { Ripple: Ripple },
  15. inject: ['stepClick'],
  16. props: {
  17. color: {
  18. type: String,
  19. default: 'primary'
  20. },
  21. complete: Boolean,
  22. completeIcon: {
  23. type: String,
  24. default: '$vuetify.icons.complete'
  25. },
  26. editIcon: {
  27. type: String,
  28. default: '$vuetify.icons.edit'
  29. },
  30. errorIcon: {
  31. type: String,
  32. default: '$vuetify.icons.error'
  33. },
  34. editable: Boolean,
  35. rules: {
  36. type: Array,
  37. default: function _default() {
  38. return [];
  39. }
  40. },
  41. step: [Number, String]
  42. },
  43. data: function data() {
  44. return {
  45. isActive: false,
  46. isInactive: true
  47. };
  48. },
  49. computed: {
  50. classes: function classes() {
  51. return {
  52. 'v-stepper__step': true,
  53. 'v-stepper__step--active': this.isActive,
  54. 'v-stepper__step--editable': this.editable,
  55. 'v-stepper__step--inactive': this.isInactive,
  56. 'v-stepper__step--error': this.hasError,
  57. 'v-stepper__step--complete': this.complete,
  58. 'error--text': this.hasError
  59. };
  60. },
  61. hasError: function hasError() {
  62. return this.rules.some(function (validate) {
  63. return validate() !== true;
  64. });
  65. }
  66. },
  67. mounted: function mounted() {
  68. this.stepper && this.stepper.register(this);
  69. },
  70. beforeDestroy: function beforeDestroy() {
  71. this.stepper && this.stepper.unregister(this);
  72. },
  73. methods: {
  74. click: function click(e) {
  75. e.stopPropagation();
  76. this.$emit('click', e);
  77. if (this.editable) {
  78. this.stepClick(this.step);
  79. }
  80. },
  81. toggle: function toggle(step) {
  82. this.isActive = step.toString() === this.step.toString();
  83. this.isInactive = Number(step) < Number(this.step);
  84. }
  85. },
  86. render: function render(h) {
  87. var data = {
  88. 'class': this.classes,
  89. directives: [{
  90. name: 'ripple',
  91. value: this.editable
  92. }],
  93. on: { click: this.click }
  94. };
  95. var stepContent = void 0;
  96. if (this.hasError) {
  97. stepContent = [h(VIcon, {}, this.errorIcon)];
  98. } else if (this.complete) {
  99. if (this.editable) {
  100. stepContent = [h(VIcon, {}, this.editIcon)];
  101. } else {
  102. stepContent = [h(VIcon, {}, this.completeIcon)];
  103. }
  104. } else {
  105. stepContent = String(this.step);
  106. }
  107. var color = !this.hasError && (this.complete || this.isActive) ? this.color : false;
  108. var step = h('span', this.setBackgroundColor(color, {
  109. staticClass: 'v-stepper__step__step'
  110. }), stepContent);
  111. var label = h('div', {
  112. staticClass: 'v-stepper__label'
  113. }, this.$slots.default);
  114. return h('div', data, [step, label]);
  115. }
  116. });
  117. //# sourceMappingURL=VStepperStep.js.map