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

package/example/dist/field/index.js

@@ -0,0 +1,141 @@
+import { nextTick } from '../common/utils';
+import { SmartComponent } from '../common/component';
+import { commonProps, inputProps, textareaProps } from './props';
+import Xmark from '@tuya-miniapp/icons/dist/svg/Xmark';
+SmartComponent({
+    field: true,
+    classes: ['input-class', 'right-icon-class', 'label-class'],
+    props: Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), inputProps), textareaProps), { size: String, icon: String, label: String, error: Boolean, center: Boolean, isLink: Boolean, leftIcon: String, rightIcon: String, autosize: null, required: Boolean, interError: Boolean, inputAlign: {
+            type: String,
+        }, subLabel: String, cardMode: Boolean, iconClass: String, clickable: Boolean, customStyle: String, errorMessage: String, arrowDirection: String, showWordLimit: Boolean, errorMessageAlign: String, hiddenLabel: Boolean, readonly: {
+            type: Boolean,
+            observer: 'setShowClear',
+        }, clearable: {
+            type: Boolean,
+            observer: 'setShowClear',
+        }, clearTrigger: {
+            type: String,
+            value: 'focus',
+        }, border: {
+            type: Boolean,
+            value: false,
+        }, titleWidth: {
+            type: String,
+            value: '6.2em',
+        }, clearIcon: {
+            type: String,
+            value: Xmark,
+        }, extraEventParams: {
+            type: Boolean,
+            value: false,
+        } }),
+    data: {
+        focused: false,
+        innerValue: '',
+        showClear: false,
+    },
+    watch: {
+        value(value) {
+            if (value !== this.value) {
+                this.setData({ innerValue: value });
+                this.value = value;
+                this.setShowClear();
+            }
+        },
+        clearTrigger() {
+            this.setShowClear();
+        },
+    },
+    created() {
+        this.value = this.data.value;
+        this.setData({ innerValue: this.value });
+    },
+    methods: {
+        formatValue(value) {
+            const { maxlength } = this.data;
+            if (maxlength !== -1 && value.length > maxlength) {
+                return value.slice(0, maxlength);
+            }
+            return value;
+        },
+        onInput(event) {
+            const { value = '' } = event.detail || {};
+            const formatValue = this.formatValue(value);
+            this.value = formatValue;
+            this.setShowClear();
+            return this.emitChange(Object.assign(Object.assign({}, event.detail), { value: formatValue }));
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.setShowClear();
+            this.$emit('focus', event.detail);
+        },
+        onBlur(event) {
+            this.focused = false;
+            this.setShowClear();
+            this.$emit('blur', event.detail);
+        },
+        onClickIcon() {
+            this.$emit('click-icon');
+        },
+        onClickInput(event) {
+            this.$emit('click-input', event.detail);
+        },
+        onClear() {
+            this.setData({ innerValue: '' });
+            this.value = '';
+            this.setShowClear();
+            nextTick(() => {
+                this.emitChange({ value: '' });
+                this.$emit('clear', '');
+            });
+        },
+        onConfirm(event) {
+            const { value = '' } = event.detail || {};
+            this.value = value;
+            this.setShowClear();
+            this.$emit('confirm', value);
+        },
+        setValue(value) {
+            this.value = value;
+            this.setShowClear();
+            if (value === '') {
+                this.setData({ innerValue: '' });
+            }
+            this.emitChange({ value });
+        },
+        onLineChange(event) {
+            this.$emit('linechange', event.detail);
+        },
+        onKeyboardHeightChange(event) {
+            this.$emit('keyboardheightchange', event.detail);
+        },
+        onBindNicknameReview(event) {
+            this.$emit('nicknamereview', event.detail);
+        },
+        emitChange(detail) {
+            const { extraEventParams } = this.data;
+            this.setData({ value: detail.value });
+            let result;
+            const data = extraEventParams
+                ? Object.assign(Object.assign({}, detail), { callback: (data) => {
+                        result = data;
+                    } }) : detail.value;
+            this.$emit('input', data);
+            this.$emit('change', data);
+            return result;
+        },
+        setShowClear() {
+            const { clearable, readonly, clearTrigger } = this.data;
+            const { focused, value } = this;
+            let showClear = false;
+            if (clearable && !readonly) {
+                const hasValue = !!value;
+                const trigger = clearTrigger === 'always' || (clearTrigger === 'focus' && focused);
+                showClear = hasValue && trigger;
+            }
+            this.setView({ showClear });
+        },
+        noop() { },
+    },
+});

