@tuya-miniapp/smart-ui 0.0.1-beta-1

package/lib/cascader/index.js

@@ -0,0 +1,198 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
+(0, component_1.VantComponent)({
+    props: {
+        title: String,
+        value: {
+            type: String,
+        },
+        placeholder: {
+            type: String,
+            value: 'Please select',
+        },
+        activeColor: {
+            type: String,
+            value: '#1989fa',
+        },
+        options: {
+            type: Array,
+            value: [],
+        },
+        swipeable: {
+            type: Boolean,
+            value: false,
+        },
+        closeable: {
+            type: Boolean,
+            value: true,
+        },
+        showHeader: {
+            type: Boolean,
+            value: true,
+        },
+        closeIcon: {
+            type: String,
+            value: Xmark_1.default,
+        },
+        useTitleSlot: Boolean,
+    },
+    data: {
+        tabs: [],
+        activeTab: 0,
+        innerValue: '',
+    },
+    watch: {
+        options: function () {
+            this.updateTabs();
+        },
+        value: function (newVal) {
+            this.updateValue(newVal);
+        },
+    },
+    created: function () {
+        this.updateTabs();
+    },
+    methods: {
+        updateValue: function (val) {
+            if (val !== undefined) {
+                var values = this.data.tabs.map(function (tab) { return tab.selected && tab.selected.value; });
+                if (values.indexOf(val) > -1) {
+                    return;
+                }
+            }
+            this.innerValue = val;
+            this.updateTabs();
+        },
+        getSelectedOptionsByValue: function (options, value) {
+            for (var i = 0; i < options.length; i++) {
+                var option = options[i];
+                if (option.value === value) {
+                    return [option];
+                }
+                if (option.options) {
+                    var selectedOptions = this.getSelectedOptionsByValue(option.options, value);
+                    if (selectedOptions) {
+                        return __spreadArray([option], selectedOptions, true);
+                    }
+                }
+            }
+        },
+        updateTabs: function () {
+            var _this = this;
+            var options = this.data.options;
+            var innerValue = this.innerValue;
+            if (!options.length) {
+                return;
+            }
+            if (innerValue !== undefined) {
+                var selectedOptions = this.getSelectedOptionsByValue(options, innerValue);
+                if (selectedOptions) {
+                    var optionsCursor_1 = options;
+                    var tabs_1 = selectedOptions.map(function (option) {
+                        var tab = {
+                            options: optionsCursor_1,
+                            selected: option,
+                        };
+                        var next = optionsCursor_1.find(function (item) { return item.value === option.value; });
+                        if (next) {
+                            optionsCursor_1 = next.options;
+                        }
+                        return tab;
+                    });
+                    if (optionsCursor_1) {
+                        tabs_1.push({
+                            options: optionsCursor_1,
+                            selected: null,
+                        });
+                    }
+                    this.setData({
+                        tabs: tabs_1,
+                    });
+                    wx.nextTick(function () {
+                        _this.setData({
+                            activeTab: tabs_1.length - 1,
+                        });
+                    });
+                    return;
+                }
+            }
+            this.setData({
+                tabs: [
+                    {
+                        options: options,
+                        selected: null,
+                    },
+                ],
+            });
+        },
+        onClose: function () {
+            this.$emit('close');
+        },
+        onClickTab: function (e) {
+            var _a = e.detail, tabIndex = _a.index, title = _a.title;
+            this.$emit('click-tab', { title: title, tabIndex: tabIndex });
+            this.setData({
+                activeTab: tabIndex,
+            });
+        },
+        // 选中
+        onSelect: function (e) {
+            var _this = this;
+            var _a = e.currentTarget.dataset, option = _a.option, tabIndex = _a.tabIndex;
+            if (option && option.disabled) {
+                return;
+            }
+            var tabs = this.data.tabs;
+            tabs[tabIndex].selected = option;
+            if (tabs.length > tabIndex + 1) {
+                tabs = tabs.slice(0, tabIndex + 1);
+            }
+            if (option.options) {
+                var nextTab = {
+                    options: option.options,
+                    selected: null,
+                };
+                if (tabs[tabIndex + 1]) {
+                    tabs[tabIndex + 1] = nextTab;
+                }
+                else {
+                    tabs.push(nextTab);
+                }
+                wx.nextTick(function () {
+                    _this.setData({
+                        activeTab: tabIndex + 1,
+                    });
+                });
+            }
+            this.setData({
+                tabs: tabs,
+            });
+            var selectedOptions = tabs.map(function (tab) { return tab.selected; }).filter(Boolean);
+            var value = option.value;
+            var params = {
+                value: value,
+                tabIndex: tabIndex,
+                selectedOptions: selectedOptions,
+            };
+            this.innerValue = value;
+            this.$emit('change', params);
+            if (!option.options) {
+                this.$emit('finish', params);
+            }
+        },
+    },
+});

