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

package/dist/icon/index.wxs

@@ -0,0 +1,75 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function isImage(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 !== 'van-icon') {
+    classes.push('van-icon--custom')
+  }
+
+  if (data.classPrefix != null) {
+    classes.push(data.classPrefix);
+  }
+
+  if (isImage(data.name)) {
+    classes.push('van-icon--image');
+    if (isSvg(data.name)) classes.push('van-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) {
+  const imageBase64Src = `url(${getImageSrc(data)})`;
+  // console.log('imageBase64Src', imageBase64Src)
+  const ret = style([
+    {
+      '-webkit-mask-image': imageBase64Src,
+      '-webkit-mask-size': 'contain',
+      'mask-image': imageBase64Src,
+      'mask-size': 'contain',
+      width: data.size,
+      height: data.size,
+      background: data.color,
+    },
+  ]);
+  return ret;
+}
+
+module.exports = {
+  isImage: isImage,
+  isSvg: isSvg,
+  getImageSrc: getImageSrc,
+  rootClass: rootClass,
+  rootStyle: rootStyle,
+  svgStyle: svgStyle,
+};

package/dist/icon/index.wxss

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

package/dist/image/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-image{display:inline-block;position:relative}.van-image--round{border-radius:50%;overflow:hidden}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;height:100%;width:100%}.van-image__error,.van-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}.van-image__loading-icon{color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.van-image__error-icon{color:var(--image-error-icon-color,#dcdee0);font-size:var(--image-error-icon-size,32px)!important}

package/dist/image/index.d.ts

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

package/dist/image/index.js

@@ -0,0 +1,64 @@
+import { VantComponent } from '../common/component';
+import { button } from '../mixins/button';
+VantComponent({
+    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,
+        },
+    },
+    data: {
+        error: false,
+        loading: true,
+        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/dist/image/index.json

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

package/dist/image/index.wxml

@@ -0,0 +1,35 @@
+<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 }}"
+    webp="{{ webp }}"
+    class="image-class van-image__img"
+    show-menu-by-longpress="{{ showMenuByLongpress }}"
+    bind:load="onLoad"
+    bind:error="onError"
+  />
+
+  <view
+    wx:if="{{ loading && showLoading }}"
+    class="loading-class van-image__loading"
+  >
+    <slot wx:if="{{ useLoadingSlot }}" name="loading" />
+    <van-icon wx:else name="photo" custom-class="van-image__loading-icon" />
+  </view>
+  <view
+    wx:if="{{ error && showError }}"
+    class="error-class van-image__error"
+  >
+    <slot wx:if="{{ useErrorSlot }}" name="error" />
+    <van-icon wx:else name="photo-fail" custom-class="van-image__error-icon" />
+  </view>
+</view>

package/dist/image/index.wxs

@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+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];
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  mode: mode,
+};

