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

package/packages/index-bar/test/demo.spec.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});

package/packages/info/index.json

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

package/packages/info/index.less

@@ -0,0 +1,32 @@
+@import '../common/style/var.less';
+
+.smart-info {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  white-space: nowrap;
+  transform: translate(50%, -50%);
+  transform-origin: 100%;
+  height: var(--info-size, @info-size);
+  min-width: var(--info-size, @info-size);
+  padding: var(--info-padding, @info-padding);
+  color: var(--info-color, @info-color);
+  font-weight: var(--info-font-weight, @info-font-weight);
+  font-size: var(--info-font-size, @info-font-size);
+  font-family: var(--info-font-family, @info-font-family);
+  background-color: var(--info-background-color, @info-background-color);
+  border: var(--info-border-width, @info-border-width) solid @white;
+  border-radius: var(--info-size, @info-size);
+
+  &--dot {
+    min-width: 0;
+    border-radius: 100%;
+    width: var(--info-dot-size, @info-dot-size);
+    height: var(--info-dot-size, @info-dot-size);
+    background-color: var(--info-dot-color, @info-dot-color);
+  }
+}

package/packages/info/index.ts

@@ -0,0 +1,9 @@
+import { SmartComponent } from '../common/component';
+
+SmartComponent({
+  props: {
+    dot: Boolean,
+    info: null,
+    customStyle: String,
+  },
+});

package/packages/info/index.wxml

@@ -0,0 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  wx:if="{{ info !== null && info !== '' || dot }}"
+  class="smart-info {{ utils.bem('info', { dot }) }} custom-class"
+  style="{{ customStyle }}"
+>{{ dot ? '' : info }}</view>

package/packages/loading/README.en.md

@@ -0,0 +1,81 @@
+---
+category: Display
+---
+
+# Loading
+
+### Introduction
+
+Loading icons, used to indicate a transition state.
+
+### Import
+
+Import the component in `app.json` or `index.json`. For details, see [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp).
+
+```json
+"usingComponents": {
+  "smart-loading": "@tuya-miniapp/smart-ui/lib/loading/index"
+}
+```
+
+## Code Examples
+
+### Loading Types
+
+```html
+<smart-loading /> <smart-loading type="spinner" />
+```
+
+### Custom Color
+
+```html
+<smart-loading color="#1989fa" /> <smart-loading type="spinner" color="#1989fa" />
+```
+
+### Loading Text
+
+```html
+<smart-loading size="24px">Loading...</smart-loading>
+```
+
+### Vertical Arrangement
+
+```html
+<smart-loading size="24px" vertical>Loading...</smart-loading>
+```
+
+## API
+
+### Props
+
+| Parameter         | Description                   | Type               | Default    |
+| ----------------- | ----------------------------- | ------------------ | ---------- |
+| color             | Color                        | _string_           | `#c9c9c9`  |
+| size              | Size of the loading icon, default unit is `px` | _string \| number_ | `30px`     |
+| text-size `v1.0.0`| Text size, default unit is `px` | _string \| number_ | `14px`     |
+| type              | Type, optional value is `spinner` | _string_           | `circular` |
+| vertical `v1.0.0` | Whether to vertically align icons and text | _boolean_          | `false`    |
+
+### Slots
+
+| Name | Description |
+| ---- | ----------- |
+| -    | Loading text |
+
+### External Style Classes
+
+| Class Name    | Description    |
+| ------------- | -------------- |
+| custom-class  | Root node style |
+### Style Variables
+
+The component provides the following CSS variables that can be used for custom styles. For usage, refer to the [ConfigProvider Component](/material/smartui?comId=config-provider&appType=miniapp).
+
+| Name                                   | Default Value                           | Description                    |
+| -------------------------------------- | ---------------------------------------- | ------------------------------ |
+| --loading-text-color                   | _#969799_                                | Text color                     |
+| --loading-text-font-size               | _14px_                                   | Text font size                 |
+| --loading-text-line-height             | _20px_                                   | Text line height               |
+| --loading-spinner-color                | _#c8c9cc_                                | Spinner color                  |
+| --loading-spinner-size                 | _30px_                                   | Spinner size                   |
+| --loading-spinner-animation-duration   | _0.8s_                                   | Animation duration             |

package/packages/loading/README.md

