feat(ui): small tweaks to events util

Author: rstoenescu

ui/dev/src/pages/form/form.vue

@@ -9,8 +9,11 @@
     <q-toggle v-model="autofocus" label="Autofocus" />
     <q-toggle v-model="dark" label="Dark" :false-value="null" />
     <q-toggle v-model="greedy" label="Greedy" />
+    <q-toggle v-model="customInput" label="Custom Input" />
     <q-option-group class="q-mb-lg" inline v-model="autofocusEl" dense="dense" :options="autofocusEls" />
 
+    <q-btn loading label="loading" @click.native="onClick" />
+    <q-btn label="loading" @click.native="onClick" />
     <q-form
       v-if="show"
       :autofocus="autofocus"
@@ -25,6 +28,7 @@
     >
       <div class="q-col-gutter-md">
         <custom-input
+          v-if="customInput"
           filled
           v-model="customValue"
           label="Custom value *"
@@ -78,8 +82,8 @@
         <q-toggle :dark="dark" v-model="accept" label="I accept the license and terms" :autofocus="autofocusEl === 3" />
 
         <div>
-          <q-btn label="Submit" type="submit" color="primary" />
-          <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
+          <q-btn label="Submit" type="submit" color="primary" loading />
+          <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" loading />
         </div>
       </div>
     </q-form>
@@ -160,7 +164,8 @@ export default {
 
       user: null,
       pwd: null,
-      customValue: ''
+      customValue: '',
+      customInput: true
     }
   },
 
@@ -194,6 +199,11 @@ export default {
 
     onValidationError () {
       console.log('@validation-error')
+    },
+
+    onClick () {
+      this.$q.notify('click')
+      console.log('cliiick')
     }
   }
 }

ui/src/directives/TouchHold.js

@@ -1,6 +1,6 @@
 import { client } from '../plugins/Platform.js'
 import { addEvt, cleanEvt, getTouchTarget } from '../utils/touch.js'
-import { position, leftClick, stopAndPrevent } from '../utils/event.js'
+import { position, leftClick, stopAndPrevent, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/selection.js'
 
 function update (el, binding) {
@@ -38,7 +38,7 @@ export default {
     }
 
     const ctx = {
-      noop () { },
+      noop,
 
       mouseStart (evt) {
         if (typeof ctx.handler === 'function' && leftClick(evt) === true) {

ui/src/directives/TouchPan.js

@@ -1,6 +1,6 @@
 import { client } from '../plugins/Platform.js'
 import { getModifierDirections, updateModifiers, addEvt, cleanEvt, getTouchTarget, shouldStart } from '../utils/touch.js'
-import { position, leftClick, prevent, stop, stopAndPrevent, preventDraggable } from '../utils/event.js'
+import { position, leftClick, prevent, stop, stopAndPrevent, preventDraggable, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/selection.js'
 
 function getChanges (evt, ctx, isFinal) {
@@ -141,7 +141,7 @@ export default {
       modifiers,
       direction: getModifierDirections(modifiers),
 
-      noop () {},
+      noop,
 
       mouseStart (evt) {
         if (shouldStart(evt, ctx) && leftClick(evt)) {

ui/src/directives/TouchRepeat.js

@@ -1,6 +1,6 @@
 import { client } from '../plugins/Platform.js'
 import { addEvt, cleanEvt, getTouchTarget } from '../utils/touch.js'
-import { position, leftClick, stopAndPrevent } from '../utils/event.js'
+import { position, leftClick, stopAndPrevent, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/selection.js'
 import { isKeyCode } from '../utils/key-composition.js'
 
@@ -56,7 +56,7 @@ export default {
       keyboard,
       handler: value,
 
-      noop () {},
+      noop,
 
       mouseStart (evt) {
         if (ctx.event === void 0 && typeof ctx.handler === 'function' && leftClick(evt) === true) {

ui/src/directives/TouchSwipe.js

@@ -1,6 +1,6 @@
 import { client } from '../plugins/Platform.js'
 import { getModifierDirections, updateModifiers, addEvt, cleanEvt, getTouchTarget, shouldStart } from '../utils/touch.js'
-import { position, leftClick, stopAndPrevent, preventDraggable } from '../utils/event.js'
+import { position, leftClick, stopAndPrevent, preventDraggable, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/selection.js'
 
 function parseArg (arg) {
@@ -37,7 +37,7 @@ export default {
       modifiers: modifiers,
       direction: getModifierDirections(modifiers),
 
-      noop () {},
+      noop,
 
       mouseStart (evt) {
         if (shouldStart(evt, ctx) && leftClick(evt)) {

ui/src/mixins/btn.js

@@ -118,13 +118,13 @@ export default {
         colors = `text-${this.textColor}`
       }
 
-      return `q-btn--${this.design} q-btn--${this.isRound === true ? 'round' : 'rectangle'}` +
+      return `q-btn--${this.design} ` +
+        `q-btn--${this.isRound === true ? 'round' : `rectangle${this.rounded === true ? ' q-btn--rounded' : ''}`}` +
         (colors !== void 0 ? ' ' + colors : '') +
         (this.isActionable === true ? ' q-btn--actionable q-focusable q-hoverable' : (this.disable === true ? ' disabled' : '')) +
         (this.fab === true ? ' q-btn--fab' : (this.fabMini === true ? ' q-btn--fab-mini' : '')) +
         (this.noCaps === true ? ' q-btn--no-uppercase' : '') +
         (this.noWrap === true ? '' : ' q-btn--wrap') + // this is for IE11
-        (this.rounded === true && this.isRound !== true ? ' q-btn--rounded' : '') +
         (this.dense === true ? ' q-btn--dense' : '') +
         (this.stretch === true ? ' no-border-radius self-stretch' : '') +
         (this.glossy === true ? ' glossy' : '')

ui/src/utils.js

@@ -4,7 +4,7 @@ import copyToClipboard from './utils/copy-to-clipboard.js'
 import date from './utils/date.js'
 import debounce from './utils/debounce.js'
 import dom from './utils/dom.js'
-import event from './utils/event.js'
+import event, { noop } from './utils/event.js'
 import exportFile from './utils/export-file.js'
 import extend from './utils/extend.js'
 import format from './utils/format.js'
@@ -15,8 +15,6 @@ import scroll from './utils/scroll.js'
 import throttle from './utils/throttle.js'
 import uid from './utils/uid.js'
 
-function noop () {}
-
 export {
   clone,
   colors,

ui/src/utils/event.js

@@ -21,6 +21,8 @@ try {
 }
 catch (e) {}
 
+export function noop () {}
+
 export function leftClick (e) {
   return e.button === 0
 }