@tuya-miniapp/smart-ui 2.3.8-beta-4 → 2.3.8-beta-5

package/example/dist/popover/index.js

@@ -0,0 +1,200 @@
+/* eslint-disable prefer-destructuring */
+import { SmartComponent } from '../common/component';
+const IconSrc = () => `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10 90 L 90 90 L 50 30 Z" fill="currentColor" stroke="purple" stroke-width="1"/>
+</svg>`;
+function createSvgIcon(svg) {
+    return `data:image/svg+xml,${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">${svg}`)}`;
+}
+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(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: '',
+        },
+        zIndex: {
+            type: Number,
+            value: 101,
+        },
+        duration: {
+            type: Number,
+            value: 20000,
+        },
+    },
+    data: { currentShow: false, showStyle: '', cancel_timer: null },
+    mounted() { },
+    created() { },
+    methods: {
+        getButtonPosition() {
+            const placement = this.data.placement;
+            let 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')) {
+                let iconAlignPos = '';
+                let 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 = Object.assign(Object.assign({}, params), { transform, iconSrc: createSvgIcon(IconSrc()), iconStyle: `right:8px;transform:translate(100%, -50%) rotate(90deg);width:18px;height:18px;background-size: 18px 18px;${iconAlignPos}` });
+            }
+            if (placement.startsWith('top')) {
+                let iconAlignPos = '';
+                let 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 = Object.assign(Object.assign({}, params), { transform, iconSrc: createSvgIcon(IconSrc()), iconRotate: '0deg', iconStyle: `bottom:0px;transform:translate(-50%, 100%) rotate(180deg);width:18px;height:6px;background-size: 18px 6px;${iconAlignPos}` });
+            }
+            if (placement.startsWith('right')) {
+                let iconAlignPos = '';
+                let 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 = Object.assign(Object.assign({}, params), { transform, iconSrc: createSvgIcon(IconSrc()), iconRotate: '90deg', iconStyle: `left:-10px;transform:translate(0%, -50%) rotate(-90deg);width:18px;height:18px;background-size: 18px 18px;${iconAlignPos};` });
+            }
+            if (placement.startsWith('bottom')) {
+                let iconAlignPos = '';
+                let 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 = Object.assign(Object.assign({}, params), { transform, iconSrc: createSvgIcon(IconSrc()), iconRotate: '180deg', iconStyle: `top:0px;transform:translate(-50%, -100%) rotate(0deg);width:18px;height:6px;background-size: 18px 6px;${iconAlignPos}` });
+            }
+            this.setData(params);
+        },
+        onClick() {
+            this.onOpen();
+        },
+        noop() { },
+        onOpen() {
+            this.getButtonPosition();
+            this.setData({
+                currentShow: true,
+            });
+            setTimeout(() => {
+                this.setData({
+                    showStyle: 'opacity: 1;',
+                });
+            }, 100);
+            this.$emit('show-change', true);
+            if (this.data.duration) {
+                this.data.cancel_timer = setTimeout(() => {
+                    this.onClose();
+                }, this.data.duration);
+            }
+        },
+        onClose() {
+            this.setData({
+                showStyle: 'opacity: 0;',
+            });
+            setTimeout(() => {
+                this.setData({
+                    currentShow: false,
+                });
+                this.$emit('show-change', false);
+                this.$emit('close', false);
+            }, 300);
+        },
+    },
+});

package/example/dist/popover/index.json

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

package/example/dist/popover/index.wxml

@@ -0,0 +1,23 @@
+<view class="smart-popover">
+
+  <smart-overlay
+    show="{{ currentShow }}"
+    z-index="{{ zIndex }}"
+    bind:click="onClose"
+    transition="{{ transition }}"
+    close-on-click-overlay
+    bind:close="onClose"
+    z-index="{{zIndex}}"
+  >
+   
+  </smart-overlay>
+
+  <view 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/example/dist/popover/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.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/example/dist/popup/demo/index.d.ts

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

package/example/dist/popup/demo/index.js

@@ -0,0 +1,97 @@
+import rightIcon from '@tuya-miniapp/icons/dist/svg/Right';
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        show: {
+            basic: false,
+            top: false,
+            bottom: false,
+            left: false,
+            right: false,
+            round: false,
+            closeIcon: false,
+            customCloseIcon: false,
+            customIconPosition: false,
+        },
+        rightIcon,
+    },
+    methods: {
+        toggle(type, show) {
+            this.setData({
+                [`show.${type}`]: show,
+            });
+        },
+        showBasic() {
+            this.toggle('basic', true);
+        },
+        hideBasic() {
+            this.toggle('basic', false);
+        },
+        showTop() {
+            this.toggle('top', true);
+        },
+        hideTop() {
+            this.toggle('top', false);
+        },
+        showLeft() {
+            this.toggle('left', true);
+        },
+        hideLeft() {
+            this.toggle('left', false);
+        },
+        showRight() {
+            this.toggle('right', true);
+        },
+        hideRight() {
+            this.toggle('right', false);
+        },
+        showBottom() {
+            this.toggle('bottom', true);
+        },
+        hideBottom() {
+            this.toggle('bottom', false);
+        },
+        showRound() {
+            this.toggle('round', true);
+        },
+        hideRound() {
+            this.toggle('round', false);
+        },
+        showCloseIcon() {
+            this.toggle('closeIcon', true);
+        },
+        hideCloseIcon() {
+            this.toggle('closeIcon', false);
+        },
+        showCustomCloseIcon() {
+            this.toggle('customCloseIcon', true);
+        },
+        hideCustomCloseIcon() {
+            this.toggle('customCloseIcon', false);
+        },
+        showCustomIconPosition() {
+            this.toggle('customIconPosition', true);
+        },
+        hideCustomIconPosition() {
+            this.toggle('customIconPosition', false);
+        },
+        enter() {
+            console.log('enter');
+        },
+        beforeEnter() {
+            console.log('before-enter');
+        },
+        afterEnter() {
+            console.log('after-enter');
+        },
+        leave() {
+            console.log('leave');
+        },
+        beforeLeave() {
+            console.log('before-leave');
+        },
+        afterLeave() {
+            console.log('after-leave');
+        }
+    },
+});

package/example/dist/popup/demo/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-cell": "../../cell/index",
+    "smart-popup": "../../popup/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}

package/example/dist/popup/demo/index.wxml

@@ -0,0 +1,92 @@
+<demo-block title="{{I18n.t('basicUsage')}}">
+  <smart-cell title="{{I18n.t('displayPopupLayer')}}" is-link bind:click="showBasic" />
+  <smart-popup
+    show="{{ show.basic }}"
+    custom-style="padding: 30px 50px; color: var(--app-B6-N1)"
+    bind:close="hideBasic"
+    bind:enter="enter"
+    bind:before-enter="beforeEnter"
+    bind:after-enter="afterEnter"
+    bind:leave="leave"
+    bind:before-leave="beforeLeave"
+    bind:after-leave="afterLeave"
+  >
+    {{I18n.t('content')}}
+  </smart-popup>
+</demo-block>
+
+<demo-block title="{{I18n.t('popupPosition')}}">
+  <smart-cell title="{{I18n.t('topPopUp')}}" is-link bind:click="showTop" />
+  <smart-cell title="{{I18n.t('bottomPopUp')}}" is-link bind:click="showBottom" />
+  <smart-cell title="{{I18n.t('popUpFromTheLeft')}}" is-link bind:click="showLeft" />
+  <smart-cell title="{{I18n.t('popUpOnTheRight')}}" is-link bind:click="showRight" />
+
+  <smart-popup
+    show="{{ show.top }}"
+    position="top"
+    custom-style="height: 20%"
+    bind:close="hideTop"
+  />
+  <smart-popup
+    show="{{ show.bottom }}"
+    position="bottom"
+    custom-style="height: 20%"
+    bind:close="hideBottom"
+  />
+  <smart-popup
+    show="{{ show.left }}"
+    position="left"
+    custom-style="width: 20%; height: 100%"
+    bind:close="hideLeft"
+  />
+  <smart-popup
+    show="{{ show.right }}"
+    position="right"
+    custom-style="width: 20%; height: 100%"
+    bind:close="hideRight"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('closeIcon')}}">
+  <smart-cell title="{{I18n.t('closeIcon')}}" is-link bind:click="showCloseIcon" />
+  <smart-cell title="{{I18n.t('customIcon')}}" is-link bind:click="showCustomCloseIcon" />
+  <smart-cell title="{{I18n.t('iconPosition')}}" is-link bind:click="showCustomIconPosition" />
+
+  <smart-popup
+    show="{{ show.closeIcon }}"
+    closeable
+    position="bottom"
+    custom-style="height: 20%"
+    bind:close="hideCloseIcon"
+  />
+
+  <smart-popup
+    show="{{ show.customCloseIcon }}"
+    closeable
+    close-icon="{{ rightIcon }}"
+    position="bottom"
+    custom-style="height: 20%"
+    bind:close="hideCustomCloseIcon"
+  />
+
+  <smart-popup
+    show="{{ show.customIconPosition }}"
+    closeable
+    close-icon-position="top-left"
+    position="bottom"
+    custom-style="height: 20%"
+    bind:close="hideCustomIconPosition"
+  />
+</demo-block>
+
+<demo-block title="{{I18n.t('roundedCornerPopup')}}">
+  <smart-cell title="{{I18n.t('roundedCornerPopup')}}" is-link bind:click="showRound" />
+
+  <smart-popup
+    show="{{ show.round }}"
+    round
+    position="bottom"
+    custom-style="height: 20%"
+    bind:close="hideRound"
+  />
+</demo-block>

package/example/dist/popup/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-popup{-webkit-overflow-scrolling:touch;animation:ease both;background-color:var(--popup-background-color,var(--app-B4,#fff));box-sizing:border-box;max-height:100%;overflow-y:auto;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)}.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))}.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))}.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}.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}.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/example/dist/popup/index.d.ts

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

package/example/dist/popup/index.js

@@ -0,0 +1,117 @@
+import closeIcon from '@tuya-miniapp/icons/dist/svg/Xmark';
+import { SmartComponent } from '../common/component';
+import { transition } from '../mixins/transition';
+import { getSafeBottomOffset } from '../common/utils';
+SmartComponent({
+    classes: [
+        'enter-class',
+        'enter-active-class',
+        'enter-to-class',
+        'leave-class',
+        'leave-active-class',
+        'leave-to-class',
+        'close-icon-class',
+    ],
+    mixins: [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: closeIcon,
+        },
+        closeIconPosition: {
+            type: String,
+            value: 'top-right',
+        },
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true,
+        },
+        position: {
+            type: String,
+            value: 'center',
+            observer: 'observeClass',
+        },
+        safeAreaInsetBottom: {
+            type: Boolean,
+            value: true,
+        },
+        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,
+        bottomSafeHeight: 0,
+    },
+    mounted() {
+        if (!this.data.safeAreaInsetBottom)
+            return;
+        const bottomSafeHeight = getSafeBottomOffset();
+        this.setData({
+            bottomSafeHeight: Math.max(bottomSafeHeight, this.data.safeAreaInsetBottomMin),
+        });
+    },
+    created() {
+        this.observeClass();
+    },
+    methods: {
+        // for prevent touchmove
+        noop() { },
+        onClickCloseIcon() {
+            this.$emit('close');
+        },
+        onClickOverlay() {
+            this.$emit('click-overlay');
+            if (this.data.closeOnClickOverlay) {
+                this.$emit('close');
+            }
+        },
+        observeClass() {
+            const { transition, position, duration } = this.data;
+            const 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/example/dist/popup/index.json

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

package/example/dist/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/example/dist/popup/index.wxs

@@ -0,0 +1,22 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function popupStyle(data) {
+  const 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/example/dist/popup/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-popup{-webkit-overflow-scrolling:touch;animation:ease both;background-color:var(--popup-background-color,var(--app-B4,#fff));box-sizing:border-box;max-height:100%;overflow-y:auto;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)}.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))}.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))}.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}.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}.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/example/dist/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/example/dist/progress/demo/index.css

@@ -0,0 +1 @@
+@import '../../common/index.css';.progress-position{margin:5px 15px 20px}

package/example/dist/progress/demo/index.d.ts

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

package/example/dist/progress/demo/index.js

@@ -0,0 +1,4 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {},
+});

package/example/dist/progress/demo/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-progress": "../../progress/index",
+    "demo-block": "../../../components/demo-block/index"
+  }
+}