@@ -0,0 +1,82 @@
+---
+category: 展示
+---
+
+# Loading 加载
+
+### 介绍
+
+加载图标，用于表示加载中的过渡状态。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-loading": "@tuya-miniapp/smart-ui/lib/loading/index"
+}
+```
+
+## 代码演示
+
+### 加载类型
+
+```html
+<smart-loading /> <smart-loading type="spinner" />
+```
+
+### 自定义颜色
+
+```html
+<smart-loading color="#1989fa" /> <smart-loading type="spinner" color="#1989fa" />
+```
+
+### 加载文案
+
+```html
+<smart-loading size="24px">加载中...</smart-loading>
+```
+
+### 垂直排列
+
+```html
+<smart-loading size="24px" vertical>加载中...</smart-loading>
+```
+
+## API
+
+### Props
+
+| 参数               | 说明                          | 类型               | 默认值     |
+| ------------------ | ----------------------------- | ------------------ | ---------- |
+| color              | 颜色                          | _string_           | `#c9c9c9`  |
+| size               | 加载图标大小，默认单位为 `px` | _string \| number_ | `30px`     |
+| text-size `v1.0.0` | 文字大小，默认单位为为 `px`   | _string \| number_ | `14px`     |
+| type               | 类型，可选值为 `spinner`      | _string_           | `circular` |
+| vertical `v1.0.0`  | 是否垂直排列图标和文字内容    | _boolean_          | `false`    |
+
+### Slots
+
+| 名称 | 说明     |
+| ---- | -------- |
+| -    | 加载文案 |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --loading-text-color | _#969799_ | 文本颜色 |
+| --loading-text-font-size | _14px_ | 文本字体大小 |
+| --loading-text-line-height | _20px_ | 文本行高 |
+| --loading-spinner-color | _#c8c9cc_ | 加载器颜色 |
+| --loading-spinner-size | _30px_ | 加载器大小 |
+| --loading-spinner-animation-duration | _0.8s_ | 加载动画持续时间 |

package/packages/loading/demo/index.json

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

package/packages/loading/demo/index.less

@@ -0,0 +1,4 @@
+.demo-loading {
+  margin: 4px 16px 4px 0;
+}
+

package/packages/loading/demo/index.ts

@@ -0,0 +1,5 @@
+import { SmartComponent } from '../../common/component';
+
+SmartComponent({
+  data: {},
+});

package/packages/loading/demo/index.wxml

@@ -0,0 +1,19 @@
+<demo-block title="{{I18n.t('loadingType')}}" padding>
+  <smart-loading custom-class="demo-loading" />
+  <smart-loading custom-class="demo-loading" type="spinner" />
+</demo-block>
+
+<demo-block title="{{I18n.t('customColor')}}" padding>
+  <smart-loading custom-class="demo-loading" type="spinner" color="#1989fa" />
+  <smart-loading custom-class="demo-loading" color="#1989fa" />
+</demo-block>
+
+<demo-block title="{{I18n.t('loadingCopy')}}" padding>
+  <smart-loading custom-class="demo-loading" type="spinner" size="24px" color="#1989FA">{{I18n.t('loading')}}...</smart-loading>
+  <smart-loading custom-class="demo-loading" size="24px" color="#1989FA">{{I18n.t('loading')}}...</smart-loading>
+</demo-block>
+
+<demo-block title="{{I18n.t('verticalArrangement')}}" padding>
+  <smart-loading type="spinner" custom-class="demo-loading" size="24px" vertical color="#1989FA">{{I18n.t('loading')}}...</smart-loading>
+
+</demo-block>

package/packages/loading/index.json

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

package/packages/loading/index.less

@@ -0,0 +1,63 @@
+@import '../common/style/var.less';
+
+:host {
+  font-size: 0;
+  line-height: 1;
+}
+
+.smart-loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--loading-spinner-color, @loading-spinner-color);
+
+  &__spinner {
+    position: relative;
+    box-sizing: border-box;
+    width: var(--loading-spinner-size, @loading-spinner-size);
+    // compatible for 0.x, users may set width or height in root element
+    max-width: 100%;
+    max-height: 100%;
+    height: var(--loading-spinner-size, @loading-spinner-size);
+    animation: smart-rotate
+      var(
+        --loading-spinner-animation-duration,
+        @loading-spinner-animation-duration
+      )
+      linear infinite;
+
+    &--spinner {
+      animation-timing-function: steps(8);
+    }
+
+  }
+
+  &__text {
+    margin-left: var(--padding-xs, @padding-xs);
+    color: var(--loading-text-color, @loading-text-color);
+    font-size: var(--loading-text-font-size, @loading-text-font-size);
+    line-height: var(--loading-text-line-height, @loading-text-line-height);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+
+    .smart-loading__text {
+      margin: var(--padding-xs, @padding-xs) 0 0;
+    }
+  }
+}
+
+@keyframes smart-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/packages/loading/index.ts

