@vtj/materials 0.13.15 → 0.13.17

package/src/uni-ui/lib/uni-popup/uni-popup.vue

@@ -1,552 +0,0 @@
-<template>
-  <view
-    v-if="showPopup"
-    class="uni-popup"
-    :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
-    <view @touchstart="touchstart">
-      <uni-transition
-        key="1"
-        v-if="maskShow"
-        name="mask"
-        mode-class="fade"
-        :styles="maskClass"
-        :duration="duration"
-        :show="showTrans"
-        @click="onTap" />
-      <uni-transition
-        key="2"
-        :mode-class="ani"
-        name="content"
-        :styles="transClass"
-        :duration="duration"
-        :show="showTrans"
-        @click="onTap">
-        <view
-          class="uni-popup__wrapper"
-          :style="getStyles"
-          :class="[popupstyle]"
-          @click="clear">
-          <slot />
-        </view>
-      </uni-transition>
-    </view>
-    <!-- #ifdef H5 -->
-    <keypress v-if="maskShow" @esc="onTap" />
-    <!-- #endif -->
-  </view>
-</template>
-
-<script>
-  // #ifdef H5
-  import keypress from './keypress.js';
-  // #endif
-
-  /**
-   * PopUp 弹出层
-   * @description 弹出层组件，为了解决遮罩弹层的问题
-   * @tutorial https://ext.dcloud.net.cn/plugin?id=329
-   * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
-   * 	@value top 顶部弹出
-   * 	@value center 中间弹出
-   * 	@value bottom 底部弹出
-   * 	@value left		左侧弹出
-   * 	@value right  右侧弹出
-   * 	@value message 消息提示
-   * 	@value dialog 对话框
-   * 	@value share 底部分享示例
-   * @property {Boolean} animation = [true|false] 是否开启动画
-   * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
-   * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
-   * @property {String}  backgroundColor 主窗口背景色
-   * @property {String}  maskBackgroundColor 蒙版颜色
-   * @property {String}  borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
-   * @property {Boolean} safeArea		   是否适配底部安全区
-   * @event {Function} change 打开关闭弹窗触发，e={show: false}
-   * @event {Function} maskClick 点击遮罩触发
-   */
-
-  export default {
-    name: 'uniPopup',
-    components: {
-      // #ifdef H5
-      keypress
-      // #endif
-    },
-    emits: ['change', 'maskClick'],
-    props: {
-      // 开启动画
-      animation: {
-        type: Boolean,
-        default: true
-      },
-      // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
-      // message: 消息提示 ; dialog : 对话框
-      type: {
-        type: String,
-        default: 'center'
-      },
-      // maskClick
-      isMaskClick: {
-        type: Boolean,
-        default: null
-      },
-      // TODO 2 个版本后废弃属性 ，使用 isMaskClick
-      maskClick: {
-        type: Boolean,
-        default: null
-      },
-      backgroundColor: {
-        type: String,
-        default: 'none'
-      },
-      safeArea: {
-        type: Boolean,
-        default: true
-      },
-      maskBackgroundColor: {
-        type: String,
-        default: 'rgba(0, 0, 0, 0.4)'
-      },
-      borderRadius: {
-        type: String
-      }
-    },
-
-    watch: {
-      /**
-       * 监听type类型
-       */
-      type: {
-        handler: function (type) {
-          if (!this.config[type]) return;
-          this[this.config[type]](true);
-        },
-        immediate: true
-      },
-      isDesktop: {
-        handler: function (newVal) {
-          if (!this.config[newVal]) return;
-          this[this.config[this.type]](true);
-        },
-        immediate: true
-      },
-      /**
-       * 监听遮罩是否可点击
-       * @param {Object} val
-       */
-      maskClick: {
-        handler: function (val) {
-          this.mkclick = val;
-        },
-        immediate: true
-      },
-      isMaskClick: {
-        handler: function (val) {
-          this.mkclick = val;
-        },
-        immediate: true
-      },
-      // H5 下禁止底部滚动
-      showPopup(show) {
-        // #ifdef H5
-        // fix by mehaotian 处理 h5 滚动穿透的问题
-        document.getElementsByTagName('body')[0].style.overflow = show
-          ? 'hidden'
-          : 'visible';
-        // #endif
-      }
-    },
-    data() {
-      return {
-        duration: 300,
-        ani: [],
-        showPopup: false,
-        showTrans: false,
-        popupWidth: 0,
-        popupHeight: 0,
-        config: {
-          top: 'top',
-          bottom: 'bottom',
-          center: 'center',
-          left: 'left',
-          right: 'right',
-          message: 'top',
-          dialog: 'center',
-          share: 'bottom'
-        },
-        maskClass: {
-          position: 'fixed',
-          bottom: 0,
-          top: 0,
-          left: 0,
-          right: 0,
-          backgroundColor: 'rgba(0, 0, 0, 0.4)'
-        },
-        transClass: {
-          backgroundColor: 'transparent',
-          borderRadius: this.borderRadius || '0',
-          position: 'fixed',
-          left: 0,
-          right: 0
-        },
-        maskShow: true,
-        mkclick: true,
-        popupstyle: 'top'
-      };
-    },
-    computed: {
-      getStyles() {
-        let res = { backgroundColor: this.bg };
-        if (this.borderRadius || '0') {
-          res = Object.assign(res, { borderRadius: this.borderRadius });
-        }
-        return res;
-      },
-      isDesktop() {
-        return this.popupWidth >= 500 && this.popupHeight >= 500;
-      },
-      bg() {
-        if (this.backgroundColor === '' || this.backgroundColor === 'none') {
-          return 'transparent';
-        }
-        return this.backgroundColor;
-      }
-    },
-    mounted() {
-      const fixSize = () => {
-        // #ifdef MP-WEIXIN
-        const {
-          windowWidth,
-          windowHeight,
-          windowTop,
-          safeArea,
-          screenHeight,
-          safeAreaInsets
-        } = uni.getWindowInfo();
-        // #endif
-        // #ifndef MP-WEIXIN
-        // const {
-        // 	windowWidth,
-        // 	windowHeight,
-        // 	windowTop,
-        // 	safeArea,
-        // 	screenHeight,
-        // 	safeAreaInsets
-        // } = uni.getSystemInfoSync()
-        // #endif
-        this.popupWidth = windowWidth;
-        this.popupHeight = windowHeight + (windowTop || 0);
-        // TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
-        if (safeArea && this.safeArea) {
-          // #ifdef MP-WEIXIN
-          // this.safeAreaInsets = screenHeight - safeArea.bottom;
-          // #endif
-          // #ifndef MP-WEIXIN
-          this.safeAreaInsets = safeAreaInsets.bottom;
-          // #endif
-        } else {
-          this.safeAreaInsets = 0;
-        }
-      };
-      fixSize();
-      // #ifdef H5
-      // window.addEventListener('resize', fixSize)
-      // this.$once('hook:beforeDestroy', () => {
-      // 	window.removeEventListener('resize', fixSize)
-      // })
-      // #endif
-    },
-    // #ifndef VUE3
-    // TODO vue2
-    // destroyed() {
-    //   this.setH5Visible();
-    // },
-    // #endif
-    // #ifdef VUE3
-    // TODO vue3
-    unmounted() {
-      this.setH5Visible();
-    },
-    // #endif
-    activated() {
-      this.setH5Visible(!this.showPopup);
-    },
-    deactivated() {
-      this.setH5Visible(true);
-    },
-    created() {
-      // this.mkclick =  this.isMaskClick || this.maskClick
-      if (this.isMaskClick === null && this.maskClick === null) {
-        this.mkclick = true;
-      } else {
-        this.mkclick =
-          this.isMaskClick !== null ? this.isMaskClick : this.maskClick;
-      }
-      if (this.animation) {
-        this.duration = 300;
-      } else {
-        this.duration = 0;
-      }
-      // TODO 处理 message 组件生命周期异常的问题
-      this.messageChild = null;
-      // TODO 解决头条冒泡的问题
-      this.clearPropagation = false;
-      this.maskClass.backgroundColor = this.maskBackgroundColor;
-    },
-    methods: {
-      setH5Visible(visible = true) {
-        // #ifdef H5
-        // fix by mehaotian 处理 h5 滚动穿透的问题
-        document.getElementsByTagName('body')[0].style.overflow = visible
-          ? 'visible'
-          : 'hidden';
-        // #endif
-      },
-      /**
-       * 公用方法，不显示遮罩层
-       */
-      closeMask() {
-        this.maskShow = false;
-      },
-      /**
-       * 公用方法，遮罩层禁止点击
-       */
-      disableMask() {
-        this.mkclick = false;
-      },
-      // TODO nvue 取消冒泡
-      clear(e) {
-        // #ifndef APP-NVUE
-        e.stopPropagation();
-        // #endif
-        this.clearPropagation = true;
-      },
-
-      open(direction) {
-        // fix by mehaotian 处理快速打开关闭的情况
-        if (this.showPopup) {
-          return;
-        }
-        let innerType = [
-          'top',
-          'center',
-          'bottom',
-          'left',
-          'right',
-          'message',
-          'dialog',
-          'share'
-        ];
-        if (!(direction && innerType.indexOf(direction) !== -1)) {
-          direction = this.type;
-        }
-        if (!this.config[direction]) {
-          console.error('缺少类型：', direction);
-          return;
-        }
-        this[this.config[direction]]();
-        this.$emit('change', {
-          show: true,
-          type: direction
-        });
-      },
-      close(type) {
-        this.showTrans = false;
-        this.$emit('change', {
-          show: false,
-          type: this.type
-        });
-        clearTimeout(this.timer);
-        // // 自定义关闭事件
-        // this.customOpen && this.customClose()
-        this.timer = setTimeout(() => {
-          this.showPopup = false;
-        }, 300);
-      },
-      // TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
-      touchstart() {
-        this.clearPropagation = false;
-      },
-
-      onTap() {
-        if (this.clearPropagation) {
-          // fix by mehaotian 兼容 nvue
-          this.clearPropagation = false;
-          return;
-        }
-        this.$emit('maskClick');
-        if (!this.mkclick) return;
-        this.close();
-      },
-      /**
-       * 顶部弹出样式处理
-       */
-      top(type) {
-        this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top';
-        this.ani = ['slide-top'];
-        this.transClass = {
-          position: 'fixed',
-          left: 0,
-          right: 0,
-          backgroundColor: this.bg,
-          borderRadius: this.borderRadius || '0'
-        };
-        // TODO 兼容 type 属性 ，后续会废弃
-        if (type) return;
-        this.showPopup = true;
-        this.showTrans = true;
-        this.$nextTick(() => {
-          this.showPoptrans();
-          if (this.messageChild && this.type === 'message') {
-            this.messageChild.timerClose();
-          }
-        });
-      },
-      /**
-       * 底部弹出样式处理
-       */
-      bottom(type) {
-        this.popupstyle = 'bottom';
-        this.ani = ['slide-bottom'];
-        this.transClass = {
-          position: 'fixed',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          paddingBottom: this.safeAreaInsets + 'px',
-          backgroundColor: this.bg,
-          borderRadius: this.borderRadius || '0'
-        };
-        // TODO 兼容 type 属性 ，后续会废弃
-        if (type) return;
-        this.showPoptrans();
-      },
-      /**
-       * 中间弹出样式处理
-       */
-      center(type) {
-        this.popupstyle = 'center';
-        //微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理
-        // #ifdef MP-WEIXIN
-        this.ani = ['fade'];
-        // #endif
-        // #ifndef MP-WEIXIN
-        this.ani = ['zoom-out', 'fade'];
-        // #endif
-        this.transClass = {
-          position: 'fixed',
-          /* #ifndef APP-NVUE */
-          display: 'flex',
-          flexDirection: 'column',
-          /* #endif */
-          bottom: 0,
-          left: 0,
-          right: 0,
-          top: 0,
-          justifyContent: 'center',
-          alignItems: 'center',
-          borderRadius: this.borderRadius || '0'
-        };
-        // TODO 兼容 type 属性 ，后续会废弃
-        if (type) return;
-        this.showPoptrans();
-      },
-      left(type) {
-        this.popupstyle = 'left';
-        this.ani = ['slide-left'];
-        this.transClass = {
-          position: 'fixed',
-          left: 0,
-          bottom: 0,
-          top: 0,
-          backgroundColor: this.bg,
-          borderRadius: this.borderRadius || '0',
-          /* #ifndef APP-NVUE */
-          display: 'flex',
-          flexDirection: 'column'
-          /* #endif */
-        };
-        // TODO 兼容 type 属性 ，后续会废弃
-        if (type) return;
-        this.showPoptrans();
-      },
-      right(type) {
-        this.popupstyle = 'right';
-        this.ani = ['slide-right'];
-        this.transClass = {
-          position: 'fixed',
-          bottom: 0,
-          right: 0,
-          top: 0,
-          backgroundColor: this.bg,
-          borderRadius: this.borderRadius || '0',
-          /* #ifndef APP-NVUE */
-          display: 'flex',
-          flexDirection: 'column'
-          /* #endif */
-        };
-        // TODO 兼容 type 属性 ，后续会废弃
-        if (type) return;
-        this.showPoptrans();
-      },
-      showPoptrans() {
-        this.$nextTick(() => {
-          this.showPopup = true;
-          this.showTrans = true;
-        });
-      }
-    }
-  };
-</script>
-<style lang="scss">
-  .uni-popup {
-    position: fixed;
-    /* #ifndef APP-NVUE */
-    z-index: 99;
-
-    /* #endif */
-    &.top,
-    &.left,
-    &.right {
-      /* #ifdef H5 */
-      top: var(--window-top);
-      /* #endif */
-      /* #ifndef H5 */
-      top: 0;
-      /* #endif */
-    }
-
-    .uni-popup__wrapper {
-      /* #ifndef APP-NVUE */
-      display: block;
-      /* #endif */
-      position: relative;
-
-      /* iphonex 等安全区设置，底部安全区适配 */
-      /* #ifndef APP-NVUE */
-      // padding-bottom: constant(safe-area-inset-bottom);
-      // padding-bottom: env(safe-area-inset-bottom);
-      /* #endif */
-      &.left,
-      &.right {
-        /* #ifdef H5 */
-        padding-top: var(--window-top);
-        /* #endif */
-        /* #ifndef H5 */
-        padding-top: 0;
-        /* #endif */
-        flex: 1;
-      }
-    }
-  }
-
-  .fixforpc-z-index {
-    /* #ifndef APP-NVUE */
-    z-index: 999;
-    /* #endif */
-  }
-
-  .fixforpc-top {
-    top: 0;
-  }
-</style>

