project init

components/popup/README.md

@@ -0,0 +1,47 @@
+---
+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"
+}
+```
+
+## 代码演示
+
+### 顶部弹出层
+
+{{ top }}
+
+## API
+### Popup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+close-btn | Boolean / Slot | - | 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮 | N
+close-on-overlay-click | Boolean | true | 点击遮罩层是否关闭 | N
+content | String / Slot | - | 浮层里面的内容 | N
+custom-style | String | '' | 弹出层的自定义样式 | N
+external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、遮罩层、浮层内容 等元素类名。`['t-class', 't-class-overlay', 't-class-content']` | 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
+z-index | Number | - | 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 11500 | N
+duration | Number | 240 | 动画过渡时间 | 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/>

components/popup/popup.d.ts

@@ -0,0 +1,24 @@
+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;
+        className: string;
+    };
+    lifetimes: {
+        attached(): void;
+    };
+    methods: {
+        setClass(): void;
+        handleOverlayClick(): void;
+        handleClose(): void;
+    };
+}

components/popup/popup.js

@@ -0,0 +1,59 @@
+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 { classNames } from '../common/utils';
+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 = ['t-class', 't-class-content'];
+        this.behaviors = [transition()];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            className: name,
+        };
+        this.lifetimes = {
+            attached() {
+                this.setClass();
+            },
+        };
+        this.methods = {
+            setClass() {
+                const { placement, showOverlay } = this.properties;
+                const className = classNames(name, `${name}--${placement}`, {
+                    [`${name}--overlay-transparent`]: !showOverlay,
+                });
+                this.setData({
+                    className,
+                });
+            },
+            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;

components/popup/popup.json

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

components/popup/popup.wxml

@@ -0,0 +1,25 @@
+<view
+  wx:if="{{realVisible}}"
+  style="{{customStyle + ';z-index:' + zIndex + ';'}}"
+  class="{{className}} {{transitionClass}} {{prefix}}-class"
+  bind:transitionend="onTransitionEnd"
+>
+  <view class="{{classPrefix}}__content {{prefix}}-class-content">
+    <view class="{{classPrefix}}__close" bind:tap="handleClose">
+      <t-icon name="close" wx:if="{{closeBtn}}" size="64rpx" />
+      <slot name="closeBtn" class="{{classPrefix}}-slot" />
+    </view>
+    <slot name="content" />
+    <slot />
+  </view>
+</view>
+
+<t-overlay
+  id="popup-overlay"
+  wx:if="{{showOverlay}}"
+  visible="{{visible}}"
+  z-index="{{overlayProps.zIndex}}"
+  prevent-scroll-through="{{preventScrollThrough || overlayProps.preventScrollThrough}}"
+  bind:tap="handleOverlayClick"
+  custom-style="{{overlayProps.customStyle || ''}}"
+/>

components/popup/popup.wxss

@@ -0,0 +1,99 @@
+.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;
+}
+.t-popup__content {
+  position: relative;
+  z-index: 1;
+}
+.t-popup__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 20rpx;
+  line-height: 1;
+}
+.t-popup--overlay-transparent .t-popup__overlay {
+  background-color: rgba(0, 0, 0, 0);
+}
+.t-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.t-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+}
+.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%;
+}
+.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;
+}

components/popup/props.d.ts

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

components/popup/props.js

@@ -0,0 +1,47 @@
+const props = {
+    closeBtn: {
+        type: Boolean,
+    },
+    closeOnOverlayClick: {
+        type: Boolean,
+        value: true,
+    },
+    content: {
+        type: String,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    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,
+    },
+    zIndex: {
+        type: Number,
+        value: 11500,
+    },
+};
+export default props;

components/popup/type.d.ts

@@ -0,0 +1,54 @@
+import { TdTransitionProps } from '../transition/index';
+export interface TdPopupProps {
+    closeBtn?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    closeOnOverlayClick?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    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;
+    };
+    zIndex?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+}
+export interface PopupVisibleChangeContext {
+    trigger: 'close-btn' | 'overlay';
+}

components/popup/type.js

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