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

package/lib/bottom-sheet/index.wxs

@@ -0,0 +1,163 @@
+function getHeight(contentHeight) {
+  var height = contentHeight
+    ? typeof contentHeight === 'number'
+      ? contentHeight + 'rpx'
+      : contentHeight
+    : 'undefined';
+  return 'height: ' + height + ';';
+}
+
+function getCustomStyle(draggable, contentHeight, maxHeight) {
+  if (draggable) {
+    return 'max-height: unset;min-height: unset;';
+  }
+  if (contentHeight) {
+    return 'max-height: fit-content;';
+  }
+  if (maxHeight) {
+    return 'max-height: ' + maxHeight + ';';
+  }
+  return '';
+}
+
+function queryComponent(ownerInstance, instanceId, selector) {
+  var root = ownerInstance.selectComponent('#' + instanceId);
+  return selector ? root.selectComponent(selector) : root;
+}
+
+function getContentNode(ownerInstance, instanceId) {
+  return queryComponent(ownerInstance, instanceId, '.smart-bottom-sheet__content');
+}
+
+var state = {};
+
+function getEndY(params) {
+  var instanceId = params.instanceId;
+  var endY = params.endY;
+  var minHeight = params.minHeight;
+  var maxHeight = params.maxHeight;
+  var midHeight = params.midHeight;
+  var windowHeight = params.windowHeight;
+
+  var B = windowHeight;
+  maxHeight = maxHeight || B * 0.8;
+  minHeight = minHeight || B * 0.1;
+  midHeight = midHeight || B * 0.5;
+
+  var splitHeight = (maxHeight + midHeight) * 0.5;
+  var splitLow = (midHeight + minHeight) * 0.5;
+
+  if (endY > splitHeight) {
+    return { value: maxHeight, position: 'max' };
+  } else if (endY > midHeight) {
+    return { value: midHeight, position: 'mid' };
+  } else if (endY > splitLow) {
+    return { value: midHeight, position: 'mid' };
+  } else {
+    return { value: minHeight, position: 'min' };
+  }
+}
+
+function onDrag(instanceId, data) {
+  return function (e, ownerInstance) {
+    var delta = e.touches[0].pageY - state[instanceId].startY;
+    var contentNode = getContentNode(ownerInstance, instanceId);
+
+    var originHeight = state[instanceId].originHeight;
+    state[instanceId].delta = delta;
+
+    var newHeight = originHeight - delta;
+    if (data.lockMaxDrag && data.maxDragHeight) {
+      newHeight = Math.min(newHeight, data.maxDragHeight);
+    }
+
+    state[instanceId].newHeight = newHeight;
+
+    contentNode.setStyle({
+      height: newHeight + 'px',
+    });
+  };
+}
+
+function onDragStart(instanceId) {
+  return function (e, ownerInstance) {
+    var contentNode = getContentNode(ownerInstance, instanceId);
+    var rect = contentNode.getBoundingClientRect();
+    var originHeight = rect.height;
+
+    state[instanceId] = {
+      startY: e.touches[0].pageY,
+      originHeight: originHeight,
+    };
+  };
+}
+
+function onDragEnd(instanceId, data) {
+  return function (e, ownerInstance) {
+    var minDragHeight = data.minDragHeight;
+    var maxDragHeight = data.maxDragHeight;
+    var midDragHeight = data.midDragHeight;
+    var windowHeight = data.windowHeight;
+    var closeDragHeight = data.closeDragHeight;
+    var newHeight = state[instanceId].newHeight;
+
+    if (newHeight && closeDragHeight && newHeight < closeDragHeight) {
+      ownerInstance.callMethod('onClose');
+    } else {
+      var endYRes = getEndY({
+        instanceId: instanceId,
+        endY: newHeight,
+        minHeight: minDragHeight,
+        maxHeight: maxDragHeight,
+        midHeight: midDragHeight,
+        windowHeight: windowHeight,
+        closeDragHeight: closeDragHeight,
+      });
+      var endHeight = endYRes.value;
+      var position = endYRes.position;
+      var contentNode = getContentNode(ownerInstance, instanceId);
+      contentNode.setStyle({
+        height: endHeight + 'px',
+        transition: 'height 0.3s ease-in-out',
+      });
+      setTimeout(function () {
+        contentNode.setStyle({
+          transition: 'none',
+        });
+        ownerInstance.triggerEvent('drag-position', position);
+      }, 300);
+    }
+  };
+}
+
+function init(instanceId, currentHeight) {
+  return function (prop, oldProp, ownerInstance) {
+    if (!instanceId) return;
+
+    var currOriginHeight = state[instanceId] ? state[instanceId].originHeight : null;
+    var contentNode = getContentNode(ownerInstance, instanceId);
+
+    if (!currOriginHeight) {
+      var rect = contentNode.getBoundingClientRect();
+      var originHeight = rect.height;
+
+      state[instanceId] = {
+        originHeight: originHeight,
+      };
+      currOriginHeight = originHeight;
+    }
+
+    contentNode.setStyle({
+      height: (currentHeight || currOriginHeight) + 'px',
+    });
+  };
+}
+
+module.exports = {
+  getHeight: getHeight,
+  getCustomStyle: getCustomStyle,
+  onDrag: onDrag,
+  onDragStart: onDragStart,
+  onDragEnd: onDragEnd,
+  init: init,
+};

