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

package/lib/switch/README.md

@@ -0,0 +1,204 @@
+---
+category: 反馈
+---
+
+# Switch 开关
+
+### 介绍
+
+用于在打开和关闭状态之间进行切换。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-switch": "@tuya/miniapp-smart-ui/lib/switch/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-switch checked="{{ checked }}" bind:change="onChange" />
+<smart-switch checked="{{ !checked }}" bind:change="onChange" />
+```
+
+```javascript
+Page({
+  data: {
+    checked: true,
+  },
+
+  onChange({ detail }) {
+    // 需要手动对 checked 状态进行更新
+    this.setData({ checked: detail });
+  },
+});
+```
+
+
+### 开关文案 `v2.7.0`
+
+```html
+<smart-switch
+  active-text="开"
+  inactive-text="关"
+/>
+<view style="--switch-label-font-size: 10px;">
+  <smart-switch
+    active-text="显示"
+    inactive-text="隐藏"
+  />
+</view>
+```
+
+### 禁用状态
+
+```html
+<smart-switch checked="{{ checked }}" disabled />
+```
+
+### 加载中
+
+```html
+<smart-switch checked="{{ checked }}" loading />
+```
+
+### 自定义大小
+
+`size` 属性可以设置组件的大小。
+
+```html
+<smart-switch checked="{{ checked }}" size="24px" />
+```
+
+### 自定义颜色
+
+设置 `active-color` 可以设置选择后的颜色，`inactive-color` 可以设置非选择后的颜色
+
+```html
+<smart-switch
+  checked="{{ checked }}"
+  active-color="#07c160"
+  inactive-color="#ee0a24"
+/>
+```
+
+### 渐变色 `v2.5.0`
+
+所有 CSS background 可以实现的属性， `active-color` 和 `inactive-color` 都可以实现
+
+```html
+<smart-switch
+  checked="{{ checked }}"
+  active-color="linear-gradient(to right, #ff7e5f, #987AFF)"
+  inactive-color="linear-gradient(to right, #407e5f, #841AFF)"
+/>
+```
+
+### 异步控制
+
+```html
+<smart-switch checked="{{ checked }}" bind:change="onChange" />
+```
+
+```js
+Page({
+  data: {
+    checked: true,
+  },
+
+  onChange({ detail }) {
+    ty.showModal({
+      title: '提示',
+      content: '是否切换开关？',
+      success: (res) => {
+        if (res.confirm) {
+          this.setData({ checked2: detail });
+        }
+      },
+    });
+  },
+});
+```
+
+### 阻止冒泡
+
+`stop-click-propagation` 属性可以阻止冒泡。
+
+```html
+<smart-switch checked="{{ checked }}" stop-click-propagation bind:change="onChange" />
+```
+
+### 列表使用
+
+```html
+<smart-cell-group>
+  <smart-cell title="标题">
+    <smart-switch
+      checked="{{ checked }}"
+      bind:change="onChange"
+    />    
+  </smart-cell>
+</smart-cell-group>
+```
+
+## API
+
+### Props
+
+| 参数                            | 说明                   | 类型      | 默认值    |
+| ------------------------------- | ---------------------- | --------- | --------- |
+| active-color                    | 打开时的背景色         | _string_  | `#1989fa` |
+| active-value                    | 打开时的值             | _any_     | `true`    |
+| checked                         | 开关选中状态           | _any_     | `false`   |
+| disabled                        | 是否为禁用状态         | _boolean_ | `false`   |
+| inactive-color                  | 关闭时的背景色         | _string_  | `#fff`    |
+| inactive-value                  | 关闭时的值             | _any_     | `false`   |
+| loading                         | 是否为加载状态         | _boolean_ | `false`   |
+| name                            | 在表单内提交时的标识符 | _string_  | -         |
+| size                            | 开关尺寸               | _string_  | `30px`    |
+| stop-click-propagation `v1.0.2` | 是否阻止冒泡           | _boolean_ | `false`   |
+| active-text `v2.7.0` | 打开时的文案           | _string_ | -   |
+| inactive-text `v2.7.0` | 关闭时的文案           | _string_ | -   |
+
+### Events
+
+| 事件名      | 说明             | 参数                       |
+| ----------- | ---------------- | -------------------------- |
+| bind:change | 开关状态切换回调 | event.detail: 是否选中开关 |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+| node-class   | 圆点样式类   |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --switch-width | _1.5338em_ | 开关宽度 |
+| --switch-height | _0.867em_ | 开关高度 |
+| --switch-node-size | _0.867em_ | 开关节点大小 |
+| --switch-node-z-index | _1_ `v2.0.0` _0_ `v2.13.3` | 开关节点层级 |
+| --switch-node-background-color | _#fff_ | - |
+| --switch-node-box-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05),_ | 开关节点阴影 |
+| --switch-background-color | _var(--app-B4-N6, rgba(0, 0, 0, 0.2))_ | 开关背景颜色 |
+| --switch-on-background-color | _#1989fa_ | 开关开启时背景颜色 |
+| --switch-transition-duration | _0.3s_ | 开关过渡持续时间 |
+| --switch-disabled-opacity | _0.4_ | 开关禁用时不透明度 |
+| --switch-border `@deprecated v2.5.0` | _0.08em solid rgba(0, 0, 0, 0.1)_ | 开关边框 |
+| --switch-node-on-background-color `v2.4.0` | _var(--switch-node-background-color, #fff)_ | 开启时圆球的背景色 |
+| --switch-padding `v2.5.0` | _0.08em_ | 内部边距 |
+| --switch-label-width `v2.7.0` | _2em_ | 文本开关时的默认宽度 |
+| --switch-label-font-size `v2.7.0` | _12px_ | 文字大小 |
+| --switch-label-active-color `v2.7.0` | _var(--app-B3, #ffffff)_ `v2.7.0` _#FFFFFF_ `v2.8.0` | 开时文字颜色 |
+| --switch-label-inactive-color `v2.7.0` | _var(--app-B3, #ffffff)_ `v2.7.0` _#FFFFFF_ `v2.8.0` | 关时文字颜色 |

package/lib/switch/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}:host{display:inline-flex}.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border-radius:var(--switch-node-size,.867em);box-sizing:initial;display:inline-block;height:var(--switch-height,.867em);padding:var(--switch-border,var(--switch-padding,.067em));position:relative;transition:background-color var(--switch-transition-duration,.3s);vertical-align:middle;width:var(--switch-width,1.5338em)}.smart-switch--label{width:var(--switch-label-width,2em)}.smart-switch__center{box-sizing:initial;height:100%;position:relative;width:100%}.smart-switch__label_active{align-items:center;color:var(--switch-label-active-color,#fff);display:flex;height:100%;justify-content:center;left:0;padding-left:var(--switch-border,var(--switch-padding,.067em));position:absolute;text-align:center;top:0;width:calc(100% - var(--switch-node-size, .867em))}.smart-switch__label_active .smart-switch__label_text{font-size:var(--switch-label-font-size,13px)}.smart-switch__label_inactive{align-items:center;color:var(--switch-label-inactive-color,#fff);display:flex;height:100%;justify-content:center;padding-right:var(--switch-border,var(--switch-padding,.067em));position:absolute;right:0;text-align:center;top:0;width:calc(100% - var(--switch-node-size, .867em))}.smart-switch__label_inactive .smart-switch__label_text{font-size:var(--switch-label-font-size,13px)}.smart-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,.867em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,.867em);z-index:var(--switch-node-z-index,0)}.smart-switch__loading{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.smart-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.smart-switch--on .smart-switch__node{background-color:var(--switch-node-on-background-color,var(--switch-node-background-color,#fff));left:calc(100% - var(--switch-node-size, .867em))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}

package/lib/switch/index.d.ts

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

package/lib/switch/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ty_1 = __importDefault(require("../common/ty"));
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    field: true,
+    classes: ['node-class'],
+    props: {
+        checked: null,
+        loading: Boolean,
+        disabled: Boolean,
+        activeColor: String,
+        inactiveColor: String,
+        activeText: String,
+        inactiveText: String,
+        stopClickPropagation: {
+            type: Boolean,
+            value: false,
+        },
+        size: {
+            type: String,
+            value: '30',
+        },
+        activeValue: {
+            type: null,
+            value: true,
+        },
+        inactiveValue: {
+            type: null,
+            value: false,
+        },
+    },
+    methods: {
+        onClick: function () {
+            var _a = this.data, activeValue = _a.activeValue, inactiveValue = _a.inactiveValue, disabled = _a.disabled, loading = _a.loading;
+            if (disabled || loading) {
+                return;
+            }
+            var checked = this.data.checked === activeValue;
+            var value = checked ? inactiveValue : activeValue;
+            ty_1.default.vibrateShort({ type: 'light' });
+            this.$emit('input', value);
+            this.$emit('change', value);
+        },
+    },
+});

package/lib/switch/index.json

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

package/lib/switch/index.wxml

@@ -0,0 +1,57 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<block wx:if="{{stopClickPropagation}}">
+  <view
+    role="switch"
+    aria-checked="{{ checked === activeValue ? 'true' : 'false' }}"
+    aria-disabled="{{ disabled ? 'true' : 'false' }}"
+    class="{{ utils.bem('switch', { on: checked === activeValue, disabled, label: activeText || inactiveText }) }} custom-class"
+    style="{{ computed.rootStyle({ size, checked, activeColor, inactiveColor, activeValue }) }}"
+    catch:tap="onClick"
+  >
+    <view class="smart-switch__center">
+      <view wx:if="{{ activeText }}" style="opacity: {{checked ? '1' : '0'}}" class="smart-switch__label_active">
+        <text class="smart-switch__label_text">{{ activeText }}</text>
+      </view>
+      <view wx:if="{{ inactiveText }}" style="opacity: {{!checked ? '1' : '0'}}" class="smart-switch__label_inactive">
+        <text class="smart-switch__label_text">{{ inactiveText }}</text>
+      </view>
+      <view class="smart-switch__node node-class">
+        <smart-loading
+          wx:if="{{ loading }}"
+          color="{{ computed.loadingColor({ checked, activeColor, inactiveColor, activeValue }) }}"
+          custom-class="smart-switch__loading"
+        />
+      </view>
+    </view>
+  </view>
+</block>
+<block wx:else>
+  <view
+    role="switch"
+    aria-checked="{{ checked === activeValue ? 'true' : 'false' }}"
+    aria-disabled="{{ disabled ? 'true' : 'false' }}"
+    class="{{ utils.bem('switch', { on: checked === activeValue, disabled, label: activeText || inactiveText }) }} custom-class"
+    style="{{ computed.rootStyle({ size, checked, activeColor, inactiveColor, activeValue }) }}"
+    bind:tap="onClick"
+  >
+    <view class="smart-switch__center">
+      <view wx:if="{{ activeText }}" style="opacity: {{checked ? '1' : '0'}}" class="smart-switch__label_active">
+        <text class="smart-switch__label_text">{{ activeText }}</text>
+      </view>
+      <view wx:if="{{ inactiveText }}" style="opacity: {{!checked ? '1' : '0'}}" class="smart-switch__label_inactive">
+        <text class="smart-switch__label_text">{{ inactiveText }}</text>
+      </view>
+      <view class="smart-switch__node node-class">
+        <smart-loading
+          wx:if="{{ loading }}"
+          color="{{ computed.loadingColor({ checked, activeColor, inactiveColor, activeValue }) }}"
+          custom-class="smart-switch__loading"
+          size="{{size}}"
+        />
+      </view>
+    </view>
+  </view>
+</block>
+

package/lib/switch/index.wxs

@@ -0,0 +1,26 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  var currentColor = data.checked === data.activeValue ? data.activeColor : data.inactiveColor;
+
+  return style({
+    'font-size': addUnit(data.size),
+    'background': currentColor,
+  });
+}
+
+var BLUE = '#1989fa';
+var GRAY_DARK = '#969799';
+
+function loadingColor(data) {
+  return data.checked === data.activeValue
+    ? data.activeColor || BLUE
+    : data.inactiveColor || GRAY_DARK;
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  loadingColor: loadingColor,
+};

