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.

selectable.js 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. // Components
  2. import VInput from '../components/VInput';
  3. // Mixins
  4. import Rippleable from './rippleable';
  5. import Comparable from './comparable';
  6. /* @vue/component */
  7. export default VInput.extend({
  8. name: 'selectable',
  9. mixins: [Rippleable, Comparable],
  10. model: {
  11. prop: 'inputValue',
  12. event: 'change'
  13. },
  14. props: {
  15. color: {
  16. type: String,
  17. default: 'accent'
  18. },
  19. id: String,
  20. inputValue: null,
  21. falseValue: null,
  22. trueValue: null,
  23. multiple: {
  24. type: Boolean,
  25. default: null
  26. },
  27. label: String
  28. },
  29. data: function data(vm) {
  30. return {
  31. lazyValue: vm.inputValue
  32. };
  33. },
  34. computed: {
  35. computedColor: function computedColor() {
  36. return this.isActive ? this.color : this.validationState;
  37. },
  38. isMultiple: function isMultiple() {
  39. return this.multiple === true || this.multiple === null && Array.isArray(this.internalValue);
  40. },
  41. isActive: function isActive() {
  42. var _this = this;
  43. var value = this.value;
  44. var input = this.internalValue;
  45. if (this.isMultiple) {
  46. if (!Array.isArray(input)) return false;
  47. return input.some(function (item) {
  48. return _this.valueComparator(item, value);
  49. });
  50. }
  51. if (this.trueValue === undefined || this.falseValue === undefined) {
  52. return value ? this.valueComparator(value, input) : Boolean(input);
  53. }
  54. return this.valueComparator(input, this.trueValue);
  55. },
  56. isDirty: function isDirty() {
  57. return this.isActive;
  58. }
  59. },
  60. watch: {
  61. inputValue: function inputValue(val) {
  62. this.lazyValue = val;
  63. }
  64. },
  65. methods: {
  66. genLabel: function genLabel() {
  67. if (!this.hasLabel) return null;
  68. var label = VInput.options.methods.genLabel.call(this);
  69. label.data.on = { click: this.onChange };
  70. return label;
  71. },
  72. genInput: function genInput(type, attrs) {
  73. return this.$createElement('input', {
  74. attrs: Object.assign({
  75. 'aria-label': this.label,
  76. 'aria-checked': this.isActive.toString(),
  77. disabled: this.isDisabled,
  78. id: this.id,
  79. role: type,
  80. type: type
  81. }, attrs),
  82. domProps: {
  83. value: this.value,
  84. checked: this.isActive
  85. },
  86. on: {
  87. blur: this.onBlur,
  88. change: this.onChange,
  89. focus: this.onFocus,
  90. keydown: this.onKeydown
  91. },
  92. ref: 'input'
  93. });
  94. },
  95. onBlur: function onBlur() {
  96. this.isFocused = false;
  97. },
  98. onChange: function onChange() {
  99. var _this2 = this;
  100. if (this.isDisabled) return;
  101. var value = this.value;
  102. var input = this.internalValue;
  103. if (this.isMultiple) {
  104. if (!Array.isArray(input)) {
  105. input = [];
  106. }
  107. var length = input.length;
  108. input = input.filter(function (item) {
  109. return !_this2.valueComparator(item, value);
  110. });
  111. if (input.length === length) {
  112. input.push(value);
  113. }
  114. } else if (this.trueValue !== undefined && this.falseValue !== undefined) {
  115. input = this.valueComparator(input, this.trueValue) ? this.falseValue : this.trueValue;
  116. } else if (value) {
  117. input = this.valueComparator(input, value) ? null : value;
  118. } else {
  119. input = !input;
  120. }
  121. this.validate(true, input);
  122. this.internalValue = input;
  123. },
  124. onFocus: function onFocus() {
  125. this.isFocused = true;
  126. },
  127. /** @abstract */
  128. onKeydown: function onKeydown(e) {}
  129. }
  130. });
  131. //# sourceMappingURL=selectable.js.map