bug fix and performance improvements

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/README.en-US.md

@@ -0,0 +1,33 @@
+:: BASE_DOC ::
+
+## API
+### Popup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+close-btn | Boolean / Slot | - | \- | N
+close-on-overlay-click | Boolean | true | \- | N
+content | String / Slot | - | \- | N
+duration | Number | 240 | \- | N
+external-classes | Array | - | `['t-class', 't-class-overlay', 't-class-content']` | N
+overlay-props | Object | {} | \- | N
+placement | String | top | options：top/left/right/bottom/center | N
+prevent-scroll-through | Boolean | true | \- | N
+show-overlay | Boolean | true | \- | N
+visible | Boolean | false | Typescript：`boolean` | N
+default-visible | Boolean | undefined | uncontrolled property。Typescript：`boolean` | N
+z-index | Number | 11500 | \- | N
+
+### Popup Events
+
+name | params | description
+-- | -- | --
+visible-change | `(visible: boolean, trigger: PopupSource) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-popup-bg-color | @bg-color-container | - 
+--td-popup-border-radius | @radius-default | - 

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/README.md

@@ -0,0 +1,69 @@
+---
+title: Popup 弹出层
+description: 由其他控件触发，屏幕滑出或弹出一块自定义内容区域。
+spline: message
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-popup": "tdesign-miniprogram/popup/popup"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+基础弹出层
+
+{{ base }}
+
+### 组件示例
+
+应用示例
+
+{{ with-title }}
+
+{{ custom-close }}
+
+## API
+### Popup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+close-btn | Boolean / Slot | - | 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮 | N
+close-on-overlay-click | Boolean | true | 点击遮罩层是否关闭 | N
+content | String / Slot | - | 浮层里面的内容 | N
+duration | Number | 240 | 动画过渡时间 | N
+overlay-props | Object | {} | 遮罩层的属性，透传至 overlay | N
+placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
+prevent-scroll-through | Boolean | true | 防止滚动穿透 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+visible | Boolean | false | 是否显示浮层。TS 类型：`boolean` | N
+default-visible | Boolean | undefined | 是否显示浮层。非受控属性。TS 类型：`boolean` | N
+z-index | Number | 11500 | 组件层级，Web 侧样式默认为 5500，移动端样式默认为 1500，小程序样式默认为11500 | N
+
+### Popup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+visible-change | `(visible: boolean, trigger: PopupSource) ` | 当浮层隐藏或显示时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' \| 'overlay'`<br/>
+
+### Popup 外部样式类
+类名 | 说明
+-- | -- 
+t-class | 根节点样式类
+t-class-content | 内容样式类
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-popup-bg-color | @bg-color-container | - 
+--td-popup-border-radius | @radius-default | - 

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.d.ts

@@ -0,0 +1,19 @@
+import { TdPopupProps } from './type';
+import { SuperComponent } from '../common/src/index';
+export declare type PopupProps = TdPopupProps;
+export default class Popup extends SuperComponent {
+    externalClasses: string[];
+    behaviors: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: TdPopupProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+    };
+    methods: {
+        handleOverlayClick(): void;
+        handleClose(): void;
+    };
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.js