package/lib/switch/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}:host{display:inline-flex}.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border-radius:var(--switch-node-size,.867em);box-sizing:initial;display:inline-block;height:var(--switch-height,.867em);padding:var(--switch-border,var(--switch-padding,.067em));position:relative;transition:background-color var(--switch-transition-duration,.3s);vertical-align:middle;width:var(--switch-width,1.5338em)}.smart-switch--label{width:var(--switch-label-width,2em)}.smart-switch__center{box-sizing:initial;height:100%;position:relative;width:100%}.smart-switch__label_active{align-items:center;color:var(--switch-label-active-color,#fff);display:flex;height:100%;justify-content:center;left:0;padding-left:var(--switch-border,var(--switch-padding,.067em));position:absolute;text-align:center;top:0;width:calc(100% - var(--switch-node-size, .867em))}.smart-switch__label_active .smart-switch__label_text{font-size:var(--switch-label-font-size,13px)}.smart-switch__label_inactive{align-items:center;color:var(--switch-label-inactive-color,#fff);display:flex;height:100%;justify-content:center;padding-right:var(--switch-border,var(--switch-padding,.067em));position:absolute;right:0;text-align:center;top:0;width:calc(100% - var(--switch-node-size, .867em))}.smart-switch__label_inactive .smart-switch__label_text{font-size:var(--switch-label-font-size,13px)}.smart-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,.867em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,.867em);z-index:var(--switch-node-z-index,0)}.smart-switch__loading{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.smart-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.smart-switch--on .smart-switch__node{background-color:var(--switch-node-on-background-color,var(--switch-node-background-color,#fff));left:calc(100% - var(--switch-node-size, .867em))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}