123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- import baseComponent from '../helpers/baseComponent'
- import classNames from '../helpers/classNames'
- import styleToCssString from '../helpers/styleToCssString'
- import { isPresetColor } from '../helpers/colors'
- baseComponent({
- externalClasses: ['wux-input-class'],
- properties: {
- prefixCls: {
- type: String,
- value: 'wux-selectable',
- },
- type: {
- type: String,
- value: 'checkbox',
- },
- value: {
- type: String,
- value: '',
- },
- defaultChecked: {
- type: Boolean,
- value: false,
- },
- checked: {
- type: Boolean,
- value: false,
- observer(newVal) {
- if (this.data.controlled) {
- this.updated(newVal)
- }
- },
- },
- disabled: {
- type: Boolean,
- value: false,
- },
- color: {
- type: String,
- value: 'balanced',
- observer(newVal) {
- this.setData({
- inputColor: isPresetColor(newVal),
- })
- },
- },
- controlled: {
- type: Boolean,
- value: false,
- },
- wrapStyle: {
- type: [String, Object],
- value: '',
- observer(newVal) {
- this.setData({
- extStyle: styleToCssString(newVal),
- })
- },
- },
- },
- data: {
- inputChecked: false,
- inputColor: '',
- extStyle: '',
- },
- computed: {
- classes() {
- const { prefixCls, inputChecked, disabled } = this.data
- const wrap = classNames(prefixCls, {
- [`${prefixCls}--checked`]: inputChecked,
- [`${prefixCls}--disabled`]: disabled,
- })
- const input = `${prefixCls}__input`
- const icon = `${prefixCls}__icon`
- return {
- wrap,
- input,
- icon,
- }
- },
- },
- methods: {
- updated(inputChecked) {
- if (this.data.inputChecked !== inputChecked) {
- this.setData({
- inputChecked,
- })
- }
- },
- onChange() {
- const { value, inputChecked, disabled, controlled } = this.data
- const item = {
- checked: !inputChecked,
- value,
- }
- if (disabled) return
- if (!controlled) {
- this.updated(!inputChecked)
- }
- this.triggerEvent('change', item)
- },
- },
- attached() {
- const { defaultChecked, checked, controlled } = this.data
- const inputChecked = controlled ? checked : defaultChecked
- const inputColor = isPresetColor(this.data.color)
- this.setData({
- inputChecked,
- inputColor,
- })
- },
- })
|