@tuya-miniapp/smart-ui 2.3.8-beta-4 → 2.3.8-beta-5

package/example/dist/cascader/index.wxml

@@ -0,0 +1,56 @@
+<wxs src="./index.wxs" module="utils" />
+
+<view wx:if="{{ showHeader }}" class="smart-cascader__header">
+  <slot name="title" wx:if="{{ useTitleSlot }}"></slot>
+  <text class="smart-cascader__title" wx:else>{{ title }}</text>
+  <smart-icon
+    wx:if="{{ closeable }}"
+    name="{{ closeIcon }}"
+    class="smart-cascader__close-icon"
+    bind:tap="onClose"
+  />
+</view>
+
+<smart-tabs
+  active="{{ activeTab }}"
+  custom-class="smart-cascader__tabs"
+  wrap-class="smart-cascader__tabs-wrap"
+  tab-class="smart-cascader__tab"
+  color="{{ activeColor }}"
+  border="{{ false }}"
+  swipeable="{{ swipeable }}"
+  ellipsis="{{ ellipsis }}"
+  swipe-threshold="{{ swipeThreshold }}"
+  bind:click="onClickTab"
+>
+  <smart-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: var(--cascader-tab-inactive-color, var(--app-B6-N5, rgba(0, 0, 0, 0.3)));font-weight:normal;' : '' }}"
+  >
+    <!-- 暂不支持 -->
+    <!-- <slot name="options-top"></slot> -->
+
+    <view class="smart-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>
+        <smart-icon wx:if="{{ utils.isSelected(tab, option) }}" name="success" size="18" />
+      </view>
+    </view>
+    <!-- 暂不支持 -->
+    <!-- <slot name="options-bottom"></slot> -->
+  </smart-tab>
+</smart-tabs>

package/example/dist/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/example/dist/cascader/index.wxss

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

package/example/dist/cell/demo/index.css

@@ -0,0 +1 @@
+@import '../../common/index.css';.title{display:inline-block;margin-right:5px;vertical-align:middle}.cell-icon{margin-right:4px}

package/example/dist/cell/demo/index.d.ts

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

package/example/dist/cell/demo/index.js

@@ -0,0 +1,15 @@
+import Sun from '@tuya-miniapp/icons/dist/svg/Sun';
+import Checkmark from '@tuya-miniapp/icons/dist/svg/Checkmark';
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        sunMaxFill: Sun,
+        checkMark: Checkmark,
+    },
+    methods: {
+        onNavTo() {
+            // @ts-ignore
+            ty.openInnerH5({ url: 'https://www.tuya.com', title: 'Tuya' });
+        },
+    },
+});

package/example/dist/cell/demo/index.json

@@ -0,0 +1,13 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-cell": "../../cell/index",
+    "smart-cell-group": "../../cell-group/index",
+    "smart-stepper": "../../stepper/index",
+    "smart-switch": "../../switch/index",
+    "smart-checkbox": "../../checkbox/index",
+    "smart-icon": "../../icon/index",
+    "smart-tag": "../../tag/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}

package/example/dist/cell/demo/index.wxml

