@tuya/miniapp-smart-ui 2.13.5-beta-0

package/dist/checkbox/README.md

@@ -0,0 +1,359 @@
+---
+category: 数据录入
+---
+
+# Checkbox 复选框
+
+### 介绍
+
+在一组备选项中进行多选。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-checkbox": "@tuya/miniapp-smart-ui/lib/checkbox/index",
+  "smart-checkbox-group": "@tuya/miniapp-smart-ui/lib/checkbox-group/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过`value`绑定复选框的勾选状态。
+
+```html
+<smart-checkbox
+  value="{{ checked }}"
+  custom-class="demo-checkbox-inline"
+  bind:change="onChange"
+/>
+<smart-checkbox
+  value="{{ checked ? false : true }}"
+  custom-class="demo-checkbox-inline"
+  bind:change="onChange2"
+/>
+```
+
+```js
+Page({
+  data: {
+    checked: true,
+  },
+
+  onChange(event) {
+    this.setData({ checked: event.detail });
+  },
+
+  onChange2(event) {
+    this.setData({ checked: !event.detail });
+  },
+});
+```
+
+### 禁用状态
+
+通过设置`disabled`属性可以禁用复选框。
+
+```html
+<smart-checkbox
+  disabled
+  value="{{ false }}"
+  custom-class="demo-checkbox-inline"
+/>
+<smart-checkbox
+  disabled
+  value="{{ true }}"
+  custom-class="demo-checkbox-inline"
+/>
+```
+
+### 自定义形状
+
+将`shape`属性设置为`square`，复选框的形状会变成方形。
+
+```html
+<smart-checkbox
+  value="{{ checked }}"
+  shape="square"
+  custom-class="demo-checkbox-inline"
+  bind:change="onChange"
+/>
+<smart-checkbox
+  value="{{ checked ? false : true }}"
+  shape="square"
+  custom-class="demo-checkbox-inline"
+  bind:change="onChange2"
+/>
+```
+
+### 自定义颜色
+
+通过`checked-color`属性可以自定义选中状态下的图标颜色。
+
+```html
+<smart-checkbox
+  value="{{ checked }}"
+  checked-color="#10D0D0"
+  custom-class="demo-checkbox-inline"
+  bind:change="onChange"
+/>
+<smart-checkbox
+  value="{{ checked ? false : true }}"
+  checked-color="#10D0D0"
+  custom-class="demo-checkbox-inline"
+  bind:change="onChange2"
+/>
+```
+
+### 自定义大小
+
+通过`icon-size`属性可以自定义图标的大小。
+
+```html
+<smart-checkbox
+  icon-size="28px"
+  value="{{ checked }}"
+  custom-class="demo-checkbox-inline"
+  bind:change="onChange"
+/>
+<smart-checkbox
+  icon-size="28px"
+  value="{{ checked ? false : true }}"
+  custom-class="demo-checkbox-inline"
+  bind:change="onChange2"
+/>
+```
+
+## 展示文本
+
+通过 slot 子节点可展示文本
+
+<smart-checkbox
+  value="{{ checked }}"
+  bind:change="onChange"
+>
+  自定义文本
+</smart-checkbox>
+
+### 自定义图标
+
+通过 `icon` 配合 `use-icon-slot` 插槽自定义图标。
+
+```html
+<smart-checkbox
+  use-icon-slot
+  value="{{ checked }}"
+  bind:change="onChange"
+>
+  自定义图标
+  <image
+    slot="icon"
+    class="icon"
+    mode="widthFix"
+    src="{{ checked ? activeIcon : inactiveIcon }}"
+  />
+</smart-checkbox>
+```
+
+```js
+Page({
+  data: {
+    checked: true,
+    activeIcon: 'https://images.tuyacn.com/content-platform/hestia/1730877912e76cbdb7563.png',
+    inactiveIcon: '',
+  },
+
+  onChange(event) {
+    this.setData({
+      checked: event.detail,
+    });
+  },
+});
+```
+
+### 禁用文本点击
+
+通过设置`label-disabled`属性可以禁用复选框文本点击。
+
+```html
+  <smart-checkbox
+  label-disabled
+  value="{{ checked }}"
+  bind:change="onChange"
+>
+  Checkbox 复选框
+</smart-checkbox>
+```
+
+### 复选框组
+
+需要与`smart-checkbox-group`一起使用，选中值是一个数组，通过`value`绑定在`smart-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值。
+
+```html
+<smart-checkbox-group value="{{ result }}" bind:change="onChange">
+  <smart-checkbox name="a">Checkbox 复选框 a</smart-checkbox>
+  <smart-checkbox name="b">Checkbox 复选框 b</smart-checkbox>
+  <smart-checkbox name="c">Checkbox 复选框 c</smart-checkbox>
+</smart-checkbox-group>
+```
+
+```javascript
+Page({
+  data: {
+    result: ['a', 'b'],
+  },
+
+  onChange(event) {
+    this.setData({
+      result: event.detail,
+    });
+  },
+});
+```
+
+### 限制最大可选数
+
+```html
+<smart-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">
+  <smart-checkbox name="a">复选框 a</smart-checkbox>
+  <smart-checkbox name="b">复选框 b</smart-checkbox>
+  <smart-checkbox name="c">复选框 c</smart-checkbox>
+</smart-checkbox-group>
+```
+
+### 搭配单元格组件使用
+
+此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换。
+
+```html
+<smart-checkbox-group value="{{ result }}" bind:change="onChange">
+  <smart-cell-group>
+    <smart-cell
+      wx:for="{{ list }}"
+      wx:key="index"
+      title="复选框 {{ item }}"
+      value-class="value-class"
+      clickable
+      data-index="{{ index }}"
+      bind:click="toggle"
+    >
+      <smart-checkbox
+        catch:tap="noop"
+        class="checkboxes-{{ index }}"
+        name="{{ item }}"
+      />
+    </smart-cell>
+  </smart-cell-group>
+</smart-checkbox-group>
+```
+
+```js
+Page({
+  data: {
+    list: ['a', 'b', 'c'],
+    result: ['a', 'b'],
+  },
+
+  onChange(event) {
+    this.setData({
+      result: event.detail,
+    });
+  },
+
+  toggle(event) {
+    const { index } = event.currentTarget.dataset;
+    const checkbox = this.selectComponent(`.checkboxes-${index}`);
+    checkbox.toggle();
+  },
+
+  noop() {},
+});
+```
+
+```css
+.value-class {
+  flex: none !important;
+}
+```
+
+## API
+
+### Checkbox Props
+
+| 参数           | 说明                            | 类型               | 默认值    |
+| -------------- | ------------------------------- | ------------------ | --------- |
+| checked-color  | 选中状态颜色                    | _string_           | `#1989fa` |
+| disabled       | 是否禁用单选框                  | _boolean_          | `false`   |
+| icon-size      | icon 大小                       | _string \| number_ | `24px`    |
+| label-disabled | 是否禁用单选框内容点击          | _boolean_          | `false`   |
+| label-position | 文本位置，可选值为 `left`       | _string_           | `right`   |
+| name           | 标识 Checkbox 名称              | _string_           | -         |
+| shape          | 形状，可选值为 `round` `square` | _string_           | `round`   |
+| use-icon-slot  | 是否使用 icon slot              | _boolean_          | `false`   |
+| value          | 是否为选中状态                  | _boolean_          | `false`   |
+
+### CheckboxGroup Props
+
+| 参数               | 说明                            | 类型      | 默认值        |
+| ------------------ | ------------------------------- | --------- | ------------- |
+| direction | 排列方向，可选值为 `horizontal` | _string_  | `vertical`    |
+| disabled           | 是否禁用所有单选框              | _boolean_ | `false`       |
+| max                | 设置最大可选数                  | _number_  | `0`（无限制） |
+| name               | 在表单内提交时的标识符          | _string_  | -             |
+| value              | 所有选中项的 name               | _Array_   | -             |
+
+### Checkbox Event
+
+| 事件名      | 说明                     | 回调参数     |
+| ----------- | ------------------------ | ------------ |
+| bind:change | 当绑定值变化时触发的事件 | 当前组件的值 |
+
+### Checkbox 外部样式类
+
+| 类名         | 说明           |
+| ------------ | -------------- |
+| custom-class | 根节点样式类   |
+| icon-class   | 图标样式类     |
+| label-class  | 描述信息样式类 |
+
+### CheckboxGroup Event
+
+| 事件名      | 说明                     | 回调参数     |
+| ----------- | ------------------------ | ------------ |
+| bind:change | 当绑定值变化时触发的事件 | 当前组件的值 |
+
+### Checkbox Slot
+
+| 名称 | 说明       |
+| ---- | ---------- |
+| -    | 自定义文本 |
+| icon | 自定义图标 |
+
+### Checkbox 方法
+
+通过 [selectComponent](/material/smartui?comId=faq&appType=miniapp) 可以获取到 checkbox 实例并调用实例方法。
+
+| 方法名 | 参数 | 返回值 | 介绍         |
+| ------ | ---- | ------ | ------------ |
+| toggle | -    | -      | 切换选中状态 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --checkbox-size               | _24px_                                 | 复选框的大小 |
+| --checkbox-border-color       | _var(--app-B6-N6, rgba(0, 0, 0, 0.2))_                               | 复选框的边框颜色 |
+| --checkbox-border-radius      | _4px_                                  | 复选框的边框圆角 |
+| --checkbox-transition-duration| _0.2s_                                 | 复选框的过渡持续时间 |
+| --checkbox-label-size         | _12px_                                 | 复选框标签的字体大小 |
+| --checkbox-label-margin       | _10px_                                 | 复选框标签的外边距 |
+| --checkbox-label-color        | _var(--app-B6-N1, rgba(0, 0, 0, 1))_                               | 复选框标签的颜色 |
+| --checkbox-checked-icon-color | _@M4_                                  | 复选框选中状态的图标颜色 |
+| --checkbox-disabled-label-color| _var(--app-B6-N1, rgba(0, 0, 0, 1))_                              | 禁用状态下复选框标签的颜色 |
+| --checkbox-disabled-opacity   | _0.3_                    | 禁用状态下复选框的透明度 |