package/src/uni-ui/lib/uni-popup-dialog/keypress.js

@@ -1,45 +0,0 @@
-// #ifdef H5
-export default {
-  name: 'Keypress',
-  props: {
-    disable: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted () {
-    const keyNames = {
-      esc: ['Esc', 'Escape'],
-      tab: 'Tab',
-      enter: 'Enter',
-      space: [' ', 'Spacebar'],
-      up: ['Up', 'ArrowUp'],
-      left: ['Left', 'ArrowLeft'],
-      right: ['Right', 'ArrowRight'],
-      down: ['Down', 'ArrowDown'],
-      delete: ['Backspace', 'Delete', 'Del']
-    }
-    const listener = ($event) => {
-      if (this.disable) {
-        return
-      }
-      const keyName = Object.keys(keyNames).find(key => {
-        const keyName = $event.key
-        const value = keyNames[key]
-        return value === keyName || (Array.isArray(value) && value.includes(keyName))
-      })
-      if (keyName) {
-        // 避免和其他按键事件冲突
-        setTimeout(() => {
-          this.$emit(keyName, {})
-        }, 0)
-      }
-    }
-    document.addEventListener('keyup', listener)
-    this.$once('hook:beforeDestroy', () => {
-      document.removeEventListener('keyup', listener)
-    })
-  },
-	render: () => {}
-}
-// #endif