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

package/lib/popover/index.js

@@ -0,0 +1,224 @@
+"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 });
+/* eslint-disable prefer-destructuring */
+var component_1 = require("../common/component");
+var IconSrc = function () {
+    return "<svg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M 10 90 L 90 90 L 50 30 Z\" fill=\"currentColor\" stroke=\"purple\" stroke-width=\"1\"/>\n</svg>";
+};
+function createSvgIcon(svg) {
+    return "data:image/svg+xml,".concat(encodeURIComponent("<?xml version=\"1.0\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">".concat(svg)));
+}
+(0, component_1.SmartComponent)({
+    classes: [
+        'enter-class',
+        'enter-active-class',
+        'enter-to-class',
+        'leave-class',
+        'leave-active-class',
+        'leave-to-class',
+        'close-icon-class',
+    ],
+    props: {
+        // `top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom`
+        placement: {
+            type: String,
+            value: 'right',
+        },
+        show: {
+            type: Boolean,
+            observer: function (value) {
+                if (this.data.cancel_timer) {
+                    clearTimeout(this.data.cancel_timer);
+                    this.data.cancel_timer = null;
+                }
+                if (value !== this.data.currentShow) {
+                    if (value) {
+                        this.onOpen();
+                    }
+                    else {
+                        this.onClose();
+                    }
+                }
+            },
+        },
+        customStyle: {
+            type: String,
+            value: '',
+        },
+        trigger: {
+            type: String,
+            // tap | longpress
+            value: 'tap',
+        },
+        zIndex: {
+            type: Number,
+            value: 101,
+        },
+        duration: {
+            type: Number,
+            value: 3000,
+        },
+    },
+    data: { currentShow: false, showStyle: '', cancel_timer: null },
+    mounted: function () { },
+    created: function () { },
+    methods: {
+        getButtonPosition: function () {
+            var placement = this.data.placement;
+            var params = {
+                // left: rect.left,
+                // top: rect.top,
+                transform: '',
+                iconPos: '',
+                iconPosVal: 0,
+                iconSrc: createSvgIcon(IconSrc()),
+                iconRotate: '0deg',
+                iconWidth: '18px',
+                iconHeight: '6px',
+                iconStyle: '',
+            };
+            if (placement.startsWith('left')) {
+                var iconAlignPos = '';
+                var transform = 'translate(-100%,-50%)';
+                if (placement === 'leftTop') {
+                    iconAlignPos = 'top: calc(0% + 16px)';
+                    transform = 'translate(-100%, 0)';
+                    params.top = '0px';
+                    params.left = '-8px';
+                }
+                else if (placement === 'leftBottom') {
+                    iconAlignPos = 'bottom: calc(0% - 6px)';
+                    transform = 'translate(-100%, -100%)';
+                    params.left = '-9px';
+                }
+                else {
+                    transform = 'translate(-100%, -50%)';
+                    params.left = '-9px';
+                    params.top = '50%';
+                    iconAlignPos = 'top: 50%';
+                }
+                params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc()), iconStyle: "right:8px;transform:translate(100%, -50%) rotate(90deg);width:18px;height:18px;background-size: 18px 18px;".concat(iconAlignPos) });
+            }
+            if (placement.startsWith('top')) {
+                var iconAlignPos = '';
+                var transform = 'translate(-50%, -100%)';
+                if (placement === 'topLeft') {
+                    iconAlignPos = 'left: calc(0% + 16px);';
+                    transform = 'translate(calc(0% - 16px), -100%)';
+                    params.top = '-12px';
+                    params.left = '16px';
+                }
+                else if (placement === 'topRight') {
+                    iconAlignPos = 'left: calc(100% - 16px);';
+                    transform = 'translate(0, -100%)';
+                    params.top = '-12px';
+                    params.right = '2px';
+                }
+                else {
+                    iconAlignPos = 'left: 50%';
+                    transform = 'translate(-50%, -100%)';
+                    params.top = '-12px';
+                    params.left = '50%';
+                }
+                params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc()), iconRotate: '0deg', iconStyle: "bottom:0px;transform:translate(-50%, 100%) rotate(180deg);width:18px;height:6px;background-size: 18px 6px;".concat(iconAlignPos) });
+            }
+            if (placement.startsWith('right')) {
+                var iconAlignPos = '';
+                var transform = 'translateY(-50%)';
+                if (placement === 'rightTop') {
+                    iconAlignPos = 'top: calc(0% + 16px)';
+                    transform = "translate(0%,0)";
+                    params.left = 'calc(100% + 8px)';
+                    params.top = '2px';
+                }
+                else if (placement === 'rightBottom') {
+                    iconAlignPos = 'top: calc(100% - 12px)';
+                    transform = "translate(0%,0)";
+                    params.left = 'calc(100% + 8px)';
+                    params.bottom = '2px';
+                }
+                else {
+                    iconAlignPos = 'top: 50%';
+                    transform = "translate(0%, -50%)";
+                    params.left = 'calc(100% + 8px)';
+                    params.top = '50%';
+                }
+                params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc()), iconRotate: '90deg', iconStyle: "left:-10px;transform:translate(0%, -50%) rotate(-90deg);width:18px;height:18px;background-size: 18px 18px;".concat(iconAlignPos, ";") });
+            }
+            if (placement.startsWith('bottom')) {
+                var iconAlignPos = '';
+                var transform = 'translateX(-50%)';
+                if (placement === 'bottomLeft') {
+                    iconAlignPos = 'left: calc(0% + 16px);';
+                    transform = 'translate(calc(0% - 16px), 100%)';
+                    params.bottom = '-10px';
+                    params.left = '18px';
+                }
+                else if (placement === 'bottomRight') {
+                    iconAlignPos = 'left: calc(100% - 16px);';
+                    transform = 'translate(0, 100%)';
+                    params.bottom = '-10px';
+                    params.right = '2px';
+                }
+                else {
+                    iconAlignPos = 'left: 50%';
+                    transform = 'translate(-50%, 100%)';
+                    params.bottom = '-10px';
+                    params.left = '50%';
+                }
+                params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc()), iconRotate: '180deg', iconStyle: "top:0px;transform:translate(-50%, -100%) rotate(0deg);width:18px;height:6px;background-size: 18px 6px;".concat(iconAlignPos) });
+            }
+            this.setData(params);
+        },
+        onClick: function () {
+            this.onOpen();
+        },
+        noop: function () { },
+        onOpen: function () {
+            var _this = this;
+            this.getButtonPosition();
+            this.setData({
+                currentShow: true,
+            });
+            setTimeout(function () {
+                _this.setData({
+                    showStyle: 'opacity: 1;',
+                });
+            }, 100);
+            this.$emit('show-change', true);
+            if (this.data.duration) {
+                this.data.cancel_timer = setTimeout(function () {
+                    _this.onClose();
+                }, this.data.duration);
+            }
+        },
+        onClose: function () {
+            var _this = this;
+            if (this.data.cancel_timer) {
+                clearTimeout(this.data.cancel_timer);
+                this.data.cancel_timer = null;
+            }
+            this.setData({
+                showStyle: 'opacity: 0;',
+            });
+            setTimeout(function () {
+                _this.setData({
+                    currentShow: false,
+                });
+                _this.$emit('show-change', false);
+                _this.$emit('close', false);
+            }, 300);
+        },
+    },
+});