@@ -0,0 +1,110 @@
+<demo-block title="{{I18n.t('basicUsage')}}">
+  <smart-cell-group>
+    <smart-cell title="{{I18n.t('cell')}}" value="{{I18n.t('content')}}" is-link />
+    <smart-cell
+      title="{{I18n.t('cell')}}"
+      value="{{I18n.t('content')}}"
+      label="{{I18n.t('descriptionOfInformation')}}"
+      border="{{ false }}"
+      is-link
+    />
+  </smart-cell-group>
+</demo-block>
+
+<demo-block title="{{I18n.t('cardStyle')}}">
+  <smart-cell-group inset>
+    <smart-cell title="{{I18n.t('cell')}}" value="{{I18n.t('content')}}" is-link />
+    <smart-cell title="{{I18n.t('cell')}}" value="{{I18n.t('content')}}" label="{{I18n.t('describeInformation')}}" border="{{ false }}" is-link />
+  </smart-cell-group>
+</demo-block>
+
+<demo-block title="{{I18n.t('showIcon')}}">
+  <smart-cell
+    title="{{I18n.t('cell')}}"
+    value="{{I18n.t('content')}}"
+    icon="{{ sunMaxFill }}"
+    border="{{ false }}"
+    is-link
+  />
+  <smart-cell
+    title="{{I18n.t('customization')}} Icon"
+    value="{{I18n.t('content')}}"
+    border="{{ false }}"
+    is-link
+  >
+    <smart-icon class="cell-icon" slot="icon" name="{{ sunMaxFill }}" size="24px" color="#3678E3" />
+  </smart-cell>
+</demo-block>
+
+<demo-block title="{{I18n.t('otherDisplays')}}">
+  <smart-cell
+    title="Title"
+    value="Label"
+  />
+  <smart-cell
+    title="Title"
+    is-link
+  />
+  <smart-cell
+    title="Title"
+    border="{{ false }}"
+  >
+    <smart-stepper value="{{ 1 }}" step="0.1" />
+  </smart-cell>
+</demo-block>
+
+<demo-block title="{{I18n.t('pageRedirect')}}">
+  <smart-cell title="{{I18n.t('urlRedirection')}}(navigateTo)" is-link url="/pages/dashboard/index" />
+  <smart-cell title="{{I18n.t('urlRedirection')}}(redirectTo)" is-link url="/pages/dashboard/index" link-type="redirectTo" />
+  <smart-cell title="{{I18n.t('openTheH5Container')}}(openInnerH5)" is-link bind:click="onNavTo" border="{{ false }}" />
+</demo-block>
+
+<demo-block title="{{I18n.t('groupTitle')}}">
+  <smart-cell-group title="{{I18n.t('group')}} 1">
+    <smart-cell title="{{I18n.t('cell')}}" is-link border="{{ false }}" />
+  </smart-cell-group>
+  <smart-cell-group title="{{I18n.t('group')}} 2">
+    <smart-cell title="{{I18n.t('cell')}}" is-link border="{{ false }}" />
+  </smart-cell-group>
+</demo-block>
+
+<demo-block title="{{I18n.t('otherTypes')}}">
+  <smart-cell title="Title">
+    <smart-switch checked="{{ true }}" size="24px" />
+  </smart-cell>
+  <smart-cell title="Title">
+    <smart-icon name="{{ checkMark }}" color="#3678E3" size="28px" />
+  </smart-cell>
+  <smart-cell title="Title">
+    <smart-checkbox value="{{ false }}" shape="square" />
+  </smart-cell>
+  <smart-cell title="Title">
+    <smart-checkbox value="{{ false }}" />
+  </smart-cell>
+  <smart-cell
+    title="Title"
+    label="Bedroom"
+    is-link
+    border="{{ false }}"
+  >
+    <smart-icon
+      class="cell-icon"
+      slot="icon"
+      name="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png"
+      size="50px"
+    />
+  </smart-cell>
+</demo-block>
+
+<demo-block title="{{I18n.t('useSlots')}}">
+  <smart-cell value="{{I18n.t('content')}}" icon="{{ sunMaxFill }}" is-link>
+    <view slot="title">
+      <view class="title">{{I18n.t('cell')}}</view>
+      <smart-tag type="danger">{{I18n.t('tag')}}</smart-tag>
+    </view>
+  </smart-cell>
+  <smart-cell title="{{I18n.t('cell')}}" border="{{ false }}">
+    <smart-icon slot="right-icon" name="{{ sunMaxFill }}" />
+  </smart-cell>
+</demo-block>
+

package/example/dist/cell/demo/index.wxss

@@ -0,0 +1 @@
+@import '../../common/index.wxss';.title{display:inline-block;margin-right:5px;vertical-align:middle}.cell-icon{margin-right:4px}

