chore: move mixins

src-next/mixins/popup/context.ts

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

src-next/mixins/popup/index.js

@@ -0,0 +1,220 @@
+// Context
+import { context } from './context';
+import {
+  openOverlay,
+  closeOverlay,
+  updateOverlay,
+  removeOverlay,
+} from './overlay';
+
+// Utils
+import { on, off, preventDefault } from '../../utils/dom/event';
+import { removeNode } from '../../utils/dom/node';
+import { getScroller } from '../../utils/dom/scroll';
+
+// Mixins
+import { TouchMixin } from '../touch';
+import { PortalMixin } from '../portal';
+import { CloseOnPopstateMixin } from '../close-on-popstate';
+
+export const popupMixinProps = {
+  // 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: [Number, String],
+  // prevent body scroll
+  lockScroll: {
+    type: Boolean,
+    default: true,
+  },
+  // whether to lazy render
+  lazyRender: {
+    type: Boolean,
+    default: true,
+  },
+};
+
+export function PopupMixin(options = {}) {
+  return {
+    mixins: [
+      TouchMixin,
+      CloseOnPopstateMixin,
+      PortalMixin({
+        afterPortal() {
+          if (this.overlay) {
+            updateOverlay();
+          }
+        },
+      }),
+    ],
+
+    props: popupMixinProps,
+
+    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]();
+
+        if (!options.skipToggleEvent) {
+          this.$emit(type);
+        }
+      },
+
+      overlay: 'renderOverlay',
+    },
+
+    mounted() {
+      if (this.value) {
+        this.open();
+      }
+    },
+
+    /* istanbul ignore next */
+    activated() {
+      if (this.shouldReopen) {
+        this.$emit('input', true);
+        this.shouldReopen = false;
+      }
+    },
+
+    beforeDestroy() {
+      this.removeLock();
+      removeOverlay(this);
+
+      if (this.getContainer) {
+        removeNode(this.$el);
+      }
+    },
+
+    /* istanbul ignore next */
+    deactivated() {
+      if (this.value) {
+        this.close();
+        this.shouldReopen = true;
+      }
+    },
+
+    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();
+        this.addLock();
+      },
+
+      addLock() {
+        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++;
+        }
+      },
+
+      removeLock() {
+        if (this.lockScroll && context.lockCount) {
+          context.lockCount--;
+          off(document, 'touchstart', this.touchStart);
+          off(document, 'touchmove', this.onTouchMove);
+
+          if (!context.lockCount) {
+            document.body.classList.remove('van-overflow-hidden');
+          }
+        }
+      },
+
+      close() {
+        if (!this.opened) {
+          return;
+        }
+
+        closeOverlay(this);
+        this.opened = false;
+        this.removeLock();
+        this.$emit('input', false);
+      },
+
+      onTouchMove(event) {
+        this.touchMove(event);
+        const direction = this.deltaY > 0 ? '10' : '01';
+        const el = getScroller(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;
+        }
+
+        this.$nextTick(() => {
+          this.updateZIndex(this.overlay ? 1 : 0);
+
+          if (this.overlay) {
+            openOverlay(this, {
+              zIndex: context.zIndex++,
+              duration: this.duration,
+              className: this.overlayClass,
+              customStyle: this.overlayStyle,
+            });
+          } else {
+            closeOverlay(this);
+          }
+        });
+      },
+
+      updateZIndex(value = 0) {
+        this.$el.style.zIndex = ++context.zIndex + value;
+      },
+    },
+  };
+}

src-next/mixins/popup/overlay.ts

@@ -0,0 +1,77 @@
+import Overlay from '../../overlay';
+import { context } from './context';
+import { mount } from '../../utils/functional';
+import { removeNode } from '../../utils/dom/node';
+
+export type OverlayConfig = {
+  zIndex?: number;
+  className?: string;
+  customStyle?: string | object[] | object;
+};
+
+const defaultConfig: OverlayConfig = {
+  className: '',
+  customStyle: {},
+};
+
+function mountOverlay(vm: any) {
+  return mount(Overlay, {
+    on: {
+      // close popup when overlay clicked & closeOnClickOverlay is true
+      click() {
+        vm.$emit('click-overlay');
+
+        if (vm.closeOnClickOverlay) {
+          if (vm.onClickOverlay) {
+            vm.onClickOverlay();
+          } else {
+            vm.close();
+          }
+        }
+      },
+    },
+  });
+}
+
+export function updateOverlay(vm: any): void {
+  const item = context.find(vm);
+
+  if (item) {
+    const el = vm.$el;
+    const { config, overlay } = item;
+
+    if (el && el.parentNode) {
+      el.parentNode.insertBefore(overlay.$el, el);
+    }
+
+    Object.assign(overlay, defaultConfig, config, {
+      show: true,
+    });
+  }
+}
+
+export function openOverlay(vm: any, config: OverlayConfig): void {
+  const item = context.find(vm);
+  if (item) {
+    item.config = config;
+  } else {
+    const overlay = mountOverlay(vm);
+    context.stack.push({ vm, config, overlay });
+  }
+
+  updateOverlay(vm);
+}
+
+export function closeOverlay(vm: any): void {
+  const item = context.find(vm);
+  if (item) {
+    item.overlay.show = false;
+  }
+}
+
+export function removeOverlay(vm: any) {
+  const item = context.find(vm);
+  if (item) {
+    removeNode(item.overlay.$el);
+  }
+}

src-next/mixins/popup/type.ts

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