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

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+var button_1 = require("../mixins/button");
+var link_1 = require("../mixins/link");
+(0, component_1.SmartComponent)({
+    mixins: [link_1.link, button_1.button],
+    relation: (0, relation_1.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: '',
+        },
+        isFirst: Boolean,
+        isLast: Boolean,
+    },
+    methods: {
+        onClick: function (event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+        updateStyle: function () {
+            if (this.parent == null) {
+                return;
+            }
+            var index = this.index;
+            var _a = this.parent.children, children = _a === void 0 ? [] : _a;
+            // this.setData({
+            //   isFirst: index === 0 && children.length > 1,
+            //   isLast: index === children.length - 1 && children.length > 1,
+            // });
+            this.setData({
+                length: children.length,
+            });
+        },
+    },
+});

package/lib/goods-action-button/index.json

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

package/lib/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 && length > 1, last: isLast && length > 1, 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/lib/goods-action-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}: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(--button-default-height,var(--goods-action-button-height,48px));--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-right:6px}.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-left:6px}.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/lib/goods-action-icon/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}.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,48px)!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/lib/goods-action-icon/index.d.ts

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

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var button_1 = require("../mixins/button");
+var link_1 = require("../mixins/link");
+(0, component_1.SmartComponent)({
+    classes: ['icon-class', 'text-class', 'info-class'],
+    mixins: [link_1.link, button_1.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: function (event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+    },
+});

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

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

package/lib/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/lib/goods-action-icon/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-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,48px)!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/lib/grid/README.md