@@ -0,0 +1,47 @@
+import { SmartComponent } from '../common/component';
+
+SmartComponent({
+  props: {
+    color: {
+      type: String,
+      value: '#1989FA'
+    },
+    vertical: Boolean,
+    type: {
+      type: String,
+      value: 'circular',
+    },
+    size: {
+      type: String,
+      value: '30',
+    },
+    textSize: String,
+  },
+  data: {
+    spinner: '',
+    circular: ''
+  },
+  created(){
+    this.setData({
+      spinner: this.SpinnerLoading({color: this.data.color}),
+      circular: this.CircularLoading({color: this.data.color})
+    })
+  },
+  methods: {
+    createSvgIcon(svg) {
+      return `data:image/svg+xml,${encodeURIComponent(
+      `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">${svg}`
+    )}`
+    },
+    CircularLoading ({ color = '#1989FA' }) {
+      return this.createSvgIcon(
+        `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_452_31565"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath><linearGradient x1="0.5" y1="0.5" x2="0.5" y2="0.8999999761581421" id="master_svg1_452_31641"><stop offset="0%" stop-color="${color}" stop-opacity="1"/><stop offset="100%" stop-color="${color}" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#master_svg0_452_31565)"><g style="opacity:0.20000000298023224;"><path d="M12,18.4C15.5346,18.4,18.4,15.5346,18.4,12C18.4,8.46538,15.5346,5.6,12,5.6C8.46538,5.6,5.6,8.46538,5.6,12C5.6,15.5346,8.46538,18.4,12,18.4ZM12,20C16.418300000000002,20,20,16.418300000000002,20,12C20,7.58172,16.418300000000002,4,12,4C7.58172,4,4,7.58172,4,12C4,16.418300000000002,7.58172,20,12,20Z" fill-rule="evenodd" fill="${color}" fill-opacity="1"/></g><g><path d="M12,5.6C8.46538,5.6,5.6,8.46538,5.6,12C5.6,15.5346,8.46538,18.4,12,18.4C12.44183,18.4,12.8,18.758200000000002,12.8,19.2C12.8,19.6418,12.44183,20,12,20C7.58172,20,4,16.418300000000002,4,12C4,7.58172,7.58172,4,12,4C16.418300000000002,4,20,7.58172,20,12C20,12.44183,19.6418,12.8,19.2,12.8C18.758200000000002,12.8,18.4,12.44183,18.4,12C18.4,8.46538,15.5346,5.6,12,5.6Z" fill-rule="evenodd" fill="url(#master_svg1_452_31641)" fill-opacity="1"/></g></g></svg>`
+      )
+    },
+    SpinnerLoading ({ color = '#3678E3' }) {
+      return this.createSvgIcon(
+        `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="32" height="32" viewBox="0 0 32 32"><defs><clipPath id="master_svg0_1695_29273"><rect x="0" y="0" width="32" height="32" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1695_29273)"><g><path d="M14.73077392578125,8.807690000000001L14.73077392578125,6.26923C14.73077392578125,5.568254,15.29902692578125,5,16.00000392578125,5C16.70097392578125,5,17.26923392578125,5.568254,17.26923392578125,6.26923L17.26923392578125,8.807690000000001C17.26923392578125,9.50867,16.70097392578125,10.07693,16.00000392578125,10.07693C15.29902692578125,10.07693,14.73077392578125,9.50867,14.73077392578125,8.807690000000001Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(0.7071067690849304,0.7071067690849304,-0.7071067690849304,0.7071067690849304,11.880707750418878,-14.033822285849965)" style="opacity:0.05000000074505806;"><path d="M22.88067626953125,11.132061337890626L22.88067626953125,8.593601337890625C22.88067626953125,7.892624337890625,23.44892926953125,7.324371337890625,24.14990626953125,7.324371337890625C24.85088626953125,7.324371337890625,25.41913626953125,7.892624337890625,25.41913626953125,8.593601337890625L25.41913626953125,11.132061337890626C25.41913626953125,11.833041337890625,24.85088626953125,12.401291337890626,24.14990626953125,12.401291337890626C23.44892926953125,12.401291337890626,22.88067626953125,11.833041337890625,22.88067626953125,11.132061337890626Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(0,1,-1,0,41.73081970214844,-12.269180297851562)" style="opacity:0.10000000149011612;"><path d="M27,18.53850970214844L27,16.000049702148438C27,15.299072702148438,27.568253,14.730819702148438,28.26923,14.730819702148438C28.97021,14.730819702148438,29.53846,15.299072702148438,29.53846,16.000049702148438L29.53846,18.53850970214844C29.53846,19.23948970214844,28.97021,19.80773970214844,28.26923,19.80773970214844C27.568253,19.80773970214844,27,19.23948970214844,27,18.53850970214844Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(-0.7071067690849304,0.7071067690849304,-0.7071067690849304,-0.7071067690849304,58.30294381839121,21.611726407169044)" style="opacity:0.15000000596046448;"><path d="M24.675537109375,26.68848833984375L24.675537109375,24.15002833984375C24.675537109375,23.44905133984375,25.243790109375,22.88079833984375,25.944767109375,22.88079833984375C26.645747109375,22.88079833984375,27.213997109375,23.44905133984375,27.213997109375,24.15002833984375L27.213997109375,26.68848833984375C27.213997109375,27.389468339843752,26.645747109375,27.95771833984375,25.944767109375,27.95771833984375C25.243790109375,27.95771833984375,24.675537109375,27.389468339843752,24.675537109375,26.68848833984375Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,34.5384521484375,54)" style="opacity:0.30000001192092896;"><path d="M17.26922607421875,30.80769L17.26922607421875,28.26923C17.26922607421875,27.568254,17.83747907421875,27,18.53845607421875,27C19.23942607421875,27,19.80768607421875,27.568254,19.80768607421875,28.26923L19.80768607421875,30.80769C19.80768607421875,31.508670000000002,19.23942607421875,32.07693,18.53845607421875,32.07693C17.83747907421875,32.07693,17.26922607421875,31.508670000000002,17.26922607421875,30.80769Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(-0.7071068286895752,-0.7071067094802856,0.7071067094802856,-0.7071068286895752,-1.8805817391439632,48.572416538932885)" style="opacity:0.550000011920929;"><path d="M9.119384765625,28.483379697265626L9.119384765625,25.944919697265625C9.119384765625,25.243942697265624,9.687637765625,24.675689697265625,10.388614765625,24.675689697265625C11.089594765625,24.675689697265625,11.657844765625,25.243942697265624,11.657844765625,25.944919697265625L11.657844765625,28.483379697265626C11.657844765625,29.184359697265627,11.089594765625,29.752609697265626,10.388614765625,29.752609697265626C9.687637765625,29.752609697265626,9.119384765625,29.184359697265627,9.119384765625,28.483379697265626Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(0,-1,1,0,-12.269241333007812,22.269241333007812)" style="opacity:0.699999988079071;"><path d="M5,21.076931333007813L5,18.538471333007813C5,17.83749433300781,5.568253,17.269241333007812,6.26923,17.269241333007812C6.97021,17.269241333007812,7.538460000000001,17.83749433300781,7.538460000000001,18.538471333007813L7.538460000000001,21.076931333007813C7.538460000000001,21.777911333007815,6.97021,22.346161333007814,6.26923,22.346161333007814C5.568253,22.346161333007814,5,21.777911333007815,5,21.076931333007813Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(0.7071066498756409,-0.70710688829422,0.70710688829422,0.7071066498756409,-4.303046450104375,7.850115344526785)" style="opacity:0.8500000238418579;"><path d="M7.32440185546875,12.926983212890626L7.32440185546875,10.388523212890625C7.32440185546875,9.687546212890625,7.89265485546875,9.119293212890625,8.59363185546875,9.119293212890625C9.29461185546875,9.119293212890625,9.86286185546875,9.687546212890625,9.86286185546875,10.388523212890625L9.86286185546875,12.926983212890626C9.86286185546875,13.627963212890625,9.29461185546875,14.196213212890626,8.59363185546875,14.196213212890626C7.89265485546875,14.196213212890626,7.32440185546875,13.627963212890625,7.32440185546875,12.926983212890626Z" fill="${color}" fill-opacity="1"/></g></g></svg>`
+      )
+    }
+  }
+});

