@tuya-miniapp/smart-ui 2.3.8-beta-5 → 2.3.9-beta-1

package/packages/image/README.md

@@ -1,171 +0,0 @@
----
-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 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`  |
-| 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/packages/image/demo/index.json

@@ -1,10 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "smart-row": "../../row/index",
-    "smart-col": "../../col/index",
-    "smart-image": "../../image/index",
-    "smart-loading": "../../loading/index",
-    "demo-block": "../../../example/components/demo-block/index"
-  }
-}

package/packages/image/demo/index.less

@@ -1,7 +0,0 @@
-.text {
-  width: 100%;
-  margin: 5px 0 20px;
-  color: #7d7e80;
-  font-size: 14px;
-  text-align: center;
-}

package/packages/image/demo/index.ts

@@ -1,20 +0,0 @@
-import { SmartComponent } from '../../common/component';
-SmartComponent({
-  data: {
-    fits: [
-      'contain',
-      'cover',
-      'fill',
-      'none',
-      'scale-down',
-      'widthFix',
-      'heightFix',
-    ],
-    tintColor: 'rgba(255, 255, 25, 0.4)',
-    src4: 'https://images.tuyacn.com/rms-static/40863330-00b6-11f0-9ab9-bf07ac3388bc-1741944321507.png?tyName=lampCircleBg%403x.png',
-    src3: 'https://images.tuyacn.com/rms-static/e6c9e630-00b4-11f0-9ab9-bf07ac3388bc-1741943741459.png?tyName=a.png',
-    src2: 'https://images.tuyacn.com/rms-static/b0b15a90-ae04-11ef-aa47-ab559e071ba6-1732852063929.png?tyName=miniapp-smart-ui-1.x.png',
-    src1: 'https://images.tuyacn.com/rms-static/778f4440-00af-11f0-b5de-11ed08c4d406-1741941407364.png?tyName=musicBg1%402x.png',
-    src: 'https://images.tuyacn.com/rms-static/f350c8a0-0eb2-11ef-8f06-49ae7b2fadcf-1715334722090.jpeg?tyName=cat.jpeg',
-  },
-});

package/packages/image/demo/index.wxml

@@ -1,112 +0,0 @@
-<demo-block title="{{I18n.t('basicUsage')}}" padding>
-  <smart-row>
-    <smart-image
-      width="100"
-      height="100"
-      src="{{ src }}"
-    />
-  </smart-row>
-</demo-block>
-
-<demo-block title="{{I18n.t('fillMode')}}" padding>
-  <smart-row gutter="20">
-    <smart-col
-      wx:for="{{ fits }}"
-      wx:for-item="fit"
-      wx:key="fit"
-      span="8"
-    >
-      <smart-image
-        fit="{{ fit }}"
-        width="100%"
-        height="27vw"
-        src="{{ src }}"
-      />
-      <view class="text">{{ fit }}</view>
-    </smart-col>
-  </smart-row>
-</demo-block>
-
-<demo-block title="{{I18n.t('roundImage')}}" padding>
-  <smart-row gutter="20">
-    <smart-col
-      wx:for="{{ fits }}"
-      wx:for-item="fit"
-      wx:key="fit"
-      span="8"
-    >
-      <smart-image
-        round
-        fit="{{ fit }}"
-        width="100%"
-        height="27vw"
-        src="{{ src }}"
-      />
-      <view class="text">{{ fit }}</view>
-    </smart-col>
-  </smart-row>
-</demo-block>
-
-<demo-block title="{{I18n.t('loading')}}" padding>
-  <smart-row gutter="20">
-    <smart-col span="8">
-      <smart-image
-        width="100%"
-        height="27vw"
-      />
-      <view class="text">{{I18n.t('defaultPrompt')}}</view>
-    </smart-col>
-
-    <smart-col span="8">
-      <smart-image
-        width="100%"
-        height="27vw"
-        use-loading-slot
-      >
-        <smart-loading
-          slot="loading"
-          type="spinner"
-          size="20"
-          vertical
-        />
-      </smart-image>
-      <view class="text">{{I18n.t('customPrompt')}}</view>
-    </smart-col>
-  </smart-row>
-</demo-block>
-
-<demo-block title="{{I18n.t('loadFailed')}}" padding>
-  <smart-row gutter="20">
-    <smart-col span="8">
-      <smart-image
-        width="100%"
-        height="27vw"
-        src="x"
-      />
-      <view class="text">{{I18n.t('defaultPrompt')}}</view>
-    </smart-col>
-
-    <smart-col span="8">
-      <smart-image
-        width="100%"
-        height="27vw"
-        src="x"
-        use-error-slot
-      >
-        <text slot="error">{{I18n.t('loadingFailed')}}</text>
-      </smart-image>
-      <view class="text">{{I18n.t('customPrompt')}}</view>
-    </smart-col>
-  </smart-row>
-</demo-block>
-
-<demo-block title="{{I18n.t('tintColor')}}" padding>
-  <smart-row>
-    <smart-image
-      width="100"
-      height="100"
-      tint-color="{{ tintColor }}"
-      src="{{ src3 }}"
-    />
-  </smart-row>
-</demo-block>

package/packages/image/index.json

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

package/packages/image/index.less

@@ -1,72 +0,0 @@
-@import '../common/style/var.less';
-
-.smart-image {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-
-  &__tint-color {
-    display: inline-block;
-
-    /* 设置覆盖色 */
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    /* 应用蒙版 */
-    mask-size: cover;
-    mask-position: center;
-    mask-repeat: no-repeat;
-  }
-
-  &--round {
-    overflow: hidden;
-    border-radius: 50%;
-
-    .smart-image__img {
-      border-radius: inherit;
-    }
-  }
-
-  &__img,
-  &__error,
-  &__loading {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  &__error,
-  &__loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: var(--image-placeholder-text-color, @image-placeholder-text-color);
-    font-size: var(--image-placeholder-font-size, @image-placeholder-font-size);
-    background-color: var(
-      --image-placeholder-background-color,
-      @image-placeholder-background-color
-    );
-  }
-
-  &__loading-icon {
-    --icon-color: var(--image-loading-icon-color, @image-loading-icon-color);
-
-    color: var(--image-loading-icon-color, @image-loading-icon-color);
-    font-size: var(
-      --image-loading-icon-size,
-      @image-loading-icon-size
-    ) !important;
-  }
-
-  &__error-img {
-    height: var(--image-error-size, @image-error-size);
-    width: var(--image-error-size, @image-error-size);
-  }
-}

package/packages/image/index.ts

@@ -1,79 +0,0 @@
-import { SmartComponent } from '../common/component';
-import { button } from '../mixins/button';
-import LoadingSvg from '@tuya-miniapp/icons/dist/svg/Loading';
-
-SmartComponent({
-  mixins: [button],
-
-  classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
-
-  props: {
-    src: {
-      type: String,
-      observer() {
-        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: true,
-    },
-    tintColor: {
-      type: String,
-      value: '',
-    },
-  },
-
-  data: {
-    error: false,
-    loading: true,
-    loadingSvg: LoadingSvg,
-    viewStyle: '',
-  },
-
-  methods: {
-    onLoad(event) {
-      this.setData({
-        loading: false,
-      });
-
-      this.$emit('load', event.detail);
-    },
-
-    onError(event) {
-      this.setData({
-        loading: false,
-        error: true,
-      });
-
-      this.$emit('error', event.detail);
-    },
-
-    onClick(event) {
-      this.$emit('click', event.detail);
-    },
-  },
-});

package/packages/image/index.wxml

@@ -1,40 +0,0 @@
-<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/packages/image/index.wxs

@@ -1,42 +0,0 @@
-/* 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) {
-  const str = 'mask-image: url(' + url + ');-webkit-mask-image: url(' + url + ');background: ' + color + ';'
-  return str
-}
-
-module.exports = {
-  rootStyle: rootStyle,
-  mode: mode,
-  defaultErrorImg: defaultErrorImg,
-  maskStyle: maskStyle
-};