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

package/lib/mixins/touch.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.touch = void 0;
+// @ts-nocheck
+var MIN_DISTANCE = 10;
+function getDirection(x, y) {
+    if (x > y && x > MIN_DISTANCE) {
+        return 'horizontal';
+    }
+    if (y > x && y > MIN_DISTANCE) {
+        return 'vertical';
+    }
+    return '';
+}
+exports.touch = Behavior({
+    methods: {
+        resetTouchStatus: function () {
+            this.direction = '';
+            this.deltaX = 0;
+            this.deltaY = 0;
+            this.offsetX = 0;
+            this.offsetY = 0;
+        },
+        touchStart: function (event) {
+            this.resetTouchStatus();
+            var touch = event.touches[0];
+            this.startX = touch.clientX;
+            this.startY = touch.clientY;
+        },
+        touchMove: function (event) {
+            var touch = event.touches[0];
+            this.deltaX = touch.clientX - this.startX;
+            this.deltaY = touch.clientY - this.startY;
+            this.offsetX = Math.abs(this.deltaX);
+            this.offsetY = Math.abs(this.deltaY);
+            this.direction = this.direction || getDirection(this.offsetX, this.offsetY);
+        },
+    },
+});

package/lib/mixins/transition.d.ts

@@ -0,0 +1 @@
+export declare function transition(showDefaultValue: boolean): string;

package/lib/mixins/transition.js

@@ -0,0 +1,235 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transition = void 0;
+// @ts-nocheck
+var utils_1 = require("../common/utils");
+var validator_1 = require("../common/validator");
+var ty_1 = __importDefault(require("../common/ty"));
+var getClassNames = function (name) { return ({
+    enter: "smart-".concat(name, "-enter smart-").concat(name, "-enter-active enter-class enter-active-class"),
+    'enter-to': "smart-".concat(name, "-enter-to smart-").concat(name, "-enter-active enter-to-class enter-active-class"),
+    leave: "smart-".concat(name, "-leave smart-").concat(name, "-leave-active leave-class leave-active-class"),
+    'leave-to': "smart-".concat(name, "-leave-to smart-").concat(name, "-leave-active leave-to-class leave-active-class"),
+}); };
+function transition(showDefaultValue) {
+    return Behavior({
+        properties: {
+            nativeDisabled: Boolean,
+            customStyle: String,
+            // @ts-ignore
+            show: {
+                type: Boolean,
+                value: showDefaultValue,
+                observer: 'observeShow',
+            },
+            // @ts-ignore
+            duration: {
+                type: null,
+                value: 300,
+            },
+            name: {
+                type: String,
+                value: 'fade',
+            },
+        },
+        data: {
+            type: '',
+            inited: false,
+            display: false,
+            animating: false,
+            status: '',
+        },
+        ready: function () {
+            if (this.data.show === true) {
+                this.observeShow(true, false);
+            }
+        },
+        methods: {
+            observeShow: function (value, old) {
+                if (value === old) {
+                    return;
+                }
+                value ? this.enter() : this.leave();
+            },
+            enter: function () {
+                var _this = this;
+                if (this.enterFinishedPromise || this.data.animating)
+                    return;
+                this.setData({
+                    animating: true,
+                    status: 'enter',
+                });
+                // eslint-disable-next-line no-async-promise-executor
+                this.enterFinishedPromise = new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
+                    var _a, duration, name, classNames, currentDuration;
+                    var _this = this;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = this.data, duration = _a.duration, name = _a.name;
+                                classNames = getClassNames(name);
+                                currentDuration = (0, validator_1.isObj)(duration) ? duration.enter : duration;
+                                if (this.data.nativeDisabled) {
+                                    ty_1.default.nativeDisabled(true);
+                                }
+                                this.$emit('before-enter');
+                                return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                            case 1:
+                                _b.sent();
+                                this.$emit('enter');
+                                this.setData({
+                                    inited: true,
+                                    display: true,
+                                    classes: classNames.enter,
+                                    currentDuration: currentDuration,
+                                });
+                                return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                            case 2:
+                                _b.sent();
+                                this.transitionEnded = false;
+                                this.setData({ classes: classNames['enter-to'] });
+                                clearTimeout(this.timer);
+                                this.timer = setTimeout(function () {
+                                    _this.$emit('after-enter');
+                                    _this.setData({
+                                        animating: false,
+                                    });
+                                    _this.checkShowStatus();
+                                }, currentDuration + 20);
+                                resolve();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+                this.enterFinishedPromise.catch(function (err) {
+                    _this.enterFinishedPromise = null;
+                    _this.setData({ animating: false });
+                    console.log(err, '---error-enter');
+                    _this.$emit('enter-error', err);
+                });
+            },
+            leave: function () {
+                return __awaiter(this, void 0, void 0, function () {
+                    var _this = this;
+                    return __generator(this, function (_a) {
+                        if (!this.enterFinishedPromise || this.data.animating)
+                            return [2 /*return*/];
+                        this.setData({
+                            animating: true,
+                            status: 'leave',
+                        });
+                        this.enterFinishedPromise
+                            .then(function () { return __awaiter(_this, void 0, void 0, function () {
+                            var _a, duration, name, classNames, currentDuration;
+                            var _this = this;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0:
+                                        _a = this.data, duration = _a.duration, name = _a.name;
+                                        classNames = getClassNames(name);
+                                        currentDuration = (0, validator_1.isObj)(duration) ? duration.leave : duration;
+                                        this.$emit('before-leave');
+                                        return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                                    case 1:
+                                        _b.sent();
+                                        this.$emit('leave');
+                                        this.setData({
+                                            classes: classNames.leave,
+                                            currentDuration: currentDuration,
+                                        });
+                                        return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                                    case 2:
+                                        _b.sent();
+                                        this.transitionEnded = false;
+                                        clearTimeout(this.timer);
+                                        setTimeout(function () {
+                                            _this.enterFinishedPromise = null;
+                                            if (_this.data.nativeDisabled) {
+                                                ty_1.default.nativeDisabled(false);
+                                            }
+                                            _this.$emit('after-leave');
+                                            _this.setData({
+                                                display: false,
+                                                animating: false,
+                                            });
+                                            _this.checkShowStatus();
+                                        }, currentDuration + 20);
+                                        this.setData({ classes: classNames['leave-to'] });
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })
+                            .catch(function (err) {
+                            _this.enterFinishedPromise = null;
+                            _this.setData({ animating: false });
+                            console.log(err, '---error-leave');
+                            _this.$emit('leave-error', err);
+                            if (_this.data.nativeDisabled) {
+                                ty_1.default.nativeDisabled(false);
+                            }
+                        });
+                        return [2 /*return*/];
+                    });
+                });
+            },
+            checkShowStatus: function () {
+                return __awaiter(this, void 0, void 0, function () {
+                    var _a, status, show;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = this.data, status = _a.status, show = _a.show;
+                                return [4 /*yield*/, (0, utils_1.requestAnimationFrame)()];
+                            case 1:
+                                _b.sent();
+                                if ((status === 'enter' && show) || (status === 'leave' && !show))
+                                    return [2 /*return*/];
+                                show ? this.enter() : this.leave();
+                                return [2 /*return*/];
+                        }
+                    });
+                });
+            },
+        },
+    });
+}
+exports.transition = transition;