package/packages/loading/index.wxml

@@ -0,0 +1,17 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="custom-class {{ utils.bem('loading', { vertical }) }}">
+  <view
+    class="smart-loading__spinner smart-loading__spinner--{{ type }}"
+    style="{{ computed.loadingStyle({ size, type, color, spinner, circular }) }}"
+  >
+    <view
+      class="smart-switch__loading"
+      style="{{ computed.loadingStyle({ size, type, color, spinner, circular }) }}" 
+    />
+  </view>
+  <view class="smart-loading__text" style="{{ computed.textStyle({ textSize, color }) }}">
+    <slot />
+  </view>
+</view>

package/packages/loading/index.wxs

@@ -0,0 +1,38 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function textStyle(data) {
+  const ret = style({
+    'font-size': addUnit(data.textSize),
+    color: data.color,
+  });
+
+  return ret;
+}
+
+function loadingStyle(data) {
+  let iconSrc = ''
+
+  if (data.type === 'spinner') {
+    iconSrc = data.spinner
+  }
+
+  if (data.type === 'circular') {
+    iconSrc = data.circular
+  }
+
+  var ret = style({
+    'background-image': "url('".concat(iconSrc, "')"),
+    width: addUnit(data.size),
+    height: addUnit(data.size),
+    'background-size': addUnit(data.size)
+  });
+
+  return ret;
+}
+
+module.exports = {
+  textStyle: textStyle,
+  loadingStyle: loadingStyle,
+};

