quasar 2.11.7 → 2.11.9

package/src/components/editor/QEditor.json

@@ -269,6 +269,56 @@
           "desc": "The pure HTML of the content"
         }
       }
+    },
+
+    "dropdown-show": {
+      "desc": "Emitted after a dropdown in the toolbar has triggered show()",
+      "params": {
+        "evt": {
+          "extends": "evt"
+        }
+      },
+      "addedIn": "v2.11.8"
+    },
+
+    "dropdown-before-show": {
+      "desc": "Emitted when a dropdown in the toolbar triggers show() but before it finishes doing it",
+      "params": {
+        "evt": {
+          "extends": "evt"
+        }
+      },
+      "addedIn": "v2.11.8"
+    },
+
+    "dropdown-hide": {
+      "desc": "Emitted after a dropdown in the toolbar has triggered hide()",
+      "params": {
+        "evt": {
+          "extends": "evt"
+        }
+      },
+      "addedIn": "v2.11.8"
+    },
+
+    "dropdown-before-hide": {
+      "desc": "Emitted when a dropdown in the toolbar triggers hide() but before it finishes doing it",
+      "params": {
+        "evt": {
+          "extends": "evt"
+        }
+      },
+      "addedIn": "v2.11.8"
+    },
+
+    "link-show": {
+      "desc": "Emitted when the toolbar for editing a link is shown",
+      "addedIn": "v2.11.9"
+    },
+
+    "link-hide": {
+      "desc": "Emitted when the toolbar for editing a link is hidden",
+      "addedIn": "v2.11.9"
     }
   },
 

package/src/components/editor/editor-utils.js

@@ -156,7 +156,11 @@ function getDropdown (eVm, btn) {
     textColor: highlight && !eVm.props.toolbarPush ? null : eVm.props.toolbarTextColor,
     label: btn.fixedLabel ? btn.label : label,
     icon: btn.fixedIcon ? (btn.icon !== null ? btn.icon : void 0) : icon,
-    contentClass
+    contentClass,
+    onShow: evt => eVm.emit('dropdownShow', evt),
+    onHide: evt => eVm.emit('dropdownHide', evt),
+    onBeforeShow: evt => eVm.emit('dropdownBeforeShow', evt),
+    onBeforeHide: evt => eVm.emit('dropdownBeforeHide', evt)
   }, () => Items)
 
   return Dropdown

package/src/components/field/QField.sass

@@ -133,8 +133,14 @@ $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
@@ -438,8 +444,14 @@ $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