@@ -0,0 +1,43 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+import transition from '../mixins/transition';
+delete props.visible;
+const { prefix } = config;
+const name = `${prefix}-popup`;
+let Popup = class Popup extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`];
+        this.behaviors = [transition()];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.data = {
+            prefix,
+            classPrefix: name,
+        };
+        this.methods = {
+            handleOverlayClick() {
+                const { closeOnOverlayClick } = this.properties;
+                if (closeOnOverlayClick) {
+                    this.triggerEvent('visible-change', { visible: false });
+                }
+            },
+            handleClose() {
+                this.triggerEvent('visible-change', { visible: false });
+            },
+        };
+    }
+};
+Popup = __decorate([
+    wxComponent()
+], Popup);
+export default Popup;

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.json

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

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.wxml

@@ -0,0 +1,33 @@
+<wxs src="./popup.wxs" module="popup" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<view
+  wx:if="{{realVisible}}"
+  style="{{_._style([popup.getPopupStyles(zIndex), style, customStyle])}}"
+  class="{{_.cls(classPrefix, [placement])}} {{transitionClass}} class {{prefix}}-class"
+  bind:transitionend="onTransitionEnd"
+>
+  <!-- 暂时移除：aria-role="dialog" aria-modal="{{ true }}"，关联：https://github.com/Tencent/tdesign-miniprogram/issues/2142 -->
+  <view
+    data-prevention="{{preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false)}}"
+    bind:touchmove="{{popup.onContentTouchMove}}"
+    class="{{classPrefix}}__content {{prefix}}-class-content"
+  >
+    <slot name="content" />
+    <slot />
+    <view class="{{classPrefix}}__close" bind:tap="handleClose">
+      <t-icon name="close" wx:if="{{closeBtn}}" size="64rpx" />
+      <slot name="close-btn" class="{{classPrefix}}-slot" />
+    </view>
+  </view>
+</view>
+
+<t-overlay
+  id="popup-overlay"
+  wx:if="{{showOverlay}}"
+  visible="{{visible}}"
+  z-index="{{overlayProps && overlayProps.zIndex || 11000}}"
+  prevent-scroll-through="{{preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false)}}"
+  bind:tap="handleOverlayClick"
+  custom-style="{{overlayProps && overlayProps.style || ''}}"
+/>

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.wxs

@@ -0,0 +1,15 @@
+function getPopupStyles(zIndex) {
+  var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
+  return zIndexStyle;
+}
+
+function onContentTouchMove (e) {
+  if (e.target.dataset.prevention) {
+    return false;
+  };
+}
+
+module.exports = {
+  getPopupStyles: getPopupStyles,
+  onContentTouchMove: onContentTouchMove
+};

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/popup.wxss

@@ -0,0 +1,104 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-popup {
+  position: fixed;
+  z-index: 11500;
+  max-height: 100vh;
+  transition: all 300ms ease;
+  background-color: var(--td-popup-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-popup__content {
+  position: relative;
+  z-index: 1;
+}
+.t-popup__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 20rpx;
+  line-height: 1;
+}
+.t-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+  border-bottom-left-radius: var(--td-popup-border-radius, var(--td-radius-default, 12rpx));
+  border-bottom-right-radius: var(--td-popup-border-radius, var(--td-radius-default, 12rpx));
+}
+.t-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-top-left-radius: var(--td-popup-border-radius, var(--td-radius-default, 12rpx));
+  border-top-right-radius: var(--td-popup-border-radius, var(--td-radius-default, 12rpx));
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.t-popup--left {
+  top: 0;
+  left: 0;
+  height: 100vh;
+}
+.t-popup--right {
+  top: 0;
+  right: 0;
+  height: 100vh;
+}
+.t-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: scale(1) translate3d(-50%, -50%, 0);
+  transform-origin: 0% 0%;
+  border-radius: var(--td-popup-border-radius, var(--td-radius-default, 12rpx));
+}
+.t-popup.t-fade-enter.t-popup--top,
+.t-popup.t-fade-leave-to.t-popup--top {
+  transform: translateY(-100%);
+}
+.t-popup.t-fade-enter.t-popup--bottom,
+.t-popup.t-fade-leave-to.t-popup--bottom {
+  transform: translateY(100%);
+}
+.t-popup.t-fade-enter.t-popup--left,
+.t-popup.t-fade-leave-to.t-popup--left {
+  transform: translateX(-100%);
+}
+.t-popup.t-fade-enter.t-popup--right,
+.t-popup.t-fade-leave-to.t-popup--right {
+  transform: translateX(100%);
+}
+.t-popup.t-fade-enter.t-popup--center,
+.t-popup.t-fade-leave-to.t-popup--center {
+  transform: scale(0.6) translate3d(-50%, -50%, 0);
+  opacity: 0;
+}
+.t-popup.t-dialog-enter.t-popup--center,
+.t-popup.t-dialog-leave-to.t-popup--center {
+  transform: scale(0.6) translate3d(-50%, -50%, 0);
+  opacity: 0;
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/props.d.ts

@@ -0,0 +1,3 @@
+import { TdPopupProps } from './type';
+declare const props: TdPopupProps;
+export default props;

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/props.js

@@ -0,0 +1,51 @@
+const props = {
+    closeBtn: {
+        type: Boolean,
+    },
+    closeOnOverlayClick: {
+        type: Boolean,
+        value: true,
+    },
+    content: {
+        type: String,
+    },
+    duration: {
+        type: Number,
+        value: 240,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    overlayProps: {
+        type: Object,
+        value: {},
+    },
+    placement: {
+        type: String,
+        value: 'top',
+    },
+    preventScrollThrough: {
+        type: Boolean,
+        value: true,
+    },
+    showOverlay: {
+        type: Boolean,
+        value: true,
+    },
+    transitionProps: {
+        type: Object,
+    },
+    visible: {
+        type: Boolean,
+        value: null,
+    },
+    defaultVisible: {
+        type: Boolean,
+        value: false,
+    },
+    zIndex: {
+        type: Number,
+        value: 11500,
+    },
+};
+export default props;

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/type.d.ts

@@ -0,0 +1,62 @@
+import { TdTransitionProps } from '../transition/index';
+export interface TdPopupProps {
+    closeBtn?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    closeOnOverlayClick?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    duration?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-overlay', 't-class-content'];
+    };
+    overlayProps?: {
+        type: ObjectConstructor;
+        value?: object;
+    };
+    placement?: {
+        type: StringConstructor;
+        value?: 'top' | 'left' | 'right' | 'bottom' | 'center';
+    };
+    preventScrollThrough?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    showOverlay?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    transitionProps?: {
+        type: ObjectConstructor;
+        value?: TdTransitionProps;
+    };
+    visible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    defaultVisible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    zIndex?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+}
+export interface PopupVisibleChangeContext {
+    trigger: 'close-btn' | 'overlay';
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/popup/type.js

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