Merge branch 'mouse-optimization' into dev

src/core/view/components/button/index.vue

@@ -131,6 +131,7 @@ export default {
 		overflow: hidden;
 		color: #000000;
 		background-color: #F8F8F8;
+		cursor: pointer;
 	}
 
 	uni-button[hidden] {
@@ -192,6 +193,7 @@ export default {
 
 	uni-button[disabled] {
 		color: rgba(255, 255, 255, 0.6);
+		cursor: not-allowed;
 	}
 
 	uni-button[disabled][type=default],
@@ -287,6 +289,10 @@ export default {
 		padding: 0 1.34em;
 	}
 
+	uni-button[loading]:not([disabled]){
+		cursor: progress;
+	}
+
 	uni-button[loading]:before {
 		content: " ";
 		display: inline-block;
@@ -375,4 +381,4 @@ export default {
 		border-color: rgba(230, 67, 64, 0.6);
 		background-color: transparent;
 	}
-</style>
+</style>

src/core/view/components/checkbox/index.vue

 <template>
-  <uni-checkbox
-    v-on="$listeners"
+  <uni-checkbox
+    :disabled="disabled"
+    v-on="$listeners"
     @click="_onClick">
     <div class="uni-checkbox-wrapper">
-      <div
-        :class="[checkboxChecked ? 'uni-checkbox-input-checked' : '']"
-        :style="{color:color}"
+      <div
+        :class="[checkboxChecked ? 'uni-checkbox-input-checked' : '']"
+        :style="{color:color}"
         class="uni-checkbox-input" />
       <slot />
     </div>
@@ -97,12 +98,17 @@ export default {
 	uni-checkbox {
 		-webkit-tap-highlight-color: transparent;
 		display: inline-block;
+    cursor: pointer;
 	}
 
 	uni-checkbox[hidden] {
 		display: none;
 	}
 
+	uni-checkbox[disabled] {
+		cursor: not-allowed;
+	}
+
 	uni-checkbox .uni-checkbox-wrapper {
 		display: -webkit-inline-flex;
 		display: inline-flex;
@@ -124,6 +130,10 @@ export default {
 		position: relative;
 	}
 
+	uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
+		border-color: #007aff;
+	}
+
 	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
 		color: #007aff;
 	}
@@ -150,4 +160,4 @@ export default {
 	uni-checkbox-group {
 		display: block;
 	}
-</style>
+</style>

src/core/view/components/label/index.vue

 <template>
   <uni-label
+    :class="{'uni-label-pointer':pointer}"
     v-on="$listeners"
     @click="_onClick">
     <slot />
@@ -18,6 +19,11 @@ export default {
       default: ''
     }
   },
+  computed: {
+    pointer () {
+      return this.for || (this.$slots.default && this.$slots.default.length)
+    }
+  },
   methods: {
     _onClick ($event) {
       let stopPropagation = /^uni-(checkbox|radio|switch)-/.test($event.target.className)
@@ -38,5 +44,7 @@ export default {
 }
 </script>
 <style>
-
-</style>
+.uni-label-pointer {
+  cursor: pointer;
+}
+</style>

src/core/view/components/movable-view/index.vue

@@ -11,8 +11,8 @@ import {
   Friction,
   STD
 } from './utils'
-import {
-  disableScrollBounce
+import {
+  disableScrollBounce
 } from 'uni-shared'
 var requesting = false
 
@@ -658,6 +658,7 @@ uni-movable-view {
   top: 0px;
   left: 0px;
   position: absolute;
+  cursor: grab;
 }
 
 uni-movable-view[hidden] {

src/core/view/components/navigator/index.vue

 <template>
-  <uni-navigator
-    v-if="hoverClass && hoverClass !== 'none'"
-    :class="[hovering ? hoverClass : '']"
+  <uni-navigator
+    v-if="hoverClass && hoverClass !== 'none'"
+    :class="[hovering ? hoverClass : '']"
     @touchstart="_hoverTouchStart"
-    @touchend="_hoverTouchEnd"
-    @touchcancel="_hoverTouchCancel"
-    @click="_onClick"
+    @touchend="_hoverTouchEnd"
+    @touchcancel="_hoverTouchCancel"
+    @click="_onClick"
     v-on="$listeners">
     <slot />
   </uni-navigator>
-  <uni-navigator
-    v-else
-    @click="_onClick"
+  <uni-navigator
+    v-else
+    @click="_onClick"
     v-on="$listeners">
     <slot />
   </uni-navigator>
@@ -97,18 +97,19 @@ export default {
 }
 </script>
 <style>
-  .navigator-hover {
-    background-color: rgba(0, 0, 0, 0.1);
-    opacity: 0.7;
-  }
-
   uni-navigator {
     height: auto;
     width: auto;
     display: block;
+    cursor: pointer;
   }
 
   uni-navigator[hidden] {
     display: none;
   }
-</style>
+
+  .navigator-hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    opacity: 0.7;
+  }
+</style>

src/core/view/components/picker-view-column/index.vue

@@ -13,16 +13,15 @@ import {
 
 function initClick (dom) {
   const MAX_MOVE = 20
-  const hasTouchSupport = navigator.maxTouchPoints
   let x = 0
   let y = 0
-  dom.addEventListener(hasTouchSupport ? 'touchstart' : 'mousedown', (event) => {
-    const info = hasTouchSupport ? event.changedTouches[0] : event
+  dom.addEventListener('touchstart', (event) => {
+    const info = event.changedTouches[0]
     x = info.clientX
     y = info.clientY
   })
-  dom.addEventListener(hasTouchSupport ? 'touchend' : 'mouseup', (event) => {
-    const info = hasTouchSupport ? event.changedTouches[0] : event
+  dom.addEventListener('touchend', (event) => {
+    const info = event.changedTouches[0]
     if (Math.abs(info.clientX - x) < MAX_MOVE && Math.abs(info.clientY - y) < MAX_MOVE) {
       let customEvent = new CustomEvent('click', {
         bubbles: true,
@@ -301,6 +300,7 @@ export default {
     width: 100%;
     will-change: transform;
     padding: 102px 0;
+    cursor: pointer;
   }
 
   .uni-picker-view-content>* {

src/core/view/components/radio/index.vue

 <template>
-  <uni-radio
-    v-on="$listeners"
+  <uni-radio
+    :disabled="disabled"
+    v-on="$listeners"
     @click="_onClick">
     <div class="uni-radio-wrapper">
-      <div
-        :class="radioChecked ? 'uni-radio-input-checked' : ''"
-        :style="radioChecked ? checkedStyle : ''"
+      <div
+        :class="radioChecked ? 'uni-radio-input-checked' : ''"
+        :style="radioChecked ? checkedStyle : ''"
         class="uni-radio-input" />
       <slot />
     </div>
@@ -102,12 +103,17 @@ export default {
 	uni-radio {
 		-webkit-tap-highlight-color: transparent;
 		display: inline-block;
+		cursor: pointer;
 	}
 
 	uni-radio[hidden] {
 		display: none;
 	}
 
+	uni-radio[disabled] {
+		cursor: not-allowed;
+	}
+
 	uni-radio .uni-radio-wrapper {
 		display: -webkit-inline-flex;
 		display: inline-flex;
@@ -129,6 +135,10 @@ export default {
 		position: relative;
 	}
 
+	uni-radio:not([disabled]) .uni-radio-input:hover {
+		border-color: #007aff;
+	}
+
 	uni-radio .uni-radio-input.uni-radio-input-checked:before {
 		font: normal normal normal 14px/1 "uni";
 		content: "\EA08";
@@ -153,4 +163,4 @@ export default {
 	uni-radio-group {
 		display: block;
 	}
-</style>
+</style>

src/core/view/components/slider/index.vue

 <template>
-  <uni-slider
-    ref="uni-slider"
-    v-on="$listeners"
+  <uni-slider
+    ref="uni-slider"
+    v-on="$listeners"
     @click="_onClick">
     <div class="uni-slider-wrapper">
       <div class="uni-slider-tap-area">
-        <div
-          :style="setBgColor"
+        <div
+          :style="setBgColor"
           class="uni-slider-handle-wrapper">
-          <div
-            ref="uni-slider-handle"
-            :style="setBlockBg"
+          <div
+            ref="uni-slider-handle"
+            :style="setBlockBg"
             class="uni-slider-handle" />
-          <div
-            :style="setBlockStyle"
+          <div
+            :style="setBlockStyle"
             class="uni-slider-thumb" />
-          <div
-            :style="setActiveColor"
+          <div
+            :style="setActiveColor"
             class="uni-slider-track" />
         </div>
       </div>
-      <span
-        v-show="showValue"
+      <span
+        v-show="showValue"
         class="uni-slider-value">{{ sliderValue }}</span>
     </div>
     <slot />
@@ -259,6 +259,7 @@ export default {
 		margin-left: -14px;
 		background-color: transparent;
 		z-index: 3;
+		cursor: grab;
 	}
 
 	uni-slider .uni-slider-thumb {
@@ -288,4 +289,4 @@ export default {
 		background-color: #FFF;
 		border-color: #ccc;
 	}
-</style>
+</style>

src/core/view/components/swiper-item/index.vue

@@ -34,6 +34,7 @@ uni-swiper-item {
   position: absolute;
   width: 100%;
   height: 100%;
+  cursor: grab;
 }
 
 uni-swiper-item[hidden] {

src/core/view/components/swiper/index.vue

@@ -596,6 +596,11 @@ export default {
     for (let index = 0, length = swiperItems.length; index < length; index++) {
       let currentSync = this.currentSync
       slidesDots.push(createElement('div', {
+        on: {
+          click: () => {
+            this._animateViewport(this.currentSync = index, this.currentChangeSource = 'click', this.circularEnabled ? 1 : 0)
+          }
+        },
         class: {
           'uni-swiper-dot': true,
           'uni-swiper-dot-active': (index < currentSync + this.displayMultipleItemsNumber && index >= currentSync) || (index < currentSync + this.displayMultipleItemsNumber - length)

src/core/view/components/switch/index.vue

 <template>
-  <uni-switch
-    v-on="$listeners"
+  <uni-switch
+    :disabled="disabled"
+    v-on="$listeners"
     @click="_onClick">
     <div class="uni-switch-wrapper">
-      <div
-        v-show="type === 'switch'"
-        :class="[switchChecked ? 'uni-switch-input-checked' : '']"
+      <div
+        v-show="type === 'switch'"
+        :class="[switchChecked ? 'uni-switch-input-checked' : '']"
         :style="{backgroundColor: switchChecked ? color : '#DFDFDF',borderColor:switchChecked ? color : '#DFDFDF'}"
         class="uni-switch-input" />
-      <div
-        v-show="type === 'checkbox'"
-        :class="[switchChecked ? 'uni-checkbox-input-checked' : '']"
+      <div
+        v-show="type === 'checkbox'"
+        :class="[switchChecked ? 'uni-checkbox-input-checked' : '']"
         :style="{color: color}"
         class="uni-checkbox-input" />
     </div>
@@ -105,12 +106,17 @@ export default {
 	uni-switch {
 		-webkit-tap-highlight-color: transparent;
 		display: inline-block;
+		cursor: pointer;
 	}
 
 	uni-switch[hidden] {
 		display: none;
 	}
 
+	uni-switch[disabled] {
+		cursor: not-allowed;
+	}
+
 	uni-switch .uni-switch-wrapper {
 		display: -webkit-inline-flex;
 		display: inline-flex;
@@ -134,6 +140,10 @@ export default {
 		transition: background-color 0.1s, border 0.1s;
 	}
 
+	uni-switch[disabled] .uni-switch-input {
+		opacity: .7;
+	}
+
 	uni-switch .uni-switch-input:before {
 		content: " ";
 		position: absolute;
@@ -192,6 +202,10 @@ export default {
 		color: #007aff;
 	}
 
+	uni-switch:not([disabled]) .uni-checkbox-input:hover {
+		border-color: #007aff;
+	}
+
 	uni-switch .uni-checkbox-input.uni-checkbox-input-checked:before {
 		font: normal normal normal 14px/1 "uni";
 		content: "\EA08";
@@ -211,4 +225,4 @@ export default {
 	uni-switch .uni-checkbox-input.uni-checkbox-input-disabled:before {
 		color: #ADADAD;
 	}
-</style>
+</style>

src/core/view/mixins/touchtrack.js

-var addListenerToElement = function (element, type, callback, r) {
-  // 暂时忽略capture
+const addListenerToElement = function (element, type, callback, capture) {
+  // 暂时忽略 capture
   element.addEventListener(type, $event => {
     if (typeof callback === 'function') {
       if (callback($event) === false) {
@@ -13,14 +13,18 @@ var addListenerToElement = function (element, type, callback, r) {
 }
 
 export default {
+  beforeDestroy () {
+    document.removeEventListener('mousemove', this.__mouseMoveEventListener)
+    document.removeEventListener('mouseup', this.__mouseUpEventListener)
+  },
   methods: {
     touchtrack: function (element, method, useCancel) {
-      var self = this
-      var x0 = 0
-      var y0 = 0
-      var x1 = 0
-      var y1 = 0
-      var fn = function ($event, state, x, y) {
+      const self = this
+      let x0 = 0
+      let y0 = 0
+      let x1 = 0
+      let y1 = 0
+      const fn = function ($event, state, x, y) {
         if (self[method]({
           target: $event.target,
           currentTarget: $event.currentTarget,
@@ -43,8 +47,11 @@ export default {
         }
       }
 
-      var $eventOld = null
+      let $eventOld = null
+      let hasTouchStart
+      let hasMouseDown
       addListenerToElement(element, 'touchstart', function ($event) {
+        hasTouchStart = true
         if ($event.touches.length === 1 && !$eventOld) {
           $eventOld = $event
           x0 = x1 = $event.touches[0].pageX
@@ -52,23 +59,54 @@ export default {
           return fn($event, 'start', x0, y0)
         }
       })
+      addListenerToElement(element, 'mousedown', function ($event) {
+        hasMouseDown = true
+        if (!hasTouchStart && !$eventOld) {
+          // TODO touches changedTouches
+          $eventOld = $event
+          x0 = x1 = $event.pageX
+          y0 = y1 = $event.pageY
+          return fn($event, 'start', x0, y0)
+        }
+      })
       addListenerToElement(element, 'touchmove', function ($event) {
         if ($event.touches.length === 1 && $eventOld) {
-          var res = fn($event, 'move', $event.touches[0].pageX, $event.touches[0].pageY)
+          const res = fn($event, 'move', $event.touches[0].pageX, $event.touches[0].pageY)
           x1 = $event.touches[0].pageX
           y1 = $event.touches[0].pageY
           return res
         }
       })
+      const mouseMoveEventListener = this.__mouseMoveEventListener = function ($event) {
+        if (!hasTouchStart && hasMouseDown && $eventOld) {
+          // TODO target currentTarget touches changedTouches
+          const res = fn($event, 'move', $event.pageX, $event.pageY)
+          x1 = $event.pageX
+          y1 = $event.pageY
+          return res
+        }
+      }
+      document.addEventListener('mousemove', mouseMoveEventListener)
       addListenerToElement(element, 'touchend', function ($event) {
         if ($event.touches.length === 0 && $eventOld) {
+          hasTouchStart = false
           $eventOld = null
           return fn($event, 'end', $event.changedTouches[0].pageX, $event.changedTouches[0].pageY)
         }
       })
+      const mouseUpEventListener = this.__mouseUpEventListener = function ($event) {
+        hasMouseDown = false
+        if (!hasTouchStart && $eventOld) {
+          // TODO target currentTarget touches changedTouches
+          $eventOld = null
+          return fn($event, 'end', $event.pageX, $event.pageY)
+        }
+      }
+      document.addEventListener('mouseup', mouseUpEventListener)
       addListenerToElement(element, 'touchcancel', function ($event) {
         if ($eventOld) {
-          var $eventTemp = $eventOld
+          hasTouchStart = false
+          const $eventTemp = $eventOld
           $eventOld = null
           return fn($event, useCancel ? 'cancel' : 'end', $eventTemp.touches[0].pageX, $eventTemp.touches[0].pageY)
         }

src/platforms/h5/components/app/tabBar.vue

@@ -100,6 +100,7 @@ uni-tabbar .uni-tabbar__bd {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 uni-tabbar .uni-tabbar__icon {

src/platforms/h5/components/page/pageHead.vue

@@ -175,6 +175,7 @@ uni-page-head .uni-page-head-bd {
   margin: 0 2px;
   word-break: keep-all;
   white-space: pre;
+  cursor: pointer;
 }
 
 .uni-page-head-transparent .uni-page-head-btn {

src/platforms/h5/view/components/picker/index.vue

 <template>
   <uni-picker
+    :disabled="disabled"
     @click.stop="_show"
     v-on="$listeners">
     <div
@@ -438,6 +439,15 @@ export default {
 <style>
 uni-picker {
   display: block;
+  cursor: pointer;
+}
+
+uni-picker[hidden] {
+  display: none;
+}
+
+uni-picker[disabled] {
+  cursor: not-allowed;
 }
 
 .uni-picker-container {
@@ -526,6 +536,7 @@ uni-picker {
   font-size: 17px;
   line-height: 45px;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .uni-picker-container .uni-picker-action.uni-picker-action-cancel {

src/platforms/h5/view/components/video/index.vue

@@ -787,6 +787,7 @@ uni-video[hidden] {
   background-size: 50%;
   background-repeat: no-repeat;
   background-position: 50% 50%;
+  cursor: pointer;
 }
 
 .uni-video-cover-duration {
@@ -831,6 +832,7 @@ uni-video[hidden] {
   padding: 14.5px 12.5px 14.5px 12.5px;
   margin-left: -8.5px;
   box-sizing: content-box;
+  cursor: pointer;
 }
 
 .uni-video-control-button::after {
@@ -873,6 +875,7 @@ uni-video[hidden] {
   margin: 21px 12px;
   background-color: rgba(255, 255, 255, 0.4);
   position: relative;
+  cursor: pointer;
 }
 
 .uni-video-progress-buffered {
@@ -912,6 +915,7 @@ uni-video[hidden] {
   font-size: 13px;
   color: #fff;
   margin: 0 8.5px;
+  cursor: pointer;
 }
 
 .uni-video-danmu-button.uni-video-danmu-button-active {
@@ -928,6 +932,7 @@ uni-video[hidden] {
   background-size: 50%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
+  cursor: pointer;
 }
 
 .uni-video-fullscreen.uni-video-type-fullscreen {