package/dist/checkbox/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.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/dist/checkbox/index.d.ts

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

package/dist/checkbox/index.js

@@ -0,0 +1,79 @@
+import CheckIcon from '@tuya-miniapp/icons/dist/svg/Check';
+import { useParent } from '../common/relation';
+import { SmartComponent } from '../common/component';
+function emit(target, value) {
+    target.$emit('input', value);
+    target.$emit('change', value);
+}
+SmartComponent({
+    field: true,
+    relation: 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: 24,
+        },
+    },
+    data: {
+        parentDisabled: false,
+        direction: 'vertical',
+        icon: CheckIcon,
+    },
+    methods: {
+        emitChange(value) {
+            if (this.parent) {
+                this.setParentValue(this.parent, value);
+            }
+            else {
+                emit(this, value);
+            }
+        },
+        toggle() {
+            const { parentDisabled, disabled, value } = this.data;
+            if (!disabled && !parentDisabled) {
+                this.emitChange(!value);
+            }
+        },
+        onClickLabel() {
+            const { labelDisabled, parentDisabled, disabled, value } = this.data;
+            if (!disabled && !labelDisabled && !parentDisabled) {
+                this.emitChange(!value);
+            }
+        },
+        setParentValue(parent, value) {
+            const parentValue = parent.data.value.slice();
+            const { name } = this.dataset;
+            const { max } = parent.data;
+            if (value) {
+                if (max && parentValue.length >= max) {
+                    return;
+                }
+                if (parentValue.indexOf(name) === -1) {
+                    parentValue.push(name);
+                    emit(parent, parentValue);
+                }
+            }
+            else {
+                const index = parentValue.indexOf(name);
+                if (index !== -1) {
+                    parentValue.splice(index, 1);
+                    emit(parent, parentValue);
+                }
+            }
+        },
+    },
+});

