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

package/lib/stepper/index.js

@@ -0,0 +1,198 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var validator_1 = require("../common/validator");
+var LONG_PRESS_START_TIME = 600;
+var LONG_PRESS_INTERVAL = 200;
+// add num and avoid float number
+function add(num1, num2) {
+    var cardinal = Math.pow(10, 10);
+    return Math.round((num1 + num2) * cardinal) / cardinal;
+}
+function equal(value1, value2) {
+    return String(value1) === String(value2);
+}
+(0, component_1.VantComponent)({
+    field: true,
+    classes: ['input-class', 'plus-class', 'minus-class'],
+    props: {
+        value: {
+            type: null,
+        },
+        integer: {
+            type: Boolean,
+            observer: 'check',
+        },
+        disabled: Boolean,
+        inputWidth: String,
+        buttonSize: String,
+        asyncChange: Boolean,
+        disableInput: Boolean,
+        decimalLength: {
+            type: Number,
+            value: null,
+            observer: 'check',
+        },
+        min: {
+            type: null,
+            value: 1,
+            observer: 'check',
+        },
+        max: {
+            type: null,
+            value: Number.MAX_SAFE_INTEGER,
+            observer: 'check',
+        },
+        step: {
+            type: null,
+            value: 1,
+        },
+        showPlus: {
+            type: Boolean,
+            value: true,
+        },
+        showMinus: {
+            type: Boolean,
+            value: true,
+        },
+        disablePlus: Boolean,
+        disableMinus: Boolean,
+        longPress: {
+            type: Boolean,
+            value: true,
+        },
+        theme: String,
+        alwaysEmbed: Boolean,
+    },
+    data: {
+        currentValue: '',
+    },
+    watch: {
+        value: function () {
+            this.observeValue();
+        },
+    },
+    created: function () {
+        this.setData({
+            currentValue: this.format(this.data.value),
+        });
+    },
+    methods: {
+        observeValue: function () {
+            var value = this.data.value;
+            this.setData({ currentValue: this.format(value) });
+        },
+        check: function () {
+            var val = this.format(this.data.currentValue);
+            if (!equal(val, this.data.currentValue)) {
+                this.setData({ currentValue: val });
+            }
+        },
+        isDisabled: function (type) {
+            var _a = this.data, disabled = _a.disabled, disablePlus = _a.disablePlus, disableMinus = _a.disableMinus, currentValue = _a.currentValue, max = _a.max, min = _a.min;
+            if (type === 'plus') {
+                return disabled || disablePlus || +currentValue >= +max;
+            }
+            return disabled || disableMinus || +currentValue <= +min;
+        },
+        onFocus: function (event) {
+            this.$emit('focus', event.detail);
+        },
+        onBlur: function (event) {
+            var value = this.format(event.detail.value);
+            this.setData({ currentValue: value });
+            this.emitChange(value);
+            this.$emit('blur', __assign(__assign({}, event.detail), { value: value }));
+        },
+        // filter illegal characters
+        filter: function (value) {
+            value = String(value).replace(/[^0-9.-]/g, '');
+            if (this.data.integer && value.indexOf('.') !== -1) {
+                value = value.split('.')[0];
+            }
+            return value;
+        },
+        // limit value range
+        format: function (value) {
+            value = this.filter(value);
+            // format range
+            value = value === '' ? 0 : +value;
+            value = Math.max(Math.min(this.data.max, value), this.data.min);
+            // format decimal
+            if ((0, validator_1.isDef)(this.data.decimalLength)) {
+                value = value.toFixed(this.data.decimalLength);
+            }
+            return value;
+        },
+        onInput: function (event) {
+            var _a = (event.detail || {}).value, value = _a === void 0 ? '' : _a;
+            // allow input to be empty
+            if (value === '') {
+                return;
+            }
+            var formatted = this.format(value);
+            this.emitChange(formatted);
+        },
+        emitChange: function (value) {
+            if (!this.data.asyncChange) {
+                this.setData({ currentValue: value });
+            }
+            this.$emit('change', value);
+        },
+        onChange: function () {
+            var type = this.type;
+            if (this.isDisabled(type)) {
+                this.$emit('overlimit', type);
+                return;
+            }
+            var diff = type === 'minus' ? -this.data.step : +this.data.step;
+            var value = this.format(add(+this.data.currentValue, diff));
+            this.emitChange(value);
+            this.$emit(type);
+        },
+        longPressStep: function () {
+            var _this = this;
+            this.longPressTimer = setTimeout(function () {
+                _this.onChange();
+                _this.longPressStep();
+            }, LONG_PRESS_INTERVAL);
+        },
+        onTap: function (event) {
+            var type = event.currentTarget.dataset.type;
+            this.type = type;
+            this.onChange();
+        },
+        onTouchStart: function (event) {
+            var _this = this;
+            if (!this.data.longPress) {
+                return;
+            }
+            clearTimeout(this.longPressTimer);
+            var type = event.currentTarget.dataset.type;
+            this.type = type;
+            this.isLongPress = false;
+            this.longPressTimer = setTimeout(function () {
+                _this.isLongPress = true;
+                _this.onChange();
+                _this.longPressStep();
+            }, LONG_PRESS_START_TIME);
+        },
+        onTouchEnd: function () {
+            if (!this.data.longPress) {
+                return;
+            }
+            clearTimeout(this.longPressTimer);
+        },
+    },
+});