package/dist/image/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-image{display:inline-block;position:relative}.van-image--round{border-radius:50%;overflow:hidden}.van-image--round .van-image__img{border-radius:inherit}.van-image__error,.van-image__img,.van-image__loading{display:block;height:100%;width:100%}.van-image__error,.van-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}.van-image__loading-icon{color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.van-image__error-icon{color:var(--image-error-icon-color,#dcdee0);font-size:var(--image-error-icon-size,32px)!important}

package/dist/index-anchor/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-index-anchor{background-color:var(--index-anchor-background-color,transparent);color:var(--index-anchor-text-color,var(--app-B6-N1,#000));font-size:var(--index-anchor-font-size,14px);font-weight:var(--index-anchor-font-weight,500);line-height:var(--index-anchor-line-height,32px);padding:var(--index-anchor-padding,0 16px)}.van-index-anchor--active{background-color:var(--index-anchor-active-background-color,var(--app-B3,#fff));color:var(--index-anchor-active-text-color,var(--app-M1,#3678e3));left:0;right:0}

package/dist/index-anchor/index.d.ts

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

package/dist/index-anchor/index.js

@@ -0,0 +1,25 @@
+import { getRect } from '../common/utils';
+import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
+VantComponent({
+    relation: useParent('index-bar'),
+    props: {
+        useSlot: Boolean,
+        index: null,
+    },
+    data: {
+        active: false,
+        wrapperStyle: '',
+        anchorStyle: '',
+    },
+    methods: {
+        scrollIntoView(scrollTop) {
+            getRect(this, '.van-index-anchor-wrapper').then((rect) => {
+                wx.pageScrollTo({
+                    duration: 0,
+                    scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop,
+                });
+            });
+        },
+    },
+});

package/dist/index-anchor/index.json

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

package/dist/index-anchor/index.wxml

@@ -0,0 +1,14 @@
+<view
+  class="van-index-anchor-wrapper"
+  style="{{ wrapperStyle }}"
+>
+  <view
+    class="van-index-anchor {{ active ? 'van-index-anchor--active van-hairline--bottom' : '' }}"
+    style="{{ anchorStyle }}"
+  >
+    <slot wx:if="{{ useSlot }}"/>
+    <block wx:else>
+      <text>{{ index }}</text>
+    </block>
+  </view>
+</view>

package/dist/index-anchor/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-index-anchor{background-color:var(--index-anchor-background-color,transparent);color:var(--index-anchor-text-color,var(--app-B6-N1,#000));font-size:var(--index-anchor-font-size,14px);font-weight:var(--index-anchor-font-weight,500);line-height:var(--index-anchor-line-height,32px);padding:var(--index-anchor-padding,0 16px)}.van-index-anchor--active{background-color:var(--index-anchor-active-background-color,var(--app-B3,#fff));color:var(--index-anchor-active-text-color,var(--app-M1,#3678e3));left:0;right:0}

package/dist/index-bar/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-index-bar{position:relative}.van-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.van-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,14px);padding:0 var(--padding-base,4px) 0 var(--padding-md,16px)}

package/dist/index-bar/index.d.ts

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

package/dist/index-bar/index.js

@@ -0,0 +1,246 @@
+import { GREEN } from '../common/color';
+import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+import { getRect, isDef } from '../common/utils';
+import { pageScrollMixin } from '../mixins/page-scroll';
+const indexList = () => {
+    const indexList = [];
+    const charCodeOfA = 'A'.charCodeAt(0);
+    for (let i = 0; i < 26; i++) {
+        indexList.push(String.fromCharCode(charCodeOfA + i));
+    }
+    return indexList;
+};
+VantComponent({
+    relation: useChildren('index-anchor', function () {
+        this.updateData();
+    }),
+    props: {
+        sticky: {
+            type: Boolean,
+            value: true,
+        },
+        zIndex: {
+            type: Number,
+            value: 1,
+        },
+        highlightColor: {
+            type: String,
+            value: GREEN,
+        },
+        stickyOffsetTop: {
+            type: Number,
+            value: 0,
+        },
+        indexList: {
+            type: Array,
+            value: indexList(),
+        },
+    },
+    mixins: [
+        pageScrollMixin(function (event) {
+            this.scrollTop = (event === null || event === void 0 ? void 0 : event.scrollTop) || 0;
+            this.onScroll();
+        }),
+    ],
+    data: {
+        activeAnchorIndex: null,
+        showSidebar: false,
+    },
+    created() {
+        this.scrollTop = 0;
+    },
+    methods: {
+        updateData() {
+            wx.nextTick(() => {
+                if (this.timer != null) {
+                    clearTimeout(this.timer);
+                }
+                this.timer = setTimeout(() => {
+                    this.setData({
+                        showSidebar: !!this.children.length,
+                    });
+                    this.setRect().then(() => {
+                        this.onScroll();
+                    });
+                }, 0);
+            });
+        },
+        setRect() {
+            return Promise.all([
+                this.setAnchorsRect(),
+                this.setListRect(),
+                this.setSiderbarRect(),
+            ]);
+        },
+        setAnchorsRect() {
+            return Promise.all(this.children.map((anchor) => getRect(anchor, '.van-index-anchor-wrapper').then((rect) => {
+                Object.assign(anchor, {
+                    height: rect.height,
+                    top: rect.top + this.scrollTop,
+                });
+            })));
+        },
+        setListRect() {
+            return getRect(this, '.van-index-bar').then((rect) => {
+                if (!isDef(rect)) {
+                    return;
+                }
+                Object.assign(this, {
+                    height: rect.height,
+                    top: rect.top + this.scrollTop,
+                });
+            });
+        },
+        setSiderbarRect() {
+            return getRect(this, '.van-index-bar__sidebar').then((res) => {
+                if (!isDef(res)) {
+                    return;
+                }
+                this.sidebar = {
+                    height: res.height,
+                    top: res.top,
+                };
+            });
+        },
+        setDiffData({ target, data }) {
+            const diffData = {};
+            Object.keys(data).forEach((key) => {
+                if (target.data[key] !== data[key]) {
+                    diffData[key] = data[key];
+                }
+            });
+            if (Object.keys(diffData).length) {
+                target.setData(diffData);
+            }
+        },
+        getAnchorRect(anchor) {
+            return getRect(anchor, '.van-index-anchor-wrapper').then((rect) => ({
+                height: rect.height,
+                top: rect.top,
+            }));
+        },
+        getActiveAnchorIndex() {
+            const { children, scrollTop } = this;
+            const { sticky, stickyOffsetTop } = this.data;
+            for (let i = this.children.length - 1; i >= 0; i--) {
+                const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
+                const reachTop = sticky ? preAnchorHeight + stickyOffsetTop : 0;
+                if (reachTop + scrollTop >= children[i].top) {
+                    return i;
+                }
+            }
+            return -1;
+        },
+        onScroll() {
+            const { children = [], scrollTop } = this;
+            if (!children.length) {
+                return;
+            }
+            const { sticky, stickyOffsetTop, zIndex, highlightColor } = this.data;
+            const active = this.getActiveAnchorIndex();
+            this.setDiffData({
+                target: this,
+                data: {
+                    activeAnchorIndex: active,
+                },
+            });
+            if (sticky) {
+                let isActiveAnchorSticky = false;
+                if (active !== -1) {
+                    isActiveAnchorSticky =
+                        children[active].top <= stickyOffsetTop + scrollTop;
+                }
+                children.forEach((item, index) => {
+                    if (index === active) {
+                        let wrapperStyle = '';
+                        let anchorStyle = `
+              color: ${highlightColor};
+            `;
+                        if (isActiveAnchorSticky) {
+                            wrapperStyle = `
+                height: ${children[index].height}px;
+              `;
+                            anchorStyle = `
+                position: fixed;
+                top: ${stickyOffsetTop}px;
+                z-index: ${zIndex};
+                color: ${highlightColor};
+              `;
+                        }
+                        this.setDiffData({
+                            target: item,
+                            data: {
+                                active: true,
+                                anchorStyle,
+                                wrapperStyle,
+                            },
+                        });
+                    }
+                    else if (index === active - 1) {
+                        const currentAnchor = children[index];
+                        const currentOffsetTop = currentAnchor.top;
+                        const targetOffsetTop = index === children.length - 1
+                            ? this.top
+                            : children[index + 1].top;
+                        const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
+                        const translateY = parentOffsetHeight - currentAnchor.height;
+                        const anchorStyle = `
+              position: relative;
+              transform: translate3d(0, ${translateY}px, 0);
+              z-index: ${zIndex};
+              color: ${highlightColor};
+            `;
+                        this.setDiffData({
+                            target: item,
+                            data: {
+                                active: true,
+                                anchorStyle,
+                            },
+                        });
+                    }
+                    else {
+                        this.setDiffData({
+                            target: item,
+                            data: {
+                                active: false,
+                                anchorStyle: '',
+                                wrapperStyle: '',
+                            },
+                        });
+                    }
+                });
+            }
+        },
+        onClick(event) {
+            this.scrollToAnchor(event.target.dataset.index);
+        },
+        onTouchMove(event) {
+            const sidebarLength = this.children.length;
+            const touch = event.touches[0];
+            const itemHeight = this.sidebar.height / sidebarLength;
+            let index = Math.floor((touch.clientY - this.sidebar.top) / itemHeight);
+            if (index < 0) {
+                index = 0;
+            }
+            else if (index > sidebarLength - 1) {
+                index = sidebarLength - 1;
+            }
+            this.scrollToAnchor(index);
+        },
+        onTouchStop() {
+            this.scrollToAnchorIndex = null;
+        },
+        scrollToAnchor(index) {
+            if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
+                return;
+            }
+            this.scrollToAnchorIndex = index;
+            const anchor = this.children.find((item) => item.data.index === this.data.indexList[index]);
+            if (anchor) {
+                anchor.scrollIntoView(this.scrollTop);
+                this.$emit('select', anchor.data.index);
+            }
+        },
+    },
+});

package/dist/index-bar/index.json

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

package/dist/index-bar/index.wxml

@@ -0,0 +1,22 @@
+<view class="van-index-bar">
+  <slot />
+
+  <view
+    wx:if="{{ showSidebar }}"
+    class="van-index-bar__sidebar"
+    catch:tap="onClick"
+    catch:touchmove="onTouchMove"
+    catch:touchend="onTouchStop"
+    catch:touchcancel="onTouchStop"
+  >
+    <view
+      wx:for="{{ indexList }}"
+      wx:key="index"
+      class="van-index-bar__index"
+      style="z-index: {{ zIndex + 1 }}; color: {{ activeAnchorIndex === index ? highlightColor : '' }}"
+      data-index="{{ index }}"
+    >
+      {{ item }}
+    </view>
+  </view>
+</view>

package/dist/index-bar/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-index-bar{position:relative}.van-index-bar__sidebar{display:flex;flex-direction:column;position:fixed;right:0;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none}.van-index-bar__index{font-size:var(--index-bar-index-font-size,10px);font-weight:500;line-height:var(--index-bar-index-line-height,14px);padding:0 var(--padding-base,4px) 0 var(--padding-md,16px)}

package/dist/info/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-info{align-items:center;background-color:var(--info-background-color,var(--app-M2,#f04c4c));border:var(--info-border-width,0) solid #fff;border-radius:var(--info-size,12px);box-sizing:border-box;color:var(--info-color,#fff);display:inline-flex;font-family:var(--info-font-family,-apple-system-font,PingFang SC,Helvetica Neue,Arial,sans-serif);font-size:var(--info-font-size,11px);font-weight:var(--info-font-weight,600);height:var(--info-size,12px);justify-content:center;min-width:var(--info-size,12px);padding:var(--info-padding,0 4px);position:absolute;right:0;top:0;transform:translate(50%,-50%);transform-origin:100%;white-space:nowrap}.van-info--dot{background-color:var(--info-dot-color,var(--app-M2,#f04c4c));border-radius:100%;height:var(--info-dot-size,8px);min-width:0;width:var(--info-dot-size,8px)}

package/dist/info/index.d.ts

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

package/dist/info/index.js

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

package/dist/info/index.json

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

package/dist/info/index.wxml

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

package/dist/info/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-info{align-items:center;background-color:var(--info-background-color,var(--app-M2,#f04c4c));border:var(--info-border-width,0) solid #fff;border-radius:var(--info-size,12px);box-sizing:border-box;color:var(--info-color,#fff);display:inline-flex;font-family:var(--info-font-family,-apple-system-font,PingFang SC,Helvetica Neue,Arial,sans-serif);font-size:var(--info-font-size,11px);font-weight:var(--info-font-weight,600);height:var(--info-size,12px);justify-content:center;min-width:var(--info-size,12px);padding:var(--info-padding,0 4px);position:absolute;right:0;top:0;transform:translate(50%,-50%);transform-origin:100%;white-space:nowrap}.van-info--dot{background-color:var(--info-dot-color,var(--app-M2,#f04c4c));border-radius:100%;height:var(--info-dot-size,8px);min-width:0;width:var(--info-dot-size,8px)}

package/dist/loading/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:host{font-size:0;line-height:1}.van-loading{align-items:center;color:var(--loading-spinner-color,#c8c9cc);display:inline-flex;justify-content:center}.van-loading__spinner{animation:van-rotate var(--loading-spinner-animation-duration,.8s) linear infinite;box-sizing:border-box;height:var(--loading-spinner-size,30px);max-height:100%;max-width:100%;position:relative;width:var(--loading-spinner-size,30px)}.van-loading__spinner--spinner{animation-timing-function:steps(12)}.van-loading__spinner--circular{border:1px solid transparent;border-radius:100%;border-top-color:initial}.van-loading__text{color:var(--loading-text-color,#969799);font-size:var(--loading-text-font-size,14px);line-height:var(--loading-text-line-height,20px);margin-left:var(--padding-xs,8px)}.van-loading__text:empty{display:none}.van-loading--vertical{flex-direction:column}.van-loading--vertical .van-loading__text{margin:var(--padding-xs,8px) 0 0}.van-loading__dot{height:100%;left:0;position:absolute;top:0;width:100%}.van-loading__dot:before{background-color:currentColor;border-radius:40%;content:" ";display:block;height:25%;margin:0 auto;width:2px}.van-loading__dot:first-of-type{opacity:1;transform:rotate(30deg)}.van-loading__dot:nth-of-type(2){opacity:.9375;transform:rotate(60deg)}.van-loading__dot:nth-of-type(3){opacity:.875;transform:rotate(90deg)}.van-loading__dot:nth-of-type(4){opacity:.8125;transform:rotate(120deg)}.van-loading__dot:nth-of-type(5){opacity:.75;transform:rotate(150deg)}.van-loading__dot:nth-of-type(6){opacity:.6875;transform:rotate(180deg)}.van-loading__dot:nth-of-type(7){opacity:.625;transform:rotate(210deg)}.van-loading__dot:nth-of-type(8){opacity:.5625;transform:rotate(240deg)}.van-loading__dot:nth-of-type(9){opacity:.5;transform:rotate(270deg)}.van-loading__dot:nth-of-type(10){opacity:.4375;transform:rotate(300deg)}.van-loading__dot:nth-of-type(11){opacity:.375;transform:rotate(330deg)}.van-loading__dot:nth-of-type(12){opacity:.3125;transform:rotate(1turn)}@keyframes van-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/dist/loading/index.d.ts

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

package/dist/loading/index.js

@@ -0,0 +1,16 @@
+import { VantComponent } from '../common/component';
+VantComponent({
+    props: {
+        color: String,
+        vertical: Boolean,
+        type: {
+            type: String,
+            value: 'circular',
+        },
+        size: String,
+        textSize: String,
+    },
+    data: {
+        array12: Array.from({ length: 12 }),
+    },
+});

package/dist/loading/index.json

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

package/dist/loading/index.wxml

@@ -0,0 +1,19 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="custom-class {{ utils.bem('loading', { vertical }) }}">
+  <view
+    class="van-loading__spinner van-loading__spinner--{{ type }}"
+    style="{{ computed.spinnerStyle({ color, size }) }}"
+  >
+    <view
+      wx:if="{{ type === 'spinner' }}"
+      wx:for="{{ array12 }}"
+      wx:key="index"
+      class="van-loading__dot"
+    />
+  </view>
+  <view class="van-loading__text" style="{{ computed.textStyle({ textSize }) }}">
+    <slot />
+  </view>
+</view>