package/lib/popover/index.json

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

package/lib/popover/index.wxml

@@ -0,0 +1,31 @@
+<view class="smart-popover custom-class">
+
+  <smart-overlay
+    show="{{ currentShow }}"
+    z-index="{{ zIndex }}"
+    bind:click="onClose"
+    duration="{{ 1 }}"
+    close-on-click-overlay
+    bind:close="onClose"
+    z-index="{{zIndex}}"
+  >
+   
+  </smart-overlay>
+
+  <view wx:if="{{trigger === 'longpress'}}" class="smart-popover-button" catch:longpress="onClick">
+    <slot />
+    <view catch:tap="noop" wx:if="{{currentShow}}" class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}; {{showStyle}}">
+      <slot name="overlay" />
+      <smart-icon class="smart-popover-overlay-arrow" name="{{iconSrc}}" style=" transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></smart-icon>
+    </view>
+  </view>
+
+  <view wx:else class="smart-popover-button" catch:tap="onClick">
+    <slot />
+    <view catch:tap="noop" wx:if="{{currentShow}}" class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}; {{showStyle}}">
+      <slot name="overlay" />
+      <smart-icon class="smart-popover-overlay-arrow" name="{{iconSrc}}" style=" transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></smart-icon>
+    </view>
+  </view>
+
+</view>

