@tuya-miniapp/smart-ui 0.0.1-beta-1

package/dist/field/props.js

@@ -0,0 +1,64 @@
+export const commonProps = {
+    value: {
+        type: String,
+        observer(value) {
+            if (value !== this.value) {
+                this.setData({ innerValue: value });
+                this.value = value;
+            }
+        },
+    },
+    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/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, { disabled, error }]) }} input-class"
+  fixed="{{ fixed }}"
+  focus="{{ focus }}"
+  cursor="{{ cursor }}"
+  value="{{ innerValue }}"
+  auto-focus="{{ autoFocus }}"
+  disabled="{{ disabled || readonly }}"
+  maxlength="{{ maxlength }}"
+  placeholder="{{ placeholder }}"
+  placeholder-style="{{ placeholderStyle }}"
+  placeholder-class="{{ utils.bem('field__placeholder', { error, disabled }) }}"
+  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/dist/field/types.d.ts

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

package/dist/field/types.js

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

package/dist/goods-action/index.css

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

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

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

package/dist/goods-action/index.js

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

package/dist/goods-action/index.json

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

package/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/dist/goods-action/index.wxss

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

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

@@ -0,0 +1 @@
+@import '../common/index.css';:host{flex:1}.van-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,#fff);--button-border-width:0;display:block}.van-goods-action-button--first{--button-border-radius:999px 0 0 var(--goods-action-button-border-radius,999px);margin-left:5px}.van-goods-action-button--last{--button-border-radius:0 999px var(--goods-action-button-border-radius,999px) 0;margin-right:5px}.van-goods-action-button--first.van-goods-action-button--last{--button-border-radius:var(--goods-action-button-border-radius,999px)}.van-goods-action-button--plain{--button-border-width:1px}.van-goods-action-button__inner{font-weight:var(--font-weight-bold,500)!important;width:100%}@media (max-width:321px){.van-goods-action-button{font-size:13px}}

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

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

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

@@ -0,0 +1,44 @@
+import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
+import { button } from '../mixins/button';
+import { link } from '../mixins/link';
+VantComponent({
+    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/dist/goods-action-button/index.json

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

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

@@ -0,0 +1,35 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<van-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="van-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>
+</van-button>

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

@@ -0,0 +1 @@
+@import '../common/index.wxss';:host{flex:1}.van-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,#fff);--button-border-width:0;display:block}.van-goods-action-button--first{--button-border-radius:999px 0 0 var(--goods-action-button-border-radius,999px);margin-left:5px}.van-goods-action-button--last{--button-border-radius:0 999px var(--goods-action-button-border-radius,999px) 0;margin-right:5px}.van-goods-action-button--first.van-goods-action-button--last{--button-border-radius:var(--goods-action-button-border-radius,999px)}.van-goods-action-button--plain{--button-border-width:1px}.van-goods-action-button__inner{font-weight:var(--font-weight-bold,500)!important;width:100%}@media (max-width:321px){.van-goods-action-button{font-size:13px}}

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

@@ -0,0 +1 @@
+@import '../common/index.css';.van-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)}.van-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/dist/goods-action-icon/index.d.ts

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

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

@@ -0,0 +1,27 @@
+import { VantComponent } from '../common/component';
+import { button } from '../mixins/button';
+import { link } from '../mixins/link';
+VantComponent({
+    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: 'van-icon',
+        },
+        disabled: Boolean,
+        loading: Boolean,
+    },
+    methods: {
+        onClick(event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+    },
+});

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

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

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

@@ -0,0 +1,41 @@
+<van-button
+  square
+  id="{{ id }}"
+  size="large"
+  lang="{{ lang }}"
+  loading="{{ loading }}"
+  disabled="{{ disabled }}"
+  open-type="{{ openType }}"
+  business-id="{{ businessId }}"
+  custom-class="van-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"
+>
+  <van-icon
+    wx:if="{{ icon }}"
+    name="{{ icon }}"
+    dot="{{ dot }}"
+    info="{{ info }}"
+    size="{{ size }}"
+    color="{{ color }}"
+    class-prefix="{{ classPrefix }}"
+    class="van-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>
+</van-button>

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

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-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)}.van-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/dist/grid/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-grid{box-sizing:border-box;overflow:hidden;position:relative}

package/dist/grid/index.d.ts

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

package/dist/grid/index.js

