@tuya-miniapp/smart-ui 2.7.2-beta-11 → 2.7.2-beta-13

package/dist/stepper/index.js

@@ -0,0 +1,206 @@
+import { SmartComponent } from '../common/component';
+import { isDef } from '../common/validator';
+import ty from '../common/ty';
+import Minus from '@tuya-miniapp/icons/dist/svg/Minus';
+import Plus from '@tuya-miniapp/icons/dist/svg/Plus';
+const LONG_PRESS_START_TIME = 600;
+const LONG_PRESS_INTERVAL = 200;
+// add num and avoid float number
+function add(num1, num2) {
+    const cardinal = Math.pow(10, 10);
+    return Math.round((num1 + num2) * cardinal) / cardinal;
+}
+function equal(value1, value2) {
+    return String(value1) === String(value2);
+}
+SmartComponent({
+    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: '',
+        Minus,
+        Plus,
+        isInit: false,
+    },
+    watch: {
+        value() {
+            this.observeValue();
+        },
+    },
+    created() {
+        const currentValue = this.format(this.data.value, true);
+        if (currentValue !== this.data.value) {
+            this.$emit('change', currentValue);
+        }
+        this.setData({
+            currentValue,
+            isInit: true,
+        });
+    },
+    methods: {
+        observeValue() {
+            const { value, isInit } = this.data;
+            if (!isInit)
+                return;
+            const currentValue = this.format(value, true);
+            if (currentValue !== value) {
+                this.$emit('change', currentValue);
+            }
+            this.setData({ currentValue });
+        },
+        check() {
+            const val = this.format(this.data.currentValue);
+            if (!equal(val, this.data.currentValue)) {
+                this.setData({ currentValue: val });
+            }
+        },
+        isDisabled(type) {
+            const { disabled, disablePlus, disableMinus, currentValue, max, min } = this.data;
+            if (type === 'plus') {
+                return disabled || disablePlus || +currentValue >= +max;
+            }
+            return disabled || disableMinus || +currentValue <= +min;
+        },
+        onFocus(event) {
+            this.$emit('focus', event.detail);
+        },
+        onBlur(event) {
+            const value = this.format(event.detail.value, true);
+            const stepValue = Math.round(value / this.data.step) * this.data.step;
+            const strStepValue = stepValue.toString();
+            this.setData({ currentValue: strStepValue });
+            this.emitChange(strStepValue);
+            this.$emit('blur', Object.assign(Object.assign({}, event.detail), { value: strStepValue }));
+        },
+        // filter illegal characters
+        filter(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(value, isFormatAll = false) {
+            value = this.filter(value);
+            // format range
+            value = value === '' ? 0 : +value;
+            value = Math.min(this.data.max, value);
+            if (isFormatAll) {
+                value = Math.max(value, this.data.min);
+            }
+            // format decimal
+            if (isDef(this.data.decimalLength) && isFormatAll) {
+                value = value.toFixed(this.data.decimalLength);
+            }
+            return value;
+        },
+        onInput(event) {
+            const { value = '' } = event.detail || {};
+            // allow input to be empty
+            if (value === '') {
+                return;
+            }
+            const formatted = this.format(value);
+            this.emitChange(formatted);
+        },
+        emitChange(value) {
+            if (!this.data.asyncChange) {
+                this.setData({ currentValue: value });
+            }
+            this.$emit('change', value);
+        },
+        onChange() {
+            const { type } = this;
+            if (this.isDisabled(type)) {
+                this.$emit('overlimit', type);
+                return;
+            }
+            const diff = type === 'minus' ? -this.data.step : +this.data.step;
+            const value = this.format(add(+this.data.currentValue, diff), true);
+            this.emitChange(value);
+            this.$emit(type);
+            ty.vibrateShort({ type: 'light' });
+        },
+        longPressStep() {
+            this.longPressTimer = setTimeout(() => {
+                this.onChange();
+                this.longPressStep();
+            }, LONG_PRESS_INTERVAL);
+        },
+        onTap(event) {
+            const { type } = event.currentTarget.dataset;
+            this.type = type;
+            this.onChange();
+        },
+        onTouchStart(event) {
+            if (!this.data.longPress) {
+                return;
+            }
+            clearTimeout(this.longPressTimer);
+            const { type } = event.currentTarget.dataset;
+            this.type = type;
+            this.isLongPress = false;
+            this.longPressTimer = setTimeout(() => {
+                this.isLongPress = true;
+                this.onChange();
+                this.longPressStep();
+            }, LONG_PRESS_START_TIME);
+        },
+        onTouchEnd() {
+            if (!this.data.longPress) {
+                return;
+            }
+            clearTimeout(this.longPressTimer);
+        },
+    },
+});