package/example/dist/cell/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-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%}.smart-cell:after{border-bottom:1px solid var(--cell-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));bottom:0;box-sizing:border-box;content:" ";left:var(--cell-border-left-position,16px);pointer-events:none;position:absolute;right:var(--cell-border-right-position,16px);transform:scaleY(.5);transform-origin:center}.smart-cell--borderless:after{display:none}.smart-cell-group{background-color:var(--cell-background-color,var(--app-B6,#fff))}.smart-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)}.smart-cell__title{align-items:flex-start;display:flex;flex-direction:column;justify-content:center}.smart-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}.smart-cell__title,.smart-cell__value{flex:1}.smart-cell__title:empty,.smart-cell__value:empty{display:none}.smart-cell__left-icon-wrap,.smart-cell__right-icon-wrap{align-items:center;display:flex;font-size:var(--cell-icon-size,24px);height:var(--cell-line-height,24px)}.smart-cell__left-icon-wrap{margin-right:var(--padding-base,4px)}.smart-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)}.smart-cell__left-icon{vertical-align:middle}.smart-cell__left-icon,.smart-cell__right-icon{line-height:var(--cell-line-height,24px)}.smart-cell__right-icon>view{background:var(--cell-right-icon-color,var(--app-B6-N6,rgba(0,0,0,.2)))}.smart-cell--clickable.smart-cell--hover{background-color:var(--cell-active-color,var(--app-B1,#f6f7fb))}.smart-cell--required{overflow:visible}.smart-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/example/dist/cell/index.d.ts

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

package/example/dist/cell/index.js

@@ -0,0 +1,43 @@
+import upIcon from '@tuya-miniapp/icons/dist/svg/Up';
+import downIcon from '@tuya-miniapp/icons/dist/svg/Down';
+import leftIcon from '@tuya-miniapp/icons/dist/svg/Left';
+import rightIcon from '@tuya-miniapp/icons/dist/svg/Right';
+import { link } from '../mixins/link';
+import { SmartComponent } from '../common/component';
+SmartComponent({
+    classes: ['title-class', 'label-class', 'value-class', 'right-icon-class', 'hover-class'],
+    mixins: [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: upIcon,
+            down: downIcon,
+            left: leftIcon,
+            right: rightIcon,
+        },
+        arrowIcon: rightIcon,
+    },
+    methods: {
+        onClick(event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+    },
+});

package/example/dist/cell/index.json

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

package/example/dist/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="smart-cell--hover hover-class"
+  hover-stay-time="70"
+  style="{{ customStyle }}"
+  bind:tap="onClick"
+>
+  <smart-icon
+    wx:if="{{ icon }}"
+    name="{{ icon }}"
+    class="smart-cell__left-icon-wrap"
+    custom-class="smart-cell__left-icon"
+  />
+  <slot wx:else name="icon" />
+
+  <view
+    style="{{ computed.titleStyle({ titleWidth, titleStyle }) }}"
+    class="smart-cell__title title-class"
+  >
+
+    <block wx:if="{{ title }}">{{ title }}</block>
+    <slot wx:else name="title" />
+
+    <view wx:if="{{ label || useLabelSlot }}" class="smart-cell__label label-class">
+      <slot wx:if="{{ useLabelSlot }}" name="label" />
+      <block wx:elif="{{ label }}">{{ label }}</block>
+    </view>
+  </view>
+
+  <view class="smart-cell__value value-class">
+    <block wx:if="{{ value || value === 0 }}">{{ value }}</block>
+    <slot wx:else />
+  </view>
+
+  <smart-icon
+    wx:if="{{ isLink }}"
+    name="{{ arrowDirection ? arrowIcons[arrowDirection] : arrowIcons.right }}"
+    class="smart-cell__right-icon-wrap right-icon-class"
+    custom-class="smart-cell__right-icon"
+  />
+  <slot wx:else name="right-icon" />
+
+  <slot name="extra" />
+</view>

package/example/dist/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/example/dist/cell/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-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%}.smart-cell:after{border-bottom:1px solid var(--cell-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));bottom:0;box-sizing:border-box;content:" ";left:var(--cell-border-left-position,16px);pointer-events:none;position:absolute;right:var(--cell-border-right-position,16px);transform:scaleY(.5);transform-origin:center}.smart-cell--borderless:after{display:none}.smart-cell-group{background-color:var(--cell-background-color,var(--app-B6,#fff))}.smart-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)}.smart-cell__title{align-items:flex-start;display:flex;flex-direction:column;justify-content:center}.smart-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}.smart-cell__title,.smart-cell__value{flex:1}.smart-cell__title:empty,.smart-cell__value:empty{display:none}.smart-cell__left-icon-wrap,.smart-cell__right-icon-wrap{align-items:center;display:flex;font-size:var(--cell-icon-size,24px);height:var(--cell-line-height,24px)}.smart-cell__left-icon-wrap{margin-right:var(--padding-base,4px)}.smart-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)}.smart-cell__left-icon{vertical-align:middle}.smart-cell__left-icon,.smart-cell__right-icon{line-height:var(--cell-line-height,24px)}.smart-cell__right-icon>view{background:var(--cell-right-icon-color,var(--app-B6-N6,rgba(0,0,0,.2)))}.smart-cell--clickable.smart-cell--hover{background-color:var(--cell-active-color,var(--app-B1,#f6f7fb))}.smart-cell--required{overflow:visible}.smart-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/example/dist/cell-group/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-cell-group--inset{border-radius:var(--cell-group-inset-border-radius,16px);margin:var(--cell-group-inset-padding,0 16px);overflow:hidden}.smart-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)}.smart-cell-group__title--inset{padding:var(--cell-group-inset-title-padding,16px 16px 8px 32px)}

package/example/dist/cell-group/index.d.ts

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

package/example/dist/cell-group/index.js

@@ -0,0 +1,11 @@
+import { SmartComponent } from '../common/component';
+SmartComponent({
+    props: {
+        title: String,
+        border: {
+            type: Boolean,
+            value: false,
+        },
+        inset: Boolean,
+    },
+});

package/example/dist/cell-group/index.json

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

package/example/dist/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 ? 'smart-hairline--top-bottom' : '' }}">
+  <slot />
+</view>

package/example/dist/cell-group/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-cell-group--inset{border-radius:var(--cell-group-inset-border-radius,16px);margin:var(--cell-group-inset-padding,0 16px);overflow:hidden}.smart-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)}.smart-cell-group__title--inset{padding:var(--cell-group-inset-title-padding,16px 16px 8px 32px)}

