eoss 0.1.0-alpha.20 → 0.1.0-alpha.21

package/packages/dialog copy/src/dialog.vue

@@ -1,615 +0,0 @@
-<template>
-  <transition
-    name="dialog-fade"
-    @after-enter="afterEnter"
-    @after-leave="afterLeave"
-  >
-    <div
-      v-show="visible"
-      class="es-dialog__wrapper"
-      @click.self="handleWrapperClick"
-    >
-      <div
-        role="dialog"
-        :key="key"
-        :id="id"
-        aria-modal="true"
-        :aria-label="title || 'dialog'"
-        :class="[
-          'es-dialog',
-          { 'is-fullscreen': isFull, 'es-dialog--center': center },
-          customClass
-        ]"
-        ref="dialog"
-        :style="styles"
-      >
-        <div
-          class="es-dialog__header"
-          :class="{ 'es-dialog__drag': drag }"
-          ref="header"
-        >
-          <slot name="title">
-            <div class="es-dialog__title">{{ title }}</div>
-          </slot>
-          <div class="es-dialog__headerbtn">
-            <button
-              class="es-dialog__header-btn"
-              type="button"
-              aria-label="Scale"
-              v-if="
-                showScale && this.width !== '100%' && this.height !== '100%'
-              "
-              @click.stop="handleScale"
-            >
-              <i
-                class="es-dialog__icon es-icon"
-                :class="{
-                  'es-icon-quanping': !isFull,
-                  'es-icon-suofang': isFull
-                }"
-              ></i>
-            </button>
-            <button
-              class="es-dialog__header-btn"
-              type="button"
-              aria-label="Close"
-              v-if="showClose"
-              @click.stop="handleClose"
-            >
-              <i class="es-dialog__icon es-icon es-icon-guanbi"></i>
-            </button>
-          </div>
-        </div>
-        <div
-          class="es-dialog__body"
-          v-if="rendered"
-          ref="body"
-          :style="bodyStyle"
-        >
-          <slot></slot>
-        </div>
-        <div class="es-dialog__footer" v-if="$slots.footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-/**
- * Dialog 对话框组件
- * 功能说明：在保留当前页面状态的情况下，告知用户并承载相关操作
- * 适用场景：需要用户确认、输入信息或展示详细内容的场景
- */
-import Popup from 'eoss/src/utils/popup';
-import { getWinTop } from 'eoss/src/utils/util';
-import Migrating from 'eoss/src/mixins/migrating';
-import emitter from 'eoss/src/mixins/emitter';
-import { debounce } from 'throttle-debounce';
-// 初始化为默认值，将在组件挂载时动态计算
-let availWidth = 900;
-let availHeight = 600;
-export default {
-  name: 'EsDialog',
-
-  mixins: [Popup, emitter, Migrating],
-
-  props: {
-    /**
-     * 对话框的唯一标识
-     */
-    id: String,
-    /**
-     * 对话框的标题
-     */
-    title: {
-      type: String,
-      default: ''
-    },
-
-    /**
-     * 是否需要遮罩层
-     */
-    modal: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * 遮罩层是否插入至 body 元素上
-     */
-    modalAppendToBody: {
-      type: Boolean,
-      default() {
-        return this.appendToBody;
-      }
-    },
-
-    /**
-     * 对话框自身是否插入至 body 元素上
-     */
-    appendToBody: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * 是否在对话框出现时将 body 滚动锁定
-     */
-    lockScroll: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * 是否可以通过点击遮罩层关闭对话框
-     */
-    closeOnClickModal: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * 是否可以通过按下 ESC 关闭对话框
-     */
-    closeOnPressEscape: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * 是否显示全屏切换按钮
-     */
-    showScale: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * 是否显示关闭按钮
-     */
-    showClose: {
-      type: Boolean,
-      default: true
-    },
-
-    /**
-     * 对话框的宽度
-     */
-    width: [String, Number],
-    /**
-     * 对话框的高度
-     */
-    height: [String, Number],
-
-    /**
-     * 对话框的自定义类名
-     */
-    customClass: {
-      type: String,
-      default: ''
-    },
-    /**
-     * 关闭前的回调函数
-     */
-    beforeClose: Function,
-    /**
-     * 是否对头部和底部采用居中布局
-     */
-    center: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 对话框的尺寸
-     */
-    size: {
-      type: String,
-      default: 'sm'
-    },
-    /**
-     * 关闭时是否销毁对话框中的元素
-     */
-    destroyOnClose: Boolean,
-    /**
-     * 是否可拖动
-     */
-    drag: Boolean,
-    /**
-     * 对话框的变换样式
-     */
-    transform: String
-  },
-
-  data() {
-    return {
-      original: {},
-      initial: {},
-      styles: {},
-      closed: false,
-      key: 0,
-      full: false,
-      isMove: false,
-      isFull: false,
-      resizeObserver: null,
-      sizes: {
-        mini: { width: '720px', height: '400px' },
-        sm: { width: '960px', height: '500px' },
-        md: { width: '1060px', height: '600px' },
-        lg: { width: '1200px', height: availHeight < 800 ? '560px' : '800px' },
-        max: { width: `${availWidth}px`, height: `${availHeight}px` },
-        full: { width: '100%', height: '100%' }
-      },
-      defaultProps: {},
-      zoom: 1,
-      scales: { zoom: 1 }
-    };
-  },
-
-  watch: {
-    _width: {
-      immediate: true,
-      handler(val) {
-        this.initStyle({ width: val });
-      }
-    },
-    _height: {
-      immediate: true,
-      handler(val) {
-        if (val) {
-          this.initStyle({ height: val });
-        }
-      }
-    },
-    visible: {
-      immediate: true,
-      handler(val, old) {
-        if (val) {
-          if (
-            !this.height ||
-            this.height === 'auto' ||
-            !this.width ||
-            this.width === 'auto'
-          ) {
-            this.$nextTick(() => {
-              const { height, width } =
-                this.$refs.dialog.getBoundingClientRect();
-              let style = {};
-              if (!this.height || this.height === 'auto') {
-                style.height = height + 'px';
-              }
-              if (!this.width || this.width === 'auto') {
-                style.width = width + 'px';
-              }
-              this.initStyle(style);
-              (!this.height || this.height === 'auto') &&
-                this.initResizeObserver();
-            });
-          }
-          this.closed = false;
-          this.$emit('open');
-          this.$el && this.$el.addEventListener('scroll', this.updatePopper);
-          this.$nextTick(() => {
-            this.$refs.dialog.scrollTop = 0;
-          });
-          if (this.appendToBody && this.$el) {
-            // 使用 getWinTop() 获取顶层窗口的 document
-            const topWindow = getWinTop();
-            topWindow.document.body.appendChild(this.$el);
-          }
-        } else if (old !== undefined) {
-          if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-          }
-          this.$el && this.$el.removeEventListener('scroll', this.updatePopper);
-          if (!this.closed) this.$emit('close');
-          if (this.destroyOnClose) {
-            this.$nextTick(() => {
-              this.key++;
-            });
-          }
-        }
-      }
-    }
-  },
-
-  computed: {
-    bodyStyle() {
-      return this.styles.height && this.styles.height !== 'auto'
-        ? { height: 'calc(100% - 48px)' }
-        : {};
-    },
-
-    _width() {
-      return this.width ? this.width : this.sizes[this.size]['width'];
-    },
-    _height() {
-      return this.height ? this.height : this.sizes[this.size]['height'];
-    }
-  },
-  created() {},
-
-  mounted() {
-    // 动态计算窗口可用尺寸
-    this.calculateAvailSize();
-    // 监听窗口大小变化，重新计算尺寸
-    window.addEventListener('resize', this.calculateAvailSize);
-
-    if (this.visible) {
-      this.open();
-      if (this.appendToBody) {
-        // 使用 getWinTop() 获取顶层窗口的 document
-        const topWindow = getWinTop();
-        topWindow.document.body.appendChild(this.$el);
-      }
-    }
-    if (this.drag) {
-      this.move();
-    }
-  },
-
-  methods: {
-    /**
-     * 初始化对话框样式
-     * @param {Object} values - 样式值对象
-     */
-    initStyle(values) {
-      // 使用getWinTop获取顶层document
-      const topWindow = getWinTop();
-      const rect = topWindow.document.body.getBoundingClientRect();
-      const position = { height: 'top', width: 'left' };
-      let style = JSON.parse(JSON.stringify(this.styles));
-      for (let i in values) {
-        if (values[i]) {
-          let val = values[i];
-          style[i] =
-            this[i] === 'auto'
-              ? this[i]
-              : typeof val === 'number'
-              ? val + 'px'
-              : val === 'auto' ||
-                val.indexOf('%') > -1 ||
-                val.indexOf('px') > -1
-              ? val
-              : val + 'px';
-          if (val !== 'auto') {
-            let n = parseInt(val, 10);
-            if (typeof val === 'string' && val.indexOf('%') > -1) {
-              style[position[i]] = (rect[i] - (rect[i] * n) / 100) / 2 + 'px';
-            } else {
-              style[position[i]] = (rect[i] - n) / 2 + 'px';
-            }
-          }
-        }
-      }
-      this.styles = style;
-      this.original = JSON.parse(JSON.stringify(this.styles));
-      this.initial = JSON.parse(JSON.stringify(this.styles));
-      if (this.width === '100%' && this.height === '100%') {
-        this.isFull = true;
-      } else {
-        this.isFull = false;
-      }
-    },
-    /**
-     * 初始化 resize 观察器
-     */
-    initResizeObserver: debounce(300, function () {
-      // 断开之前的观察器
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect();
-      }
-
-      this.resizeObserver = new ResizeObserver((entries) => {
-        requestAnimationFrame(() => {
-          let { height, width } = this.$refs.dialog.getBoundingClientRect();
-          this.initStyle({
-            height,
-            width
-          });
-        });
-      });
-      // 确保 body 元素存在时才调用 observe 方法
-      if (this.$refs.body) {
-        this.resizeObserver.observe(this.$refs.body);
-      }
-    }),
-    /**
-     * 初始化对话框拖动功能
-     */
-    move() {
-      let area = this.$refs.header;
-      let box = this.$refs.dialog;
-      let [sTime, eTime] = [0, 0];
-      area.addEventListener('mousedown', (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        sTime = new Date().getTime();
-        let { x: downX, y: downY } = e;
-        let { width: winW, height: winH } =
-          document.body.getBoundingClientRect();
-        // 防止拖动期间选中和复制网页文本
-        document.body.onselectstart = document.body.oncontextmenu = () => {
-          return false;
-        };
-        document.onmousemove = (eve) => {
-          this.isMove = true;
-          let { x: moveX, y: moveY } = eve;
-          let {
-            left: boxLeft,
-            top: boxTop,
-            width: boxW
-          } = box.getBoundingClientRect();
-          boxLeft = boxLeft + (moveX - downX);
-          boxLeft >= winW - 60 && (boxLeft = winW - 60);
-          boxLeft <= 60 - boxW && (boxLeft = 60 - boxW);
-          box.style.left = boxLeft + 'px';
-          downX = moveX;
-          boxTop = boxTop + (moveY - downY);
-          boxTop >= winH - 40 && (boxTop = winH - 40);
-          boxTop <= 0 && (boxTop = 0);
-          box.style.top = boxTop + 'px';
-          downY = moveY;
-        };
-        document.onmouseup = () => {
-          eTime = new Date().getTime();
-          let isClick = eTime - sTime < 200;
-          if (isClick) {
-            this.isMove = false;
-            let onArea = () => {
-              area.removeEventListener('click', onArea);
-            };
-            area.addEventListener('click', onArea);
-          }
-          this.$emit('move');
-          document.onmousemove = null;
-          document.body.onselectstart = document.body.oncontextmenu = () => {
-            return true;
-          };
-        };
-      });
-    },
-    /**
-     * 获取迁移配置
-     * @returns {Object} 迁移配置对象
-     */
-    getMigratingConfig() {
-      return {
-        props: {
-          size: 'size is removed.'
-        }
-      };
-    },
-    /**
-     * 处理遮罩层点击事件
-     */
-    handleWrapperClick() {
-      if (!this.closeOnClickModal) return;
-      this.handleClose();
-    },
-    /**
-     * 处理关闭按钮点击事件
-     */
-    handleClose() {
-      if (typeof this.beforeClose === 'function') {
-        this.beforeClose(this.hide);
-      } else {
-        this.hide(0);
-      }
-    },
-    /**
-     * 处理全屏切换事件
-     */
-    handleScale() {
-      this.isFull = !this.isFull;
-      if (this.isFull) {
-        const { width, height, left, top } = this.$refs.dialog.style;
-        this.initial = { width, height, left, top };
-        this.styles = { width: '100%', height: '100%' };
-        this.isMove = false;
-      } else {
-        this.styles = this.initial;
-        this.isMove = this.drag;
-      }
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect();
-      }
-      this.$emit('scale', this.isFull);
-    },
-    /**
-     * 隐藏对话框
-     * @param {*} cancel - 是否取消
-     */
-    hide(cancel) {
-      if (cancel !== false) {
-        this.$emit('update:visible', false);
-        this.$emit('close', cancel);
-        this.closed = true;
-      }
-    },
-    /**
-     * 更新 popper 位置
-     */
-    updatePopper() {
-      this.broadcast('EsSelectDropdown', 'updatePopper');
-      this.broadcast('EsDropdownMenu', 'updatePopper');
-    },
-    /**
-     * 对话框进入动画结束后执行
-     */
-    afterEnter() {
-      this.$emit('opened');
-    },
-    /**
-     * 对话框离开动画结束后执行
-     */
-    afterLeave() {
-      this.$emit('closed');
-      this.styles = {};
-      this.$nextTick(() => {
-        this.styles = JSON.parse(JSON.stringify(this.original));
-        if (this.width === '100%' && this.height === '100%') {
-          this.isFull = true;
-        } else {
-          this.isFull = false;
-        }
-      });
-    },
-    /**
-     * 计算窗口可用尺寸
-     */
-    calculateAvailSize() {
-      try {
-        // 使用getWinTop获取顶层document
-        const topWindow = getWinTop();
-        const topDocument = topWindow.document;
-        if (topDocument && topDocument.body) {
-          // 使用getBoundingClientRect获取准确的尺寸
-          const bodyRect = topDocument.body.getBoundingClientRect();
-          availWidth = bodyRect.width - 96;
-          availHeight = bodyRect.height - 96;
-
-          // 确保尺寸至少为默认值
-          availWidth = Math.max(availWidth, 900);
-          availHeight = Math.max(availHeight, 600);
-
-          // 更新sizes中的尺寸
-          this.$set(this.sizes.max, 'width', `${availWidth}px`);
-          this.$set(this.sizes.max, 'height', `${availHeight}px`);
-          this.$set(
-            this.sizes.lg,
-            'height',
-            `${availHeight < 800 ? '560px' : '800px'}`
-          );
-
-          // 如果当前使用的是这些尺寸，重新应用样式
-          if (this.size === 'max' || this.size === 'lg') {
-            this.initStyle({ width: this._width, height: this._height });
-          }
-        }
-      } catch (error) {
-        // 处理跨域或其他错误
-        console.warn('获取窗口尺寸失败，使用默认值', error);
-        // 确保使用安全的默认值
-        availWidth = 900;
-        availHeight = 600;
-      }
-    }
-  },
-
-  beforeDestroy() {
-    // 移除窗口大小变化监听
-    window.removeEventListener('resize', this.calculateAvailSize);
-  },
-
-  destroyed() {
-    // if appendToBody is true, remove DOM node after destroy
-    if (this.appendToBody && this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el);
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
-  }
-};
-</script>