@tuya-miniapp/smart-ui 2.7.2-beta-11 → 2.7.2-beta-12

package/lib/bottom-sheet/index.js

@@ -0,0 +1,156 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
+var component_1 = require("../common/component");
+var ty_1 = __importDefault(require("../common/ty"));
+var version_1 = require("../common/version");
+var idListRef = {
+    value: [],
+};
+(0, component_1.SmartComponent)({
+    props: {
+        show: Boolean,
+        title: String,
+        iconColor: String,
+        nativeDisabled: Boolean,
+        instanceId: String,
+        maxHeight: null,
+        iconSize: {
+            type: null,
+            value: 24,
+        },
+        showClose: {
+            type: Boolean,
+            value: true,
+        },
+        contentHeight: null,
+        round: {
+            type: Boolean,
+            value: true,
+        },
+        zIndex: {
+            type: Number,
+            value: 100,
+        },
+        draggable: {
+            type: Boolean,
+            value: false,
+        },
+        overlay: {
+            type: Boolean,
+            value: true,
+        },
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true,
+        },
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+        minDragHeight: {
+            type: Number,
+            value: 0,
+        },
+        maxDragHeight: {
+            type: Number,
+            value: 0,
+        },
+        midDragHeight: {
+            type: Number,
+            value: 0,
+        },
+        closeDragHeight: {
+            type: Number,
+            value: 0,
+        },
+        defaultDragPosition: {
+            type: String,
+            value: 'middle',
+        },
+    },
+    data: {
+        xmarkIcon: Xmark_1.default,
+        xmarkIconColor: 'rgba(0, 0, 0, 0.5)',
+        curInstanceId: '',
+        windowHeight: 0,
+        currentHeight: 0,
+        ts: Date.now(),
+    },
+    mounted: function () {
+        var themeInfo = ty_1.default.getThemeInfo() || {};
+        var xmarkIconColor = this.data.iconColor || themeInfo['--app-B4-N3'] || 'rgba(0, 0, 0, 0.5)';
+        var windowHeight = (0, version_1.getSystemInfoSync)().windowHeight;
+        var currentHeight = this.getDragPosition();
+        var data = { xmarkIconColor: xmarkIconColor, windowHeight: windowHeight, ts: Date.now() };
+        data.currentHeight = currentHeight;
+        this.setData(data);
+        this.initId();
+    },
+    methods: {
+        getDragPosition: function () {
+            var currentHeight = this.data.midDragHeight;
+            if (this.data.defaultDragPosition === 'middle') {
+                currentHeight = this.data.midDragHeight;
+            }
+            else if (this.data.defaultDragPosition === 'min') {
+                currentHeight = this.data.minDragHeight;
+            }
+            else if (this.data.defaultDragPosition === 'max') {
+                currentHeight = this.data.maxDragHeight;
+            }
+            return currentHeight;
+        },
+        initId: function () {
+            if (this.data.instanceId) {
+                this.setData({
+                    curInstanceId: this.data.instanceId,
+                });
+                return;
+            }
+            if (this.data.curInstanceId)
+                return;
+            var id = "smart-ui-bottom-sheet_".concat(String(+new Date()).slice(-4), "_").concat(String(Math.random()).slice(-2));
+            if (idListRef.value.includes(id)) {
+                this.initId();
+                return;
+            }
+            this.setData({
+                curInstanceId: id,
+            });
+            idListRef.value.push(id);
+        },
+        onClose: function () {
+            this.$emit('close');
+        },
+        onClickOverlay: function () {
+            this.$emit('click-overlay');
+            this.onClose();
+        },
+        onBeforeEnter: function () {
+            this.$emit('before-enter');
+        },
+        onEnter: function () {
+            if (this.data.draggable) {
+                var currentHeight = this.getDragPosition();
+                this.setData({ currentHeight: currentHeight, ts: Date.now() });
+            }
+            this.$emit('enter');
+        },
+        onAfterEnter: function () {
+            this.$emit('after-enter');
+        },
+        onBeforeLeave: function () {
+            this.$emit('before-leave');
+        },
+        onLeave: function () {
+            this.$emit('leave');
+        },
+        onAfterLeave: function () {
+            this.$emit('after-leave');
+        },
+    },
+});

package/lib/bottom-sheet/index.json

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

package/lib/bottom-sheet/index.wxml

@@ -0,0 +1,71 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<smart-popup
+  show="{{ show }}"
+  position="bottom"
+  round="{{ round }}"
+  z-index="{{ zIndex }}"
+  overlay="{{ overlay }}"
+  custom-class="smart-bottom-sheet custom-class"
+  native-disabled="{{ nativeDisabled }}"
+  customStyle="{{computed.getCustomStyle(draggable, contentHeight, maxHeight)}}"
+  safe-area-inset-bottom="{{false}}"
+  close-on-click-overlay="{{ closeOnClickOverlay }}"
+  root-portal="{{ rootPortal }}"
+  bind:close="onClickOverlay"
+  bind:before-enter="onBeforeEnter"
+  bind:enter="onEnter"
+  bind:after-enter="onAfterEnter"
+  bind:before-leave="onBeforeLeave"
+  bind:leave="onLeave"
+  bind:after-leave="onAfterLeave"
+  id="{{curInstanceId}}"
+>
+  <block wx:if="{{draggable}}">
+    <view
+      id="{{curInstanceId}}"
+      bind:touchstart="{{computed.onDragStart(curInstanceId)}}" 
+      catch:touchmove="{{computed.onDrag(curInstanceId)}}"
+      bind:touchend="{{computed.onDragEnd(curInstanceId, { maxDragHeight, minDragHeight, windowHeight, midDragHeight, closeDragHeight })}}"
+      tick="{{ts}}"
+      change:tick="{{computed.init(curInstanceId, currentHeight)}}"
+    >
+      <view class="smart-bottom-sheet__dragger" >
+        <view class="smart-bottom-sheet__dragger_node"></view>
+      </view>
+      <view class="smart-bottom-sheet__header">
+        <view wx:if="{{ title }}">{{ title }}</view>
+        <slot name="title" />
+      </view>
+      <view
+        class="smart-bottom-sheet__content"
+      >
+        <slot />
+      </view>
+    </view>
+  </block>
+  <block wx:else>
+    <view class="smart-bottom-sheet__header">
+      <view wx:if="{{ title }}">{{ title }}</view>
+      <smart-icon 
+        wx:if="{{ title && showClose }}" 
+        name="{{ xmarkIcon }}" 
+        class="smart-bottom-sheet__icon" 
+        size="{{ iconSize }}" 
+        color="{{ xmarkIconColor }}" 
+        bind:click="onClose"
+      />
+      <slot name="title" />
+    </view>
+    <view wx:if="{{ contentHeight !== null }}" class="smart-bottom-sheet__content smart-bottom-sheet__content_height" style="{{computed.getHeight(contentHeight)}}">
+      <slot />
+    </view>
+    <scroll-view class="smart-bottom-sheet__content">
+      <view class="smart-bottom-sheet__dragger" >
+        <view class="smart-bottom-sheet__dragger_node"></view>
+      </view>
+      <slot />
+    </scroll-view>
+  </block>
+</smart-popup>

package/lib/bottom-sheet/index.wxs

@@ -0,0 +1,159 @@
+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) {
+  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;
+    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:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.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/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:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.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,#000))}.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,#000))}.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)}.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}

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:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-manrope{font-family:Manrope,sans-serif}.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,#000))}.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,#000))}.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)}.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}