package/lib/nav-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-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,98px)}.smart-nav-bar__left{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-title-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--text{padding-left:var(--nav-bar-text-padding,20px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse;padding-right:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));text-align:right}.smart-nav-bar__right--text{padding-right:var(--nav-bar-text-padding,20px)}

package/lib/nav-bar/index.d.ts

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

package/lib/nav-bar/index.js

@@ -0,0 +1,116 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Left_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Left"));
+var component_1 = require("../common/component");
+var utils_1 = require("../common/utils");
+(0, component_1.SmartComponent)({
+    classes: [
+        'title-class',
+        'right-text-class',
+        'left-icon-class',
+        'right-icon-class',
+        'left-text-class',
+    ],
+    props: {
+        title: String,
+        fixed: {
+            type: Boolean,
+            observer: 'setHeight',
+        },
+        placeholder: {
+            type: Boolean,
+            observer: 'setHeight',
+        },
+        background: String,
+        leftTextType: {
+            type: String,
+            value: 'back',
+        },
+        leftText: String,
+        leftIcon: String,
+        leftIconColor: String,
+        leftIconSize: {
+            type: null,
+            value: 32,
+        },
+        rightText: String,
+        rightTextColor: String,
+        rightIcon: String,
+        rightIconColor: String,
+        rightIconSize: {
+            type: null,
+            value: 32,
+        },
+        customStyle: String,
+        leftArrow: Boolean,
+        border: {
+            type: Boolean,
+            value: false,
+        },
+        round: {
+            type: Boolean,
+            value: false,
+        },
+        zIndex: {
+            type: Number,
+            value: 1,
+        },
+        safeAreaInsetTop: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        height: 46,
+        leftArrowIcon: Left_1.default,
+    },
+    created: function () {
+        var statusBarHeight = (0, utils_1.getSystemInfoSync)().statusBarHeight;
+        this.setData({
+            statusBarHeight: statusBarHeight,
+            height: 46 + statusBarHeight,
+        });
+    },
+    mounted: function () {
+        this.setHeight();
+    },
+    methods: {
+        onClickLeft: function () {
+            this.$emit('click-left');
+        },
+        onClickRight: function () {
+            this.$emit('click-right');
+        },
+        onClickTitle: function () {
+            this.$emit('click-title');
+        },
+        onClickRightIcon: function () {
+            this.$emit('click-right-icon');
+        },
+        onClickLeftIcon: function () {
+            this.$emit('click-left-icon');
+        },
+        onClickLeftText: function () {
+            this.$emit('click-left-text');
+        },
+        onClickRightText: function () {
+            this.$emit('click-right-text');
+        },
+        setHeight: function () {
+            var _this = this;
+            if (!this.data.fixed || !this.data.placeholder) {
+                return;
+            }
+            wx.nextTick(function () {
+                (0, utils_1.getRect)(_this, '.smart-nav-bar').then(function (res) {
+                    if (res && 'height' in res) {
+                        _this.setData({ height: res.height });
+                    }
+                });
+            });
+        },
+    },
+});