@@ -0,0 +1,55 @@
+import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+VantComponent({
+    relation: useChildren('grid-item'),
+    props: {
+        square: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+        gutter: {
+            type: null,
+            value: 0,
+            observer: 'updateChildren',
+        },
+        clickable: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+        columnNum: {
+            type: Number,
+            value: 4,
+            observer: 'updateChildren',
+        },
+        center: {
+            type: Boolean,
+            value: true,
+            observer: 'updateChildren',
+        },
+        border: {
+            type: Boolean,
+            value: true,
+            observer: 'updateChildren',
+        },
+        direction: {
+            type: String,
+            observer: 'updateChildren',
+        },
+        iconSize: {
+            type: String,
+            observer: 'updateChildren',
+        },
+        reverse: {
+            type: Boolean,
+            value: false,
+            observer: 'updateChildren',
+        },
+    },
+    methods: {
+        updateChildren() {
+            this.children.forEach((child) => {
+                child.updateStyle();
+            });
+        },
+    },
+});

package/dist/grid/index.json

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

package/dist/grid/index.wxml

@@ -0,0 +1,8 @@
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="van-grid custom-class {{ border && !gutter ? 'van-hairline--top' : '' }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
+>
+  <slot />
+</view>

package/dist/grid/index.wxs

@@ -0,0 +1,13 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style({
+    'padding-left': addUnit(data.gutter),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/dist/grid/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-grid{box-sizing:border-box;overflow:hidden;position:relative}

package/dist/grid-item/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-grid-item{box-sizing:border-box;float:left;position:relative}.van-grid-item--square{height:0}.van-grid-item__content{background-color:var(--grid-item-content-background-color,var(--app-B3,#fff));box-sizing:border-box;display:flex;flex-direction:column;height:100%;padding:var(--grid-item-content-padding,16px 8px)}.van-grid-item__content:after{border-width:0 1px 1px 0;z-index:1}.van-grid-item__content--surround:after{border-width:1px}.van-grid-item__content--center{align-items:center;justify-content:center}.van-grid-item__content--square{left:0;position:absolute;right:0;top:0}.van-grid-item__content--horizontal{flex-direction:row}.van-grid-item__content--horizontal .van-grid-item__text{margin:0 0 0 8px}.van-grid-item__content--reverse{flex-direction:column-reverse}.van-grid-item__content--reverse .van-grid-item__text{margin:0 0 8px}.van-grid-item__content--horizontal.van-grid-item__content--reverse{flex-direction:row-reverse}.van-grid-item__content--horizontal.van-grid-item__content--reverse .van-grid-item__text{margin:0 8px 0 0}.van-grid-item__content--clickable:active{background-color:var(--grid-item-content-active-color,#f2f3f5)}.van-grid-item__icon{align-items:center;display:flex;font-size:var(--grid-item-icon-size,26px);height:var(--grid-item-icon-size,26px)}.van-grid-item__text{word-wrap:break-word;color:var(--grid-item-text-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--grid-item-text-font-size,12px)}.van-grid-item__icon+.van-grid-item__text{margin-top:8px}

package/dist/grid-item/index.d.ts

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

package/dist/grid-item/index.js

@@ -0,0 +1,52 @@
+import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
+import { link } from '../mixins/link';
+VantComponent({
+    relation: useParent('grid'),
+    classes: ['content-class', 'icon-class', 'text-class'],
+    mixins: [link],
+    props: {
+        icon: String,
+        iconColor: String,
+        iconPrefix: {
+            type: String,
+            value: 'van-icon',
+        },
+        dot: Boolean,
+        info: null,
+        badge: null,
+        text: String,
+        useSlot: Boolean,
+    },
+    data: {
+        viewStyle: '',
+    },
+    mounted() {
+        this.updateStyle();
+    },
+    methods: {
+        updateStyle() {
+            if (!this.parent) {
+                return;
+            }
+            const { data, children } = this.parent;
+            const { columnNum, border, square, gutter, clickable, center, direction, reverse, iconSize, } = data;
+            this.setData({
+                center,
+                border,
+                square,
+                gutter,
+                clickable,
+                direction,
+                reverse,
+                iconSize,
+                index: children.indexOf(this),
+                columnNum,
+            });
+        },
+        onClick() {
+            this.$emit('click');
+            this.jumpLink();
+        },
+    },
+});

package/dist/grid-item/index.json

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

package/dist/grid-item/index.wxml

@@ -0,0 +1,27 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('grid-item', { square }) }}"
+  style="{{ computed.wrapperStyle({ square, gutter, columnNum, index }) }}"
+  bindtap="onClick"
+>
+  <view
+    class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, reverse, clickable, surround: border && gutter }]) }} {{ border ? 'van-hairline--surround' : '' }}"
+    style="{{ computed.contentStyle({ square, gutter }) }}"
+  >
+    <block wx:if="{{ useSlot }}">
+      <slot />
+    </block>
+    <block wx:else>
+      <view class="van-grid-item__icon icon-class">
+        <van-icon wx:if="{{ icon }}" name="{{ icon }}" color="{{ iconColor }}" class-prefix="{{ iconPrefix }}" dot="{{ dot }}" info="{{ badge || info }}" size="{{ iconSize }}" />
+        <slot wx:else name="icon"></slot>
+      </view>
+      <view class="van-grid-item__text text-class">
+        <text wx:if="{{ text }}">{{ text }}</text>
+        <slot wx:else name="text"></slot>
+      </view>
+    </block>
+  </view>
+</view>