package/lib/stepper/index.json

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

package/lib/stepper/index.wxml

@@ -0,0 +1,43 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="{{ utils.bem('stepper', [theme]) }} custom-class">
+  <view
+    wx:if="{{ showMinus }}"
+    data-type="minus"
+    style="{{ computed.buttonStyle({ buttonSize }) }}"
+    class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || disableMinus || currentValue <= min }) }}"
+    hover-class="van-stepper__minus--hover"
+    hover-stay-time="70"
+    bind:tap="onTap"
+    bind:touchstart="onTouchStart"
+    bind:touchend="onTouchEnd"
+  >
+    <slot name="minus" />
+  </view>
+  <input
+    type="{{ integer ? 'number' : 'digit' }}"
+    class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
+    style="{{ computed.inputStyle({ buttonSize, inputWidth }) }}"
+    value="{{ currentValue }}"
+    focus="{{ focus }}"
+    disabled="{{ disabled || disableInput }}"
+    always-embed="{{ alwaysEmbed }}"
+    bindinput="onInput"
+    bind:focus="onFocus"
+    bind:blur="onBlur"
+  />
+  <view
+    wx:if="{{ showPlus }}"
+    data-type="plus"
+    style="{{ computed.buttonStyle({ buttonSize }) }}"
+    class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || disablePlus || currentValue >= max }) }}"
+    hover-class="van-stepper__plus--hover"
+    hover-stay-time="70"
+    bind:tap="onTap"
+    bind:touchstart="onTouchStart"
+    bind:touchend="onTouchEnd"
+  >
+    <slot name="plus" />
+  </view>
+</view>

package/lib/stepper/index.wxs

@@ -0,0 +1,22 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function buttonStyle(data) {
+  return style({
+    width: addUnit(data.buttonSize),
+    height: addUnit(data.buttonSize),
+  });
+}
+
+function inputStyle(data) {
+  return style({
+    width: addUnit(data.inputWidth),
+    height: addUnit(data.buttonSize),
+  });
+}
+
+module.exports = {
+  buttonStyle: buttonStyle,
+  inputStyle: inputStyle,
+};