package/lib/nav-bar/index.json

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

package/lib/nav-bar/index.wxml

@@ -0,0 +1,70 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view wx:if="{{ fixed && placeholder }}" style="height: {{ height }}px;" />
+
+<view
+  class="{{ utils.bem('nav-bar', { fixed, round, safe: safeAreaInsetTop }) }} custom-class {{ border ? 'smart-hairline--bottom' : '' }}"
+  style="{{ computed.barStyle({ zIndex, statusBarHeight, safeAreaInsetTop, background }) }}; {{ customStyle }}"
+>
+  <view class="smart-nav-bar__content">
+    <view class="{{ utils.bem('nav-bar__left', { home: leftTextType === 'home', title: leftTextType === 'title', text: !!leftText, icon: leftArrow || leftIcon }) }}" bind:tap="onClickLeft">
+      <smart-icon
+        wx:if="{{ leftArrow }}"
+        size="24px"
+        hover-class="smart-nav-bar__icon--hover"
+        hover-stay-time="70"
+        name="{{ leftArrowIcon }}"
+        data-type="leftArrow"
+        custom-class="smart-nav-bar__arrow"
+      />
+      <view
+        wx:if="{{ leftIcon }}"
+        data-type="leftIcon"
+        hover-class="smart-nav-bar__icon--hover"
+        hover-stay-time="70"
+        class="smart-nav-bar__icon-wrap"
+        catch:tap="onClickLeftIcon"
+      >
+        <smart-icon class="left-icon-class" custom-class="smart-nav-bar__icon" size="{{ leftIconSize }}" name="{{ leftIcon }}" color="{{ leftIconColor }}" />
+      </view>
+      <view
+        wx:if="{{ leftText }}"
+        class="smart-nav-bar__text left-text-class"
+        catch:tap="onClickLeftText"
+        hover-class="{{ leftTextType === 'back' ? 'smart-nav-bar__text--hover' : '' }}"
+        hover-stay-time="70"
+      >
+        {{ leftText }}
+      </view>
+      <slot name="left" />
+    </view>
+    <view class="smart-nav-bar__title title-class smart-ellipsis" bind:tap="onClickTitle">
+      <block>{{ title }}</block>
+      <slot name="title" />
+    </view>
+    <view class="{{utils.bem('nav-bar__right', { text: !!rightText })}}" bind:tap="onClickRight">
+      <view
+        wx:if="{{ rightIcon }}"
+        data-type="rightIcon"
+        hover-class="smart-nav-bar__icon--hover"
+        hover-stay-time="70"
+        class="smart-nav-bar__icon-wrap"
+        bind:tap="onClickRightIcon"
+      >
+        <smart-icon class="right-icon-class" custom-class="smart-nav-bar__icon" size="{{ rightIconSize }}" name="{{ rightIcon }}" color="{{ rightIconColor }}" />
+      </view>
+      <view
+        wx:if="{{ rightText }}"
+        class="smart-nav-bar__text right-text-class"
+        style="color: {{ rightTextColor }};"
+        hover-class="smart-nav-bar__text--hover"
+        hover-stay-time="70"
+        bind:tap="onClickRightText"
+      >
+        {{ rightText }}
+      </view>
+      <slot name="right" />
+    </view>
+  </view>
+</view>