package/lib/cascader/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index",
+    "van-tab":  "../tab/index",
+    "van-tabs": "../tabs/index"
+  }
+}

package/lib/cascader/index.wxml

@@ -0,0 +1,54 @@
+<wxs src="./index.wxs" module="utils" />
+
+<view wx:if="{{ showHeader }}" class="van-cascader__header">
+  <slot name="title" wx:if="{{ useTitleSlot }}"></slot>
+  <text class="van-cascader__title" wx:else>{{ title }}</text>
+  <van-icon
+    wx:if="{{ closeable }}"
+    name="{{ closeIcon }}"
+    class="van-cascader__close-icon"
+    bind:tap="onClose"
+  />
+</view>
+
+<van-tabs
+  active="{{ activeTab }}"
+  custom-class="van-cascader__tabs"
+  wrap-class="van-cascader__tabs-wrap"
+  tab-class="van-cascader__tab"
+  color="{{ activeColor }}"
+  border="{{ false }}"
+  swipeable="{{ swipeable }}"
+  bind:click="onClickTab"
+>
+  <van-tab
+    wx:for="{{ tabs }}"
+    wx:for-item="tab"
+    wx:for-index="tabIndex"
+    wx:key="tabIndex"
+    title="{{ tab.selected ? tab.selected.text : placeholder }}"
+    style="width: 100%;"
+    title-style="{{ !tab.selected ? 'color: #969799;font-weight:normal;' : '' }}"
+  >
+    <!-- 暂不支持 -->
+    <!-- <slot name="options-top"></slot> -->
+
+    <view class="van-cascader__options">
+      <view
+        wx:for="{{ tab.options }}"
+        wx:for-item="option"
+        wx:key="index"
+        class="{{ option.className }} {{ utils.optionClass(tab, option) }}"
+        style="{{ utils.optionStyle({ tab, option, activeColor }) }}"
+        data-option="{{ option }}"
+        data-tab-index="{{ tabIndex }}"
+        bind:tap="onSelect"
+      >
+        <text>{{ option.text }}</text>
+        <van-icon wx:if="{{ utils.isSelected(tab, option) }}" name="success" size="18" />
+      </view>
+    </view>
+    <!-- 暂不支持 -->
+    <!-- <slot name="options-bottom"></slot> -->
+  </van-tab>
+</van-tabs>

package/lib/cascader/index.wxs

@@ -0,0 +1,21 @@
+var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+
+function isSelected(tab, option) {
+  return tab.selected && tab.selected.value === option.value;
+}
+
+function optionClass(tab, option) {
+  return utils.bem('cascader__option', { selected: isSelected(tab, option), disabled: option.disabled });
+}
+
+function optionStyle(data) {
+  var color = data.option.color || (isSelected(data.tab, data.option) ? data.activeColor : undefined);
+  return style({ color: color });
+}
+
+module.exports = {
+  isSelected: isSelected,
+  optionClass: optionClass,
+  optionStyle: optionStyle,
+};