package/lib/bottom-sheet/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-bottom-sheet{color:var(--bottom-sheet-font-color,var(--app-B4-N1,#000));display:flex;flex-direction:column;max-height:var(--bottom-sheet-max-height,50%);min-height:var(--bottom-sheet-min-height,auto);padding-bottom:env(safe-area-inset-bottom);width:var(--bottom-sheet-width,100%)}.smart-bottom-sheet__header{color:var(--bottom-sheet-header-color,var(--app-B4-N1,#000));font-size:var(--bottom-sheet-header-font-size,17px);font-weight:var(--bottom-sheet-header-font-weight,600);line-height:var(--bottom-sheet-header-height,56px);padding:var(--bottom-sheet-header-padding,0 16px);text-align:center}.smart-bottom-sheet__header:empty{display:none}.smart-bottom-sheet__dragger{align-items:center;display:flex;justify-content:center;padding:var(--bottom-sheet-dragger-padding,8px 0)}.smart-bottom-sheet__dragger_node{background:var(--bottom-sheet-dragger-node-background,var(--smart-ui-bottom-sheet-dragger-node-background,rgba(0,0,0,.3)));border-radius:var(--bottom-sheet-dragger-node-border-radius,2px);height:var(--bottom-sheet-dragger-node-height,4px);width:var(--bottom-sheet-dragger-node-width,30px)}.smart-bottom-sheet__content{box-sizing:border-box;overflow-y:auto;padding:var(--bottom-sheet-padding,0 16px);position:relative}.smart-bottom-sheet__content_height{overflow-y:visible}.smart-bottom-sheet__icon{margin:var(--bottom-sheet-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}

package/lib/button/README.md

@@ -0,0 +1,205 @@
+---
+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>朴素按钮</smart-button>
+<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="primary" 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`    |
+
+### Events
+
+| 事件名     | 说明                                     | 参数 |
+| ---------- | ---------------------------------------- | ---- |
+| bind:click | 点击按钮，且按钮状态不为加载或禁用时触发 | -    |
+| bind:error | 当使用开放能力时，发生错误的回调 | - |
+
+> Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。
+
+### 外部样式类
+
+| 类名          | 说明           |
+| ------------- | -------------- |
+| custom-class  | 根节点样式类   |
+| loading-class | 加载图标样式类 |
+| hover-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-color `v2.13.2`        | _rgba(0, 0, 0, 0.9)_                           | 纯按钮文字颜色                     |
+| --button-plain-background-color               | _#fff_                                         | 纯按钮背景颜色                     |
+| --button-disabled-opacity                     | _0.3_                                          | 禁用按钮不透明度                   |
+| --button-font-weight                          | _normal_                                       | 按钮字体粗细                       |
+| --button-primary-font-weight                  | _600_                                          | 主按钮字体粗细                     |

package/lib/button/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}:root{--smart-a11y-action-sheet-item-text-color:#000}:root[theme=dark]{--smart-a11y-action-sheet-item-text-color:#fff}.smart-button{-webkit-text-size-adjust:100%;align-items:center;-webkit-appearance:none;border-radius:var(--button-border-radius,10px);box-sizing:border-box;display:inline-flex;font-size:var(--button-default-font-size,16px);font-weight:400;height:var(--button-default-height,48px);justify-content:center;line-height:var(--button-line-height,20px);padding:0;position:relative;text-align:center;transition:opacity .2s;vertical-align:middle}.smart-button:before{background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:" ";height:100%;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.smart-button:after{border-width:0}.smart-button--active:before{opacity:.15}.smart-button--unclickable:after{display:none}.smart-button--default{background:var(--button-default-background-color,var(--app-B3,#fff));border:var(--button-border-width,1px) solid var(--button-default-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));color:var(--button-default-color,var(--app-B1-N1,rgba(0,0,0,.9)))}.smart-button--default .smart-button__icon>view>view,.smart-button--default .smart-button__right-icon>view>view{background:var(--button-default-color,var(--app-B1-N1,rgba(0,0,0,.9)))}.smart-button--primary{background:var(--button-primary-background-color,var(--app-M3,#2dda86));border:var(--button-border-width,1px) solid var(--button-primary-border-color,var(--app-M3,#2dda86));color:var(--button-primary-color,#fff);font-weight:600}.smart-button--primary .smart-button__icon>view>view,.smart-button--primary .smart-button__right-icon>view>view{background:var(--button-primary-color,#fff)}.smart-button--info{background:var(--button-info-background-color,var(--app-M4,#1989fa));border:var(--button-border-width,1px) solid var(--button-info-border-color,var(--app-M4,#1989fa));color:var(--button-info-color,#fff)}.smart-button--info .smart-button__icon>view>view,.smart-button--info .smart-button__right-icon>view>view{background:var(--button-info-color,#fff)}.smart-button--danger{background:var(--button-danger-background-color,var(--app-M2,#f04c4c));border:var(--button-border-width,1px) solid var(--button-danger-border-color,var(--app-M2,#f04c4c));color:var(--button-danger-color,#fff)}.smart-button--danger .smart-button__icon>view>view,.smart-button--danger .smart-button__right-icon>view>view{background:var(--button-danger-color,#fff)}.smart-button--warning{background:var(--button-warning-background-color,var(--app-M5,#ffa000));border:var(--button-border-width,1px) solid var(--button-warning-border-color,var(--app-M5,#ffa000));color:var(--button-warning-color,#fff)}.smart-button--warning .smart-button__icon>view>view,.smart-button--warning .smart-button__right-icon>view>view{background:var(--button-warning-color,#fff)}.smart-button--plain{background:var(--button-plain-background-color,#fff);color:var(--button-plain-color,rgba(0,0,0,.9))}.smart-button--plain.smart-button--primary{color:var(--button-primary-background-color,var(--app-M3,#2dda86))}.smart-button--plain.smart-button--primary .smart-button__icon>view>view,.smart-button--plain.smart-button--primary .smart-button__right-icon>view>view{background:var(--button-primary-background-color,var(--app-M3,#2dda86))}.smart-button--plain.smart-button--info{color:var(--button-info-background-color,var(--app-M4,#1989fa))}.smart-button--plain.smart-button--info .smart-button__icon>view>view,.smart-button--plain.smart-button--info .smart-button__right-icon>view>view{background:var(--button-info-background-color,var(--app-M4,#1989fa))}.smart-button--plain.smart-button--danger{color:var(--button-danger-background-color,var(--app-M2,#f04c4c))}.smart-button--plain.smart-button--danger .smart-button__icon>view>view,.smart-button--plain.smart-button--danger .smart-button__right-icon>view>view{background:var(--button-danger-background-color,var(--app-M2,#f04c4c))}.smart-button--plain.smart-button--warning{color:var(--button-warning-background-color,var(--app-M5,#ffa000))}.smart-button--plain.smart-button--warning .smart-button__icon>view>view,.smart-button--plain.smart-button--warning .smart-button__right-icon>view>view{background:var(--button-warning-background-color,var(--app-M5,#ffa000))}.smart-button--large{height:var(--button-large-height,48px);width:100%}.smart-button--normal{font-size:var(--button-normal-font-size,14px);padding:0 15px}.smart-button--small{font-size:var(--button-small-font-size,12px);height:var(--button-small-height,30px);min-width:var(--button-small-min-width,60px);padding:0 var(--padding-xs,8px)}.smart-button--mini{display:inline-block;font-size:var(--button-mini-font-size,10px);height:var(--button-mini-height,22px);min-width:var(--button-mini-min-width,50px)}.smart-button--mini+.smart-button--mini{margin-left:5px}.smart-button--block{display:flex;width:100%}.smart-button--round{border-radius:var(--button-round-border-radius,999px)}.smart-button--square{border-radius:0}.smart-button--disabled{opacity:var(--button-disabled-opacity,.3)}.smart-button__text{display:inline}.smart-button__icon+.smart-button__text:not(:empty),.smart-button__loading-text,.smart-button__text:not(:empty)+.smart-button__right-icon{margin-left:4px}.smart-button__icon,.smart-button__right-icon{line-height:inherit!important;min-width:1em;vertical-align:top}.smart-button--hairline{border-width:0;padding-top:1px}.smart-button--hairline:after{border-color:inherit;border-radius:calc(var(--button-border-radius, 10px)*2);border-width:1px}.smart-button--hairline.smart-button--round:after{border-radius:var(--button-round-border-radius,999px)}.smart-button--hairline.smart-button--square:after{border-radius:0}:root[data-a11y=true] .smart-button{font-size:var(--button-default-font-size,20px);font-weight:var(--button-font-weight,600);height:var(--button-default-height,59px);line-height:var(--button-line-height,30px)}:root[data-a11y=true] .smart-button--large{height:var(--button-large-height,59px)}

package/lib/button/index.d.ts

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

package/lib/button/index.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var button_1 = require("../mixins/button");
+(0, component_1.SmartComponent)({
+    mixins: [button_1.button],
+    classes: ['hover-class', 'loading-class'],
+    data: {
+        baseStyle: '',
+    },
+    props: {
+        formType: String,
+        icon: String,
+        rightIcon: String,
+        classPrefix: {
+            type: String,
+            value: 'smart-icon',
+        },
+        plain: Boolean,
+        block: Boolean,
+        round: Boolean,
+        square: Boolean,
+        loading: Boolean,
+        hairline: Boolean,
+        disabled: Boolean,
+        loadingText: String,
+        customStyle: String,
+        textStyle: String,
+        loadingType: {
+            type: String,
+            value: 'circular',
+        },
+        type: {
+            type: String,
+            value: 'default',
+        },
+        dataset: null,
+        size: {
+            type: String,
+            value: 'normal',
+        },
+        loadingSize: {
+            type: String,
+            value: '20px',
+        },
+        color: String,
+    },
+    methods: {
+        onClick: function (event) {
+            var _this = this;
+            this.$emit('click', event);
+            var _a = this.data, canIUseGetUserProfile = _a.canIUseGetUserProfile, openType = _a.openType, getUserProfileDesc = _a.getUserProfileDesc, lang = _a.lang;
+            if (openType === 'getUserInfo' && canIUseGetUserProfile && typeof wx !== 'undefined') {
+                wx.getUserProfile({
+                    desc: getUserProfileDesc || '  ',
+                    lang: lang || 'en',
+                    complete: function (userProfile) {
+                        _this.$emit('getuserinfo', userProfile);
+                    },
+                });
+            }
+        },
+    },
+});

package/lib/button/index.json

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

package/lib/button/index.wxml

@@ -0,0 +1,64 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<button
+  id="{{ id || buttonId }}"
+  data-detail="{{ dataset }}"
+  class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'smart-hairline--surround' : '' }}"
+  hover-class="{{ disabled || loading ? '' : 'smart-button--active hover-class'}}"
+  lang="{{ lang }}"
+  form-type="{{ formType }}"
+  style="{{ computed.rootStyle({ plain, color, customStyle }) }}"
+  open-type="{{ disabled || loading || (canIUseGetUserProfile && openType === 'getUserInfo') ? '' : openType }}"
+  business-id="{{ businessId }}"
+  session-from="{{ sessionFrom }}"
+  send-message-title="{{ sendMessageTitle }}"
+  send-message-path="{{ sendMessagePath }}"
+  send-message-img="{{ sendMessageImg }}"
+  show-message-card="{{ showMessageCard }}"
+  app-parameter="{{ appParameter }}"
+  aria-label="{{ ariaLabel }}"
+  bindtap="{{ disabled || loading ? '' : 'onClick' }}"
+  bindgetuserinfo="onGetUserInfo"
+  bindcontact="onContact"
+  bindgetphonenumber="onGetPhoneNumber"
+  bindgetrealtimephonenumber="onGetRealTimePhoneNumber"
+  bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
+  binderror="onError"
+  bindlaunchapp="onLaunchApp"
+  bindopensetting="onOpenSetting"
+  bindchooseavatar="onChooseAvatar"
+>
+  <block wx:if="{{ loading }}">
+    <smart-loading
+      custom-class="loading-class"
+      size="{{ loadingSize }}"
+      type="{{ loadingType }}"
+      color="{{ computed.loadingColor({ type, color, plain }) }}"
+    />
+    <view wx:if="{{ loadingText }}" class="smart-button__loading-text">
+      {{ loadingText }}
+    </view>
+  </block>
+  <block wx:else>
+    <smart-icon
+      wx:if="{{ icon }}"
+      size="1.8em"
+      name="{{ icon }}"
+      class-prefix="{{ classPrefix }}"
+      class="smart-button__icon"
+      custom-style="line-height: inherit;"
+    />
+    <view class="smart-button__text" style="{{textStyle}}">
+      <slot />
+    </view>
+    <smart-icon
+      wx:if="{{ rightIcon }}"
+      size="1.6em"
+      name="{{ rightIcon }}"
+      class-prefix="{{ classPrefix }}"
+      class="smart-button__right-icon"
+      custom-style="line-height: inherit;"
+    />
+  </block>
+</button>

package/lib/button/index.wxs

@@ -0,0 +1,39 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function rootStyle(data) {
+  if (!data.color) {
+    return data.customStyle;
+  }
+
+  var properties = {
+    color: data.plain ? data.color : '#fff',
+    background: data.plain ? null : data.color,
+  };
+
+  // hide border when color is linear-gradient
+  if (data.color.indexOf('gradient') !== -1) {
+    properties.border = 0;
+  } else {
+    properties['border-color'] = data.color;
+  }
+
+  return style([properties, data.customStyle]);
+}
+
+function loadingColor(data) {
+  if (data.plain) {
+    return data.color ? data.color : '#c9c9c9';
+  }
+
+  if (data.type === 'default') {
+    return '#c9c9c9';
+  }
+
+  return '#fff';
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  loadingColor: loadingColor,
+};

package/lib/button/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}:root{--smart-a11y-action-sheet-item-text-color:#000}:root[theme=dark]{--smart-a11y-action-sheet-item-text-color:#fff}.smart-button{-webkit-text-size-adjust:100%;align-items:center;-webkit-appearance:none;border-radius:var(--button-border-radius,10px);box-sizing:border-box;display:inline-flex;font-size:var(--button-default-font-size,16px);font-weight:400;height:var(--button-default-height,48px);justify-content:center;line-height:var(--button-line-height,20px);padding:0;position:relative;text-align:center;transition:opacity .2s;vertical-align:middle}.smart-button:before{background-color:#000;border:inherit;border-color:#000;border-radius:inherit;content:" ";height:100%;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.smart-button:after{border-width:0}.smart-button--active:before{opacity:.15}.smart-button--unclickable:after{display:none}.smart-button--default{background:var(--button-default-background-color,var(--app-B3,#fff));border:var(--button-border-width,1px) solid var(--button-default-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));color:var(--button-default-color,var(--app-B1-N1,rgba(0,0,0,.9)))}.smart-button--default .smart-button__icon>view>view,.smart-button--default .smart-button__right-icon>view>view{background:var(--button-default-color,var(--app-B1-N1,rgba(0,0,0,.9)))}.smart-button--primary{background:var(--button-primary-background-color,var(--app-M3,#2dda86));border:var(--button-border-width,1px) solid var(--button-primary-border-color,var(--app-M3,#2dda86));color:var(--button-primary-color,#fff);font-weight:600}.smart-button--primary .smart-button__icon>view>view,.smart-button--primary .smart-button__right-icon>view>view{background:var(--button-primary-color,#fff)}.smart-button--info{background:var(--button-info-background-color,var(--app-M4,#1989fa));border:var(--button-border-width,1px) solid var(--button-info-border-color,var(--app-M4,#1989fa));color:var(--button-info-color,#fff)}.smart-button--info .smart-button__icon>view>view,.smart-button--info .smart-button__right-icon>view>view{background:var(--button-info-color,#fff)}.smart-button--danger{background:var(--button-danger-background-color,var(--app-M2,#f04c4c));border:var(--button-border-width,1px) solid var(--button-danger-border-color,var(--app-M2,#f04c4c));color:var(--button-danger-color,#fff)}.smart-button--danger .smart-button__icon>view>view,.smart-button--danger .smart-button__right-icon>view>view{background:var(--button-danger-color,#fff)}.smart-button--warning{background:var(--button-warning-background-color,var(--app-M5,#ffa000));border:var(--button-border-width,1px) solid var(--button-warning-border-color,var(--app-M5,#ffa000));color:var(--button-warning-color,#fff)}.smart-button--warning .smart-button__icon>view>view,.smart-button--warning .smart-button__right-icon>view>view{background:var(--button-warning-color,#fff)}.smart-button--plain{background:var(--button-plain-background-color,#fff);color:var(--button-plain-color,rgba(0,0,0,.9))}.smart-button--plain.smart-button--primary{color:var(--button-primary-background-color,var(--app-M3,#2dda86))}.smart-button--plain.smart-button--primary .smart-button__icon>view>view,.smart-button--plain.smart-button--primary .smart-button__right-icon>view>view{background:var(--button-primary-background-color,var(--app-M3,#2dda86))}.smart-button--plain.smart-button--info{color:var(--button-info-background-color,var(--app-M4,#1989fa))}.smart-button--plain.smart-button--info .smart-button__icon>view>view,.smart-button--plain.smart-button--info .smart-button__right-icon>view>view{background:var(--button-info-background-color,var(--app-M4,#1989fa))}.smart-button--plain.smart-button--danger{color:var(--button-danger-background-color,var(--app-M2,#f04c4c))}.smart-button--plain.smart-button--danger .smart-button__icon>view>view,.smart-button--plain.smart-button--danger .smart-button__right-icon>view>view{background:var(--button-danger-background-color,var(--app-M2,#f04c4c))}.smart-button--plain.smart-button--warning{color:var(--button-warning-background-color,var(--app-M5,#ffa000))}.smart-button--plain.smart-button--warning .smart-button__icon>view>view,.smart-button--plain.smart-button--warning .smart-button__right-icon>view>view{background:var(--button-warning-background-color,var(--app-M5,#ffa000))}.smart-button--large{height:var(--button-large-height,48px);width:100%}.smart-button--normal{font-size:var(--button-normal-font-size,14px);padding:0 15px}.smart-button--small{font-size:var(--button-small-font-size,12px);height:var(--button-small-height,30px);min-width:var(--button-small-min-width,60px);padding:0 var(--padding-xs,8px)}.smart-button--mini{display:inline-block;font-size:var(--button-mini-font-size,10px);height:var(--button-mini-height,22px);min-width:var(--button-mini-min-width,50px)}.smart-button--mini+.smart-button--mini{margin-left:5px}.smart-button--block{display:flex;width:100%}.smart-button--round{border-radius:var(--button-round-border-radius,999px)}.smart-button--square{border-radius:0}.smart-button--disabled{opacity:var(--button-disabled-opacity,.3)}.smart-button__text{display:inline}.smart-button__icon+.smart-button__text:not(:empty),.smart-button__loading-text,.smart-button__text:not(:empty)+.smart-button__right-icon{margin-left:4px}.smart-button__icon,.smart-button__right-icon{line-height:inherit!important;min-width:1em;vertical-align:top}.smart-button--hairline{border-width:0;padding-top:1px}.smart-button--hairline:after{border-color:inherit;border-radius:calc(var(--button-border-radius, 10px)*2);border-width:1px}.smart-button--hairline.smart-button--round:after{border-radius:var(--button-round-border-radius,999px)}.smart-button--hairline.smart-button--square:after{border-radius:0}:root[data-a11y=true] .smart-button{font-size:var(--button-default-font-size,20px);font-weight:var(--button-font-weight,600);height:var(--button-default-height,59px);line-height:var(--button-line-height,30px)}:root[data-a11y=true] .smart-button--large{height:var(--button-large-height,59px)}