chore: merge src and src-next

src/mixins/bind-event.js

@@ -1,31 +0,0 @@
-/**
- * Bind event when mounted or activated
- */
-import { on, off } from '../utils/dom/event';
-
-let uid = 0;
-
-export function BindEventMixin(handler) {
-  const key = `binded_${uid++}`;
-
-  function bind() {
-    if (!this[key]) {
-      handler.call(this, on, true);
-      this[key] = true;
-    }
-  }
-
-  function unbind() {
-    if (this[key]) {
-      handler.call(this, off, false);
-      this[key] = false;
-    }
-  }
-
-  return {
-    mounted: bind,
-    activated: bind,
-    deactivated: unbind,
-    beforeDestroy: unbind,
-  };
-}

src/mixins/bind-event.ts

@@ -0,0 +1,33 @@
+/**
+ * Bind event when mounted or activated
+ */
+import { on, off } from '../utils/dom/event';
+
+type BindEventMixinThis = {
+  binded: boolean;
+};
+
+type BindEventHandler = (bind: Function, isBind: boolean) => void;
+
+export function BindEventMixin(handler: BindEventHandler) {
+  function bind(this: BindEventMixinThis) {
+    if (!this.binded) {
+      handler.call(this, on, true);
+      this.binded = true;
+    }
+  }
+
+  function unbind(this: BindEventMixinThis) {
+    if (this.binded) {
+      handler.call(this, off, false);
+      this.binded = false;
+    }
+  }
+
+  return {
+    mounted: bind,
+    activated: bind,
+    deactivated: unbind,
+    beforeDestroy: unbind,
+  };
+}

src/mixins/popup/context.ts

