[improvement] rename packages dir to src (#3659)

src/mixins/popup/context.ts

@@ -0,0 +1,16 @@
+import { OverlayConfig } from './overlay';
+
+export type StackItem = {
+  vm: any;
+  config: OverlayConfig;
+};
+
+export const context = {
+  zIndex: 2000,
+  lockCount: 0,
+  stack: [] as StackItem[],
+
+  get top(): StackItem {
+    return this.stack[this.stack.length - 1];
+  }
+};

src/mixins/popup/index.js

@@ -0,0 +1,191 @@
+import { context } from './context';
+import { TouchMixin } from '../touch';
+import { PortalMixin } from '../portal';
+import { on, off, preventDefault } from '../../utils/dom/event';
+import { openOverlay, closeOverlay, updateOverlay } from './overlay';
+import { getScrollEventTarget } from '../../utils/dom/scroll';
+
+export const PopupMixin = {
+  mixins: [
+    TouchMixin,
+    PortalMixin({
+      afterPortal() {
+        if (this.overlay) {
+          updateOverlay();
+        }
+      }
+    })
+  ],
+
+  props: {
+    // whether to show popup
+    value: Boolean,
+    // whether to show overlay
+    overlay: Boolean,
+    // overlay custom style
+    overlayStyle: Object,
+    // overlay custom class name
+    overlayClass: String,
+    // whether to close popup when click overlay
+    closeOnClickOverlay: Boolean,
+    // z-index
+    zIndex: [String, Number],
+    // prevent body scroll
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    // whether to lazy render
+    lazyRender: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      inited: this.value
+    };
+  },
+
+  computed: {
+    shouldRender() {
+      return this.inited || !this.lazyRender;
+    }
+  },
+
+  watch: {
+    value(val) {
+      const type = val ? 'open' : 'close';
+      this.inited = this.inited || this.value;
+      this[type]();
+      this.$emit(type);
+    },
+
+    overlay() {
+      this.renderOverlay();
+    }
+  },
+
+  mounted() {
+    if (this.value) {
+      this.open();
+    }
+  },
+
+  /* istanbul ignore next */
+  activated() {
+    if (this.value) {
+      this.open();
+    }
+  },
+
+  beforeDestroy() {
+    this.close();
+
+    if (this.getContainer && this.$parent && this.$parent.$el) {
+      this.$parent.$el.appendChild(this.$el);
+    }
+  },
+
+  /* istanbul ignore next */
+  deactivated() {
+    this.close();
+  },
+
+  methods: {
+    open() {
+      /* istanbul ignore next */
+      if (this.$isServer || this.opened) {
+        return;
+      }
+
+      // cover default zIndex
+      if (this.zIndex !== undefined) {
+        context.zIndex = this.zIndex;
+      }
+
+      this.opened = true;
+      this.renderOverlay();
+
+      if (this.lockScroll) {
+        on(document, 'touchstart', this.touchStart);
+        on(document, 'touchmove', this.onTouchMove);
+
+        if (!context.lockCount) {
+          document.body.classList.add('van-overflow-hidden');
+        }
+        context.lockCount++;
+      }
+    },
+
+    close() {
+      if (!this.opened) {
+        return;
+      }
+
+      if (this.lockScroll) {
+        context.lockCount--;
+        off(document, 'touchstart', this.touchStart);
+        off(document, 'touchmove', this.onTouchMove);
+
+        if (!context.lockCount) {
+          document.body.classList.remove('van-overflow-hidden');
+        }
+      }
+
+      this.opened = false;
+      closeOverlay(this);
+      this.$emit('input', false);
+    },
+
+    onTouchMove(event) {
+      this.touchMove(event);
+      const direction = this.deltaY > 0 ? '10' : '01';
+      const el = getScrollEventTarget(event.target, this.$el);
+      const { scrollHeight, offsetHeight, scrollTop } = el;
+      let status = '11';
+
+      /* istanbul ignore next */
+      if (scrollTop === 0) {
+        status = offsetHeight >= scrollHeight ? '00' : '01';
+      } else if (scrollTop + offsetHeight >= scrollHeight) {
+        status = '10';
+      }
+
+      /* istanbul ignore next */
+      if (
+        status !== '11' &&
+        this.direction === 'vertical' &&
+        !(parseInt(status, 2) & parseInt(direction, 2))
+      ) {
+        preventDefault(event, true);
+      }
+    },
+
+    renderOverlay() {
+      if (this.$isServer || !this.value) {
+        return;
+      }
+
+      if (this.overlay) {
+        openOverlay(this, {
+          zIndex: context.zIndex++,
+          duration: this.duration,
+          className: this.overlayClass,
+          customStyle: this.overlayStyle
+        });
+      } else {
+        closeOverlay(this);
+      }
+
+      this.updateZIndex();
+    },
+
+    updateZIndex() {
+      this.$nextTick(() => {
+        this.$el.style.zIndex = context.zIndex++;
+      });
+    }
+  }
+};

src/mixins/popup/overlay.ts

@@ -0,0 +1,78 @@
+import Overlay from '../../overlay';
+import { context } from './context';
+import { mount } from '../../utils/functional';
+
+export type OverlayConfig = {
+  zIndex?: number;
+  className?: string;
+  customStyle?: string | object[] | object;
+};
+
+const defaultConfig: OverlayConfig = {
+  className: '',
+  customStyle: {}
+};
+
+let overlay: any;
+
+// close popup when click overlay && closeOnClickOverlay is true
+function onClickOverlay(): void {
+  if (context.top) {
+    const { vm } = context.top;
+    vm.$emit('click-overlay');
+
+    if (vm.closeOnClickOverlay) {
+      if (vm.onClickOverlay) {
+        vm.onClickOverlay();
+      } else {
+        vm.close();
+      }
+    }
+  }
+}
+
+export function updateOverlay(): void {
+  if (!overlay) {
+    overlay = mount(Overlay, {
+      on: {
+        click: onClickOverlay
+      }
+    });
+  }
+
+  if (context.top) {
+    const { vm, config } = context.top;
+
+    const el = vm.$el;
+    const target = el && el.parentNode ? el.parentNode : document.body;
+    if (target) {
+      target.appendChild(overlay.$el);
+    }
+
+    Object.assign(overlay, defaultConfig, config, {
+      visible: true
+    });
+  } else {
+    overlay.visible = false;
+  }
+}
+
+export function openOverlay(vm: any, config: OverlayConfig): void {
+  if (!context.stack.some(item => item.vm === vm)) {
+    context.stack.push({ vm, config });
+    updateOverlay();
+  }
+}
+
+export function closeOverlay(vm: any): void {
+  const { stack } = context;
+
+  if (stack.length) {
+    if (context.top.vm === vm) {
+      stack.pop();
+      updateOverlay();
+    } else {
+      context.stack = stack.filter(item => item.vm !== vm);
+    }
+  }
+}

src/mixins/popup/type.ts

@@ -0,0 +1,13 @@
+export type GetContainer = (container: HTMLElement) => void;
+
+export type PopupMixinProps = {
+  value: boolean;
+  zIndex: string | number;
+  overlay?: boolean;
+  lockScroll: boolean;
+  lazyRender: boolean;
+  overlayClass?: any;
+  overlayStyle?: object | object[];
+  getContainer?: string | GetContainer;
+  closeOnClickOverlay?: boolean;
+};