package/lib/nav-bar/index.wxs

@@ -0,0 +1,14 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function barStyle(data) {
+  return style({
+    'z-index': data.zIndex,
+    'padding-top': data.safeAreaInsetTop ? data.statusBarHeight + 'px' : 0,
+    background: data.background,
+  });
+}
+
+module.exports = {
+  barStyle: barStyle,
+};

package/lib/nav-bar/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-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,98px)}.smart-nav-bar__left{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-title-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--text{padding-left:var(--nav-bar-text-padding,20px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse;padding-right:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));text-align:right}.smart-nav-bar__right--text{padding-right:var(--nav-bar-text-padding,20px)}

package/lib/normal-slider/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))}.contain{--thumb-active-color:var(--app-B3,#fff)}

package/lib/normal-slider/index.d.ts

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

package/lib/normal-slider/index.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    props: {
+        className: {
+            type: String,
+            value: '',
+        },
+        disable: {
+            type: Boolean,
+            value: false,
+        },
+        // 右滑块初始值/单向滑条初始值
+        value: {
+            type: Number,
+            value: 0,
+        },
+        // 最小值
+        min: {
+            type: Number,
+            value: 0,
+        },
+        // 最大值
+        max: {
+            type: Number,
+            value: 100,
+        },
+        // 阶段值
+        step: {
+            type: Number,
+            value: 1,
+        },
+        // 滑块样式
+        thumbStyle: {
+            type: String,
+        },
+        thumbWrapStyle: {
+            type: null,
+        },
+        // 轨道样式
+        trackStyle: {
+            type: String,
+        },
+        // 滑条样式
+        barStyle: {
+            type: String,
+        },
+        // step样式
+        stepStyle: {
+            type: String,
+        },
+        // step样式
+        activeStepStyle: {
+            type: String,
+        },
+        // 方向 "horizontal" | "vertical"
+        direction: {
+            type: String,
+        },
+        // 隐藏滑块
+        hideThumb: {
+            type: Boolean,
+            value: false,
+        },
+        // 显示阶段提示
+        showSteps: {
+            type: Boolean,
+            value: false,
+        },
+        // 反转
+        reverse: {
+            type: Boolean,
+            value: false,
+        },
+        // 使用触摸跳跃
+        enableTouch: {
+            type: Boolean,
+            value: true,
+        },
+        // 使用触摸bar增加偏移
+        enableTouchBar: {
+            type: Boolean,
+            value: false,
+        },
+        // 唯一ID
+        instanceId: {
+            type: String,
+        },
+        // 在bar上显示文本
+        showText: {
+            type: Boolean,
+        },
+        // bar文本样式
+        textStyle: {
+            type: String,
+        },
+        // 文本格式化，例如 textTemplate="比率 {{text}} %"
+        textTemplate: {
+            type: String,
+        },
+        // 动态计算thumb样式，如 { background: "rgba(0,0,0, {{text}}/100)" }
+        thumbStyleCalc: {
+            type: null,
+        },
+        // 首次渲染时隐藏bar
+        hideBarOnFirstRender: {
+            type: Boolean,
+            value: false,
+        },
+        // 点击热区样式
+        hotAreaStyle: {
+            type: String,
+        },
+        hideThumbButton: {
+            type: Boolean,
+            value: false,
+        },
+        thumbStyleRenderFormatter: {
+            type: null,
+        },
+        thumbStyleRenderValueScale: {
+            type: Number,
+            value: 1,
+        },
+        thumbStyleRenderValueStart: {
+            type: Number,
+            value: 1,
+        },
+        thumbWidth: Number,
+        thumbHeight: Number,
+        thumbStyleRenderValueReverse: {
+            type: Boolean,
+            value: false,
+        },
+        hidden: Boolean,
+        parcel: {
+            type: Boolean,
+            value: false,
+        },
+        parcelThumbWidth: Number,
+        parcelThumbHeight: Number,
+        parcelMargin: {
+            type: Number,
+            value: 0,
+        },
+    },
+    created: function () { },
+    methods: {
+        bindend: function (event) {
+            this.triggerEvent('end', event === null || event === void 0 ? void 0 : event.detail);
+        },
+        bindmove: function (event) {
+            this.triggerEvent('change', event === null || event === void 0 ? void 0 : event.detail);
+        },
+        bindstart: function (event) {
+            this.triggerEvent('start', event === null || event === void 0 ? void 0 : event.detail);
+        },
+    },
+});