package/dist/grid-item/index.wxs

@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function wrapperStyle(data) {
+  var width = 100 / data.columnNum + '%';
+
+  return style({
+    width: width,
+    'padding-top': data.square ? width : null,
+    'padding-right': addUnit(data.gutter),
+    'margin-top':
+      data.index >= data.columnNum && !data.square
+        ? addUnit(data.gutter)
+        : null,
+  });
+}
+
+function contentStyle(data) {
+  return data.square
+    ? style({
+        right: addUnit(data.gutter),
+        bottom: addUnit(data.gutter),
+        height: 'auto',
+      })
+    : '';
+}
+
+module.exports = {
+  wrapperStyle: wrapperStyle,
+  contentStyle: contentStyle,
+};

package/dist/grid-item/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-grid-item{box-sizing:border-box;float:left;position:relative}.van-grid-item--square{height:0}.van-grid-item__content{background-color:var(--grid-item-content-background-color,var(--app-B3,#fff));box-sizing:border-box;display:flex;flex-direction:column;height:100%;padding:var(--grid-item-content-padding,16px 8px)}.van-grid-item__content:after{border-width:0 1px 1px 0;z-index:1}.van-grid-item__content--surround:after{border-width:1px}.van-grid-item__content--center{align-items:center;justify-content:center}.van-grid-item__content--square{left:0;position:absolute;right:0;top:0}.van-grid-item__content--horizontal{flex-direction:row}.van-grid-item__content--horizontal .van-grid-item__text{margin:0 0 0 8px}.van-grid-item__content--reverse{flex-direction:column-reverse}.van-grid-item__content--reverse .van-grid-item__text{margin:0 0 8px}.van-grid-item__content--horizontal.van-grid-item__content--reverse{flex-direction:row-reverse}.van-grid-item__content--horizontal.van-grid-item__content--reverse .van-grid-item__text{margin:0 8px 0 0}.van-grid-item__content--clickable:active{background-color:var(--grid-item-content-active-color,#f2f3f5)}.van-grid-item__icon{align-items:center;display:flex;font-size:var(--grid-item-icon-size,26px);height:var(--grid-item-icon-size,26px)}.van-grid-item__text{word-wrap:break-word;color:var(--grid-item-text-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--grid-item-text-font-size,12px)}.van-grid-item__icon+.van-grid-item__text{margin-top:8px}

package/dist/icon/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:host{align-items:center;display:inline-flex;justify-content:center}.van-icon{text-rendering:auto;-webkit-font-smoothing:antialiased;font:normal normal normal 14px/1 vant-icon;font:normal normal normal 14px/1 var(--van-icon-font-family,"vant-icon");font-size:inherit;position:relative}.van-icon,.van-icon:before{display:inline-block}.van-icon--custom{position:relative}.van-icon--image{height:1em;width:1em}.van-icon__image,.van-icon__svg{height:100%;width:100%}.van-icon__svg{background:var(--icon-color,var(--app-B4-N2,rgba(0,0,0,.7)))}.van-icon__info{z-index:1}

package/dist/icon/index.d.ts

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

package/dist/icon/index.js

@@ -0,0 +1,21 @@
+import { VantComponent } from '../common/component';
+VantComponent({
+    classes: ['info-class'],
+    props: {
+        dot: Boolean,
+        info: null,
+        size: null,
+        color: String,
+        customStyle: String,
+        classPrefix: {
+            type: String,
+            value: 'van-icon',
+        },
+        name: String,
+    },
+    methods: {
+        onClick() {
+            this.$emit('click');
+        },
+    },
+});

package/dist/icon/index.json

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

package/dist/icon/index.wxml

@@ -0,0 +1,25 @@
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="{{ computed.rootClass({ classPrefix, name }) }}"
+  style="{{ computed.rootStyle({ customStyle, color, size }) }}"
+  bindtap="onClick"
+>
+  <van-info
+    wx:if="{{ info !== null || dot }}"
+    dot="{{ dot }}"
+    info="{{ info }}"
+    custom-class="van-icon__info info-class"
+  />
+  <view
+    wx:if="{{ computed.isSvg(name) }}"
+    style="{{ computed.svgStyle({ customStyle, name, color }) }}"
+    class="van-icon__svg"
+  />
+  <image
+    wx:elif="{{ computed.isImage(name) }}"
+    src="{{ computed.getImageSrc({ name, color }) }}"
+    mode="aspectFit"
+    class="van-icon__image"
+  />
+</view>