@tuya-miniapp/smart-ui 2.3.8-beta-5 → 2.3.9-beta-1

package/packages/button/README.md

@@ -1,207 +0,0 @@
----
-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

@@ -1,9 +0,0 @@
-{
-  "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

@@ -1,25 +0,0 @@
-.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

@@ -1,10 +0,0 @@
-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

@@ -1,81 +0,0 @@
-<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

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

package/packages/button/index.less

@@ -1,270 +0,0 @@
-@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;
-    }
-  }
-}