package/example/dist/checkbox/demo/index.css

@@ -0,0 +1 @@
+@import '../../common/index.css';.demo-checkbox,.demo-checkbox-group{margin:10px 0 0 20px}.demo-checkbox-inline{display:inline-block!important;margin:10px 0 0 20px}.value-class{flex:none!important}.icon{width:20px}

package/example/dist/checkbox/demo/index.d.ts

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

package/example/dist/checkbox/demo/index.js

@@ -0,0 +1,34 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        checkbox1: true,
+        checkbox2: true,
+        checkbox3: true,
+        checkboxLabel: true,
+        checkboxSize: true,
+        checkboxShape: true,
+        list: ['a', 'b', 'c'],
+        result: ['a', 'b'],
+        result2: [],
+        result3: [],
+        result4: [],
+        activeIcon: 'https://images.tuyacn.com/content-platform/hestia/1730877912e76cbdb7563.png',
+        inactiveIcon: '',
+    },
+    methods: {
+        onChange(event) {
+            const { key } = event.currentTarget.dataset;
+            this.setData({ [key]: event.detail });
+        },
+        onChange2(event) {
+            const { key } = event.currentTarget.dataset;
+            this.setData({ [key]: !event.detail });
+        },
+        toggle(event) {
+            const { index } = event.currentTarget.dataset;
+            const checkbox = this.selectComponent(`.checkboxes-${index}`);
+            checkbox.toggle();
+        },
+        noop() { },
+    },
+});

package/example/dist/checkbox/demo/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-button": "../../button/index",
+    "smart-cell": "../../cell/index",
+    "smart-checkbox": "../../checkbox/index",
+    "smart-checkbox-group": "../../checkbox-group/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}

package/example/dist/checkbox/demo/index.wxml