package/dist/stepper/index.json

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

package/dist/stepper/index.wxml

@@ -0,0 +1,45 @@
+<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: computed.checkMin({ min, currentValue, disabled, disableMinus }) }) }}"
+    hover-class="smart-stepper__minus--hover"
+    hover-stay-time="70"
+    bind:tap="onTap"
+    bind:touchstart="onTouchStart"
+    bind:touchend="onTouchEnd"
+  >
+    <slot name="minus" />
+    <smart-icon name="{{ Minus }}" class="{{ utils.bem('stepper__minus-icon') }}" />
+  </view>
+  <input
+    type="{{ integer ? 'number' : 'digit' }}"
+    class="smart-manrope 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: computed.checkMax({ max, currentValue, disabled, disablePlus }) }) }}"
+    hover-class="smart-stepper__plus--hover"
+    hover-stay-time="70"
+    bind:tap="onTap"
+    bind:touchstart="onTouchStart"
+    bind:touchend="onTouchEnd"
+  >
+    <slot name="plus" />
+    <smart-icon name="{{ Plus }}" class="{{ utils.bem('stepper__plus-icon') }}" />
+  </view>
+</view>

package/dist/stepper/index.wxs

@@ -0,0 +1,32 @@
+/* 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),
+  });
+}
+
+function checkMin(data) {
+  return data.currentValue <= Number(data.min) || data.disabled || data.disableMinus
+}
+
+function checkMax(data) {
+  return data.currentValue >= Number(data.max) || data.disabled || data.disablePlus
+}
+
+module.exports = {
+  buttonStyle: buttonStyle,
+  inputStyle: inputStyle,
+  checkMin: checkMin,
+  checkMax: checkMax,
+};

package/dist/stepper/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--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-manrope{font-family:Manrope,sans-serif}.smart-stepper{background:var(--stepper-container-background-color,var(--app-B6-N9,rgba(0,0,0,.05)));border-radius:var(--stepper-background-border-radius,10px);display:inline-block;font-size:0;padding:var(--stepper-padding,2px)}.smart-stepper__minus,.smart-stepper__plus{--icon-color:currentColor;align-items:center;background-color:var(--stepper-background-color,var(--app-B6,#fff));border:var(--stepper-button-border,0);border-radius:var(--stepper-border-radius,8px);box-sizing:border-box;color:var(--stepper-button-icon-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:inline-flex;font-size:var(--stepper-button-icon-font-size,27px);height:var(--stepper-input-height,28px);justify-content:center;padding:var(--padding-base,4px);position:relative;vertical-align:middle;width:var(--stepper-input-height,44px)}.smart-stepper__minus-icon,.smart-stepper__plus-icon{display:none}.smart-stepper__minus>.smart-stepper__minus-icon:first-child,.smart-stepper__minus>.smart-stepper__plus-icon:first-child,.smart-stepper__plus>.smart-stepper__minus-icon:first-child,.smart-stepper__plus>.smart-stepper__plus-icon:first-child{display:inline-flex}.smart-stepper__minus--hover,.smart-stepper__plus--hover{background-color:var(--stepper-active-color,#e8e8e8)}.smart-stepper__minus--disabled,.smart-stepper__plus--disabled{color:var(--stepper-button-disabled-icon-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-stepper__minus--disabled,.smart-stepper__minus--disabled.smart-stepper__minus--hover,.smart-stepper__minus--disabled.smart-stepper__plus--hover,.smart-stepper__plus--disabled,.smart-stepper__plus--disabled.smart-stepper__minus--hover,.smart-stepper__plus--disabled.smart-stepper__plus--hover{background-color:var(--stepper-button-disabled-color,var(--app-B6,#fff))}.smart-stepper--round .smart-stepper__input{background-color:initial!important}.smart-stepper--round .smart-stepper__minus,.smart-stepper--round .smart-stepper__plus{border-radius:100%}.smart-stepper--round .smart-stepper__minus:active,.smart-stepper--round .smart-stepper__plus:active{opacity:.7}.smart-stepper--round .smart-stepper__minus--disabled,.smart-stepper--round .smart-stepper__minus--disabled:active,.smart-stepper--round .smart-stepper__plus--disabled,.smart-stepper--round .smart-stepper__plus--disabled:active{opacity:.3}.smart-stepper--round .smart-stepper__plus{background-color:var(--stepper-button-round-theme-color,#ee0a24);color:#fff}.smart-stepper--round .smart-stepper__minus{background-color:#fff;border:1px solid var(--stepper-button-round-theme-color,#ee0a24);color:var(--stepper-button-round-theme-color,#ee0a24)}.smart-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-N1,#000));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)}.smart-stepper__input--disabled{color:var(--stepper-input-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}

package/dist/steps/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--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-manrope{font-family:Manrope,sans-serif}.smart-steps{background-color:var(--steps-background-color,var(--app-B3,#fff));overflow:hidden}.smart-steps--horizontal{padding:10px}.smart-steps--horizontal .smart-step__wrapper{display:flex;overflow:hidden;position:relative}.smart-steps--vertical{padding-left:10px}.smart-steps--vertical .smart-step__wrapper{padding:0 0 0 20px}.smart-step{color:var(--step-text-color,#969799);flex:1;font-size:var(--step-font-size,14px);position:relative}.smart-step--finish{color:var(--step-finish-text-color,#323233)}.smart-step__circle{background-color:var(--step-circle-color,#969799);border-radius:50%;height:var(--step-circle-size,5px);width:var(--step-circle-size,5px)}.smart-step--horizontal{padding-bottom:14px}.smart-step--horizontal:first-child .smart-step__title{transform:none}.smart-step--horizontal:first-child .smart-step__circle-container{padding:0 8px 0 0;transform:translate3d(0,50%,0)}.smart-step--horizontal:last-child{position:absolute;right:0;width:auto}.smart-step--horizontal:last-child .smart-step__title{text-align:right;transform:none}.smart-step--horizontal:last-child .smart-step__circle-container{padding:0 0 0 8px;right:0;transform:translate3d(0,50%,0)}.smart-step--horizontal .smart-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}.smart-step--horizontal .smart-step__title{display:inline-block;font-size:var(--step-horizontal-title-font-size,12px);transform:translate3d(-50%,0,0)}.smart-step--horizontal .smart-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)}.smart-step--horizontal.smart-step--process{color:var(--step-process-text-color,#323233)}.smart-step--horizontal.smart-step--process .smart-step__icon{display:block;font-size:var(--step-icon-size,12px);line-height:1}.smart-step--vertical{line-height:18px;padding:10px 10px 10px 0}.smart-step--vertical:after{border-bottom-width:1px}.smart-step--vertical:last-child:after{border-bottom-width:none}.smart-step--vertical:first-child:before{content:"";height:20px;left:-15px;position:absolute;top:0;width:1px;z-index:1}.smart-step--vertical .smart-step__circle,.smart-step--vertical .smart-step__icon,.smart-step--vertical .smart-step__line{left:-14px;position:absolute;top:19px;transform:translate3d(-50%,-50%,0);z-index:2}.smart-step--vertical .smart-step__icon{background-color:var(--steps-background-color,var(--app-B3,#fff));font-size:var(--step-icon-size,12px);line-height:1}.smart-step--vertical .smart-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/dist/steps/index.d.ts

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

package/dist/steps/index.js

@@ -0,0 +1,34 @@
+import Checkmark from '@tuya-miniapp/icons/dist/svg/Checkmark';
+import { SmartComponent } from '../common/component';
+import { GREEN, GRAY_DARK } from '../common/color';
+SmartComponent({
+    classes: ['desc-class'],
+    props: {
+        icon: String,
+        steps: Array,
+        active: Number,
+        direction: {
+            type: String,
+            value: 'horizontal',
+        },
+        activeColor: {
+            type: String,
+            value: GREEN,
+        },
+        inactiveColor: {
+            type: String,
+            value: GRAY_DARK,
+        },
+        activeIcon: {
+            type: String,
+            value: Checkmark,
+        },
+        inactiveIcon: String,
+    },
+    methods: {
+        onClick(event) {
+            const { index } = event.currentTarget.dataset;
+            this.$emit('click-step', index);
+        },
+    },
+});

package/dist/steps/index.json

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

package/dist/steps/index.wxml

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

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--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-manrope{font-family:Manrope,sans-serif}.smart-steps{background-color:var(--steps-background-color,var(--app-B3,#fff));overflow:hidden}.smart-steps--horizontal{padding:10px}.smart-steps--horizontal .smart-step__wrapper{display:flex;overflow:hidden;position:relative}.smart-steps--vertical{padding-left:10px}.smart-steps--vertical .smart-step__wrapper{padding:0 0 0 20px}.smart-step{color:var(--step-text-color,#969799);flex:1;font-size:var(--step-font-size,14px);position:relative}.smart-step--finish{color:var(--step-finish-text-color,#323233)}.smart-step__circle{background-color:var(--step-circle-color,#969799);border-radius:50%;height:var(--step-circle-size,5px);width:var(--step-circle-size,5px)}.smart-step--horizontal{padding-bottom:14px}.smart-step--horizontal:first-child .smart-step__title{transform:none}.smart-step--horizontal:first-child .smart-step__circle-container{padding:0 8px 0 0;transform:translate3d(0,50%,0)}.smart-step--horizontal:last-child{position:absolute;right:0;width:auto}.smart-step--horizontal:last-child .smart-step__title{text-align:right;transform:none}.smart-step--horizontal:last-child .smart-step__circle-container{padding:0 0 0 8px;right:0;transform:translate3d(0,50%,0)}.smart-step--horizontal .smart-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}.smart-step--horizontal .smart-step__title{display:inline-block;font-size:var(--step-horizontal-title-font-size,12px);transform:translate3d(-50%,0,0)}.smart-step--horizontal .smart-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)}.smart-step--horizontal.smart-step--process{color:var(--step-process-text-color,#323233)}.smart-step--horizontal.smart-step--process .smart-step__icon{display:block;font-size:var(--step-icon-size,12px);line-height:1}.smart-step--vertical{line-height:18px;padding:10px 10px 10px 0}.smart-step--vertical:after{border-bottom-width:1px}.smart-step--vertical:last-child:after{border-bottom-width:none}.smart-step--vertical:first-child:before{content:"";height:20px;left:-15px;position:absolute;top:0;width:1px;z-index:1}.smart-step--vertical .smart-step__circle,.smart-step--vertical .smart-step__icon,.smart-step--vertical .smart-step__line{left:-14px;position:absolute;top:19px;transform:translate3d(-50%,-50%,0);z-index:2}.smart-step--vertical .smart-step__icon{background-color:var(--steps-background-color,var(--app-B3,#fff));font-size:var(--step-icon-size,12px);line-height:1}.smart-step--vertical .smart-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/dist/sticky/index.css

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

package/dist/sticky/index.d.ts

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

package/dist/sticky/index.js

@@ -0,0 +1,120 @@
+import { getRect } from '../common/utils';
+import { SmartComponent } from '../common/component';
+import { isDef } from '../common/validator';
+import { pageScrollMixin } from '../mixins/page-scroll';
+const ROOT_ELEMENT = '.smart-sticky';
+SmartComponent({
+    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(val) {
+                this.onScroll({ scrollTop: val });
+            },
+        },
+    },
+    mixins: [
+        pageScrollMixin(function (event) {
+            if (this.data.scrollTop != null) {
+                return;
+            }
+            this.onScroll(event);
+        }),
+    ],
+    data: {
+        height: 0,
+        fixed: false,
+        transform: 0,
+    },
+    mounted() {
+        this.onScroll();
+    },
+    methods: {
+        onScroll({ scrollTop } = {}) {
+            const { container, offsetTop, disabled } = this.data;
+            if (disabled) {
+                this.setDataAfterDiff({
+                    fixed: false,
+                    transform: 0,
+                });
+                return;
+            }
+            this.scrollTop = scrollTop || this.scrollTop;
+            if (typeof container === 'function') {
+                Promise.all([getRect(this, ROOT_ELEMENT), this.getContainerRect()])
+                    .then(([root, container]) => {
+                    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(() => { });
+                return;
+            }
+            getRect(this, ROOT_ELEMENT).then(root => {
+                if (!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(data) {
+            wx.nextTick(() => {
+                const diff = Object.keys(data).reduce((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() {
+            const nodesRef = this.data.container();
+            if (!nodesRef) {
+                return Promise.reject(new Error('not found container'));
+            }
+            return new Promise(resolve => nodesRef.boundingClientRect(resolve).exec());
+        },
+    },
+});

package/dist/sticky/index.json

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

package/dist/sticky/index.wxml

@@ -0,0 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="custom-class smart-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/dist/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/dist/sticky/index.wxss

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

package/dist/swipe-cell/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--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-manrope{font-family:Manrope,sans-serif}.smart-swipe-cell{overflow:hidden;position:relative}.smart-swipe-cell__left,.smart-swipe-cell__right{height:100%;position:absolute;top:0}.smart-swipe-cell__left{left:0;transform:translate3d(-100%,0,0)}.smart-swipe-cell__right{right:0;transform:translate3d(100%,0,0)}

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

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