package/packages/loading/test/__snapshots__/demo.spec.ts.snap

@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block smart-clearfix demo-block--padding"
+    >
+      <smart-loading
+        customClass="demo-loading"
+      >
+        <wx-view
+          class="custom-class smart-loading"
+        >
+          <wx-view
+            class="smart-loading__spinner smart-loading__spinner--circular"
+            style=""
+          >
+            <wx-view
+              class="smart-switch__loading"
+              style=""
+            />
+          </wx-view>
+          <wx-view
+            class="smart-loading__text"
+            style=""
+          />
+        </wx-view>
+      </smart-loading>
+      <smart-loading
+        customClass="demo-loading"
+      >
+        <wx-view
+          class="custom-class smart-loading"
+        >
+          <wx-view
+            class="smart-loading__spinner smart-loading__spinner--spinner"
+            style=""
+          >
+            <wx-view
+              class="smart-switch__loading"
+              style=""
+            />
+          </wx-view>
+          <wx-view
+            class="smart-loading__text"
+            style=""
+          />
+        </wx-view>
+      </smart-loading>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block smart-clearfix demo-block--padding"
+    >
+      <smart-loading
+        customClass="demo-loading"
+      >
+        <wx-view
+          class="custom-class smart-loading"
+        >
+          <wx-view
+            class="smart-loading__spinner smart-loading__spinner--spinner"
+            style=""
+          >
+            <wx-view
+              class="smart-switch__loading"
+              style=""
+            />
+          </wx-view>
+          <wx-view
+            class="smart-loading__text"
+            style=""
+          />
+        </wx-view>
+      </smart-loading>
+      <smart-loading
+        customClass="demo-loading"
+      >
+        <wx-view
+          class="custom-class smart-loading"
+        >
+          <wx-view
+            class="smart-loading__spinner smart-loading__spinner--circular"
+            style=""
+          >
+            <wx-view
+              class="smart-switch__loading"
+              style=""
+            />
+          </wx-view>
+          <wx-view
+            class="smart-loading__text"
+            style=""
+          />
+        </wx-view>
+      </smart-loading>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block smart-clearfix demo-block--padding"
+    >
+      <smart-loading
+        customClass="demo-loading"
+      >
+        <wx-view
+          class="custom-class smart-loading"
+        >
+          <wx-view
+            class="smart-loading__spinner smart-loading__spinner--spinner"
+            style=""
+          >
+            <wx-view
+              class="smart-switch__loading"
+              style=""
+            />
+          </wx-view>
+          <wx-view
+            class="smart-loading__text"
+            style=""
+          >
+            ...
+          </wx-view>
+        </wx-view>
+      </smart-loading>
+      <smart-loading
+        customClass="demo-loading"
+      >
+        <wx-view
+          class="custom-class smart-loading"
+        >
+          <wx-view
+            class="smart-loading__spinner smart-loading__spinner--circular"
+            style=""
+          >
+            <wx-view
+              class="smart-switch__loading"
+              style=""
+            />
+          </wx-view>
+          <wx-view
+            class="smart-loading__text"
+            style=""
+          >
+            ...
+          </wx-view>
+        </wx-view>
+      </smart-loading>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block smart-clearfix demo-block--padding"
+    >
+      <smart-loading
+        customClass="demo-loading"
+      >
+        <wx-view
+          class="custom-class smart-loading smart-loading--vertical"
+        >
+          <wx-view
+            class="smart-loading__spinner smart-loading__spinner--spinner"
+            style=""
+          >
+            <wx-view
+              class="smart-switch__loading"
+              style=""
+            />
+          </wx-view>
+          <wx-view
+            class="smart-loading__text"
+            style=""
+          >
+            ...
+          </wx-view>
+        </wx-view>
+      </smart-loading>
+    </wx-view>
+  </demo-block>
+</main>
+`;

package/packages/loading/test/demo.spec.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});