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

package/lib/icon/README.md

@@ -0,0 +1,143 @@
+---
+category: 展示
+---
+
+# Icon 图标
+
+### 介绍
+
+基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-icon": "@tuya/miniapp-smart-ui/lib/icon/index"
+}
+```
+
+在`index.ts`中引入 icon svg
+
+```js
+import warningIcon from '@tuya-miniapp/icons/dist/svg/Warning';
+```
+
+## 代码演示
+
+### 基础用法
+
+`Icon`的`name`属性支持传入图标名称或图片链接。
+
+```html
+<smart-icon name="{{ warningIcon }}" />
+<smart-icon name="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png" />
+```
+
+### 提示信息
+
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标。
+
+```html
+<smart-icon name="{{ warningIcon }}" dot />
+<smart-icon name="{{ warningIcon }}" info="9" />
+<smart-icon name="{{ warningIcon }}" info="99+" />
+```
+
+### 图标颜色
+
+设置`color`属性来控制图标颜色。
+
+```html
+<smart-icon name="{{ warningIcon }}" color="red" />
+```
+
+### 图标大小
+
+设置`size`属性来控制图标大小。
+
+```html
+<smart-icon name="{{ warningIcon }}" size="50px" />
+```
+
+### 自定义图标
+
+如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 `app.wxss` 文件中引入。
+
+```css
+/* 引入第三方或自定义的字体图标样式 */
+@font-face {
+  font-family: 'my-icon';
+  src: url('./my-icon.ttf') format('truetype');
+}
+
+.my-icon {
+  font-family: 'my-icon';
+}
+
+.my-icon-extra::before {
+  content: '\e626';
+}
+```
+
+```html
+<!-- 通过 class-prefix 指定类名为 my-icon -->
+<smart-icon class-prefix="my-icon" name="extra" />
+```
+
+### Svg Path `v2.3.3`
+
+组件现在也支持传入path的方式渲染
+```html
+<smart-icon 
+  name="M192 448C192 624.736 335.264 768 512 768s320-143.264 320-320a319.872 319.872 0 0 0-160-277.184V160a64 64 0 0 0-64-64h-192a64 64 0 0 0-64 64v10.816A319.872 319.872 0 0 0 192 448z m224-384h192a32 32 0 0 0 0-64h-192a32 32 0 0 0 0 64z" 
+  size="36"
+  color="#1989fa"
+/>
+```
+
+
+## API
+
+### Props
+
+| 参数         | 说明                                       | 类型               | 默认值       |
+| ------------ | ------------------------------------------ | ------------------ | ------------ |
+| aria-label `v2.13.0` | 无障碍读屏文案；非空时根节点 `aria-role` 为 `button` | _string_           | -            |
+| aria-role `v2.13.0` | 无障碍 `aria-role` | _string_           | -            |
+| class-prefix | 类名前缀                                   | _string_           | `smart-icon` |
+| color        | 图标颜色                                   | _string_           | `inherit`    |
+| custom-style | 自定义样式                                 | _string_           | -            |
+| dot          | 是否显示图标右上角小红点                   | _boolean_          | `false`      |
+| info         | 图标右上角文字提示                         | _string \| number_ | -            |
+| name         | 图标名称或 Svg URL 或图片链接              | _string_           | -            |
+| size         | 图标大小，如 `20px`，`2em`，默认单位为`px` | _string \| number_ | `inherit`    |
+
+### Events
+
+| 事件名     | 说明           | 参数 |
+| ---------- | -------------- | ---- |
+| bind:click | 点击图标时触发 | -    |
+
+### 外部样式类
+
+| 类名         | 说明                 |
+| ------------ | -------------------- |
+| custom-class | 根节点样式类         |
+| info-class   | 图标右上角文字样式类 |
+
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --icon-color | _var(--app-B4-N2, rgba(0, 0, 0, 0.7))_ | 图标颜色 |
+
+## 常见问题
+
+### 开发者工具上提示 Failed to load font 是什么情况？
+
+这个是开发者工具本身的问题，可以忽略，具体可以查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html) - 注意事项第 5 条。

package/lib/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}:host{align-items:center;display:inline-flex;justify-content:center}.smart-icon{-webkit-font-smoothing:antialiased;font:normal normal normal 14px/1 var(--smart-icon-font-family,"smart-icon");font-size:inherit;position:relative;text-rendering:auto}.smart-icon,.smart-icon:before{display:inline-block}.smart-icon--custom{position:relative}.smart-icon--image{height:1em;width:1em}.smart-icon__image,.smart-icon__svg{height:100%;width:100%}.smart-icon__svg{background:var(--icon-color,var(--app-B4-N2,rgba(0,0,0,.7)))}.smart-icon__info{z-index:1}

package/lib/icon/index.d.ts

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

package/lib/icon/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    classes: ['info-class'],
+    props: {
+        dot: Boolean,
+        info: null,
+        size: null,
+        color: String,
+        customStyle: String,
+        classPrefix: {
+            type: String,
+            value: 'smart-icon',
+        },
+        name: String,
+        ariaLabel: {
+            type: String,
+            value: '',
+        },
+        ariaRole: {
+            type: String,
+            value: '',
+        },
+    },
+    methods: {
+        onClick: function (event) {
+            this.$emit('click', event);
+        },
+    },
+});

package/lib/icon/index.json

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

package/lib/icon/index.wxml

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

package/lib/icon/index.wxs

@@ -0,0 +1,94 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function isImage(name) {
+  return name.indexOf('/') !== -1;
+}
+
+function isSvgPath(name) {
+  return name.indexOf(' ') !== -1;
+}
+
+function isSvg(name) {
+  return name.indexOf('data:image/svg+xml') !== -1;
+}
+
+function rootClass(data) {
+  var classes = ['custom-class'];
+
+  if (data.classPrefix !== 'smart-icon') {
+    classes.push('smart-icon--custom');
+  }
+
+  if (data.classPrefix != null) {
+    classes.push(data.classPrefix);
+  }
+  if (isImage(data.name) || isSvgPath(data.name)) {
+    classes.push('smart-icon--image');
+    if (isSvg(data.name) || isSvgPath(data.name)) classes.push('smart-icon--svg');
+  } else if (data.classPrefix != null) {
+    classes.push(data.classPrefix + '-' + data.name);
+  }
+
+  return classes.join(' ');
+}
+
+function rootStyle(data) {
+  return style([
+    {
+      color: data.color,
+      'font-size': addUnit(data.size),
+    },
+    data.customStyle,
+  ]);
+}
+
+function getImageSrc(data) {
+  // if (isSvg(data.name) && data.color) {
+  //   return data.name.replace('currentColor', encodeURIComponent(data.color));
+  // }
+  return data.name;
+}
+
+function svgStyle(data) {
+  var imageBase64Src = 'url(' + getImageSrc(data) + ')';
+  var ret = style([
+    {
+      '-webkit-mask-image': imageBase64Src,
+      '-webkit-mask-size': 'contain',
+      '-webkit-mask-repeat': 'no-repeat',
+      '-webkit-mask-position': 'center',
+      background: data.color,
+    },
+  ]);
+  return ret;
+}
+
+function svgPathStyle(data) {
+  // 构建SVG字符串
+  var svg = '<svg class="icon" width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="' + data.name + " fill=" + ('currentColor') + '" fill-rule="evenodd"></path></svg>'
+  var imageBase64Src = 'url("data:image/svg+xml,' + encodeURIComponent(svg) + '")';
+  var ret = style([
+    {
+
+      '-webkit-mask-image': imageBase64Src,
+      '-webkit-mask-size': 'contain',
+      '-webkit-mask-repeat': 'no-repeat',
+      '-webkit-mask-position': 'center',
+      background: data.color,
+    },
+  ]);
+  return ret;
+}
+
+module.exports = {
+  isImage: isImage,
+  isSvg: isSvg,
+  isSvgPath: isSvgPath,
+  getImageSrc: getImageSrc,
+  rootClass: rootClass,
+  rootStyle: rootStyle,
+  svgStyle: svgStyle,
+  svgPathStyle: svgPathStyle,
+};

package/lib/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}:host{align-items:center;display:inline-flex;justify-content:center}.smart-icon{-webkit-font-smoothing:antialiased;font:normal normal normal 14px/1 var(--smart-icon-font-family,"smart-icon");font-size:inherit;position:relative;text-rendering:auto}.smart-icon,.smart-icon:before{display:inline-block}.smart-icon--custom{position:relative}.smart-icon--image{height:1em;width:1em}.smart-icon__image,.smart-icon__svg{height:100%;width:100%}.smart-icon__svg{background:var(--icon-color,var(--app-B4-N2,rgba(0,0,0,.7)))}.smart-icon__info{z-index:1}

package/lib/image/README.md

@@ -0,0 +1,171 @@
+---
+category: 展示
+---
+
+# Image 图片
+
+### 介绍
+
+增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-image": "@tuya/miniapp-smart-ui/lib/image/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+基础用法与原生 [image](<(https://developers.weixin.qq.com/miniprogram/dev/component/image.html)>) 标签一致，可以设置`src`、`width`、`height`等原生属性。
+
+```html
+<smart-image width="100" height="100" src="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png" />
+```
+
+### 填充模式
+
+通过`fit`属性可以设置图片填充模式，可选值见下方表格。
+
+```html
+<smart-image
+  width="10rem"
+  height="10rem"
+  fit="contain"
+  src="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png"
+/>
+```
+
+### 圆形图片
+
+通过`round`属性可以设置图片变圆，注意当图片宽高不相等且`fit`为`contain`或`scale-down`时，将无法填充一个完整的圆形。
+
+```html
+<smart-image
+  round
+  width="10rem"
+  height="10rem"
+  src="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png"
+/>
+```
+
+### 图片懒加载
+
+图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。
+
+```html
+<smart-image
+  width="100"
+  height="100"
+  lazy-load
+  src="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png"
+/>
+```
+
+### 加载中提示
+
+`Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容。
+
+```html
+<smart-image show-loading use-loading-slot>
+  <smart-loading slot="loading" type="spinner" size="20" vertical />
+</smart-image>
+```
+
+### 加载失败提示
+
+`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容。
+
+```html
+<smart-image use-error-slot>
+  <text slot="error">加载失败</text>
+</smart-image>
+```
+
+### 修改图片颜色 `v2.3.3`
+
+`tint-color`属性可以直接修改图片的颜色，类似RN的tintColor属性，原理是通过css mask实现的，所以使用之前要做好用户兼容性调查哦。
+
+```html
+<smart-image 
+  width="100" 
+  height="100" 
+  src="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png" 
+  tint-color="rgba(255, 255, 25, 0.4)"
+/>
+```
+
+## API
+
+### Props
+
+| 参数                   | 说明                                 | 类型               | 默认值  |
+| ---------------------- | ------------------------------------ | ------------------ | ------- |
+| alt                    | 替代文本                             | _string_           | -       |
+| fit                    | 图片填充模式                         | _string_           | _fill_  |
+| height                 | 高度，默认单位为`px`                 | _string \| number_ | -       |
+| lazy-load              | 是否懒加载                           | _boolean_          | `false` |
+| radius                 | 圆角大小，默认单位为`px`             | _string \| number_ | `0`     |
+| round                  | 是否显示为圆形                       | _boolean_          | `false` |
+| show-error             | 是否展示图片加载失败提示             | _boolean_          | `true`  |
+| show-loading           | 是否展示图片加载中提示               | _boolean_          | `true` `v2.0.0` `false` `v2.7.0`  |
+| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | _boolean_          | `false` |
+| src                    | 图片链接                             | _string_           | -       |
+| use-error-slot         | 是否使用 error 插槽                  | _boolean_          | `false` |
+| use-loading-slot       | 是否使用 loading 插槽                | _boolean_          | `false` |
+| webp `v1.10.11`        | 是否解析 webp 格式                   | _boolean_          | `false` |
+| width                  | 宽度，默认单位为`px`                 | _string \| number_ | -       |
+| tint-color `v2.3.3`                  |     修改图片颜色，类似RN的tintColor，采用css mask实现        | _string_ | -       |
+
+### 图片填充模式
+
+| 名称      | 含义                                                   |
+| --------- | ------------------------------------------------------ |
+| contain   | 保持宽高缩放图片，使图片的长边能完全显示出来           |
+| cover     | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
+| fill      | 拉伸图片，使图片填满元素                               |
+| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变   |
+| none      | 保持图片原有尺寸                                       |
+| widthFix  | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变   |
+
+### Events
+
+| 事件名     | 说明               | 回调参数     |
+| ---------- | ------------------ | ------------ |
+| bind:click | 点击图片时触发     | event: Event |
+| bind:error | 图片加载失败时触发 | event: Event |
+| bind:load  | 图片加载完毕时触发 | event: Event |
+
+### Slots
+
+| 名称    | 说明                       |
+| ------- | -------------------------- |
+| error   | 自定义加载失败时的提示内容 |
+| loading | 自定义加载中的提示内容     |
+
+### 外部样式类
+
+| 类名          | 说明           |
+| ------------- | -------------- |
+| custom-class  | 根节点样式类   |
+| error-class   | error 样式类   |
+| image-class   | 图片样式类     |
+| loading-class | loading 样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --image-placeholder-text-color    | _#969799_       | 加载描述文字    |
+| --image-placeholder-font-size    | _14px_       | 加载文字字体    |
+| --image-placeholder-background-color    | _#f7f8fa_       | 加载遮照背景色    |
+| --image-loading-icon-size    | _32px_       | 加载图标体积    |
+| --image-loading-icon-color    | _#dcdee0_       | 加载图标颜色    |
+| --image-error-size `v2.0.0`   | _32px_       | 图片加载错误时默认图片    |

package/lib/image/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}:host{font-size:0;line-height:0}.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image__tint-color{display:inline-block;height:100%;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;position:absolute;top:0;width:100%}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}

package/lib/image/index.d.ts

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

package/lib/image/index.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var button_1 = require("../mixins/button");
+var Loading_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Loading"));
+(0, component_1.SmartComponent)({
+    mixins: [button_1.button],
+    classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
+    props: {
+        src: {
+            type: String,
+            observer: function () {
+                this.setData({
+                    error: false,
+                    loading: true,
+                });
+            },
+        },
+        round: Boolean,
+        width: null,
+        height: null,
+        radius: null,
+        lazyLoad: Boolean,
+        useErrorSlot: Boolean,
+        useLoadingSlot: Boolean,
+        showMenuByLongpress: Boolean,
+        fit: {
+            type: String,
+            value: 'fill',
+        },
+        webp: {
+            type: Boolean,
+            value: false,
+        },
+        showError: {
+            type: Boolean,
+            value: true,
+        },
+        showLoading: {
+            type: Boolean,
+            value: false,
+        },
+        tintColor: {
+            type: String,
+            value: '',
+        },
+    },
+    data: {
+        error: false,
+        loading: true,
+        loadingSvg: Loading_1.default,
+        viewStyle: '',
+    },
+    methods: {
+        onLoad: function (event) {
+            this.setData({
+                loading: false,
+            });
+            this.$emit('load', event.detail);
+        },
+        onError: function (event) {
+            this.setData({
+                loading: false,
+                error: true,
+            });
+            this.$emit('error', event.detail);
+        },
+        onClick: function (event) {
+            this.$emit('click', event.detail);
+        },
+    },
+});

package/lib/image/index.json

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

package/lib/image/index.wxml

@@ -0,0 +1,40 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  style="{{ computed.rootStyle({ width, height, radius }) }}"
+  class="custom-class {{ utils.bem('image', { round })}}"
+  bind:tap="onClick"
+>
+  <image
+    wx:if="{{ !error }}"
+    src="{{ src }}"
+    mode="{{ computed.mode(fit) }}"
+    lazy-load="{{ lazyLoad }}"
+    style="visibility:{{ tintColor ? 'hidden' : '' }};"
+    webp="{{ webp }}"
+    class="image-class smart-image__img"
+    show-menu-by-longpress="{{ showMenuByLongpress }}"
+    bind:load="onLoad"
+    bind:error="onError"
+  />
+  <view 
+    wx:if="{{ tintColor }}" 
+    class="image-class smart-image__img smart-image__tint-color"
+    style="{{ computed.maskStyle(src, tintColor) }}"
+  ></view>
+  <view
+    wx:if="{{ loading && showLoading }}"
+    class="loading-class smart-image__loading"
+  >
+    <slot wx:if="{{ useLoadingSlot }}" name="loading" />
+    <smart-icon wx:else name="{{ loadingSvg }}" custom-class="smart-image__loading-icon" />
+  </view>
+  <view
+    wx:if="{{ error && showError }}"
+    class="error-class smart-image__error"
+  >
+    <slot wx:if="{{ useErrorSlot }}" name="error" />
+    <image wx:else src="{{ computed.defaultErrorImg }}" class="smart-image__error-img" />
+  </view>
+</view>

package/lib/image/index.wxs

@@ -0,0 +1,42 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+/* eslint-disable */
+var defaultErrorImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAACRQTFRFR3BM2Nzf3t/f2t/f29zf293g3N7g3d/g3N/g3N7g3N7g3N7gsU8N3gAAAAt0Uk5TABAgMEJihqHE3+9M4B8/AAABhUlEQVR42u2XwY7DIAwFbQewzfv//1012+ipClCVvfSwc6iihBkoB6LIP9+E2pjJU5UXSusYU+XBcX+cbpy8YUajf6ddfuz5gMuJA4iq8hFW85qgnhefow6giEgALhtcpgI4ZIsC9PM3ZZMOmFQgZJMEyjcGtHp41e1Aw0nWzYDjom4FKkjZCSRIbAQKQPpGoAIg9teAfh4wgOTOJgaI7wQK/bSbUKKVNwHuQh5yQxPIug6IBR6EyQvG49V1GCBWalEhv2blAkNvgRn0r0HOwi2w9vW64h9k4L2fRv9B2jKgC5+FSUBbAIg68C1B0saB4xrkOvFZGAW4SIQ+b/SD/muBAfog8bwx8YHsYIA+8fNGpT+AAfrE1z4D9G80+ovAps/Aps/AzHf668Cmz8DYD71OobeBoZ+/fuB9oA99o78MHBjSjcf8ChXps/SDhjXBMXtLqCKifR4XsY4FybfRgMaDHMtVSsnVNjhm8OVlvphAJ/neVIiV5neenys+oFX9/0z8Hn4AdL9D/Fg+REQAAAAASUVORK5CYII="
+
+function rootStyle(data) {
+  return style([
+    {
+      width: addUnit(data.width),
+      height: addUnit(data.height),
+      'border-radius': addUnit(data.radius),
+    },
+    data.radius ? 'overflow: hidden' : null,
+  ]);
+}
+
+var FIT_MODE_MAP = {
+  none: 'center',
+  fill: 'scaleToFill',
+  cover: 'aspectFill',
+  contain: 'aspectFit',
+  widthFix: 'widthFix',
+  heightFix: 'heightFix',
+};
+
+function mode(fit) {
+  return FIT_MODE_MAP[fit];
+}
+
+
+function maskStyle(url, color) {
+  var str = '-webkit-mask-image: url(' + url + ');background: ' + color + ';'
+  return str
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  mode: mode,
+  defaultErrorImg: defaultErrorImg,
+  maskStyle: maskStyle
+};