VStepperStep.mjs 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. // @ts-nocheck
  2. /* eslint-disable */
  3. // Components
  4. import VIcon from "../VIcon/index.mjs"; // Mixins
  5. import Colorable from "../../mixins/colorable.mjs";
  6. import { inject as RegistrableInject } from "../../mixins/registrable.mjs"; // Directives
  7. import ripple from "../../directives/ripple/index.mjs"; // Utilities
  8. import mixins from "../../util/mixins.mjs";
  9. import { keyCodes } from "../../util/helpers.mjs"; // Types
  10. const baseMixins = mixins(Colorable, RegistrableInject('stepper', 'v-stepper-step', 'v-stepper'));
  11. /* @vue/component */
  12. export default baseMixins.extend().extend({
  13. name: 'v-stepper-step',
  14. directives: {
  15. ripple
  16. },
  17. inject: ['stepClick'],
  18. props: {
  19. color: {
  20. type: String,
  21. default: 'primary'
  22. },
  23. complete: Boolean,
  24. completeIcon: {
  25. type: String,
  26. default: '$complete'
  27. },
  28. editable: Boolean,
  29. editIcon: {
  30. type: String,
  31. default: '$edit'
  32. },
  33. errorIcon: {
  34. type: String,
  35. default: '$error'
  36. },
  37. rules: {
  38. type: Array,
  39. default: () => []
  40. },
  41. step: [Number, String]
  42. },
  43. data() {
  44. return {
  45. isActive: false,
  46. isInactive: true
  47. };
  48. },
  49. computed: {
  50. classes() {
  51. return {
  52. 'v-stepper__step--active': this.isActive,
  53. 'v-stepper__step--editable': this.editable,
  54. 'v-stepper__step--inactive': this.isInactive,
  55. 'v-stepper__step--error error--text': this.hasError,
  56. 'v-stepper__step--complete': this.complete
  57. };
  58. },
  59. hasError() {
  60. return this.rules.some(validate => validate() !== true);
  61. }
  62. },
  63. mounted() {
  64. this.stepper && this.stepper.register(this);
  65. },
  66. beforeDestroy() {
  67. this.stepper && this.stepper.unregister(this);
  68. },
  69. methods: {
  70. click(e) {
  71. e.stopPropagation();
  72. this.$emit('click', e);
  73. if (this.editable) {
  74. this.stepClick(this.step);
  75. }
  76. },
  77. genIcon(icon) {
  78. return this.$createElement(VIcon, icon);
  79. },
  80. genLabel() {
  81. return this.$createElement('div', {
  82. staticClass: 'v-stepper__label'
  83. }, this.$slots.default);
  84. },
  85. genStep() {
  86. const color = !this.hasError && (this.complete || this.isActive) ? this.color : false;
  87. return this.$createElement('span', this.setBackgroundColor(color, {
  88. staticClass: 'v-stepper__step__step'
  89. }), this.genStepContent());
  90. },
  91. genStepContent() {
  92. const children = [];
  93. if (this.hasError) {
  94. children.push(this.genIcon(this.errorIcon));
  95. } else if (this.complete) {
  96. if (this.editable) {
  97. children.push(this.genIcon(this.editIcon));
  98. } else {
  99. children.push(this.genIcon(this.completeIcon));
  100. }
  101. } else {
  102. children.push(String(this.step));
  103. }
  104. return children;
  105. },
  106. keyboardClick(e) {
  107. if (e.keyCode === keyCodes.space) {
  108. this.click(e);
  109. }
  110. },
  111. toggle(step) {
  112. this.isActive = step.toString() === this.step.toString();
  113. this.isInactive = Number(step) < Number(this.step);
  114. }
  115. },
  116. render(h) {
  117. return h('div', {
  118. attrs: {
  119. tabindex: this.editable ? 0 : -1
  120. },
  121. staticClass: 'v-stepper__step',
  122. class: this.classes,
  123. directives: [{
  124. name: 'ripple',
  125. value: this.editable
  126. }],
  127. on: {
  128. click: this.click,
  129. keydown: this.keyboardClick
  130. }
  131. }, [this.genStep(), this.genLabel()]);
  132. }
  133. });
  134. //# sourceMappingURL=VStepperStep.mjs.map