[improvement] mixins typescript (#3690)

src/circle/demo/index.vue

@@ -54,8 +54,8 @@ export default {
   data() {
     return {
       rate: 30,
-      currentRate1: 0,
+      currentRate1: 30,
-      currentRate2: 0
+      currentRate2: 30
     };
   },
 

src/circle/test/__snapshots__/demo.spec.js.snap

@@ -5,15 +5,15 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
         <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #1989fa; stroke-dashoffset: 3140px; stroke-width: 41px;"></path>
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #1989fa; stroke-dashoffset: 2198px; stroke-width: 41px;"></path>
       </svg>
-      <div class="van-circle__text">0%</div>
+      <div class="van-circle__text">30%</div>
     </div>
     <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
         <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: #fff; stroke: #ebedf0; stroke-width: 60px;"></path>
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #07c160; stroke-dashoffset: 3140px; stroke-width: 61px;"></path>
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #07c160; stroke-dashoffset: 4082px; stroke-width: 61px;"></path>
       </svg>
-      <div class="van-circle__text">0%</div>
+      <div class="van-circle__text">30%</div>
     </div>
     <div><button class="van-button van-button--primary van-button--small"><span class="van-button__text">增加</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">减少</span></button></div>
   </div>

src/dropdown-menu/test/__snapshots__/index.spec.js.snap

@@ -5,7 +5,7 @@ exports[`click option 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2009;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2009;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style=""><span>A</span></div>
       </div>
@@ -27,7 +27,7 @@ exports[`close on click outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -73,7 +73,7 @@ exports[`direction up 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
-    <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
+    <div class="van-popup van-popup--bottom van-dropdown-item__content van-popup-slide-bottom-enter van-popup-slide-bottom-enter-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -105,7 +105,7 @@ exports[`show dropdown item 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -128,7 +128,7 @@ exports[`show dropdown item 2`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -140,7 +140,7 @@ exports[`show dropdown item 2`] = `
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -160,7 +160,7 @@ exports[`show dropdown item 3`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -172,7 +172,7 @@ exports[`show dropdown item 3`] = `
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">

src/mixins/bind-event.ts

@@ -3,15 +3,19 @@
  */
 import { on, off } from '../utils/dom/event';
 
-export function BindEventMixin(handler) {
+type BindEventMixinThis = {
-  function bind() {
+  binded: boolean;
+};
+
+export function BindEventMixin(handler: Function) {
+  function bind(this: BindEventMixinThis) {
     if (!this.binded) {
       handler.call(this, on, true);
       this.binded = true;
     }
   }
 
-  function unbind() {
+  function unbind(this: BindEventMixinThis) {
     if (this.binded) {
       handler.call(this, off, false);
       this.binded = false;

src/mixins/click-outside.js

@@ -1,20 +0,0 @@
-/**
- * Listen to click outside event
- */
-import { on, off } from '../utils/dom/event';
-
-export const ClickOutsideMixin = config => ({
-  mounted() {
-    this.clickOutsideHandler = event => {
-      if (!this.$el.contains(event.target)) {
-        this[config.method]();
-      }
-    };
-
-    on(document, config.event, this.clickOutsideHandler);
-  },
-
-  beforeDestroy() {
-    off(document, config.event, this.clickOutsideHandler);
-  }
-});

src/mixins/click-outside.ts

@@ -0,0 +1,31 @@
+/**
+ * Listen to click outside event
+ */
+import Vue from 'vue';
+import { on, off } from '../utils/dom/event';
+
+export type ClickOutsideMixinConfig = {
+  event: string;
+  method: string;
+};
+
+export const ClickOutsideMixin = (config: ClickOutsideMixinConfig) =>
+  Vue.extend({
+    data() {
+      const clickOutsideHandler = (event: Event) => {
+        if (!this.$el.contains(event.target as Node)) {
+          (this as any)[config.method]();
+        }
+      };
+
+      return { clickOutsideHandler };
+    },
+
+    mounted() {
+      on(document, config.event, this.clickOutsideHandler);
+    },
+
+    beforeDestroy() {
+      off(document, config.event, this.clickOutsideHandler);
+    }
+  });

src/mixins/popup/type.ts

@@ -1,4 +1,4 @@
-export type GetContainer = (container: HTMLElement) => void;
+export type GetContainer = () => HTMLElement;
 
 export type PopupMixinProps = {
   value: boolean;

src/mixins/portal.ts

@@ -1,4 +1,11 @@
-function getElement(selector) {
+import Vue, { PropType } from 'vue';
+import { GetContainer } from './popup/type';
+
+type PortalMixinOptions = {
+  afterPortal?: () => void;
+};
+
+function getElement(selector: string | GetContainer): Element | null {
   if (typeof selector === 'string') {
     return document.querySelector(selector);
   }
@@ -6,10 +13,10 @@ function getElement(selector) {
   return selector();
 }
 
-export function PortalMixin({ afterPortal }) {
+export function PortalMixin({ afterPortal }: PortalMixinOptions) {
-  return {
+  return Vue.extend({
     props: {
-      getContainer: [String, Function]
+      getContainer: [String, Function] as (PropType<string | GetContainer>)
     },
 
     watch: {
@@ -44,5 +51,5 @@ export function PortalMixin({ afterPortal }) {
         }
       }
     }
-  };
+  });
 }

src/mixins/relation.ts

@@ -1,7 +1,13 @@
-export function ChildrenMixin(parent, options = {}) {
+import Vue from 'vue';
+
+type ChildrenMixinOptions = {
+  indexKey?: any;
+};
+
+export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}) {
   const indexKey = options.indexKey || 'index';
 
-  return {
+  return Vue.extend({
     inject: {
       [parent]: {
         default: null
@@ -10,7 +16,7 @@ export function ChildrenMixin(parent, options = {}) {
 
     computed: {
       parent() {
-        return this[parent];
+        return (this as any)[parent];
       },
 
       [indexKey]() {
@@ -25,7 +31,7 @@ export function ChildrenMixin(parent, options = {}) {
 
     beforeDestroy() {
       if (this.parent) {
-        this.parent.children = this.parent.children.filter(item => item !== this);
+        this.parent.children = this.parent.children.filter((item: any) => item !== this);
       }
     },
 
@@ -48,10 +54,10 @@ export function ChildrenMixin(parent, options = {}) {
         }
       }
     }
-  };
+  });
 }
 
-export function ParentMixin(parent) {
+export function ParentMixin(parent: string) {
   return {
     provide() {
       return {

src/mixins/slots.js

@@ -1,16 +0,0 @@
-/**
- * Use scopedSlots in Vue 2.6+
- * downgrade to slots in lower version
- */
-
-export const SlotsMixin = {
-  methods: {
-    slots(name = 'default', props) {
-      const { $slots, $scopedSlots } = this;
-      if ($scopedSlots[name]) {
-        return $scopedSlots[name](props);
-      }
-      return $slots[name];
-    }
-  }
-};

src/mixins/slots.ts

@@ -0,0 +1,20 @@
+/**
+ * Use scopedSlots in Vue 2.6+
+ * downgrade to slots in lower version
+ */
+import Vue from 'vue';
+
+export const SlotsMixin = Vue.extend({
+  methods: {
+    slots(name = 'default', props: any) {
+      const { $slots, $scopedSlots } = this;
+      const scopedSlot = $scopedSlots[name];
+
+      if (scopedSlot) {
+        return scopedSlot(props);
+      }
+
+      return $slots[name];
+    }
+  }
+});

src/mixins/touch.ts

@@ -1,29 +1,42 @@
+import Vue from 'vue';
+
 const MIN_DISTANCE = 10;
-function getDirection(x, y) {
+
+function getDirection(x: number, y: number) {
   if (x > y && x > MIN_DISTANCE) {
     return 'horizontal';
   }
+
   if (y > x && y > MIN_DISTANCE) {
     return 'vertical';
   }
+
   return '';
 }
 
-export const TouchMixin = {
+type TouchMixinData = {
-  data() {
+  startX: number;
-    return {
+  startY: number;
-      direction: ''
+  deltaX: number;
+  deltaY: number;
+  offsetX: number;
+  offsetY: number;
+  direction: string;
 };
+
+export const TouchMixin = Vue.extend({
+  data() {
+    return { direction: '' } as TouchMixinData;
   },
 
   methods: {
-    touchStart(event) {
+    touchStart(event: TouchEvent) {
       this.resetTouchStatus();
       this.startX = event.touches[0].clientX;
       this.startY = event.touches[0].clientY;
     },
 
-    touchMove(event) {
+    touchMove(event: TouchEvent) {
       const touch = event.touches[0];
       this.deltaX = touch.clientX - this.startX;
       this.deltaY = touch.clientY - this.startY;
@@ -40,4 +53,4 @@ export const TouchMixin = {
       this.offsetY = 0;
     }
   }
-};
+});

src/utils/create/bem.ts

@@ -47,3 +47,5 @@ export function createBEM(name: string) {
     return mods ? [el, prefix(el, mods)] : el;
   };
 }
+
+export type BEM = ReturnType<typeof createBEM>;

src/utils/create/i18n.ts

@@ -10,3 +10,5 @@ export function createI18N(name: string) {
     return typeof message === 'function' ? message(...args) : message;
   };
 }
+
+export type Translate = ReturnType<typeof createI18N>;

src/utils/create/index.ts

@@ -1,11 +1,11 @@
-import { createBEM } from './bem';
+import { createBEM, BEM } from './bem';
 import { createComponent } from './component';
-import { createI18N } from './i18n';
+import { createI18N, Translate } from './i18n';
 
 type CreateNamespaceReturn = [
   ReturnType<typeof createComponent>,
-  ReturnType<typeof createBEM>,
+  BEM,
-  ReturnType<typeof createI18N>
+  Translate
 ];
 
 export function createNamespace(name: string): CreateNamespaceReturn {

src/utils/dom/event.ts

@@ -2,7 +2,7 @@
 /* eslint-disable getter-return */
 /* eslint-disable import/no-mutable-exports */
 import { isServer } from '..';
-import { EventHanlder } from '../types';
+import { EventHandler } from '../types';
 
 export let supportsPassive = false;
 
@@ -20,9 +20,9 @@ if (!isServer) {
 }
 
 export function on(
-  target: HTMLElement,
+  target: HTMLElement | Document,
   event: string,
-  handler: EventHanlder,
+  handler: EventHandler,
   passive = false
 ) {
   if (!isServer) {
@@ -34,7 +34,11 @@ export function on(
   }
 }
 
-export function off(target: HTMLElement, event: string, handler: EventHanlder) {
+export function off(
+  target: HTMLElement | Document,
+  event: string,
+  handler: EventHandler
+) {
   if (!isServer) {
     target.removeEventListener(event, handler);
   }

src/utils/types.ts

@@ -1,7 +1,7 @@
 import { VNode, CreateElement, RenderContext } from 'vue';
 import { InjectOptions, PropsDefinition } from 'vue/types/options';
 
-export type EventHanlder = (eventName?: Event) => void;
+export type EventHandler = (event: Event) => void;
 
 export type ObjectIndex = {
   [key: string]: any;