项目原始demo,不改动
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.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
 
 
 
 

160 lines
3.6 KiB

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