package/example/dist/field/index.json

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

package/example/dist/field/index.wxml

@@ -0,0 +1,4 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+<include wx:if="{{ type === 'textarea' }}" src="./cell-textarea.wxml" />
+<include wx:else src="./cell-input.wxml" />

package/example/dist/field/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function inputStyle(autosize) {
+  if (autosize && autosize.constructor === 'Object') {
+    return style({
+      'min-height': addUnit(autosize.minHeight),
+      'max-height': addUnit(autosize.maxHeight),
+    });
+  }
+
+  return '';
+}
+
+module.exports = {
+  inputStyle: inputStyle,
+};

package/example/dist/field/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-field{--cell-icon-size:var(--field-icon-size,16px)}.smart-field__left__body{align-items:center;display:flex;padding-right:var(--field-left-body-padding-right,16px);text-align:left}.smart-field__left__body--disabled{opacity:var(--field-disabled-opacity,.7)}.smart-field__label{color:var(--field-label-color,var(--app-B6-N1,#000));font-size:var(--field-label-font-size,16px);line-height:var(--field-label-line-height,18px);text-align:left}.smart-field__label--required{color:var(--field-input-error-text-color,var(--app-M2,#f04c4c))}.smart-field__label:empty{display:none}.smart-field__left__icon{display:flex;margin-right:var(--field-left-icon-margin-right,10px)}.smart-field__left__icon:empty{display:none}.smart-field__label__card__subtitle{color:var(--field-subtitle-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--field-sub-label-font-size,14px);line-height:var(--field-sub-label-line-height,16px);margin-top:4px}.smart-field__label__card__subtitle--error{color:var(--field-error-message-color,var(--app-M2,#f04c4c))}.smart-field__body__box{flex:1}.smart-field__body__box--disabled{opacity:var(--field-disabled-opacity,.7)}.smart-field__body{align-items:center;display:flex;justify-content:flex-end}.smart-field__control:empty+.smart-field__control{display:block}.smart-field__control{background-color:initial;border:0;box-sizing:border-box;color:var(--field-input-text-color,var(--app-B6-N1,#000));display:none;font-size:var(--field-input-text-font-size,16px);height:var(--cell-line-height,24px);line-height:inherit;margin:0;min-height:var(--cell-line-height,24px);padding:0;position:relative;resize:none;text-align:right;width:100%}.smart-field__control:empty{display:none}.smart-field__control--textarea{background-color:var(--field-textarea-background,var(--app-B3,#fff));border-radius:var(--field-textarea-border-radius,8px);height:var(--field-textarea-min-height,130px);min-height:var(--field-textarea-min-height,130px);padding:var(--field-textarea-padding,12px 8px);text-align:left}.smart-field__control--card{background:var(--field-card-background,var(--app-B6-N7,rgba(0,0,0,.1)));border-radius:var(--field-card-border-radius,8px);height:var(--field-card-height,38px);padding:var(--field-card-padding,0 10px);text-align:center;width:var(--field-card-width,105px)}.smart-field__control--limit{padding-bottom:var(--field-textarea-limit-padding-bottom,20px)}.smart-field__control--center{text-align:center}.smart-field__control--right{text-align:right}.smart-field__control--left{text-align:left}.smart-field__control--custom{align-items:center;display:flex;min-height:var(--cell-line-height,24px)}.smart-field__control--readonly{position:relative}.smart-field__control--readonly:after{content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.smart-field__icon-root{align-items:center;display:flex;min-height:var(--cell-line-height,24px)}.smart-field__clear-root,.smart-field__icon-container{line-height:inherit;margin-right:calc(var(--padding-xs, 8px)*-1);padding:0 var(--padding-xs,8px);vertical-align:middle}.smart-field__button,.smart-field__clear-root,.smart-field__icon-container{flex-shrink:0}.smart-field__clear-root{--icon-color:var(--field-clear-icon-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--field-clear-icon-size,16px)}.smart-field__icon-container{--icon-color:var(--field-icon-container-color,#969799);font-size:var(--field-icon-size,16px)}.smart-field__icon-container:empty{display:none}.smart-field__button{padding-left:var(--padding-xs,8px)}.smart-field__button:empty{display:none}.smart-field__error-message{word-wrap:break-word;color:var(--field-error-message-color,var(--app-M2,#f04c4c));display:block;font-size:var(--field-error-message-text-font-size,14px);font-weight:400;line-height:var(--field-error-message-text-line-height,18px);text-align:right;white-space:normal}.smart-field__error-message--center{text-align:center}.smart-field__error-message--right{text-align:right}.smart-field--textarea{padding:0 16px}.smart-field--textarea .smart-field__left__body{margin-bottom:8px;width:100%}.smart-field--textarea .smart-field__body__box{position:relative}.smart-field__word-limit{bottom:8px;color:var(--field-word-limit-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--field-word-limit-font-size,10px);line-height:var(--field-word-limit-line-height,14px);margin-top:var(--padding-base,4px);position:absolute;right:8px;text-align:right}.smart-field__word-num{display:inline}.smart-field__word-num--full{color:var(--field-word-num-full-color,var(--app-M2,#f04c4c))}

package/example/dist/field/input.wxml

@@ -0,0 +1,30 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<input
+  id="{{ name }}"
+  class="{{ utils.bem('field__control', [inputAlign, type, { card: cardMode, readonly }]) }} input-class"
+  type="{{ type }}"
+  focus="{{ focus }}"
+  cursor="{{ cursor }}"
+  value="{{ innerValue }}"
+  auto-focus="{{ autoFocus }}"
+  disabled="{{ disabled }}"
+  maxlength="{{ maxlength }}"
+  placeholder="{{ !interError ? placeholder : errorMessage || placeholder }}"
+  placeholder-style="{{ interError ? 'color: var(--field-input-error-text-color, var(--app-M2, #f04c4c));' : 'color: var(--field-placeholder-text-color, var(--app-B6-N4, rgba(0, 0, 0, 0.4)));'}}{{ placeholderStyle }}"
+  confirm-type="{{ confirmType }}"
+  confirm-hold="{{ confirmHold }}"
+  hold-keyboard="{{ holdKeyboard }}"
+  cursor-spacing="{{ cursorSpacing }}"
+  adjust-position="{{ adjustPosition }}"
+  selection-end="{{ selectionEnd }}"
+  selection-start="{{ selectionStart }}"
+  always-embed="{{ alwaysEmbed }}"
+  password="{{ password || type === 'password' }}"
+  bindinput="onInput"
+  bindtap="onClickInput"
+  bindblur="onBlur"
+  bindfocus="onFocus"
+  bindconfirm="onConfirm"
+  bindkeyboardheightchange="onKeyboardHeightChange"
+  bindnicknamereview="onBindNicknameReview"
+/>

package/example/dist/field/props.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="miniprogram-api-typings" />
+export declare const commonProps: WechatMiniprogram.Component.PropertyOption;
+export declare const inputProps: WechatMiniprogram.Component.PropertyOption;
+export declare const textareaProps: WechatMiniprogram.Component.PropertyOption;

package/example/dist/field/props.js

@@ -0,0 +1,56 @@
+export const commonProps = {
+    value: String,
+    placeholder: String,
+    placeholderStyle: String,
+    placeholderClass: String,
+    disabled: Boolean,
+    maxlength: {
+        type: Number,
+        value: -1,
+    },
+    cursorSpacing: {
+        type: Number,
+        value: 50,
+    },
+    autoFocus: Boolean,
+    focus: Boolean,
+    cursor: {
+        type: Number,
+        value: -1,
+    },
+    selectionStart: {
+        type: Number,
+        value: -1,
+    },
+    selectionEnd: {
+        type: Number,
+        value: -1,
+    },
+    adjustPosition: {
+        type: Boolean,
+        value: true,
+    },
+    holdKeyboard: Boolean,
+};
+export const inputProps = {
+    type: {
+        type: String,
+        value: 'text',
+    },
+    password: Boolean,
+    confirmType: String,
+    confirmHold: Boolean,
+    alwaysEmbed: Boolean,
+};
+export const textareaProps = {
+    autoHeight: Boolean,
+    fixed: Boolean,
+    showConfirmBar: {
+        type: Boolean,
+        value: true,
+    },
+    disableDefaultPadding: {
+        type: Boolean,
+        value: true,
+    },
+};

package/example/dist/field/textarea.wxml

@@ -0,0 +1,32 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<textarea
+  id="{{ name }}"
+  class="{{ utils.bem('field__control', [inputAlign, type, { textarea: true, limit: showWordLimit && maxlength, readonly }]) }} input-class"
+  fixed="{{ fixed }}"
+  focus="{{ focus }}"
+  cursor="{{ cursor }}"
+  value="{{ innerValue }}"
+  auto-focus="{{ autoFocus }}"
+  disabled="{{ disabled }}"
+  maxlength="{{ maxlength }}"
+  placeholder="{{ !interError ? placeholder : errorMessage || placeholder }}"
+  placeholder-style="{{ interError ? 'color: var(--field-input-error-text-color, var(--app-M2, #f04c4c));' : 'color: var(--field-placeholder-text-color, var(--app-B6-N4, rgba(0, 0, 0, 0.4)));'}}{{ placeholderStyle }}"
+  auto-height="{{ !!autosize }}"
+  style="{{ computed.inputStyle(autosize) }}"
+  cursor-spacing="{{ cursorSpacing }}"
+  adjust-position="{{ adjustPosition }}"
+  show-confirm-bar="{{ showConfirmBar }}"
+  hold-keyboard="{{ holdKeyboard }}"
+  selection-end="{{ selectionEnd }}"
+  selection-start="{{ selectionStart }}"
+  disable-default-padding="{{ disableDefaultPadding }}"
+  bindinput="onInput"
+  bindtap="onClickInput"
+  bindblur="onBlur"
+  bindfocus="onFocus"
+  bindconfirm="onConfirm"
+  bindlinechange="onLineChange"
+  bindkeyboardheightchange="onKeyboardHeightChange"
+/>

package/example/dist/field/types.d.ts

@@ -0,0 +1,8 @@
+export interface InputDetails {
+    /** 输入框内容 */
+    value: string;
+    /** 光标位置 */
+    cursor?: number;
+    /** keyCode 为键值 (目前工具还不支持返回keyCode参数) `2.1.0` 起支持 */
+    keyCode?: number;
+}

package/example/dist/field/types.js

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

package/example/dist/goods-action/demo/index.css

@@ -0,0 +1 @@
+@import '../../common/index.css';.goods-action-position{position:relative!important}

package/example/dist/goods-action/demo/index.d.ts

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

package/example/dist/goods-action/demo/index.js

@@ -0,0 +1,20 @@
+import { SmartComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+SmartComponent({
+    methods: {
+        onClickIcon() {
+            Toast({
+                context: this,
+                selector: '#smart-toast-good-action',
+                message: I18n.t('clickTheIcon')
+            });
+        },
+        onClickButton() {
+            Toast({
+                context: this,
+                selector: '#smart-toast-good-action',
+                message: I18n.t('clickTheButton')
+            });
+        },
+    },
+});

package/example/dist/goods-action/demo/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-toast": "../../toast/index",
+    "smart-goods-action": "../../goods-action/index",
+    "smart-goods-action-icon": "../../goods-action-icon/index",
+    "smart-goods-action-button": "../../goods-action-button/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}

package/example/dist/goods-action/demo/index.wxml

@@ -0,0 +1,53 @@
+<demo-block title="{{I18n.t('basicUsage')}}">
+  <smart-goods-action custom-class="goods-action-position" safe-area-inset-bottom="{{ false }}">
+    <smart-goods-action-icon
+      icon="chat-o"
+      text="{{I18n.t('customerService')}}"
+      open-type="contact"
+    />
+    <smart-goods-action-icon
+      icon="cart-o"
+      text="{{I18n.t('shoppingCart')}}"
+      bind:click="onClickIcon"
+    />
+    <smart-goods-action-button
+      text="{{I18n.t('addToCart')}}"
+      type="warning"
+      bind:click="onClickButton"
+    />
+    <smart-goods-action-button
+      text="{{I18n.t('buyNow')}}"
+      bind:click="onClickButton"
+    />
+  </smart-goods-action>
+</demo-block>
+
+<demo-block title="{{I18n.t('hintInformation')}}">
+  <smart-goods-action custom-class="goods-action-position" safe-area-inset-bottom="{{ false }}">
+    <smart-goods-action-icon icon="chat-o" text="{{I18n.t('customerService')}}" dot />
+    <smart-goods-action-icon icon="cart-o" text="{{I18n.t('shoppingCart')}}" info="5" />
+    <smart-goods-action-icon icon="shop-o" text="{{I18n.t('store')}}" />
+    <smart-goods-action-button text="{{I18n.t('addToCart')}}" type="warning" />
+    <smart-goods-action-button text="{{I18n.t('buyNow')}}" />
+  </smart-goods-action>
+</demo-block>
+
+<demo-block title="{{I18n.t('customButtonColor')}}">
+  <smart-goods-action custom-class="goods-action-position" safe-area-inset-bottom="{{ false }}">
+    <smart-goods-action-icon icon="chat-o" text="{{I18n.t('customerService')}}" />
+    <smart-goods-action-icon icon="shop-o" text="{{I18n.t('shop')}}" />
+    <smart-goods-action-button color="#be99ff" type="warning" text="{{I18n.t('addToCart')}}" />
+    <smart-goods-action-button color="#7232dd" text="{{I18n.t('buyNow')}}" />
+  </smart-goods-action>
+</demo-block>
+
+<demo-block title="{{I18n.t('simpleButton')}}">
+  <smart-goods-action custom-class="goods-action-position" safe-area-inset-bottom="{{ false }}">
+    <smart-goods-action-icon icon="chat-o" text="{{I18n.t('customerService')}}" />
+    <smart-goods-action-icon icon="shop-o" text="{{I18n.t('store')}}" />
+    <smart-goods-action-button color="#7232dd"  text="{{I18n.t('addToCart')}}" type="warning" />
+    <smart-goods-action-button plain color="#7232dd" text="{{I18n.t('buyNow')}}" />
+  </smart-goods-action>
+</demo-block>
+
+<smart-toast id="smart-toast-good-action" />

package/example/dist/goods-action/demo/index.wxss

@@ -0,0 +1 @@
+@import '../../common/index.wxss';.goods-action-position{position:relative!important}

package/example/dist/goods-action/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-goods-action{align-items:center;background-color:var(--goods-action-background-color,var(--app-B4,#fff));bottom:0;box-sizing:initial;display:flex;height:var(--goods-action-height,50px);left:0;position:fixed;right:0}.smart-goods-action--safe{padding-bottom:env(safe-area-inset-bottom)}

package/example/dist/goods-action/index.d.ts

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

package/example/dist/goods-action/index.js

@@ -0,0 +1,15 @@
+import { SmartComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+SmartComponent({
+    relation: useChildren('goods-action-button', function () {
+        this.children.forEach(item => {
+            item.updateStyle();
+        });
+    }),
+    props: {
+        safeAreaInsetBottom: {
+            type: Boolean,
+            value: true,
+        },
+    },
+});

package/example/dist/goods-action/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/example/dist/goods-action/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="custom-class {{ utils.bem('goods-action', { safe: safeAreaInsetBottom }) }}">
+  <slot />
+</view>

package/example/dist/goods-action/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-goods-action{align-items:center;background-color:var(--goods-action-background-color,var(--app-B4,#fff));bottom:0;box-sizing:initial;display:flex;height:var(--goods-action-height,50px);left:0;position:fixed;right:0}.smart-goods-action--safe{padding-bottom:env(safe-area-inset-bottom)}

package/example/dist/goods-action-button/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:host{flex:1}.smart-goods-action-button{--button-warning-background-color:var(--goods-action-button-warning-color,linear-gradient(to right,#ffd01e,#ff8917));--button-danger-background-color:var(--goods-action-button-danger-color,linear-gradient(to right,#ff6034,#ee0a24));--button-default-height:var(--goods-action-button-height,40px);--button-line-height:var(--goods-action-button-line-height,20px);--button-plain-background-color:var(--goods-action-button-plain-color,var(--app-B4,#fff));--button-border-width:0;display:block}.smart-goods-action-button--first{--button-border-radius:var(--goods-action-button-border-radius,999px) 0 0 var(--goods-action-button-border-radius,999px);margin-left:5px}.smart-goods-action-button--last{--button-border-radius:0 var(--goods-action-button-border-radius,999px) var(--goods-action-button-border-radius,999px) 0;margin-right:5px}.smart-goods-action-button--first.smart-goods-action-button--last{--button-border-radius:var(--goods-action-button-border-radius,999px)}.smart-goods-action-button--plain{--button-border-width:1px}.smart-goods-action-button__inner{font-weight:var(--font-weight-bold,500)!important;width:100%}@media (max-width:321px){.smart-goods-action-button{font-size:13px}}

package/example/dist/goods-action-button/index.d.ts

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

package/example/dist/goods-action-button/index.js

@@ -0,0 +1,44 @@
+import { SmartComponent } from '../common/component';
+import { useParent } from '../common/relation';
+import { button } from '../mixins/button';
+import { link } from '../mixins/link';
+SmartComponent({
+    mixins: [link, button],
+    relation: useParent('goods-action'),
+    props: {
+        text: String,
+        color: String,
+        size: {
+            type: String,
+            value: 'normal',
+        },
+        loading: Boolean,
+        disabled: Boolean,
+        plain: Boolean,
+        type: {
+            type: String,
+            value: 'danger',
+        },
+        customStyle: {
+            type: String,
+            value: '',
+        },
+    },
+    methods: {
+        onClick(event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+        updateStyle() {
+            if (this.parent == null) {
+                return;
+            }
+            const { index } = this;
+            const { children = [] } = this.parent;
+            this.setData({
+                isFirst: index === 0,
+                isLast: index === children.length - 1,
+            });
+        },
+    },
+});

package/example/dist/goods-action-button/index.json

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

package/example/dist/goods-action-button/index.wxml

@@ -0,0 +1,35 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<smart-button
+  id="{{ id }}"
+  button-id="{{ buttonId }}"
+  lang="{{ lang }}"
+  type="{{ type }}"
+  size="{{ size }}"
+  color="{{ color }}"
+  plain="{{ plain }}"
+  loading="{{ loading }}"
+  disabled="{{ disabled }}"
+  open-type="{{ openType }}"
+  class="{{ utils.bem('goods-action-button', [type, { first: isFirst, last: isLast, plain: plain }])}}"
+  custom-class="smart-goods-action-button__inner custom-class"
+  custom-style="{{customStyle}}"
+  business-id="{{ businessId }}"
+  session-from="{{ sessionFrom }}"
+  app-parameter="{{ appParameter }}"
+  send-message-img="{{ sendMessageImg }}"
+  send-message-path="{{ sendMessagePath }}"
+  show-message-card="{{ showMessageCard }}"
+  send-message-title="{{ sendMessageTitle }}"
+  bind:click="onClick"
+  binderror="onError"
+  bindcontact="onContact"
+  bindopensetting="onOpenSetting"
+  bindgetuserinfo="onGetUserInfo"
+  bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
+  bindgetRealTimePhoneNumber="onGetRealTimePhoneNumber"
+  bindgetphonenumber="onGetPhoneNumber"
+  bindlaunchapp="onLaunchApp"
+>
+  {{ text }}
+  <slot></slot>
+</smart-button>

package/example/dist/goods-action-button/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:host{flex:1}.smart-goods-action-button{--button-warning-background-color:var(--goods-action-button-warning-color,linear-gradient(to right,#ffd01e,#ff8917));--button-danger-background-color:var(--goods-action-button-danger-color,linear-gradient(to right,#ff6034,#ee0a24));--button-default-height:var(--goods-action-button-height,40px);--button-line-height:var(--goods-action-button-line-height,20px);--button-plain-background-color:var(--goods-action-button-plain-color,var(--app-B4,#fff));--button-border-width:0;display:block}.smart-goods-action-button--first{--button-border-radius:var(--goods-action-button-border-radius,999px) 0 0 var(--goods-action-button-border-radius,999px);margin-left:5px}.smart-goods-action-button--last{--button-border-radius:0 var(--goods-action-button-border-radius,999px) var(--goods-action-button-border-radius,999px) 0;margin-right:5px}.smart-goods-action-button--first.smart-goods-action-button--last{--button-border-radius:var(--goods-action-button-border-radius,999px)}.smart-goods-action-button--plain{--button-border-width:1px}.smart-goods-action-button__inner{font-weight:var(--font-weight-bold,500)!important;width:100%}@media (max-width:321px){.smart-goods-action-button{font-size:13px}}

package/example/dist/goods-action-icon/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-goods-action-icon{border:none!important;color:var(--goods-action-icon-text-color,#646566)!important;display:flex!important;flex-direction:column;font-size:var(--goods-action-icon-font-size,10px)!important;height:var(--goods-action-icon-height,50px)!important;justify-content:center!important;line-height:1!important;min-width:var(--goods-action-icon-width,48px)}.smart-goods-action-icon__icon{color:var(--goods-action-icon-color,#323233);display:flex;font-size:var(--goods-action-icon-size,18px);margin:0 auto 5px}

package/example/dist/goods-action-icon/index.d.ts

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

package/example/dist/goods-action-icon/index.js

@@ -0,0 +1,27 @@
+import { SmartComponent } from '../common/component';
+import { button } from '../mixins/button';
+import { link } from '../mixins/link';
+SmartComponent({
+    classes: ['icon-class', 'text-class', 'info-class'],
+    mixins: [link, button],
+    props: {
+        text: String,
+        dot: Boolean,
+        info: String,
+        icon: String,
+        size: String,
+        color: String,
+        classPrefix: {
+            type: String,
+            value: 'smart-icon',
+        },
+        disabled: Boolean,
+        loading: Boolean,
+    },
+    methods: {
+        onClick(event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+    },
+});

package/example/dist/goods-action-icon/index.json

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

package/example/dist/goods-action-icon/index.wxml

@@ -0,0 +1,41 @@
+<smart-button
+  square
+  id="{{ id }}"
+  size="large"
+  lang="{{ lang }}"
+  loading="{{ loading }}"
+  disabled="{{ disabled }}"
+  open-type="{{ openType }}"
+  business-id="{{ businessId }}"
+  custom-class="smart-goods-action-icon"
+  session-from="{{ sessionFrom }}"
+  app-parameter="{{ appParameter }}"
+  send-message-img="{{ sendMessageImg }}"
+  send-message-path="{{ sendMessagePath }}"
+  show-message-card="{{ showMessageCard }}"
+  send-message-title="{{ sendMessageTitle }}"
+  bind:click="onClick"
+  binderror="onError"
+  bindcontact="onContact"
+  bindopensetting="onOpenSetting"
+  bindgetuserinfo="onGetUserInfo"
+  bindgetphonenumber="onGetPhoneNumber"
+  bindlaunchapp="onLaunchApp"
+>
+  <smart-icon
+    wx:if="{{ icon }}"
+    name="{{ icon }}"
+    dot="{{ dot }}"
+    info="{{ info }}"
+    size="{{ size }}"
+    color="{{ color }}"
+    class-prefix="{{ classPrefix }}"
+    class="smart-goods-action-icon__icon"
+    custom-class="icon-class"
+    info-class="info-class"
+  />
+  <view wx:else>
+    <slot name="icon" />
+  </view>
+  <text class="text-class">{{ text }}</text>
+</smart-button>

package/example/dist/goods-action-icon/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-goods-action-icon{border:none!important;color:var(--goods-action-icon-text-color,#646566)!important;display:flex!important;flex-direction:column;font-size:var(--goods-action-icon-font-size,10px)!important;height:var(--goods-action-icon-height,50px)!important;justify-content:center!important;line-height:1!important;min-width:var(--goods-action-icon-width,48px)}.smart-goods-action-icon__icon{color:var(--goods-action-icon-color,#323233);display:flex;font-size:var(--goods-action-icon-size,18px);margin:0 auto 5px}