quasar 1.22.6 → 1.22.8

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "1.22.6",
+  "version": "1.22.8",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/lang/ja.js

@@ -28,7 +28,7 @@ export default {
         weekday: 'short', month: 'short', day: 'numeric'
       }).format(date)
     },
-    firstDayOfWeek: 1, // 0-6, 0 - Sunday, 1 Monday, ...
+    firstDayOfWeek: 0, // 0-6, 0 - Sunday, 1 Monday, ...
     format24h: true, // true
     pluralDay: '日間'
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "1.22.6",
+  "version": "1.22.8",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "module": "src/index.esm.js",
   "typings": "dist/types/index.d.ts",

package/src/components/field/QField.js

@@ -122,7 +122,11 @@ export default Vue.extend({
         this.focused === true ||
         typeof this.inputValue === 'number' ||
         (typeof this.inputValue === 'string' && this.inputValue.length > 0) ||
-        (this.hideSelected !== true && this.hasValue === true) ||
+        (
+          this.hideSelected !== true &&
+          this.hasValue === true &&
+          (this.type !== 'number' || isNaN(this.value) === false)
+        ) ||
         (
           this.displayValue !== void 0 &&
           this.displayValue !== null &&

package/src/components/field/QField.sass

@@ -134,8 +134,15 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
 
     &:-webkit-autofill + .q-field__label
       transform: translateY(-40%) scale(.75)
-    &[type="number"]:invalid + .q-field__label
-      transform: translateY(-40%) scale(.75)
+
+    &[type="color"],
+    &[type="date"],
+    &[type="datetime-local"],
+    &[type="month"],
+    &[type="time"],
+    &[type="week"]
+      + .q-field__label
+        transform: translateY(-40%) scale(.75)
 
     &:invalid
       box-shadow: none
@@ -439,8 +446,15 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     .q-field__native, .q-field__input
       &:-webkit-autofill + .q-field__label
         transform: translateY(-30%) scale(.75)
-      &[type="number"]:invalid + .q-field__label
-        transform: translateY(-30%) scale(.75)
+
+      &[type="color"],
+      &[type="date"],
+      &[type="datetime-local"],
+      &[type="month"],
+      &[type="time"],
+      &[type="week"]
+        + .q-field__label
+          transform: translateY(-30%) scale(.75)
 
   &--borderless, &--standard
 

package/src/components/field/QField.styl

@@ -134,8 +134,15 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
 
     &:-webkit-autofill + .q-field__label
       transform: translateY(-40%) scale(.75)
-    &[type="number"]:invalid + .q-field__label
-      transform: translateY(-40%) scale(.75)
+
+    &[type="color"],
+    &[type="date"],
+    &[type="datetime-local"],
+    &[type="month"],
+    &[type="time"],
+    &[type="week"]
+      + .q-field__label
+        transform: translateY(-40%) scale(.75)
 
     &:invalid
       box-shadow: none
@@ -439,8 +446,15 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
     .q-field__native, .q-field__input
       &:-webkit-autofill + .q-field__label
         transform: translateY(-30%) scale(.75)
-      &[type="number"]:invalid + .q-field__label
-        transform: translateY(-30%) scale(.75)
+
+      &[type="color"],
+      &[type="date"],
+      &[type="datetime-local"],
+      &[type="month"],
+      &[type="time"],
+      &[type="week"]
+        + .q-field__label
+          transform: translateY(-30%) scale(.75)
 
   &--borderless, &--standard
 

package/src/components/input/QInput.js

@@ -142,6 +142,8 @@ export default Vue.extend({
 
       if (this.hasMask === true) {
         on.keydown = this.__onMaskedKeydown
+        // reset selection anchor on pointer selection
+        on.click = this.__onMaskedClick
       }
 
       if (this.autogrow === true) {
@@ -291,18 +293,29 @@ export default Vue.extend({
         const inp = this.$refs.input
         if (inp !== void 0) {
           const parentStyle = inp.parentNode.style
-          const { overflow } = inp.style
+          // chrome does not keep scroll #15498
+          const { scrollTop } = inp
+          // chrome calculates a smaller scrollHeight when in a .column container
+          const { overflowY, maxHeight } = this.$q.platform.is.firefox === true
+            ? {}
+            : window.getComputedStyle(inp)
+          // on firefox or if overflowY is specified as scroll #14263, #14344
+          // we don't touch overflow
+          // firefox is not so bad in the end
+          const changeOverflow = overflowY !== void 0 && overflowY !== 'scroll'
 
           // reset height of textarea to a small size to detect the real height
           // but keep the total control size the same
-          // Firefox rulez #14263, #14344
-          this.$q.platform.is.firefox !== true && (inp.style.overflow = 'hidden')
+          changeOverflow === true && (inp.style.overflowY = 'hidden')
           parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
           inp.style.height = '1px'
 
           inp.style.height = inp.scrollHeight + 'px'
-          inp.style.overflow = overflow
+          // we should allow scrollbars only
+          // if there is maxHeight and content is taller than maxHeight
+          changeOverflow === true && (inp.style.overflowY = parseInt(maxHeight, 10) < inp.scrollHeight ? 'auto' : 'hidden')
           parentStyle.marginBottom = ''
+          inp.scrollTop = scrollTop
         }
       })
     },

package/src/components/table/table-top.js

@@ -43,7 +43,7 @@ export default {
 
         if (topLeft !== void 0) {
           child.push(
-            h('div', { staticClass: 'q-table-control' }, [
+            h('div', { staticClass: 'q-table__control' }, [
               topLeft(this.marginalsScope)
             ])
           )

package/src/mixins/mask.js

@@ -250,8 +250,15 @@ export default {
         }
 
         if (inputType === 'insertFromPaste' && this.reverseFillMask !== true) {
-          const cursor = end - 1
-          this.__moveCursorRight(inp, cursor, cursor)
+          const maxEnd = inp.selectionEnd
+          let cursor = end - 1
+          // each non-marker char means we move once to right
+          for (let i = this.__pastedTextStart; i <= cursor && i < maxEnd; i++) {
+            if (this.maskMarked[i] !== MARKER) {
+              cursor++
+            }
+          }
+          this.__moveCursorRight(inp, cursor)
 
           return
         }
@@ -277,7 +284,7 @@ export default {
               inp.setSelectionRange(cursor, cursor, 'forward')
             }
             else {
-              this.__moveCursorRightReverse(inp, cursor, cursor)
+              this.__moveCursorRightReverse(inp, cursor)
             }
           }
           else {
@@ -288,11 +295,11 @@ export default {
         else {
           if (changed === true) {
             const cursor = Math.max(0, this.maskMarked.indexOf(MARKER), Math.min(preMasked.length, end) - 1)
-            this.__moveCursorRight(inp, cursor, cursor)
+            this.__moveCursorRight(inp, cursor)
           }
           else {
             const cursor = end - 1
-            this.__moveCursorRight(inp, cursor, cursor)
+            this.__moveCursorRight(inp, cursor)
           }
         }
       })
@@ -308,73 +315,71 @@ export default {
       const preMasked = this.__mask(this.__unmask(inp.value))
 
       start = Math.max(0, this.maskMarked.indexOf(MARKER), Math.min(preMasked.length, start))
+      this.__pastedTextStart = start
 
       inp.setSelectionRange(start, end, 'forward')
     },
 
-    __moveCursorLeft (inp, start, end, selection) {
-      const noMarkBefore = this.maskMarked.slice(start - 1).indexOf(MARKER) === -1
-      let i = Math.max(0, start - 1)
+    __moveCursorLeft (inp, cursor) {
+      const noMarkBefore = this.maskMarked.slice(cursor - 1).indexOf(MARKER) === -1
+      let i = Math.max(0, cursor - 1)
 
       for (; i >= 0; i--) {
         if (this.maskMarked[i] === MARKER) {
-          start = i
-          noMarkBefore === true && start++
+          cursor = i
+          noMarkBefore === true && cursor++
           break
         }
       }
 
       if (
         i < 0 &&
-        this.maskMarked[start] !== void 0 &&
-        this.maskMarked[start] !== MARKER
+        this.maskMarked[cursor] !== void 0 &&
+        this.maskMarked[cursor] !== MARKER
       ) {
-        return this.__moveCursorRight(inp, 0, 0)
+        return this.__moveCursorRight(inp, 0)
       }
 
-      start >= 0 && inp.setSelectionRange(
-        start,
-        selection === true ? end : start, 'backward'
-      )
+      cursor >= 0 && inp.setSelectionRange(cursor, cursor, 'backward')
     },
 
-    __moveCursorRight (inp, start, end, selection) {
+    __moveCursorRight (inp, cursor) {
       const limit = inp.value.length
-      let i = Math.min(limit, end + 1)
+      let i = Math.min(limit, cursor + 1)
 
       for (; i <= limit; i++) {
         if (this.maskMarked[i] === MARKER) {
-          end = i
+          cursor = i
           break
         }
         else if (this.maskMarked[i - 1] === MARKER) {
-          end = i
+          cursor = i
         }
       }
 
       if (
         i > limit &&
-        this.maskMarked[end - 1] !== void 0 &&
-        this.maskMarked[end - 1] !== MARKER
+        this.maskMarked[cursor - 1] !== void 0 &&
+        this.maskMarked[cursor - 1] !== MARKER
       ) {
-        return this.__moveCursorLeft(inp, limit, limit)
+        return this.__moveCursorLeft(inp, limit)
       }
 
-      inp.setSelectionRange(selection ? start : end, end, 'forward')
+      inp.setSelectionRange(cursor, cursor, 'forward')
     },
 
-    __moveCursorLeftReverse (inp, start, end, selection) {
+    __moveCursorLeftReverse (inp, cursor) {
       const
         maskMarked = this.__getPaddedMaskMarked(inp.value.length)
-      let i = Math.max(0, start - 1)
+      let i = Math.max(0, cursor - 1)
 
       for (; i >= 0; i--) {
         if (maskMarked[i - 1] === MARKER) {
-          start = i
+          cursor = i
           break
         }
         else if (maskMarked[i] === MARKER) {
-          start = i
+          cursor = i
           if (i === 0) {
             break
           }
@@ -383,42 +388,45 @@ export default {
 
       if (
         i < 0 &&
-        maskMarked[start] !== void 0 &&
-        maskMarked[start] !== MARKER
+        maskMarked[cursor] !== void 0 &&
+        maskMarked[cursor] !== MARKER
       ) {
-        return this.__moveCursorRightReverse(inp, 0, 0)
+        return this.__moveCursorRightReverse(inp, 0)
       }
 
-      start >= 0 && inp.setSelectionRange(
-        start,
-        selection === true ? end : start, 'backward'
-      )
+      cursor >= 0 && inp.setSelectionRange(cursor, cursor, 'backward')
     },
 
-    __moveCursorRightReverse (inp, start, end, selection) {
+    __moveCursorRightReverse (inp, cursor) {
       const
         limit = inp.value.length,
         maskMarked = this.__getPaddedMaskMarked(limit),
-        noMarkBefore = maskMarked.slice(0, end + 1).indexOf(MARKER) === -1
-      let i = Math.min(limit, end + 1)
+        noMarkBefore = maskMarked.slice(0, cursor + 1).indexOf(MARKER) === -1
+      let i = Math.min(limit, cursor + 1)
 
       for (; i <= limit; i++) {
         if (maskMarked[i - 1] === MARKER) {
-          end = i
-          end > 0 && noMarkBefore === true && end--
+          cursor = i
+          cursor > 0 && noMarkBefore === true && cursor--
           break
         }
       }
 
       if (
         i > limit &&
-        maskMarked[end - 1] !== void 0 &&
-        maskMarked[end - 1] !== MARKER
+        maskMarked[cursor - 1] !== void 0 &&
+        maskMarked[cursor - 1] !== MARKER
       ) {
-        return this.__moveCursorLeftReverse(inp, limit, limit)
+        return this.__moveCursorLeftReverse(inp, limit)
       }
 
-      inp.setSelectionRange(selection === true ? start : end, end, 'forward')
+      inp.setSelectionRange(cursor, cursor, 'forward')
+    },
+
+    __onMaskedClick (e) {
+      this.qListeners.click !== void 0 && this.$emit('click', e)
+
+      this.__selectionAnchor = void 0
     },
 
     __onMaskedKeydown (e) {
@@ -433,25 +441,39 @@ export default {
         start = inp.selectionStart,
         end = inp.selectionEnd
 
+      if (!e.shiftKey) {
+        this.__selectionAnchor = void 0
+      }
+
       if (e.keyCode === 37 || e.keyCode === 39) { // Left / Right
+        if (e.shiftKey && this.__selectionAnchor === void 0) {
+          this.__selectionAnchor = inp.selectionDirection === 'forward' ? start : end
+        }
+
         const fn = this['__moveCursor' + (e.keyCode === 39 ? 'Right' : 'Left') + (this.reverseFillMask === true ? 'Reverse' : '')]
 
         e.preventDefault()
-        fn(inp, start, end, e.shiftKey)
+        fn(inp, this.__selectionAnchor === start ? end : start)
+
+        if (e.shiftKey) {
+          const anchor = this.__selectionAnchor
+          const cursor = inp.selectionStart
+          inp.setSelectionRange(Math.min(anchor, cursor), Math.max(anchor, cursor), 'forward')
+        }
       }
       else if (
         e.keyCode === 8 && // Backspace
         this.reverseFillMask !== true &&
         start === end
       ) {
-        this.__moveCursorLeft(inp, start, end, true)
+        this.__moveCursorLeft(inp, start)
       }
       else if (
         e.keyCode === 46 && // Delete
         this.reverseFillMask === true &&
         start === end
       ) {
-        this.__moveCursorRightReverse(inp, start, end, true)
+        this.__moveCursorRightReverse(inp, end)
       }
 
       this.$emit('keydown', e)