package/dist/checkbox/index.json

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

package/dist/checkbox/index.wxml

@@ -0,0 +1,37 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view 
+  role="checkbox" 
+  aria-checked="{{ value ? 'true' : 'false' }}" 
+  aria-disabled="{{ (disabled || parentDisabled) ? 'true' : 'false' }}" 
+  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 }]) }}"
+    catch:tap="onClickLabel"
+  >
+    <slot />
+  </view>
+  <view class="smart-checkbox__icon-wrap" catch:tap="toggle">
+    <slot wx:if="{{ useIconSlot }}" name="icon" />
+    <smart-icon
+      wx:else
+      name="{{ icon }}"
+      size="1em"
+      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 }]) }}"
+    catch:tap="onClickLabel"
+  >
+    <slot />
+  </view>
+</view>

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

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.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/dist/checkbox-group/index.css

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

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

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

package/dist/checkbox-group/index.js

@@ -0,0 +1,36 @@
+import { useChildren } from '../common/relation';
+import { SmartComponent } from '../common/component';
+SmartComponent({
+    field: true,
+    relation: useChildren('checkbox', function (target) {
+        this.updateChild(target);
+    }),
+    props: {
+        max: Number,
+        value: {
+            type: Array,
+            observer: 'updateChildren',
+        },
+        disabled: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+        direction: {
+            type: String,
+            value: 'vertical',
+        },
+    },
+    methods: {
+        updateChildren() {
+            this.children.forEach(child => this.updateChild(child));
+        },
+        updateChild(child) {
+            const { value, disabled, direction } = this.data;
+            child.setData({
+                value: value.indexOf(child.dataset.name) !== -1,
+                parentDisabled: disabled,
+                direction,
+            });
+        },
+    },
+});

package/dist/checkbox-group/index.json

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

package/dist/checkbox-group/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="{{ utils.bem('checkbox-group', [{ horizontal: direction === 'horizontal' }]) }}">
+  <slot />
+</view>

package/dist/checkbox-group/index.wxss

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