@@ -41,7 +41,7 @@ export default createComponent({
   emits: [
     ...useFieldEmits,
     'paste', 'change',
-    'keydown', 'animationend'
+    'keydown', 'click', 'animationend'
   ],
 
   setup (props, { emit, attrs }) {
@@ -59,7 +59,8 @@ export default createComponent({
       hasMask,
       moveCursorForPaste,
       updateMaskValue,
-      onMaskedKeydown
+      onMaskedKeydown,
+      onMaskedClick
     } = useMask(props, emit, emitValue, inputRef)
 
     const formDomProps = useFileFormDomProps(props, /* type guard */ true)
@@ -96,6 +97,8 @@ export default createComponent({
 
       if (hasMask.value === true) {
         evt.onKeydown = onMaskedKeydown
+        // reset selection anchor on pointer selection
+        evt.onClick = onMaskedClick
       }
 
       if (props.autogrow === true) {
@@ -305,18 +308,29 @@ export default createComponent({
         const inp = inputRef.value
         if (inp !== null) {
           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 } = $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
-          $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
         }
       })
     }
@@ -393,7 +407,10 @@ export default createComponent({
       hasValue,
 
       floatingLabel: computed(() =>
-        hasValue.value === true
+        (
+          hasValue.value === true
+          && (props.type !== 'number' || isNaN(innerValue.value) === false)
+        )
         || fieldValueIsFilled(props.displayValue)
       ),
 

package/src/components/input/use-mask.js

@@ -44,7 +44,7 @@ export const useMaskProps = {
 }
 
 export default function (props, emit, emitValue, inputRef) {
-  let maskMarked, maskReplaced, computedMask, computedUnmask
+  let maskMarked, maskReplaced, computedMask, computedUnmask, pastedTextStart, selectionAnchor
 
   const hasMask = ref(null)
   const innerValue = ref(getInitialMaskedValue())
@@ -246,8 +246,15 @@ export default function (props, emit, emitValue, inputRef) {
       }
 
       if (inputType === 'insertFromPaste' && props.reverseFillMask !== true) {
-        const cursor = end - 1
-        moveCursor.right(inp, cursor, cursor)
+        const maxEnd = inp.selectionEnd
+        let cursor = end - 1
+        // each non-marker char means we move once to right
+        for (let i = pastedTextStart; i <= cursor && i < maxEnd; i++) {
+          if (maskMarked[ i ] !== MARKER) {
+            cursor++
+          }
+        }
+        moveCursor.right(inp, cursor)
 
         return
       }
@@ -273,7 +280,7 @@ export default function (props, emit, emitValue, inputRef) {
             inp.setSelectionRange(cursor, cursor, 'forward')
           }
           else {
-            moveCursor.rightReverse(inp, cursor, cursor)
+            moveCursor.rightReverse(inp, cursor)
           }
         }
         else {
@@ -284,11 +291,11 @@ export default function (props, emit, emitValue, inputRef) {
       else {
         if (changed === true) {
           const cursor = Math.max(0, maskMarked.indexOf(MARKER), Math.min(preMasked.length, end) - 1)
-          moveCursor.right(inp, cursor, cursor)
+          moveCursor.right(inp, cursor)
         }
         else {
           const cursor = end - 1
-          moveCursor.right(inp, cursor, cursor)
+          moveCursor.right(inp, cursor)
         }
       }
     })
@@ -304,74 +311,72 @@ export default function (props, emit, emitValue, inputRef) {
     const preMasked = maskValue(unmaskValue(inp.value))
 
     start = Math.max(0, maskMarked.indexOf(MARKER), Math.min(preMasked.length, start))
+    pastedTextStart = start
 
     inp.setSelectionRange(start, end, 'forward')
   }
 
   const moveCursor = {
-    left (inp, start, end, selection) {
-      const noMarkBefore = maskMarked.slice(start - 1).indexOf(MARKER) === -1
-      let i = Math.max(0, start - 1)
+    left (inp, cursor) {
+      const noMarkBefore = maskMarked.slice(cursor - 1).indexOf(MARKER) === -1
+      let i = Math.max(0, cursor - 1)
 
       for (; i >= 0; i--) {
         if (maskMarked[ i ] === MARKER) {
-          start = i
-          noMarkBefore === true && start++
+          cursor = i
+          noMarkBefore === true && cursor++
           break
         }
       }
 
       if (
         i < 0
-        && maskMarked[ start ] !== void 0
-        && maskMarked[ start ] !== MARKER
+        && maskMarked[ cursor ] !== void 0
+        && maskMarked[ cursor ] !== MARKER
       ) {
-        return moveCursor.right(inp, 0, 0)
+        return moveCursor.right(inp, 0)
       }
 
-      start >= 0 && inp.setSelectionRange(
-        start,
-        selection === true ? end : start, 'backward'
-      )
+      cursor >= 0 && inp.setSelectionRange(cursor, cursor, 'backward')
     },
 
-    right (inp, start, end, selection) {
+    right (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 (maskMarked[ i ] === MARKER) {
-          end = i
+          cursor = i
           break
         }
         else if (maskMarked[ i - 1 ] === MARKER) {
-          end = i
+          cursor = i
         }
       }
 
       if (
         i > limit
-        && maskMarked[ end - 1 ] !== void 0
-        && maskMarked[ end - 1 ] !== MARKER
+        && maskMarked[ cursor - 1 ] !== void 0
+        && maskMarked[ cursor - 1 ] !== MARKER
       ) {
-        return moveCursor.left(inp, limit, limit)
+        return moveCursor.left(inp, limit)
       }
 
-      inp.setSelectionRange(selection ? start : end, end, 'forward')
+      inp.setSelectionRange(cursor, cursor, 'forward')
     },
 
-    leftReverse (inp, start, end, selection) {
+    leftReverse (inp, cursor) {
       const
         localMaskMarked = getPaddedMaskMarked(inp.value.length)
-      let i = Math.max(0, start - 1)
+      let i = Math.max(0, cursor - 1)
 
       for (; i >= 0; i--) {
         if (localMaskMarked[ i - 1 ] === MARKER) {
-          start = i
+          cursor = i
           break
         }
         else if (localMaskMarked[ i ] === MARKER) {
-          start = i
+          cursor = i
           if (i === 0) {
             break
           }
@@ -380,45 +385,48 @@ export default function (props, emit, emitValue, inputRef) {
 
       if (
         i < 0
-        && localMaskMarked[ start ] !== void 0
-        && localMaskMarked[ start ] !== MARKER
+        && localMaskMarked[ cursor ] !== void 0
+        && localMaskMarked[ cursor ] !== MARKER
       ) {
-        return moveCursor.rightReverse(inp, 0, 0)
+        return moveCursor.rightReverse(inp, 0)
       }
 
-      start >= 0 && inp.setSelectionRange(
-        start,
-        selection === true ? end : start, 'backward'
-      )
+      cursor >= 0 && inp.setSelectionRange(cursor, cursor, 'backward')
     },
 
-    rightReverse (inp, start, end, selection) {
+    rightReverse (inp, cursor) {
       const
         limit = inp.value.length,
         localMaskMarked = getPaddedMaskMarked(limit),
-        noMarkBefore = localMaskMarked.slice(0, end + 1).indexOf(MARKER) === -1
-      let i = Math.min(limit, end + 1)
+        noMarkBefore = localMaskMarked.slice(0, cursor + 1).indexOf(MARKER) === -1
+      let i = Math.min(limit, cursor + 1)
 
       for (; i <= limit; i++) {
         if (localMaskMarked[ i - 1 ] === MARKER) {
-          end = i
-          end > 0 && noMarkBefore === true && end--
+          cursor = i
+          cursor > 0 && noMarkBefore === true && cursor--
           break
         }
       }
 
       if (
         i > limit
-        && localMaskMarked[ end - 1 ] !== void 0
-        && localMaskMarked[ end - 1 ] !== MARKER
+        && localMaskMarked[ cursor - 1 ] !== void 0
+        && localMaskMarked[ cursor - 1 ] !== MARKER
       ) {
-        return moveCursor.leftReverse(inp, limit, limit)
+        return moveCursor.leftReverse(inp, limit)
       }
 
-      inp.setSelectionRange(selection === true ? start : end, end, 'forward')
+      inp.setSelectionRange(cursor, cursor, 'forward')
     }
   }
 
+  function onMaskedClick (e) {
+    emit('click', e)
+
+    selectionAnchor = void 0
+  }
+
   function onMaskedKeydown (e) {
     emit('keydown', e)
 
@@ -431,25 +439,40 @@ export default function (props, emit, emitValue, inputRef) {
       start = inp.selectionStart,
       end = inp.selectionEnd
 
+    if (!e.shiftKey) {
+      selectionAnchor = void 0
+    }
+
     if (e.keyCode === 37 || e.keyCode === 39) { // Left / Right
+      if (e.shiftKey && selectionAnchor === void 0) {
+        selectionAnchor = inp.selectionDirection === 'forward' ? start : end
+      }
+
       const fn = moveCursor[ (e.keyCode === 39 ? 'right' : 'left') + (props.reverseFillMask === true ? 'Reverse' : '') ]
 
       e.preventDefault()
-      fn(inp, start, end, e.shiftKey)
+      fn(inp, selectionAnchor === start ? end : start)
+
+      if (e.shiftKey) {
+        const cursor = inp.selectionStart
+        inp.setSelectionRange(Math.min(selectionAnchor, cursor), Math.max(selectionAnchor, cursor), 'forward')
+      }
     }
     else if (
       e.keyCode === 8 // Backspace
       && props.reverseFillMask !== true
       && start === end
     ) {
-      moveCursor.left(inp, start, end, true)
+      moveCursor.left(inp, start)
+      inp.setSelectionRange(inp.selectionStart, end, 'backward')
     }
     else if (
       e.keyCode === 46 // Delete
       && props.reverseFillMask === true
       && start === end
     ) {
-      moveCursor.rightReverse(inp, start, end, true)
+      moveCursor.rightReverse(inp, end)
+      inp.setSelectionRange(start, inp.selectionEnd, 'forward')
     }
   }
 
@@ -540,6 +563,7 @@ export default function (props, emit, emitValue, inputRef) {
     hasMask,
     moveCursorForPaste,
     updateMaskValue,
-    onMaskedKeydown
+    onMaskedKeydown,
+    onMaskedClick
   }
 }