package/lib/stepper/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--stepper-container-background-color:rgba(0,0,0,.05)}:root[theme=dark]{--stepper-container-background-color:hsla(0,0%,100%,.05)}.van-stepper{background:var(--stepper-container-background-color);border-radius:var(--stepper-background-border-radius,10px);display:inline-block;font-size:0;padding:var(--stepper-padding,2px)}.van-stepper__minus,.van-stepper__plus{background-color:var(--stepper-background-color,var(--app-B6,#fff));border:0;box-sizing:border-box;color:var(--stepper-button-icon-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:inline-block;height:var(--stepper-input-height,28px);padding:var(--padding-base,4px);position:relative;vertical-align:middle;width:var(--stepper-input-height,44px)}.van-stepper__minus:before,.van-stepper__plus:before{border-radius:2px;height:2px;width:14px}.van-stepper__minus:after,.van-stepper__plus:after{border-radius:2px;height:14px;width:2px}.van-stepper__minus:empty.van-stepper__minus:after,.van-stepper__minus:empty.van-stepper__minus:before,.van-stepper__minus:empty.van-stepper__plus:after,.van-stepper__minus:empty.van-stepper__plus:before,.van-stepper__plus:empty.van-stepper__minus:after,.van-stepper__plus:empty.van-stepper__minus:before,.van-stepper__plus:empty.van-stepper__plus:after,.van-stepper__plus:empty.van-stepper__plus:before{background-color:currentColor;bottom:0;content:"";left:0;margin:auto;position:absolute;right:0;top:0}.van-stepper__minus--hover,.van-stepper__plus--hover{background-color:var(--stepper-active-color,#e8e8e8)}.van-stepper__minus--disabled,.van-stepper__plus--disabled{background-color:var(--stepper-button-disabled-color,none);color:var(--stepper-button-disabled-icon-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.van-stepper__minus--disabled.van-stepper__minus--hover,.van-stepper__minus--disabled.van-stepper__plus--hover,.van-stepper__plus--disabled.van-stepper__minus--hover,.van-stepper__plus--disabled.van-stepper__plus--hover{background-color:var(--stepper-button-disabled-color,none)}.van-stepper__minus{border-radius:var(--stepper-border-radius,var(--stepper-border-radius,8px))}.van-stepper__minus:after{display:none}.van-stepper__plus{border-radius:var(--stepper-border-radius,var(--stepper-border-radius,8px))}.van-stepper--round .van-stepper__input{background-color:initial!important}.van-stepper--round .van-stepper__minus,.van-stepper--round .van-stepper__plus{border-radius:100%}.van-stepper--round .van-stepper__minus:active,.van-stepper--round .van-stepper__plus:active{opacity:.7}.van-stepper--round .van-stepper__minus--disabled,.van-stepper--round .van-stepper__minus--disabled:active,.van-stepper--round .van-stepper__plus--disabled,.van-stepper--round .van-stepper__plus--disabled:active{opacity:.3}.van-stepper--round .van-stepper__plus{background-color:#ee0a24;color:#fff}.van-stepper--round .van-stepper__minus{background-color:#fff;border:1px solid #ee0a24;color:#ee0a24}.van-stepper__input{-webkit-appearance:none;border:0;border-radius:0;border-width:1px 0;box-sizing:border-box;color:var(--stepper-input-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:inline-block;font-size:var(--stepper-input-font-size,16px);height:var(--stepper-input-height,28px);min-height:0;padding:1px;text-align:center;vertical-align:middle;width:var(--stepper-input-width,50px)}.van-stepper__input--disabled{color:var(--stepper-input-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}

package/lib/steps/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-steps{background-color:var(--steps-background-color,var(--app-B3,#fff));overflow:hidden}.van-steps--horizontal{padding:10px}.van-steps--horizontal .van-step__wrapper{display:flex;overflow:hidden;position:relative}.van-steps--vertical{padding-left:10px}.van-steps--vertical .van-step__wrapper{padding:0 0 0 20px}.van-step{color:var(--step-text-color,#969799);flex:1;font-size:var(--step-font-size,14px);position:relative}.van-step--finish{color:var(--step-finish-text-color,#323233)}.van-step__circle{background-color:var(--step-circle-color,#969799);border-radius:50%;height:var(--step-circle-size,5px);width:var(--step-circle-size,5px)}.van-step--horizontal{padding-bottom:14px}.van-step--horizontal:first-child .van-step__title{transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;transform:translate3d(0,50%,0)}.van-step--horizontal:last-child{position:absolute;right:0;width:auto}.van-step--horizontal:last-child .van-step__title{text-align:right;transform:none}.van-step--horizontal:last-child .van-step__circle-container{padding:0 0 0 8px;right:0;transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{background-color:var(--app-B3);bottom:6px;padding:0 var(--padding-xs,8px);position:absolute;transform:translate3d(-50%,50%,0);z-index:1}.van-step--horizontal .van-step__title{display:inline-block;font-size:var(--step-horizontal-title-font-size,12px);transform:translate3d(-50%,0,0)}.van-step--horizontal .van-step__line{background-color:var(--step-line-color,var(--app-B6-N7,rgba(0,0,0,.1)));bottom:6px;height:1px;left:0;position:absolute;right:0;transform:translate3d(0,50%,0)}.van-step--horizontal.van-step--process{color:var(--step-process-text-color,#323233)}.van-step--horizontal.van-step--process .van-step__icon{display:block;font-size:var(--step-icon-size,12px);line-height:1}.van-step--vertical{line-height:18px;padding:10px 10px 10px 0}.van-step--vertical:after{border-bottom-width:1px}.van-step--vertical:last-child:after{border-bottom-width:none}.van-step--vertical:first-child:before{content:"";height:20px;left:-15px;position:absolute;top:0;width:1px;z-index:1}.van-step--vertical .van-step__circle,.van-step--vertical .van-step__icon,.van-step--vertical .van-step__line{left:-14px;position:absolute;top:19px;transform:translate3d(-50%,-50%,0);z-index:2}.van-step--vertical .van-step__icon{background-color:var(--steps-background-color,var(--app-B3,#fff));font-size:var(--step-icon-size,12px);line-height:1}.van-step--vertical .van-step__line{background-color:var(--step-line-color,var(--app-B6-N7,rgba(0,0,0,.1)));height:100%;transform:translate3d(-50%,0,0);width:1px;z-index:1}

package/lib/steps/index.d.ts

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

package/lib/steps/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var icons_1 = require("@tuya-miniapp/icons");
+var component_1 = require("../common/component");
+var color_1 = require("../common/color");
+(0, component_1.VantComponent)({
+    classes: ['desc-class'],
+    props: {
+        icon: String,
+        steps: Array,
+        active: Number,
+        direction: {
+            type: String,
+            value: 'horizontal',
+        },
+        activeColor: {
+            type: String,
+            value: color_1.GREEN,
+        },
+        inactiveColor: {
+            type: String,
+            value: color_1.GRAY_DARK,
+        },
+        activeIcon: {
+            type: String,
+            value: icons_1.Checkmark,
+        },
+        inactiveIcon: String,
+    },
+    methods: {
+        onClick: function (event) {
+            var index = event.currentTarget.dataset.index;
+            this.$emit('click-step', index);
+        },
+    },
+});

package/lib/steps/index.json

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

package/lib/steps/index.wxml

@@ -0,0 +1,54 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="custom-class {{ utils.bem('steps', [direction]) }}">
+  <view class="van-step__wrapper">
+    <view
+      wx:for="{{ steps }}"
+      wx:key="index"
+      bindtap="onClick"
+      data-index="{{ index }}"
+      class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
+      style="{{ status(index, active) === 'inactive' ? 'color: ' + inactiveColor: '' }}"
+    >
+      <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
+        <view>{{ item.text }}</view>
+        <view class="desc-class">{{ item.desc }}</view>
+      </view>
+      <view class="van-step__circle-container">
+        <block wx:if="{{ index !== active }}">
+          <van-icon
+            wx:if="{{ item.inactiveIcon || inactiveIcon }}"
+            color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}"
+            name="{{ item.inactiveIcon || inactiveIcon }}"
+            class="van-step__icon"
+          />
+          <view
+            wx:else
+            class="van-step__circle"
+            style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
+          />
+        </block>
+
+        <van-icon wx:else name="{{ item.activeIcon || activeIcon }}" color="{{ activeColor }}" class="van-step__icon" />
+      </view>
+      <view
+        wx:if="{{ index !== steps.length - 1 }}"
+        class="van-step__line" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
+      />
+    </view>
+  </view>
+</view>
+
+<wxs module="status">
+function get(index, active) {
+  if (index < active) {
+    return 'finish';
+  } else if (index === active) {
+    return 'process';
+  }
+
+  return 'inactive';
+}
+
+module.exports = get;
+</wxs>

package/lib/steps/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-steps{background-color:var(--steps-background-color,var(--app-B3,#fff));overflow:hidden}.van-steps--horizontal{padding:10px}.van-steps--horizontal .van-step__wrapper{display:flex;overflow:hidden;position:relative}.van-steps--vertical{padding-left:10px}.van-steps--vertical .van-step__wrapper{padding:0 0 0 20px}.van-step{color:var(--step-text-color,#969799);flex:1;font-size:var(--step-font-size,14px);position:relative}.van-step--finish{color:var(--step-finish-text-color,#323233)}.van-step__circle{background-color:var(--step-circle-color,#969799);border-radius:50%;height:var(--step-circle-size,5px);width:var(--step-circle-size,5px)}.van-step--horizontal{padding-bottom:14px}.van-step--horizontal:first-child .van-step__title{transform:none}.van-step--horizontal:first-child .van-step__circle-container{padding:0 8px 0 0;transform:translate3d(0,50%,0)}.van-step--horizontal:last-child{position:absolute;right:0;width:auto}.van-step--horizontal:last-child .van-step__title{text-align:right;transform:none}.van-step--horizontal:last-child .van-step__circle-container{padding:0 0 0 8px;right:0;transform:translate3d(0,50%,0)}.van-step--horizontal .van-step__circle-container{background-color:var(--app-B3);bottom:6px;padding:0 var(--padding-xs,8px);position:absolute;transform:translate3d(-50%,50%,0);z-index:1}.van-step--horizontal .van-step__title{display:inline-block;font-size:var(--step-horizontal-title-font-size,12px);transform:translate3d(-50%,0,0)}.van-step--horizontal .van-step__line{background-color:var(--step-line-color,var(--app-B6-N7,rgba(0,0,0,.1)));bottom:6px;height:1px;left:0;position:absolute;right:0;transform:translate3d(0,50%,0)}.van-step--horizontal.van-step--process{color:var(--step-process-text-color,#323233)}.van-step--horizontal.van-step--process .van-step__icon{display:block;font-size:var(--step-icon-size,12px);line-height:1}.van-step--vertical{line-height:18px;padding:10px 10px 10px 0}.van-step--vertical:after{border-bottom-width:1px}.van-step--vertical:last-child:after{border-bottom-width:none}.van-step--vertical:first-child:before{content:"";height:20px;left:-15px;position:absolute;top:0;width:1px;z-index:1}.van-step--vertical .van-step__circle,.van-step--vertical .van-step__icon,.van-step--vertical .van-step__line{left:-14px;position:absolute;top:19px;transform:translate3d(-50%,-50%,0);z-index:2}.van-step--vertical .van-step__icon{background-color:var(--steps-background-color,var(--app-B3,#fff));font-size:var(--step-icon-size,12px);line-height:1}.van-step--vertical .van-step__line{background-color:var(--step-line-color,var(--app-B6-N7,rgba(0,0,0,.1)));height:100%;transform:translate3d(-50%,0,0);width:1px;z-index:1}

package/lib/sticky/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-sticky{position:relative}.van-sticky-wrap--fixed{left:0;position:fixed;right:0}

package/lib/sticky/index.d.ts

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

package/lib/sticky/index.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../common/utils");
+var component_1 = require("../common/component");
+var validator_1 = require("../common/validator");
+var page_scroll_1 = require("../mixins/page-scroll");
+var ROOT_ELEMENT = '.van-sticky';
+(0, component_1.VantComponent)({
+    props: {
+        zIndex: {
+            type: Number,
+            value: 99,
+        },
+        offsetTop: {
+            type: Number,
+            value: 0,
+            observer: 'onScroll',
+        },
+        disabled: {
+            type: Boolean,
+            observer: 'onScroll',
+        },
+        container: {
+            type: null,
+            observer: 'onScroll',
+        },
+        scrollTop: {
+            type: null,
+            observer: function (val) {
+                this.onScroll({ scrollTop: val });
+            },
+        },
+    },
+    mixins: [
+        (0, page_scroll_1.pageScrollMixin)(function (event) {
+            if (this.data.scrollTop != null) {
+                return;
+            }
+            this.onScroll(event);
+        }),
+    ],
+    data: {
+        height: 0,
+        fixed: false,
+        transform: 0,
+    },
+    mounted: function () {
+        this.onScroll();
+    },
+    methods: {
+        onScroll: function (_a) {
+            var _this = this;
+            var _b = _a === void 0 ? {} : _a, scrollTop = _b.scrollTop;
+            var _c = this.data, container = _c.container, offsetTop = _c.offsetTop, disabled = _c.disabled;
+            if (disabled) {
+                this.setDataAfterDiff({
+                    fixed: false,
+                    transform: 0,
+                });
+                return;
+            }
+            this.scrollTop = scrollTop || this.scrollTop;
+            if (typeof container === 'function') {
+                Promise.all([(0, utils_1.getRect)(this, ROOT_ELEMENT), this.getContainerRect()])
+                    .then(function (_a) {
+                    var root = _a[0], container = _a[1];
+                    if (offsetTop + root.height > container.height + container.top) {
+                        _this.setDataAfterDiff({
+                            fixed: false,
+                            transform: container.height - root.height,
+                        });
+                    }
+                    else if (offsetTop >= root.top) {
+                        _this.setDataAfterDiff({
+                            fixed: true,
+                            height: root.height,
+                            transform: 0,
+                        });
+                    }
+                    else {
+                        _this.setDataAfterDiff({ fixed: false, transform: 0 });
+                    }
+                })
+                    .catch(function () { });
+                return;
+            }
+            (0, utils_1.getRect)(this, ROOT_ELEMENT).then(function (root) {
+                if (!(0, validator_1.isDef)(root) || (!root.width && !root.height)) {
+                    return;
+                }
+                if (offsetTop >= root.top) {
+                    _this.setDataAfterDiff({ fixed: true, height: root.height });
+                    _this.transform = 0;
+                }
+                else {
+                    _this.setDataAfterDiff({ fixed: false });
+                }
+            });
+        },
+        setDataAfterDiff: function (data) {
+            var _this = this;
+            wx.nextTick(function () {
+                var diff = Object.keys(data).reduce(function (prev, key) {
+                    if (data[key] !== _this.data[key]) {
+                        prev[key] = data[key];
+                    }
+                    return prev;
+                }, {});
+                if (Object.keys(diff).length > 0) {
+                    _this.setData(diff);
+                }
+                _this.$emit('scroll', {
+                    scrollTop: _this.scrollTop,
+                    isFixed: data.fixed || _this.data.fixed,
+                });
+            });
+        },
+        getContainerRect: function () {
+            var nodesRef = this.data.container();
+            if (!nodesRef) {
+                return Promise.reject(new Error('not found container'));
+            }
+            return new Promise(function (resolve) { return nodesRef.boundingClientRect(resolve).exec(); });
+        },
+    },
+});

package/lib/sticky/index.json

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

package/lib/sticky/index.wxml

@@ -0,0 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="custom-class van-sticky" style="{{ computed.containerStyle({ fixed, height, zIndex }) }}">
+  <view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ computed.wrapStyle({ fixed, offsetTop, transform, zIndex }) }}">
+    <slot />
+  </view>
+</view>

package/lib/sticky/index.wxs

@@ -0,0 +1,25 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function wrapStyle(data) {
+  return style({
+    transform: data.transform
+      ? 'translate3d(0, ' + data.transform + 'px, 0)'
+      : '',
+    top: data.fixed ? addUnit(data.offsetTop) : '',
+    'z-index': data.zIndex,
+  });
+}
+
+function containerStyle(data) {
+  return style({
+    height: data.fixed ? addUnit(data.height) : '',
+    'z-index': data.zIndex,
+  });
+}
+
+module.exports = {
+  wrapStyle: wrapStyle,
+  containerStyle: containerStyle,
+};

package/lib/sticky/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-sticky{position:relative}.van-sticky-wrap--fixed{left:0;position:fixed;right:0}

package/lib/swipe-cell/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.van-swipe-cell{overflow:hidden;position:relative}.van-swipe-cell__left,.van-swipe-cell__right{height:100%;position:absolute;top:0}.van-swipe-cell__left{left:0;transform:translate3d(-100%,0,0)}.van-swipe-cell__right{right:0;transform:translate3d(100%,0,0)}

package/lib/swipe-cell/index.d.ts

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