@@ -1,9 +1,6 @@
-import { OverlayConfig } from './overlay';
-
 export type StackItem = {
   vm: any;
   overlay: any;
-  config: OverlayConfig;
 };
 
 export const context = {

src/mixins/popup/index.js

@@ -1,11 +1,5 @@
 // Context
 import { context } from './context';
-import {
-  openOverlay,
-  closeOverlay,
-  updateOverlay,
-  removeOverlay,
-} from './overlay';
 
 // Utils
 import { on, off, preventDefault } from '../../utils/dom/event';
@@ -14,18 +8,19 @@ 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,
+  show: Boolean,
   // whether to show overlay
   overlay: Boolean,
   // overlay custom style
   overlayStyle: Object,
   // overlay custom class name
   overlayClass: String,
+  // teleport
+  getContainer: [String, Function],
   // whether to close popup when click overlay
   closeOnClickOverlay: Boolean,
   // z-index
@@ -44,23 +39,13 @@ export const popupMixinProps = {
 
 export function PopupMixin(options = {}) {
   return {
-    mixins: [
-      TouchMixin,
-      CloseOnPopstateMixin,
-      PortalMixin({
-        afterPortal() {
-          if (this.overlay) {
-            updateOverlay();
-          }
-        },
-      }),
-    ],
+    mixins: [TouchMixin, CloseOnPopstateMixin],
 
     props: popupMixinProps,
 
     data() {
       return {
-        inited: this.value,
+        inited: this.show,
       };
     },
 
@@ -71,9 +56,9 @@ export function PopupMixin(options = {}) {
     },
 
     watch: {
-      value(val) {
+      show(val) {
         const type = val ? 'open' : 'close';
-        this.inited = this.inited || this.value;
+        this.inited = this.inited || this.show;
         this[type]();
 
         if (!options.skipToggleEvent) {
@@ -85,7 +70,7 @@ export function PopupMixin(options = {}) {
     },
 
     mounted() {
-      if (this.value) {
+      if (this.show) {
         this.open();
       }
     },
@@ -93,23 +78,22 @@ export function PopupMixin(options = {}) {
     /* istanbul ignore next */
     activated() {
       if (this.shouldReopen) {
-        this.$emit('input', true);
+        this.$emit('update:show', true);
         this.shouldReopen = false;
       }
     },
 
     beforeDestroy() {
       this.removeLock();
-      removeOverlay(this);
 
       if (this.getContainer) {
-        removeNode(this.$el);
+        removeNode(this.$refs.root);
       }
     },
 
     /* istanbul ignore next */
     deactivated() {
-      if (this.value) {
+      if (this.show) {
         this.close();
         this.shouldReopen = true;
       }
@@ -161,16 +145,15 @@ export function PopupMixin(options = {}) {
           return;
         }
 
-        closeOverlay(this);
         this.opened = false;
         this.removeLock();
-        this.$emit('input', false);
+        this.$emit('update:show', false);
       },
 
       onTouchMove(event) {
         this.touchMove(event);
         const direction = this.deltaY > 0 ? '10' : '01';
-        const el = getScroller(event.target, this.$el);
+        const el = getScroller(event.target, this.$refs.root);
         const { scrollHeight, offsetHeight, scrollTop } = el;
         let status = '11';
 
@@ -191,29 +174,32 @@ export function PopupMixin(options = {}) {
         }
       },
 
+      onClickOverlay() {
+        this.$emit('click-overlay');
+
+        if (this.closeOnClickOverlay) {
+          // TODO
+          // if (this.onClickOverlay) {
+          //   this.onClickOverlay();
+          // } else {
+          //   this.close();
+          // }
+          this.close();
+        }
+      },
+
       renderOverlay() {
-        if (this.$isServer || !this.value) {
+        if (this.$isServer || !this.show) {
           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;
+        this.$refs.root.style.zIndex = ++context.zIndex + value;
       },
     },
   };

src/mixins/popup/overlay.ts

@@ -1,77 +0,0 @@
-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/mixins/portal.js

@@ -1,47 +0,0 @@
-function getElement(selector) {
-  if (typeof selector === 'string') {
-    return document.querySelector(selector);
-  }
-
-  return selector();
-}
-
-export function PortalMixin({ ref, afterPortal }) {
-  return {
-    props: {
-      getContainer: [String, Function],
-    },
-
-    watch: {
-      getContainer: 'portal',
-    },
-
-    mounted() {
-      if (this.getContainer) {
-        this.portal();
-      }
-    },
-
-    methods: {
-      portal() {
-        const { getContainer } = this;
-        const el = ref ? this.$refs[ref] : this.$el;
-
-        let container;
-        if (getContainer) {
-          container = getElement(getContainer);
-        } else if (this.$parent) {
-          container = this.$parent.$el;
-        }
-
-        if (container && container !== el.parentNode) {
-          container.appendChild(el);
-        }
-
-        if (afterPortal) {
-          afterPortal.call(this);
-        }
-      },
-    },
-  };
-}

src/mixins/relation.js

@@ -1,24 +1,16 @@
-import { sortChildren } from '../utils/vnodes';
-
 export function ChildrenMixin(parent, options = {}) {
   const indexKey = options.indexKey || 'index';
 
   return {
     inject: {
-      [parent]: {
+      // TODO: disableBindRelation
+      parent: {
+        from: parent,
         default: null,
       },
     },
 
     computed: {
-      parent() {
-        if (this.disableBindRelation) {
-          return null;
-        }
-
-        return this[parent];
-      },
-
       [indexKey]() {
         this.bindRelation();
 
@@ -30,14 +22,6 @@ export function ChildrenMixin(parent, options = {}) {
       },
     },
 
-    watch: {
-      disableBindRelation(val) {
-        if (!val) {
-          this.bindRelation();
-        }
-      },
-    },
-
     mounted() {
       this.bindRelation();
     },
@@ -58,8 +42,6 @@ export function ChildrenMixin(parent, options = {}) {
 
         const children = [...this.parent.children, this];
 
-        sortChildren(children, this.parent);
-
         this.parent.children = children;
       },
     },