feat: quasarframework#29 Finalized Datetime for Material Theme; Add Utils.throttle()

Author: rstoenescu

src/utils.js

@@ -1,5 +1,6 @@
 import openURL from './utils/open-url'
 import debounce from './utils/debounce'
+import throttle from './utils/throttle'
 import * as dom from './utils/dom'
 import * as event from './utils/event'
 import extend from './utils/extend'
@@ -8,6 +9,7 @@ import uid from './utils/uid'
 export default {
   openURL,
   debounce,
+  throttle,
   extend,
   dom,
   uid,

src/utils/debounce.js

@@ -1,7 +1,7 @@
 
 let now = Date.now
 
-export default function (func, wait, immediate) {
+export default function (fn, wait = 250, immediate) {
   let
     timeout, args, context, timestamp, result,
     later = () => {
@@ -13,7 +13,7 @@ export default function (func, wait, immediate) {
       else {
         timeout = null
         if (!immediate) {
-          result = func.apply(context, args)
+          result = fn.apply(context, args)
           if (!timeout) {
             context = args = null
           }
@@ -31,7 +31,7 @@ export default function (func, wait, immediate) {
       timeout = setTimeout(later, wait)
     }
     if (callNow) {
-      result = func.apply(context, args)
+      result = fn.apply(context, args)
       context = args = null
     }
 

src/utils/throttle.js

@@ -0,0 +1,15 @@
+export default function (fn, limit = 250) {
+  let wait = false
+
+  return function (...args) {
+    if (wait) {
+      return
+    }
+
+    wait = true
+    fn.apply(this, args)
+    setTimeout(() => {
+      wait = false
+    }, limit)
+  }
+}

src/vue-components/datetime/datetime-modal.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <quasar-inline-datetime :model.sync="model" :type="type">
+    <quasar-inline-datetime :model.sync="model" :type="type" class="no-border">
       <div class="modal-buttons row full-width">
         <button @click="close()" class="primary clear">{{ cancelLabel }}</button>
         <button @click="set(model)" class="primary clear">{{ okLabel }}</button>

src/vue-components/datetime/datetime.mat.styl

@@ -19,6 +19,9 @@
 .quasar-datetime-time
   padding 10px 0
 
+div + .quasar-datetime-time
+  padding-top 0
+
 .quasar-datetime-ampm
   font-size .9rem
 
@@ -36,7 +39,7 @@
 .quasar-datetime-clockstring
   font-size 2.7rem
 
-.quasar-datetime-selecter
+.quasar-datetime-selector
   height 330px
   overflow auto
 
@@ -80,6 +83,7 @@
 .quasar-datetime-view-year, .quasar-datetime-view-month
   button
     font-weight normal
+    text-transform capitalize
     color rgba(0, 0, 0, .87) !important
     &.active
       font-size 1.5rem
@@ -146,32 +150,34 @@
   padding 0
   transform translate(-50%, -50%)
   border-radius 50%
-  &:hover
-    background $grey-2
   &.active
     color opposite-non-color($primary)
     background $primary
 
+body.desktop .quasar-datetime-clock-position:hover
+  background $grey-2
+
 for $pos in 0..12
-  $angle = 30 * $pos
-  $degree = (270 + $angle)
+  $degree = (270 + 30 * $pos)
   .quasar-datetime-clock-pos-{$pos}
     top (((1 + sin($degree * 1deg)) * 100%) / 2)
-    left (((1 + cos($degree * 1 deg)) * 100%) / 2)
+    left (((1 + cos($degree * 1deg)) * 100%) / 2)
 
 @media (max-width $layout-medium-max)
-  .quasar-datetime
-    width 290px
   .quasar-datetime-ampm
     margin-left 1.5rem
   .quasar-datetime-datestring span
     margin 10px 5px
     &.small
       margin-top 1.3rem
+  .quasar-datetime
+    width 290px
+    &:not(.no-border) .quasar-datetime-content
+      border-width 0 1px 1px 1px
+      border-style solid
+      border-color $grey-4
 
 @media (min-width $layout-big-min)
-  .quasar-datetime
-    width 520px
   .quasar-datetime-datestring
     padding 10px 0
   .quasar-datetime-ampm
@@ -188,3 +194,9 @@ for $pos in 0..12
     right 0
   .quasar-datetime-content
     width 290px
+  .quasar-datetime
+    width 520px
+    &:not(.no-border) .quasar-datetime-content
+      border-width 1px 1px 1px 0
+      border-style solid
+      border-color $grey-4

src/vue-components/datetime/inline-datetime.vue

@@ -63,9 +63,9 @@
       </div>
     </div>
     <div class="quasar-datetime-content auto column">
-      <div v-el:selecter class="quasar-datetime-selecter auto row items-center justify-center">
+      <div v-el:selector class="quasar-datetime-selector auto row items-center justify-center">
         <div
-          v-show="view === 'year'"
+          v-if="view === 'year'"
           class="quasar-datetime-view-year full-width full-height"
         >
           <button
@@ -79,7 +79,7 @@
         </div>
 
         <div
-          v-show="view === 'month'"
+          v-if="view === 'month'"
           class="quasar-datetime-view-month full-width full-height"
         >
           <button
@@ -93,7 +93,7 @@
         </div>
 
         <div
-          v-show="view === 'day'"
+          v-if="view === 'day'"
           class="quasar-datetime-view-day quasar-datetime-animate"
         >
           <div class="row items-center content-center">
@@ -136,12 +136,12 @@
         </div>
 
         <div
-          v-show="view === 'hour' || view === 'minute'"
+          v-if="view === 'hour' || view === 'minute'"
           v-el:clock
           class="column items-center content-center justify-center"
         >
           <div
-            v-show="view === 'hour'"
+            v-if="view === 'hour'"
             class="quasar-datetime-clock cursor-pointer"
             @mousedown="__dragStart"
             @mousemove="__dragMove"
@@ -166,7 +166,7 @@
           </div>
 
           <div
-            v-show="view === 'minute'"
+            v-if="view === 'minute'"
             class="quasar-datetime-clock cursor-pointer"
             @mousedown="__dragStart"
             @mousemove="__dragMove"
@@ -247,7 +247,7 @@ export default {
       }
 
       let
-        view = this.$els.selecter,
+        view = this.$els.selector,
         rows = value === 'year' ? this.year - 1900 : this.month
 
       this.$nextTick(() => {
@@ -351,9 +351,8 @@ export default {
       return (unit < 10 ? filler || '0' : '') + unit
     },
     __dragStart (ev) {
-      if (this.dragging) {
-        return
-      }
+      ev.stopPropagation()
+      ev.preventDefault()
 
       let
         clock = this.$els.clock,
@@ -371,9 +370,13 @@ export default {
       if (!this.dragging) {
         return
       }
+      ev.stopPropagation()
+      ev.preventDefault()
       this.__updateClock(ev)
     },
     __dragStop (ev) {
+      ev.stopPropagation()
+      ev.preventDefault()
       this.dragging = false
       if (this.view === 'hour') {
         this.view = 'minute'