@@ -0,0 +1,179 @@
+<demo-block title="{{I18n.t('basicUsage')}}">
+  <smart-checkbox
+    value="{{ checkbox1 }}"
+    data-key="checkbox1"
+    custom-class="demo-checkbox-inline"
+    bind:change="onChange"
+  />
+  <smart-checkbox
+    value="{{ checkbox1 ? false : true }}"
+    data-key="checkbox1"
+    custom-class="demo-checkbox-inline"
+    bind:change="onChange2"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('disabledState')}}">
+  <smart-checkbox
+    disabled
+    value="{{ false }}"
+    custom-class="demo-checkbox-inline"
+  />
+  <smart-checkbox
+    disabled
+    value="{{ true }}"
+    custom-class="demo-checkbox-inline"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('customShape')}}">
+  <smart-checkbox
+    value="{{ checkboxShape }}"
+    data-key="checkboxShape"
+    shape="square"
+    custom-class="demo-checkbox-inline"
+    bind:change="onChange"
+  />
+  <smart-checkbox
+    value="{{ checkboxShape ? false : true }}"
+    data-key="checkboxShape"
+    shape="square"
+    custom-class="demo-checkbox-inline"
+    bind:change="onChange2"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('customColor')}}">
+  <smart-checkbox
+    value="{{ checkbox2 }}"
+    data-key="checkbox2"
+    checked-color="#10D0D0"
+    custom-class="demo-checkbox-inline"
+    bind:change="onChange"
+  />
+  <smart-checkbox
+    value="{{ checkbox2 ? false : true }}"
+    data-key="checkbox2"
+    checked-color="#10D0D0"
+    custom-class="demo-checkbox-inline"
+    bind:change="onChange2"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('customSize')}}">
+  <smart-checkbox
+    icon-size="28px"
+    value="{{ checkboxSize }}"
+    data-key="checkboxSize"
+    custom-class="demo-checkbox-inline"
+    bind:change="onChange"
+  />
+  <smart-checkbox
+    icon-size="28px"
+    value="{{ checkboxSize ? false : true }}"
+    data-key="checkboxSize"
+    custom-class="demo-checkbox-inline"
+    bind:change="onChange2"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('showText')}}">
+  <smart-checkbox
+    value="{{ checkbox1 }}"
+    data-key="checkbox1"
+    custom-class="demo-checkbox"
+    bind:change="onChange"
+  >
+  {{I18n.t('customText')}}
+  </smart-checkbox>
+</demo-block>
+
+<demo-block title="{{I18n.t('customIcon')}}">
+  <smart-checkbox
+    use-icon-slot
+    value="{{ checkbox3 }}"
+    data-key="checkbox3"
+    custom-class="demo-checkbox"
+    bind:change="onChange"
+  >
+    {{I18n.t('customIcon')}}
+    <image
+      slot="icon"
+      class="icon"
+      mode="widthFix"
+      src="{{ checkbox3 ? activeIcon : inactiveIcon }}"
+    />
+  </smart-checkbox>
+</demo-block>
+
+<demo-block title="{{I18n.t('disableTextClick')}}">
+  <smart-checkbox
+    label-disabled
+    value="{{ checkboxLabel }}"
+    data-key="checkboxLabel"
+    custom-class="demo-checkbox"
+    bind:change="onChange"
+  >
+    {{I18n.t('checkbox')}}
+  </smart-checkbox>
+</demo-block>
+
+<demo-block title="{{I18n.t('checkboxGroup')}}">
+  <smart-checkbox-group value="{{ result }}" data-key="result" bind:change="onChange">
+    <smart-checkbox
+      ty:for="{{ list }}"
+      ty:key="*this"
+      name="{{ item }}"
+      data-name="{{item}}"
+      custom-class="demo-checkbox"
+    >
+      {{I18n.t('checkbox')}} {{ item }}
+    </smart-checkbox>
+  </smart-checkbox-group>
+</demo-block>
+
+<demo-block title="{{I18n.t('horizontalAlignment')}}">
+  <smart-checkbox-group direction="horizontal" value="{{ result4 }}" data-key="result4" bind:change="onChange">
+    <smart-checkbox
+      ty:for="{{ list }}"
+      ty:key="*this"
+      name="{{ item }}"
+      data-name="{{item}}"
+      custom-class="demo-checkbox"
+    >
+      {{I18n.t('checkbox')}} {{ item }}
+    </smart-checkbox>
+  </smart-checkbox-group>
+</demo-block>
+
+<demo-block title="{{I18n.t('limitTheMaximumSelectableNumber')}}">
+  <smart-checkbox-group value="{{ result2 }}" data-key="result2" max="2" bind:change="onChange">
+    <smart-checkbox
+      ty:for="{{ list }}"
+      ty:key="*this"
+      name="{{ item }}"
+      data-name="{{item}}"
+      custom-class="demo-checkbox"
+    >
+      {{I18n.t('checkbox')}} {{ item }}
+    </smart-checkbox>
+  </smart-checkbox-group>
+</demo-block>
+
+<demo-block title="{{I18n.t('useWithCellComponents')}}">
+  <smart-checkbox-group value="{{ result3 }}" data-key="result3" bind:change="onChange">
+    <smart-cell-group >
+      <smart-cell
+        ty:for="{{ list }}"
+        ty:key="*this"
+        title="{{I18n.t('checkbox')}} {{ item }}"
+        value-class="value-class"
+        clickable
+        data-index="{{ index }}"
+        bind:click="toggle"
+      >
+        <smart-checkbox catch:tap="noop" class="checkboxes-{{ index }}" name="{{ item }}" data-name="{{item}}" />
+      </smart-cell>
+    </smart-cell-group>
+  </smart-checkbox-group>
+</demo-block>

package/example/dist/checkbox/demo/index.wxss

@@ -0,0 +1 @@
+@import '../../common/index.wxss';.demo-checkbox,.demo-checkbox-group{margin:10px 0 0 20px}.demo-checkbox-inline{display:inline-block!important;margin:10px 0 0 20px}.value-class{flex:none!important}.icon{width:20px}

package/example/dist/checkbox/index.css

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

package/example/dist/checkbox/index.d.ts

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