增加微信小程序版

liferestartWX/utils/wux/selectable/index.js

@@ -0,0 +1,116 @@
+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: ['prefixCls, inputChecked, disabled', function(prefixCls, inputChecked, disabled) {
+            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,
+        })
+    },
+})

liferestartWX/utils/wux/selectable/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

liferestartWX/utils/wux/selectable/index.wxml

@@ -0,0 +1,15 @@
+<label class="wux-class {{ classes.wrap }}" bindtap="onChange" style="{{ extStyle }}">
+    <block wx:if="{{ type === 'checkbox' }}">
+    	<checkbox value="{{ value }}" checked="{{ inputChecked }}" color="{{ inputColor }}" disabled="{{ disabled }}" class="wux-input-class {{ classes.input }}" />
+    	<icon class="{{ classes.icon }}" type="{{ inputChecked ? 'success' : 'circle' }}" size="23" color="{{ !disabled ? inputColor : '#666' }}" />
+    </block>
+    <block wx:elif="{{ type === 'radio' }}">
+    	<radio value="{{ value }}" checked="{{ inputChecked }}" color="{{ inputColor }}" disabled="{{ disabled }}" class="wux-input-class {{ classes.input }}" />
+        <icon class="{{ classes.icon }}" type="success_no_circle" size="16" color="{{ !disabled ? inputColor : '#666' }}" hidden="{{ !inputChecked }}" />
+    </block>
+    <block wx:else>
+    	<slot name="icon-on" wx:if="{{ inputChecked }}"></slot>
+    	<slot name="icon-off" wx:else></slot>
+    </block>
+    <slot></slot>
+</label>

liferestartWX/utils/wux/selectable/index.wxss

@@ -0,0 +1,27 @@
+.wux-selectable {
+  position: relative;
+  display: inline-block
+}
+.wux-selectable__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  border: 0 none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none
+}
+.wux-selectable__icon {
+  display: inline-block;
+  font-size: 0;
+  vertical-align: middle;
+  position: relative;
+  top: 0;
+  left: 0;
+  margin-left: 10rpx;
+  margin-right: 10rpx
+}