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

package/packages/button/README.md

@@ -0,0 +1,207 @@
+---
+category: 通用
+---
+
+# Button 按钮
+
+### 介绍
+
+按钮用于触发一个操作，如提交表单。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-button": "@tuya-miniapp/smart-ui/lib/button/index"
+}
+```
+
+## 代码演示
+
+### 按钮类型
+
+支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`。
+
+```html
+<smart-button type="default">默认按钮</smart-button>
+<smart-button type="primary">主要按钮</smart-button>
+<smart-button type="info">信息按钮</smart-button>
+<smart-button type="warning">警告按钮</smart-button>
+<smart-button type="danger">危险按钮</smart-button>
+```
+
+### 朴素按钮
+
+通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
+
+```html
+<smart-button plain type="primary">朴素按钮</smart-button>
+<smart-button plain type="info">朴素按钮</smart-button>
+```
+
+### 细边框
+
+设置`hairline`属性可以开启 0.5px 边框，基于伪类实现。
+
+```html
+<smart-button plain hairline type="primary">细边框按钮</smart-button>
+<smart-button plain hairline type="info">细边框按钮</smart-button>
+```
+
+### 禁用状态
+
+通过`disabled`属性来禁用按钮，此时按钮的`bind:click`事件不会触发。
+
+```html
+<smart-button disabled type="primary">禁用状态</smart-button>
+<smart-button disabled type="info">禁用状态</smart-button>
+```
+
+### 加载状态
+
+```html
+<smart-button loading type="primary" />
+<smart-button loading type="primary" loading-type="spinner" />
+<smart-button loading type="info" loading-text="加载中..." />
+```
+
+### 按钮形状
+
+```html
+<smart-button square type="primary">方形按钮</smart-button>
+<smart-button round type="info">圆形按钮</smart-button>
+```
+
+### 图标按钮
+
+通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。
+
+```html
+<smart-button icon="{{ iconAdd }}" type="primary" />
+<smart-button icon="{{ iconAdd }}" type="primary">按钮</smart-button>
+<smart-button icon="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png" type="info">
+  按钮
+</smart-button>
+```
+
+### 按钮尺寸
+
+支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`。
+
+```html
+<smart-button type="primary" size="large">大号按钮</smart-button>
+<smart-button type="primary" size="normal">普通按钮</smart-button>
+<smart-button type="primary" size="small">小型按钮</smart-button>
+<smart-button type="primary" size="mini">迷你按钮</smart-button>
+```
+
+### 块级元素
+
+通过`block`属性可以将按钮的元素类型设置为块级元素。
+
+```html
+<smart-button type="primary" block>块级元素</smart-button>
+```
+
+### 自定义颜色
+
+通过`color`属性可以自定义按钮的颜色。
+
+```html
+<smart-button color="#7232dd">单色按钮</smart-button>
+<smart-button color="#7232dd" plain>单色按钮</smart-button>
+<smart-button color="linear-gradient(to right, #4bb0ff, #6149f6)">
+  渐变色按钮
+</smart-button>
+```
+
+## API
+
+### Props
+
+| 参数         | 说明                                                     | 类型      | 默认值       |
+| ------------ | -------------------------------------------------------- | --------- | ------------ |
+| block        | 是否为块级元素                                           | _boolean_ | `false`      |
+| button-id    | 标识符，作为原生 button 组件的 id 值                     | _string_  | -            |
+| class-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](/material/smartui?comId=icon&appType=miniapp) | _string_  | `smart-icon` |
+| color        | 按钮颜色，支持传入`linear-gradient`渐变色                | _string_  | -            |
+| custom-style | 自定义样式                                               | _string_  | -            |
+| disabled     | 是否禁用按钮                                             | _boolean_ | `false`      |
+| hairline     | 是否使用 0.5px 边框                                      | _boolean_ | `false`      |
+| icon         | 左侧图标或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp)         | _string_  | -            |
+| id           | 标识符                                                   | _string_  | -            |
+| loading      | 是否显示为加载状态                                       | _boolean_ | `false`      |
+| loading-size | 加载图标大小                                             | _string_  | `20px`       |
+| loading-text | 加载状态提示文字                                         | _string_  | -            |
+| text-style   | 按钮文字样式                                         | _string_  | -            |
+| loading-type | 加载状态图标类型，可选值为 `spinner`                     | _string_  | `circular`   |
+| plain        | 是否为朴素按钮                                           | _boolean_ | `false`      |
+| right-icon   | 右侧图标或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp)         | _string_  | -            |
+| round        | 是否为圆形按钮                                           | _boolean_ | `false`      |
+| size         | 按钮尺寸，可选值为 `normal` `large` `small` `mini`       | _string_  | `normal`     |
+| square       | 是否为方形按钮                                           | _boolean_ | `false`      |
+| type         | 按钮类型，可选值为 `primary` `info` `warning` `danger`   | _string_  | `default`    |
+| send-message-img | sendMessageImg | _string_ | 截图 |
+| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 |
+| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 |
+| session-from | 会话来源 | _string_ | - |
+| show-message-card | 显示会话内消息卡片 | _string_ | `false` |
+
+### Events
+
+| 事件名     | 说明                                     | 参数 |
+| ---------- | ---------------------------------------- | ---- |
+| bind:click | 点击按钮，且按钮状态不为加载或禁用时触发 | -    |
+| bind:error | 当使用开放能力时，发生错误的回调 | - |
+| bind:getrealtimephonenumber `v1.10.21` | 获取手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效 | - |
+| bind:opensetting | 在打开授权设置页后回调 | - |
+
+> Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。
+
+### 外部样式类
+
+| 类名          | 说明           |
+| ------------- | -------------- |
+| custom-class  | 根节点样式类   |
+| loading-class | 加载图标样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+| 名称                                          | 默认值                                         | 描述                               |
+| --------------------------------------------- | ---------------------------------------------- | ---------------------------------- |
+| --button-mini-height                          | _22px_                                         | 迷你按钮高度                       |
+| --button-mini-min-width                       | _50px_                                         | 迷你按钮最小宽度                   |
+| --button-mini-font-size                       | _10px_                                         | 迷你按钮字体大小                   |
+| --button-small-height                         | _30px_                                         | 小按钮高度                         |
+| --button-small-font-size                      | _12px_                                         | 小按钮字体大小                     |
+| --button-small-min-width                      | _60px_                                         | 小按钮最小宽度                     |
+| --button-normal-font-size                     | _14px_                                         | 普通按钮字体大小                   |
+| --button-large-height                         | _48px_                                         | 大按钮高度                         |
+| --button-default-color                        | _var(--app-B1-N1, rgba(0, 0, 0, 1))_           | 默认按钮字体颜色                   |
+| --button-default-height                       | _48px_                                         | 默认按钮高度                       |
+| --button-default-font-size                    | _16px_                                         | 默认按钮字体大小                   |
+| --button-default-background-color             | _var(--app-B3, #ffffff)_                       | 默认按钮背景颜色                   |
+| --button-default-border-color                 | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_         | 默认按钮边框颜色                   |
+| --button-primary-color                        | _#fff_                                         | 主按钮字体颜色                     |
+| --button-primary-background-color             | _var(--app-M3, #2dda86)_                       | 主按钮背景颜色                     |
+| --button-primary-border-color                 | _var(--app-M3, #2dda86)_                       | 主按钮边框颜色                     |
+| --button-info-color                           | _#fff_                                         | 信息按钮字体颜色                   |
+| --button-info-background-color                | _var(--app-M4, #1989fa)_                       | 信息按钮背景颜色                   |
+| --button-info-border-color                    | _var(--app-M4, #1989fa)_                       | 信息按钮边框颜色                   |
+| --button-danger-color                         | _#fff_                                         | 危险按钮字体颜色                   |
+| --button-danger-background-color              | _var(--app-M2, #f04c4c)_                       | 危险按钮背景颜色                   |
+| --button-danger-border-color                  | _var(--app-M2, #f04c4c)_                       | 危险按钮边框颜色                   |
+| --button-warning-color                        | _#fff_                                         | 警告按钮字体颜色                   |
+| --button-warning-background-color             | _var(--app-M5, #ffa000)_                       | 警告按钮背景颜色                   |
+| --button-warning-border-color                 | _var(--app-M5, #ffa000)_                       | 警告按钮边框颜色                   |
+| --button-line-height                          | _20px_                                         | 按钮行高                           |
+| --button-border-width                         | _1px_                                          | 按钮边框宽度                       |
+| --button-border-radius                        | _10px_                                         | 按钮边框圆角半径                   |
+| --button-round-border-radius                  | _999px_                                        | 圆形按钮边框圆角半径               |
+| --button-plain-background-color               | _#fff_                                         | 纯按钮背景颜色                     |
+| --button-disabled-opacity                     | _0.3_                                          | 禁用按钮不透明度                   |
+| --button-font-weight                          | _normal_                                       | 按钮字体粗细                       |
+| --button-primary-font-weight                  | _600_                                          | 主按钮字体粗细                     |

package/packages/button/demo/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-button": "../../button/index",
+    "smart-row": "../../row/index",
+    "smart-col": "../../col/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

package/packages/button/demo/index.less

@@ -0,0 +1,25 @@
+.row {
+  margin-bottom: 15px;
+}
+
+.demo-margin-left {
+  margin-left: 10px;
+}
+
+.demo-margin-right {
+  margin-right: 10px;
+}
+
+.demo-margin-bottom {
+  display: block;
+  margin-bottom: 15px;
+}
+
+.demo-margin-top {
+  display: block;
+  margin-top: 15px;
+}
+
+.w-full {
+  width: 100%;
+}

package/packages/button/demo/index.ts

@@ -0,0 +1,10 @@
+import iconAdd from '@tuya-miniapp/icons/dist/svg/PlusCircle';
+import iconRight from '@tuya-miniapp/icons/dist/svg/Right';
+import { SmartComponent } from '../../common/component';
+
+SmartComponent({
+  data: {
+    iconAdd,
+    iconRight,
+  },
+});

package/packages/button/demo/index.wxml

@@ -0,0 +1,81 @@
+<demo-block title="{{I18n.t('buttonType')}}" padding>
+  <view class="row">
+    <smart-button type="info" class="demo-margin-right">{{I18n.t('informationButton')}}</smart-button>
+    <smart-button type="primary" class="demo-margin-right">{{I18n.t('primaryButton')}}</smart-button>
+    <smart-button class="demo-margin-right">{{I18n.t('defaultButton')}}</smart-button>
+  </view>
+  <smart-button type="danger" class="demo-margin-right">{{I18n.t('dangerousButton')}}</smart-button>
+  <smart-button type="warning">{{I18n.t('warningButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('simpleButton')}}" padding>
+  <smart-button type="info" plain class="demo-margin-right">{{I18n.t('simpleButton')}}</smart-button>
+  <smart-button type="primary" plain>{{I18n.t('simpleButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('thinBezel')}}" padding>
+  <smart-button type="info" plain hairline class="demo-margin-right">{{I18n.t('thinBorderButton')}}</smart-button>
+  <smart-button type="primary" plain hairline>{{I18n.t('thinFrameButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('disabled')}}" padding>
+  <smart-button type="info" disabled class="demo-margin-right">{{I18n.t('disabledStatus')}}</smart-button>
+  <smart-button type="primary" disabled class="demo-margin-right">{{I18n.t('disabledStatus')}}</smart-button>
+  <smart-button disabled>{{I18n.t('defaultButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('loadingStatus')}}" padding>
+  <smart-button loading type="info" loading-text="{{I18n.t('loading')}}..." class="demo-margin-right" />
+  <smart-button loading type="info" class="demo-margin-right" />
+  <smart-button loading type="primary" class="demo-margin-right" />
+  <smart-button loading type="primary" loading-type="spinner" />
+</demo-block>
+
+<demo-block title="{{I18n.t('buttonShape')}}" padding>
+  <smart-button type="info" square class="demo-margin-right">{{I18n.t('squareButton')}}</smart-button>
+  <smart-button type="primary" round>{{I18n.t('roundButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('buttonIsFull')}}" padding>
+  <smart-row gutter="10">
+    <smart-col span="12">
+      <smart-button type="info" square custom-class="w-full">Button</smart-button>
+    </smart-col>
+    <smart-col span="12">
+      <smart-button type="primary" round custom-class="w-full">Button</smart-button>
+    </smart-col>
+  </smart-row>
+</demo-block>
+
+<demo-block title="{{I18n.t('iconButton')}}" padding>
+  <smart-button type="info" icon="{{ iconAdd }}" class="demo-margin-right">{{I18n.t('button')}}</smart-button>
+  <smart-button type="info" icon="{{ iconAdd }}" class="demo-margin-right" />
+  <smart-button type="primary" right-icon="{{ iconRight }}" class="demo-margin-right">{{I18n.t('button')}}</smart-button>
+  <view class="demo-margin-top">
+    <smart-button plain type="primary" icon="{{ iconAdd }}" class="demo-margin-right">{{I18n.t('button')}}</smart-button>
+  <smart-button plain type="primary" icon="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png" custom-class="demo-margin-right">{{I18n.t('button')}}</smart-button>
+  </view>
+</demo-block>
+
+<demo-block title="{{I18n.t('buttonSize')}}" padding>
+  <smart-button type="info" size="large" block custom-class="demo-margin-bottom">{{I18n.t('largeButton')}}</smart-button>
+  <smart-button type="info" class="demo-margin-right">{{I18n.t('normalButton')}}</smart-button>
+  <smart-button type="info" size="small" class="demo-margin-right">{{I18n.t('smallButton')}}</smart-button>
+  <smart-button type="info" size="mini">{{I18n.t('miniButton')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('blockLevelElement')}}" padding>
+  <smart-button type="primary" custom-class="demo-margin-bottom">{{I18n.t('regularButton')}}</smart-button>
+  <smart-button type="primary" block>{{I18n.t('blockLevelElement')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('customColor')}}" padding>
+  <smart-button color="#00BEE4" class="demo-margin-right">{{I18n.t('monocolorButton')}}</smart-button>
+  <smart-button color="#3246FF" class="demo-margin-right" plain>{{I18n.t('monochromeButton')}}</smart-button>
+  <smart-button color="linear-gradient(180deg, #0FB3FF 0%, #9DE0FF 100%)">{{I18n.t('gradientColorButton')}}</smart-button>
+  <smart-button color="linear-gradient(98deg, #0FB3FF 0%, #9DE0FF 100%)" custom-class="demo-margin-top" block>{{I18n.t('diagonalGradient')}}</smart-button>
+</demo-block>
+
+<demo-block title="{{I18n.t('projection')}}" padding>
+  <smart-button color="#006EDE" custom-style="box-shadow: 0px 6px 15px 0px rgba(0, 110, 222, 0.2);" block>{{I18n.t('projection')}}</smart-button>
+</demo-block>

package/packages/button/index.json

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

package/packages/button/index.less

@@ -0,0 +1,270 @@
+@import '../common/style/var.less';
+
+.smart-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -webkit-text-size-adjust: 100%;
+  height: var(--button-default-height, @button-default-height);
+  line-height: var(--button-line-height, @button-line-height);
+  font-size: var(--button-default-font-size, @button-default-font-size);
+  font-weight: @button-font-weight;
+  transition: opacity @animation-duration-fast;
+  border-radius: var(--button-border-radius, @button-border-radius);
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    border: inherit;
+    border-radius: inherit; /* inherit parent's border radius */
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+    background-color: @black;
+    border-color: @black;
+  }
+
+  // reset weapp default border
+  &::after {
+    border-width: 0;
+  }
+
+  &--active::before {
+    opacity: 0.15;
+  }
+
+  &--unclickable::after {
+    display: none;
+  }
+
+  &--default {
+    color: var(--button-default-color, @button-default-color);
+    background: var(
+      --button-default-background-color,
+      @button-default-background-color
+    );
+    border: var(--button-border-width, @button-border-width) solid
+      var(--button-default-border-color, @button-default-border-color);
+    // for icon svg
+    & .smart-button__icon, .smart-button__right-icon {
+      & > view > view {
+        background: var(--button-default-color, @button-default-color);
+      }
+    }
+  }
+
+  &--primary {
+    font-weight: @button-primary-font-weight;
+    color: var(--button-primary-color, @button-primary-color);
+    background: var(
+      --button-primary-background-color,
+      @button-primary-background-color
+    );
+    border: var(--button-border-width, @button-border-width) solid
+      var(--button-primary-border-color, @button-primary-border-color);
+    & .smart-button__icon, .smart-button__right-icon {
+      & > view > view {
+        background: var(--button-primary-color, @button-primary-color);
+      }
+    }
+  }
+
+  &--info {
+    color: var(--button-info-color, @button-info-color);
+    background: var(
+      --button-info-background-color,
+      @button-info-background-color
+    );
+    border: var(--button-border-width, @button-border-width) solid
+      var(--button-info-border-color, @button-info-border-color);
+    & .smart-button__icon, .smart-button__right-icon {
+      & > view > view {
+        background: var(--button-info-color, @button-info-color);
+      }
+    }
+  }
+
+  &--danger {
+    color: var(--button-danger-color, @button-danger-color);
+    background: var(
+      --button-danger-background-color,
+      @button-danger-background-color
+    );
+    border: var(--button-border-width, @button-border-width) solid
+      var(--button-danger-border-color, @button-danger-border-color);
+    & .smart-button__icon, .smart-button__right-icon {
+      & > view > view {
+        background: var(--button-danger-color, @button-danger-color);
+      }
+    }
+  }
+
+  &--warning {
+    color: var(--button-warning-color, @button-warning-color);
+    background: var(
+      --button-warning-background-color,
+      @button-warning-background-color
+    );
+    border: var(--button-border-width, @button-border-width) solid
+      var(--button-warning-border-color, @button-warning-border-color);
+    & .smart-button__icon, .smart-button__right-icon {
+      & > view > view {
+        background: var(--button-warning-color, @button-warning-color);
+      }
+    }
+  }
+
+  &--plain {
+    background: var(
+      --button-plain-background-color,
+      @button-plain-background-color
+    );
+
+    &.smart-button--primary {
+      color: var(
+        --button-primary-background-color,
+        @button-primary-background-color
+      );
+      & .smart-button__icon, .smart-button__right-icon {
+        & > view > view {
+          background: var(--button-primary-background-color, @button-primary-background-color);
+        }
+      }
+    }
+
+    &.smart-button--info {
+      color: var(--button-info-background-color, @button-info-background-color);
+      & .smart-button__icon, .smart-button__right-icon {
+        & > view > view {
+          background: var(--button-info-background-color, @button-info-background-color);
+        }
+      }
+    }
+
+    &.smart-button--danger {
+      color: var(
+        --button-danger-background-color,
+        @button-danger-background-color
+      );
+      & .smart-button__icon, .smart-button__right-icon {
+        & > view > view {
+          background: var(--button-danger-background-color, @button-danger-background-color);
+        }
+      }
+    }
+
+    &.smart-button--warning {
+      color: var(
+        --button-warning-background-color,
+        @button-warning-background-color
+      );
+      & .smart-button__icon, .smart-button__right-icon {
+        & > view > view {
+          background: var(--button-warning-background-color, @button-warning-background-color);
+        }
+      }
+    }
+  }
+
+  &--large {
+    width: 100%;
+    height: var(--button-large-height, @button-large-height);
+  }
+
+  &--normal {
+    padding: 0 15px;
+    font-size: var(--button-normal-font-size, @button-normal-font-size);
+  }
+
+  &--small {
+    min-width: var(--button-small-min-width, @button-small-min-width);
+    height: var(--button-small-height, @button-small-height);
+    padding: 0 var(--padding-xs, @padding-xs);
+    font-size: var(--button-small-font-size, @button-small-font-size);
+  }
+
+  // mini图标默认宽度50px，文字不能超过4个
+  &--mini {
+    display: inline-block;
+    min-width: var(--button-mini-min-width, @button-mini-min-width);
+    height: var(--button-mini-height, @button-mini-height);
+    font-size: var(--button-mini-font-size, @button-mini-font-size);
+
+    & + .smart-button--mini {
+      margin-left: 5px;
+    }
+  }
+
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+
+  &--round {
+    border-radius: var(
+      --button-round-border-radius,
+      @button-round-border-radius
+    );
+  }
+
+  &--square {
+    border-radius: 0;
+  }
+
+  &--disabled {
+    opacity: var(--button-disabled-opacity, @button-disabled-opacity);
+  }
+
+  &__text {
+    display: inline;
+  }
+
+  &__loading-text,
+  &__icon + &__text:not(:empty) {
+    margin-left: @padding-base;
+  }
+
+  &__text:not(:empty) + &__right-icon {
+    margin-left: @padding-base;
+  }
+
+  &__icon,
+  &__right-icon {
+    min-width: 1em;
+    line-height: inherit !important;
+    vertical-align: top;
+  }
+
+  &--hairline {
+    padding-top: 1px; // add 1px padding for text vertical align middle
+    border-width: 0;
+
+    &::after {
+      border-color: inherit;
+      border-width: 1px;
+      border-radius: calc(
+        var(--button-border-radius, @button-border-radius) * 2
+      );
+    }
+
+    &.smart-button--round::after {
+      border-radius: var(
+        --button-round-border-radius,
+        @button-round-border-radius
+      );
+    }
+
+    &.smart-button--square::after {
+      border-radius: 0;
+    }
+  }
+}