@@ -0,0 +1,197 @@
+---
+category: 布局
+---
+
+# Grid 宫格
+
+### 介绍
+
+宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-grid": "@tuya/miniapp-smart-ui/lib/grid/index",
+  "smart-grid-item": "@tuya/miniapp-smart-ui/lib/grid-item/index"
+}
+```
+
+## 代码演示
+
+### 基本用法
+
+通过`icon`属性设置格子内的图标，`text`属性设置文字内容。
+
+```html
+<smart-grid>
+  <smart-grid-item icon="photo-o" text="文字" />
+  <smart-grid-item icon="photo-o" text="文字" />
+  <smart-grid-item icon="photo-o" text="文字" />
+  <smart-grid-item icon="photo-o" text="文字" />
+</smart-grid>
+```
+
+### 自定义列数
+
+默认一行展示四个格子，可以通过`column-num`自定义列数。
+
+```html
+<smart-grid column-num="3">
+  <smart-grid-item icon="photo-o" text="文字" ty:for="{{ 6 }}" />
+</smart-grid>
+```
+
+### 自定义内容
+
+通过插槽可以自定义格子展示的内容。
+
+```html
+<smart-grid column-num="3" border="{{ false }}">
+  <smart-grid-item use-slot ty:for="{{ 3 }}" ty:for-item="index">
+    <image
+      style="width: 90px; height: 90px;"
+      src="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png"
+    />
+  </smart-grid-item>
+</smart-grid>
+```
+
+### 正方形格子
+
+设置`square`属性后，格子的高度会和宽度保持一致。
+
+```html
+<smart-grid square>
+  <smart-grid-item icon="photo-o" text="文字" ty:for="{{ 8 }}" />
+</smart-grid>
+```
+
+### 格子间距
+
+通过`gutter`属性设置格子之间的距离。
+
+```html
+<smart-grid gutter="{{ 10 }}">
+  <smart-grid-item icon="photo-o" text="文字" ty:for="{{ 8 }}" />
+</smart-grid>
+```
+
+### 内容横排
+
+将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列。
+
+```html
+<smart-grid direction="horizontal" column-num="2">
+  <smart-grid-item icon="photo-o" text="文字" />
+  <smart-grid-item icon="photo-o" text="文字" />
+  <smart-grid-item icon="photo-o" text="文字" />
+</smart-grid>
+```
+
+### 页面跳转
+
+可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型。
+
+```html
+<smart-grid clickable column-num="2">
+  <smart-grid-item
+    icon="home-o"
+    link-type="navigateTo"
+    url="/pages/dashboard/index"
+    text="Navigate 跳转"
+  />
+  <smart-grid-item
+    icon="search"
+    link-type="reLaunch"
+    url="/pages/dashboard/index"
+    text="ReLaunch 跳转"
+  />
+</smart-grid>
+```
+
+### 提示信息
+
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标。
+
+```html
+<smart-grid column-num="2">
+  <smart-grid-item icon="home-o" text="文字" dot />
+  <smart-grid-item icon="search" text="文字" badge="99+" />
+</smart-grid>
+```
+
+## API
+
+### Grid Props
+
+| 参数               | 说明                                      | 类型               | 默认值     |
+| ------------------ | ----------------------------------------- | ------------------ | ---------- |
+| border             | 是否显示边框                              | _boolean_          | `true`     |
+| center             | 是否将格子内容居中显示                    | _boolean_          | `true`     |
+| clickable          | 是否开启格子点击反馈                      | _boolean_          | `false`    |
+| column-num         | 列数                                      | _number_           | `4`        |
+| direction          | 格子内容排列的方向，可选值为 `horizontal` | _string_           | `vertical` |
+| gutter             | 格子之间的间距，默认单位为`px`            | _string \| number_ | `0`        |
+| icon-size `v1.3.2` | 图标大小，默认单位为`px`                  | _string_           | `28px`     |
+| reverse `v1.7.0`   | 是否调换图标和文本的位置                  | _boolean_          | `false`    |
+| square             | 是否将格子固定为正方形                    | _boolean_          | `false`    |
+| use-slot           | 是否使用自定义内容的插槽                  | _boolean_          | `false`    |
+
+### Grid 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### GridItem Props
+
+| 参数                 | 说明                                                                                                                                       | 类型               | 默认值       |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------ |
+| aria-label `v2.13.0` | 无障碍读屏文案，设置在根节点的 `aria-label` 上                                                                                            | _string_           | -            |
+| badge                | 图标右上角徽标的内容                                                                                                                       | _string \| number_ | -            |
+| dot                  | 是否显示图标右上角小红点                                                                                                                   | _boolean_          | `false`      |
+| icon                 | 图标 svg 值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp)                                                  | _string_           | -            |
+| icon-color           | 图标颜色                                                                                                                                   | _string_           | -            |
+| icon-prefix `v1.7.0` | 第三方图标前缀                                                                                                                             | _string_           | `smart-icon` |
+| link-type            | 链接跳转类型，可选值为 `redirectTo` [`switchTab`](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html) `reLaunch` | _string_           | `navigateTo` |
+| text                 | 文字                                                                                                                                       | _string_           | -            |
+| url                  | 点击后跳转的链接地址                                                                                                                       | _string_           | -            |
+
+### GridItem Events
+
+| 事件名     | 说明           | 回调参数 |
+| ---------- | -------------- | -------- |
+| bind:click | 点击格子时触发 | -        |
+
+### GridItem Slots
+
+| 名称 | 说明                                                   |
+| ---- | ------------------------------------------------------ |
+| -    | 自定义宫格的所有内容，需要设置`use-slot`属性           |
+| icon | 自定义图标，如果设置了`use-slot`或者`icon`属性则不生效 |
+| text | 自定义文字，如果设置了`use-slot`或者`text`属性则不生效 |
+
+### GridItem 外部样式类
+
+| 类名          | 说明         |
+| ------------- | ------------ |
+| content-class | 内容样式类   |
+| custom-class  | 根节点样式类 |
+| icon-class    | 图标样式类   |
+| text-class    | 文本样式类   |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                                 | 默认值                                 | 描述         |
+| ------------------------------------ | -------------------------------------- | ------------ |
+| --grid-item-content-padding          | _@padding-md @padding-xs_              | 内容内边距   |
+| --grid-item-content-background-color | _var(--app-B3, #ffffff)_               | 背景颜色     |
+| --grid-item-content-active-color     | _#f2f3f5_                              | 激活时颜色   |
+| --grid-item-icon-size                | _26px_                                 | 图标大小     |
+| --grid-item-text-color               | _var(--app-B6-N2, rgba(0, 0, 0, 0.7))_ | 文本颜色     |
+| --grid-item-text-font-size           | _12px_                                 | 文本字体大小 |

package/lib/grid/index.css

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

package/lib/grid/index.d.ts

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

package/lib/grid/index.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+(0, component_1.SmartComponent)({
+    relation: (0, relation_1.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: function () {
+            this.children.forEach(function (child) {
+                child.updateStyle();
+            });
+        },
+    },
+});

package/lib/grid/index.json

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

package/lib/grid/index.wxml

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

package/lib/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/lib/grid/index.wxss

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

package/lib/grid-item/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}.smart-grid-item{box-sizing:border-box;float:left;position:relative}.smart-grid-item--square{height:0}.smart-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)}.smart-grid-item__content:after{border-width:0 1px 1px 0;z-index:1}.smart-grid-item__content--surround:after{border-width:1px}.smart-grid-item__content--center{align-items:center;justify-content:center}.smart-grid-item__content--square{left:0;position:absolute;right:0;top:0}.smart-grid-item__content--horizontal{flex-direction:row}.smart-grid-item__content--horizontal .smart-grid-item__text{margin:0 0 0 8px}.smart-grid-item__content--reverse{flex-direction:column-reverse}.smart-grid-item__content--reverse .smart-grid-item__text{margin:0 0 8px}.smart-grid-item__content--horizontal.smart-grid-item__content--reverse{flex-direction:row-reverse}.smart-grid-item__content--horizontal.smart-grid-item__content--reverse .smart-grid-item__text{margin:0 8px 0 0}.smart-grid-item__content--clickable:active{background-color:var(--grid-item-content-active-color,#f2f3f5)}.smart-grid-item__icon{align-items:center;display:flex;font-size:var(--grid-item-icon-size,26px);height:var(--grid-item-icon-size,26px)}.smart-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)}.smart-grid-item__icon+.smart-grid-item__text{margin-top:8px}

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

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

package/lib/grid-item/index.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+var link_1 = require("../mixins/link");
+(0, component_1.SmartComponent)({
+    relation: (0, relation_1.useParent)('grid'),
+    classes: ['content-class', 'icon-class', 'text-class'],
+    mixins: [link_1.link],
+    props: {
+        icon: String,
+        iconColor: String,
+        iconPrefix: {
+            type: String,
+            value: 'smart-icon',
+        },
+        dot: Boolean,
+        info: null,
+        badge: null,
+        text: String,
+        useSlot: Boolean,
+        ariaLabel: {
+            type: String,
+            value: '',
+        },
+    },
+    data: {
+        viewStyle: '',
+    },
+    mounted: function () {
+        this.updateStyle();
+    },
+    methods: {
+        updateStyle: function () {
+            if (!this.parent) {
+                return;
+            }
+            var _a = this.parent, data = _a.data, children = _a.children;
+            var columnNum = data.columnNum, border = data.border, square = data.square, gutter = data.gutter, clickable = data.clickable, center = data.center, direction = data.direction, reverse = data.reverse, iconSize = data.iconSize;
+            this.setData({
+                center: center,
+                border: border,
+                square: square,
+                gutter: gutter,
+                clickable: clickable,
+                direction: direction,
+                reverse: reverse,
+                iconSize: iconSize,
+                index: children.indexOf(this),
+                columnNum: columnNum,
+            });
+        },
+        onClick: function () {
+            this.$emit('click');
+            this.jumpLink();
+        },
+    },
+});

package/lib/grid-item/index.json

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

package/lib/grid-item/index.wxml

@@ -0,0 +1,30 @@
+<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 }) }}"
+  aria-role="button"
+  role="button"
+  aria-label="{{ ariaLabel }}"
+  bindtap="onClick"
+>
+  <view
+    class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, reverse, clickable, surround: border && gutter }]) }} {{ border ? 'smart-hairline--surround' : '' }}"
+    style="{{ computed.contentStyle({ square, gutter }) }}"
+  >
+    <block wx:if="{{ useSlot }}">
+      <slot />
+    </block>
+    <block wx:else>
+      <view class="smart-grid-item__icon icon-class">
+        <smart-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="smart-grid-item__text text-class">
+        <text wx:if="{{ text }}">{{ text }}</text>
+        <slot wx:else name="text"></slot>
+      </view>
+    </block>
+  </view>
+</view>

package/lib/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/lib/grid-item/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-grid-item{box-sizing:border-box;float:left;position:relative}.smart-grid-item--square{height:0}.smart-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)}.smart-grid-item__content:after{border-width:0 1px 1px 0;z-index:1}.smart-grid-item__content--surround:after{border-width:1px}.smart-grid-item__content--center{align-items:center;justify-content:center}.smart-grid-item__content--square{left:0;position:absolute;right:0;top:0}.smart-grid-item__content--horizontal{flex-direction:row}.smart-grid-item__content--horizontal .smart-grid-item__text{margin:0 0 0 8px}.smart-grid-item__content--reverse{flex-direction:column-reverse}.smart-grid-item__content--reverse .smart-grid-item__text{margin:0 0 8px}.smart-grid-item__content--horizontal.smart-grid-item__content--reverse{flex-direction:row-reverse}.smart-grid-item__content--horizontal.smart-grid-item__content--reverse .smart-grid-item__text{margin:0 8px 0 0}.smart-grid-item__content--clickable:active{background-color:var(--grid-item-content-active-color,#f2f3f5)}.smart-grid-item__icon{align-items:center;display:flex;font-size:var(--grid-item-icon-size,26px);height:var(--grid-item-icon-size,26px)}.smart-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)}.smart-grid-item__icon+.smart-grid-item__text{margin-top:8px}