package/lib/cascader/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-cascader__header{align-items:center;display:flex;height:48px;justify-content:space-between;padding:0 16px}.van-cascader__title{font-size:16px;font-weight:600;line-height:20px}.van-cascader__close-icon{color:#c8c9cc;font-size:22px;height:22px}.van-cascader__tabs-wrap{height:48px!important;padding:0 8px}.van-cascader__tab{color:#323233!important;flex:none!important;font-weight:600!important;padding:0 8px!important}.van-cascader__tab--unselected{color:#969799!important;font-weight:400!important}.van-cascader__option{align-items:center;cursor:pointer;display:flex;font-size:14px;justify-content:space-between;line-height:20px;padding:10px 16px}.van-cascader__option:active{background-color:#f2f3f5}.van-cascader__option--selected{color:#1989fa;font-weight:600}.van-cascader__option--disabled{color:#c8c9cc;cursor:not-allowed}.van-cascader__option--disabled:active{background-color:initial}.van-cascader__options{-webkit-overflow-scrolling:touch;box-sizing:border-box;height:384px;overflow-y:auto;padding-top:6px}

package/lib/cell/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-cell{align-items:center;background-color:var(--cell-background-color,var(--app-B6,#fff));box-sizing:border-box;color:var(--cell-text-color,var(--app-B6-N1,#000));display:flex;font-size:var(--cell-font-size,16px);line-height:var(--cell-line-height,24px);padding:var(--cell-vertical-padding,16px) var(--cell-horizontal-padding,16px);position:relative;width:100%}.van-cell:after{border-bottom:1px solid var(--app-B6-N7,rgba(0,0,0,.1));bottom:0;box-sizing:border-box;content:" ";left:16px;pointer-events:none;position:absolute;right:16px;transform:scaleY(.5);transform-origin:center}.van-cell--borderless:after{display:none}.van-cell-group{background-color:var(--cell-background-color,var(--app-B6,#fff))}.van-cell__label{color:var(--cell-label-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--cell-label-font-size,14px);line-height:var(--cell-label-line-height,18px);margin-top:var(--cell-label-margin-top,3px)}.van-cell__title{align-items:flex-start;display:flex;flex-direction:column;justify-content:center}.van-cell__value{align-items:center;color:var(--cell-value-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;justify-content:flex-end;overflow:hidden;text-align:right;vertical-align:middle}.van-cell__title,.van-cell__value{flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{align-items:center;display:flex;font-size:var(--cell-icon-size,24px);height:var(--cell-line-height,24px)}.van-cell__left-icon-wrap{margin-right:var(--padding-base,4px)}.van-cell__right-icon-wrap{color:var(--cell-right-icon-color,var(--app-B6-N6,rgba(0,0,0,.2)));margin-left:var(--padding-base,4px)}.van-cell__left-icon{vertical-align:middle}.van-cell__left-icon,.van-cell__right-icon{line-height:var(--cell-line-height,24px)}.van-cell__right-icon>view{background:var(--cell-right-icon-color,var(--app-B6-N6,rgba(0,0,0,.2)))}.van-cell--clickable.van-cell--hover{background-color:var(--cell-active-color,var(--app-B1,#f6f7fb))}.van-cell--required{overflow:visible}.van-cell--required:before{color:var(--cell-required-color,var(--app-M2,#f04c4c));content:"*";font-size:var(--cell-font-size,16px);left:var(--padding-xs,8px);position:absolute}

package/lib/cell/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cell/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Up_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Up"));
+var Down_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Down"));
+var Left_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Left"));
+var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
+var link_1 = require("../mixins/link");
+var component_1 = require("../common/component");
+(0, component_1.VantComponent)({
+    classes: [
+        'title-class',
+        'label-class',
+        'value-class',
+        'right-icon-class',
+        'hover-class',
+    ],
+    mixins: [link_1.link],
+    props: {
+        title: null,
+        value: null,
+        icon: String,
+        label: String,
+        isLink: Boolean,
+        required: Boolean,
+        clickable: Boolean,
+        titleWidth: String,
+        customStyle: String,
+        arrowDirection: String,
+        useLabelSlot: Boolean,
+        border: {
+            type: Boolean,
+            value: true,
+        },
+        titleStyle: String,
+    },
+    data: {
+        arrowIcons: {
+            up: Up_1.default,
+            down: Down_1.default,
+            left: Left_1.default,
+            right: Right_1.default,
+        },
+        arrowIcon: Right_1.default,
+    },
+    methods: {
+        onClick: function (event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+    },
+});

package/lib/cell/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

package/lib/cell/index.wxml

@@ -0,0 +1,47 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('cell', [{ required, borderless: !border, clickable: isLink || clickable }]) }}"
+  hover-class="van-cell--hover hover-class"
+  hover-stay-time="70"
+  style="{{ customStyle }}"
+  bind:tap="onClick"
+>
+  <van-icon
+    wx:if="{{ icon }}"
+    name="{{ icon }}"
+    class="van-cell__left-icon-wrap"
+    custom-class="van-cell__left-icon"
+  />
+  <slot wx:else name="icon" />
+
+  <view
+    style="{{ computed.titleStyle({ titleWidth, titleStyle }) }}"
+    class="van-cell__title title-class"
+  >
+
+    <block wx:if="{{ title }}">{{ title }}</block>
+    <slot wx:else name="title" />
+
+    <view wx:if="{{ label || useLabelSlot }}" class="van-cell__label label-class">
+      <slot wx:if="{{ useLabelSlot }}" name="label" />
+      <block wx:elif="{{ label }}">{{ label }}</block>
+    </view>
+  </view>
+
+  <view class="van-cell__value value-class">
+    <block wx:if="{{ value || value === 0 }}">{{ value }}</block>
+    <slot wx:else />
+  </view>
+
+  <van-icon
+    wx:if="{{ isLink }}"
+    name="{{ arrowDirection ? arrowIcons[arrowDirection] : arrowIcons.right }}"
+    class="van-cell__right-icon-wrap right-icon-class"
+    custom-class="van-cell__right-icon"
+  />
+  <slot wx:else name="right-icon" />
+
+  <slot name="extra" />
+</view>

package/lib/cell/index.wxs

@@ -0,0 +1,17 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function titleStyle(data) {
+  return style([
+    {
+      'max-width': addUnit(data.titleWidth),
+      'min-width': addUnit(data.titleWidth),
+    },
+    data.titleStyle,
+  ]);
+}
+
+module.exports = {
+  titleStyle: titleStyle,
+};

package/lib/cell/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-cell{align-items:center;background-color:var(--cell-background-color,var(--app-B6,#fff));box-sizing:border-box;color:var(--cell-text-color,var(--app-B6-N1,#000));display:flex;font-size:var(--cell-font-size,16px);line-height:var(--cell-line-height,24px);padding:var(--cell-vertical-padding,16px) var(--cell-horizontal-padding,16px);position:relative;width:100%}.van-cell:after{border-bottom:1px solid var(--app-B6-N7,rgba(0,0,0,.1));bottom:0;box-sizing:border-box;content:" ";left:16px;pointer-events:none;position:absolute;right:16px;transform:scaleY(.5);transform-origin:center}.van-cell--borderless:after{display:none}.van-cell-group{background-color:var(--cell-background-color,var(--app-B6,#fff))}.van-cell__label{color:var(--cell-label-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--cell-label-font-size,14px);line-height:var(--cell-label-line-height,18px);margin-top:var(--cell-label-margin-top,3px)}.van-cell__title{align-items:flex-start;display:flex;flex-direction:column;justify-content:center}.van-cell__value{align-items:center;color:var(--cell-value-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;justify-content:flex-end;overflow:hidden;text-align:right;vertical-align:middle}.van-cell__title,.van-cell__value{flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{align-items:center;display:flex;font-size:var(--cell-icon-size,24px);height:var(--cell-line-height,24px)}.van-cell__left-icon-wrap{margin-right:var(--padding-base,4px)}.van-cell__right-icon-wrap{color:var(--cell-right-icon-color,var(--app-B6-N6,rgba(0,0,0,.2)));margin-left:var(--padding-base,4px)}.van-cell__left-icon{vertical-align:middle}.van-cell__left-icon,.van-cell__right-icon{line-height:var(--cell-line-height,24px)}.van-cell__right-icon>view{background:var(--cell-right-icon-color,var(--app-B6-N6,rgba(0,0,0,.2)))}.van-cell--clickable.van-cell--hover{background-color:var(--cell-active-color,var(--app-B1,#f6f7fb))}.van-cell--required{overflow:visible}.van-cell--required:before{color:var(--cell-required-color,var(--app-M2,#f04c4c));content:"*";font-size:var(--cell-font-size,16px);left:var(--padding-xs,8px);position:absolute}

package/lib/cell-group/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-cell-group--inset{border-radius:var(--cell-group-inset-border-radius,16px);margin:var(--cell-group-inset-padding,0 16px);overflow:hidden}.van-cell-group__title{color:var(--cell-group-title-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--cell-group-title-font-size,16px);line-height:var(--cell-group-title-line-height,16px);padding:var(--cell-group-title-padding,16px 16px 8px)}.van-cell-group__title--inset{padding:var(--cell-group-inset-title-padding,16px 16px 8px 32px)}

package/lib/cell-group/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cell-group/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.VantComponent)({
+    props: {
+        title: String,
+        border: {
+            type: Boolean,
+            value: false,
+        },
+        inset: Boolean,
+    },
+});

package/lib/cell-group/index.json

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

package/lib/cell-group/index.wxml

@@ -0,0 +1,11 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  wx:if="{{ title }}"
+  class="{{ utils.bem('cell-group__title', { inset }) }}"
+>
+  {{ title }}
+</view>
+<view class="custom-class {{ utils.bem('cell-group', { inset }) }} {{ border ? 'van-hairline--top-bottom' : '' }}">
+  <slot />
+</view>

package/lib/cell-group/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-cell-group--inset{border-radius:var(--cell-group-inset-border-radius,16px);margin:var(--cell-group-inset-padding,0 16px);overflow:hidden}.van-cell-group__title{color:var(--cell-group-title-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--cell-group-title-font-size,16px);line-height:var(--cell-group-title-line-height,16px);padding:var(--cell-group-title-padding,16px 16px 8px)}.van-cell-group__title--inset{padding:var(--cell-group-inset-title-padding,16px 16px 8px 32px)}

package/lib/checkbox/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-checkbox{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox--horizontal{margin-right:12px}.van-checkbox__icon-wrap,.van-checkbox__label{line-height:var(--checkbox-size,20px)}.van-checkbox__icon-wrap{flex:none}.van-checkbox__icon{align-items:center;border:1px solid var(--checkbox-border-color,#c8c9cc);box-sizing:border-box;color:transparent;display:flex;font-size:var(--checkbox-size,20px);height:1em;justify-content:center;text-align:center;transition-duration:var(--checkbox-transition-duration,.2s);transition-property:color,border-color,background-color;width:1em}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{background-color:var(--checkbox-checked-icon-color,#1989fa);border-color:var(--checkbox-checked-icon-color,#1989fa);color:#fff}.van-checkbox__icon--disabled{background-color:var(--checkbox-disabled-background-color,var(--app-B6-N7,rgba(0,0,0,.1)));border-color:var(--checkbox-disabled-icon-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:var(--checkbox-disabled-icon-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.van-checkbox__label{word-wrap:break-word;color:var(--checkbox-label-color,var(--app-B6-N3,rgba(0,0,0,.5)));padding-left:var(--checkbox-label-margin,10px)}.van-checkbox__label--left{float:left;margin:0 var(--checkbox-label-margin,10px) 0 0}.van-checkbox__label--disabled{color:var(--checkbox-disabled-label-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.van-checkbox__label:empty{margin:0}

package/lib/checkbox/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/checkbox/index.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Checkmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Checkmark"));
+var relation_1 = require("../common/relation");
+var component_1 = require("../common/component");
+function emit(target, value) {
+    target.$emit('input', value);
+    target.$emit('change', value);
+}
+(0, component_1.VantComponent)({
+    field: true,
+    relation: (0, relation_1.useParent)('checkbox-group'),
+    classes: ['icon-class', 'label-class'],
+    props: {
+        value: Boolean,
+        disabled: Boolean,
+        useIconSlot: Boolean,
+        checkedColor: String,
+        labelPosition: {
+            type: String,
+            value: 'right',
+        },
+        labelDisabled: Boolean,
+        shape: {
+            type: String,
+            value: 'round',
+        },
+        iconSize: {
+            type: null,
+            value: 20,
+        },
+    },
+    data: {
+        parentDisabled: false,
+        direction: 'vertical',
+        icon: Checkmark_1.default,
+    },
+    methods: {
+        emitChange: function (value) {
+            if (this.parent) {
+                this.setParentValue(this.parent, value);
+            }
+            else {
+                emit(this, value);
+            }
+        },
+        toggle: function () {
+            var _a = this.data, parentDisabled = _a.parentDisabled, disabled = _a.disabled, value = _a.value;
+            if (!disabled && !parentDisabled) {
+                this.emitChange(!value);
+            }
+        },
+        onClickLabel: function () {
+            var _a = this.data, labelDisabled = _a.labelDisabled, parentDisabled = _a.parentDisabled, disabled = _a.disabled, value = _a.value;
+            if (!disabled && !labelDisabled && !parentDisabled) {
+                this.emitChange(!value);
+            }
+        },
+        setParentValue: function (parent, value) {
+            var parentValue = parent.data.value.slice();
+            var name = this.dataset.name;
+            var max = parent.data.max;
+            if (value) {
+                if (max && parentValue.length >= max) {
+                    return;
+                }
+                if (parentValue.indexOf(name) === -1) {
+                    parentValue.push(name);
+                    emit(parent, parentValue);
+                }
+            }
+            else {
+                var index = parentValue.indexOf(name);
+                if (index !== -1) {
+                    parentValue.splice(index, 1);
+                    emit(parent, parentValue);
+                }
+            }
+        },
+    },
+});

package/lib/checkbox/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

package/lib/checkbox/index.wxml

@@ -0,0 +1,32 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="{{ utils.bem('checkbox', [{ horizontal: direction === 'horizontal' }]) }} custom-class">
+  <view
+    wx:if="{{ labelPosition === 'left' }}"
+    class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
+    bindtap="onClickLabel"
+  >
+    <slot />
+  </view>
+  <view class="van-checkbox__icon-wrap" bindtap="toggle">
+    <slot wx:if="{{ useIconSlot }}" name="icon" />
+    <van-icon
+      wx:else
+      name="{{icon}}"
+      size="0.8em"
+      color="{{ value ? '#fff' : 'none'}}"
+      class="{{ utils.bem('checkbox__icon', [shape, { disabled: disabled || parentDisabled, checked: value }]) }}"
+      style="{{ computed.iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) }}"
+      custom-class="icon-class"
+      custom-style="line-height: 1.25em;"
+    />
+  </view>
+  <view
+    wx:if="{{ labelPosition === 'right' }}"
+    class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
+    bindtap="onClickLabel"
+  >
+    <slot />
+  </view>
+</view>

package/lib/checkbox/index.wxs

@@ -0,0 +1,20 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
+  var styles = {
+    'font-size': addUnit(iconSize),
+  };
+
+  if (checkedColor && value && !disabled && !parentDisabled) {
+    styles['border-color'] = checkedColor;
+    styles['background-color'] = checkedColor;
+  }
+
+  return style(styles);
+}
+
+module.exports = {
+  iconStyle: iconStyle,
+};

package/lib/checkbox/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-checkbox{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox--horizontal{margin-right:12px}.van-checkbox__icon-wrap,.van-checkbox__label{line-height:var(--checkbox-size,20px)}.van-checkbox__icon-wrap{flex:none}.van-checkbox__icon{align-items:center;border:1px solid var(--checkbox-border-color,#c8c9cc);box-sizing:border-box;color:transparent;display:flex;font-size:var(--checkbox-size,20px);height:1em;justify-content:center;text-align:center;transition-duration:var(--checkbox-transition-duration,.2s);transition-property:color,border-color,background-color;width:1em}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{background-color:var(--checkbox-checked-icon-color,#1989fa);border-color:var(--checkbox-checked-icon-color,#1989fa);color:#fff}.van-checkbox__icon--disabled{background-color:var(--checkbox-disabled-background-color,var(--app-B6-N7,rgba(0,0,0,.1)));border-color:var(--checkbox-disabled-icon-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:var(--checkbox-disabled-icon-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.van-checkbox__label{word-wrap:break-word;color:var(--checkbox-label-color,var(--app-B6-N3,rgba(0,0,0,.5)));padding-left:var(--checkbox-label-margin,10px)}.van-checkbox__label--left{float:left;margin:0 var(--checkbox-label-margin,10px) 0 0}.van-checkbox__label--disabled{color:var(--checkbox-disabled-label-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.van-checkbox__label:empty{margin:0}

package/lib/checkbox-group/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-checkbox-group--horizontal{display:flex;flex-wrap:wrap}

package/lib/checkbox-group/index.d.ts

@@ -0,0 +1 @@
+export {};