index.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. import styleToCssString from '../helpers/styleToCssString'
  4. import { isPresetColor } from '../helpers/colors'
  5. baseComponent({
  6. externalClasses: ['wux-input-class'],
  7. properties: {
  8. prefixCls: {
  9. type: String,
  10. value: 'wux-selectable',
  11. },
  12. type: {
  13. type: String,
  14. value: 'checkbox',
  15. },
  16. value: {
  17. type: String,
  18. value: '',
  19. },
  20. defaultChecked: {
  21. type: Boolean,
  22. value: false,
  23. },
  24. checked: {
  25. type: Boolean,
  26. value: false,
  27. observer(newVal) {
  28. if (this.data.controlled) {
  29. this.updated(newVal)
  30. }
  31. },
  32. },
  33. disabled: {
  34. type: Boolean,
  35. value: false,
  36. },
  37. color: {
  38. type: String,
  39. value: 'balanced',
  40. observer(newVal) {
  41. this.setData({
  42. inputColor: isPresetColor(newVal),
  43. })
  44. },
  45. },
  46. controlled: {
  47. type: Boolean,
  48. value: false,
  49. },
  50. wrapStyle: {
  51. type: [String, Object],
  52. value: '',
  53. observer(newVal) {
  54. this.setData({
  55. extStyle: styleToCssString(newVal),
  56. })
  57. },
  58. },
  59. },
  60. data: {
  61. inputChecked: false,
  62. inputColor: '',
  63. extStyle: '',
  64. },
  65. computed: {
  66. classes() {
  67. const { prefixCls, inputChecked, disabled } = this.data
  68. const wrap = classNames(prefixCls, {
  69. [`${prefixCls}--checked`]: inputChecked,
  70. [`${prefixCls}--disabled`]: disabled,
  71. })
  72. const input = `${prefixCls}__input`
  73. const icon = `${prefixCls}__icon`
  74. return {
  75. wrap,
  76. input,
  77. icon,
  78. }
  79. },
  80. },
  81. methods: {
  82. updated(inputChecked) {
  83. if (this.data.inputChecked !== inputChecked) {
  84. this.setData({
  85. inputChecked,
  86. })
  87. }
  88. },
  89. onChange() {
  90. const { value, inputChecked, disabled, controlled } = this.data
  91. const item = {
  92. checked: !inputChecked,
  93. value,
  94. }
  95. if (disabled) return
  96. if (!controlled) {
  97. this.updated(!inputChecked)
  98. }
  99. this.triggerEvent('change', item)
  100. },
  101. },
  102. attached() {
  103. const { defaultChecked, checked, controlled } = this.data
  104. const inputChecked = controlled ? checked : defaultChecked
  105. const inputColor = isPresetColor(this.data.color)
  106. this.setData({
  107. inputChecked,
  108. inputColor,
  109. })
  110. },
  111. })