@tuya-miniapp/smart-ui 2.7.1-beta-13 → 2.7.2-beta-0

package/lib/grid/index.json

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

package/lib/grid/index.wxml

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

package/lib/grid/index.wxs

@@ -0,0 +1,13 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style({
+    'padding-left': addUnit(data.gutter),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/lib/grid/index.wxss

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

package/lib/grid-item/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-grid-item{box-sizing:border-box;float:left;position:relative}.smart-grid-item--square{height:0}.smart-grid-item__content{background-color:var(--grid-item-content-background-color,var(--app-B3,#fff));box-sizing:border-box;display:flex;flex-direction:column;height:100%;padding:var(--grid-item-content-padding,16px 8px)}.smart-grid-item__content:after{border-width:0 1px 1px 0;z-index:1}.smart-grid-item__content--surround:after{border-width:1px}.smart-grid-item__content--center{align-items:center;justify-content:center}.smart-grid-item__content--square{left:0;position:absolute;right:0;top:0}.smart-grid-item__content--horizontal{flex-direction:row}.smart-grid-item__content--horizontal .smart-grid-item__text{margin:0 0 0 8px}.smart-grid-item__content--reverse{flex-direction:column-reverse}.smart-grid-item__content--reverse .smart-grid-item__text{margin:0 0 8px}.smart-grid-item__content--horizontal.smart-grid-item__content--reverse{flex-direction:row-reverse}.smart-grid-item__content--horizontal.smart-grid-item__content--reverse .smart-grid-item__text{margin:0 8px 0 0}.smart-grid-item__content--clickable:active{background-color:var(--grid-item-content-active-color,#f2f3f5)}.smart-grid-item__icon{align-items:center;display:flex;font-size:var(--grid-item-icon-size,26px);height:var(--grid-item-icon-size,26px)}.smart-grid-item__text{word-wrap:break-word;color:var(--grid-item-text-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--grid-item-text-font-size,12px)}.smart-grid-item__icon+.smart-grid-item__text{margin-top:8px}

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

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

package/lib/grid-item/index.js

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

package/lib/grid-item/index.json

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

package/lib/grid-item/index.wxml

@@ -0,0 +1,27 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('grid-item', { square }) }}"
+  style="{{ computed.wrapperStyle({ square, gutter, columnNum, index }) }}"
+  bindtap="onClick"
+>
+  <view
+    class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, reverse, clickable, surround: border && gutter }]) }} {{ border ? 'smart-hairline--surround' : '' }}"
+    style="{{ computed.contentStyle({ square, gutter }) }}"
+  >
+    <block wx:if="{{ useSlot }}">
+      <slot />
+    </block>
+    <block wx:else>
+      <view class="smart-grid-item__icon icon-class">
+        <smart-icon wx:if="{{ icon }}" name="{{ icon }}" color="{{ iconColor }}" class-prefix="{{ iconPrefix }}" dot="{{ dot }}" info="{{ badge || info }}" size="{{ iconSize }}" />
+        <slot wx:else name="icon"></slot>
+      </view>
+      <view class="smart-grid-item__text text-class">
+        <text wx:if="{{ text }}">{{ text }}</text>
+        <slot wx:else name="text"></slot>
+      </view>
+    </block>
+  </view>
+</view>

package/lib/grid-item/index.wxs

@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function wrapperStyle(data) {
+  var width = 100 / data.columnNum + '%';
+
+  return style({
+    width: width,
+    'padding-top': data.square ? width : null,
+    'padding-right': addUnit(data.gutter),
+    'margin-top':
+      data.index >= data.columnNum && !data.square
+        ? addUnit(data.gutter)
+        : null,
+  });
+}
+
+function contentStyle(data) {
+  return data.square
+    ? style({
+        right: addUnit(data.gutter),
+        bottom: addUnit(data.gutter),
+        height: 'auto',
+      })
+    : '';
+}
+
+module.exports = {
+  wrapperStyle: wrapperStyle,
+  contentStyle: contentStyle,
+};

package/lib/grid-item/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-grid-item{box-sizing:border-box;float:left;position:relative}.smart-grid-item--square{height:0}.smart-grid-item__content{background-color:var(--grid-item-content-background-color,var(--app-B3,#fff));box-sizing:border-box;display:flex;flex-direction:column;height:100%;padding:var(--grid-item-content-padding,16px 8px)}.smart-grid-item__content:after{border-width:0 1px 1px 0;z-index:1}.smart-grid-item__content--surround:after{border-width:1px}.smart-grid-item__content--center{align-items:center;justify-content:center}.smart-grid-item__content--square{left:0;position:absolute;right:0;top:0}.smart-grid-item__content--horizontal{flex-direction:row}.smart-grid-item__content--horizontal .smart-grid-item__text{margin:0 0 0 8px}.smart-grid-item__content--reverse{flex-direction:column-reverse}.smart-grid-item__content--reverse .smart-grid-item__text{margin:0 0 8px}.smart-grid-item__content--horizontal.smart-grid-item__content--reverse{flex-direction:row-reverse}.smart-grid-item__content--horizontal.smart-grid-item__content--reverse .smart-grid-item__text{margin:0 8px 0 0}.smart-grid-item__content--clickable:active{background-color:var(--grid-item-content-active-color,#f2f3f5)}.smart-grid-item__icon{align-items:center;display:flex;font-size:var(--grid-item-icon-size,26px);height:var(--grid-item-icon-size,26px)}.smart-grid-item__text{word-wrap:break-word;color:var(--grid-item-text-color,var(--app-B6-N2,rgba(0,0,0,.7)));font-size:var(--grid-item-text-font-size,12px)}.smart-grid-item__icon+.smart-grid-item__text{margin-top:8px}

package/lib/icon/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}: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,23 @@
+"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,
+    },
+    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,30 @@
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="{{ computed.rootClass({ classPrefix, name }) }}"
+  style="{{ computed.rootStyle({ customStyle, color, size }) }}"
+  bindtap="onClick"
+>
+  <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,98 @@
+/* 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',
+      'mask-image': imageBase64Src,
+      'mask-size': 'contain',
+      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',
+      'mask-image': imageBase64Src,
+      'mask-size': 'contain',
+      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-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}: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/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}: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 = 'mask-image: url(' + url + ');-webkit-mask-image: url(' + url + ');background: ' + color + ';'
+  return str
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  mode: mode,
+  defaultErrorImg: defaultErrorImg,
+  maskStyle: maskStyle
+};

package/lib/image/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}: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/index-anchor/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-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)}.smart-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/lib/index-anchor/index.d.ts

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

package/lib/index-anchor/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../common/utils");
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+(0, component_1.SmartComponent)({
+    relation: (0, relation_1.useParent)('index-bar'),
+    props: {
+        useSlot: Boolean,
+        index: null,
+    },
+    data: {
+        active: false,
+        wrapperStyle: '',
+        anchorStyle: '',
+    },
+    methods: {
+        scrollIntoView: function (scrollTop) {
+            var _this = this;
+            (0, utils_1.getRect)(this, '.smart-index-anchor-wrapper').then(function (rect) {
+                wx.pageScrollTo({
+                    duration: 0,
+                    scrollTop: scrollTop + rect.top - _this.parent.data.stickyOffsetTop,
+                });
+            });
+        },
+    },
+});

package/lib/index-anchor/index.json

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

package/lib/index-anchor/index.wxml

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

package/lib/index-anchor/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-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)}.smart-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/lib/index-bar/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-index-bar{position:relative}.smart-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}.smart-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/lib/index-bar/index.d.ts

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