package/lib/popover/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-popover{--overlay-background-color:transparent;--icon-color:var(--popover-background-color,var(--app-B4,#fff));position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));opacity:0;padding:var(--popover-padding,12px);position:absolute;transition:opacity .3s ease-in-out;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}

package/lib/popup/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-popup{-webkit-overflow-scrolling:touch;animation:ease both;background:var(--popup-background-color,var(--app-B4,#fff));box-sizing:border-box;max-height:100%;position:fixed;transition-timing-function:ease}.smart-popup--center{left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.smart-popup--center.smart-popup--round{border-radius:var(--popup-round-border-radius,16px);overflow:hidden}.smart-popup--top{left:0;top:0;width:100%}.smart-popup--top.smart-popup--round{border-radius:0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--right{right:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--right.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--bottom{bottom:0;left:0;width:100%}.smart-popup--bottom.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0;overflow:hidden}.smart-popup--left{left:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--left.smart-popup--round{border-radius:0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0;overflow:hidden}.smart-popup--bottom.smart-popup--safeTabBar,.smart-popup--top.smart-popup--safeTabBar{bottom:var(--tabbar-height,55px)}.smart-popup--safeTop{padding-top:env(safe-area-inset-top)}.smart-popup__close-icon{color:var(--popup-close-icon-color,#969799);font-size:var(--popup-close-icon-size,24px);position:absolute;z-index:var(--popup-close-icon-z-index,1)}.smart-popup__close-icon--top-left{left:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--top-right{right:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-left{bottom:var(--popup-close-icon-margin,12px);left:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-right{bottom:var(--popup-close-icon-margin,12px);right:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon:active{opacity:.6}.smart-scale-enter-active,.smart-scale-leave-active{transition-property:opacity,transform}.smart-scale-enter,.smart-scale-leave-to{opacity:0;transform:translate3d(-50%,-50%,0) scale(.7)}.smart-fade-enter-active,.smart-fade-leave-active{transition-property:opacity}.smart-fade-enter,.smart-fade-leave-to{opacity:0}.smart-center-enter-active,.smart-center-leave-active{transition-property:opacity}.smart-center-enter,.smart-center-leave-to{opacity:0}.smart-bottom-enter-active,.smart-bottom-leave-active,.smart-left-enter-active,.smart-left-leave-active,.smart-right-enter-active,.smart-right-leave-active,.smart-top-enter-active,.smart-top-leave-active{transition-property:transform}.smart-bottom-enter,.smart-bottom-leave-to{transform:translate3d(0,100%,0)}.smart-top-enter,.smart-top-leave-to{transform:translate3d(0,-100%,0)}.smart-left-enter,.smart-left-leave-to{transform:translate3d(-100%,-50%,0)}.smart-right-enter,.smart-right-leave-to{transform:translate3d(100%,-50%,0)}

package/lib/popup/index.d.ts

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

package/lib/popup/index.js

@@ -0,0 +1,122 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
+var component_1 = require("../common/component");
+var transition_1 = require("../mixins/transition");
+var utils_1 = require("../common/utils");
+(0, component_1.SmartComponent)({
+    classes: [
+        'enter-class',
+        'enter-active-class',
+        'enter-to-class',
+        'leave-class',
+        'leave-active-class',
+        'leave-to-class',
+        'close-icon-class',
+    ],
+    mixins: [(0, transition_1.transition)(false)],
+    props: {
+        round: Boolean,
+        closeable: Boolean,
+        customStyle: String,
+        overlayStyle: String,
+        transition: {
+            type: String,
+            observer: 'observeClass',
+        },
+        zIndex: {
+            type: Number,
+            value: 100,
+        },
+        overlay: {
+            type: Boolean,
+            value: true,
+        },
+        closeIcon: {
+            type: String,
+            value: Xmark_1.default,
+        },
+        closeIconPosition: {
+            type: String,
+            value: 'top-right',
+        },
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true,
+        },
+        position: {
+            type: String,
+            value: 'center',
+            observer: 'observeClass',
+        },
+        safeAreaInsetBottom: {
+            type: Boolean,
+            value: false,
+        },
+        safeAreaInsetBottomMin: {
+            type: Number,
+            value: 0,
+        },
+        safeAreaInsetTop: {
+            type: Boolean,
+            value: false,
+        },
+        safeAreaTabBar: {
+            type: Boolean,
+            value: false,
+        },
+        lockScroll: {
+            type: Boolean,
+            value: true,
+        },
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        closeIcon: Xmark_1.default,
+        bottomSafeHeight: 0,
+    },
+    mounted: function () {
+        if (!this.data.safeAreaInsetBottom)
+            return;
+        var bottomSafeHeight = (0, utils_1.getSafeBottomOffset)();
+        this.setData({
+            bottomSafeHeight: Math.max(bottomSafeHeight, this.data.safeAreaInsetBottomMin),
+        });
+    },
+    created: function () {
+        this.observeClass();
+    },
+    methods: {
+        // for prevent touchmove
+        noop: function () { },
+        onClickCloseIcon: function () {
+            this.$emit('close');
+        },
+        onClickOverlay: function () {
+            this.$emit('click-overlay');
+            if (this.data.closeOnClickOverlay) {
+                this.$emit('close');
+            }
+        },
+        observeClass: function () {
+            var _a = this.data, transition = _a.transition, position = _a.position, duration = _a.duration;
+            var updateData = {
+                name: transition || position,
+            };
+            if (transition === 'none') {
+                updateData.duration = 0;
+                this.originDuration = duration;
+            }
+            else if (this.originDuration != null) {
+                updateData.duration = this.originDuration;
+            }
+            this.setData(updateData);
+        },
+    },
+});

package/lib/popup/index.json

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

package/lib/popup/index.wxml

@@ -0,0 +1,21 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<import src="./popup.wxml" />
+
+<smart-overlay
+  wx:if="{{ overlay }}"
+  show="{{ show }}"
+  z-index="{{ zIndex }}"
+  custom-style="{{ overlayStyle }}"
+  duration="{{ duration }}"
+  bind:click="onClickOverlay"
+  lock-scroll="{{ lockScroll }}"
+  root-portal="{{ rootPortal }}"
+/>
+
+<root-portal wx:if="{{ rootPortal }}">
+  <include src="./popup.wxml" />
+</root-portal>
+
+ <include wx:else src="./popup.wxml" />

package/lib/popup/index.wxs

@@ -0,0 +1,23 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function popupStyle(data) {
+  var transformStyle = data.position === 'bottom' ? "transform: translate3d(0, calc(100% + " + data.bottomSafeHeight + "px), 0)" : null;
+
+  
+  return style([
+    {
+      'margin-bottom': data.bottomSafeHeight + 'px',
+      'z-index': data.zIndex,
+      '-webkit-transition-duration': data.currentDuration + 'ms',
+      'transition-duration': data.currentDuration + 'ms',
+    },
+    data.status === 'enter' ? null : transformStyle,
+    data.display ? null : 'display: none',
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  popupStyle: popupStyle,
+};

package/lib/popup/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-popup{-webkit-overflow-scrolling:touch;animation:ease both;background:var(--popup-background-color,var(--app-B4,#fff));box-sizing:border-box;max-height:100%;position:fixed;transition-timing-function:ease}.smart-popup--center{left:50%;top:50%;transform:translate3d(-50%,-50%,0)}.smart-popup--center.smart-popup--round{border-radius:var(--popup-round-border-radius,16px);overflow:hidden}.smart-popup--top{left:0;top:0;width:100%}.smart-popup--top.smart-popup--round{border-radius:0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--right{right:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--right.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px));overflow:hidden}.smart-popup--bottom{bottom:0;left:0;width:100%}.smart-popup--bottom.smart-popup--round{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0 0;overflow:hidden}.smart-popup--left{left:0;top:50%;transform:translate3d(0,-50%,0)}.smart-popup--left.smart-popup--round{border-radius:0 var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) var(--popup-round-border-radius,var(--popup-round-border-radius,16px)) 0;overflow:hidden}.smart-popup--bottom.smart-popup--safeTabBar,.smart-popup--top.smart-popup--safeTabBar{bottom:var(--tabbar-height,55px)}.smart-popup--safeTop{padding-top:env(safe-area-inset-top)}.smart-popup__close-icon{color:var(--popup-close-icon-color,#969799);font-size:var(--popup-close-icon-size,24px);position:absolute;z-index:var(--popup-close-icon-z-index,1)}.smart-popup__close-icon--top-left{left:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--top-right{right:var(--popup-close-icon-margin,12px);top:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-left{bottom:var(--popup-close-icon-margin,12px);left:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon--bottom-right{bottom:var(--popup-close-icon-margin,12px);right:var(--popup-close-icon-margin,12px)}.smart-popup__close-icon:active{opacity:.6}.smart-scale-enter-active,.smart-scale-leave-active{transition-property:opacity,transform}.smart-scale-enter,.smart-scale-leave-to{opacity:0;transform:translate3d(-50%,-50%,0) scale(.7)}.smart-fade-enter-active,.smart-fade-leave-active{transition-property:opacity}.smart-fade-enter,.smart-fade-leave-to{opacity:0}.smart-center-enter-active,.smart-center-leave-active{transition-property:opacity}.smart-center-enter,.smart-center-leave-to{opacity:0}.smart-bottom-enter-active,.smart-bottom-leave-active,.smart-left-enter-active,.smart-left-leave-active,.smart-right-enter-active,.smart-right-leave-active,.smart-top-enter-active,.smart-top-leave-active{transition-property:transform}.smart-bottom-enter,.smart-bottom-leave-to{transform:translate3d(0,100%,0)}.smart-top-enter,.smart-top-leave-to{transform:translate3d(0,-100%,0)}.smart-left-enter,.smart-left-leave-to{transform:translate3d(-100%,-50%,0)}.smart-right-enter,.smart-right-leave-to{transform:translate3d(100%,-50%,0)}

package/lib/popup/popup.wxml

@@ -0,0 +1,16 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+<view
+  wx:if="{{ inited }}"
+  class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
+  style="{{ computed.popupStyle({ position, status, zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
+  catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
+>
+  <slot />
+  <smart-icon
+    wx:if="{{ closeable }}"
+    name="{{ closeIcon }}"
+    class="close-icon-class smart-popup__close-icon smart-popup__close-icon--{{ closeIconPosition }}"
+    bind:tap="onClickCloseIcon"
+  />
+</view>

package/lib/progress/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-progress{background:var(--progress-background-color,#ebedf0);border-radius:var(--progress-height,4px);height:var(--progress-height,4px);position:relative}.smart-progress__portion{background:var(--progress-color,#1989fa);border-radius:inherit;height:100%;left:0;position:absolute}.smart-progress__pivot{background-color:var(--progress-pivot-background-color,#1989fa);border-radius:1em;box-sizing:border-box;color:var(--progress-pivot-text-color,#fff);font-size:var(--progress-pivot-font-size,10px);line-height:var(--progress-pivot-line-height,1.6);min-width:3.6em;padding:var(--progress-pivot-padding,0 5px);position:absolute;text-align:center;top:50%;transform:translateY(-50%);word-break:keep-all}

package/lib/progress/index.d.ts

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

package/lib/progress/index.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var color_1 = require("../common/color");
+var utils_1 = require("../common/utils");
+(0, component_1.SmartComponent)({
+    props: {
+        inactive: Boolean,
+        percentage: {
+            type: Number,
+            observer: 'setLeft',
+        },
+        pivotText: String,
+        pivotColor: String,
+        trackColor: String,
+        showPivot: {
+            type: Boolean,
+            value: true,
+        },
+        color: {
+            type: String,
+            value: color_1.BLUE,
+        },
+        textColor: {
+            type: String,
+            value: '#fff',
+        },
+        strokeWidth: {
+            type: null,
+            value: 4,
+        },
+    },
+    data: {
+        right: 0,
+    },
+    mounted: function () {
+        this.setLeft();
+    },
+    methods: {
+        setLeft: function () {
+            var _this = this;
+            Promise.all([(0, utils_1.getRect)(this, '.smart-progress'), (0, utils_1.getRect)(this, '.smart-progress__pivot')]).then(function (_a) {
+                var portion = _a[0], pivot = _a[1];
+                if (portion && pivot) {
+                    _this.setData({
+                        right: (pivot.width * (_this.data.percentage - 100)) / 100,
+                    });
+                }
+            });
+        },
+    },
+});

package/lib/progress/index.json

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

package/lib/progress/index.wxml

@@ -0,0 +1,20 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="smart-progress custom-class"
+  style="{{ computed.rootStyle({ strokeWidth, trackColor }) }}"
+>
+  <view
+    class="smart-progress__portion"
+    style="{{ computed.portionStyle({ percentage, inactive, color }) }}"
+  >
+    <view
+      wx:if="{{ showPivot && computed.pivotText(pivotText, percentage) }}"
+      style="{{ computed.pivotStyle({ textColor, pivotColor, inactive, color, right }) }}"
+      class="smart-progress__pivot"
+    >
+      {{ computed.pivotText(pivotText, percentage) }}
+    </view>
+  </view>
+</view>

package/lib/progress/index.wxs

@@ -0,0 +1,36 @@
+/* eslint-disable */
+var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+
+function pivotText(pivotText, percentage) {
+  return pivotText || percentage + '%';
+}
+
+function rootStyle(data) {
+  return style({
+    'height': data.strokeWidth ? utils.addUnit(data.strokeWidth) : '',
+    'background': data.trackColor,
+  });
+}
+
+function portionStyle(data) {
+  return style({
+    background: data.inactive ? '#cacaca' : data.color,
+    width: data.percentage ? data.percentage + '%' : '',
+  });
+}
+
+function pivotStyle(data) {
+  return style({
+    color: data.textColor,
+    right: data.right + 'px',
+    background: data.pivotColor ? data.pivotColor : data.inactive ? '#cacaca' : data.color,
+  });
+}
+
+module.exports = {
+  pivotText: pivotText,
+  rootStyle: rootStyle,
+  portionStyle: portionStyle,
+  pivotStyle: pivotStyle,
+};

package/lib/progress/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-progress{background:var(--progress-background-color,#ebedf0);border-radius:var(--progress-height,4px);height:var(--progress-height,4px);position:relative}.smart-progress__portion{background:var(--progress-color,#1989fa);border-radius:inherit;height:100%;left:0;position:absolute}.smart-progress__pivot{background-color:var(--progress-pivot-background-color,#1989fa);border-radius:1em;box-sizing:border-box;color:var(--progress-pivot-text-color,#fff);font-size:var(--progress-pivot-font-size,10px);line-height:var(--progress-pivot-line-height,1.6);min-width:3.6em;padding:var(--progress-pivot-padding,0 5px);position:absolute;text-align:center;top:50%;transform:translateY(-50%);word-break:keep-all}

package/lib/radio/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-radio{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.smart-radio__icon-wrap{display:flex;flex:none}.smart-radio--horizontal{margin-right:var(--padding-sm,12px)}.smart-radio__icon{align-items:center;border:2px solid var(--radio-border-color,var(--app-B6-N6,rgba(0,0,0,.2)));border-radius:var(--radio-border-radius,4px);box-sizing:border-box;color:transparent;display:flex;font-size:var(--radio-size,24px);height:1em;justify-content:center;text-align:center;transition-duration:var(--radio-transition-duration,.2s);transition-property:color,border,background-color;width:1em}.smart-radio__icon--round{border-radius:100%}.smart-radio__icon--checked{background-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));border-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));color:#fff}.smart-radio__icon--disabled{opacity:.3}.smart-radio__label{word-wrap:break-word;color:var(--radio-label-color,var(--app-B6-N1,#000));font-size:var(--radio-label-size,12px);padding-left:var(--radio-label-margin,10px)}.smart-radio__label--left{float:left;margin:0 var(--radio-label-margin,10px) 0 0}.smart-radio__label--disabled{color:var(--radio-disabled-label-color,var(--app-B6-N5,rgba(0,0,0,.3)))}.smart-radio__label:empty{margin:0}

package/lib/radio/index.d.ts

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